/* ============================================================
   Java 工程能力知识库 — 共享设计系统
   Style: Solid (冷峻技术文档风格)
   ============================================================ */

/* ---------- @font-face ---------- */
@font-face {
  font-family: "WorkSans";
  src: url("../../docs/shared/fonts/WorkSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "WorkSans";
  src: url("../../docs/shared/fonts/WorkSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "WorkSans";
  src: url("../../docs/shared/fonts/WorkSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrainsMono";
  src: url("../../docs/shared/fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- :root 设计令牌 ---------- */
:root {
  /* 调色板 */
  --bg-page: #eff1f5;   /* Latte base     浅色主题背景（Catppuccin 唯一亮色风味） */
  --bg-card: #ccd0da;   /* Latte surface0 卡片抬升面 */
  --ink: #4c4f69;       /* Latte text     主文字 */
  --muted: #6c6f85;     /* Latte subtext0 次要文字 */
  --rule: #bcc0cc;      /* Latte surface1 边框/分隔 */
  --accent: #1e66f5;    /* Latte blue     主强调 */
  --accent-alt: #8839ef;/* Latte mauve    次强调 */
  /* 难度档第三色（专家）：原沿用 --accent-alt 紫，与「架构」文字色完全相同、
     区分度不足，故独立为青绿。文字色与实心色拆开——徽标底色承白字、胶囊文字是
     前景色，二者对比度要求相反，同值无法兼顾。*/
  --diff-expert: #179299;
  --diff-expert-solid: #179299;
  --code-bg: #e6e9ef;   /* Latte mantle   代码块背景（比页面略深） */
  --code-ink: #4c4f69;  /* Latte text     代码文字 */
  --success: #40a02b;   /* Latte green    成功 */
  --warn: #df8e1d;      /* Latte yellow   警告 */
  --danger: #d20f39;    /* Latte red      危险 */

  /* 层次色条令牌（2026-09-15 补：insight/application/production/scenario/challenge 此前回退默认强调色） */
  --layer-insight: #179299;
  --layer-application: #ea76cb;
  --layer-production: #40a02b;
  --layer-scenario: #04a5e5;
  --layer-challenge: #df8e1d;
  /* 层次色条令牌 · 补全（2026-11-02 统一 14 层语义色） */
  --layer-essence:      #1e66f5;   /* 本质问题  探索 蓝   */
  --layer-evolution:    #8839ef;   /* 演进脉络  历史 紫   */
  --layer-principle:    #40a02b;   /* 第一性原理 真理 青绿 */
  --layer-practice:     #df8e1d;   /* 工程实践  落地 橙   */
  --layer-deep:         #7287fd;   /* 深度追问  深挖 靛蓝  */
  --layer-pitfall:      #d20f39;   /* 常见陷阱  警示 红   */
  --layer-extension:    #9ca0b3;   /* 延伸阅读  拓展 灰蓝  */
  --layer-evaluation:   #7c7f93;   /* 评估选型  判断 石板灰 */
  --layer-domain:       #fe640b;   /* 垂直领域  业务 橙红  */

  /* 排版 */
  --font-body: "WorkSans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrainsMono", "SF Mono", "Fira Code", monospace;
  --body-size: 16px;
  --line-height: 1.75;
  --max-width: 920px;

  /* 间距 */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);

  color-scheme: light;

  /* ---------- 10 组编号体系统一令牌（2026-11-03 改用 Catppuccin：浅色 Latte / 暗黑 Mocha） ---------- */
  /* 语义归属按权威顺序 M→L→C→E→S→A→H→G→K→D→SEC；色相沿用各风味官方 accent（蓝/紫/绿/靛/青/黄/粉/橙/红），保留光谱梯度 */
  /* 用途：content-badge / chapter-card 边框 / toc-group-title / card-number */
  --code-m:    #1e66f5;   /* M 方法论    蓝     Latte blue   总纲/统领 */
  --code-l:    var(--code-m);   /* L AI 方法论专篇  与 M 同色系（继承蓝） */
  --code-c:    #8839ef;   /* C 技术栈    紫     Latte mauve   实作/工程 */
  --code-e:    #40a02b;   /* E 核心原理  青绿   Latte green   底层/严谨 */
  --code-s:    #7287fd;   /* S 场景      靛蓝   Latte lavender 框架/方案 */
  --code-a:    #179299;   /* A AI纵深    青     Latte teal    科技/未来 */
  --code-h:    #04a5e5;   /* H 混合部署  天蓝   Latte sky    双栈/生产 */
  --code-g:    #df8e1d;   /* G 工程化    黄     Latte yellow  实践/落地 */
  --code-k:    #ea76cb;   /* K 踩坑      玫红   Latte pink    警示/注意 */
  --code-g_k:  #ea76cb;   /* G/K 合并轴  玫红   Latte pink  复用 --code-k */
  --code-d:    #fe640b;   /* D 领域      橙     Latte peach   业务/领域 */
  --code-sec:  #d20f39;   /* SEC 安全    红     Latte red    防护/安全 */
  --ink-on-tag: #fff;     /* stat-tag / 实心徽标前景 */

  /* 方法论层 dao/fa/shu/shi 抽离 */
  --dim-dao: #1e66f5;
  --dim-fa:  #40a02b;
  --dim-shu: #df8e1d;
  --dim-shi: #d20f39;

  /* Senior / P2 token 拆分（颜色不变，语义独立） */
  --accent-senior: #1e66f5;
  --accent-p2:     #1e66f5;

  /* ---------- 优先级 · 难度 · 编号体系统一令牌（2026-10-30 补全） ---------- */
  /* —— 优先级三色（P0 紧迫 → P1 高频 → P2 补充）—— */
  --prio-p0: var(--danger);       /* 红   #d20f39  紧迫必考 */
  --prio-p1: var(--warn);         /* 橙   #df8e1d  高频重点 */
  --prio-p2: var(--accent-p2);    /* 蓝   #1e66f5  进阶补充 */
  /* —— 难度三色（专家 → 架构师 → 高级开发）—— */
  --diff-expert:    #179299;              /* 青绿 专家（与架构师区分） */
  --diff-architect: var(--accent-alt);       /* 紫   架构师 */
  --diff-senior:    var(--accent-senior); /* 蓝   高级开发 */
  /* —— 总计色（题目总数行，独立语义）—— */
  --code-total: var(--accent-alt);   /* 紫   汇总/总计行 */
}

/* ---------- 暗黑模式令牌（kb-color-theme / data-theme） ---------- */
html[data-theme="dark"] {
  --bg-page: #1e1e2e;   /* Mocha base     暗黑页面背景 */
  --bg-card: #313244;   /* Mocha surface0 卡片抬升面 */
  --ink: #cdd6f4;       /* Mocha text     主文字 */
  --muted: #a6adc8;     /* Mocha subtext0 次要文字 */
  --rule: #45475a;      /* Mocha surface1 边框/分隔 */
  --accent: #89b4fa;    /* Mocha blue     主强调 */
  --accent-alt: #cba6f7;/* Mocha mauve    次强调 */
  --code-bg: #181825;   /* Mocha mantle   代码块背景 */
  --code-ink: #cdd6f4;  /* Mocha text     代码文字 */
  --success: #a6e3a1;   /* Mocha green    成功 */
  --warn: #f9e2af;      /* Mocha yellow   警告 */
  --danger: #f38ba8;    /* Mocha red      危险 */
  --layer-insight: #94e2d5;
  --layer-application: #f5c2e7;
  --layer-production: #a6e3a1;
  --layer-scenario: #89dceb;
  --layer-challenge: #f9e2af;
  --layer-essence:      #89b4fa;   /* Mocha blue     */
  --layer-evolution:    #cba6f7;   /* Mocha mauve    */
  --layer-principle:    #a6e3a1;   /* Mocha green    */
  --layer-practice:     #f9e2af;   /* Mocha yellow   */
  --layer-deep:         #b4befe;   /* Mocha lavender */
  --layer-pitfall:      #f38ba8;   /* Mocha red      */
  --layer-extension:    #6c7086;   /* Mocha overlay0 */
  --layer-evaluation:   #7f849c;   /* Mocha overlay1 */
  --layer-domain:       #fab387;   /* Mocha peach    */

  --diff-expert: #94e2d5;
  --diff-expert-solid: #94e2d5;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
  color-scheme: dark;

  /* ---------- 10 组编号体系 · 暗黑令牌（2026-11-03 改用 Catppuccin Mocha 风味） ---------- */
  /* Mocha 官方 accent（蓝/紫/绿/靛/青/黄/粉/橙/红），暗背景对比度充足且保留光谱梯度 */
  --code-m:    #89b4fa;   /* M 蓝    Mocha blue */
  --code-l:    var(--code-m);   /* L AI 方法论专篇  与 M 同色系（继承蓝） */
  --code-c:    #cba6f7;   /* C 紫    Mocha mauve */
  --code-e:    #a6e3a1;   /* E 青绿  Mocha green */
  --code-s:    #b4befe;   /* S 靛蓝  Mocha lavender */
  --code-a:    #94e2d5;   /* A 青    Mocha teal */
  --code-h:    #89dceb;   /* H 天蓝 Mocha sky */
  --code-g:    #f9e2af;   /* G 黄    Mocha yellow */
  --code-k:    #f5c2e7;   /* K 玫红  Mocha pink */
  --code-g_k:  #f5c2e7;   /* G/K 合并轴 Mocha pink 复用 --code-k */
  --code-d:    #fab387;   /* D 橙    Mocha peach */
  --code-sec:  #f38ba8;   /* SEC 红  Mocha red */
  --ink-on-tag: #1e1e2e; /* stat-tag 暗黑前景 */

  --dim-dao: #89b4fa;
  --dim-fa:  #a6e3a1;
  --dim-shu: #f9e2af;
  --dim-shi: #f38ba8;

  --accent-senior: #89b4fa;
  --accent-p2:     #89b4fa;

  /* ---------- 优先级 · 难度 · 总计（暗黑令牌 2026-10-30 补全） ---------- */
  --prio-p0: var(--danger);              /* Mocha red   */
  --prio-p1: var(--warn);                /* 橙 #f9e2af */
  --prio-p2: var(--accent-p2);           /* 蓝 #89b4fa */
  --diff-expert:    #94e2d5;             /* 亮青 专家 */
  --diff-architect: var(--accent-alt);      /* Mocha mauve 架构师 */
  --diff-senior:    var(--accent-senior); /* 蓝  #89b4fa 高级开发 */
  --code-total: var(--accent-alt);          /* Mocha mauve 总计 */
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg-page: #1e1e2e;   /* Mocha base */
    --bg-card: #313244;   /* Mocha surface0 */
    --ink: #cdd6f4;       /* Mocha text */
    --muted: #a6adc8;     /* Mocha subtext0 */
    --rule: #45475a;      /* Mocha surface1 */
    --accent: #89b4fa;    /* Mocha blue */
    --accent-alt: #cba6f7;/* Mocha mauve */
    --code-bg: #181825;   /* Mocha mantle */
    --code-ink: #cdd6f4;  /* Mocha text */
    --success: #a6e3a1;   /* Mocha green */
    --warn: #f9e2af;      /* Mocha yellow */
    --danger: #f38ba8;    /* Mocha red */
    --layer-insight: #94e2d5;
    --layer-application: #f5c2e7;
    --layer-production: #a6e3a1;
    --layer-scenario: #89dceb;
    --layer-challenge: #f9e2af;
    --layer-essence:      #89b4fa;   /* Mocha blue     */
    --layer-evolution:    #cba6f7;   /* Mocha mauve    */
    --layer-principle:    #a6e3a1;   /* Mocha green    */
    --layer-practice:     #f9e2af;   /* Mocha yellow   */
    --layer-deep:         #b4befe;   /* Mocha lavender */
    --layer-pitfall:      #f38ba8;   /* Mocha red      */
    --layer-extension:    #6c7086;   /* Mocha overlay0 */
    --layer-evaluation:   #7f849c;   /* Mocha overlay1 */
    --layer-domain:       #fab387;   /* Mocha peach    */

    --diff-expert: #94e2d5;
    --diff-expert-solid: #94e2d5;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
    color-scheme: dark;

    /* ---------- 10 组编号体系 · 暗黑令牌 · 自动暗黑（2026-11-03 改用 Catppuccin Mocha 风味） ---------- */
    --code-m:    #89b4fa;   /* M 蓝    Mocha blue */
    --code-l:    var(--code-m);   /* L AI 方法论专篇  与 M 同色系（继承蓝） */
    --code-c:    #cba6f7;   /* C 紫    Mocha mauve */
    --code-e:    #a6e3a1;   /* E 青绿  Mocha green */
    --code-s:    #b4befe;   /* S 靛蓝  Mocha lavender */
    --code-a:    #94e2d5;   /* A 青    Mocha teal */
    --code-h:    #89dceb;   /* H 天蓝 Mocha sky */
    --code-g:    #f9e2af;   /* G 黄    Mocha yellow */
    --code-k:    #f5c2e7;   /* K 玫红  Mocha pink */
    --code-g_k:  #f5c2e7;   /* G/K 合并轴 Mocha pink */
    --code-d:    #fab387;   /* D 橙    Mocha peach */
    --code-sec:  #f38ba8;   /* SEC 红  Mocha red */
    --ink-on-tag: #1e1e2e; /* stat-tag 暗黑前景 */

    --dim-dao: #89b4fa;
    --dim-fa:  #a6e3a1;
    --dim-shu: #f9e2af;
    --dim-shi: #f38ba8;

    --accent-senior: #89b4fa;
    --accent-p2:     #89b4fa;

    /* ---------- 优先级 · 难度 · 总计（自动暗黑 2026-10-30 补全） ---------- */
    --prio-p0: var(--danger);
    --prio-p1: var(--warn);
    --prio-p2: var(--accent-p2);
    --diff-expert:    #94e2d5;
    --diff-architect: var(--accent-alt);
    --diff-senior:    var(--accent-senior);
    --code-total: var(--accent-alt);
  }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* 列表缩进兜底（2026-09-16）：
   上面的 reset 抹掉了 ul/ol 的 UA 默认 `padding-inline-start`（40px），全站列表
   缩进因此完全依赖各自的类规则；凡未匹配到类规则的列表 padding-left 即为 0，
   而 `list-style-position: outside` 的圆点/数字是绘制在内容盒之外的 —— 会被甩进
   卡片内边距区：桌面表现为「列表没有缩进、圆点贴着卡片边缘」，小屏（卡片内边距
   收窄到 0.9rem）直接越出卡片（实测核心原理页 20 处、安全检查页 1 处）。
   用 :where() 把特异度压到 0，任何带类名的列表规则都能覆盖它；list-style:none 的
   自定义列表（.epq-kp-list / .map-col ul / .sidebar-toc ol …）各自都写了 padding，
   不受影响。 */
:where(ul, ol) {
  padding-inline-start: 1.25rem;
}
html {
  font-size: var(--body-size);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  color-scheme: light dark;
}
body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--ink);
  line-height: var(--line-height);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  /* 长英文标识符 / 路径 / 方法签名的换行兜底（可继承，覆盖全站所有文本容器）。
     缺此声明时，META-INF/spring/org.springframework… 之类的长 token 会横向撑破卡片：
     实测 375px 视口下核心原理页文档溢出 248px、18 处元素越界。
     用 anywhere 而非 break-word，可一并参与 min-content 计算，避免 flex/grid 子项被撑开。
     white-space:nowrap 的元素不受影响；行内代码仍由 code.inline-code 的 break-all 更激进断行。 */
  overflow-wrap: anywhere;
}
img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}
pre, table {
  max-width: 100%;
}
pre {
  /* 裸 <pre>（未被 .code-block 包裹）兜底：长代码行横向滚动，而非撑破卡片。
     实测 chapter-07 有 8 处裸 pre 未包裹，375px 视口下溢出 814px。 */
  overflow-x: auto;
}
.code-block pre {
  /* .code-block 内的 pre 仍由外层容器滚动，避免出现双层滚动条（保持原视觉） */
  overflow-x: visible;
}

/* ---------- 布局 ---------- */
.page-wrapper {
  display: flex;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-md);
  gap: var(--space-lg);
}
.content-main {
  flex: 1;
  min-width: 0;
  max-width: var(--max-width);
  padding: 0; /* 顶/底间距改由 .site-page-nav 对称承担 */
}
.sidebar-toc {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: var(--space-md);
  align-self: flex-start;
  max-height: calc(100vh - 2 * var(--space-md));
  overflow-y: auto;
  padding-top: 0; /* 与 content-main 顶对齐（顶栏已在 page-wrapper 外） */
}

