/* ═══════════════════════════════════════════════════════════════════
   科普风设计系统 v2 —— 2026-09-22
   改造原则（来自 8 页截图评审）：
   ① 字号节奏 4 级跳：hero 40 / 页标题 30 / 区块题 20 / 正文 15.5，消灭"一片 13px"
   ② 「高压蓝 + 能量橙」双色驱动：蓝=可信的知识，橙=高压电的能量点缀
   ③ 卡片去硬边框、换柔和投影；hover 统一上浮
   ④ 正文限宽 ~900px，读起来像杂志不像后台
   ⑤ 语义色统一 token（绿/红/紫各只剩一个值），警示红只做小面积点缀
   ⑥ 保留好底子：五维四色块、阴阳条、减法表、四色双链 chip、★星级、进度条
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --bg: #f5f7fa;            /* 页面底：冷白 */
  --panel: #ffffff;         /* 卡面 */
  --border: #e7ebf1;        /* 常规边框 */
  --hairline: #f0f2f6;      /* 更浅的分组线 */
  --text: #17233a;          /* 标题墨：更深更稳 */
  --text-dim: #5d6b7e;      /* 次级文字 */
  --text-soft: #8d99a9;     /* 三级弱文字（新增） */
  --accent: #1a5ce5;        /* 高压蓝：链接 / 主按钮 / 数字 */
  --accent-deep: #0b2e73;   /* 深蓝：渐变深端 */
  --accent-soft: #eaf0fe;   /* 蓝 soft 底 */
  --energy: #f97316;        /* 能量橙：高压电意象 */
  --energy-deep: #c2570a;
  --energy-soft: #fef0e6;
  --ok: #0e9f6e; --ok-deep: #0c7a55; --ok-soft: #e7f6f0;      /* 机理绿（统一旧 4 种绿） */
  --bad: #e5484d; --bad-deep: #b3383c; --bad-soft: #fdebec;   /* 失效红：只做小面积点缀 */
  --violet: #7a5af8; --violet-deep: #6244d8; --violet-soft: #f0edfe; /* 引用紫 */
  --amber: #f0a020;         /* 星级 / 画面块 */
  --radius: 14px;
  --shadow-sm: 0 1px 2px rgba(23,35,58,.05), 0 6px 20px -12px rgba(23,35,58,.10);
  --shadow-md: 0 2px 4px rgba(23,35,58,.05), 0 16px 36px -16px rgba(23,35,58,.16);
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* 顶栏实际高度，由 wiki.js 的 syncTopHeight() 写入；写错也只是差几像素 */
  --top-h: 60px;
}
* { box-sizing: border-box; }
/* ⚠️ 这里原本是 `height: 100%`，那是「顶栏吸顶滚到中途就失效」的根因：
   body 被钉成视口高度(900px)，而内容有 2734px，于是 #top 的 sticky 约束框只有 900px ——
   滚过约一屏之后顶栏就没法再吸住、直接滚走。去掉 height 后 body 由内容撑开。 */
html, body { margin: 0; }
body {
  font-family: -apple-system, "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
  background: var(--bg); color: var(--text);
  font-size: 15.5px; line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(26,92,229,.16); }

/* ── 顶栏：毛玻璃 ─────────────────────────────────────────────── */
#top { background: rgba(255,255,255,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; }
/* ⚠️ flex-wrap 是 2026-09-22 加的：导航从 6 项增到 7 项（多了「🏛 体系」），
   窗口窄到约 1000px 时顶栏会横向溢出。允许换行后，窄屏自动折成两行，
   --top-h 由 wiki.js 的 syncTopHeight() 按实际高度重算，吸顶元素跟着走，不会错位。 */
.top-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 11px 20px; flex-wrap: wrap; }
.logo { font-weight: 800; font-size: 16px; text-decoration: none; color: var(--text); white-space: nowrap; letter-spacing: .01em; }
.top-search { flex: 1; max-width: 480px; }
.top-search input { width: 100%; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); outline: none; font-size: 14px; transition: .15s; }
.top-search input:focus { border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(26,92,229,.12); }
.top-nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.top-nav a { color: var(--text-dim); text-decoration: none; font-size: 13.5px; white-space: nowrap; padding: 6px 10px; border-radius: 8px; transition: .13s; }
.top-nav a:hover { color: var(--accent); background: var(--accent-soft); }

#page { max-width: 1180px; margin: 0 auto; padding: 30px 20px 72px; min-height: 60vh; }
#foot { border-top: 1px solid var(--border); background: #fff; }
.foot-inner { max-width: 1180px; margin: 0 auto; padding: 20px; color: var(--text-soft); font-size: 12.5px; letter-spacing: .02em; }

/* ── 面包屑 ───────────────────────────────────────────────────── */
.crumb { font-size: 13px; color: var(--text-soft); margin-bottom: 14px; }
.crumb a { color: var(--text-soft); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.crumb .sep { margin: 0 7px; opacity: .45; }

/* ── Hero：深蓝渐变 + 能量橙光斑 + 点阵，「高压电」意象 ─────────── */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(420px 300px at 82% 6%, rgba(249,115,22,.5), rgba(249,115,22,.16) 55%, transparent 72%),
    radial-gradient(160px 120px at 94% 22%, rgba(255,196,120,.5), transparent 70%),
    radial-gradient(rgba(255,255,255,.12) 1.1px, transparent 1.1px),
    linear-gradient(135deg, var(--accent-deep) 0%, #1247c8 62%, #1a5ce5 100%);
  background-size: auto, auto, 24px 24px, auto;
  color: #fff; border-radius: 20px; padding: 52px 48px 44px; margin-bottom: 28px;
  box-shadow: var(--shadow-md);
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .14em;
  color: #ffd9b8; background: rgba(249,115,22,.18); border: 1px solid rgba(249,115,22,.35);
  border-radius: 999px; padding: 4px 14px; margin-bottom: 16px;
}
.hero h1 { margin: 0 0 12px; font-size: 40px; line-height: 1.2; font-weight: 800; letter-spacing: .01em; }
.hero p { margin: 0; opacity: .9; font-size: 16px; line-height: 1.8; max-width: 660px; }
.hero .stats { margin-top: 26px; display: flex; gap: 40px; flex-wrap: wrap; }
.hero .stats span { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; opacity: .82; }
.hero .stats b { font-size: 34px; margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; opacity: 1; line-height: 1.15; }

/* ── 区块标题：眉题化，层级拉开 ────────────────────────────────── */
.sec-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 750; margin: 34px 0 14px; color: var(--text); }
.sec-title::before { content: ""; width: 6px; height: 20px; border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--energy)); flex: 0 0 auto; }
.sec-head { display: flex; align-items: center; gap: 10px; margin: 30px 0 12px; }
.sec-head .bar { width: 5px; height: 20px; border-radius: 3px; background: linear-gradient(180deg, var(--accent), var(--energy)); flex: 0 0 auto; }
.sec-head h2 { margin: 0; font-size: 20px; font-weight: 750; letter-spacing: .01em; }

/* ── 通用卡片：去硬边框感，柔和投影，hover 上浮 ────────────────── */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); gap: 16px; }
.cat-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; color: var(--text); transition: .16s ease-out; box-shadow: var(--shadow-sm); }
.cat-card:hover { border-color: rgba(26,92,229,.45); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.cat-card .cc-head { display: flex; align-items: center; gap: 11px; margin-bottom: 9px; }
.cat-card .cc-ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 19px; font-weight: 700; flex: 0 0 auto; box-shadow: inset 0 -8px 14px rgba(0,0,0,.10); }
.cat-card .cc-name { font-weight: 750; font-size: 16px; }
.cat-card .cc-desc { color: var(--text-dim); font-size: 12.8px; line-height: 1.6; }
.cat-card .cc-count { color: var(--accent); font-size: 12.5px; font-weight: 700; margin-top: 8px; font-variant-numeric: tabular-nums; }

/* ── 分类页横幅：左侧渐变能量条 + 大标题 ──────────────────────── */
.cat-banner { position: relative; background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 24px 26px 22px 30px; margin-bottom: 20px; box-shadow: var(--shadow-sm); overflow: hidden; }
.cat-banner::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, var(--accent), var(--energy)); }
.cat-banner h1 { margin: 0 0 7px; font-size: 29px; line-height: 1.3; font-weight: 800; letter-spacing: .01em; }
.cat-banner .desc { color: var(--text-dim); font-size: 14px; margin: 0; max-width: 880px; }

