/* ============================================================
   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: #fafbfc;
  --bg2: #f0f3f7;
  --ink: #1a1f36;
  --muted: #6b7280;
  --rule: #e2e8f0;
  --accent: #2563eb;
  --accent2: #7c3aed;
  /* 难度档第三色（专家）：原沿用 --accent2 紫，与「架构」文字色完全相同、
     区分度不足，故独立为青绿。文字色与实心色拆开——徽标底色承白字、胶囊文字是
     前景色，二者对比度要求相反，同值无法兼顾。*/
  --diff-expert: #0f766e;
  --diff-expert-solid: #0f766e;
  --code-bg: #1e293b;
  --code-ink: #e2e8f0;
  --success: #059669;
  --warn: #d97706;
  --danger: #dc2626;

  /* 层次色条令牌（2026-09-15 补：insight/application/production/scenario/challenge 此前回退默认强调色） */
  --layer-insight: #0d9488;
  --layer-application: #db2777;
  --layer-production: #16a34a;
  --layer-scenario: #0284c7;
  --layer-challenge: #ca8a04;

  /* 排版 */
  --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;

  /* ====== 9 组编号体系统一令牌（2026-10-27 新增）====== */
  /* 用途：qa-badge / chapter-card 边框 / toc-group-title / card-number */
  --code-m:    #2563eb;   /* M 方法论    蓝    道法术势总纲 */
  --code-c:    #ea580c;   /* C 技术栈    橙    工程实栈 */
  --code-e:    #0891b2;   /* E 核心原理  青    底层机制 */
  --code-s:    #7c3aed;   /* S 场景      紫    设计框架 */
  --code-a:    #0f766e;   /* A AI纵深    深青  科技感 */
  --code-g:    #059669;   /* G 工程化    绿    实践 */
  --code-k:    #e11d48;   /* K 踩坑      玫红  警示 */
  --code-g_k:  #e11d48;   /* G/K 合并轴  玫红  复用 --code-k */
  --code-d:    #d97706;   /* D 领域      橙棕  业务 */
  --code-sec:  #dc2626;   /* SEC 安全    红    警示 */

  /* 方法论层 dao/fa/shu/shi 抽离 */
  --dim-dao: #2563eb;
  --dim-fa:  #059669;
  --dim-shu: #d97706;
  --dim-shi: #e11d48;

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

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

