/*
 * Vue SPA 版本 — 由 src/ 目录下的 Vue 组件使用
 * 如需修改样式，请在此文件修改（这是主版本）
 * public/shared.css 是静态 HTML 页面使用的副本，请勿重复维护
 */
/* ==================================================================
 * 设计令牌 · Layer 1 — primitives（原始层）
 * 只定义、不直接消费：视图与组件一律使用 Layer 2 semantic 令牌。
 * 前缀 --qb-（券宝）。三层结构与迁移策略见 SDD design.md §1.3.1。
 * 对比度定稿说明（REQ-DS-003，2026-10 按 WCAG 2.1 公式核算）：
 *   草案 #16a34a / #d97706 作正文文本对白底仅 3.3:1 / 3.2:1，
 *   定稿加深为 #15803d / #b45309（对 --bg/--card 均 ≥4.5:1）。
 * ================================================================== */
:root {
  /* 品牌砖红阶（编辑部风定稿 2026-10：--qb-brick-* 取代橙阶；
   * logo/favicon/og 等存量视觉资产已于 2026-10 B9 批次完成砖红置换，旧橙 #FF6B35 生产资产清零）
   * 对比度锚点：500 对纸底 5.8:1 / 白卡 6.4:1；600 对纸底 7.4:1；
   * 700 对纸底 9.2:1；400 为暗色文本档（对暗面 5.0:1） */
  --qb-brick-50: #faf0ee;
  --qb-brick-100: #f3e0dc;
  --qb-brick-300: #d9a296;
  --qb-brick-400: #cc7563;
  --qb-brick-500: #A63A2B;
  --qb-brick-600: #8c2f22;
  --qb-brick-700: #75261c;
  --qb-brick-800: #5e1d16;
  /* 中性暖纸灰阶（10 档，0 最浅；编辑部风：冷紫灰 → 暖纸灰） */
  --qb-neutral-0: #F5F3ED;
  --qb-neutral-1: #FAF9F4;
  --qb-neutral-2: #FFFFFF;
  --qb-neutral-3: #EAE7DF;
  --qb-neutral-4: #DDD8CE;
  --qb-neutral-5: #B3AC9F;
  --qb-neutral-6: #6E675D;
  --qb-neutral-7: #4A443C;
  --qb-neutral-8: #1C1A17;
  --qb-neutral-9: #141210;
  /* 暗色专用面阶（暖黑） */
  --qb-dark-surface: #201d19;
  --qb-dark-surface-alt: #2a2621;
  --qb-dark-border: #3a352e;
  /* 编辑部风衬线栈（定稿：标题衬线、正文无衬线；
   * 消费走 Layer 2 --font-serif，组件不直接引用本令牌） */
  --qb-serif: Georgia, 'Songti SC', 'Noto Serif SC', SimSun, serif;
  /* 无衬线栈（与静态页真理源 --sans 逐字一致；对齐前 body 栈多出 Roboto）；
   * 消费走 Layer 2 --font-sans，组件不直接引用本令牌 */
  --qb-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
    sans-serif;
  /* 语义反馈色（浅色主题文本档；暗色在 [data-theme='dark'] 提亮） */
  --qb-green-600: #15803d;
  --qb-red-600: #dc2626;
  --qb-red-700: #b91c1c;
  --qb-amber-600: #b45309;
  --qb-blue-600: #004e89;
}

/* ==================================================================
 * 设计令牌 · Layer 2 — semantic（语义层）
 * 视图与组件的唯一消费层；现有变量 100% 保留（B1 迁移约束）。
 * 编辑部风重映射（2026-10，WCAG 2.1 核算，对 --bg #F5F3ED / --card #FFF）：
 *   --text 15.7/17.4:1  --text-secondary 8.7/9.6:1  --muted 5.0/5.6:1
 *   --success 4.8/5.1:1 --danger 4.6/4.9:1  --warning 4.9/5.2:1  --info 8.4/8.9:1
 *   --primary = brick-500：对纸底 5.8:1、白卡 6.4:1（正文级达标，
 *   远高于旧橙 2.8:1——但仍保持"文本优先 --primary-strong"的旧纪律，
 *   组件层消费面 B 阶段审计后再放宽）；--primary-strong 亮色 700 档
 *   对纸底 9.2:1，暗色翻转 400 档对暗面 5.0:1；
 *   主色实底（按钮/激活 chip/skip-link）用 --primary-btn 系 + 白字
 *   （500 底 6.4:1、600 底 8.3:1），REQ-DS-003。
 * ================================================================== */