/* ---------- 章节头部 ---------- */
.chapter-header {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--accent);
}
.chapter-number {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
.chapter-title {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-sm);
  letter-spacing: -0.02em;
}
.chapter-subtitle {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: var(--space-sm);
}
.meth-frame {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0.35rem 0 0.15rem;
  line-height: 1.55;
}
@media (max-width: 480px) {
  .meth-frame { font-size: 0.82rem; }
}
.chapter-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: 0.82rem;
  color: var(--muted);
}
.chapter-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.chapter-meta .meta-divider {
  color: var(--rule);
}

/* ---------- 篇章导读：知识链 + 工程化要点 + 思维模式 ---------- */
.chapter-lead {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm, 6px);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.chapter-lead-block {
  min-width: 0;
}
.chapter-lead-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-xs);
}
.chapter-lead-chain {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--ink);
}
.chapter-lead-chain ol {
  margin: 0.35rem 0 0;
  padding-left: 1.25rem;
}
.chapter-lead-chain li {
  margin-bottom: 0.35rem;
}
.chapter-lead-chain li:last-child {
  margin-bottom: 0;
}
.chapter-lead-points,
.chapter-lead-mind {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--ink);
}
.chapter-lead-points li,
.chapter-lead-mind li {
  margin-bottom: 0.35rem;
}
.chapter-lead-points li:last-child,
.chapter-lead-mind li:last-child {
  margin-bottom: 0;
}
.chapter-lead-mind a,
.chapter-lead-chain a,
.chapter-lead-points a {
  color: var(--accent);
  text-decoration: none;
}
.chapter-lead-mind a:hover,
.chapter-lead-chain a:hover,
.chapter-lead-points a:hover {
  text-decoration: underline;
}

/* ---------- TOC 分组（全站统一；页面禁止再写 .sidebar-toc 覆盖） ---------- */
.sidebar-toc .toc-group {
  margin-bottom: var(--space-md);
}
.sidebar-toc a.toc-group-title {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 4px;
  padding: 6px 10px;
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
  border-left: 2px solid transparent;
  line-height: 1.5;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-left-color 0.15s ease;
}
.sidebar-toc a.toc-group-title:hover {
  color: var(--accent-alt);
  background: rgba(37, 99, 235, 0.06);
  text-decoration: none;
}
.sidebar-toc a.toc-group-title.active {
  color: var(--accent);
  background: rgba(37, 99, 235, 0.1);
  border-left-color: var(--accent);
}
.epq-group-head,
.scenario-group,
.eng-group,
.m-subgroup-title[id],
.dimension-section[id] {
  scroll-margin-top: 1.25rem;
}
.epq-group-title a,
.group-title-link {
  color: inherit;
  text-decoration: none;
}
.epq-group-title a:hover,
.group-title-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ---------- 分组导读（核心原理 / 场景题） ---------- */
.epq-group-head {
  margin: var(--space-lg) 0 var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule);
}
.epq-group-head:first-of-type,
.scenario-group > .group-lead {
  border-top: none;
  padding-top: 0;
}
.epq-group-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.01em;
}
.group-lead {
  margin-top: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--bg-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm, 6px);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.group-lead-block {
  min-width: 0;
}
.group-lead-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-xs);
}
.group-lead-chain {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--ink);
}
.group-lead-chain ol {
  margin: 0.35rem 0 0;
  padding-left: 1.25rem;
}
.group-lead-chain li {
  margin-bottom: 0.35rem;
}
.group-lead-chain li:last-child {
  margin-bottom: 0;
}
.group-lead-points,
.group-lead-mind {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink);
}
.group-lead-points li,
.group-lead-mind li {
  margin-bottom: 0.3rem;
}
.group-lead-points li:last-child,
.group-lead-mind li:last-child {
  margin-bottom: 0;
}

/* ---------- 难度标签 ---------- */
.difficulty {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.difficulty-senior {
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent-senior);
  border: 1px solid rgba(37, 99, 235, 0.2);
}
.difficulty-architect {
  background: rgba(124, 58, 237, 0.1);
  color: var(--accent-alt);
  border: 1px solid rgba(124, 58, 237, 0.2);
}
.difficulty-expert {
  background: rgba(13, 148, 136, 0.12);
  color: var(--diff-expert);
  border: 1px solid rgba(13, 148, 136, 0.32);
}

/* ---------- 导图节点分层标签（想/做/守，非难度） ---------- */
/* 2026-09-16：原先借用 difficulty difficulty-architect，与「标签只放难度」口径冲突，改为独立类。
   视觉与 .difficulty + .difficulty-architect 完全一致（零视觉变化）。 */
.layer-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  background: rgba(124, 58, 237, 0.1);
  color: var(--accent-alt);
  border: 1px solid rgba(124, 58, 237, 0.2);
}

/* ---------- 优先级标签 ---------- */
.priority {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  margin-left: 4px;
  vertical-align: middle;
}
.priority-p0 {
  background: rgba(220, 38, 38, 0.1);
  color: var(--danger);
  border: 1px solid rgba(220, 38, 38, 0.25);
}
.priority-p1 {
  background: rgba(217, 119, 6, 0.1);
  color: var(--warn);
  border: 1px solid rgba(217, 119, 6, 0.25);
}
.priority-p2 {
  background: rgba(37, 99, 235, 0.1);
  color: var(--accent-p2);
  border: 1px solid rgba(37, 99, 235, 0.2);
}

/* ---------- Q&A 卡片 ---------- */
.content-card {
  background: var(--bg-card);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
  border-left: 4px solid var(--accent);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease;
  scroll-margin-top: 1.25rem;
}
@media (hover: hover) and (pointer: fine) {
  .content-card:hover {
    box-shadow: var(--shadow-md);
  }
}
.content-card[data-difficulty="architect"] {
  border-left-color: var(--accent-alt);
}
.content-card[data-difficulty="expert"] {
  border-left-color: var(--diff-expert-solid);
}