/* ---------- 暗黑模式令牌（kb-color-theme / data-theme） ---------- */
html[data-theme="dark"] {
  --bg: #0f1419;
  --bg2: #1a2332;
  --ink: #e8edf5;
  --muted: #9aa3b2;
  --rule: #2d3a4d;
  --accent: #60a5fa;
  --accent2: #a78bfa;
  --code-bg: #0b1220;
  --code-ink: #e2e8f0;
  --success: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;
  --layer-insight: #2dd4bf;
  --layer-application: #f472b6;
  --layer-production: #4ade80;
  --layer-scenario: #38bdf8;
  --layer-challenge: #facc15;
  --diff-expert: #2dd4bf;
  --diff-expert-solid: #14b8a6;
  --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;

  /* ====== 9 组编号体系 · 暗黑令牌（2026-10-27 新增）====== */
  --code-c:  #60a5fa;
  --code-m:  #818cf8;
  --code-e:  #34d399;
  --code-g:  #22d3ee;
  --code-d:  #fbbf24;
  --code-s:  #fbbf24;
  --code-k:  #fb7185;
  --code-a:  #a78bfa;
  --code-sec:#f87171;

  --dim-dao: #60a5fa;
  --dim-fa:  #34d399;
  --dim-shu: #fbbf24;
  --dim-shi: #fb7185;

  --accent-senior: #60a5fa;
  --accent-p2:     #60a5fa;

  /* ====== 优先级 · 难度 · 总计（暗黑令牌 2026-10-30 补全）====== */
  --prio-p0: var(--danger);              /* 红 #f87171 */
  --prio-p1: var(--warn);                /* 橙 #fbbf24 */
  --prio-p2: var(--accent-p2);           /* 蓝 #60a5fa */
  --diff-expert:    #2dd4bf;             /* 亮青 专家 */
  --diff-architect: var(--accent2);      /* 紫  #a78bfa 架构师 */
  --diff-senior:    var(--accent-senior); /* 蓝  #60a5fa 高级开发 */
  --code-total: var(--accent2);          /* 紫  #a78bfa 总计 */
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #0f1419;
    --bg2: #1a2332;
    --ink: #e8edf5;
    --muted: #9aa3b2;
    --rule: #2d3a4d;
    --accent: #60a5fa;
    --accent2: #a78bfa;
    --code-bg: #0b1220;
    --code-ink: #e2e8f0;
    --success: #34d399;
    --warn: #fbbf24;
    --danger: #f87171;
    --layer-insight: #2dd4bf;
    --layer-application: #f472b6;
    --layer-production: #4ade80;
    --layer-scenario: #38bdf8;
    --layer-challenge: #facc15;
    --diff-expert: #2dd4bf;
    --diff-expert-solid: #14b8a6;
    --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;

    /* ====== 9 组编号体系 · 暗黑令牌 · 自动暗黑（2026-10-27 新增）====== */
    --code-c:  #60a5fa;
    --code-m:  #818cf8;
    --code-e:  #34d399;
    --code-g:  #22d3ee;
    --code-d:  #fbbf24;
    --code-s:  #fbbf24;
    --code-k:  #fb7185;
    --code-a:  #a78bfa;
    --code-sec:#f87171;

    --dim-dao: #60a5fa;
    --dim-fa:  #34d399;
    --dim-shu: #fbbf24;
    --dim-shi: #fb7185;

    --accent-senior: #60a5fa;
    --accent-p2:     #60a5fa;

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

/* ---------- 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);
  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(--bg2);
  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(--accent2);
  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(--bg2);
  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(--accent2);
  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(--accent2);
  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 卡片 ---------- */
.qa-card {
  background: var(--bg2);
  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) {
  .qa-card:hover {
    box-shadow: var(--shadow-md);
  }
}
.qa-card[data-difficulty="architect"] {
  border-left-color: var(--accent2);
}
.qa-card[data-difficulty="expert"] {
  border-left-color: var(--diff-expert-solid);
}

.qa-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.qa-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;
}
.qa-card[data-difficulty="architect"] .qa-badge {
  background: var(--accent2);
}
.qa-card[data-difficulty="expert"] .qa-badge {
  background: var(--diff-expert-solid);
}
.qa-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;
}
.qa-question .difficulty {
  margin-left: var(--space-xs);
  vertical-align: middle;
}

/* ---------- Q&A 六层结构 ---------- */
.qa-layer {
  margin-bottom: var(--space-md);
}
.qa-layer:last-child {
  margin-bottom: 0;
}
.qa-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;
}
.qa-layer-title::before {
  content: "";
  width: 3px;
  height: 14px;
  border-radius: 2px;
  background: var(--accent);
}
.qa-layer[data-layer="evolution"] .qa-layer-title::before {
  background: var(--accent2);
}
.qa-layer[data-layer="principle"] .qa-layer-title::before {
  background: var(--success);
}
.qa-layer[data-layer="practice"] .qa-layer-title::before {
  background: var(--warn);
}
.qa-layer[data-layer="deep"] .qa-layer-title::before {
  background: var(--accent2);
}
.qa-layer[data-layer="pitfall"] .qa-layer-title::before {
  background: var(--danger);
}
.qa-layer[data-layer="essence"] .qa-layer-title::before {
  background: var(--accent);
}
.qa-layer[data-layer="extension"] .qa-layer-title::before {
  background: var(--accent2);
}
.qa-layer[data-layer="evaluation"] .qa-layer-title::before {
  background: var(--accent2);
}
.qa-layer[data-layer="insight"] .qa-layer-title::before { background: var(--layer-insight); }
.qa-layer[data-layer="application"] .qa-layer-title::before { background: var(--layer-application); }
.qa-layer[data-layer="production"] .qa-layer-title::before { background: var(--layer-production); }
.qa-layer[data-layer="scenario"] .qa-layer-title::before { background: var(--layer-scenario); }
.qa-layer[data-layer="challenge"] .qa-layer-title::before { background: var(--layer-challenge); }

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