:root {
  /* 表面与文本 */
  --bg: var(--qb-neutral-0);
  --bg-elevated: var(--qb-neutral-1);
  --card: var(--qb-neutral-2);
  --text: var(--qb-neutral-8);
  --text-secondary: var(--qb-neutral-7);
  --muted: var(--qb-neutral-6);
  --placeholder: var(--qb-neutral-5);
  /* 主色表面上的反色文本（hero 渐变、active tab、顶栏 logo 等）
   * 砖红 500/600 底白字：6.4/8.3:1（旧橙底深棕字方案退役） */
  --text-on-primary: #ffffff;
  /* 主色表面上的次级文本（subtitle/说明文字）：brick-100 对 500/600 底 = 5.1/6.5:1 */
  --text-on-primary-secondary: var(--qb-brick-100);
  /* 品牌与交互 */
  --primary: var(--qb-brick-500);
  --primary-hover: var(--qb-brick-600);
  --primary-light: var(--qb-brick-50);
  --primary-light-hover: var(--qb-brick-100);
  /* 主色浅底表面（@aaa/nuxt-ui NoticeBookmark 等共享组件消费）：命名对齐共享组件约定，
   * 值与 --primary-light 同源 brick-50；只作背景不承载文本，文本用 --primary/--primary-strong */
  --primary-weak: var(--qb-brick-50);
  /* 品牌渐变深端（hero 精装页头），组件消费此别名而非 primitive */
  --primary-deep: var(--qb-brick-700);
  /* 文本用主色（对 --card ≥9.6:1）；暗色在 [data-theme='dark'] 翻转为 400 档 */
  --primary-strong: var(--qb-brick-700);
  /* 主色实底表面：按钮/激活 chip/skip-link —— 砖红 500 底 + 白字 6.4:1，
   * hover 600 底 8.3:1；文字一律 --text-on-primary（REQ-DS-003） */
  --primary-btn: var(--qb-brick-500);
  --primary-btn-hover: var(--qb-brick-600);
  --accent: var(--qb-blue-600);
  --accent-light: #ebf5ff;
  --hover-bg: var(--qb-neutral-0);
  /* 边框 */
  --border: var(--qb-neutral-4);
  --border-light: var(--qb-neutral-3);
  /* 反馈色（warning / info 为 B1 新增） */
  --success: var(--qb-green-600);
  --success-light: #f0fdf4;
  --danger: var(--qb-red-600);
  --danger-strong: var(--qb-red-700);
  --danger-light: #fef2f2;
  --warning: var(--qb-amber-600);
  --warning-light: #fffbeb;
  --info: var(--qb-blue-600);
}

/* ==================================================================
 * 设计令牌 · 排印阶梯：8 档字号 × 行高 × 4 档字重（REQ-DS-004）
 * B3–B5 视图改版时消费；标题对应：h1→3xl、h2→2xl、h3→xl、h4→lg、h5/h6→base+medium。
 * ================================================================== */
:root {
  --font-size-2xs: 12px;
  --line-height-2xs: 1.5;
  --font-size-xs: 13px;
  --line-height-xs: 1.6;
  --font-size-sm: 14px;
  --line-height-sm: 1.65;
  --font-size-base: 16px;
  --line-height-base: 1.75;
  --font-size-lg: 18px;
  --line-height-lg: 1.6;
  --font-size-xl: 22px;
  --line-height-xl: 1.5;
  --font-size-2xl: 28px;
  --line-height-2xl: 1.4;
  --font-size-3xl: 36px;
  --line-height-3xl: 1.3;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  /* 编辑部风字体族（2026-10 定稿）：区块级标题（h1/h2）衬线 / 正文与卡片级小标题无衬线；
   * 衬线只挂全局 h1/h2（下方基础层），卡片级 h3+ 继承 body sans——与静态页真理源分工一致 */
  --font-serif: var(--qb-serif);
  --font-sans: var(--qb-sans);
}

/* ==================================================================
 * 设计令牌 · 间距 / 圆角 / 阴影 / 动效 / z-index / 容器（REQ-DS-005）
 * 间距 4px 基数 10 档；圆角与阴影各收敛至 3 档（原 5 档阴影 B8 清理收敛）。
 * 断点锚点：全站仅 768 / 1024 两档（B3-B5 迁移完成 2026-10：
 * 640 段并入 768、480 段并入 767 或删除）；禁止新增非锚点断点。
 * ================================================================== */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-10: 128px;

  --radius-sm: 4px;
  --radius-md: 4px;
  --radius-lg: 4px;

  --shadow-sm: 0 1px 2px rgba(15, 15, 29, 0.04), 0 1px 3px rgba(15, 15, 29, 0.05);
  --shadow-md: 0 4px 16px rgba(15, 15, 29, 0.07), 0 1px 4px rgba(15, 15, 29, 0.04);
  --shadow-lg: 0 8px 32px rgba(15, 15, 29, 0.1), 0 2px 8px rgba(15, 15, 29, 0.05);

  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-decelerate: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 240ms;

  --z-header: 100;
  --z-bottom-nav: 90;
  --z-back-to-top: 80;
  --z-sheet: 200;
  --z-sheet-mask: 190;
  --z-modal: 300;
  --z-toast: 400;
  --z-progress: 500;

  --container-max: 1200px;
  --container-padding: 16px;
  /* 内容列语义限宽（REQ-DS-005 增补）：视图内层限宽只允许消费以下令牌，
   * 禁止再出现 max-width: 800/960/1100px 等字面量（消灭"楼梯状宽度"） */
  --content-measure: 800px; /* 窄内容列：入口卡、表单、FAQ、会员卡 */
  --content-wide: 1100px; /* 宽内容区：确需宽幅的横幅（原则上少用） */
  --reading-measure: 680px; /* 文章/法务正文行宽 */
}