/* ── 列表行（文章条目）────────────────────────────────────────── */
.article-list { display: flex; flex-direction: column; gap: 10px; }
.article-item { background: var(--panel); border: 1px solid var(--hairline); border-radius: 12px; padding: 15px 19px; text-decoration: none; color: var(--text); transition: .14s ease-out; box-shadow: var(--shadow-sm); }
.article-item:hover { border-color: rgba(26,92,229,.45); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.ai-title { font-weight: 700; font-size: 15.5px; margin-bottom: 5px; line-height: 1.5; }
.ai-id { color: var(--text-soft); font-size: 12.5px; font-weight: 600; margin-right: 9px; font-family: var(--mono); }
.ai-core { color: var(--text-dim); font-size: 14px; line-height: 1.7; }
.ai-file { font-size: 11.5px; color: #a9b3c0; font-family: var(--mono); margin-top: 6px; }
/* 文档中心的 3+1 组：14 篇公约与说明平铺会又长又乱，所以先分组再列卡片 */
.doc-grp { margin-bottom: 30px; }
.doc-grp-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding-bottom: 9px; border-bottom: 1px solid var(--hairline); }
.doc-grp-h b { font-size: 16px; font-weight: 800; letter-spacing: -.005em; }
.doc-grp-n { font-size: 11.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; }
.doc-grp-note { font-size: 12.5px; color: var(--text-soft); }
.article-item .ai-core { font-size: 13px; margin-top: 4px; }
.ai-tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag { font-size: 12px; padding: 2.5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tag.gray { background: #f0f2f5; color: var(--text-dim); }
.grow-desc { color: var(--text-dim); font-size: 13.5px; line-height: 1.7; margin: 0 0 14px; }

/* ── 知识点正文：限宽阅读列（杂志排版的核心）──────────────────── */
.article { background: var(--panel); border: 1px solid var(--hairline); border-radius: 18px; padding: 38px 44px 34px; max-width: 920px; margin: 0 auto; box-shadow: var(--shadow-sm); }
.article h1 { margin: 8px 0 6px; font-size: 30px; line-height: 1.35; font-weight: 800; letter-spacing: .01em; }
.a-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0 24px; }
.a-block { margin: 28px 0; }
.a-block h3 { font-size: 16.5px; font-weight: 750; margin: 0 0 10px; display: flex; align-items: center; gap: 9px; letter-spacing: .01em; }
.a-block h3::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--accent); flex: 0 0 auto; opacity: .85; }
/* 一句话核心 → pull-quote 级：全页最大的正文元素 */
.a-core {
  background: linear-gradient(90deg, var(--accent-soft), rgba(234,240,254,.25) 78%);
  border-left: 4px solid var(--accent);
  padding: 18px 22px; border-radius: 6px 14px 14px 6px;
  font-size: 17.5px; font-weight: 650; line-height: 1.75; color: var(--text);
}
.a-picture { background: var(--energy-soft); border-left: 4px solid var(--energy); padding: 14px 18px; border-radius: 6px 12px 12px 6px; color: #7c4708; font-size: 15px; line-height: 1.8; }
.a-visual { margin: 2px 0 0; }
.a-visual svg { width: 100%; height: auto; max-width: 560px; display: block; margin: 0 auto; border-radius: 12px; overflow: hidden; border: 1px solid var(--hairline); box-shadow: var(--shadow-sm); background: #fff; }
.a-text { color: #2c394b; white-space: pre-wrap; font-size: 15.5px; line-height: 1.9; }
.a-action { background: var(--ok-soft); border-left: 4px solid var(--ok); padding: 14px 18px; border-radius: 6px 12px 12px 6px; color: #175e44; font-size: 15px; line-height: 1.8; }
.a-evidence { background: #f8fafc; border-left: 3px solid var(--accent); padding: 11px 15px; border-radius: 0 10px 10px 0; color: #3c4a5d; font-size: 14.5px; line-height: 1.75; }
/* 🚧 适用边界：专家深度里最容易被跳过的一块 —— 讲这条公理「到哪儿为止」。
   颜色刻意与 行动(绿) / 实证(灰) 分开：绿=该做什么，灰=凭什么信，琥珀=边界在哪。
   样式对齐 .a-evidence（同一种"左竖线 + 圆角"的引注体），只是换成琥珀底。 */
.a-scope { margin: 0; padding: 11px 15px 11px 32px; background: #fffbeb; border-left: 3px solid var(--amber); border-radius: 0 10px 10px 0; color: #6b4a10; font-size: 14.5px; line-height: 1.75; }
.a-scope li { margin: 4px 0; }
.a-scope li::marker { color: var(--amber); }

/* 阴阳条：加两端刻度标签，条体改蓝→青渐变 */
.yin-scale { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-dim); margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.yin-bar { position: relative; height: 10px; border-radius: 999px; background: #e8ecf2; overflow: hidden; box-shadow: inset 0 1px 2px rgba(23,35,58,.06); }
.yin-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-deep), var(--accent) 70%, #38bdf8); }

/* ── 链接胶囊：tint / outline 两级制 ──────────────────────────── */
.link-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; padding: 5px 13px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); text-decoration: none; font-size: 13px; font-weight: 600; transition: .13s; }
.chip:hover { background: #d8e4fd; transform: translateY(-1px); }
.chip.plain { background: #f0f2f5; color: var(--text-dim); font-weight: 500; }
.chip-why { display: block; font-size: 11.5px; line-height: 1.4; opacity: .72; margin-top: 3px; font-weight: 400; }
.chip.std { background: var(--violet-soft); color: var(--violet-deep); border: 1px solid #e2dcfd; font-size: 12.5px; font-family: var(--mono); font-weight: 600; }
.chip.std:hover { background: #e6e1fd; }
.std-note { margin-top: 9px; font-size: 12.5px; line-height: 1.6; color: var(--text-soft); }
/* ── 标准原文层（layer=standard）────────────────────────────────
   标准节点不是知识点：它的页面主体是「原文条款的逐字摘录」，所以用「引用块 + 等宽编号」
   这套更"文献"的语言，而不用知识点那套五维科普版式 —— 一眼就能看出这是依据、不是结论。 */
.std-card { border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--bg); padding: 6px 18px; margin: 18px 0 26px; box-shadow: var(--shadow-sm); }
.std-row { display: flex; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--hairline); font-size: 13.5px; align-items: baseline; }
.std-row:last-child { border-bottom: 0; }
.std-k { flex: 0 0 88px; color: var(--text-dim); font-size: 12.5px; }
.std-v { flex: 1; word-break: break-all; }
.std-clauses { display: flex; flex-direction: column; gap: 14px; }
.std-clause { border: 1px solid var(--hairline); border-radius: 12px; padding: 13px 16px; background: #fafbfd; }
.std-clause-head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 8px; }
.std-clause-no { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--violet-deep); background: var(--violet-soft); border: 1px solid #e2dcfd; border-radius: 6px; padding: 2px 8px; }
.std-clause-title { font-size: 13.5px; font-weight: 650; }
.std-clause-page { margin-left: auto; font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.std-quote { margin: 0; padding: 3px 0 3px 15px; border-left: 3px solid var(--violet); color: var(--text); font-size: 14px; line-height: 1.72; }
.chip.warn { background: var(--bad-soft); color: var(--bad-deep); border: 1px solid #f6d3d4; font-weight: 500; }
/* 建议链接：虚线描边 = "还差这条线" */
.sug-chip { display: inline-block; padding: 3px 11px; border-radius: 999px; background: var(--accent-soft); border: 1px dashed rgba(26,92,229,.5); color: var(--accent); text-decoration: none; font-size: 12.5px; transition: .13s; }
.sug-chip:hover { background: #d8e4fd; }

.quiz { border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 17px; margin-bottom: 10px; background: #fafbfd; box-shadow: var(--shadow-sm); }
.quiz .q { font-weight: 650; font-size: 14.5px; }
.quiz .a { color: var(--ok-deep); margin-top: 8px; display: none; background: var(--ok-soft); border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.quiz .a.show { display: block; }
.quiz .tog { color: var(--accent); font-size: 12.5px; cursor: pointer; margin-top: 7px; user-select: none; font-weight: 600; }

.src { display: inline-flex; align-items: center; gap: 7px; background: #f0f2f5; border-radius: 10px; padding: 8px 13px; text-decoration: none; color: var(--text); font-size: 13px; word-break: break-all; transition: .13s; }
.src:hover { background: #e7eaef; color: var(--accent); }
/* 引用型来源（不是文件、点不开）：仍旧是胶囊样式，但虚线边、不可点，与真链接一眼可分。
   见 2026-09-23：公理层有 4 个节点的 source 是一篇文章的名字（知乎／ADI／麦涛网／anytesting），
   以前一律被拼成 ../xxx 的死链；现在按源头数据的 sourceKind="citation" 渲染成文字标注。
   :hover 必须一起写——.src:hover 的优先级高于 .src-cite，不写就会被"点得动"的假象骗过。 */
.src-cite, .src-cite:hover { background: transparent; border: 1px dashed var(--hairline); color: var(--text-dim); cursor: default; }
.src-cite em { font-style: normal; font-size: 11px; color: var(--text-soft); }

/* 上一篇 / 下一页：从裸链接升级为可点的卡片 */
.prevnext { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.prevnext a { flex: 1; color: var(--accent); text-decoration: none; font-size: 13.5px; font-weight: 650; background: var(--bg); border: 1px solid var(--hairline); border-radius: 12px; padding: 13px 16px; transition: .14s; }
.prevnext a:hover { border-color: rgba(26,92,229,.5); background: var(--accent-soft); }
.prevnext span { flex: 1; }

/* ── 搜索结果 ─────────────────────────────────────────────────── */
.result-item { background: var(--panel); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 19px; text-decoration: none; color: var(--text); display: block; margin-bottom: 10px; box-shadow: var(--shadow-sm); transition: .14s; }
.result-item:hover { border-color: rgba(26,92,229,.45); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.result-item .r-title { font-weight: 700; }
.result-item .r-core { color: var(--text-dim); font-size: 13.5px; margin-top: 4px; }
/* 荧光笔高亮：只刷下半行，像真的拿笔画过 */
.hl { background: linear-gradient(transparent 58%, #ffe9a3 58%); border-radius: 2px; padding: 0 1px; }

.empty { color: var(--text-soft); text-align: center; padding: 54px 0; font-size: 14.5px; }

/* ── 规范精读（减法页）────────────────────────────────────────── */
.seeall { font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; margin-left: 10px; }
.spec-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(310px,1fr)); gap: 16px; }
.spec-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 18px 20px; text-decoration: none; color: var(--text); transition: .16s ease-out; box-shadow: var(--shadow-sm); }
.spec-card:hover { border-color: rgba(26,92,229,.45); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.sc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.sc-ico { font-size: 18px; }
.sc-title { font-weight: 750; font-size: 15.5px; line-height: 1.45; }
.sc-sub { color: var(--accent); font-size: 12.8px; font-weight: 700; margin-bottom: 8px; }
.sc-sub.big { font-size: 16px; margin: 0 0 18px; color: var(--text-dim); font-weight: 600; line-height: 1.7; }
.sc-essence { color: var(--text-dim); font-size: 13.5px; line-height: 1.7; }
.field-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(270px,1fr)); gap: 14px; }
.field-card { background: #fafbfd; border: 1px solid var(--hairline); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.fc-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.fc-key { font-weight: 800; font-size: 16.5px; }
/* 物理符号：放大 + 衬线斜体，找回"物理量"的表演感 */
.fc-symbol { font-size: 21px; color: var(--energy-deep); font-weight: 700; font-family: "Cambria Math", "STIX Two Math", Georgia, serif; font-style: italic; }
.fc-law { font-size: 13.5px; color: #7c4708; background: var(--energy-soft); border-radius: 8px; padding: 6px 11px; margin-bottom: 9px; font-weight: 600; }
.fc-role { font-size: 13.5px; color: var(--text); margin-bottom: 9px; line-height: 1.7; }
.fc-rules { margin: 0; padding-left: 19px; }
.fc-rules li { font-size: 13.5px; color: var(--text-dim); margin-bottom: 4px; line-height: 1.65; }
.rule-table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow-sm); background: var(--panel); }
.rule-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rule-table th { background: #f4f6f9; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text-dim); white-space: nowrap; font-weight: 700; letter-spacing: .04em; }
.rule-table td { padding: 10px 14px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.rule-table tr:nth-child(even) td { background: #fafbfd; }
.rule-table tr:last-child td { border-bottom: 0; }
.rule-table tbody tr:hover td { background: var(--accent-soft); }
.rt-rule { font-weight: 650; white-space: nowrap; }
.rt-field { color: var(--accent); white-space: nowrap; font-weight: 700; }
.rt-why { color: var(--text-dim); }

/* ── 卡片墙 ───────────────────────────────────────────────────── */
.card-filter { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 15px 17px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.card-filter input { width: 100%; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--border); font-size: 14px; outline: none; margin-bottom: 11px; transition: .15s; }
.card-filter input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,92,229,.10); }
.cf-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.cf-row:last-child { margin-bottom: 0; }
.tf { font-size: 12.5px; padding: 3.5px 12px; border-radius: 999px; cursor: pointer; border: 1px solid var(--border); color: var(--text-dim); user-select: none; background: #fff; transition: .12s; font-weight: 600; }
.tf:hover { border-color: var(--accent); color: var(--accent); }
.tf.active { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 3px 10px -3px rgba(26,92,229,.55); }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(340px,1fr)); gap: 16px; align-items: start; }
.doc-grid.home { grid-template-columns: repeat(auto-fill,minmax(380px,1fr)); }
.doc-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 19px 21px; box-shadow: var(--shadow-sm); transition: .15s; }
.doc-card:hover { box-shadow: var(--shadow-md); border-color: rgba(26,92,229,.35); }
.dc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.dc-ico { width: 34px; height: 34px; border-radius: 10px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 17px; flex: 0 0 auto; }
.dc-title { font-weight: 750; font-size: 15.5px; flex: 1; line-height: 1.45; }
.dc-rating { color: var(--amber); font-size: 13px; letter-spacing: 1px; white-space: nowrap; }
.dc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.dc-summary { font-size: 14px; color: #33404f; font-weight: 600; border-left: 3px solid var(--accent); padding: 2px 0 2px 11px; margin-bottom: 11px; line-height: 1.7; }
.dc-points { margin: 0 0 11px; padding-left: 19px; }
.dc-points li { font-size: 13.5px; color: #3a4756; margin-bottom: 5px; line-height: 1.7; }
.dc-points li::marker { color: var(--accent); }
.dc-data { font-size: 13px; background: var(--accent-soft); border-radius: 9px; padding: 8px 12px; margin-bottom: 9px; color: var(--accent-deep); font-weight: 600; line-height: 1.65; }
.dc-value { font-size: 13px; color: var(--ok-deep); background: var(--ok-soft); border-radius: 9px; padding: 8px 12px; margin-bottom: 9px; font-weight: 600; line-height: 1.65; }
.dc-rel { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dc-src { margin-top: 4px; }
.dc-src .src { font-size: 12px; padding: 5px 10px; }
/* 卡片详情页：单卡浮在窄列里，才有"详情页"的层级 */
.card-detail { max-width: 780px; margin: 0 auto; }
.card-detail .doc-card { padding: 30px 34px; }
.card-detail .dc-title { font-size: 24px; line-height: 1.4; }

/* ── 阅读主线（guide）─────────────────────────────────────────── */
.guide-banner { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius); padding: 19px 23px; margin: -6px 0 24px; text-decoration: none; color: var(--text); transition: .15s; box-shadow: var(--shadow-sm); }
.guide-banner:hover { border-color: rgba(26,92,229,.45); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.guide-banner .gb-ico { font-size: 30px; }
.guide-banner .gb-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.guide-banner .gb-title { font-weight: 750; font-size: 16px; }
.guide-banner .gb-sub { color: var(--text-dim); font-size: 13px; }
.guide-banner .gb-arrow { color: var(--accent); font-weight: 700; font-size: 14px; white-space: nowrap; }
.guide { max-width: 1000px; }
.guide-head {
  position: relative; overflow: hidden; color: #fff; border-radius: 18px; padding: 36px 36px 32px; margin-bottom: 22px;
  background:
    radial-gradient(480px 260px at 88% -20%, rgba(249,115,22,.30), transparent 60%),
    radial-gradient(rgba(255,255,255,.11) 1.1px, transparent 1.1px),
    linear-gradient(135deg, var(--accent-deep), #1a5ce5);
  background-size: auto, 24px 24px, auto;
  box-shadow: var(--shadow-md);
}
.guide-head h1 { margin: 0 0 10px; font-size: 30px; font-weight: 800; }
.guide-sub { opacity: .92; font-size: 15px; line-height: 1.75; }
.guide-meta { margin-top: 15px; font-size: 12.5px; opacity: .78; letter-spacing: .03em; }
.guide-layout { display: grid; grid-template-columns: 250px 1fr; gap: 24px; align-items: start; }
.guide-toc { position: sticky; top: calc(var(--top-h) + 14px); background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 14px 12px; max-height: calc(100vh - 96px); overflow-y: auto; box-shadow: var(--shadow-sm); }
.guide-toc .toc-title { font-size: 12px; font-weight: 800; color: var(--text-soft); padding: 0 8px 9px; border-bottom: 1px solid var(--hairline); margin-bottom: 9px; letter-spacing: .12em; }
.guide-toc .toc-nav { display: flex; flex-direction: column; gap: 2px; }
.guide-toc .toc-link { display: flex; align-items: baseline; gap: 8px; padding: 7px 10px; border-radius: 8px; font-size: 12.8px; color: var(--text-dim); text-decoration: none; cursor: pointer; line-height: 1.45; border-left: 3px solid transparent; transition: .12s; }
.guide-toc .toc-link:hover { background: var(--accent-soft); color: var(--accent); }
.guide-toc .toc-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 700; border-left-color: var(--accent); }
.guide-toc .toc-num { color: #b3bcc7; font-size: 11.5px; font-variant-numeric: tabular-nums; min-width: 20px; flex: 0 0 auto; font-weight: 700; }
.guide-body { min-width: 0; }
.guide-sec { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 28px 32px; margin-bottom: 18px; scroll-margin-top: 74px; box-shadow: var(--shadow-sm); }
.guide-h2 { margin: 0 0 15px; font-size: 20px; padding-bottom: 11px; border-bottom: 1px solid var(--hairline); font-weight: 750; }
.guide-lead p { margin: 0 0 15px; font-size: 15.5px; line-height: 1.95; color: #2a3646; text-align: justify; }
.guide-lead p:last-child { margin-bottom: 0; }
/* 四色双链 chip：知识图谱的视觉词汇表，保留并收进 token */
.ref { display: inline; padding: 1.5px 7px; margin: 0 2px; border-radius: 6px; font-size: 13.5px; text-decoration: none; white-space: nowrap; font-weight: 600; }
.ref:hover { text-decoration: underline; }
.ref-node { background: var(--accent-soft); color: #1449c4; }
.ref-card { background: #fef4dd; color: #a16207; }
.ref-spec { background: var(--ok-soft); color: var(--ok-deep); }
.ref-cat { background: var(--violet-soft); color: var(--violet-deep); }
.ref-doc { background: #f0f2f5; color: #374151; }
.ref-page { background: var(--bad-soft); color: var(--bad-deep); }
.guide-end { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.end-btn { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 13px 19px; text-decoration: none; color: var(--accent); font-weight: 700; font-size: 14px; transition: .14s; box-shadow: var(--shadow-sm); }
.end-btn:hover { border-color: rgba(26,92,229,.5); background: var(--accent-soft); transform: translateY(-2px); }
@media (max-width: 760px) { .guide-layout { grid-template-columns: 1fr; } .guide-toc { position: static; } }

/* ── Markdown 长文 ────────────────────────────────────────────── */
/* ── 文档页左栏：分组导航（14 篇不再平铺成 14 个 pill，用户反馈「排版太乱」） ── */
.doc-wrap { display: grid; grid-template-columns: 238px minmax(0, 1fr); gap: 26px; align-items: start; max-width: 1280px; margin: 0 auto; }
.doc-side { position: sticky; top: calc(var(--top-h) + 14px); max-height: calc(100vh - 96px); overflow-y: auto; background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 13px 11px; box-shadow: var(--shadow-sm); }
.ds-h { font-size: 12px; font-weight: 800; color: var(--text-soft); letter-spacing: .12em; padding: 0 8px 9px; border-bottom: 1px solid var(--hairline); margin-bottom: 9px; }
.docs-nav { display: flex; flex-direction: column; gap: 3px; }
/* ⚠️ 条目是嵌在 .dn-group 里的，不是 .docs-nav 的直接子元素 —— 只给 .docs-nav 设 column 没用，
   组里那几个 inline 的 <a> 会挤成一行（用户截图：「你这个成堆了」）。所以这一层也要列布局，
   并且条目本身 display:block（双保险，:hover 的整行底纹也才铺得满）。 */
.dn-group { display: flex; flex-direction: column; gap: 3px; }
.dn-group + .dn-group { margin-top: 14px; }
.dn-gt { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--text-soft); letter-spacing: .06em; padding: 0 9px 6px; }
.dn-gn { margin-left: auto; font-size: 11px; font-weight: 700; color: #b3bcc7; }
.docs-nav .dn-item { display: block; padding: 7px 10px; border-radius: 8px; border-left: 3px solid transparent; font-size: 13px; font-weight: 600; color: var(--text-dim); text-decoration: none; line-height: 1.45; transition: background .12s, color .12s; }
.docs-nav .dn-item:hover { background: var(--accent-soft); color: var(--accent); }
.docs-nav .dn-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 750; border-left-color: var(--accent); }
@media (max-width: 1080px) {
  .doc-wrap { grid-template-columns: minmax(0, 1fr); }
  .doc-side { position: static; max-height: none; }
}
/* ── 文档页正文版式 ──
   一篇 5–9 千字的章节要能读下去，所以：正文限宽（≈45 汉字/行，原来 900px 太宽）、
   标题分四级且各自有形状、表格/引用/插图各自有容器、每个标题带锚点可跳可引用。
   注：这些规则都挂在 .md-doc 下 —— 体系页内嵌正文用的是 .sys-deep-doc 自己那套紧凑版式，不受影响。 */
.md-doc { max-width: 830px; background: var(--panel); border: 1px solid var(--hairline); border-radius: 18px; padding: 42px 50px; margin: 0 auto; box-shadow: var(--shadow-sm); color: #25324a; }
/* 眉题：正文的 H1 已经提成主标题了，这里只交代「这是哪一组的哪一篇」 */
.md-eyebrow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-soft); margin-bottom: 9px; }
.md-eb-g { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-deep); font-weight: 700; }
.md-title { margin: 0; font-size: 30px; line-height: 1.34; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.md-title::after { content: ""; display: block; width: 54px; height: 3px; border-radius: 2px; margin-top: 16px; background: linear-gradient(90deg, var(--accent), var(--energy)); }
/* 本文目录：两列铺开，长章节不用先滚一遍才知道有什么 */
.md-toc { margin: 24px 0 4px; padding: 14px 16px; background: linear-gradient(180deg, #f8fafd, var(--panel)); border: 1px solid var(--hairline); border-radius: 13px; }
.md-toc-h { display: flex; align-items: center; font-size: 12px; font-weight: 800; color: var(--text-soft); letter-spacing: .1em; margin-bottom: 8px; }
.md-toc-n { margin-left: auto; font-size: 11px; font-weight: 700; color: #b3bcc7; letter-spacing: .02em; }
.md-toc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1px 14px; }
.md-toc-link { display: block; padding: 5px 8px; border-radius: 7px; border-left: 3px solid transparent; font-size: 13px; color: var(--text-dim); text-decoration: none; line-height: 1.5; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-toc-link.lv4, .md-toc-link.lv5 { padding-left: 19px; font-size: 12.5px; color: var(--text-soft); }
.md-toc-link:hover { background: var(--accent-soft); color: var(--accent); }
.md-toc-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* 标题分级：正文从 `##` 起（页面标题是 h1），所以 h2 是最外层小节、h3 是常用小节 */
.md-doc .md-h { border-bottom: 0; padding: 0; text-wrap: balance; }
.md-doc h2.md-h { position: relative; font-size: 21px; font-weight: 800; margin: 42px 0 14px; padding-left: 13px; letter-spacing: -.01em; }
.md-doc h2.md-h::before { content: ""; position: absolute; left: 0; top: .2em; width: 4px; height: .9em; border-radius: 2px; background: var(--accent); }
.md-doc h3.md-h { font-size: 16.8px; font-weight: 750; margin: 28px 0 10px; color: #16233a; }
.md-doc h4.md-h { font-size: 15.4px; font-weight: 750; margin: 22px 0 8px; color: var(--text-dim); }
.md-doc h5.md-h { font-size: 14.6px; font-weight: 700; margin: 19px 0 7px; color: var(--text-soft); }
.md-doc .md-p { font-size: 16px; line-height: 1.98; margin: 0 0 17px; text-wrap: pretty; }
.md-doc .md-ul, .md-doc .md-ol { margin: 0 0 17px; padding-left: 22px; }
.md-doc .md-ul li, .md-doc .md-ol li { font-size: 15.6px; line-height: 1.92; margin-bottom: 7px; }
.md-doc .md-ul li::marker { color: var(--accent); }
.md-doc .md-ol li::marker { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.md-doc .md-quote { margin: 20px 0; padding: 14px 20px; background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 4px 12px 12px 4px; font-size: 14.8px; line-height: 1.9; color: #2c3f5c; }
.md-doc .md-table { font-size: 13.8px; }
.md-doc .md-table th { padding: 11px 15px; background: #f5f8fd; font-size: 12.5px; }
.md-doc .md-table td { padding: 10px 15px; line-height: 1.72; font-variant-numeric: tabular-nums; }
.md-doc .md-table tbody tr:hover td { background: #f7faff; }
.md-doc .md-hr { border: 0; height: 1px; margin: 34px 0; background: linear-gradient(90deg, transparent, var(--border) 18%, var(--border) 82%, transparent); }
.md-doc strong { font-weight: 750; color: #0f1c33; }
/* 正文插图（markdown 里写 [[svg:名字]]）：图与图注进同一个浅底容器，图注用破折线跟图分开。
   这两条刻意不挂 .md-doc —— 体系页内嵌正文里的插图也要长成同一套样子。 */
.md-figure { margin: 26px 0; padding: 18px 18px 12px; background: linear-gradient(180deg, #fafcff, var(--panel)); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow-sm); }
.md-figure svg { display: block; width: 100%; height: auto; }
.md-figure figcaption { margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12.5px; color: var(--text-soft); line-height: 1.7; text-align: center; }
/* 锚点：从目录跳过去时标题不能被吸顶栏压住 */
.md-h, .sys-mod, .sys-mod-deep { scroll-margin-top: calc(var(--top-h) + 18px); }
.md-h { margin: 30px 0 12px; font-size: 19.5px; padding-bottom: 8px; border-bottom: 1px solid var(--hairline); font-weight: 750; }
.md-p { margin: 0 0 15px; font-size: 15.5px; line-height: 1.95; color: #2a3646; }
.md-quote { margin: 16px 0; padding: 13px 19px; background: var(--accent-soft); border-left: 4px solid var(--accent); border-radius: 6px 12px 12px 6px; color: #33445c; font-size: 14.5px; line-height: 1.85; }
.md-hr { border: 0; border-top: 1px solid var(--hairline); margin: 26px 0; }
.md-ul, .md-ol { margin: 0 0 15px; padding-left: 25px; }
.md-ul li, .md-ol li { font-size: 15px; line-height: 1.9; color: #2a3646; margin-bottom: 4px; }
.md-ul li::marker { color: var(--accent); }
/* 行内代码：从"Bootstrap 玫红"收进蓝色体系 */
.md-ic { background: var(--accent-soft); border: 1px solid #dbe5fc; border-radius: 6px; padding: 1px 7px; font-family: var(--mono); font-size: 13px; color: #1449c4; }
.md-code { background: #f7f9fb; color: #243247; border: 1px solid var(--hairline); border-radius: 12px; padding: 17px 19px; overflow-x: auto; font-size: 13px; line-height: 1.65; margin: 15px 0; }
.md-code code { font-family: var(--mono); }
.md-table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 12px; margin: 15px 0; box-shadow: var(--shadow-sm); }
.md-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.md-table th { background: #f4f6f9; text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 12.5px; color: var(--text-dim); white-space: nowrap; font-weight: 700; letter-spacing: .04em; }
.md-table td { padding: 9px 14px; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.md-table tr:nth-child(even) td { background: #fafbfd; }
.md-table tr:last-child td { border-bottom: 0; }
.md-node { color: #1449c4; background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; text-decoration: none; font-weight: 650; white-space: nowrap; }
.md-node:hover { background: #d8e4fd; text-decoration: underline; }
.md-link { color: var(--accent); text-decoration: underline; }
.md-doc-src { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--hairline); }

/* ── 组织能力框架 ─────────────────────────────────────────────── */
.fw-banner {
  position: relative; overflow: hidden; color: #fff; border-radius: 18px; padding: 32px 34px; margin-bottom: 18px;
  background:
    radial-gradient(460px 240px at 90% -20%, rgba(249,115,22,.28), transparent 60%),
    linear-gradient(135deg, #0a2455, #14429c);
  box-shadow: var(--shadow-md);
}
.fw-banner h1 { margin: 0 0 9px; font-size: 27px; font-weight: 800; }
.fw-banner .desc { margin: 0; opacity: .9; font-size: 14.5px; line-height: 1.75; }
.quick-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.quick-strip a { padding: 8px 16px; border-radius: 11px; border: 1px solid var(--border); background: var(--panel); color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 700; transition: .13s; box-shadow: var(--shadow-sm); }
.quick-strip a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
/* 入口卡：emoji 装进彩色底板（icon plate），不再裸漂 */
.gate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 22px; }
.gate-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 18px; text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 7px; transition: .16s ease-out; box-shadow: var(--shadow-sm); }
.gate-card:hover { border-color: rgba(26,92,229,.45); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.gc-ico { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--accent-soft), #dfe9fd); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.gate-card:nth-child(odd) .gc-ico { background: linear-gradient(135deg, var(--energy-soft), #fde3cd); }
.gc-t { font-weight: 750; font-size: 15.5px; }
.gc-d { font-size: 12.8px; color: var(--text-dim); line-height: 1.55; }
/* 首页「深化版」模块的一行说明：贴在 sec-title 与卡片之间，字号比正文小、颜色更淡 */
.home-deep-note { font-size: 12.5px; color: var(--text-soft); line-height: 1.75; margin: -4px 0 14px; max-width: 860px; }
.home-deep-note a { color: var(--accent); text-decoration: none; }
.home-deep-note a:hover { text-decoration: underline; }

/* ---------- 体系页 ·「深化正文」直达条与「只看深化正文」 ---------- */
/* 体系页把七章深化正文整篇内嵌（合计五万多字符），再加白皮书一张图、覆盖诊断、哲思表、宏定义表，
   正文很容易被淹掉。所以给正文单开一条直达条：左边按章跳（锚点 deep-<no> 直接落到正文），
   右边一个开关把非正文的段落收起来。 */
.sys-deepbar { margin: 4px 0 20px; padding: 14px 16px; background: var(--panel);
  border: 1px solid var(--hairline); border-left: 3px solid var(--accent);
  border-radius: 12px; box-shadow: var(--shadow-sm); }
.sys-deepbar-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sys-deepbar-h b { font-size: 15px; letter-spacing: .02em; }
.sys-deepbar-note { font-size: 12.5px; color: var(--text-soft); line-height: 1.7; flex: 1 1 320px; }
.sys-deepbar-h .rc-btn { margin-left: auto; flex: 0 0 auto; }
.sys-deepbar-links { margin: 0; }
/* 模块头里的「📘 深化正文 ↓」：不抢「白皮书原文 ↗」的右侧位置 */
.sys-mod-jump { font-size: 12.5px; font-weight: 650; color: var(--accent); text-decoration: none;
  padding: 2px 9px; border: 1px solid var(--border); border-radius: 999px; }
.sys-mod-jump:hover { border-color: var(--accent); }
/* 只看深化正文：把非正文的段落与模块内的「库内储备／缺口」收起 */
#page.deep-only .sys-hideable,
#page.deep-only .sys-mod-gist,
#page.deep-only .sys-assets,
#page.deep-only .sys-gap { display: none; }
#page.deep-only .sys-mods { gap: 22px; }
a, button, input { touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.top-search input:focus-visible, .card-filter input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }

/* ── 知识枢纽 ─────────────────────────────────────────────────── */
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(240px,1fr)); gap: 12px; }
.hub-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 12px; padding: 14px 16px; text-decoration: none; color: var(--text); transition: .14s; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.hub-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent), var(--energy)); opacity: 0; transition: .14s; }
.hub-card:hover { border-color: rgba(26,92,229,.45); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.hub-card:hover::before { opacity: 1; }
.hub-title { font-weight: 700; font-size: 14.5px; line-height: 1.5; }
.hub-meta { font-size: 12.5px; color: var(--text-dim); margin-top: 6px; }
.grow-desc + .article-list { margin-bottom: 6px; }
.ai-link { display: block; text-decoration: none; color: inherit; }
.ai-link:hover { color: var(--accent); }
.ai-suggest { margin-top: 11px; padding-top: 10px; border-top: 1px dashed var(--border); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sug-lab { font-size: 12px; color: var(--text-soft); font-weight: 700; }

/* ── 知识盲区 / 矩阵 ──────────────────────────────────────────── */
.gap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.gap-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow-sm); }
.gap-head { display: flex; align-items: center; gap: 7px; font-weight: 750; font-size: 15px; }
.gap-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(26,92,229,.10); }
.gap-x { color: var(--text-soft); font-size: 12.5px; }
.gap-meta { font-size: 12.8px; color: var(--text-dim); margin: 9px 0 7px; }
.gap-meta b { color: var(--text); font-variant-numeric: tabular-nums; }
.gap-bridge { font-size: 12.8px; color: var(--text-dim); }
.gap-bridge a { color: var(--accent); text-decoration: none; }
.gap-bridge a:hover { text-decoration: underline; }
.gap-matrix-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: 12px; box-shadow: var(--shadow-sm); background: var(--panel); }
.gap-matrix { border-collapse: collapse; font-size: 12px; width: 100%; }
.gap-matrix th, .gap-matrix td { border: 1px solid var(--hairline); padding: 6px 8px; text-align: center; white-space: nowrap; }
.gap-matrix th { background: #f4f6f9; font-weight: 700; }
.gap-matrix td.on { background: var(--accent-soft); color: #1449c4; font-weight: 700; }
.gap-matrix td.off { color: #c6cdd7; }

/* ── 今日回顾 ─────────────────────────────────────────────────── */
.review-bar { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; font-size: 13px; color: var(--text-dim); }
.review-bar b { color: var(--text); font-variant-numeric: tabular-nums; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 8px; }
.review-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-sm); transition: .14s; }
.review-card:hover { box-shadow: var(--shadow-md); }
.rc-title { font-weight: 700; font-size: 14.8px; color: var(--text); text-decoration: none; line-height: 1.45; }
.rc-title:hover { color: var(--accent); }
.rc-core { font-size: 13.5px; color: var(--text-dim); line-height: 1.7; flex: 1; }
.rc-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-btn { margin-left: auto; padding: 5px 14px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font-size: 12.5px; cursor: pointer; font-weight: 650; transition: .13s; }
.rc-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.rc-btn.ghost { background: transparent; color: var(--accent); }

/* ── 学习中心：大数字是这页的表情 ─────────────────────────────── */
.learn-hook { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 18px; }
.hook-item { display: inline-flex; align-items: center; padding: 6px 15px; border-radius: 999px; background: var(--panel); border: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: 13px; font-weight: 600; box-shadow: var(--shadow-sm); transition: .13s; }
.hook-item:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.hook-btn { padding: 6px 15px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff; font-size: 13px; cursor: pointer; font-weight: 650; transition: .13s; }
.hook-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.learn-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 8px; }
.stat { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow-sm); }
.stat-v { font-size: 32px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.15; letter-spacing: -.01em; }
.stat-v .stat-sep { font-size: 20px; color: var(--text-soft); font-weight: 600; font-style: normal; }
.stat-v .stat-emo { font-style: normal; font-size: 20px; margin-right: 7px; vertical-align: 3px; }
.stat span:last-child { font-size: 12.5px; color: var(--text-dim); }
.learn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.learn-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); }
.learn-card.done { opacity: .82; }
.lc-head { font-weight: 750; font-size: 15.5px; display: flex; align-items: center; gap: 8px; }
.lc-q { font-size: 14px; line-height: 1.75; color: var(--text); }
.lc-a { font-size: 13.5px; line-height: 1.75; color: var(--text-dim); background: #f7f9fb; border-radius: 10px; padding: 11px 13px; }
.lc-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.lc-link { font-size: 12.8px; color: var(--accent); text-decoration: none; margin-top: 2px; font-weight: 600; }
.lc-link:hover { text-decoration: underline; }
.lc-empty { font-size: 13.5px; color: var(--text-soft); }
.rc-btn.ok { background: var(--ok); border-color: var(--ok); }
.tag.ok { background: var(--ok-soft); color: var(--ok-deep); }
.tag.no { background: var(--bad-soft); color: var(--bad-deep); }
.cp { margin-top: 9px; }
.cp-h { display: flex; justify-content: space-between; font-size: 12.8px; color: var(--text-dim); margin-bottom: 5px; font-variant-numeric: tabular-nums; }
.cp-bar { height: 9px; background: #edf0f5; border-radius: 999px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(23,35,58,.05); }
.cp-bar.big { height: 13px; }
.cp-fill { height: 100%; background: linear-gradient(90deg, var(--accent), #38bdf8); border-radius: 999px; box-shadow: 0 0 8px rgba(26,92,229,.35); }
.cat-prog { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px 18px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr)); gap: 13px; }
.badge { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 15px 10px; text-align: center; display: flex; flex-direction: column; gap: 5px; align-items: center; box-shadow: var(--shadow-sm); }
.badge.locked { opacity: .5; filter: grayscale(.4); }
.b-ico { font-size: 22px; width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, var(--energy-soft), #fde3cd); display: flex; align-items: center; justify-content: center; }
.b-name { font-weight: 750; font-size: 13px; }
.b-desc { font-size: 12px; color: var(--text-dim); line-height: 1.45; }
.heatmap { display: flex; gap: 4px; flex-wrap: wrap; }
.hm-cell { width: 24px; height: 24px; border-radius: 5px; background: #edf0f5; font-size: 10.5px; color: #9aa4b2; display: inline-flex; align-items: center; justify-content: center; transition: .12s; cursor: default; }
.hm-cell:hover { transform: scale(1.12); }
.hm-cell.l1 { background: #cfe5ff; color: #1449c4; }
.hm-cell.l2 { background: #94c6ff; color: #0b3f9e; }
.hm-cell.l3 { background: #4d9bf8; color: #fff; }
.hm-cell.l4 { background: #1d6fe0; color: #fff; }
.hm-legend { font-size: 12px; color: var(--text-soft); margin-top: 9px; }
.gap-card.lit { border-color: var(--ok); background: #f2fbf7; }
.learn-card input[type=text] { padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; background: #fff; color: var(--text); flex: 1; min-width: 150px; }
.learn-card input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(26,92,229,.10); }
.lb-list { display: flex; flex-direction: column; gap: 6px; }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; background: #f7f9fb; }
.lb-row.me { background: var(--accent-soft); border: 1px solid #c9dafc; }
.lb-rank { width: 26px; font-weight: 800; text-align: center; }
.lb-name { flex: 1; font-weight: 650; font-size: 13px; }
.lb-level { font-size: 12px; color: var(--text-dim); }
.lb-xp { font-weight: 750; color: var(--accent); font-variant-numeric: tabular-nums; }
.lb-streak { font-size: 12px; color: var(--energy-deep); }

/* ── 吸顶子导航：毛玻璃，消除"灰胶带"断层 ─────────────────────── */
.fw-nav, .case-nav {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px;
  position: sticky; top: calc(var(--top-h) + 4px); z-index: 5;
  background: rgba(245,247,250,.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: 10px 0; box-shadow: 0 6px 16px -12px rgba(23,35,58,.28);
}
.fw-nav a, .case-nav a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border); background: var(--panel); color: var(--text-dim); text-decoration: none; font-size: 13px; font-weight: 600; transition: .13s; }
.fw-nav a:hover, .case-nav a:hover { border-color: var(--accent); color: var(--accent); }
.fw-sec { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 16px; scroll-margin-top: calc(var(--top-h) + 20px); box-shadow: var(--shadow-sm); }
.fw-head { display: flex; align-items: center; gap: 11px; margin-bottom: 7px; }
.fw-ico { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 20px; flex: 0 0 auto; }
.fw-title { margin: 0; font-size: 18px; font-weight: 750; }
.fw-desc { color: var(--text-dim); font-size: 13.5px; margin: 0 0 15px; line-height: 1.7; }
.fw-have, .fw-miss { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 9px; }
.fw-have:last-child, .fw-miss:last-child { margin-bottom: 0; }
.fw-lab { flex: 0 0 auto; font-size: 12px; font-weight: 800; border-radius: 7px; padding: 3.5px 11px; margin-top: 2px; }
.fw-lab.have { background: var(--ok-soft); color: var(--ok-deep); }
.fw-lab.miss { background: var(--bad-soft); color: var(--bad-deep); }
.fw-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.fw-chip { display: inline-block; padding: 5px 13px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); text-decoration: none; font-size: 12.8px; font-weight: 600; transition: .13s; }
.fw-chip:hover { background: #d8e4fd; }
.fw-chip.miss { background: #fdf1f1; color: var(--bad-deep); border: 1px dashed #eec3c4; cursor: default; font-weight: 500; }

/* ── 失效案例库：红降级为点缀，标题回归墨色 ───────────────────── */
.case-sec { margin-bottom: 34px; }
.case-h2 { margin: 0 0 7px; font-size: 21px; display: flex; align-items: center; gap: 9px; font-weight: 750; }
.case-ico { width: 38px; height: 38px; border-radius: 11px; background: var(--bad-soft); display: flex; align-items: center; justify-content: center; font-size: 19px; flex: 0 0 auto; }
.case-n { font-size: 12px; font-weight: 700; color: var(--text-dim); background: #f0f2f5; border-radius: 999px; padding: 2.5px 11px; margin-left: 4px; font-variant-numeric: tabular-nums; }
.case-desc { color: var(--text-dim); font-size: 13.5px; margin: 0 0 15px; }
.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 15px; align-items: start; }
.case-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 17px 19px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text); transition: .15s; cursor: pointer; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.case-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--bad), var(--energy)); opacity: 0; transition: .15s; }
.case-card:hover { border-color: rgba(229,72,77,.45); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.case-card:hover::before { opacity: 1; }
.case-title { font-weight: 750; font-size: 15.2px; color: var(--text); line-height: 1.5; }
.case-pheno { font-size: 13px; color: var(--text-dim); line-height: 1.7; }
.case-foot { margin-top: auto; padding-top: 11px; border-top: 1px dashed var(--hairline); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.case-lv { font-size: 12px; color: var(--text-soft); font-weight: 650; }
.case-more { font-size: 12.5px; color: var(--accent); font-weight: 700; }

/* ── 案例详情：现象→根因→对策 编号时间轴 ─────────────────────── */
.case-detail { max-width: 860px; margin: 0 auto; }
.cd-head { margin-bottom: 18px; }
.cd-badges { display: flex; gap: 8px; margin-bottom: 11px; flex-wrap: wrap; }
.cd-cat { font-size: 12px; font-weight: 700; color: var(--bad-deep); background: var(--bad-soft); border-radius: 999px; padding: 3px 12px; }
.cd-lv { font-size: 12px; font-weight: 700; color: var(--text-dim); background: #f0f2f5; border-radius: 999px; padding: 3px 12px; }
.cd-title { margin: 0; font-size: 27px; line-height: 1.4; font-weight: 800; letter-spacing: .01em; }
.cd-ref { margin-top: 7px; font-size: 12.5px; color: var(--text-soft); }
.cd-steps { display: flex; flex-direction: column; gap: 15px; margin-bottom: 18px; }
.cd-step { position: relative; background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 18px 22px 18px 68px; box-shadow: var(--shadow-sm); }
/* 连接线：把三段推导真正"串"起来（#8fa3c0 对白底 ≈2.4:1，肉眼可见） */
.cd-step:not(:last-child)::after { content: ""; position: absolute; left: 32px; top: 58px; bottom: -15px; width: 2.5px; background: linear-gradient(180deg, #8fa3c0, rgba(143,163,192,0)); }
.cd-num { position: absolute; left: 19px; top: 19px; width: 27px; height: 27px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 13.5px; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; box-shadow: 0 3px 8px -2px rgba(23,35,58,.35); }
.s-p .cd-num { background: var(--energy); }
.s-c .cd-num { background: var(--bad); }
.s-f .cd-num { background: var(--ok); }
.cd-step-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.cd-lab { display: inline-block; font-size: 12.5px; font-weight: 800; border-radius: 999px; padding: 2.5px 12px; letter-spacing: .06em; }
.lab-p { background: var(--energy-soft); color: var(--energy-deep); }
.lab-c { background: var(--bad-soft); color: var(--bad-deep); }
.lab-f { background: var(--ok-soft); color: var(--ok-deep); }
.cd-txt { font-size: 15px; color: #2a3646; line-height: 1.9; }
.cd-block { background: var(--panel); border: 1px solid var(--hairline); border-radius: 14px; padding: 16px 18px; margin-bottom: 12px; }
.cd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.cd-peers { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); }
.cd-peers-title { font-size: 13px; font-weight: 750; color: var(--text-dim); margin-bottom: 11px; }
.cd-peers-list { display: flex; flex-wrap: wrap; gap: 8px; }
.peer { font-size: 13px; color: var(--accent); background: var(--accent-soft); border-radius: 9px; padding: 6px 13px; text-decoration: none; font-weight: 600; transition: .13s; }
.peer:hover { background: #d8e4fd; }

/* ── 滚动条 ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #cfd6df; border-radius: 6px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #b9c2cd; }
::-webkit-scrollbar-track { background: transparent; }

/* ================= 🏛 体系栏目（结构开发是个体系问题） =================
   这一页是「白皮书的体系」与「知识库的储备」的对齐面。
   视觉上刻意比知识点页更「汇报体」：粗边卡片、表格式对齐、结论用 callout 收口。
   只使用 :root 里已声明的变量，不引入新颜色。 */
.sys-quote { margin: 14px 0 10px; padding: 10px 14px; border-left: 3px solid var(--accent);
  background: var(--accent-soft); border-radius: 0 10px 10px 0; color: var(--text-dim); font-size: 14.5px; }
.sys-quote cite { display: block; margin-top: 4px; font-style: normal; font-size: 12.5px; color: var(--text-soft); }
.sys-say { display: inline-block; margin: 4px 0 10px; padding: 5px 12px; border-radius: 999px;
  background: var(--ok-soft); color: var(--ok-deep); font-weight: 700; font-size: 14px; }
.sys-say-src { font-weight: 400; color: var(--text-soft); font-size: 12.5px; }
.sys-book { margin-top: 6px; font-size: 14px; }
.sys-book a { color: var(--accent); font-weight: 700; text-decoration: none; }
.sys-book a:hover { text-decoration: underline; }
.sys-book-note { color: var(--text-soft); font-size: 12.5px; }

/* —— 体系一张图 —— */
.sys-map { margin: 10px 0 26px; padding: 16px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.sys-map-row { display: flex; align-items: flex-start; gap: 14px; }
.sys-map-k { flex: 0 0 186px; padding-top: 8px; color: var(--text-soft); font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.sys-map-cards { flex: 1; display: flex; flex-wrap: wrap; gap: 10px; }
.sys-map-node { display: flex; flex-direction: column; gap: 2px; min-width: 178px; flex: 1 1 178px; max-width: 260px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
  text-decoration: none; color: var(--text); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.sys-map-node:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); border-color: var(--accent); }
.sys-map-node b { font-size: 14.5px; }
.sys-map-sub { font-size: 12px; color: var(--accent); font-weight: 700; }
.sys-map-d { font-size: 12.5px; color: var(--text-soft); line-height: 1.5; }
.sys-map-down { text-align: center; color: var(--text-soft); font-size: 16px; line-height: 1.2; margin: 4px 0; }

/* —— 覆盖诊断 —— */
.sys-intro { margin: 8px 0 12px; color: var(--text-dim); font-size: 14px; }
.sys-cov { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.sys-cov-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.sys-cov-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sys-cov-mod { font-weight: 700; font-size: 15px; }
.sys-cov-verdict { font-weight: 700; font-size: 13px; padding: 1px 10px; border-radius: 999px; background: var(--bg); }
.sys-cov-note { color: var(--text-dim); font-size: 13.5px; line-height: 1.7; }
.sys-callout { margin: 12px 0 26px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--violet-soft); border: 1px solid var(--violet); color: var(--text); font-size: 14px; line-height: 1.8; }

/* —— 资产胶囊（数字实时算） —— */
.sys-assets { display: flex; flex-wrap: wrap; gap: 6px; }
.sys-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--border); color: var(--accent-deep);
  font-size: 12.5px; text-decoration: none; transition: border-color .12s ease, transform .12s ease; }
.sys-chip:hover { border-color: var(--accent); transform: translateY(-1px); }
.sys-chip b { font-family: var(--mono); font-size: 12px; color: var(--accent); }
.sys-chip-warn { background: var(--bad-soft); color: var(--bad-deep); border-color: var(--bad); }
.sys-cat { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel); font-size: 12.5px; text-decoration: none; }
.sys-cat b { font-family: var(--mono); font-size: 11.5px; opacity: .75; }
.sys-cat:hover { border-color: currentColor; }

/* —— 七个模块 —— */
.sys-mods { display: flex; flex-direction: column; gap: 14px; }
.sys-mod { padding: 14px 16px; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.sys-mod-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.sys-mod-head b { font-size: 16px; }
.sys-mod-no { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--panel);
  background: var(--accent); padding: 1px 7px; border-radius: 6px; }
.sys-mod-sub { color: var(--text-soft); font-size: 12.5px; }
.sys-mod-wp { margin-left: auto; font-size: 12.5px; }
.sys-mod-wp a { color: var(--violet-deep); text-decoration: none; }
.sys-mod-wp a:hover { text-decoration: underline; }
.sys-mod-gist { color: var(--text-dim); font-size: 14px; line-height: 1.85; margin-bottom: 10px; }
.sys-gap { margin-top: 10px; padding: 9px 12px; border-left: 3px solid var(--energy); background: var(--energy-soft);
  border-radius: 0 8px 8px 0; font-size: 13.5px; line-height: 1.75; color: var(--text); }
.sys-gap b { color: var(--energy-deep); margin-right: 6px; }

/* —— 模块里内嵌的「深化正文」 ——
   复用 .md-* 那套长文样式（它们都是全局规则、不依赖 .md-doc），所以只补壳与层级：
   模块本身已经是一张卡片，正文不能再来一张卡（.md-doc 的 max-width/bg/padding 全不要）。 */
.sys-mod-deep { margin: 12px 0 4px; border: 1px solid var(--hairline); border-radius: 12px;
  background: #fcfdff; overflow: hidden; }
.sys-mod-deep-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; background: var(--accent-soft); border-bottom: 1px solid var(--hairline); }
.sys-mod-deep-bar b { font-size: 13px; color: var(--accent-deep); letter-spacing: .04em; }
.sys-mod-deep-note { font-size: 12px; color: var(--text-soft); }
.sys-mod-deep-link { margin-left: auto; font-size: 12.5px; font-weight: 650;
  color: var(--accent); text-decoration: none; }
.sys-mod-deep-link:hover { text-decoration: underline; }
.sys-mod-deep-warn { padding: 10px 14px; font-size: 13px; color: var(--bad);
  border-color: var(--bad); background: var(--energy-soft); }
.sys-deep-doc { padding: 15px 18px 4px; }
/* 正文里嵌进来的标题逐级收小：章节名（h2）留 .md-h 原样，往下三级都不该跟它一样大 */
.sys-deep-doc h3.md-h { font-size: 16.5px; border-bottom: 0; margin: 20px 0 9px; }
.sys-deep-doc h4.md-h { font-size: 15px; border-bottom: 0; margin: 17px 0 8px; color: var(--text-dim); }
.sys-deep-doc h5.md-h { font-size: 14px; border-bottom: 0; margin: 15px 0 7px; color: var(--text-dim); }
.sys-deep-doc > .md-h:first-child { margin-top: 2px; }
.sys-deep-doc .md-p { font-size: 14.5px; line-height: 1.92; }
.sys-deep-doc .md-ul li, .sys-deep-doc .md-ol li { font-size: 14.5px; line-height: 1.88; }
.sys-mod-toc { margin: 2px 0 16px; }
/* 直达条与「读全书 · 七章直达」长得像、动作却不同（一个在本页往下滚、一个新窗口打开白皮书），
   所以给本页跳转加个 ↓，跟外链的 ↗ 一眼分开。 */
.sys-mod-toc .chip { font-size: 12.5px; padding: 4px 11px; }
.sys-mod-toc .chip::before { content: "↓ "; color: var(--accent); }

/* —— 对齐表（理念兑现 / 宏定义） —— */
.sys-table-wrap { overflow-x: auto; margin: 10px 0 6px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.sys-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sys-table th { text-align: left; padding: 10px 12px; background: var(--bg); color: var(--text-dim);
  font-size: 12.5px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.sys-table td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; line-height: 1.7; }
.sys-table tr:last-child td { border-bottom: none; }
.sys-table td code { font-family: var(--mono); font-size: 12px; background: var(--bg); padding: 1px 5px;
  border-radius: 5px; color: var(--violet-deep); }
.sys-table .sys-assets { margin: 0; }
.sys-macro-words { color: var(--text-dim); font-size: 12.5px; }
.sys-table tr.st-ok td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.sys-table tr.st-part td:first-child { box-shadow: inset 3px 0 0 var(--energy); }
.sys-table tr.st-no td:first-child { box-shadow: inset 3px 0 0 var(--bad); }

/* ⚠️ 这里刻意没有「下一步 / 建议」的样式。建议属于**过程信息**，只写进 _work 的过程文档
   （_work/当前进度与下一步.md），不进站点：站点只回答「体系是什么 / 库里现在有什么」，
   一旦把「该怎么办」也放上去，这一页就会从知识变成提案，且必然随进度过期。 */

.sys-chapters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }

/* ---------- 🏛 体系页的「底层哲思」段（见 wiki.js 的 renderSystem → fndHTML）----------
   这一段的定位是**先讲道理、再清家底**：六条法则 + 判据 + 定位是一篇成篇的推理，
   所以要的是正文排版（段间距、行高、段首强调），不是又一面卡片墙。
   三条自我约束：
   ① 法则正文用 <p> 分段（wiki.js 的 sysParas 把空行拆成段），段距靠 p 的 margin，
      不要靠空 <p> 撑；
   ② 长串一律 overflow-wrap:anywhere + 容器 min-width:0 —— #page 是 flex 列容器，
      块级子元素是 flex item，min-width:auto 等于「最小内容宽度」，一长串就能把整页撑宽
      （这条与下面 .rb-* 是同一个坑，栽过两次了）；
   ③ 这里同样**不出现「下一步／建议」样式** —— 建议是过程信息，只写在 _work/当前进度与下一步.md。 */
.sys-fnd-kicker { margin-left: auto; color: var(--text-soft); font-size: 12.5px; font-weight: 400; }
.sys-fnd-intro { margin: 10px 0 16px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
.sys-fnd-intro p, .sys-law-why p, .sys-law-here, .sys-hold p {
  margin: 0 0 10px; color: var(--text-dim); font-size: 14.5px; line-height: 1.95; }
.sys-fnd-intro p:last-child, .sys-law-why p:last-child, .sys-hold p:last-child { margin-bottom: 0; }
.sys-fnd-intro code, .sys-law-claim code, .sys-law-why code, .sys-law-here code, .sys-hold code {
  font-family: var(--mono); font-size: 12.5px; background: var(--bg); padding: 1px 5px; border-radius: 4px; color: var(--accent); }
.sys-laws { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.sys-law { min-width: 0; padding: 16px 18px; background: var(--panel); border: 1px solid var(--border);
  border-left: 3px solid var(--violet); border-radius: var(--radius); }
.sys-law-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.sys-law-head b { font-size: 16px; line-height: 1.5; }
.sys-law-no { flex: 0 0 auto; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--violet); color: #fff; font-size: 13px; font-weight: 700; }
.sys-law-claim { margin-bottom: 10px; padding: 10px 13px; border-left: 3px solid var(--accent); background: var(--accent-soft);
  color: var(--text); font-size: 15px; font-weight: 600; line-height: 1.8; overflow-wrap: anywhere; }
.sys-law-why { min-width: 0; }
.sys-law-here { margin-top: 12px; padding: 10px 13px; background: var(--bg); border: 1px dashed var(--border);
  border-radius: var(--radius); font-size: 13.5px; }
.sys-law-here b { color: var(--ok); margin-right: 8px; }
.sys-axi { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.sys-axi a { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-dim); font-size: 12.5px; text-decoration: none; }
.sys-axi a:hover { border-color: var(--violet); color: var(--violet); }
.sys-axi b { font-family: var(--mono); font-size: 11.5px; color: var(--violet); }
/* 依据节点（法则 → 节点 → 原始文档）：每条法则除了公理，还挂一排「库里的节点 + 它长在哪份材料上」。
   样式贴着 .sys-axi 走，但刻意用中性灰而不是紫色：紫=本源（公理），灰=证据（文档）——
   两者性质不同，读者应该一眼分得开。em 里放文件名，长文件名允许换行（overflow-wrap），
   否则窄屏下这张卡片会把整行撑破（本项目在 #/redbook 上已经栽过一次横向溢出）。 */
.sys-law-nodes { margin-top: 10px; }
.sys-lawnodes-h { display: block; font-size: 11.5px; color: var(--text-soft); margin-bottom: 6px; }
.sys-lawnodes { display: flex; flex-wrap: wrap; gap: 6px; }
.sys-lawnodes a { display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%;
  padding: 4px 10px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--bg);
  color: var(--text); text-decoration: none; font-size: 12.5px; }
.sys-lawnodes a:hover { border-color: var(--ok); }
.sys-lawnodes b { font-family: var(--mono); font-size: 11.5px; color: var(--text-dim); }
.sys-lawnodes em { font-style: normal; font-size: 11px; color: var(--text-soft); overflow-wrap: anywhere; }
.sys-lawnode-warn { color: var(--bad); border: 1px dashed var(--bad); padding: 3px 10px; border-radius: 8px; font-size: 12px; }
.sys-hold { min-width: 0; margin: 0 0 16px; padding: 16px 18px; background: var(--panel);
  border: 1px solid var(--border); border-radius: var(--radius); }
.sys-hold-h { margin-bottom: 10px; font-size: 17px; font-weight: 700; }
.sys-locus { border-left: 3px solid var(--ok); }
.sys-loop { display: flex; flex-direction: column; gap: 1px; margin: 12px 0; background: var(--hairline);
  border-radius: var(--radius); overflow: hidden; }
.sys-loop-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 9px 12px; background: var(--bg); }
.sys-loop-p { flex: 0 0 132px; font-weight: 700; font-size: 13.5px; }
.sys-loop-r { flex: 1 1 260px; min-width: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.7; overflow-wrap: anywhere; }
.sys-loop-wp { flex: 0 0 auto; font-size: 12.5px; color: var(--violet-deep); text-decoration: none; white-space: nowrap; }
.sys-loop-wp:hover { text-decoration: underline; }
.sys-hold-close { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border);
  color: var(--text-dim); font-size: 14.5px; line-height: 1.95; }
.sys-hold-close b { color: var(--text); }
.sys-fnd-sep { height: 1px; margin: 26px 0 30px; background: linear-gradient(90deg, var(--violet), transparent); }

/* ---------- 📋 规范与模板版本谱（#/redbook，见 wiki.js 的 renderRedbook）----------
   表格皮肤直接复用上面的 .sys-table / .sys-table-wrap，这里只补版本谱特有的几处：
   ①「这一页没有的数据」清单 ②条款级变更卡片 ③角色门槛小字 ④页面落款。
   两个必须记住的排版约束（否则窄窗口会横向溢出）：
   · #page 是 flex 列容器，**块级子元素是 flex item，min-width:auto = 最小内容宽度** ——
     长串（如「1.1/1.2/1.3/…」这种不换行的一长串）会把卡片整个撑到 1100px 以上。
     故所有块级子元素都要 min-width:0，并让长串可断行（overflow-wrap:anywhere）。
   · 表格宽是正常的：它外面有 .sys-table-wrap 的 overflow-x:auto 兜底（overflow 非 visible
     会把 flex item 的自动最小尺寸压成 0，所以表格从不会把文档撑宽）。
   同样刻意没有「下一步 / 建议」样式 —— 建议是过程信息，只写在 _work/当前进度与下一步.md。 */
.rb-miss { margin: 10px 0 26px; padding-left: 22px; min-width: 0; }
.rb-miss li { margin: 9px 0; line-height: 1.8; color: var(--text-dim); overflow-wrap: anywhere; }
.rb-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px;
    margin: 0 0 14px; background: var(--panel); box-shadow: var(--shadow-sm);
    min-width: 0; overflow-wrap: anywhere; }
.rb-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.rb-name { font-weight: 700; font-size: 15.5px; color: var(--text); overflow-wrap: anywhere; }
.rb-blk { margin: 8px 0 8px 2px; min-width: 0; }
.rb-ver { font-weight: 700; color: var(--violet); margin-bottom: 4px; }
.rb-items { margin: 0 0 6px; padding-left: 22px; min-width: 0; }
.rb-items li { margin: 4px 0; line-height: 1.75; font-size: 13.5px; color: var(--text-dim);
    overflow-wrap: anywhere; }
.rb-clause { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border); min-width: 0; }
.rb-ct { font-weight: 600; font-size: 13px; margin-bottom: 4px; color: var(--text); }
.rb-removed { font-family: var(--mono); font-size: 12.5px; color: var(--bad-deep);
    line-height: 1.8; word-break: break-all; overflow-wrap: anywhere; }
.rb-ref { margin-top: 10px; font-size: 12.5px; color: var(--text-soft); overflow-wrap: anywhere; }
.rb-raw { margin-top: 10px; min-width: 0; }
.rb-raw summary { cursor: pointer; font-size: 13px; color: var(--accent); }
.rb-rawbody { margin-top: 8px; padding: 10px 12px; background: var(--bg); border-radius: 10px;
    font-size: 12.5px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere;
    color: var(--text-dim); }
.rb-table td { overflow-wrap: anywhere; }
.rb-table td:nth-child(1) { min-width: 180px; }
/* 「规范与模板一览」的表：第 2、3 列是当前版本 / 最近修订，都很短，压成一行更整齐。
   ⚠️ 必须 :not(.rb-hist) —— 变更履历表的第 3 列是长文本「本次更新说明」，
   一起 nowrap 的话整表最小宽度会被顶到 1225px（踩过这个坑）。 */
.rb-table:not(.rb-hist) th:nth-child(2), .rb-table:not(.rb-hist) td:nth-child(2),
.rb-table:not(.rb-hist) th:nth-child(3), .rb-table:not(.rb-hist) td:nth-child(3) { white-space: nowrap; width: 1%; }
.rb-hist th:nth-child(1), .rb-hist td:nth-child(1),
.rb-hist th:nth-child(2), .rb-hist td:nth-child(2) { white-space: nowrap; width: 1%; }
.rb-hist th:nth-child(3), .rb-hist td:nth-child(3) { min-width: 240px; }
.rb-td-name { font-weight: 600; color: var(--text); }
.rb-td-ver { font-family: var(--mono); }
.rb-td-date { color: var(--text-soft); font-size: 12.5px; }
.rb-td-note { color: var(--text-dim); font-size: 13px; }
.rb-lv { font-weight: 400; font-size: 11.5px; color: var(--text-soft); margin-top: 3px; }
.rb-foot { margin: 18px 0 40px; font-size: 12.5px; color: var(--text-soft);
    line-height: 1.8; min-width: 0; overflow-wrap: anywhere; }

/* ================= 🕸 加强网络结构图（#/network，见 wiki.js 的 renderNetwork）=================
   注意：这一页 SVG 里的颜色是**属性着色**（fill / stroke 直接写在元素上），故意不靠这里的 class ——
   因为「导出 SVG」要把图存成独立文件，脱离 wiki.css 也必须能看。所以下面只管版式与交互外观。 */
.nw-page { max-width: 1560px; margin: 0 auto; }
.nw-warn { margin: 14px 0; padding: 10px 14px; border-radius: 10px; background: var(--bad-soft);
    color: var(--bad-deep); font-size: 13px; }
.nw-head h1 { font-size: 27px; margin: 6px 0 10px; color: var(--text); letter-spacing: .3px; }
.nw-lead { color: var(--text-dim); font-size: 14px; line-height: 1.85; margin: 0 0 16px; }
.nw-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.nw-stat { background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
    padding: 9px 14px; min-width: 84px; box-shadow: var(--shadow-sm); }
.nw-stat b { display: block; font-size: 19px; color: var(--accent); font-family: var(--mono); letter-spacing: .2px; }
.nw-stat span { font-size: 11.5px; color: var(--text-soft); }
.nw-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1080px) { .nw-grid { grid-template-columns: minmax(0, 1fr); } }
.nw-side { display: flex; flex-direction: column; gap: 12px; }
.nw-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 13px 15px; box-shadow: var(--shadow-sm); }
.nw-card h3 { margin: 0 0 9px; font-size: 14px; color: var(--text); }
.nw-lab { font-size: 11.5px; color: var(--text-soft); margin: 8px 0 6px; line-height: 1.6; }
.nw-lab b { color: var(--text-dim); }
.nw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.nw-chip { display: inline-flex; align-items: baseline; gap: 5px; background: #fff; border: 1px solid var(--border);
    border-left-width: 3px; border-radius: 8px; padding: 3px 8px; font-size: 11.5px; color: var(--text);
    font-family: var(--mono); cursor: pointer; max-width: 100%; }
.nw-chip em { font-style: normal; font-family: var(--mono); color: var(--text-soft); font-size: 11px;
    max-width: 132px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-chip:hover { background: var(--accent-soft); border-color: var(--accent); }
.nw-cycles { display: flex; flex-direction: column; gap: 6px; }
.nw-cycle { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; font-size: 11.5px; }
.nw-cycle i { font-style: normal; color: var(--violet-deep); font-weight: 700; margin-right: 3px; }
.nw-arrow { color: var(--violet-deep); }
.nw-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.nw-list li { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--text); }
.nw-list em { font-style: normal; flex: 1 1 auto; min-width: 0; color: var(--text-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nw-list b { font-family: var(--mono); color: var(--accent); font-size: 12.5px; }
.nw-link { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent);
    font-family: var(--mono); font-size: 12px; }
.nw-link:hover { text-decoration: underline; }
.nw-main { min-width: 0; }
.nw-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.nw-tgroup { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; background: #fff; }
.nw-tgroup button { border: 0; background: none; padding: 6px 10px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
.nw-tgroup button + button { border-left: 1px solid var(--border); }
.nw-tgroup button.on { background: var(--accent); color: #fff; }
.nw-tools select, .nw-tools input[type=text] { border: 1px solid var(--border); border-radius: 9px;
    padding: 6px 10px; font-size: 12px; color: var(--text); background: #fff; }
.nw-tools input[type=text] { flex: 1 1 200px; min-width: 140px; }
.nw-hint { font-size: 11.5px; color: var(--text-soft); }
.nw-stage { position: relative; background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow-sm); overflow: hidden; }
.nw-svg { display: block; width: 100%; height: min(76vh, 880px); min-height: 460px; touch-action: none; cursor: grab; }
.nw-svg:active { cursor: grabbing; }
.nw-tip { position: absolute; left: 0; top: 0; z-index: 5; display: none; max-width: 290px; pointer-events: none;
    background: rgba(255,255,255,.98); border: 1px solid var(--border); border-radius: 10px;
    box-shadow: var(--shadow-md); padding: 9px 11px; }
.nw-tip.on { display: block; }
.nw-tip-id { font-family: var(--mono); font-size: 11.5px; color: var(--text-soft);
    display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap; }
.nw-tip-lay { color: var(--accent); }
.nw-tip-t { font-size: 13.5px; font-weight: 600; color: var(--text); margin: 4px 0 3px; line-height: 1.5; }
.nw-tip-c { font-size: 12px; color: var(--text-dim); line-height: 1.65; }
.nw-tip-m { font-size: 11px; color: var(--text-soft); margin-top: 5px; font-family: var(--mono); }
.nw-tip-b { margin-top: 5px; display: flex; gap: 5px; flex-wrap: wrap; }
.nw-b { font-style: normal; font-size: 10.5px; color: #fff; border-radius: 999px; padding: 1px 7px; }
.nw-tip-x { margin-top: 6px; font-size: 11px; color: var(--accent); }
.nw-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 11.5px; color: var(--text-dim); }
.nw-legend span { display: inline-flex; align-items: center; gap: 6px; }
.nw-legend i { display: inline-block; width: 18px; height: 8px; border-radius: 2px; }
.nw-legend i.nw-ring { width: 11px; height: 11px; border-radius: 50%; border: 1.6px solid; background: none; }
.nw-notes { margin: 26px 0 44px; background: var(--panel); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow-sm); }
.nw-notes h2 { font-size: 17px; margin: 0 0 10px; color: var(--text); }
.nw-notes ul { margin: 0; padding-left: 20px; }
.nw-notes li { font-size: 13.5px; line-height: 1.9; color: var(--text-dim); margin-bottom: 8px; }
.nw-notes b { color: var(--text); }