/* ---------- 代码块 ---------- */
.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: #c678dd;
} /* keyword */
.code-block .str {
  color: #98c379;
} /* string */
.code-block .com {
  color: #7f848e;
  font-style: italic;
} /* comment */
.code-block .num {
  color: #d19a66;
} /* number */
.code-block .type {
  color: #61afef;
} /* type */
.code-block .fn {
  color: #61afef;
} /* function */
.code-block .var {
  color: #e06c75;
} /* variable */
.code-block .op {
  color: #56b6c2;
} /* operator */
.code-block .annotation,
.code-block .ann,
.code-block .at {
  color: #e5c07b;
} /* annotation @Override */
.code-block .const {
  color: #c678dd;
} /* constant */
.code-block .attr {
  color: #ce9178;
} /* attribute/对象字段名(YAML key) */

/* 行内代码 */
code.inline-code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg2);
  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(--accent2);
}
.callout-deep .callout-title {
  color: var(--accent2);
}
.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(--bg2);
}
.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(--accent2);
  text-decoration-thickness: 2px;
}

/* ---------- Mermaid 图表容器 ---------- */
.mermaid-container {
  background: var(--bg);
  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(--bg2);
  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(--bg2);
  color: var(--rule);
  cursor: not-allowed;
  pointer-events: none;
}
/* 居中组：快捷跳转 */
.chapter-nav .nav-mind,
.chapter-nav-top .nav-mind {
  background: var(--bg2);
  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(--bg2);
  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 a:hover {
  color: var(--accent);
  background: var(--bg2);
}
.sidebar-toc a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(37, 99, 235, 0.05);
  font-weight: 600;
}
.sidebar-toc .toc-number {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--accent);
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.15);
  border-radius: 5px;
  padding: 1px 5px;
  margin-right: 6px;
  white-space: nowrap;
  display: inline-block;
  vertical-align: 1px;
}

/* ---------- 导航首页特有样式 ---------- */
.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-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); }

.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(--bg2);
  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 {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.08em;
}
.chapter-card .card-title {
  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;
  justify-content: flex-end;
}

.tag-cloud {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-lg);
}
.tag-cloud h2 {
  font-size: 1.3rem;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--accent);
}
/* 首页可折叠区块（技术栈全景 / 最新技术趋势）：默认折叠，无 open */
.index-fold > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.index-fold > summary::-webkit-details-marker {
  display: none;
}
.index-fold > summary h2 {
  display: inline-block;
  margin-bottom: var(--space-md);
}
.index-fold > summary h2::before {
  content: "▶ ";
  font-size: 0.85em;
  color: var(--muted);
}
.index-fold[open] > summary h2::before {
  content: "▼ ";
}
.index-fold > summary:hover h2 {
  color: var(--accent);
}
.tag-cloud .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-cloud .tag {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  background: var(--bg2);
  border: 1px solid var(--rule);
  color: var(--ink);
}
.tag-cloud .tag.accent {
  border-color: var(--accent);
  color: var(--accent);
}
.tag-cloud .tag.accent2 {
  border-color: var(--accent2);
  color: var(--accent2);
}
.tag-cloud .tag-cat {
  width: 100%;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: var(--space-sm);
  padding: 0 0 2px 0;
  border: none;
  background: none;
  border-bottom: 1px dashed var(--rule);
}
.tag-cloud .tag-cat:first-child {
  margin-top: 0;
}

.trend-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-md) var(--space-xl);
}
.trend-section h2 {
  font-size: 1.3rem;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--accent2);
}