.content-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.content-badge {
  flex-shrink: 0;
  min-width: 28px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap;
}
.content-card[data-difficulty="architect"] .content-badge:not([class*="code-"]) {
  background: var(--accent-alt);
}
.content-card[data-difficulty="expert"] .content-badge:not([class*="code-"]) {
  background: var(--diff-expert-solid);
}
/* 暗黑模式：编号体系徽章背景已提亮为亮色糖果片，原白字对比度仅≈1.8:1 读不清
   → 改用深色字（#0b1220），且覆盖难度徽章（architect/expert）一并受益，不回退亮色模式 */
html[data-theme="dark"] .content-badge { color: #0b1220; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .content-badge { color: #0b1220; }
}
.content-question {
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
}
.content-question .difficulty {
  margin-left: var(--space-xs);
  vertical-align: middle;
}

/* ---------- Q&A 六层结构 ---------- */
.content-layer {
  margin-bottom: var(--space-md);
}
.content-layer:last-child {
  margin-bottom: 0;
}
.content-layer-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: var(--space-xs);
  display: flex;
  align-items: center;
  gap: 6px;
}
.content-layer-title::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent);
}
/* ---------- content-layer 语义色（14 层统一管道 · 零 legacy 硬引用） ---------- */
/* 卡片内 14 个语义层（data-layer 属性值）各自有独立的主题色条。
   所有 color 统一走 var(--layer-xxx)，禁止硬编码 HEX —— 暗黑/自动暗黑由 3 套令牌自动跟随。
   层名权威顺序：essence -> evolution -> insight -> principle -> practice -> pitfall
                -> extension -> evaluation -> application -> production -> scenario
                -> challenge -> deep -> domain */
.content-layer[data-layer="essence"]     .content-layer-title::before { background: var(--layer-essence); }
.content-layer[data-layer="evolution"]   .content-layer-title::before { background: var(--layer-evolution); }
.content-layer[data-layer="principle"]   .content-layer-title::before { background: var(--layer-principle); }
.content-layer[data-layer="practice"]    .content-layer-title::before { background: var(--layer-practice); }
.content-layer[data-layer="deep"]        .content-layer-title::before { background: var(--layer-deep); }
.content-layer[data-layer="pitfall"]     .content-layer-title::before { background: var(--layer-pitfall); }
.content-layer[data-layer="extension"]   .content-layer-title::before { background: var(--layer-extension); }
.content-layer[data-layer="evaluation"]  .content-layer-title::before { background: var(--layer-evaluation); }
.content-layer[data-layer="insight"]     .content-layer-title::before { background: var(--layer-insight); }
.content-layer[data-layer="application"]  .content-layer-title::before { background: var(--layer-application); }
.content-layer[data-layer="production"]  .content-layer-title::before { background: var(--layer-production); }
.content-layer[data-layer="scenario"]    .content-layer-title::before { background: var(--layer-scenario); }
.content-layer[data-layer="challenge"]   .content-layer-title::before { background: var(--layer-challenge); }
.content-layer[data-layer="domain"]      .content-layer-title::before { background: var(--layer-domain); }

.content-layer-body {
  font-size: 0.95rem;
  color: var(--ink);
  line-height: 1.7;
  overflow-wrap: break-word;
  word-break: break-word;
}
.content-layer-body p {
  margin-bottom: var(--space-sm);
}
.content-layer-body p:last-child {
  margin-bottom: 0;
}
.content-layer-body strong {
  color: var(--ink);
  font-weight: 700;
}
.content-layer-body ul,
.content-layer-body ol {
  padding-left: 1.2rem;
  margin-bottom: var(--space-sm);
}
.content-layer-body li {
  margin-bottom: 4px;
}

/* ---------- content-layer 语义色 · body 淡色区分（14 层 · 统一管道 · 亮/暗自动跟随） ---------- */
/* 与上面的层色条配套：层标题用实色条，层 body 用同色 4% 透明度作背景形成视觉层次。
   颜色用 color-mix(in srgb, var(--layer-xxx) 4%, transparent)，随主题自动跟随。 */
.content-layer[data-layer="essence"]     .content-layer-body { background: color-mix(in srgb, var(--layer-essence)     4%, transparent); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-top: 0.25rem; }
.content-layer[data-layer="evolution"]   .content-layer-body { background: color-mix(in srgb, var(--layer-evolution)   4%, transparent); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-top: 0.25rem; }
.content-layer[data-layer="principle"]   .content-layer-body { background: color-mix(in srgb, var(--layer-principle)   4%, transparent); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-top: 0.25rem; }
.content-layer[data-layer="practice"]    .content-layer-body { background: color-mix(in srgb, var(--layer-practice)    4%, transparent); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-top: 0.25rem; }
.content-layer[data-layer="deep"]        .content-layer-body { background: color-mix(in srgb, var(--layer-deep)        4%, transparent); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-top: 0.25rem; }
.content-layer[data-layer="pitfall"]     .content-layer-body { background: color-mix(in srgb, var(--layer-pitfall)     4%, transparent); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-top: 0.25rem; }
.content-layer[data-layer="extension"]   .content-layer-body { background: color-mix(in srgb, var(--layer-extension)   4%, transparent); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-top: 0.25rem; }
.content-layer[data-layer="evaluation"]  .content-layer-body { background: color-mix(in srgb, var(--layer-evaluation)  4%, transparent); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-top: 0.25rem; }
.content-layer[data-layer="insight"]     .content-layer-body { background: color-mix(in srgb, var(--layer-insight)     4%, transparent); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-top: 0.25rem; }
.content-layer[data-layer="application"]  .content-layer-body { background: color-mix(in srgb, var(--layer-application)  4%, transparent); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-top: 0.25rem; }
.content-layer[data-layer="production"]  .content-layer-body { background: color-mix(in srgb, var(--layer-production)  4%, transparent); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-top: 0.25rem; }
.content-layer[data-layer="scenario"]    .content-layer-body { background: color-mix(in srgb, var(--layer-scenario)    4%, transparent); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-top: 0.25rem; }
.content-layer[data-layer="challenge"]   .content-layer-body { background: color-mix(in srgb, var(--layer-challenge)   4%, transparent); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-top: 0.25rem; }
.content-layer[data-layer="domain"]      .content-layer-body { background: color-mix(in srgb, var(--layer-domain)      4%, transparent); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; margin-top: 0.25rem; }

/* ---------- 代码块 ---------- */
.code-block {
  background: var(--code-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin: var(--space-sm) 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--code-ink);
}
.code-block code {
  font-family: inherit;
}
/* 兜底：code 直接作为 .code-block 子元素时（无 <pre> 包裹）保留换行与等宽格式 */
div.code-block > code {
  display: block;
  white-space: pre;
}
}.code-block .kw {
  color: #8839ef;
} /* keyword · Latte mauve */
.code-block .str {
  color: #40a02b;
} /* string · Latte green */
.code-block .com {
  color: #8c8fa1;
  font-style: italic;
} /* comment · Latte subtext1 */
.code-block .num {
  color: #fe640b;
} /* number · Latte peach */
.code-block .type {
  color: #1e66f5;
} /* type · Latte blue */
.code-block .fn {
  color: #1e66f5;
} /* function · Latte blue */
.code-block .var {
  color: #d20f39;
} /* variable · Latte red */
.code-block .op {
  color: #179299;
} /* operator · Latte teal */
.code-block .annotation,
.code-block .ann,
.code-block .at {
  color: #df8e1d;
} /* annotation @Override · Latte yellow */
.code-block .const {
  color: #8839ef;
} /* constant · Latte mauve */
.code-block .attr {
  color: #179299;
} /* attribute/对象字段名(YAML key) · Latte teal */

