/* ============================================================
   E 官网设计系统 v3.1 —— 单一令牌真源 / 双主题 / 全站统一
   ------------------------------------------------------------
   与 v2.0 的关系：v2 是"只改六页"的换脸补丁；v3 把它升级为
   全站唯一真源，解决 v2 遗留下的三个结构问题：
     1) 接入不全 —— 46 页只有 6 页引了本文件；
     2) 令牌不统一 —— 全站并存 6 套配色、18 页各带内联 :root；
     3) 无法换肤 —— 主色写死在规则里，无法整站切换。
   v3 做法：
     · §0 全量令牌（默认主题 ink）
     · §0b 第二套主题 neon（html[data-theme="neon"] 覆盖同名令牌）
     · §0c 把全站 30 个旧变量名全部重定向到令牌
          → 页面里的旧 :root 与硬编码 var() 一律被本文件接管，
            无需逐页删旧样式即可整站换色。
     · §1~§14 组件与版式（沿用 v2 视觉，改为令牌驱动）
   v3.1 追加（针对"表格/标题/字号/留白没有标准"）：
     · §7 重写为完整表格组件（宽度/字号/内距/对齐/滚动一次定死）
     · §0 补齐 h4–h6、lead、metric、micro 字阶与 --sp-* 间距别名
     · §15 排版权威层：标题节奏、h4–h6、正文段距、列表、引用、
           分隔线、图片、语义小字类、标签/徽章/指标数字
     · §16 容器与组件内距收敛（.wrap/.card/.hero/.btn 等）
     · §17 响应式补充（必须位于 §15/§16 之后）
   前提（已实测）：全站 46 页内联样式对 font-size/margin/padding/
   line-height 的 !important 使用为 0 条 → §15~§17 必然生效。
   换主题：assets/js/theme.js 改 html[data-theme]，存 localStorage。
   边界：本文件只含视觉样式，不含任何数据/接口/版本号。
   ============================================================ */

/* ============================================================
   §0 设计令牌 —— 默认主题 ink（靛蓝×紫，冷调）
   ============================================================ */