/* ---------- 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(--bg2);
  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(--bg2);
  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;
}

/* ---------- 暗黑模式组件微调 ---------- */
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(--accent2);
  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(--bg2);
}
html[data-theme="dark"] .qa-card {
  background: var(--bg2);
  border: 1px solid var(--rule);
  box-shadow: none;
}
html[data-theme="dark"] .qa-layer-body,
html[data-theme="dark"] .qa-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(--bg2);
  color: var(--ink);
}
html[data-theme="dark"] .compare-table th {
  background: var(--bg2);
  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(--bg2);
  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 a.active,
html[data-theme="dark"] .sidebar-toc 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(--accent2);
    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(--bg2);
  }
  html:not([data-theme="light"]) .qa-card {
    background: var(--bg2);
    border: 1px solid var(--rule);
    box-shadow: none;
  }
  html:not([data-theme="light"]) .qa-layer-body,
  html:not([data-theme="light"]) .qa-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(--bg2);
    color: var(--ink);
  }
  html:not([data-theme="light"]) .compare-table th {
    background: var(--bg2);
    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(--bg2);
    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 a.active,
  html:not([data-theme="light"]) .sidebar-toc 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(--bg2);
    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);
    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; }
}
/* ---------- 导航按钮：中等屏提前换行（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-start;
    width: 100%;
  }
  .chapter-card .difficulty {
    padding: 2px 8px;
    font-size: 0.68rem;
  }
  .tag-cloud,
  .trend-section {
    padding-left: max(var(--space-sm), env(safe-area-inset-left));
    padding-right: max(var(--space-sm), env(safe-area-inset-right));
  }
  .tag-cloud h2,
  .trend-section h2 {
    font-size: 1.15rem;
  }
  .qa-card {
    padding: var(--space-sm);
  }
  .qa-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/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);
  }
  .qa-header {
    flex-wrap: wrap;
    gap: 6px 8px;
  }
  .qa-question {
    font-size: 1rem;
    width: 100%;
  }
  .qa-layer-title {
    font-size: 0.85rem;
  }
  .qa-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 */
  .epq-header {
    flex-wrap: wrap;
  }
  .epq-question {
    font-size: 1rem !important;
    overflow-wrap: anywhere;
  }
  .epq-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;
  }
  .qa-badge,
  .epq-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;
  }
  .qa-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);
    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);
  }
  .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) === */
/* 权威计数位与结构计数位的可视锚点：细虚线下划线 + 悬停提示，不改排版权重 */
.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, #2a6f6a) 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, #2a6f6a) 12%, transparent);
  border-radius: 2px;
}

/* 技术范式引用回链（D 篇卡片底部 → S 篇场景题） */
.qa-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(--bg2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.88rem;
  line-height: 1.6;
}
.qa-crossref-label {
  font-weight: 700;
  color: var(--accent);
  white-space: nowrap;
}
.qa-crossref a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dashed var(--rule);
}
.qa-crossref a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

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

/* --- qa-badge 着色钩子（所有 chapter HTML）--- */
.qa-badge.code-c  { background: var(--code-c);  }
.qa-badge.code-m  { background: var(--code-m);  }
.qa-badge.code-e  { background: var(--code-e);  }
.qa-badge.code-g  { background: var(--code-g);  }
.qa-badge.code-d  { background: var(--code-d);  }
.qa-badge.code-s  { background: var(--code-s);  }
.qa-badge.code-k  { background: var(--code-k);  }
.qa-badge.code-a  { background: var(--code-a);  }
.qa-badge.code-sec{ background: var(--code-sec);}

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

/* --- chapter-card .card-number 着色钩子 --- */
.chapter-card .card-number.code-c  { color: var(--code-c);  }
.chapter-card .card-number.code-m  { color: var(--code-m);  }
.chapter-card .card-number.code-e  { color: var(--code-e);  }
.chapter-card .card-number.code-g  { color: var(--code-g);  }
.chapter-card .card-number.code-d  { color: var(--code-d);  }
.chapter-card .card-number.code-s  { color: var(--code-s);  }
.chapter-card .card-number.code-k  { color: var(--code-k);  }
.chapter-card .card-number.code-a  { color: var(--code-a);  }
.chapter-card .card-number.code-sec{ color: var(--code-sec);}
.chapter-card .card-number.overview-card { color: var(--success); }

/* --- toc-group-title 着色钩子（特异度须压过 .sidebar-toc a.toc-group-title）--- */
.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-m  { color: var(--code-m);  border-left-color: var(--code-m);  }
.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-g  { color: var(--code-g);  border-left-color: var(--code-g);  }
.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-s  { color: var(--code-s);  border-left-color: var(--code-s);  }
.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-a  { color: var(--code-a);  border-left-color: var(--code-a);  }
.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-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-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-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-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-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-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-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-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-sec.active,
.sidebar-toc a.toc-group-title.code-sec:hover{ color: var(--code-sec);border-left-color: var(--code-sec);}

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