@media (min-width: 768px) {
  :root {
    --container-padding: 24px;
  }
}

/* ==================================================================
 * 设计令牌 · 旧令牌兼容区 —— B8 收敛完成（2026-10）：
 * --transition/--ease-out/--shadow-xs/--shadow/--shadow-hover/--code-border/--radius
 * 已删除（全语料零引用）；--toast-bg/--code-bg 转正 Layer 3 组件令牌。
 * ================================================================== */
:root {
  /* iOS Safari / 刘海屏 安全区域 */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
}

/* ==================================================================
 * 设计令牌 · Layer 3 — component（组件层）
 * 组件作用域别名与细分（--nav-* 值改指 semantic，B2 起由导航组件消费）。
 * ================================================================== */
:root {
  --nav-primary: var(--primary-strong);
  --nav-primary-light: var(--primary-light);
  --nav-bg: var(--card);
  --nav-bg-dark: var(--qb-dark-surface);
  --nav-border: var(--border);
  --nav-text: var(--text);
  --nav-text-secondary: var(--text-secondary);
  --nav-muted: var(--muted);
  --header-height: 56px;
  --bottom-nav-height: 60px;
  --card-padding: var(--space-4);
  --card-gap: var(--space-4);
  /* Toast 背景（编辑部风定稿：暖墨字色即背景，暗色随 --text 反转自动继承；
   * 前景文字亮色 #fff / 暗色见 [data-theme='dark'] .toast） */
  --toast-bg: var(--text);
  /* 代码块背景（ActivityCard 代码条；暗色块重映射） */
  --code-bg: #faf9f7;
}

@media (min-width: 768px) {
  :root {
    --header-height: 64px;
  }
}

@property --border-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

/* ========== 暗色模式全局过渡 ========== */
body.dark-mode-transition,
body.dark-mode-transition *,
body.dark-mode-transition *::before,
body.dark-mode-transition *::after {
  transition:
    background-color 0.3s ease,
    color 0.2s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: 0.01em;
}

/* 编辑部风：区块级标题（h1/h2，页头刊名/栏目题/文章题）衬线；
 * h3+ 卡片级标题继承 body 无衬线，与静态页真理源分工一致。
 * 显式衬线点见各视图：.section-header h2 / .hero-title / .section-title 等区块标题 */
h1,
h2 {
  font-family: var(--font-serif);
}

/* ========== 焦点样式（唯一定义，见文件尾） ========== */

/* ========== 导航栏防闪烁：CSS 加载前隐藏，加载后渐显 ========== */
/* B2 起导航由 AppHeader/BottomNav 常驻渲染，旧 site-nav 防闪烁规则已随组件删除 */

/* ========== 选中文本样式 ========== */
::selection {
  background: rgba(166, 58, 43, 0.2);
  color: inherit;
}
[data-theme='dark'] ::selection {
  background: rgba(166, 58, 43, 0.3);
}

/* ========== 弹层滚动锁（NavMoreSheet / QrModal 打开时） ========== */
body.sheet-open {
  overflow: hidden;
}

/* ========== 滚动条样式 ========== */
html {
  background: var(--bg);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  scrollbar-gutter: stable;
}
#app {
  width: 100%;
  /* 限宽与居中由 App.vue .app-container（--container-max）承担，B2 布局改造 */
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--muted);
}

/* ========== 全局链接样式 ========== */
a {
  color: inherit;
}

/* ========== 图片加载过渡 ========== */
img {
  transition: opacity 0.3s ease;
}
img[loading='lazy'] {
  opacity: 0;
}
img[loading='lazy'].loaded {
  opacity: 1;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ========== 代理招募（haoka/wifi 共享） ========== */

/* ========== 手动暗色模式 — semantic 令牌集中重映射（全站唯一变量映射区） ==========
 * primitives 不在此出现；反馈色统一提亮一档（REQ-DS-003）。
 * 编辑部风暗色（2026-10，暖黑纸墨系，对 --bg #141210 / --card #201d19）：
 *   --text 15.2/13.5:1  --text-secondary 7.6/6.7:1  --muted 5.5/4.9:1
 *   --success 11.0/9.8:1 --danger 7.0/6.2:1  --warning 11.4/10.1:1  --info 8.6/7.7:1
 *   --primary-strong 翻转 brick-400 #cc7563：对 --bg 5.6:1 / --card 5.0:1；
 *   --primary-light 暗色用 brick-300 半透（brick-500 在暗底不可辨）。 */
[data-theme='dark'] {
  /* 表面与文本 */
  --bg: var(--qb-neutral-9);
  --bg-elevated: var(--qb-dark-surface);
  --card: var(--qb-dark-surface);
  --text: #ece9e2;
  --text-secondary: #a8a094;
  --muted: #8f887c;
  --placeholder: #8f887c;
  /* 品牌与交互 */
  --primary-light: rgba(217, 162, 150, 0.14);
  --primary-light-hover: rgba(217, 162, 150, 0.22);
  /* 主色浅底表面暗色：与 --primary-light 同源 brick-300 半透（同上，暗底不用实色 brick-500） */
  --primary-weak: rgba(217, 162, 150, 0.14);
  /* 文本用主色暗色翻转：brick-400 对 --bg/--card ≥5.0:1 */
  --primary-strong: var(--qb-brick-400);
  --accent: #7cb3e8;
  --accent-light: #0c1929;
  --hover-bg: var(--qb-dark-surface-alt);
  /* 边框 */
  --border: var(--qb-dark-border);
  --border-light: #2a2621;
  /* 阴影（暗色加深；品牌阴影用 brick-400 调） */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.2);
  /* 反馈色提亮一档 */
  --success: #4ade80;
  --success-light: #0f2d1a;
  --danger: #f87171;
  --danger-strong: #fca5a5;
  --danger-light: #2d0f0f;
  --warning: #fbbf24;
  --warning-light: #2d2206;
  --info: #7cb3e8;
  /* 扩展 token 暗色适配（--toast-bg 随 Layer 3 var(--text) 自动反转，无需重映射） */
  --code-bg: #1a1714;
  /* Hero 渐变暗色适配 */
}
[data-theme='dark'] {
  background: var(--bg);
  color: var(--text);
}
[data-theme='dark'] .card-code {
  color: #d8d3c8;
}
[data-theme='dark'] .toast {
  color: #141210;
}
[data-theme='dark'] .btn-secondary {
  background: var(--border);
  color: var(--text);
}
[data-theme='dark'] .btn-secondary:hover {
  background: #403a32;
  background: color-mix(in srgb, var(--text) 20%, var(--border));
}