:root {
  color-scheme: dark;

  /* — 表面 — */
  --bg-base:     #07070f;
  --bg-surface:  #10101e;
  --bg-elevated: #171730;
  --bg-hover:    rgba(139, 148, 255, .10);
  --card:        var(--bg-surface);
  /* — 导航(毛玻璃底，见 §4) — */
  --nav-bg:      rgba(10, 10, 22, .74);
  --nav-h:       52px;
  --subnav-w:    172px;

  /* — 文字 — */
  --text-primary:   #eef0fa;
  --text-secondary: #9aa0bd;
  --text-muted:     #676d8f;
  --text-on-accent: #0a0a16;
  --text-code:      #a9baff;
  --code-bg:        #0b0b1a;

  /* — 品牌 —— */
  --primary:        #6b8afd;
  --primary-strong: #8aa2ff;
  --primary-dim:    rgba(107, 138, 253, .14);
  --secondary:      #b388ff;
  --secondary-dim:  rgba(179, 136, 255, .16);

  /* — 强调(指标/高亮) — */
  --accent:      #ffc95e;
  --accent-dim:  rgba(255, 201, 94, .14);

  /* — 语义 — */
  --success:      #6ee7c8;
  --success-dim:  rgba(110, 231, 200, .14);
  --warning:      #ffc95e;
  --warning-dim:  rgba(255, 201, 94, .14);
  --danger:       #ff6b8b;
  --danger-dim:   rgba(255, 107, 139, .14);
  --info:         #7ec8ff;
  --info-dim:     rgba(126, 200, 255, .14);

  /* — 描边 — */
  --border-subtle: rgba(148, 163, 255, .14);
  --border-strong: rgba(148, 163, 255, .30);

  /* — 光效/阴影（tint 为 rgb 三元组，便于拼 rgba） — */
  --tint:           148, 163, 255;
  --tint-primary:   107, 138, 253;
  --tint-secondary: 179, 136, 255;
  --glow-primary:   0 0 28px rgba(var(--tint-primary), .38);
  --glow-hover:     0 10px 42px rgba(var(--tint-primary), .42);
  --shadow-card:    0 4px 14px rgba(2, 2, 12, .55), 0 1px 0 rgba(255, 255, 255, .05) inset;
  --shadow-pop:     0 18px 50px rgba(3, 3, 18, .65), 0 2px 0 rgba(255, 255, 255, .07) inset;

  /* — 渐变 — */
  --grad-brand:       linear-gradient(120deg, #7aa2ff 0%, #b388ff 55%, #ff8fd4 110%);
  --grad-brand-hover: linear-gradient(120deg, #8fb1ff 0%, #c8a4ff 55%, #ffa3dd 110%);

  /* — 字体 — */
  --font-sans: "SF Pro Display", system-ui, -apple-system, "Segoe UI", Roboto,
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* — 间距(4px 基数) — */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* — 圆角 — */
  --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px; --radius-full: 999px;

  /* — 字阶（v3.1 补全 h4–h6 与辅助档；全站只允许这 10 档 + micro/caption） — */
  --fs-display: 60px; --lh-display: 1.08;
  --fs-h1: 38px;      --lh-h1: 1.18;
  --fs-h2: 28px;      --lh-h2: 1.25;
  --fs-h3: 20px;      --lh-h3: 1.35;
  --fs-h4: 17px;      --lh-h4: 1.4;
  --fs-h5: 15px;      --lh-h5: 1.4;
  --fs-h6: 14px;      --lh-h6: 1.4;
  --fs-lead: 18px;    --lh-lead: 1.6;
  --fs-body: 16px;    --lh-body: 1.65;
  --fs-small: 14px;   --lh-small: 1.5;
  --fs-caption: 12px; --lh-caption: 1.45;
  --fs-micro: 11px;   --lh-micro: 1.4;
  --fs-metric: 32px;  --lh-metric: 1.1;   /* 指标大数字（等宽数位） */
  --fs-code: 13px;                        /* 等宽代码档（等宽字形视觉偏大，故比正文小一档） */

  --container: 1200px;

  /* — 间距（v3.1 语义别名：排版只准用 --sp-*，禁止再写字面 px） — */
  --sp-1: var(--space-1);   --sp-2: var(--space-2);   --sp-3: var(--space-3);
  --sp-4: var(--space-4);   --sp-5: var(--space-6);   --sp-6: var(--space-8);
  --sp-7: var(--space-12);  --sp-8: var(--space-16);
}

/* ============================================================
   §0b 第二套主题 neon（紫×青×琥珀，暖调高饱和）
   只覆盖令牌值，不动任何规则 —— 整站一次换肤。
   ============================================================ */
html[data-theme="neon"] {
  --bg-base:     #070510;
  --bg-surface:  #120c22;
  --bg-elevated: #1a1230;
  --bg-hover:    rgba(139, 92, 246, .12);

  --nav-bg:      rgba(20, 11, 38, .76);

  --text-primary:   #f4f2ff;
  --text-secondary: #a8a3c7;
  --text-muted:     #6f6893;
  --text-on-accent: #0a0616;
  --text-code:      #c9b8ff;
  --code-bg:        #0d0a1a;

  --primary:        #8b5cf6;
  --primary-strong: #a78bfa;
  --primary-dim:    rgba(139, 92, 246, .16);
  --secondary:      #22d3ee;
  --secondary-dim:  rgba(34, 211, 238, .14);

  --accent:     #ffb020;
  --accent-dim: rgba(255, 176, 32, .14);

  --success:     #4ade80;
  --success-dim: rgba(74, 222, 128, .14);
  --warning:     #ffb020;
  --warning-dim: rgba(255, 176, 32, .14);
  --danger:      #ff5f6d;
  --danger-dim:  rgba(255, 95, 109, .14);
  --info:        #22d3ee;
  --info-dim:    rgba(34, 211, 238, .14);

  --border-subtle: rgba(139, 92, 246, .25);
  --border-strong: rgba(139, 92, 246, .45);

  --tint:           139, 92, 246;
  --tint-primary:   139, 92, 246;
  --tint-secondary: 34, 211, 238;

  --grad-brand:       linear-gradient(120deg, #8b5cf6 0%, #22d3ee 55%, #f4f2ff 110%);
  --grad-brand-hover: linear-gradient(120deg, #9d70ff 0%, #4dd6e8 55%, #ffffff 110%);
}

/* ============================================================
   §0c 旧变量名重定向（关键）
   全站 30 个历史变量名 → 统一令牌。本文件在页面内联 <style> 之后
   加载，同特异性下后者胜出，故页面里的旧 :root 与本重定向冲突时
   以本文件为准 —— 旧配色被整站接管，无需逐页改 HTML。
   映射依据 = 逐变量语义侦查（定义值 + 用法上下文），非猜测。
   ============================================================ */
:root {
  /* 表面 */
  --bg:      var(--bg-base);
  /* 文字 */
  --txt:     var(--text-primary);
  --t1:      var(--text-primary);
  --ink:     var(--text-primary);
  --dim:     var(--text-secondary);
  --t2:      var(--text-secondary);
  --ink2:    var(--text-secondary);
  --mut:     var(--text-secondary);
  /* 描边 */
  --line:    var(--border-subtle);
  --bd:      var(--border-subtle);
  --bs:      var(--border-subtle);
  /* 品牌/强调 */
  --pri:     var(--primary);
  --accent:  var(--primary);
  --acc:     var(--primary-strong);
  --pri2:    var(--secondary);
  --acc2:    var(--secondary);
  --vio:     var(--secondary);
  --gold:    var(--warning);
  /* 语义 */
  --ok:      var(--success);
  --okbg:    var(--success-dim);
  --warn:    var(--warning);
  --warnbg:  var(--warning-dim);
  --red:     var(--danger);
  --err:     var(--danger);
  --bad:     var(--danger);
  --must:    var(--danger);
  --mustbg:  var(--danger-dim);
  --opt:     var(--text-muted);
  --optbg:   var(--bg-elevated);
  /* 等宽/代码底 */
  --mono:    var(--font-mono);
  --code:    var(--code-bg);
}

/* ============================================================
   §1 全局基线
   ============================================================ */
html { scroll-behavior: smooth; }

/* 基线为权威级(!important)：全站 30 页的主样式写在 <body> 内的 <style>
   里、晚于本文件生效，不加 !important 会被页面旧规则盖掉背景与字体。 */
body {
  background:
    radial-gradient(ellipse 900px 520px at 85% -10%, rgba(var(--tint-secondary), .12), transparent 60%),
    radial-gradient(ellipse 760px 460px at 8% 4%,   rgba(var(--tint-primary), .10), transparent 62%),
    var(--bg-base) !important;
  background-attachment: fixed !important;
  color: var(--text-primary) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--primary-strong); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--secondary); }
code, pre, kbd, .mono { font-family: var(--font-mono); }
::selection { background: rgba(var(--tint-primary), .35); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(var(--tint), .55), rgba(var(--tint), .28));
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-base);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(var(--tint), .8), rgba(var(--tint), .45)); }