/* 暗黑语法高亮（Catppuccin Mocha，与亮色 Latte 对称） */
html[data-theme="dark"] .code-block .kw,
html[data-theme="dark"] .code-block .const { color: #cba6f7; }
html[data-theme="dark"] .code-block .str { color: #a6e3a1; }
html[data-theme="dark"] .code-block .com { color: #6c7086; font-style: italic; }
html[data-theme="dark"] .code-block .num { color: #fab387; }
html[data-theme="dark"] .code-block .type,
html[data-theme="dark"] .code-block .fn { color: #89b4fa; }
html[data-theme="dark"] .code-block .var { color: #f38ba8; }
html[data-theme="dark"] .code-block .op { color: #94e2d5; }
html[data-theme="dark"] .code-block .annotation,
html[data-theme="dark"] .code-block .ann,
html[data-theme="dark"] .code-block .at { color: #f9e2af; }
html[data-theme="dark"] .code-block .attr { color: #94e2d5; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .code-block .kw,
  html:not([data-theme="light"]) .code-block .const { color: #cba6f7; }
  html:not([data-theme="light"]) .code-block .str { color: #a6e3a1; }
  html:not([data-theme="light"]) .code-block .com { color: #6c7086; font-style: italic; }
  html:not([data-theme="light"]) .code-block .num { color: #fab387; }
  html:not([data-theme="light"]) .code-block .type,
  html:not([data-theme="light"]) .code-block .fn { color: #89b4fa; }
  html:not([data-theme="light"]) .code-block .var { color: #f38ba8; }
  html:not([data-theme="light"]) .code-block .op { color: #94e2d5; }
  html:not([data-theme="light"]) .code-block .annotation,
  html:not([data-theme="light"]) .code-block .ann,
  html:not([data-theme="light"]) .code-block .at { color: #f9e2af; }
  html:not([data-theme="light"]) .code-block .attr { color: #94e2d5; }
}

/* 行内代码 */
code.inline-code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-card);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--accent);
  border: 1px solid var(--rule);
  word-break: break-all;
}

/* ---------- Callout 提示框 ---------- */
.callout {
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-sm) 0;
  font-size: 0.9rem;
}
.callout-title {
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.callout-tip {
  background: rgba(5, 150, 105, 0.06);
  border-left: 4px solid var(--success);
}
.callout-tip .callout-title {
  color: var(--success);
}
.callout-pitfall {
  background: rgba(217, 119, 6, 0.06);
  border-left: 4px solid var(--warn);
}
.callout-pitfall .callout-title {
  color: var(--warn);
}
.callout-deep {
  background: rgba(124, 58, 237, 0.06);
  border-left: 4px solid var(--accent-alt);
}
.callout-deep .callout-title {
  color: var(--accent-alt);
}
.callout-danger {
  background: rgba(220, 38, 38, 0.06);
  border-left: 4px solid var(--danger);
}
.callout-danger .callout-title {
  color: var(--danger);
}

/* ---------- 对比表格 ---------- */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-sm) 0;
  font-size: 0.88rem;
  overflow-x: auto;
  display: block;
}
.compare-table thead {
  background: var(--accent);
  color: #fff;
}
.compare-table th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}
.compare-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.compare-table tbody tr:nth-child(even) {
  background: var(--bg-card);
}
.compare-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
/* 包裹写法兜底：<div class="compare-table"><table> 时让内部表与直接写法视觉一致 */
.compare-table table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  color: inherit;
}

/* ---------- 内部交叉引用链接 ---------- */
.internal-link {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
  cursor: pointer;
}
.internal-link:hover {
  color: var(--accent-alt);
  text-decoration-thickness: 2px;
}

/* ---------- Mermaid 图表容器 ---------- */
.mermaid-container {
  background: var(--bg-page);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-md) 0;
  text-align: center;
  overflow-x: auto;
}
.mermaid-container .mermaid {
  display: inline-block;
  min-width: 100%;
}
/* 纵向单链大图：勿强制撑满容器宽，避免节点被横向拉扁/图面过宽 */
.mermaid-container.mermaid-vertical {
  text-align: left;
}
.mermaid-container.mermaid-vertical .mermaid {
  min-width: 0;
  max-width: 100%;
}
.chart-caption {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: var(--space-xs);
  text-align: center;
  font-style: italic;
}

/* ---------- 全页顶/底导航壳（贴 body 顶/底，与内容等距） ---------- */
.site-page-nav {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-md);
  padding-right: var(--space-md);
  box-sizing: border-box;
}
.site-page-nav--top {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md); /* 导航块 → 内容 */
}
.site-page-nav--bottom {
  padding-top: var(--space-md); /* 内容 → 导航块 */
  padding-bottom: var(--space-md);
}
.site-page-nav .chapter-nav-top,
.site-page-nav .chapter-nav {
  margin: 0;
  padding: var(--space-sm) 0;
  min-height: 2.75rem;
  box-sizing: border-box;
}

/* ---------- 章节间导航（顶/底共用视觉；空白高度对称） ---------- */
.chapter-nav,
.chapter-nav-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  font-size: 0.85rem;
  min-height: 2.75rem;
  box-sizing: border-box;
}
.chapter-nav {
  margin: var(--space-md) 0 0;
  border-top: 1px solid var(--rule);
}
.chapter-nav-top {
  margin: 0 0 var(--space-md);
  border-bottom: 1px solid var(--rule);
}
/* 已包在 .site-page-nav 内时，外边距改由壳层承担，避免双重间距 */
.site-page-nav .chapter-nav {
  margin: 0;
  border-top: 1px solid var(--rule);
}
.site-page-nav .chapter-nav-top {
  margin: 0;
  border-bottom: 1px solid var(--rule);
}
.chapter-nav a,
.chapter-nav-top a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.5;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
  box-sizing: border-box;
}
/* 翻页组：前一篇 / 后一篇 / 返回目录 —— 同一中性样式 */
.chapter-nav .nav-prev,
.chapter-nav .nav-next,
.chapter-nav .nav-home,
.chapter-nav-top .nav-prev,
.chapter-nav-top .nav-next,
.chapter-nav-top .nav-home {
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--rule);
}
.chapter-nav .nav-prev:hover,
.chapter-nav .nav-next:hover,
.chapter-nav .nav-home:hover,
.chapter-nav-top .nav-prev:hover,
.chapter-nav-top .nav-next:hover,
.chapter-nav-top .nav-home:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.chapter-nav .nav-disabled,
.chapter-nav-top .nav-disabled {
  background: var(--bg-card);
  color: var(--rule);
  cursor: not-allowed;
  pointer-events: none;
}
/* 居中组：快捷跳转 */
.chapter-nav .nav-mind,
.chapter-nav-top .nav-mind {
  background: var(--bg-card);
  color: var(--accent);
  border: 1px solid var(--accent);
}
.chapter-nav .nav-mind:hover,
.chapter-nav-top .nav-mind:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.chapter-nav .nav-center,
.chapter-nav-top .nav-center {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
}
.chapter-nav-top .nav-btn {
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--rule);
}
.chapter-nav-top .nav-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

/* ---------- 侧边栏 TOC ---------- */
.sidebar-toc h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--rule);
}
.sidebar-toc ol {
  list-style: none;
  padding: 0;
}
.sidebar-toc li {
  margin-bottom: 2px;
}
.sidebar-toc a {
  display: block;
  padding: 6px 10px;
  font-size: 0.82rem;
  color: var(--muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: all 0.15s ease;
  line-height: 1.5;
}
.sidebar-toc:not([class*="sidebar-code-"]):not([class*="toc-group-code-"]) a:hover {
  color: var(--accent);
  background: var(--bg-card);
}
.sidebar-toc:not([class*="sidebar-code-"]):not([class*="toc-group-code-"]) a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
  font-weight: 600;
}
.sidebar-toc .toc-number {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent); /* 兜底，被 sidebar-code-x / toc-group-code-x 覆盖 */
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  border-radius: 5px;
  padding: 1px 5px;
  margin-right: 6px;
  white-space: nowrap;
  display: inline-block;
  vertical-align: 1px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
/* 悬浮时 toc-number 加深 —— 与 a:hover 联动 */
.sidebar-toc a:hover .toc-number,
.sidebar-toc a.active .toc-number { filter: brightness(1.15); }

/* ---------- 导航首页特有样式 ---------- */
.index-hero {
  text-align: center;
  padding: var(--space-xl) max(var(--space-md), env(safe-area-inset-right)) var(--space-lg) max(var(--space-md), env(safe-area-inset-left));
  max-width: 1100px;
  margin: 0 auto;
}
.index-hero h1 {
  font-size: clamp(1.35rem, 4.2vw + 0.6rem, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.25;
  margin-bottom: var(--space-sm);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.index-hero .subtitle {
  font-size: clamp(0.92rem, 1.5vw + 0.7rem, 1.15rem);
  color: var(--muted);
  margin-bottom: var(--space-md);
  line-height: 1.55;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}
.index-hero .meta-stats {
  display: grid;
  /* 8 编号体系（M/C/E/S/A/G/K/D）大屏强制单行；≤1024 由媒体查询改多列 */
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-sm) var(--space-sm);
  justify-items: center;
  align-items: start;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.index-hero .stat-item {
  text-align: center;
  min-width: 0;
  width: 100%;
}
.index-hero .stat-number {
  font-family: var(--font-mono);
  font-size: clamp(1.35rem, 1.1rem + 0.8vw, 2rem);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
}
.index-hero .stat-label {
  font-size: clamp(0.68rem, 0.58rem + 0.25vw, 0.82rem);
  color: var(--muted);
  text-transform: none; /* 中文标签 uppercase 无收益，8 列更易读 */
  letter-spacing: 0.02em;
  line-height: 1.3;
  margin-top: 2px;
  overflow-wrap: anywhere;
}
/* 8 个编号体系 —— 章节站 meta-stats 数字 + label 按体系着色（scope 限 index-hero 防污染根 index） */
.index-hero .stat-item.tag-m .stat-number, .index-hero .stat-item.tag-m .stat-label { color: var(--code-m); }
.index-hero .stat-item.tag-c .stat-number, .index-hero .stat-item.tag-c .stat-label { color: var(--code-c); }
.index-hero .stat-item.tag-e .stat-number, .index-hero .stat-item.tag-e .stat-label { color: var(--code-e); }
.index-hero .stat-item.tag-s .stat-number, .index-hero .stat-item.tag-s .stat-label { color: var(--code-s); }
.index-hero .stat-item.tag-a .stat-number, .index-hero .stat-item.tag-a .stat-label { color: var(--code-a); }
.index-hero .stat-item.tag-h .stat-number, .index-hero .stat-item.tag-h .stat-label { color: var(--code-h); }
.index-hero .stat-item.tag-g .stat-number, .index-hero .stat-item.tag-g .stat-label { color: var(--code-g); }
.index-hero .stat-item.tag-k .stat-number, .index-hero .stat-item.tag-k .stat-label { color: var(--code-k); }
.index-hero .stat-item.tag-d .stat-number, .index-hero .stat-item.tag-d .stat-label { color: var(--code-d); }

/* ===== dir-stats 两级统计（根 index + 章节站 index 共用） ===== */
.dir-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.dir-stats .stat-item {
  text-align: center;
  width: auto; /* 覆盖 .index-hero .stat-item { width: 100% } 避免 flex 子项撑满整行 */
  min-width: 0;
}
.dir-stats .stat-number {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-mono);
}
.dir-stats .stat-label {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.2rem;
}
.dir-stats-sub {
  margin-top: 0.85rem;
  gap: 1.6rem;
}
.dir-stats-sub .stat-sub .stat-number.small {
  font-size: 1.15rem;
}
/* dir-stats-sub 编号体系文字着色（与 .index-hero .stat-item.tag-* 规则等价） */
.dir-stats-sub .stat-item.tag-m .stat-number.small, .dir-stats-sub .stat-item.tag-m .stat-label { color: var(--code-m); }
.dir-stats-sub .stat-item.tag-l .stat-number.small, .dir-stats-sub .stat-item.tag-l .stat-label { color: var(--code-l); }
.dir-stats-sub .stat-item.tag-c .stat-number.small, .dir-stats-sub .stat-item.tag-c .stat-label { color: var(--code-c); }
.dir-stats-sub .stat-item.tag-e .stat-number.small, .dir-stats-sub .stat-item.tag-e .stat-label { color: var(--code-e); }
.dir-stats-sub .stat-item.tag-s .stat-number.small, .dir-stats-sub .stat-item.tag-s .stat-label { color: var(--code-s); }
.dir-stats-sub .stat-item.tag-a .stat-number.small, .dir-stats-sub .stat-item.tag-a .stat-label { color: var(--code-a); }
.dir-stats-sub .stat-item.tag-h .stat-number.small, .dir-stats-sub .stat-item.tag-h .stat-label { color: var(--code-h); }
.dir-stats-sub .stat-item.tag-g .stat-number.small, .dir-stats-sub .stat-item.tag-g .stat-label { color: var(--code-g); }
.dir-stats-sub .stat-item.tag-k .stat-number.small, .dir-stats-sub .stat-item.tag-k .stat-label { color: var(--code-k); }
.dir-stats-sub .stat-item.tag-d .stat-number.small, .dir-stats-sub .stat-item.tag-d .stat-label { color: var(--code-d); }
/* 编号体系徽标 stat-tag */
.stat-tag {
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--ink-on-tag);
  margin-bottom: 2px;
}
.stat-tag.tag-m { background: var(--code-m); }
.stat-tag.tag-l { background: var(--code-l); }
.stat-tag.tag-c { background: var(--code-c); }
.stat-tag.tag-e { background: var(--code-e); }
.stat-tag.tag-s { background: var(--code-s); }
.stat-tag.tag-a { background: var(--code-a); }
.stat-tag.tag-h { background: var(--code-h); }
.stat-tag.tag-g { background: var(--code-g); }
.stat-tag.tag-k { background: var(--code-k); }
.stat-tag.tag-d { background: var(--code-d); }

.chapter-grid {
  display: grid;
  /* min(100%, …) 避免小屏下固定 320px 列宽把页面撑出横向滚动 */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: var(--space-md);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 max(var(--space-md), env(safe-area-inset-right)) var(--space-lg) max(var(--space-md), env(safe-area-inset-left));
}
.chapter-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--rule);
  border-left: 4px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0; /* 允许网格子项收缩，防止长英文词撑破 */
}
@media (hover: hover) and (pointer: fine) {
  .chapter-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
  }
}
.chapter-card:active {
  border-color: var(--accent);
}
.chapter-card .card-number {
  display: inline; /* 4 层→3 层：编号降为 card-title 内联 span */
  margin-right: 0.5em;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  transition: filter 0.15s ease;
}
.chapter-card .card-title {
  min-width: 0; /* flex 子项允许收缩，防编号 + 长标题撑破卡片 */
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.chapter-card .card-desc {
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
  flex: 1;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.chapter-card .card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--muted);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--rule);
}
.chapter-card .card-footer > span {
  min-width: 0;
  flex: 1 1 12rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.chapter-card .card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 0 1 auto;
  margin-left: auto; /* 永远靠右：footer 换行后仅剩 tags 时也不会漂到左侧 */
  justify-content: flex-end;
}
/* 难度徽标按最长文案「架构 ×334」统一最短宽度；全局 reset 已 box-sizing: border-box */
.chapter-card .card-footer .card-tags .difficulty {
  min-width: 5.5rem;
  text-align: center;
}