/* ========== 暗色模式切换按钮 ========== */
.dark-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1.5px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  -webkit-user-select: none;
  user-select: none;
}
.dark-toggle:hover {
  border-color: var(--primary);
  color: var(--primary-strong);
}

/* ========== 分享按钮 ========== */
.btn-share {
  background: var(--success-light);
  color: var(--success);
  padding: 8px 12px;
  min-height: 40px;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-standard);
  display: flex;
  align-items: center;
  justify-content: center;
}
.btn-share:hover {
  filter: brightness(0.9);
}
[data-theme='dark'] .btn-share:hover {
  filter: brightness(1.2);
}

/* ========== 骨架屏（所有页面共享） ========== */
.skeleton {
  background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* SEO 预渲染内容：用户不可见，保留给爬虫 */
.prerender {
  display: none;
}

/*
 * JS 加载前的骨架屏占位（纯 CSS，从第一帧生效）
 * 当 #tab-content 仍包含 .prerender 时（JS 还没执行），::before 伪元素显示 shimmer 动画。
 * JS 移除 .prerender 后，:has() 不再匹配，:before 自动消失，无需衔接到 JS 骨架屏。
 */
#tab-content:has(.prerender)::before {
  content: '';
  display: block;
  min-height: 300px;
  background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}
.skeleton-card {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
  box-shadow: var(--shadow-sm);
}
.skeleton-card .skeleton-line {
  height: 14px;
  margin-bottom: 10px;
  border-radius: 6px;
}
.skeleton-card .skeleton-line.short {
  width: 40%;
}
.skeleton-card .skeleton-line.medium {
  width: 70%;
}
.skeleton-card .skeleton-line.full {
  width: 100%;
}
.skeleton-card .skeleton-btn {
  height: 36px;
  border-radius: var(--radius-sm);
  margin-top: 12px;
}
.skeleton-btn-group {
  display: flex;
  gap: 10px;
}
.skeleton-btn.primary {
  flex: 1;
}
.skeleton-btn.secondary {
  flex: 1;
}
.skeleton-img {
  width: 100%;
  height: 160px;
  margin-bottom: 12px;
  border-radius: var(--radius-md);
}
.skeleton-code-box {
  height: 44px;
  width: 100%;
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}
.skeleton-link-url {
  height: 12px;
  width: 50%;
  border-radius: 4px;
  margin-bottom: 12px;
}

/* reduced-motion：停用 shimmer（REQ-A11Y-003） */
@media (prefers-reduced-motion: reduce) {
  .skeleton,
  #tab-content:has(.prerender)::before {
    animation: none;
  }
}

/* ========== Toast 提示（所有页面共享） ========== */
.toast {
  position: fixed;
  bottom: 160px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--toast-bg);
  color: #fff;
  padding: 12px 28px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  z-index: var(--z-toast);
  transition:
    opacity var(--duration-normal),
    transform var(--duration-normal);
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  letter-spacing: 0.02em;
}
.toast.hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(10px);
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
.toast.show {
  animation: toastIn var(--duration-fast) ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .toast,
  .toast.show {
    animation: none;
    transition: none;
  }
}

/* ========== 页面加载进度条（所有页面共享） ========== */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--primary-hover, var(--primary)));
  z-index: 10001;
  transition:
    width 0.3s ease,
    opacity 0.3s ease;
  box-shadow: 0 0 10px var(--primary);
}