/* ============================================================
   §2 Hero
   ============================================================ */
.hero {
  position: relative;
  padding: 96px 24px 56px !important;
  background:
    radial-gradient(ellipse 70% 90% at 50% -20%, rgba(var(--tint-primary), .22), transparent 65%),
    radial-gradient(ellipse 46% 60% at 82% 8%, rgba(var(--tint-secondary), .16), transparent 62%) !important;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(rgba(var(--tint), .5) 1px, transparent 1px),
    radial-gradient(rgba(var(--tint), .28) 1px, transparent 1px);
  background-size: 42px 42px, 84px 84px;
  background-position: 0 0, 21px 21px;
  -webkit-mask-image: radial-gradient(ellipse 68% 78% at 50% 6%, #000 12%, transparent 72%);
          mask-image: radial-gradient(ellipse 68% 78% at 50% 6%, #000 12%, transparent 72%);
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

.hero h1 {
  font-size: var(--fs-display) !important;
  font-weight: 900 !important;
  letter-spacing: -1.5px;
  line-height: var(--lh-display);
  background: var(--grad-brand) !important;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 0 26px rgba(var(--tint-secondary), .45));
}
.hero p {
  color: var(--text-secondary) !important;
  font-size: 17px !important;
  max-width: 720px;
  margin: 20px auto 0 !important;
}

.badges { gap: 12px !important; margin-top: 28px !important; }
.badge {
  background: rgba(var(--tint), .08) !important;
  border: 1px solid rgba(var(--tint), .22) !important;
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-radius: var(--radius-full) !important;
  padding: 7px 18px !important;
  font-size: 13px !important;
  color: var(--text-primary) !important;
  letter-spacing: .02em;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.badge:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--tint-secondary), .55) !important;
  background: rgba(var(--tint-secondary), .14) !important;
}

/* ============================================================
   §3 标题层级
   ============================================================ */
h1 {
  font-size: var(--fs-h1) !important;
  font-weight: 800;
  letter-spacing: -.8px;
  background: var(--grad-brand) !important;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 0 18px rgba(var(--tint-secondary), .35));
}
h2, h2.sec {
  font-size: var(--fs-h2) !important;
  font-weight: 800 !important;
  letter-spacing: -.4px;
  color: var(--text-primary) !important;
  position: relative;
}
h2.sec { margin: 56px 0 20px !important; text-align: center; }
h2:not(.sec) { border-left: none !important; padding-left: 16px !important; }
h2:not(.sec)::before {
  content: "";
  position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--primary-strong), var(--secondary));
  box-shadow: var(--glow-primary);
}
h2.sec::after {
  content: "";
  display: block;
  width: 56px; height: 3px;
  margin: 12px auto 0;
  border-radius: 2px;
  background: var(--grad-brand);
  box-shadow: var(--glow-primary);
}
h3 {
  font-size: var(--fs-h3) !important;
  color: var(--primary-strong) !important;
  font-weight: 700;
}
body > h1 {
  display: block;
  text-align: center;
  font-size: var(--fs-display) !important;
  font-weight: 900 !important;
  letter-spacing: -1.5px;
  padding: 64px 20px 8px;
  background: var(--grad-brand) !important;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 0 26px rgba(var(--tint-secondary), .45));
}
body > .badges { justify-content: center; margin-top: 18px; }
body > h1 + p {
  text-align: center;
  color: var(--text-secondary) !important;
  max-width: 720px;
  margin: 16px auto 8px;
}

/* ============================================================
   §4 导航（权威定义）
   ------------------------------------------------------------
   全站 #topnav / #subnav 的几何与配色由本段唯一定义。
   为什么必须 !important：页面内联的旧 nav <style> 写在 <body> 内、
   文档顺序晚于本文件，同特异性下会反盖本文件（与 §1 基线同一机制）。
   原内联配色是硬编码 #0d1220/#1f2937/#94a3b8/#4ade80，
   本段全部改为令牌 —— 两套主题下导航随之换肤。
   新增页若只写 <nav id="topnav"></nav><nav id="subnav"></nav>
   两个空挂载点即可获得全站一致的菜单与侧栏（渲染见 nav.js）。
   ============================================================ */
nav {
  background: var(--nav-bg) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 1px 0 rgba(var(--tint), .10), 0 8px 28px rgba(2, 2, 12, .45);
}

#topnav {
  position: sticky !important; top: 0 !important; z-index: 99 !important;
  display: flex !important; gap: 4px !important; align-items: center !important;
  padding: 0 20px !important; height: var(--nav-h) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
#topnav a { font-size: var(--fs-small) !important; }
#topnav .brand {
  color: var(--text-primary) !important; font-weight: 700 !important;
  font-size: var(--fs-body) !important; margin-right: 14px !important;
  text-decoration: none !important; white-space: nowrap !important;
}
#topnav a.zone {
  color: var(--text-secondary) !important; text-decoration: none !important;
  padding: 8px 16px !important; border-radius: var(--radius-sm) !important;
  font-size: var(--fs-small) !important; white-space: nowrap !important;
}
#topnav a.zone:hover {
  background: var(--bg-elevated) !important; color: var(--text-primary) !important;
}
#topnav a.zone.on {
  color: var(--primary-strong) !important; font-weight: 700 !important;
  background: var(--bg-elevated) !important;
}