/* 编号前缀：编号加粗 + 按所属体系着色；复用既有 --code-* 令牌，零新增 hex */
.chapter-card .card-id-code {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.chapter-card.code-m .card-id-code { color: var(--code-m); }
.chapter-card.code-c .card-id-code { color: var(--code-c); }
.chapter-card.code-e .card-id-code { color: var(--code-e); }
.chapter-card.code-s .card-id-code { color: var(--code-s); }
.chapter-card.code-a .card-id-code { color: var(--code-a); }
.chapter-card.code-h .card-id-code { color: var(--code-h); }
.chapter-card.code-g .card-id-code { color: var(--code-g); }
.chapter-card.code-k .card-id-code { color: var(--code-k); }
.chapter-card.code-d .card-id-code { color: var(--code-d); }
.chapter-card.code-sec .card-id-code { color: var(--code-sec); }

/* ---------- Footer / Sources ---------- */
footer {
  max-width: var(--max-width);
  margin: var(--space-lg) auto 0;
  padding: var(--space-md);
  border-top: 1px solid var(--rule);
}
footer .sources h2 {
  font-size: 1rem;
  margin-bottom: var(--space-sm);
  color: var(--muted);
}
footer .sources ol {
  padding-left: 1.2rem;
  font-size: 0.85rem;
  color: var(--muted);
}
footer .sources li {
  margin-bottom: 0.5rem;
  overflow-wrap: break-word;
  word-break: break-all;
}
footer .sources .src-title {
  color: var(--ink);
  word-break: normal;
}
footer .sources .src-url {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  color: var(--accent);
  word-break: break-all;
}
footer .sources a {
  word-break: break-all;
}
sup a {
  color: var(--accent);
  text-decoration: none;
  font-size: 0.75em;
  font-weight: 600;
}
sup a:hover {
  text-decoration: underline;
}

/* ---------- 返回顶部 / 去到底部（成对，右下；与主题/进度环同为 44×44） ---------- */
.back-to-top,
.go-to-bottom {
  position: fixed;
  right: 30px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent); /* 与主题/进度环同框模型，外径一致 */
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 1000;
  line-height: 1;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.back-to-top svg,
.go-to-bottom svg {
  width: 20px;
  height: 20px;
  display: block;
  flex-shrink: 0;
}
/* 底：去到底部（最贴近视口底边） */
.go-to-bottom {
  bottom: 30px;
}
/* 顶：返回顶部（叠在去底之上） */
.back-to-top {
  bottom: 84px;
}
.back-to-top.visible,
.go-to-bottom.visible {
  display: flex;
}
.back-to-top:hover,
.go-to-bottom:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
}

/* ---------- 主题切换（浅色 / 深色 / 跟随系统；仅图标） ---------- */
.theme-toggle {
  position: fixed;
  bottom: 138px;
  right: 30px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--rule);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 1000;
  line-height: 1;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.theme-toggle .theme-toggle-icon {
  font-size: 1.15rem;
  line-height: 1;
}
/* 阅读进度环（叠在主题切换之上；与回顶/去底同族 FAB） */
.reading-progress-fab {
  position: fixed;
  right: 30px;
  bottom: 192px;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--ink);
  border: 1px solid var(--rule);
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 1000;
  line-height: 1;
  pointer-events: none;
}
.reading-progress-fab__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.reading-progress-fab__track {
  fill: none;
  stroke: var(--rule);
  stroke-width: 3;
}
.reading-progress-fab__value {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 106.814; /* 2π·17 */
  stroke-dashoffset: 106.814;
  transition: stroke-dashoffset 0.12s ease;
}
.reading-progress-fab__label {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
  .theme-toggle {
    right: 16px;
    bottom: 132px;
  }
  .reading-progress-fab {
    right: 16px;
    bottom: 186px;
  }
  .back-to-top,
  .go-to-bottom {
    right: 16px;
  }
  .go-to-bottom {
    bottom: 24px;
  }
  .back-to-top {
    bottom: 78px;
  }
}

/* ---------- 顶栏阅读进度条（次要反馈；主反馈见 .reading-progress-fab） ---------- */
.reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--accent);
  z-index: 9999;
  transition: width 0.1s ease;
  pointer-events: none;
}

/* ---------- 暗黑模式组件微调 ---------- */
/* 令牌换色已覆盖大部分组件，但少数组件需要独立的暗黑感知修正：
   difficulty/priority 胶囊需 rgba 底 + 前景色双维度调亮；
   content-card / content-layer-body / 对比表格等在暗黑下需独立边框/背景/阴影处理。
   这些是 color-swap 无法自动推导的微调。 */
html[data-theme="dark"] .difficulty-senior {
  background: rgba(96, 165, 250, 0.14);
  color: var(--accent-senior);
  border-color: rgba(96, 165, 250, 0.35);
}
html[data-theme="dark"] .difficulty-architect {
  background: rgba(167, 139, 250, 0.14);
  color: var(--accent-alt);
  border-color: rgba(167, 139, 250, 0.35);
}
html[data-theme="dark"] .difficulty-expert {
  background: rgba(45, 212, 191, 0.14);
  color: var(--diff-expert);
  border-color: rgba(45, 212, 191, 0.35);
}
html[data-theme="dark"] .priority-p0 {
  background: rgba(248, 113, 113, 0.14);
  border-color: rgba(248, 113, 113, 0.35);
}
html[data-theme="dark"] .priority-p1 {
  background: rgba(251, 191, 36, 0.14);
  border-color: rgba(251, 191, 36, 0.35);
}
html[data-theme="dark"] .priority-p2 {
  background: rgba(96, 165, 250, 0.14);
  border-color: rgba(96, 165, 250, 0.35);
}
html[data-theme="dark"] .mermaid-container {
  background: var(--bg-card);
}
html[data-theme="dark"] .content-card {
  background: var(--bg-card);
  border: 1px solid var(--rule);
  box-shadow: none;
}
html[data-theme="dark"] .content-layer-body,
html[data-theme="dark"] .content-question {
  color: var(--ink);
}
html[data-theme="dark"] .callout-tip {
  background: rgba(52, 211, 153, 0.1);
}
html[data-theme="dark"] .callout-deep {
  background: rgba(167, 139, 250, 0.1);
}
html[data-theme="dark"] .callout-danger {
  background: rgba(248, 113, 113, 0.1);
}
html[data-theme="dark"] .compare-table,
html[data-theme="dark"] .compare-table table {
  color: var(--ink);
}
html[data-theme="dark"] .compare-table thead {
  background: var(--bg-card);
  color: var(--ink);
}
html[data-theme="dark"] .compare-table th {
  background: var(--bg-card);
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
}
html[data-theme="dark"] .compare-table td {
  color: var(--ink);
  border-bottom-color: var(--rule);
}
html[data-theme="dark"] .compare-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}
html[data-theme="dark"] .compare-table tbody tr:hover {
  background: rgba(96, 165, 250, 0.12);
}
html[data-theme="dark"] .compare-table.table-cards tr {
  background: var(--bg-card);
  border-color: var(--rule);
}
html[data-theme="dark"] .compare-table.table-cards td::before {
  color: var(--muted);
}
html[data-theme="dark"] .sidebar-toc a {
  color: var(--muted);
}
html[data-theme="dark"] .sidebar-toc:not([class*="sidebar-code-"]):not([class*="toc-group-code-"]) a.active,
html[data-theme="dark"] .sidebar-toc:not([class*="sidebar-code-"]):not([class*="toc-group-code-"]) a:hover {
  color: var(--accent);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .difficulty-senior {
    background: rgba(96, 165, 250, 0.14);
    color: var(--accent-senior);
    border-color: rgba(96, 165, 250, 0.35);
  }
  html:not([data-theme="light"]) .difficulty-architect {
    background: rgba(167, 139, 250, 0.14);
    color: var(--accent-alt);
    border-color: rgba(167, 139, 250, 0.35);
  }
  html:not([data-theme="light"]) .difficulty-expert {
    background: rgba(45, 212, 191, 0.14);
    color: var(--diff-expert);
    border-color: rgba(45, 212, 191, 0.35);
  }
  html:not([data-theme="light"]) .priority-p0 {
    background: rgba(248, 113, 113, 0.14);
    border-color: rgba(248, 113, 113, 0.35);
  }
  html:not([data-theme="light"]) .priority-p1 {
    background: rgba(251, 191, 36, 0.14);
    border-color: rgba(251, 191, 36, 0.35);
  }
  html:not([data-theme="light"]) .priority-p2 {
    background: rgba(96, 165, 250, 0.14);
    border-color: rgba(96, 165, 250, 0.35);
  }
  html:not([data-theme="light"]) .mermaid-container {
    background: var(--bg-card);
  }
  html:not([data-theme="light"]) .content-card {
    background: var(--bg-card);
    border: 1px solid var(--rule);
    box-shadow: none;
  }
  html:not([data-theme="light"]) .content-layer-body,
  html:not([data-theme="light"]) .content-question {
    color: var(--ink);
  }
  html:not([data-theme="light"]) .callout-tip {
    background: rgba(52, 211, 153, 0.1);
  }
  html:not([data-theme="light"]) .callout-deep {
    background: rgba(167, 139, 250, 0.1);
  }
  html:not([data-theme="light"]) .callout-danger {
    background: rgba(248, 113, 113, 0.1);
  }
  html:not([data-theme="light"]) .compare-table,
  html:not([data-theme="light"]) .compare-table table {
    color: var(--ink);
  }
  html:not([data-theme="light"]) .compare-table thead {
    background: var(--bg-card);
    color: var(--ink);
  }
  html:not([data-theme="light"]) .compare-table th {
    background: var(--bg-card);
    color: var(--ink);
    border-bottom: 2px solid var(--accent);
  }
  html:not([data-theme="light"]) .compare-table td {
    color: var(--ink);
    border-bottom-color: var(--rule);
  }
  html:not([data-theme="light"]) .compare-table tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.03);
  }
  html:not([data-theme="light"]) .compare-table tbody tr:hover {
    background: rgba(96, 165, 250, 0.12);
  }
  html:not([data-theme="light"]) .compare-table.table-cards tr {
    background: var(--bg-card);
    border-color: var(--rule);
  }
  html:not([data-theme="light"]) .compare-table.table-cards td::before {
    color: var(--muted);
  }
  html:not([data-theme="light"]) .sidebar-toc a {
    color: var(--muted);
  }
  html:not([data-theme="light"]) .sidebar-toc:not([class*="sidebar-code-"]):not([class*="toc-group-code-"]) a.active,
  html:not([data-theme="light"]) .sidebar-toc:not([class*="sidebar-code-"]):not([class*="toc-group-code-"]) a:hover {
    color: var(--accent);
  }
}

/* ---------- 响应式 ---------- */
/* ≤1024：侧栏改左侧抽屉（由 .toc-fab 打开）；桌面仍为 sticky 列 */
.toc-fab,
.toc-backdrop {
  display: none;
}