/* ========== Tab 容器（所有页面共享） ========== */
.tab-content {
  min-height: 200px;
  min-width: 0;
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== Tab 导航基础样式（所有页面共享） ========== */
.tab-nav {
  display: flex;
  gap: 8px;
  padding: 16px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar {
  display: none;
}
.tab-btn {
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--card);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.tab-btn:hover {
  border-color: var(--primary);
  color: var(--primary-strong);
}
.tab-btn.active {
  background: var(--primary-btn);
  color: var(--text-on-primary);
  border-color: var(--primary-btn);
}
.tab-btn.active .badge {
  background: rgba(255, 255, 255, 0.25);
  color: var(--text-on-primary);
}
[data-theme='dark'] .tab-btn.active {
  background: var(--primary-btn);
  color: var(--text-on-primary);
}
[data-theme='dark'] .tab-btn.active .badge {
  background: rgba(255, 255, 255, 0.25);
  color: var(--text-on-primary);
}

/* ========== 频道页提示条（全站唯一样式，REQ-DS 视觉统一） ========== */
/* .channel-notice 及号卡卡片族（haoka-card-*）已随 Vue scoped 化删除（死类清理 2026-10） */

/* ========== 推广入口卡（全站唯一样式，收敛 3 种旧横幅） ========== */
/* 白卡 + 图标容器 + 标题/副文 + 右侧动作；替代 cross-link-banner / hero-entry-banner 等零散横幅 */
.promo-card {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.promo-card:hover {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
}
.promo-card:active {
  transform: scale(0.99);
}
.promo-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary-strong);
}
.promo-card__icon svg {
  width: 22px;
  height: 22px;
}
.promo-card--accent .promo-card__icon {
  background: var(--accent-light);
  color: var(--accent);
}
.promo-card__body {
  flex: 1;
  min-width: 0;
}
.promo-card__title {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text);
  line-height: 1.4;
}
.promo-card__sub {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--muted);
  line-height: 1.5;
}
.promo-card__action {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary-strong);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.promo-card__action:hover {
  background: var(--primary-light-hover);
}
.promo-card__action:active {
  transform: scale(0.96);
}
[data-theme='dark'] .promo-card__action {
  background: color-mix(in srgb, var(--primary) 18%, transparent);
}

/* ========== 佣金章节（haoka/wifi/wangpan 共享） ========== */
/* trust-bar 定稿：内联于 hero 下方，无独立边框（视图级覆盖一律删除） */
.trust-bar {
  display: flex;
  justify-content: center;
  gap: var(--space-3) var(--space-4);
  flex-wrap: wrap;
  padding: var(--space-1) 0 0;
  margin-bottom: 0;
  border-bottom: none;
}
.trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--success);
}
.trust-item svg {
  flex-shrink: 0;
  color: var(--success);
}

/* ========== 跨页面推荐横幅（haoka/wifi/wangpan 共享） ========== */