#subnav {
  position: fixed !important; left: 0 !important; top: var(--nav-h) !important;
  bottom: 0 !important; width: var(--subnav-w) !important;
  background: var(--nav-bg) !important;
  border-right: 1px solid var(--border-subtle) !important;
  padding: 14px 0 !important; overflow-y: auto !important; z-index: 50 !important;
}
#subnav .zn {
  color: var(--text-muted) !important; font-size: var(--fs-caption) !important;
  padding: 8px 18px 6px !important; letter-spacing: 1px !important;
}
#subnav a {
  display: block !important; padding: 7px 18px !important;
  color: var(--text-secondary) !important; text-decoration: none !important;
  font-size: var(--fs-small) !important;
}
#subnav a:hover {
  background: var(--bg-elevated) !important; color: var(--primary-strong) !important;
}
#subnav a.cur {
  color: var(--primary-strong) !important; font-weight: 600 !important;
  background: var(--bg-elevated) !important;
  border-right: 2px solid var(--primary) !important;
}
@media (min-width: 761px) {
  body.sub-on { margin-left: var(--subnav-w) !important; max-width: none !important; }
}
@media (max-width: 760px) {
  #subnav {
    position: static !important; width: auto !important;
    border-right: none !important; border-bottom: 1px solid var(--border-subtle) !important;
  }
  body { margin-left: 0 !important; }
}
.hd {
  background: rgba(12, 12, 24, .78) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: 0 8px 28px rgba(2, 2, 12, .45);
}
.hd .logo {
  background: var(--grad-brand) !important;
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
}

/* ============================================================
   §5 卡片
   ============================================================ */
.card, .stat, .step, .app-card {
  position: relative;
  background: linear-gradient(180deg, rgba(var(--tint), .055), rgba(var(--tint), 0) 42%), var(--card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card);
  transition: transform .22s cubic-bezier(.22,.9,.36,1), box-shadow .22s ease, border-color .22s ease;
}
.card::before, .stat::before, .app-card::before {
  content: "";
  position: absolute; top: 0; left: 12%; right: 12%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--tint), .5), transparent);
  pointer-events: none;
}
.card:hover, .stat:hover, .app-card:hover {
  transform: translateY(-5px);
  border-color: rgba(var(--tint-secondary), .42) !important;
  box-shadow: var(--shadow-pop), var(--glow-hover);
}
.step { transition: background .2s ease, border-color .2s ease, transform .2s ease; }
.step:hover { transform: translateY(-2px); border-color: rgba(var(--tint-secondary), .38) !important; }

.stat b {
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important;
  font-weight: 800;
}
.card h3 { color: var(--primary-strong) !important; }

/* ============================================================
   §6 按钮
   ============================================================ */
.btn {
  position: relative;
  border-radius: var(--radius-full) !important;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
  overflow: hidden;
}
.btn.a, .btn-dl, .btn.btn-dl {
  background: var(--grad-brand) !important;
  color: var(--text-on-accent) !important;
  box-shadow: 0 6px 22px rgba(var(--tint-primary), .35);
}
.btn.a:hover, .btn-dl:hover, .btn.btn-dl:hover {
  transform: translateY(-2px) !important;
  background: var(--grad-brand-hover) !important;
  box-shadow: 0 12px 34px rgba(var(--tint-secondary), .5) !important;
}
.btn.w {
  background: var(--accent-dim) !important;
  color: var(--accent) !important;
  border: 1px solid rgba(var(--tint-secondary), .4);
}
.btn.w:hover { background: rgba(var(--tint-secondary), .18) !important; transform: translateY(-2px); }
.btn-c, .btn.btn-c {
  background: transparent !important;
  color: var(--primary-strong) !important;
  border: 1px solid rgba(var(--tint-primary), .45) !important;
  backdrop-filter: blur(8px);
}
.btn-c:hover, .btn.btn-c:hover {
  background: var(--primary-dim) !important;
  transform: translateY(-2px);
}
.footer-links a {
  background: rgba(var(--tint), .07);
  border: 1px solid rgba(var(--tint), .22) !important;
  border-radius: var(--radius-full) !important;
  color: var(--text-primary) !important;
  backdrop-filter: blur(10px);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.footer-links a:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--tint-secondary), .55) !important;
  background: rgba(var(--tint-secondary), .13);
  box-shadow: 0 10px 30px rgba(var(--tint-primary), .3);
}
button {
  background: var(--grad-brand) !important;
  color: var(--text-on-accent) !important;
  border-radius: var(--radius-full);
  border: 0;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .22s ease, background .2s ease;
}
button:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(var(--tint-primary), .45); }

/* ============================================================
   §7 表格（v3.1 完整组件）
   ------------------------------------------------------------
   v3 的表格只有边框与表头底色，没有宽度/字号/内距/对齐/滚动策略，
   于是 28 个含表格的页面各写一套：
     font-size  .85em / .88em / .92em / 13px    （4 种）
     padding    8px 10px / 10px 12px / 8px 12px （3 种以上）
   v3.1 全部收口到令牌，并统一「表格永远满宽 + 窄屏横向滚动」：
   滚动容器由 assets/js/theme.js 注入的 .table-wrap 提供（JS 未执行时
   优雅降级为满宽表格，不会更糟）。
   ============================================================ */