@media (max-width: 1024px) {
  .page-wrapper {
    padding: 0 var(--space-sm);
  }
  .index-hero .meta-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 36rem;
    margin: 0 auto;
  }

  .toc-fab {
    position: fixed;
    left: 30px;
    bottom: 30px;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 50%;
    background: var(--bg-card);
    color: var(--ink);
    border: 1px solid var(--rule);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: 1000;
    line-height: 1;
  }
  .toc-fab:hover,
  .toc-fab[aria-expanded='true'] {
    border-color: var(--accent);
    color: var(--accent);
  }
  .toc-fab svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  .toc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 1090;
    border: none;
    padding: 0;
    cursor: pointer;
  }
  html.toc-drawer-open .toc-backdrop {
    display: block;
  }

  .sidebar-toc {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 320px);
    max-height: none;
    align-self: auto;
    z-index: 1100;
    margin: 0;
    padding: var(--space-md);
    padding-top: max(var(--space-md), env(safe-area-inset-top));
    padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
    background: var(--bg-page);
    border-right: 1px solid var(--rule);
    box-shadow: var(--shadow-md);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-105%);
    transition: transform 0.2s ease;
    overscroll-behavior: contain;
  }
  html.toc-drawer-open .sidebar-toc {
    transform: translateX(0);
  }
  html.toc-drawer-open,
  html.toc-drawer-open body {
    overflow: hidden;
  }

  /* 有分组：默认收起；.is-expanded 展开子列表 */
  .sidebar-toc .toc-group > ol {
    display: none;
  }
  .sidebar-toc .toc-group.is-expanded > ol {
    display: block;
  }
  .sidebar-toc a.toc-group-title {
    position: relative;
    padding-right: 1.6rem;
  }
  .sidebar-toc a.toc-group-title::after {
    content: '▸';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    opacity: 0.7;
  }
  .sidebar-toc .toc-group.is-expanded a.toc-group-title::after {
    content: '▾';
  }
}

@media (max-width: 480px) {
  .toc-fab {
    left: 16px;
    bottom: 84px;
  }
}
/* 小屏：目录 FAB 上移到「听本页」上方（听本页留在 bottom:30 下方） */
@media (max-width: 1024px) {
  .toc-fab { bottom: 84px; }
}
/* 朗读启动后：.kb-listen 追加一行「暂停 / 语速 / 停止」面板，
   目录 FAB 再上移一层（状态类 kb-listen-open 由 theme-init.js 的 paint() 同步）。
   停止 / 朗读结束后状态类移除，FAB 自动回落到常驻位置。 */
@media (max-width: 1024px) {
  html.kb-listen-open .toc-fab { bottom: 128px; }
}
@media (max-width: 480px) {
  html.kb-listen-open .toc-fab { bottom: 122px; }
}
/* ---------- 导航按钮：中等屏提前换行（2026-09-04） ----------
   侧边栏 TOC 隐藏后可用宽度变化不大，但 5 个按钮并排会被挤压后各自换行、
   高度翻倍。故 900px 以下改为分组换行：翻页组一行（各占 50%）、居中组整行。 */
@media (max-width: 900px) {
  .chapter-nav,
  .chapter-nav-top {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }
  .chapter-nav > .nav-prev,
  .chapter-nav > .nav-next,
  .chapter-nav > .nav-home,
  .chapter-nav-top > .nav-prev,
  .chapter-nav-top > .nav-next,
  .chapter-nav-top > .nav-home {
    flex: 1 1 calc(50% - var(--space-xs));
    min-width: 0;
    order: 1;
  }
  .chapter-nav .nav-center,
  .chapter-nav-top .nav-center {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
    margin: 0;
    order: 2;
  }
  /* 居中组按两列排布（章节页 2 个一行、导图页 3 个 2+1） */
  .chapter-nav .nav-center a,
  .chapter-nav-top .nav-center a {
    flex: 1 1 calc(50% - var(--space-xs));
    min-width: 0;
  }
  .chapter-nav .nav-center a:last-child:nth-child(odd),
  .chapter-nav-top .nav-center a:last-child:nth-child(odd) {
    flex: 1 1 100%;
  }
  .chapter-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .index-hero {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-md);
  }
  .index-hero h1 {
    font-size: clamp(1.28rem, 5.5vw, 1.7rem);
    letter-spacing: -0.02em;
  }
  .index-hero .subtitle {
    font-size: 0.95rem;
    margin-bottom: var(--space-sm);
    padding: 0 2px;
  }
  .index-hero .meta-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-sm) var(--space-xs);
    max-width: 100%;
  }
  .index-hero .stat-number {
    font-size: 1.35rem;
  }
  .index-hero .stat-label {
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    text-transform: none; /* 中文标签 uppercase 无收益，小屏更易读 */
  }
  .chapter-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    padding-bottom: var(--space-md);
  }
  .chapter-card {
    padding: var(--space-sm) 14px;
    gap: 6px;
    border-radius: var(--radius-md);
  }
  .chapter-card .card-title {
    font-size: 1.02rem;
  }
  .chapter-card .card-desc {
    font-size: 0.82rem;
    line-height: 1.55;
  }
  .chapter-card .card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  .chapter-card .card-footer > span {
    flex: 1 1 auto;
    width: 100%;
  }
  .chapter-card .card-tags {
    justify-content: flex-end;
    width: 100%;
  }
  .chapter-card .difficulty {
    padding: 2px 8px;
    font-size: 0.68rem;
  }
  .content-card {
    padding: var(--space-sm);
  }
  .content-question {
    font-size: 1rem;
  }
  .chapter-title {
    font-size: 1.4rem;
  }
  .chapter-nav,
  .chapter-nav-top {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
  }
  .site-page-nav--top,
  .site-page-nav--bottom {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
  }
  .chapter-nav {
    margin-top: 0;
  }
  .chapter-nav-top {
    margin-bottom: 0;
  }
  /* 小屏按钮改为块级 + 固定行高：长章节名单行省略而非换行撑高，
     高度由 line-height 精确锁定（32px + 2px 边框 ≈ 34px），不再随内容波动 */
  .chapter-nav a,
  .chapter-nav-top a {
    display: block;
    padding: 0 10px;
    font-size: 0.8rem;
    line-height: 32px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .code-block {
    font-size: 0.78rem;
  }
  .compare-table {
    font-size: 0.75rem;
    max-width: 100%;
    /* 滚动区收束成面板 + 惯性滚动，暗示可横向滑动 */
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    -webkit-overflow-scrolling: touch;
  }
  .compare-table th {
    /* 表头允许换行，与 td 对齐行高，避免小屏行高参差 */
    white-space: normal;
  }
  .mermaid-container {
    overflow-x: auto;
    max-width: 100%;
  }
  .mermaid-container .mermaid {
    min-width: auto;
  }
}

/* ---------- 极小屏导航进一步压缩（2026-09-04） ----------
   375~480px 下按钮宽度约 170px，26 字长章节名必然溢出，
   靠 ellipsis 截断保证高度恒定；居中组按钮数为奇数时最后一个独占整行。 */
@media (max-width: 480px) {
  .index-hero {
    padding-top: var(--space-md);
  }
  .index-hero h1 {
    font-size: 1.22rem;
    line-height: 1.3;
  }
  .index-hero .subtitle {
    font-size: 0.88rem;
  }
  .index-hero .meta-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 6px;
  }
  .index-hero .stat-number {
    font-size: 1.25rem;
  }
  .index-hero .stat-label {
    font-size: 0.64rem;
  }
  .chapter-grid {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .chapter-card {
    padding: 12px;
  }
  .chapter-nav a,
  .chapter-nav-top a {
    padding: 0 8px;
    font-size: 0.76rem;
    line-height: 30px;
  }
  .chapter-nav,
  .chapter-nav-top,
  .chapter-nav .nav-center,
  .chapter-nav-top .nav-center {
    gap: 6px;
  }
}


/* ---------- MOBILE-MANDATORY: site-wide phone baseline (do not remove) ---------- */
/* 规范：docs/specs/format-shared.md §8；AGENTS.md 硬红线。
   断点：≤900 导航/网格；≤768 手机主断点；≤640 表格卡片化；≤480 极小屏。
   页面内联桌面规则若覆盖本文件，必须在同一文件内提供对应 @media 覆盖。 */