/* ========== FAQ 折叠（规则线版式，About/Qunliao/Wifi/HaokaHero 共享） ========== */
.faq-list {
  border-top: 1px solid var(--text);
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-question {
  font-family: var(--font-serif);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  padding: var(--space-3) 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  color: var(--text);
  transition: color var(--duration-fast) var(--ease-standard);
  min-height: 44px; /* 触控目标（REQ-A11Y-001） */
}
.faq-question:hover {
  color: var(--primary);
}
.faq-question::-webkit-details-marker {
  display: none;
}
.faq-question::after {
  content: '▸';
  font-size: var(--font-size-xs);
  color: var(--muted);
  transition: transform var(--duration-fast) var(--ease-standard);
  flex-shrink: 0;
}
.faq-item[open] .faq-question::after {
  transform: rotate(90deg);
}
.faq-answer {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  padding: 0 0 var(--space-3);
  line-height: 1.7;
}

/* FAQ 动效敏感 */
@media (prefers-reduced-motion: reduce) {
  .faq-question,
  .faq-question::after {
    transition: none;
  }
}

/* ========== 通用工具类 ========== */
.hidden {
  display: none;
}

/* ========== 响应式网格（grid-3，768/1024 锚点，B3-B5 迁移完成） ========== */
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-item {
  min-width: 0;
}

/* ========== 标签（tag） ========== */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 3px;
  white-space: nowrap;
  line-height: 1.4;
}
.tag-success {
  color: var(--success, #16a34a);
  background: var(--success-light, #f0fdf4);
}
.tag-default {
  color: var(--muted, #6b7280);
  background: var(--hover-bg, #f5f4f1);
}
.tag-error {
  color: var(--danger-strong, #b91c1c);
  background: var(--danger-light, #fef2f2);
}
[data-theme='dark'] .tag-success {
  color: var(--success);
  background: rgba(22, 163, 74, 0.15);
}
[data-theme='dark'] .tag-default {
  color: #9ca3af;
  background: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .tag-error {
  color: var(--danger);
  background: rgba(220, 38, 38, 0.15);
}

/* ========== 通用卡片（card） ========== */
.card {
  position: relative;
  background: var(--card, #fff);
  border: 1px solid var(--border, #e5e2dd);
  border-radius: 4px;
  padding: 16px;
  transition: border-color 0.2s ease;
}
.card.hoverable {
  cursor: pointer;
}
.card.hoverable:hover {
  border-color: color-mix(in srgb, var(--primary, #a63a2b) 55%, transparent);
}
.card--no-border {
  border: none;
}
.card-header {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 12px;
}

/* ========== 回到顶部按钮（所有页面共享） ========== */
.back-to-top {
  position: fixed;
  bottom: 80px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.9);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  z-index: 999;
}
.back-to-top:hover {
  border-color: var(--primary);
  color: var(--primary-strong);
  background: var(--card);
}
.back-to-top.hidden {
  display: none;
}

/* ========== 暗色模式：共享组件 ========== */
[data-theme='dark'] .back-to-top {
  background: rgba(26, 26, 46, 0.9);
  border-color: rgba(255, 255, 255, 0.08);
}

/* ========== 减少动画偏好 ========== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ========== 焦点样式（唯一定义，不设 border-radius：避免覆盖药丸形按钮自身圆角） ========== */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ========== 卡片内容排版 ========== */
.card-name {
  line-height: 1.5;
  letter-spacing: 0.02em;
}

/* ========== 按钮内联图标对齐 ========== */
.btn-copy svg,
.btn-go svg,
.btn-qr svg,
.btn-share svg {
  flex-shrink: 0;
}

/* ========== 微交互：卡片按钮点击涟漪 ========== */
.btn-copy:active,
.btn-go:active {
  transition-duration: 0.1s;
}

/* ========== 微交互：全局按压反馈（REQ-INTER 统一手感） ========== */
/* 按钮/链接类可点元素按下时轻微下沉，禁用态除外；transform 动画由 reduced-motion 全局兜底 */
button:not(:disabled):active,
a.btn-copy:active,
a.btn-go:active,
a.btn-primary:active,
a.btn-secondary:active,
.tab-btn:active,
.anchor-chip:active,
.back-to-top:active {
  transform: scale(0.97);
}
/* 已有独立 :active transform 的元素不叠加（如 promo-card/__action/cross-link-banner a） */

/* ========== 专业排版：段落间距 ========== */
.card-head + .card-code,
.card-head + .miniapp-tag {
  margin-top: -2px;
}

/* ========== 改进的卡片头部对齐 ========== */
.card-head {
  gap: 8px;
  line-height: 1.4;
}

/* ========== 二维码弹窗（所有页面共享） ========== */
/* qr-overlay / qr-loading / qr-share-* / share-panel 族已随 QrModal/SharePanel Vue scoped 化删除（死类清理 2026-10）；qr-modal 保留（light DOM 仍有消费） */
.qr-modal {
  background: var(--card);
  border-radius: var(--radius-lg);
  width: 300px;
  max-width: 90vw;
  overflow: hidden;
  animation: modalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid var(--border-light);
}
@keyframes modalIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
[data-theme='dark'] .qr-modal {
  border-color: rgba(255, 255, 255, 0.08);
}

/* ========== iOS Safari / 刘海屏 兼容性修复 ========== */
@supports (-webkit-touch-callout: none) {
  /* 仅在 iOS Safari 上应用 */

  /* QR 弹窗适配安全区域 */
  .qr-modal {
    margin: var(--safe-area-inset-top) var(--safe-area-inset-right) var(--safe-area-inset-bottom)
      var(--safe-area-inset-left);
  }

  /* 修复 iOS Safari 100vh 问题 */
  .footer {
    position: -webkit-fixed;
    position: fixed;
    position: fixed;
    bottom: 0;
    bottom: var(--safe-area-inset-bottom);
  }
}

/* ========== stat-badge（light DOM，app.js 动态注入到 #header-stats） ========== */
.stat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--primary-light);
  border: 1px solid color-mix(in srgb, var(--primary) 35%, transparent);
  padding: 7px 14px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-strong);
  white-space: nowrap;
}
.stat-badge strong {
  font-weight: 700;
  font-size: 13px;
}

/* 小屏：toast 上移避开固定底栏（BottomNav 在 <768 显示） */
@media (max-width: 767px) {
  .toast {
    bottom: calc(var(--bottom-nav-height) + 24px + env(safe-area-inset-bottom, 0px));
  }
}

/* ---------- 返回链接 / Hero Logo：已随 PageHero Vue scoped 化删除（死类清理 2026-10） ---------- */

/* ========== Hero 统计徽章响应式（768/1024 锚点，B3-B5 迁移完成） ========== */
@media (min-width: 768px) {
  .hero-stats .stat-badge {
    padding: 8px 16px;
    font-size: 12.5px;
  }
}
@media (min-width: 1024px) {
  .hero-stats .stat-badge {
    padding: 9px 18px;
    font-size: 13px;
  }
  .hero-stats .stat-badge strong {
    font-size: 14px;
  }
}

/* ========== 号卡卡片移动端响应式（<768 移动档统一紧凑，B3-B5 迁移完成） ========== */
@media (max-width: 767px) {
  .trust-bar {
    gap: 12px;
    padding: 12px 0;
  }
  .trust-item {
    font-size: 11px;
  }
  .hero-stats {
    gap: 6px;
  }
  .hero-stats .stat-badge {
    font-size: 11px;
    padding: 6px 10px;
    gap: 4px;
  }
  .hero-stats .stat-badge svg {
    width: 12px;
    height: 12px;
  }
  .hero-stats .stat-badge strong {
    font-size: 12px;
  }
}

/* 暗色组件微调（变量重映射见文件头 [data-theme='dark'] 集中块） */
[data-theme='dark'] .card-code {
  color: #d8d3c8;
}
[data-theme='dark'] .toast {
  color: #141210;
}
[data-theme='dark'] .search-clear:hover {
  background: rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 255, 255, 0.14);
}

/* ========== 响应式：iPad ========== */
@media (min-width: 768px) and (max-width: 1023px) {
  .card-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
  }
}

/* 注：#app / page-hero 响应式间距旧规则已随 B2 布局改造移除，
 * 容器宽度与内边距统一由 App.vue 的 .app-container（--container-max / --container-padding）承担，
 * page-hero 为普通 Vue 组件（非 Web Component），原 ::part 穿透规则无效。*/

/* ========== 二维码弹窗（所有页面共享） ========== */
.qr-modal {
  position: relative;
}

/* ===== 页脚法务链接（隐私政策 / 纠错反馈） ===== */
.legal-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 16px 20px 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted, #64748b);
  text-align: center;
  border-top: 1px solid rgba(120, 120, 120, 0.16);
  margin-top: 4px;
}
.legal-links a {
  color: inherit;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 6px;
  transition:
    color 0.2s,
    background 0.2s;
}
.legal-links a:hover {
  color: var(--brand, #a63a2b);
  background: rgba(166, 58, 43, 0.08);
}
[data-theme='dark'] .legal-links {
  color: #9a9285;
  border-top-color: rgba(255, 255, 255, 0.08);
}
[data-theme='dark'] .legal-links a:hover {
  color: #d9a296;
  background: rgba(166, 58, 43, 0.16);
}

/* 小屏：紧凑排版 */
@media (max-width: 767px) {
  .legal-links {
    padding: 12px 12px 10px;
    gap: 8px 10px;
    font-size: 12px;
  }
}

/* ========== 文本省略号工具类 ========== */
/* 单行省略号 */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 多行省略号（默认2行） */
.text-ellipsis-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ==================================================================
 * 全局版式类（design.md §1.3.5，TASK-019，B3/B4 公共前置）
 * 全部消费令牌零字面量；与各视图 scoped 样式共存（scoped 优先覆盖）。
 * ================================================================== */

/* ---- 卡片网格：统一自适应列 ---- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min-width, 240px), 1fr));
  gap: var(--card-gap, 12px);
}
/* <768 两列起步（REQ-RESP-002），中屏 2–4 列，≥1024 自然 ≥3 列（REQ-RESP-004） */
@media (max-width: 767px) {
  .card-grid {
    --card-min-width: 160px;
  }
}

/* ---- 频道页（REQ-VIEW-003） ---- */
.channel-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}
.channel-section__title {
  font-family: var(--font-serif);
  font-size: var(--font-size-xl, 20px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--text);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-light);
}
.channel-intro {
  padding: var(--space-4);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--font-size-sm, 14px);
  line-height: 1.7;
}
.channel-related {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
}
.channel-related__title {
  font-family: var(--font-serif);
  font-size: var(--font-size-xl, 20px);
  font-weight: var(--font-weight-bold, 700);
  color: var(--text);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-light);
}
.channel-related__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
}
.channel-related__links a {
  padding: var(--space-2) var(--space-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 13px;
  text-decoration: none;
  transition:
    color var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard);
}
.channel-related__links a:hover {
  color: var(--primary-strong);
  border-color: var(--primary);
}