table {
  display: table !important;          /* 压掉各页 table{display:block} 的乱改 */
  width: 100% !important;
  border-collapse: collapse !important;
  margin: var(--sp-5) 0 !important;
  font-size: var(--fs-small) !important;   /* 表格正文统一 14px */
  line-height: 1.55 !important;
  white-space: normal !important;          /* 单元格允许折行（仅表头不折） */
  color: var(--text-secondary) !important;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle) !important;
}
.table-wrap {
  width: 100%;
  margin: var(--sp-5) 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
}
.table-wrap > table { margin: 0 !important; }
caption {
  caption-side: top !important;
  text-align: left !important;
  padding: 0 0 var(--sp-2) !important;
  font-size: var(--fs-caption) !important;
  color: var(--text-muted) !important;
}
th, td {
  padding: var(--sp-3) var(--sp-4) !important;   /* 12px 16px —— 唯一内距 */
  font-size: var(--fs-small) !important;
  line-height: 1.55 !important;
  text-align: left !important;
  vertical-align: top !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
th {
  background: linear-gradient(180deg, rgba(var(--tint-primary), .18), rgba(var(--tint-primary), .07)) !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  letter-spacing: .02em;
  white-space: nowrap !important;      /* 只有表头不折行 */
  vertical-align: bottom !important;
  font-size: var(--fs-small) !important;
}
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0 !important; }
tbody tr:nth-child(even) td,
tr:nth-child(even) td { background: rgba(var(--tint), .045) !important; }
tbody tr:hover td, tr:hover td { background: rgba(var(--tint-primary), .12) !important; }
td:first-child, th:first-child { padding-left: var(--sp-5) !important; }
td:last-child,  th:last-child  { padding-right: var(--sp-5) !important; }
/* 数字列是表格里唯一允许的特殊对齐：等宽数位 + 右对齐 */
td.num, th.num, td.n, th.n, td.right, th.right, td[align="right"], th[align="right"] {
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono) !important;
}
td code, th code { font-size: var(--fs-caption) !important; }
.pos { color: var(--success) !important; }
.neg { color: var(--danger) !important; }
.pos { color: var(--success) !important; text-shadow: 0 0 12px rgba(var(--tint), .35); }
.neg { color: var(--danger) !important;  text-shadow: 0 0 12px rgba(var(--tint), .3); }

/* ============================================================
   §8 指标/状态标签（全站统一口径）
   ============================================================ */
.tag {
  background: var(--secondary-dim) !important;
  border: 1px solid rgba(var(--tint-secondary), .28) !important;
  border-radius: var(--radius-full) !important;
  color: var(--secondary) !important;
}
.st-ok, .st-verified, .st-done   { color: var(--success) !important; }
.st-doing, .st-pending, .st-part { color: var(--warning) !important; }
.st-todo, .st-unfinished         { color: var(--text-muted) !important; }
.st-fail, .st-rejected           { color: var(--danger) !important; }
.green { color: var(--success) !important; }
.amber { color: var(--warning) !important; }

/* ============================================================
   §9 内联硬编码色覆写（旧页残留字面色 → 令牌化）
   ============================================================ */
[style*="background:#14141f"][style*="border-radius"] {
  background: linear-gradient(180deg, rgba(var(--tint), .06), transparent 45%), var(--card) !important;
  border-color: var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
}
[style*="background:#14141f"][style*="position:sticky"] {
  background: rgba(9, 9, 18, .72) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: 0 8px 28px rgba(2, 2, 12, .45);
}
/* 旧 v1 青绿 → 主色系 */
[style*="color:#00d4aa"] { color: var(--primary-strong) !important; }
b[style*="color:#00d4aa"], .hero b[style*="color:#00d4aa"] { color: var(--secondary) !important; }
a[style*="color:#00d4aa"] { color: var(--primary-strong) !important; }
[style*="color:#8888a0"] { color: var(--text-secondary) !important; }
[style*="color:#667"]    { color: var(--text-secondary) !important; }
[style*="color:#555570"] { color: var(--text-muted) !important; }
[style*="color:#e8e8f0"] { color: var(--text-primary) !important; }
[style*="color:#f5c518"] { color: var(--accent) !important; }
[style*="border-color:#7c5cff"] { border-color: var(--secondary) !important; }

/* ============================================================
   §10 docs / 侧栏
   ============================================================ */
.side {
  background: linear-gradient(180deg, rgba(var(--tint-primary), .07), rgba(var(--tint-secondary), .05)) !important;
  border-right: 1px solid rgba(var(--tint-secondary), .16) !important;
}
.side a.on {
  background: linear-gradient(90deg, rgba(var(--tint-primary), .18), rgba(var(--tint-secondary), .12)) !important;
  color: var(--primary-strong) !important;
  border-left: 3px solid var(--primary);
}
.side a:hover { background: rgba(var(--tint-primary), .09) !important; }
p > code, li > code, td > code { color: var(--text-code) !important; background: var(--primary-dim) !important; }
.docs tr:nth-child(even) td, .main tr:nth-child(even) td { background: rgba(var(--tint-primary), .05) !important; }
.main tr:hover td { background: rgba(var(--tint-primary), .12) !important; }
.note { border-left-color: var(--primary) !important; background: var(--primary-dim) !important; }
.warn { border-left-color: var(--warning) !important; }