@media (max-width: 768px) {
  .content-main {
    padding: var(--space-md) 0;
  }
  .chapter-header {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
  }
  .chapter-title {
    font-size: clamp(1.25rem, 5vw, 1.5rem);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
  .chapter-subtitle {
    font-size: 0.92rem;
    line-height: 1.55;
  }
  .chapter-meta {
    gap: 6px 10px;
    font-size: 0.78rem;
  }
  .chapter-lead,
  .group-lead,
  .eng-group-lead {
    padding: var(--space-sm);
    gap: var(--space-sm);
  }
  .content-header {
    flex-wrap: wrap;
    gap: 6px 8px;
  }
  .content-question {
    font-size: 1rem;
    width: 100%;
  }
  .content-layer-title {
    font-size: 0.85rem;
  }
  .content-layer-body {
    font-size: 0.92rem;
  }
  .code-block {
    padding: var(--space-sm);
    font-size: 0.76rem;
    -webkit-overflow-scrolling: touch;
  }
  /* 导图站：与页面内联 @media 互补；同特异度时页面后写的桌面规则仍需页面自带小屏覆盖 */
  .map-hero {
    padding: 1.5rem max(12px, env(safe-area-inset-left)) 0.75rem max(12px, env(safe-area-inset-right)) !important;
  }
  .map-hero h1 {
    font-size: clamp(1.25rem, 5.5vw, 1.65rem) !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
  }
  .map-hero .subtitle {
    font-size: 0.9rem !important;
    line-height: 1.55 !important;
    padding: 0 2px;
  }
  .map-body {
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
  .map-overview {
    grid-template-columns: 1fr !important;
    gap: var(--space-sm) !important;
    margin: var(--space-md) 0 !important;
  }
  .map-legend {
    gap: 0.75rem !important;
  }
  .map-card summary {
    font-size: 0.92rem;
    line-height: 1.4;
  }
  .theme-h {
    font-size: 1.05rem !important;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  /* 核心原理速查 epq */
  .content-header {
    flex-wrap: wrap;
  }
  .content-question {
    font-size: 1rem !important;
    overflow-wrap: anywhere;
  }
  .content-card {
    padding: var(--space-sm) !important;
  }
  /* 根目录页 dir-*（若页面未自写小屏，仍保证可读） */
  .dir-hero {
    padding: 1.5rem max(12px, env(safe-area-inset-left)) 1rem max(12px, env(safe-area-inset-right)) !important;
  }
  .dir-hero h1 {
    font-size: clamp(1.25rem, 5vw, 1.7rem) !important;
    line-height: 1.3 !important;
    overflow-wrap: anywhere;
  }
  .dir-toolbar,
  .dir-legend,
  .dir-section,
  .dir-stats {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .dir-stats {
    gap: 1rem !important;
  }
  .dir-stats .stat-number {
    font-size: 1.35rem !important;
  }
  .q-item {
    flex-wrap: wrap;
    align-items: flex-start !important;
  }
  .q-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    line-height: 1.4;
  }
  .q-tags {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .idx-hero {
    padding: 1.5rem max(12px, env(safe-area-inset-left)) 1rem max(12px, env(safe-area-inset-right)) !important;
  }
  .idx-hero h1 {
    font-size: clamp(1.25rem, 5vw, 1.7rem) !important;
    line-height: 1.3 !important;
  }
  .idx-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .grid {
    grid-template-columns: 1fr !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }
}

@media (max-width: 480px) {
  .map-hero h1,
  .idx-hero h1,
  .dir-hero h1 {
    font-size: 1.2rem !important;
  }
  .content-badge {
    font-size: 0.65rem;
  }
  .difficulty,
  .priority {
    padding: 2px 7px;
    font-size: 0.66rem;
  }
}

/* ---------- 打印样式 ---------- */
@media print {
  .sidebar-toc,
  .chapter-nav,
  .back-to-top,
  .go-to-bottom,
  .theme-toggle,
  .reading-progress,
  .reading-progress-fab,
  .toc-fab,
  .toc-backdrop,
  .sidebar-toc {
    display: none !important;
  }
  .content-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid var(--rule);
  }
  .code-block {
    break-inside: avoid;
  }
  .mermaid-container {
    break-inside: avoid;
  }
  body {
    background: #fff;
    color: #000;
  }
}

/* ---------- 小屏表格纵向卡片化（2026-09-04） ----------
   nav.js initTableCards() 会为结构规整（无 colspan/rowspan、行列数齐整）的
   compare-table 注入 td[data-label] 并加 table-cards 类；
   ≤640px 时每行渲染为一张纵向卡片，列名由 ::before 显示。
   不规则表格自动跳过，维持 T2 的横向滚动面板。 */
@media (max-width: 640px) {
  .compare-table.table-cards {
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  .compare-table.table-cards thead {
    display: none;
  }
  .compare-table.table-cards,
  .compare-table.table-cards tbody,
  .compare-table.table-cards tr,
  .compare-table.table-cards td {
    display: block;
    width: 100%;
  }
  .compare-table.table-cards tbody {
    margin: calc(var(--space-xs) * -1) 0;
  }
  .compare-table.table-cards tr {
    border: 1px solid var(--rule);
    border-radius: var(--radius-sm);
    background: var(--bg-page);
    padding: 2px 12px;
    margin: var(--space-xs) 0;
  }
  /* 覆盖桌面端斑马纹与悬停色，卡片模式统一底色 */
  .compare-table.table-cards tbody tr:nth-child(even),
  .compare-table.table-cards tbody tr:hover {
    background: var(--bg-page);
  }
  .compare-table.table-cards td {
    border-bottom: none;
    padding: 7px 0;
  }
  .compare-table.table-cards td + td {
    border-top: 1px dashed var(--rule);
  }
  .compare-table.table-cards td::before {
    content: attr(data-label);
    display: block;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.02em;
    margin-bottom: 1px;
  }
}

/* ---------- kb-count markers (SSOT / structural) ---------- */
/* data-kb-pos / data-kb-count 是全站唯一权威计数锚点 —— sync_counts.py check (416 位一致性) +
   audit_truth_source.py (真值审计) 都依赖这些属性。展示层仅加细虚线下划线 + 悬停 title 提示，
   不改变排版权重，保持视觉轻量。 */
/* 权威计数位与结构计数位的可视锚点：细虚线下划线 + 悬停提示，不改排版权重 */
.kb-count,
[data-kb-pos],
[data-kb-count-local] {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: color-mix(in srgb, var(--accent, #179299) 45%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
}
.kb-count[data-kb-pos]::after {
  content: none;
}
.kb-count[data-kb-pos]:hover,
.kb-count-local:hover {
  background: color-mix(in srgb, var(--accent, #179299) 12%, transparent);
  border-radius: 2px;
}

/* 技术范式引用回链（D 篇卡片底部 → S 篇场景题） */
.content-crossref {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: var(--space-md) 0;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: var(--bg-card);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
  line-height: 1.6;
}
.content-crossref-label {
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.content-crossref a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed var(--rule);
}
.content-crossref a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* =====================================================
   10 组编号体系 · 统一着色骨架（2026-10-27 预留）
   当前全站 content-badge / chapter-card 仍用默认 --accent 蓝；
   后续逐章挂 .code-c / .code-m 等类后自动切换。
   ===================================================== */

/* --- content-badge 着色钩子（所有 chapter HTML，content-badge + content-badge 统一为 content-badge）--- */
.content-badge.code-m  { background: var(--code-m);  }
.content-badge.code-c  { background: var(--code-c);  }
.content-badge.code-e  { background: var(--code-e);  }
.content-badge.code-s  { background: var(--code-s);  }
.content-badge.code-a  { background: var(--code-a);  }
.content-badge.code-h  { background: var(--code-h);  }
.content-badge.code-g  { background: var(--code-g);  }
.content-badge.code-k  { background: var(--code-k);  }
.content-badge.code-d  { background: var(--code-d);  }
.content-badge.code-sec{ background: var(--code-sec);}
/* content-card 悬浮时徽章加深 */
.content-card:hover .content-badge { filter: brightness(1.15); }

/* --- chapter-card 边框着色钩子（javaint/index.html 的 24 张卡 + chapter 页导航卡）--- */
.chapter-card.code-m  { border-left-color: var(--code-m);  }
.chapter-card.code-c  { border-left-color: var(--code-c);  }
.chapter-card.code-e  { border-left-color: var(--code-e);  }
.chapter-card.code-s  { border-left-color: var(--code-s);  }
.chapter-card.code-a  { border-left-color: var(--code-a);  }
.chapter-card.code-h  { border-left-color: var(--code-h);  }
.chapter-card.code-g  { border-left-color: var(--code-g);  }
.chapter-card.code-k  { border-left-color: var(--code-k);  }
.chapter-card.code-d  { border-left-color: var(--code-d);  }
.chapter-card.code-sec{ border-left-color: var(--code-sec);}
.chapter-card.overview-card { border-left-color: var(--success); }

/* --- chapter-card 父级继承 → 子级 card-number 自动着色（不需要子级再加 code-x 类）--- */
.chapter-card.code-m .card-number  { color: var(--code-m);  }
.chapter-card.code-c .card-number  { color: var(--code-c);  }
.chapter-card.code-e .card-number  { color: var(--code-e);  }
.chapter-card.code-s .card-number  { color: var(--code-s);  }
.chapter-card.code-a .card-number  { color: var(--code-a);  }
.chapter-card.code-h .card-number  { color: var(--code-h);  }
.chapter-card.code-g .card-number  { color: var(--code-g);  }
.chapter-card.code-k .card-number  { color: var(--code-k);  }
.chapter-card.code-d .card-number  { color: var(--code-d);  }
.chapter-card.code-sec .card-number{ color: var(--code-sec);}
.chapter-card.overview-card .card-number { color: var(--success); }
/* chapter-card 悬浮时编号加深 —— 父级体系类一起参与 */
.chapter-card.code-m:hover .card-number,
.chapter-card.code-c:hover .card-number,
.chapter-card.code-e:hover .card-number,
.chapter-card.code-s:hover .card-number,
.chapter-card.code-a:hover .card-number,
.chapter-card.code-h:hover .card-number,
.chapter-card.code-g:hover .card-number,
.chapter-card.code-k:hover .card-number,
.chapter-card.code-d:hover .card-number,
.chapter-card.code-sec:hover .card-number,
.chapter-card.overview-card:hover .card-number { filter: brightness(1.2); }

/* --- toc-group-title 着色钩子（特异度须压过 .sidebar-toc a.toc-group-title）--- */
.sidebar-toc a.toc-group-title.code-m  { color: var(--code-m);  border-left-color: var(--code-m);  }
.sidebar-toc a.toc-group-title.code-c  { color: var(--code-c);  border-left-color: var(--code-c);  }
.sidebar-toc a.toc-group-title.code-e  { color: var(--code-e);  border-left-color: var(--code-e);  }
.sidebar-toc a.toc-group-title.code-s  { color: var(--code-s);  border-left-color: var(--code-s);  }
.sidebar-toc a.toc-group-title.code-a  { color: var(--code-a);  border-left-color: var(--code-a);  }
.sidebar-toc a.toc-group-title.code-h  { color: var(--code-h);  border-left-color: var(--code-h);  }
.sidebar-toc a.toc-group-title.code-g  { color: var(--code-g);  border-left-color: var(--code-g);  }
.sidebar-toc a.toc-group-title.code-k  { color: var(--code-k);  border-left-color: var(--code-k);  }
.sidebar-toc a.toc-group-title.code-d  { color: var(--code-d);  border-left-color: var(--code-d);  }
.sidebar-toc a.toc-group-title.code-sec{ color: var(--code-sec);border-left-color: var(--code-sec);}
.sidebar-toc a.toc-group-title.code-m.active,
.sidebar-toc a.toc-group-title.code-m:hover  { color: var(--code-m);  border-left-color: var(--code-m);  }
.sidebar-toc a.toc-group-title.code-c.active,
.sidebar-toc a.toc-group-title.code-c:hover  { color: var(--code-c);  border-left-color: var(--code-c);  }
.sidebar-toc a.toc-group-title.code-e.active,
.sidebar-toc a.toc-group-title.code-e:hover  { color: var(--code-e);  border-left-color: var(--code-e);  }
.sidebar-toc a.toc-group-title.code-s.active,
.sidebar-toc a.toc-group-title.code-s:hover  { color: var(--code-s);  border-left-color: var(--code-s);  }
.sidebar-toc a.toc-group-title.code-a.active,
.sidebar-toc a.toc-group-title.code-a:hover  { color: var(--code-a);  border-left-color: var(--code-a);  }
.sidebar-toc a.toc-group-title.code-h.active,
.sidebar-toc a.toc-group-title.code-h:hover  { color: var(--code-h);  border-left-color: var(--code-h);  }
.sidebar-toc a.toc-group-title.code-g.active,
.sidebar-toc a.toc-group-title.code-g:hover  { color: var(--code-g);  border-left-color: var(--code-g);  }
.sidebar-toc a.toc-group-title.code-k.active,
.sidebar-toc a.toc-group-title.code-k:hover  { color: var(--code-k);  border-left-color: var(--code-k);  }
.sidebar-toc a.toc-group-title.code-d.active,
.sidebar-toc a.toc-group-title.code-d:hover  { color: var(--code-d);  border-left-color: var(--code-d);  }
.sidebar-toc a.toc-group-title.code-sec.active,
.sidebar-toc a.toc-group-title.code-sec:hover{ color: var(--code-sec);border-left-color: var(--code-sec);}

/* ---------- sidebar-toc 父级体系标识（覆盖所有 a 和 h3，篇章级着色） ---------- */
/* 章节站 / 根 index 的 sidebar-toc 按 dir-group 容器上的 code-x 体系类着色。
   父级继承而非逐个子级枚举 —— 未来新增 a/h3 自动着色，零漏网。 */
.sidebar-toc.sidebar-code-m a,  .sidebar-toc.sidebar-code-m h3  { color: var(--code-m); }
.sidebar-toc.sidebar-code-m a.active, .sidebar-toc.sidebar-code-m a:hover { color: var(--code-m); border-left-color: var(--code-m); background: color-mix(in srgb, var(--code-m) 5%, transparent); }
.sidebar-toc.sidebar-code-c a,  .sidebar-toc.sidebar-code-c h3  { color: var(--code-c); }
.sidebar-toc.sidebar-code-c a.active, .sidebar-toc.sidebar-code-c a:hover { color: var(--code-c); border-left-color: var(--code-c); background: color-mix(in srgb, var(--code-c) 5%, transparent); }
.sidebar-toc.sidebar-code-e a,  .sidebar-toc.sidebar-code-e h3  { color: var(--code-e); }
.sidebar-toc.sidebar-code-e a.active, .sidebar-toc.sidebar-code-e a:hover { color: var(--code-e); border-left-color: var(--code-e); background: color-mix(in srgb, var(--code-e) 5%, transparent); }
.sidebar-toc.sidebar-code-s a,  .sidebar-toc.sidebar-code-s h3  { color: var(--code-s); }
.sidebar-toc.sidebar-code-s a.active, .sidebar-toc.sidebar-code-s a:hover { color: var(--code-s); border-left-color: var(--code-s); background: color-mix(in srgb, var(--code-s) 5%, transparent); }
.sidebar-toc.sidebar-code-a a,  .sidebar-toc.sidebar-code-a h3  { color: var(--code-a); }
.sidebar-toc.sidebar-code-a a.active, .sidebar-toc.sidebar-code-a a:hover { color: var(--code-a); border-left-color: var(--code-a); background: color-mix(in srgb, var(--code-a) 5%, transparent); }
.sidebar-toc.sidebar-code-h a,  .sidebar-toc.sidebar-code-h h3  { color: var(--code-h); }
.sidebar-toc.sidebar-code-h a.active, .sidebar-toc.sidebar-code-h a:hover { color: var(--code-h); border-left-color: var(--code-h); background: color-mix(in srgb, var(--code-h) 5%, transparent); }
.sidebar-toc.sidebar-code-g a,  .sidebar-toc.sidebar-code-g h3  { color: var(--code-g); }
.sidebar-toc.sidebar-code-g a.active, .sidebar-toc.sidebar-code-g a:hover { color: var(--code-g); border-left-color: var(--code-g); background: color-mix(in srgb, var(--code-g) 5%, transparent); }
.sidebar-toc.sidebar-code-k a,  .sidebar-toc.sidebar-code-k h3  { color: var(--code-k); }
.sidebar-toc.sidebar-code-k a.active, .sidebar-toc.sidebar-code-k a:hover { color: var(--code-k); border-left-color: var(--code-k); background: color-mix(in srgb, var(--code-k) 5%, transparent); }
.sidebar-toc.sidebar-code-d a,  .sidebar-toc.sidebar-code-d h3  { color: var(--code-d); }
.sidebar-toc.sidebar-code-d a.active, .sidebar-toc.sidebar-code-d a:hover { color: var(--code-d); border-left-color: var(--code-d); background: color-mix(in srgb, var(--code-d) 5%, transparent); }
/* sidebar-toc 默认 active/hover 色被上面 sidebar-code-x 覆盖，active 状态再显式强调 */
.sidebar-toc[class*="sidebar-code-"] a.active::before,
.sidebar-toc[class*="sidebar-code-"] a.active::after { background: currentColor; }

/* ---------- sidebar-code-x 覆盖 toc-number（篇章级 sidebar 内卡片编号） ---------- */
.sidebar-toc.sidebar-code-m .toc-number { color: var(--code-m); background: color-mix(in srgb, var(--code-m) 12%, transparent); border-color: color-mix(in srgb, var(--code-m) 35%, transparent); }
.sidebar-toc.sidebar-code-c .toc-number { color: var(--code-c); background: color-mix(in srgb, var(--code-c) 12%, transparent); border-color: color-mix(in srgb, var(--code-c) 35%, transparent); }
.sidebar-toc.sidebar-code-e .toc-number { color: var(--code-e); background: color-mix(in srgb, var(--code-e) 12%, transparent); border-color: color-mix(in srgb, var(--code-e) 35%, transparent); }
.sidebar-toc.sidebar-code-s .toc-number { color: var(--code-s); background: color-mix(in srgb, var(--code-s) 12%, transparent); border-color: color-mix(in srgb, var(--code-s) 35%, transparent); }
.sidebar-toc.sidebar-code-a .toc-number { color: var(--code-a); background: color-mix(in srgb, var(--code-a) 12%, transparent); border-color: color-mix(in srgb, var(--code-a) 35%, transparent); }
.sidebar-toc.sidebar-code-h .toc-number { color: var(--code-h); background: color-mix(in srgb, var(--code-h) 12%, transparent); border-color: color-mix(in srgb, var(--code-h) 35%, transparent); }
.sidebar-toc.sidebar-code-g .toc-number { color: var(--code-g); background: color-mix(in srgb, var(--code-g) 12%, transparent); border-color: color-mix(in srgb, var(--code-g) 35%, transparent); }
.sidebar-toc.sidebar-code-k .toc-number { color: var(--code-k); background: color-mix(in srgb, var(--code-k) 12%, transparent); border-color: color-mix(in srgb, var(--code-k) 35%, transparent); }
.sidebar-toc.sidebar-code-d .toc-number { color: var(--code-d); background: color-mix(in srgb, var(--code-d) 12%, transparent); border-color: color-mix(in srgb, var(--code-d) 35%, transparent); }
/* sidebar-code-sec 不存在篇章级（仅专篇），如后续新增则补 */

/* ---------- toc-group-code-x 覆盖 toc-number（quick-list 混合多体系场景） ---------- */
.sidebar-toc .toc-group.toc-group-code-m .toc-number { color: var(--code-m); background: color-mix(in srgb, var(--code-m) 12%, transparent); border-color: color-mix(in srgb, var(--code-m) 35%, transparent); }
.sidebar-toc .toc-group.toc-group-code-c .toc-number { color: var(--code-c); background: color-mix(in srgb, var(--code-c) 12%, transparent); border-color: color-mix(in srgb, var(--code-c) 35%, transparent); }
.sidebar-toc .toc-group.toc-group-code-e .toc-number { color: var(--code-e); background: color-mix(in srgb, var(--code-e) 12%, transparent); border-color: color-mix(in srgb, var(--code-e) 35%, transparent); }
.sidebar-toc .toc-group.toc-group-code-s .toc-number { color: var(--code-s); background: color-mix(in srgb, var(--code-s) 12%, transparent); border-color: color-mix(in srgb, var(--code-s) 35%, transparent); }
.sidebar-toc .toc-group.toc-group-code-a .toc-number { color: var(--code-a); background: color-mix(in srgb, var(--code-a) 12%, transparent); border-color: color-mix(in srgb, var(--code-a) 35%, transparent); }
.sidebar-toc .toc-group.toc-group-code-h .toc-number { color: var(--code-h); background: color-mix(in srgb, var(--code-h) 12%, transparent); border-color: color-mix(in srgb, var(--code-h) 35%, transparent); }
.sidebar-toc .toc-group.toc-group-code-g .toc-number { color: var(--code-g); background: color-mix(in srgb, var(--code-g) 12%, transparent); border-color: color-mix(in srgb, var(--code-g) 35%, transparent); }
.sidebar-toc .toc-group.toc-group-code-k .toc-number { color: var(--code-k); background: color-mix(in srgb, var(--code-k) 12%, transparent); border-color: color-mix(in srgb, var(--code-k) 35%, transparent); }
.sidebar-toc .toc-group.toc-group-code-d .toc-number { color: var(--code-d); background: color-mix(in srgb, var(--code-d) 12%, transparent); border-color: color-mix(in srgb, var(--code-d) 35%, transparent); }
.sidebar-toc .toc-group.toc-group-code-sec .toc-number { color: var(--code-sec); background: color-mix(in srgb, var(--code-sec) 12%, transparent); border-color: color-mix(in srgb, var(--code-sec) 35%, transparent); }

/* ---------- toc-group-code-x 覆盖 a:hover / a.active 文字色（quick-list 多体系混排） ---------- */
.sidebar-toc .toc-group.toc-group-code-m a:hover,  .sidebar-toc .toc-group.toc-group-code-m a.active  { color: var(--code-m); border-left-color: var(--code-m); background: color-mix(in srgb, var(--code-m) 5%, transparent); }
.sidebar-toc .toc-group.toc-group-code-c a:hover,  .sidebar-toc .toc-group.toc-group-code-c a.active  { color: var(--code-c); border-left-color: var(--code-c); background: color-mix(in srgb, var(--code-c) 5%, transparent); }
.sidebar-toc .toc-group.toc-group-code-e a:hover,  .sidebar-toc .toc-group.toc-group-code-e a.active  { color: var(--code-e); border-left-color: var(--code-e); background: color-mix(in srgb, var(--code-e) 5%, transparent); }
.sidebar-toc .toc-group.toc-group-code-s a:hover,  .sidebar-toc .toc-group.toc-group-code-s a.active  { color: var(--code-s); border-left-color: var(--code-s); background: color-mix(in srgb, var(--code-s) 5%, transparent); }
.sidebar-toc .toc-group.toc-group-code-a a:hover,  .sidebar-toc .toc-group.toc-group-code-a a.active  { color: var(--code-a); border-left-color: var(--code-a); background: color-mix(in srgb, var(--code-a) 5%, transparent); }
.sidebar-toc .toc-group.toc-group-code-h a:hover,  .sidebar-toc .toc-group.toc-group-code-h a.active  { color: var(--code-h); border-left-color: var(--code-h); background: color-mix(in srgb, var(--code-h) 5%, transparent); }
.sidebar-toc .toc-group.toc-group-code-g a:hover,  .sidebar-toc .toc-group.toc-group-code-g a.active  { color: var(--code-g); border-left-color: var(--code-g); background: color-mix(in srgb, var(--code-g) 5%, transparent); }
.sidebar-toc .toc-group.toc-group-code-k a:hover,  .sidebar-toc .toc-group.toc-group-code-k a.active  { color: var(--code-k); border-left-color: var(--code-k); background: color-mix(in srgb, var(--code-k) 5%, transparent); }
.sidebar-toc .toc-group.toc-group-code-d a:hover,  .sidebar-toc .toc-group.toc-group-code-d a.active  { color: var(--code-d); border-left-color: var(--code-d); background: color-mix(in srgb, var(--code-d) 5%, transparent); }
.sidebar-toc .toc-group.toc-group-code-sec a:hover,.sidebar-toc .toc-group.toc-group-code-sec a.active{ color: var(--code-sec); border-left-color: var(--code-sec); background: color-mix(in srgb, var(--code-sec) 5%, transparent); }


/* --- 方法论 dimension-title .dim-number 着色钩子 --- */
.dimension-title .dim-number.code-m { color: var(--code-m); }


/* ---------- 侧栏 TOC 二级分组标题（M14 道/法/术） ----------
   子列表仍是 .toc-group 的直接 <ol>，≤1024 抽屉折叠逻辑不变。 */
.sidebar-toc a.toc-subgroup-title {
  display: block;
  margin: var(--space-sm) 0 2px;
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
  text-decoration: none;
}
.sidebar-toc a.toc-subgroup-title:hover,
.sidebar-toc a.toc-subgroup-title.active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-left-color: var(--accent);
  text-decoration: none;
}
.sidebar-toc a.toc-subgroup-title.code-m,
.sidebar-toc a.toc-subgroup-title.code-m:hover,
.sidebar-toc a.toc-subgroup-title.code-m.active {
  color: var(--code-m);
  border-left-color: var(--code-m);
}
@media (max-width: 1024px) {
  /* 二级分组标题随所属 .toc-group 一起收起 / 展开 */
  .sidebar-toc .toc-group:not(.is-expanded) > a.toc-subgroup-title {
    display: none;
  }
}