/* ---- 详情页三段式（REQ-VIEW-004） ---- */
/* 内容列（sections/actions）居中限宽 680px 阅读宽；页头全宽。
   实现：flex 容器，页头 width:100% 不收缩，窄列子元素 margin:0 auto 居中 */
.detail-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
}
.detail-layout > .page-hero {
  width: 100%; /* flex column 下防 align 收缩 */
}
.detail-sections {
  max-width: var(--reading-measure, 680px);
  width: 100%;
  margin: 0 auto;
}
.detail-actions {
  max-width: var(--reading-measure, 680px);
  width: 100%;
  margin: 0 auto; /* 与内容列同宽同缘，CTA 对齐阅读列 */
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.detail-actions .btn-primary,
.detail-actions .btn-copy {
  min-height: 44px;
}

/* ---- 文档式页（REQ-VIEW-006） ---- */
.doc-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
}
.doc-body {
  max-width: var(--reading-measure, 680px);
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  color: var(--text-secondary);
  line-height: 1.8;
  font-size: 15px;
}
.doc-body h2 {
  font-family: var(--font-serif);
  color: var(--text);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold, 700);
  margin: var(--space-5) 0 var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-light);
}
.doc-body h2:first-child {
  margin-top: 0;
}
.doc-body a {
  color: var(--primary-strong);
}

/* ---- 404 推荐卡（REQ-VIEW-007）→ 编辑部化：副刊侧栏条目式（与 channel-related 同语言） ---- */
.nf-recommend {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  border-top: 1px solid var(--text);
}
.nf-recommend a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 44px;
  padding: var(--space-2) 2px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: var(--font-size-sm, 14px);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