/* ============================================================
   §11 杂项组件
   ============================================================ */
code {
  background: rgba(var(--tint-primary), .12) !important;
  border: 1px solid rgba(var(--tint-primary), .2);
  color: var(--text-code) !important;
  border-radius: var(--radius-sm);
  padding: 2px 8px !important;
}
pre {
  background: var(--code-bg) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
pre code { background: transparent !important; border: none; color: var(--text-code) !important; }
input {
  background: rgba(var(--tint), .07) !important;
  border: 1px solid rgba(var(--tint), .2) !important;
  border-radius: var(--radius-full) !important;
  color: var(--text-primary) !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}
input:focus {
  outline: none;
  border-color: rgba(var(--tint-secondary), .55) !important;
  box-shadow: 0 0 0 3px rgba(var(--tint-primary), .18);
}
input::placeholder { color: var(--text-muted); }
footer {
  border-top: 1px solid var(--border-subtle) !important;
  color: var(--text-muted) !important;
}
.honest { border-left: 4px solid var(--primary-strong) !important; box-shadow: -6px 0 18px rgba(var(--tint-primary), .18); }

/* ============================================================
   §12 主题切换按钮（由 assets/js/theme.js 注入）
   ============================================================ */
.e-theme-switch {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 9999;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px !important;
  border-radius: var(--radius-full) !important;
  border: 1px solid var(--border-strong) !important;
  background: rgba(var(--tint), .12) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: var(--text-primary) !important;
  font: 600 var(--fs-caption)/1 var(--font-sans) !important;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: var(--shadow-card) !important;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.e-theme-switch:hover {
  transform: translateY(-2px) !important;
  border-color: var(--secondary) !important;
  background: rgba(var(--tint-secondary), .18) !important;
  box-shadow: var(--shadow-pop) !important;
}
.e-theme-switch .sw-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--grad-brand);
  box-shadow: 0 0 10px rgba(var(--tint-primary), .8);
  flex: none;
}
.e-theme-switch .sw-name { white-space: nowrap; }
@media print { .e-theme-switch { display: none !important; } }

/* ============================================================
   §13 响应式
   ============================================================ */
@media (max-width: 480px) {
  :root {
    --fs-display: 34px;
    --fs-h1: 26px;
    --fs-h2: 21px;
    --fs-h3: 17px;
  }
  .hero { padding: 56px 16px 36px !important; }
  .hero h1 { letter-spacing: -.5px; }
  .hero p { font-size: 15px !important; }
  .wrap { padding-left: 14px; padding-right: 14px; }
  .card, .stat { border-radius: var(--radius-md) !important; }
  .card:hover, .stat:hover, .app-card:hover { transform: none; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  a[href], button, .btn { min-height: 44px; }
  .btn { padding-left: 20px; padding-right: 20px; }
  h2:not(.sec) { padding-left: 12px !important; }
  .e-theme-switch { right: 10px; bottom: 10px; padding: 8px 12px !important; }
  .e-theme-switch .sw-name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ============================================================
   §14 渐变文字兜底（非 webkit 内核）
   ============================================================ */
h1, .hero h1 { color: var(--text-primary) !important; background: none !important; }
@supports (-webkit-background-clip: text) or (background-clip: text) {
  h1, .hero h1 {
    background: var(--grad-brand) !important;
    -webkit-background-clip: text; background-clip: text;
    color: transparent !important;
  }
}

/* ============================================================
   §15 排版与留白（v3.1 新增 —— 权威层）
   ------------------------------------------------------------
   为什么补这一层：v3 只定死了「颜色 / 导航 / h1-h3 字号」。
   排版四要素里，标题节奏、h4-h6、留白、表格内距都没有规则，于是
   各页内联样式按文档顺序直接生效。线上实测（46 页）：
     · font-size 545 条声明 / 56 种取值
       （12、12.5、13、13.5、14、15px 与 .78/.8/.85/.88/.9/.92/.95/.98em 混用）
     · padding 112 种取值、margin 75 种取值、line-height 7 种
     · h1 有 16 种尺寸、h2 有 11 种、h3 有 7 种、h4 只有一种且无规则
   本层把它们全部收口到 §0 的字阶与间距令牌。
   前提已实测：全站内联样式对 font-size/margin/padding/line-height
   的 !important 使用为 0 条 → 本层必然生效（不依赖插入顺序）。
   ============================================================ */

/* —— 标题节奏：h1–h6 完整阶梯 + 统一上下留白 —— */
h1 { line-height: var(--lh-h1) !important; margin: 0 0 var(--sp-4) !important; }
/* 首屏主标题回到 display 档（v3 把它压成了 38px，层级被压平） */
.hero h1, body > h1, h1.display, .hero > h1 {
  font-size: var(--fs-display) !important;
  line-height: var(--lh-display) !important;
}
h2, h2.sec { line-height: var(--lh-h2) !important; }
h2:not(.sec) { margin: var(--sp-7) 0 var(--sp-4) !important; }
h2.sec       { margin: var(--sp-7) 0 var(--sp-5) !important; }
h3 {
  line-height: var(--lh-h3) !important;
  margin: var(--sp-5) 0 var(--sp-3) !important;
}
/* h4–h6 在 v3 里完全没有规则，各页自定 → 补齐成阶梯 */
h4 {
  font-size: var(--fs-h4) !important; line-height: var(--lh-h4) !important;
  font-weight: 700 !important; color: var(--text-primary) !important;
  margin: var(--sp-4) 0 var(--sp-2) !important;
}
h5 {
  font-size: var(--fs-h5) !important; line-height: var(--lh-h5) !important;
  font-weight: 600 !important; color: var(--text-secondary) !important;
  margin: var(--sp-3) 0 var(--sp-2) !important;
}
h6 {
  font-size: var(--fs-h6) !important; line-height: var(--lh-h6) !important;
  font-weight: 600 !important; color: var(--text-muted) !important;
  letter-spacing: .04em;
  margin: var(--sp-3) 0 var(--sp-1) !important;
}
/* 容器首个标题不留上边距（否则区块顶部会多出一截） */
.wrap > h1, .wrap > h2, .wrap > h3, .wrap > h4,
.card > h1, .card > h2, .card > h3, .card > h4,
.tier > h3:first-child, section > h2:first-child { margin-top: 0 !important; }

/* —— 正文：字号 / 行高 / 段间距 —— */
p {
  font-size: var(--fs-body) !important;
  line-height: var(--lh-body) !important;
  margin: 0 0 var(--sp-4) !important;
}
p:last-child { margin-bottom: 0 !important; }
.hero p, p.lead, .wrap > h1 + p, p.sec-sub, p.sec-sub2 {
  font-size: var(--fs-lead) !important;
  line-height: var(--lh-lead) !important;
}
.hero p { text-align: center; }

/* —— 列表：缩进与项间距（v3 完全没管 ul/ol/li） —— */
ul, ol {
  margin: 0 0 var(--sp-4) !important;
  padding-left: var(--sp-5) !important;
  line-height: var(--lh-body) !important;
  font-size: var(--fs-body) !important;
}
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0 !important; }
li { margin: 0 0 var(--sp-2) !important; }
li:last-child { margin-bottom: 0 !important; }
/* 站点里大量「无点列表」其实是栅格/卡片容器，不该有缩进 */
.stats, .grid, .cards, .badges, .card ul, .nolist, nav ul {
  list-style: none !important;
  padding-left: 0 !important;
}

/* —— 引用 / 分隔线 / 定义列表 / 图片 / 代码块 —— */
blockquote {
  margin: var(--sp-5) 0 !important;
  padding: var(--sp-3) var(--sp-5) !important;
  border-left: 3px solid var(--primary-strong) !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  background: rgba(var(--tint), .04) !important;
  color: var(--text-secondary) !important;
  font-size: var(--fs-body) !important;
}
blockquote p:last-child { margin-bottom: 0 !important; }
hr {
  margin: var(--sp-6) 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--border-subtle) !important;
  height: 0 !important;
  background: none !important;
}
dl { margin: 0 0 var(--sp-4) !important; }
dt {
  margin: var(--sp-4) 0 var(--sp-2) !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}
dd {
  margin: 0 0 var(--sp-2) !important;
  padding-left: var(--sp-5) !important;
  color: var(--text-secondary) !important;
}
figure { margin: var(--sp-5) 0 !important; }
img { max-width: 100% !important; height: auto !important; }
figcaption {
  margin-top: var(--sp-2) !important;
  font-size: var(--fs-caption) !important;
  color: var(--text-muted) !important;
}
pre {
  margin: var(--sp-4) 0 !important;
  font-size: var(--fs-code) !important;
  line-height: 1.6 !important;
}
small, .small {
  font-size: var(--fs-small) !important;
  line-height: var(--lh-small) !important;
}

/* —— 语义小字：56 种字号里最乱的一撮，收成两档 —— */
/* 辅助 / 元信息 / 注释 → caption 12px */
.meta, .note, .hint, .dim, .muted, .caption, .byline, .tip, .help, .fine,
.small-note, .sub-note, .footnote, .source, .updated {
  font-size: var(--fs-caption) !important;
  line-height: var(--lh-caption) !important;
}
/* 次级说明 → small 14px */
.sub, .desc, .subtitle, .sec-sub, .lede-sub, .explain {
  font-size: var(--fs-small) !important;
  line-height: var(--lh-small) !important;
}
/* —— 标签 / 徽章：15 页 3 种字号 3 种内距 → 一档 —— */
.tag, .badge, .pill, .chip, .st, .state {
  font-size: var(--fs-caption) !important;
  line-height: 1.35 !important;
  padding: 3px 10px !important;
  border-radius: var(--radius-full) !important;
  display: inline-block;
  vertical-align: middle;
  font-weight: 600 !important;
}
/* —— 指标数字：6 页 3 种（26 / 30 / 40px）→ 统一 32px 等宽数位 —— */
.stat b, .stat .n, .metric b, .kpi b, .big-num, .stat strong {
  font-size: var(--fs-metric) !important;
  line-height: var(--lh-metric) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.5px;
  display: inline-block;
}
.stat span, .stat .label, .metric span, .kpi span {
  font-size: var(--fs-caption) !important;
  line-height: var(--lh-caption) !important;
  color: var(--text-muted) !important;
}
/* —— 步骤组件（4 页三种值） —— */
.step i { font-size: var(--fs-h2) !important; }
.step b { font-size: var(--fs-body) !important; }
.step span { font-size: var(--fs-small) !important; }