.nf-recommend a:hover {
  color: var(--primary);
}
.nf-recommend a svg {
  color: var(--muted);
  flex-shrink: 0;
}
.nf-recommend a span {
  font-family: var(--font-serif);
}

/* ==================================================================
 * 频道页编辑部版式（对齐 style-demos/editorial-home.html 定稿语言）
 * 纪律：衬线只用于题，正文无衬线；砖红只作批注与交互色；
 *       规则线 1px 三级；行式条目 + 报纸分栏。
 * 全部消费 Layer 2 语义令牌，零字面量。频道页按需消费。
 * ================================================================== */

/* ---- 栏目头：斜体衬线期号 + 衬线栏目题 + 右侧计数（demo .col-head） ---- */
.ed-col-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px) 0 var(--space-2, 10px);
}
.ed-col-head .no {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-xs, 13px);
  color: var(--primary);
}
.ed-col-head h2 {
  font-family: var(--font-serif);
  font-size: var(--font-size-xl, 22px);
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0;
  color: var(--text);
}
.ed-col-head .sub {
  margin-left: auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-2xs, 11px);
  color: var(--muted);
}

/* ---- 编辑注：砖红左线批注（demo .note），替代卡片式提示 ---- */
.ed-note {
  border-left: 2px solid var(--primary);
  padding: var(--space-3, 12px) var(--space-4, 16px);
  font-size: var(--font-size-xs, 12.5px);
  color: var(--text-secondary);
  line-height: 1.7;
}
.ed-note b {
  color: var(--text);
}
.ed-note i {
  font-family: var(--font-serif);
  color: var(--primary);
}

/* ---- 行式条目：序号 / 名称+批注 / 描述 / 前往（demo .entry，与首页同形） ---- */
.ed-entries {
  border-top: 1px solid var(--text);
}
.ed-entry {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px var(--space-2, 10px);
  align-items: baseline;
  padding: var(--space-3, 12px) 0;
  border-bottom: 1px solid var(--border);
  min-height: 44px;
  text-decoration: none;
  color: inherit;
}
.ed-entry .no {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-xs, 12px);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  grid-row: 1;
}
.ed-entry .nm {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  grid-row: 1;
}
.ed-entry .nm .note {
  font-size: 10px;
  color: var(--primary);
  font-family: var(--font-serif);
  font-style: italic;
  margin-left: 8px;
  white-space: nowrap;
}
.ed-entry .ds {
  font-size: var(--font-size-xs, 12px);
  color: var(--text-secondary);
  grid-column: 2;
  grid-row: 2;
  /* 两行截断：收敛 multi-column 栏底落差（单条错落保留） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
/* 尾列通用定位：跨双行（.go 文字 / .dl 刊期 / .entry-actions 按钮组同构，消费方免 scoped 重复） */
.ed-entry .go,
.ed-entry .dl,
.ed-entry .entry-actions {
  grid-row: 1 / span 2;
}
.ed-entry .go {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--font-size-xs, 12px);
  color: var(--muted);
  white-space: nowrap;
  transition: color var(--duration-fast, 150ms) ease;
}
.ed-entry:hover .go,
.ed-entry:hover .nm {
  color: var(--primary);
}

/* ---- 副刊侧栏条目：阅读型链接列表（demo .side-item） ---- */
.ed-side-list {
  border-top: 1px solid var(--text);
}
.ed-side-item {
  display: flex;
  align-items: center;
  gap: var(--space-2, 10px);
  padding: var(--space-3, 13px) 0;
  border-bottom: 1px solid var(--border);
  min-height: 44px;
  text-decoration: none;
  color: inherit;
}
.ed-side-item .no {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  color: var(--muted);
}
.ed-side-item b {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
}
.ed-side-item span {
  margin-left: auto;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 11px;
  color: var(--muted);
}
.ed-side-item:hover b {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---- 报纸分栏：768 双栏 / 1200 三栏 + 栏间线（demo .entries.twin） ---- */
@media (min-width: 768px) {
  .ed-entries--cols {
    column-count: 2;
    column-gap: var(--space-8, 48px);
    column-rule: 1px solid var(--border);
  }
  .ed-entries--cols .ed-entry {
    break-inside: avoid;
    /* 分栏后内容列窄（~300px）：auto 尾列（.entry-actions 按钮组 ~220px、长 .go）会把中列
       压到 1 字宽——.nm 竖排、.ds 被折叠。栏内条目降级两列三行：
       名称行 / 描述行 / 尾元行（右对齐），中列恢复满宽。 */
    grid-template-columns: 30px 1fr;
    grid-template-rows: auto auto auto;
  }
  .ed-entries--cols .ed-entry .go,
  .ed-entries--cols .ed-entry .dl,
  .ed-entries--cols .ed-entry .entry-actions {
    grid-column: 2;
    grid-row: 3;
    justify-self: end;
  }
}
@media (min-width: 1024px) {
  .ed-entries--cols {
    column-count: 3;
    column-gap: var(--space-8, 40px);
  }
}

/* ---- 动效偏好：编辑部类统一切断 ---- */
@media (prefers-reduced-motion: reduce) {
  .ed-entry .go,
  .ed-side-item b {
    transition: none;
  }
}