/* —— 具名元素补漏（v3.1 用真实渲染逐个定位到的越轨来源，全部收口） —— */
.arr, .arrow { font-size: var(--fs-h2) !important; }        /* 步骤箭头：实测 30px */
code, kbd, samp { font-size: var(--fs-code) !important; }    /* 行内代码：mos-quickstart 实测 12.5px×72 */
nav.toc a, .toc a { font-size: var(--fs-small) !important; } /* 文档侧目录：实测 13.5px×11 */
.zone-cards b, .g b { font-size: var(--fs-body) !important; }        /* 卡片标题：实测 16.8px(=1.05em) */
.zone-cards span, .g span { font-size: var(--fs-caption) !important; } /* 卡片说明：实测 13.12px(=.82em) */
.zone-cards i, .g i { font-size: var(--fs-metric) !important; }      /* 卡片图标字：实测 32px */
footer, .footer { font-size: var(--fs-caption) !important; }

/* —— 行内 style 属性的字号（实测 158 处 / 35 页 / 22 种取值）——
   这类值优先级最高（行内 > 选择器），但作者样式表里的 !important 仍高于
   普通行内声明，所以下面每条都带 !important 才能生效。
   策略：就近吸附到字阶，距离相同取大一档（保可读性）；
   连续值 .75em≈12 / .85em≈13.6 / .92em≈14.7 / 1.05em≈16.8 分别落到
   12 / 14 / 14 / 16 —— 全部落在阶梯上。
   不碰 1em 与 .5em、1.6em：前者本就等于 16px，后两者是"相对父级"的
   真实设计意图（如标题内的角标），强行改成绝对值会改变语义。 —— */
[style*="font-size:.75em"], [style*="font-size: .75em"],
[style*="font-size:.8em"],  [style*="font-size: .8em"],
[style*="font-size:.78em"], [style*="font-size: .78em"],
[style*="font-size:12.5px"],
[style*="font-size:12.48px"] { font-size: var(--fs-caption) !important; }

[style*="font-size:.82em"], [style*="font-size: .82em"],
[style*="font-size:.85em"], [style*="font-size: .85em"],
[style*="font-size:.88em"], [style*="font-size: .88em"],
[style*="font-size:.9em"],  [style*="font-size: .9em"],
[style*="font-size:.92em"], [style*="font-size: .92em"],
[style*="font-size:.93em"], [style*="font-size: .93em"],
[style*="font-size:13px"],  [style*="font-size:13.5px"],
[style*="font-size:13.6px"] { font-size: var(--fs-small) !important; }

[style*="font-size:.95em"], [style*="font-size: .95em"],
[style*="font-size:1.05em"], [style*="font-size: 1.05em"],
[style*="font-size:15px"]  { font-size: var(--fs-body) !important; }

[style*="font-size:19px"]  { font-size: var(--fs-h3) !important; }
[style*="font-size:30px"]  { font-size: var(--fs-metric) !important; }

/* ============================================================
   §16 容器与组件内距收敛（v3.1 新增）
   ------------------------------------------------------------
   实测：.card 在 24 页有 3 种内距、.wrap 在 20 页有 3 种左右内距、
   .hero 在 11 页有 3 种、.tag 在 15 页有 3 种。
   ============================================================ */
.wrap {
  padding-left: var(--sp-5) !important;    /* 24px，全站唯一左右内距 */
  padding-right: var(--sp-5) !important;
}
.card, .panel, .tier, .g, .step {
  padding: var(--sp-5) !important;         /* 24px */
}
.stat-card, .ev, .freeze {
  padding: var(--sp-3) var(--sp-4) !important;   /* 14px 16px 紧凑档 */
}
.hero {
  padding: var(--sp-8) var(--sp-5) var(--sp-7) !important;  /* 64 / 24 / 48 */
}
/* —— 按钮：两档尺寸（默认 / 大号），不再各页自定 —— */
.btn, .cta2, a.btn {
  font-size: var(--fs-small) !important;
  padding: var(--sp-3) var(--sp-5) !important;   /* 12px 24px */
  border-radius: var(--radius-full) !important;
}
.cta, .btn-lg, a.cta {
  font-size: var(--fs-body) !important;
  padding: var(--sp-4) var(--sp-6) !important;   /* 16px 32px */
  border-radius: var(--radius-full) !important;
}

/* ============================================================
   §17 响应式补充（v3.1 新增）
   ------------------------------------------------------------
   必须放在 §15/§16 之后：本层规则带 !important，同特异性下
   后出现者胜，否则移动端会被上面的桌面值压回去。
   ============================================================ */
@media (max-width: 640px) {
  .wrap { padding-left: var(--sp-4) !important; padding-right: var(--sp-4) !important; }
  .hero { padding: var(--sp-7) var(--sp-4) var(--sp-6) !important; }
  .hero p { font-size: var(--fs-body) !important; }
  h2:not(.sec) { margin: var(--sp-6) 0 var(--sp-3) !important; }
  h3 { margin: var(--sp-4) 0 var(--sp-2) !important; }
  .card, .panel, .tier, .g, .step { padding: var(--sp-4) !important; }
  .table-wrap > table { min-width: 560px; }   /* 窄屏改为横向滚动而非挤压 */
  th, td { padding: var(--sp-2) var(--sp-3) !important; }
}