/* 知识库网页面 · 视觉系统
   方向：清爽导航站 / 工作台（2026-07-21 定版，参照用户给的 shentoushi.top 类工具导航：
   白底卡片矩阵、高信息密度、蓝色点缀、系统黑体——快速取用优先，不做慢读杂志）。
   取代上一版「技术档案/编辑部」（宋体+墨金），用户实测不喜欢。

   三条硬约束（web-design-system）在前，风格在后：
   ① Portable：无外链字体、无 CDN，file:// 双击即开；
   ② 可读性：中文连续正文 ≥14px、次级 ≥13px（2026-07-21 用户两次下调定档：100% 缩放即其惯用密度）；标签/徽章/面包屑是标记，可更小；
   ③ 页面本身绝不横向滚，宽内容在自己的容器里滚。
   令牌唯一出处＝本文件 :root（规则登记在 library-rules「全库 HTML 视觉令牌」）。 */

:root {
  --bg:      #F4F6F9;   /* 页面底 */
  --card:    #FFFFFF;   /* 卡片 */
  --line:    #E2E8F0;   /* 描边 */
  --line-2:  #EEF2F7;   /* 更浅分隔 */

  --ink-900: #0F172A;   /* 标题 */
  --ink-700: #334155;   /* 正文 */
  --ink-500: #5B6B7F;   /* 次级 */
  --ink-400: #8494A7;   /* 弱化 */

  --blue:    #2563EB;   /* 主强调 */
  --blue-d:  #1D4ED8;
  --blue-bg: #EFF6FF;
  --blue-ln: #BFDBFE;

  --ok:      #16803D;  --ok-bg:  #ECFDF3;  --ok-ln:  #A7D9BC;
  --warn:    #B45309;  --warn-bg:#FFFBEB;  --warn-ln:#FDE68A;
  --red:     #B91C1C;  --red-bg: #FEF2F2;  --red-ln: #F3C0C0;

  --sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 10px;
  --shadow: 0 1px 2px rgba(15,23,42,.05);
  --shadow-up: 0 4px 14px rgba(15,23,42,.09);
  --maxw: 1200px;
  /* 锚点落点：顶栏是吸顶的，浏览器把目标滚到视口顶就正好被它盖住半截标题
     （2026-07-22 用户报：点「7 · MCP 网关」跳过去只看得见半行）。所有可跳转的
     元素统一让出顶栏实高再加一点余量。--topbar-h 由 site.js 实测写入；
     无 JS 时退回 2.8rem，是顶栏单行高度的保守值。 */
  --anchor-top: calc(var(--topbar-h, 2.8rem) + 1rem);
}

/* 深色：只改令牌，不改任何一条布局或组件规则——上面那份令牌表是唯一出处，
   这里是它的第二套取值。跟随系统设置，不做手动开关：
   开关要持久化就得有脚本，脚本要不闪就得写进 47 个页面的 <head>，
   而 prefers-color-scheme 零脚本、零标记、零闪烁，覆盖的正是绝大多数场景。
   取值按暗底反过来配：底最深、卡片次之、描边再亮一档；强调色整体提亮，
   因为深色底上 #2563EB 这类饱和蓝会发闷。 */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #0F1520;
    --card:    #161E2C;
    --line:    #2A3547;
    --line-2:  #1E2836;

    --ink-900: #E8EDF5;
    --ink-700: #C0CBDA;
    --ink-500: #97A6B8;
    --ink-400: #74849A;

    --blue:    #60A5FA;
    --blue-d:  #93C5FD;
    --blue-bg: #16243C;
    --blue-ln: #2E4A6E;

    --ok:      #4ADE80;  --ok-bg:  #10241A;  --ok-ln:  #2A5741;
    --warn:    #FBBF24;  --warn-bg:#2A2113;  --warn-ln:#5C4818;
    --red:     #F87171;  --red-bg: #2A1618;  --red-ln: #5C2A2C;

    --shadow:    0 1px 2px rgba(0,0,0,.35);
    --shadow-up: 0 4px 14px rgba(0,0,0,.45);
  }
  /* 位图没有令牌可用，只能压一档亮度。SVG 不在此列——图里的颜色一律走令牌
     （2026-07-22 起），brightness 那种治标法只是把纯白压成浅灰，在暗底上照样是块亮斑。 */
  img { filter: brightness(.92); }
}

/* 图表配色走令牌：内联 SVG 里直接用 var()，深浅色自动跟随，不需要第二套图。
   纪律：新画的图**不许写死色值**，只用 --ink-900/500/400、--blue、--line、
   --card、--ok、--warn、--red 这几个令牌——写死的那天就是深色模式坏掉的那天。 */
svg text { font-family: var(--sans); }
/* 七层色相的深色取值放在浅色定义之后（本文件末），否则会被同优先级的浅色规则盖掉 */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html { color-scheme: light dark; }   /* 让滚动条、表单控件也跟着走 */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--ink-700);
  background: var(--bg);
  word-break: normal;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

/* 居中布局（2026-07-21 复核定版）：曾因"品牌字位置每页不同"改为左锚定，
   后确认位置漂移的真因是标签页缩放不一致（总纲页被 ⌘- 缩过、其余 100%）——
   缩放归零后居中并不漂移，宽屏下居中更好看，按用户裁决恢复。 */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 1.2rem; }

/* ============ 页头 ============ */
.top { background: var(--card); border-bottom: 1px solid var(--line); padding: 1.5rem 0 1.4rem; }
.crumb { font-size: 13px; color: var(--ink-400); margin: 0 0 .5rem; }
.crumb a { color: var(--ink-500); text-decoration: none; }
.crumb a:hover { color: var(--blue); }
.top h1 { font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; line-height: 1.3;
          margin: 0 0 .35rem; color: var(--ink-900); letter-spacing: .01em; }
.top h1 .en { display: block; font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
              color: var(--blue); font-weight: 600; margin-bottom: .3rem; }
.top .lede { margin: .1rem 0 0; font-size: 13.5px; color: var(--ink-500); max-width: 72ch; }
.top .hr { height: 1px; background: var(--line-2); margin: .9rem 0; }
/* 页头要点行：把「四件事：A（…）、B（…）、C（…）、D（…）」这种挤在一句里的并列拆开。
   放页头而不是正文卡片——页头底色即卡片色，再套一层卡会看不见边界（2026-07-22）。 */
/* align-items 必须是 start：grid 默认把同一行的格子拉成等高，注解一长一短时，
   短的那格竖线会拖出一截空白（四件事实测：成本注 5 行、质量注 2 行，竖线都是 124px）。 */
.keypoints { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
             gap: .55rem 1rem; margin: .8rem 0 .2rem; max-width: 72ch; align-items: start; }
.keypoints > div { border-left: 2px solid var(--blue-ln); padding-left: .65rem; }
.keypoints b { display: block; font-size: 14px; color: var(--ink-900); line-height: 1.5; }
.keypoints span { font-size: 12.5px; color: var(--ink-500); line-height: 1.6; }
/* 同一个件也用在正文的引言块里。要点词必须比它周围的字**大一档**才压得住：页头正文
   13.5px 配 14px 成立，lead 正文是 14.5px，照搬就反而更小了，所以进 lead 提到 15px。 */
/* 正文列比页头窄（实测 634px）：9.5rem 起步时四项会挤成 3+1 折行，降到 8.5rem 才排得下四列。 */
.lead .keypoints { margin: .65rem 0 .75rem; max-width: none;
                   grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.lead .keypoints b { font-size: 15px; }
.lead .keypoints span { font-size: 13px; }

/* 搜索 */
.search { margin: .9rem 0 0; max-width: 34rem; }
.search input {
  width: 100%; padding: .55rem .9rem; font-size: 15px; font-family: var(--sans);
  color: var(--ink-900); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.search input:focus { outline: none; border-color: var(--blue); background: var(--card);
                      box-shadow: 0 0 0 3px var(--blue-bg); }
.search input::placeholder { color: var(--ink-400); }
.hits { margin: .5rem 0 0; padding: 0; list-style: none; background: var(--card);
        border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.hits:empty { display: none; }
.hits li + li { border-top: 1px solid var(--line-2); }
.hits a { display: block; padding: .5rem .8rem; color: var(--ink-700);
          text-decoration: none; font-size: 14.5px; }
.hits a:hover, .hits a:focus { background: var(--blue-bg); outline: none; }
.hits .k { color: var(--ink-400); font-size: 12.5px; }
.nojs-note { font-size: 14px; color: var(--ink-400); margin: .5rem 0 0; }

/* ============ 版式 ============ */
main { padding: 1.6rem 0 3rem; }
h1 { color: var(--ink-900); }
h2 { font-size: 16.5px; font-weight: 700; color: var(--ink-900); line-height: 1.4;
     margin: 2.3rem 0 .8rem; padding-left: .65rem; border-left: 4px solid var(--blue); }
h3 { font-size: 15px; font-weight: 700; color: var(--ink-900); margin: 1.7rem 0 .55rem; }
h4 { font-size: 14px; font-weight: 700; color: var(--ink-900); margin: 1.1rem 0 .35rem; }
p { margin: .65rem 0; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-d); text-decoration: underline; }
b, strong { color: var(--ink-900); }
code { font-family: var(--mono); font-size: .9em; background: var(--line-2);
       padding: .1em .4em; border-radius: 5px; color: var(--ink-900); }
pre.codeblock { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
                box-shadow: var(--shadow); padding: .9rem 1rem; overflow-x: auto;
                font-size: 14px; line-height: 1.8; }
pre.codeblock code { background: none; padding: 0; }

/* ============ 每日取用 ============ */
.daily { background: var(--blue-bg); border: 1px solid var(--blue-ln);
         border-radius: var(--radius); padding: .85rem 1.1rem; margin: 1.2rem 0; font-size: 13.5px; }
.daily b, .daily-title { color: var(--ink-900); font-weight: 700; margin-right: .5rem; }
.daily a { margin-right: 1rem; white-space: nowrap; font-weight: 600; }
.daily ul { margin: .25rem 0 0; padding: 0; list-style: none; }
.daily li { margin: .3rem 0; }
.daily .d { color: var(--ink-500); font-weight: 400; }

/* ============ 入口卡 ============ */
.faces { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
         gap: .8rem; margin: 1rem 0; }
.face { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.1rem;
        background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
        box-shadow: var(--shadow); text-decoration: none; color: inherit;
        transition: box-shadow .15s ease, border-color .15s ease; }
.face:hover { border-color: var(--blue-ln); box-shadow: var(--shadow-up); text-decoration: none; }
.face b { font-size: 14.5px; color: var(--ink-900); }
.face span, .face .d { font-size: 13px; color: var(--ink-500); line-height: 1.65; }
.face .st { font-size: 12.5px; font-weight: 600; }
.face .st.ok { color: var(--ok); }
.face .st.soon { color: var(--warn); }

/* ============ 知识地图（卡片矩阵）============ */
.layer { margin: 0 0 1.6rem; scroll-margin-top: var(--anchor-top); }
.layer > h3 { display: flex; align-items: center; gap: .6rem; margin: 0 0 .55rem; font-size: 16px; }
.layer > h3::before { content: ""; width: 8px; height: 8px; border-radius: 3px; background: var(--blue); }
.layer > h3 .n { font-size: 12.5px; font-weight: 400; color: var(--ink-400); }
.cards { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.card { display: flex; flex-direction: column; gap: .25rem; padding: .8rem .95rem;
        background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
        box-shadow: var(--shadow); text-decoration: none; color: inherit;
        transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; }
.card:hover { border-color: var(--blue-ln); box-shadow: var(--shadow-up);
              transform: translateY(-1px); text-decoration: none; }
.card .nm { font-size: 14.5px; font-weight: 700; color: var(--ink-900);
            display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.card .blurb { font-size: 13px; color: var(--ink-500); line-height: 1.6;
               display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
               overflow: hidden; }
.card .meta { font-size: 12.5px; color: var(--ink-400); margin-top: auto; padding-top: .2rem; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
       padding: .05rem .45rem; border-radius: 999px; white-space: nowrap; }
.tag.web { background: var(--blue-bg); color: var(--blue-d); border: 1px solid var(--blue-ln); }
.tag.ppt { background: var(--line-2); color: var(--ink-500); border: 1px solid var(--line); }

/* ============ 模块页两栏 ============ */
/* 两栏与页头之间要留白：贴着页头的分隔线开始，目录卡片看着像页头的一部分。 */
.cols { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: 2.2rem;
        align-items: start; margin-top: 1.5rem; }
.cols > *, .grid > *, .cards > *, .rel > *, .wire-grid > *, .faces > * { min-width: 0; }
/* 吸顶位置也要在顶栏下沿，否则滚动时目录会滑进顶栏底下。 */
.toc { position: sticky; top: calc(var(--topbar-h, 2.8rem) + .9rem); font-size: 14px;
       background: var(--card);
       border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .6rem; }
.toc h4 { margin: 0 0 .5rem .5rem; font-size: 11.5px; letter-spacing: .12em;
          text-transform: uppercase; color: var(--ink-400); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc a { display: block; padding: .26rem .55rem; border-radius: 7px;
         color: var(--ink-500); text-decoration: none; line-height: 1.5; }
.toc a:hover { background: var(--line-2); color: var(--ink-900); text-decoration: none; }
.toc a.on { background: var(--blue-bg); color: var(--blue-d); font-weight: 600; }

.sec { scroll-margin-top: var(--anchor-top); }
/* 问答折叠件也是分享出去的锚点（q-<模块ID>-<n>），同样别被顶栏盖住。 */
details[id], .qa[id] { scroll-margin-top: var(--anchor-top); }
.sec > h2 { margin-top: 2.6rem; font-size: 17px; }
.sec:first-of-type > h2 { margin-top: .2rem; }
.sec > h2 .num { font-family: var(--mono); font-size: 12px; color: var(--blue);
                 letter-spacing: .08em; display: block; margin-bottom: .15rem; font-weight: 600; }
.anchor { font-family: var(--mono); font-size: 12px; color: var(--ink-400);
          margin-left: .55rem; font-weight: 400; opacity: 0; white-space: nowrap; }
h2:hover .anchor, .anchor:focus { opacity: 1; }

.lead { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--blue);
        border-radius: 0 var(--radius) var(--radius) 0; padding: .8rem 1.05rem;
        margin: 1rem 0 1.3rem; font-size: 14.5px; color: var(--ink-700); box-shadow: var(--shadow); }
.lead p:first-child { margin-top: 0; }
.lead p:last-child { margin-bottom: 0; }

.grid { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
        margin: 1rem 0; }
.box { padding: .85rem 1rem; background: var(--card); border: 1px solid var(--line);
       border-radius: var(--radius); box-shadow: var(--shadow); }
.box h4 { margin: 0 0 .3rem; font-size: 15.5px; }
.box p { margin: .3rem 0; font-size: 13.5px; line-height: 1.65; }
.box.warn { background: var(--warn-bg); border-color: var(--warn-ln); }

/* 表格 */
.tw { overflow-x: auto; margin: 1rem 0; background: var(--card);
      border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { padding: .55rem .8rem; text-align: left; vertical-align: top;
         border-bottom: 1px solid var(--line-2); }
/* 表头底色走令牌，不写死——写死的 #F8FAFC 在深色下是一条刺眼白带（2026-07-22 目检发现，
   全文件仅此一处漏网）。令牌唯一出处就是为了让第二套配色一次生效。 */
th { background: var(--line-2); color: var(--ink-500); font-weight: 600; font-size: 12px;
     letter-spacing: .04em; white-space: nowrap; }
td { line-height: 1.65; color: var(--ink-700); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--line-2); }

/* 证据边注 */
.ev { font-size: 14px; color: var(--ink-400); line-height: 1.65;
      border-left: 2px solid var(--line); padding-left: .8rem; margin: .9rem 0; }
.badge { display: inline-block; font-family: var(--mono); font-size: 12px;
         padding: .05rem .45rem; border-radius: 6px; white-space: nowrap; }
.badge.recheck { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-ln); }
.badge.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-ln); }
.badge.over { background: var(--red-bg); color: var(--red); border: 1px solid var(--red-ln); }

/* 问答（网页版：details 结构） */
.qa { margin: 1rem 0; background: var(--card); border: 1px solid var(--line);
      border-radius: var(--radius); box-shadow: var(--shadow); padding: 0 1rem; }
.qa details { border-bottom: 1px solid var(--line-2); }
.qa details:last-child { border-bottom: 0; }
.qa summary { cursor: pointer; padding: .75rem 1.6rem .75rem 0; font-size: 14.5px;
              font-weight: 600; color: var(--ink-900); list-style: none; position: relative; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; position: absolute; right: .1rem; top: .7rem;
                     font-family: var(--mono); color: var(--blue); font-size: 17px; font-weight: 400; }
.qa details[open] summary::after { content: "−"; }
.qa summary:hover { color: var(--blue-d); }
.qa summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.qa .a { padding: 0 0 .9rem; font-size: 14.5px; color: var(--ink-700); }
.qa .a p { margin: .45rem 0; }
.qa-why { color: var(--ink-500); }
.qa-next { border-left: 3px solid var(--blue); padding: .2rem 0 .2rem .7rem;
           background: var(--blue-bg); border-radius: 0 6px 6px 0; }
.qa-next b { font-size: 13px; letter-spacing: .05em; color: var(--blue-d); }
.qa-src { font-size: 14px; color: var(--ink-400); }
.qa-src a { color: var(--ink-500); }

/* 问答（实战包：q/a/src 结构） */
.qa .q { font-weight: 700; font-size: 14.5px; color: var(--ink-900); margin: 1rem 0 .3rem; line-height: 1.55; }
.qa .q .num { display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 600;
              color: var(--blue-d); background: var(--blue-bg); border: 1px solid var(--blue-ln);
              padding: .06rem .45rem; border-radius: 6px; margin-right: .5rem; vertical-align: 1px; }
/* 必背标记：实战包的快车道（每维度 3 道，约 10 分钟通刷一遍） */
.qa .q .must { color: var(--warn); font-size: 13px; margin-right: .3rem; vertical-align: 1px; }
.qa .q span.fresh { font-size: 12px; font-weight: 400; color: var(--warn);
                    background: var(--warn-bg); border: 1px solid var(--warn-ln);
                    padding: 0 .4rem; border-radius: 6px; margin-left: .45rem; white-space: nowrap; }
.qa > .a { padding: 0; font-size: 14px; color: var(--ink-700); line-height: 1.75; }
.qa .src { font-size: 14px; color: var(--ink-400); margin: .3rem 0 .9rem; }
.qa .src a { color: var(--ink-500); }
.qa:not(:has(details)) { border: 0; box-shadow: none; background: transparent; padding: 0; }

/* 相关模块 */
.rel { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)); }
.rel a { display: block; padding: .8rem .95rem; background: var(--card);
         border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
         text-decoration: none; color: inherit; transition: box-shadow .15s, border-color .15s; }
.rel a:hover { border-color: var(--blue-ln); box-shadow: var(--shadow-up); text-decoration: none; }
.rel .nm { font-weight: 700; font-size: 15.5px; color: var(--ink-900); }
.rel .why { font-size: 14px; color: var(--ink-500); line-height: 1.6; margin-top: .15rem; }

/* 章末串联条（build.py 从模块清单串联关系 + 关键词索引生成）：
   这一章牵出的其他主题，点了就到它在库内的落点。定位是导航标记不是解释文字，
   13px 合规（web-design-system §二：标签/徽章/目录不承载连读内容）。 */
.xlinks { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .5rem;
          border-top: 1px dashed var(--line); margin-top: 1.1rem; padding-top: .7rem; }
.xlinks .xk { font-size: 12px; letter-spacing: .12em; color: var(--ink-400); white-space: nowrap; }
.xlinks a { display: inline-block; font-size: 13px; line-height: 1.5; color: var(--ink-700);
            background: var(--card); border: 1px solid var(--line); border-radius: 999px;
            padding: .12rem .7rem; text-decoration: none;
            transition: border-color .15s, color .15s; }
.xlinks a:hover { border-color: var(--blue-ln); color: var(--blue-d); text-decoration: none; }
.xlinks a .xm { color: var(--ink-400); font-size: 12px; margin-left: .35rem; }
.xlinks a:hover .xm { color: var(--blue); }

/* ============ 图示 ============ */
figure { margin: 1.3rem 0; }
figure svg { display: block; width: 100%; height: auto; }
figcaption { font-size: 14px; color: var(--ink-400); margin-top: .5rem;
             border-left: 2px solid var(--line); padding-left: .8rem; }
.fig-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius);
            background: var(--card); box-shadow: var(--shadow); }
.fig-wrap > svg { min-width: 30rem; }

/* ============ 报文注释器 ============ */
.wire { margin: 1.2rem 0; }
.wire-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0;
             border: 1px solid var(--line); border-radius: var(--radius);
             overflow: hidden; box-shadow: var(--shadow); }
.wire-grid > * + * { border-left: 1px solid var(--line); }
.wire-code { background: #0F172A; }
.wire pre { margin: 0; padding: .9rem 1rem; color: #DBE4F0; overflow-x: auto;
            font-family: var(--mono); font-size: 13.5px; line-height: 1.85; }
.wire .cap { font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
             text-transform: uppercase; color: #7FB0FF; padding: .65rem 1rem .1rem; margin: 0; }
.wire .f { color: #8FC1FF; cursor: pointer; padding: 0 3px;
           border-bottom: 1px dotted rgba(143,193,255,.5); }
.wire .f:hover { background: rgba(143,193,255,.16); }
.wire .f.on { background: #8FC1FF; color: #0F172A; border-bottom-color: transparent; }
.wire .f:focus-visible { outline: 2px solid #8FC1FF; outline-offset: 1px; }
.wire-note { padding: 1rem 1.1rem; background: var(--card); min-height: 8rem; }
.wire-note h4 { margin: 0 0 .4rem; font-family: var(--mono); font-size: 13.5px; color: var(--blue-d); }
.wire-note p, .wire-note div { margin: .3rem 0; font-size: 14.5px; line-height: 1.7; }
.wire-all { margin: .9rem 0 0; }
.wire-all dt { font-family: var(--mono); font-weight: 600; color: var(--blue-d);
               margin-top: .8rem; font-size: 14.5px; }
.wire-all dd { margin: .15rem 0 0; font-size: 14.5px; }
.js-on .wire-all { display: none; }
.js-on .wire-live { display: block; }
.wire-live { display: none; }

/* ============ 门户组件（根总纲 / PPT 总览 / 模块 README / _prep）============ */
.sub { font-size: 13.5px; color: var(--ink-500); line-height: 1.75; max-width: 74ch; margin: .3rem 0 1.2rem; }
.tagline { font-size: 15px; color: var(--ink-500); }
.ok   { color: var(--ok); font-weight: 600; }

.future, .note, .hint, .principle {
  background: var(--warn-bg); border: 1px solid var(--warn-ln); border-radius: var(--radius);
  padding: .8rem 1.05rem; margin: 1.1rem 0; font-size: 14px;
}
.warn { background: var(--warn-bg); }
h2 .hint, h2 .sub, h2 .note { display: inline; background: none; border: 0; padding: 0;
  margin: 0 0 0 .7rem; font-size: 13.5px; font-weight: 400; color: var(--ink-400); }

.chip { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .03em;
        padding: .05rem .5rem; border-radius: 999px; white-space: nowrap;
        color: var(--ok); border: 1px solid var(--ok-ln); background: var(--ok-bg); }
.chip.hot { color: var(--red); border-color: var(--red-ln); background: var(--red-bg); }

/* 模块 README */
div.card { display: block; padding: .9rem 1.1rem; line-height: 1.85; }
div.card:hover { transform: none; box-shadow: var(--shadow); border-color: var(--line); }
.mod { font-size: 16px; font-weight: 700; color: var(--ink-900); }
.pg { font-size: 13px; color: var(--ink-400); white-space: nowrap; }
td.layer { font-weight: 700; font-size: 15px; color: var(--blue-d);
           background: var(--blue-bg); vertical-align: middle; white-space: nowrap; }
td.mod a { font-weight: 600; }
/* 页数徽标做成链接后仍走注记的轻量样式（模块名去网页版、页数去讲义） */
td.mod a.pg { font-weight: 400; color: var(--ink-400); }
td.mod a.pg:hover { color: var(--blue-d); }
td.day { font-family: var(--mono); font-weight: 700; color: var(--blue-d);
         background: var(--blue-bg); text-align: center; white-space: nowrap; }
.navbar { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1.1rem 0; }
.navbar .chip { background: var(--card); color: var(--ink-700); border: 1px solid var(--line);
                text-decoration: none; padding: .22rem .7rem; font-size: 13.5px; }
.navbar .chip:hover { background: var(--blue-bg); border-color: var(--blue-ln); color: var(--blue-d); }
h2[id^="sec-"] { scroll-margin-top: var(--anchor-top); }
.plumb, .foot { font-size: 14px; color: var(--ink-400); line-height: 1.75;
                border-top: 1px solid var(--line); padding-top: .9rem; margin-top: 2.2rem; }

/* 关系网 · 分层链接图（build.py 从 MANIFEST 串联出边生成的 SVG） */
.kgraph-wrap { margin: .4rem 0 1rem; }
.kgraph-scroll { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line);
                 border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
svg.kgraph { display: block; width: 100%; min-width: 720px; height: auto; }
.kgraph .kbands { transition: opacity .35s ease; }
.kgraph .kband { fill: var(--hue-bg, var(--line-2)); stroke: none; }
.kgraph .klabel { fill: var(--ink-500); font-weight: 700; }
/* 边：画在层带之上、节点之下——连续可见的一张网；按上端所在层着色（hue-N 类带令牌，
   深浅色自动跟随），一层一束流线；默认半透，悬停时只亮一支 */
.kgraph .kedge { fill: none; stroke: var(--hue, var(--ink-400)); stroke-width: 1.3; opacity: .32;
                 stroke-linecap: round; transition: opacity .12s, stroke .12s, stroke-width .12s; }
/* 节点胶囊 */
.kgraph .knode { cursor: pointer; transition: opacity .3s ease; }
.kgraph .knode rect.kbox { fill: var(--card); stroke: var(--line); transition: stroke .12s; }
.kgraph .knode:hover rect.kbox,
.kgraph .knode:focus-visible rect.kbox { stroke: var(--hue, var(--blue-ln)); }
.kgraph .knode rect.kchip { fill: var(--hue, var(--blue)); }
.kgraph .knode text.knm { fill: var(--ink-900); font-weight: 700; }
.kgraph .knode text.kmono { fill: #fff; font-weight: 700; }
.kgraph .knode:focus-visible { outline: none; }
/* 聚焦一个模块（.focus 在 svg 上）：层带压暗、无关模块与边淡出，中心网络高亮 */
.kgraph.focus .kbands { opacity: .12; }
.kgraph.focus .knode.faded { opacity: 0; pointer-events: none; }
.kgraph.focus .knode.on rect.kbox { stroke: var(--blue-ln); }
.kgraph.focus .knode.self rect.kbox { stroke: var(--blue); stroke-width: 2; }
.kgraph.focus .kedge.off { opacity: 0; }
.kgraph.focus .kedge.on { opacity: .92; stroke: var(--blue); stroke-width: 2.2; }
/* 返回全景按钮（JS 注入，无 JS 不出现） */
.kg-back { display: inline-flex; align-items: center; gap: .3rem; margin: 0 0 .5rem;
           font-size: 13px; font-family: var(--sans); cursor: pointer;
           color: var(--ink-700); background: var(--card);
           border: 1px solid var(--line); border-radius: 999px; padding: .28rem .8rem;
           box-shadow: var(--shadow); transition: border-color .15s, color .15s; }
.kg-back:hover { border-color: var(--blue-ln); color: var(--blue-d); }

/* 学习模式切换（分段按钮） */
.kg-modes { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: .2rem 0 .7rem; }
.kg-mode { font-size: 13px; font-family: var(--sans); cursor: pointer; color: var(--ink-500);
           background: var(--card); border: 1px solid var(--line); border-radius: 999px;
           padding: .3rem .95rem; transition: all .15s; }
.kg-mode:hover { border-color: var(--blue-ln); color: var(--blue-d); }
.kg-mode.on { color: #fff; background: var(--blue); border-color: var(--blue); font-weight: 600; }
.kg-modenote { font-size: 12px; color: var(--ink-400); }
/* 联想路径面包屑（关联学习聚焦时出现，标出你走了几步、可点回退，最多 MAXDEPTH 步） */
.kg-crumb { display: none; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0 0 .55rem; }
.kg-crumb-lbl { font-size: 12px; color: var(--ink-400); }
.kg-crumb-sep { font-size: 13px; color: var(--ink-400); }
.kg-crumb-b { font-size: 12.5px; font-family: var(--sans); cursor: pointer; color: var(--ink-700);
              background: var(--card); border: 1px solid var(--line); border-radius: 999px;
              padding: .16rem .62rem; transition: border-color .15s, color .15s; }
.kg-crumb-b:hover { border-color: var(--blue-ln); color: var(--blue-d); }
.kg-crumb-b.cur { color: #fff; background: var(--blue); border-color: var(--blue); font-weight: 600; }
.kg-crumb-depth { font-size: 12px; color: var(--ink-400); margin-left: .25rem; }
.kg-crumb.nudge { animation: kgshake .4s; }
@keyframes kgshake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .kg-crumb.nudge { animation: none; } }
/* 关键词联想：点模块后进入，隐藏模块图、淡化层带，只留关键词云 */
.kgraph.kwon .knode, .kgraph.kwon .kedge { display: none; }
.kgraph.kwon .kbands { opacity: .1; }
.kwnode { cursor: pointer; }
.kwnode rect.kbox { fill: var(--card); stroke: var(--hue, var(--line)); transition: stroke-width .12s; }
.kwnode text.kwt { fill: var(--ink-900); font-weight: 600; }
.kwnode:hover rect.kbox { stroke-width: 2; }
.kw-center rect.kbox { fill: var(--blue-bg); stroke: var(--blue); stroke-width: 2; }
.kw-center text.kwt { fill: var(--blue-d); font-weight: 700; }
.kwedge { fill: none; stroke: var(--blue); stroke-width: 1.6; opacity: .5; stroke-linecap: round; }
/* 「读这一章」链接（关键词聚焦时出现） */
.kg-read { display: none; align-items: center; gap: .3rem; margin: 0 0 .55rem; text-decoration: none;
           font-size: 13px; color: var(--blue-d); background: var(--blue-bg);
           border: 1px solid var(--blue-ln); border-radius: 999px; padding: .28rem .85rem; }
.kg-read:hover { background: var(--blue); color: #fff; }
/* 单点学习：不显连线（也就没有聚焦态） */
.kgraph.kmode-solo .kedge { display: none; }
/* 连线关键词标签（关联学习聚焦时出现，halo 描边保证压在连线上也读得清） */
.kgraph .kterm { font-family: var(--sans); font-size: 11.5px; font-weight: 600;
                 fill: var(--blue-d); stroke: var(--bg); stroke-width: 3px;
                 paint-order: stroke; pointer-events: none; }
.kgraph-hint { font-size: 12.5px; color: var(--ink-400); margin: .35rem 0 0; }
details.kgraph-alt { margin: .5rem 0 0; }
details.kgraph-alt > summary { cursor: pointer; font-size: 13px; color: var(--ink-500);
                               list-style: none; padding: .2rem 0; }
details.kgraph-alt > summary::-webkit-details-marker { display: none; }
details.kgraph-alt > summary::before { content: "▸ "; color: var(--blue); }
details.kgraph-alt[open] > summary::before { content: "▾ "; }

.net-lead { font-size: 13.5px; color: var(--ink-500); margin: .5rem 0 .8rem; }
table.net td, table.fresh td { font-size: 13.5px; line-height: 1.65; }
table.net td:first-child, table.fresh td:first-child { white-space: nowrap; }
table.net a { border-bottom: 1px solid transparent; }
table.net a:hover { border-bottom-color: var(--blue); text-decoration: none; }
table.net .none { color: var(--ink-400); }
table.fresh tr.over td { background: var(--red-bg); }
table.net .c-all { display: none; }
@media (max-width: 780px) {
  table.net .c-out, table.net .c-in { display: none; }
  table.net .c-all { display: table-cell; }
}

/* 页脚 / 标注 */
footer { border-top: 1px solid var(--line); margin-top: 2.5rem; padding: 1.2rem 0 2.4rem;
         font-size: 14px; color: var(--ink-400); line-height: 1.75; }
.updated { font-size: 14px; color: var(--ink-400); margin-top: .5rem; }
.updated b { font-family: var(--mono); color: var(--ink-500); font-weight: 400; }
.baseline { font-size: 14px; color: var(--ink-400); border-left: 2px solid var(--line);
            padding-left: .8rem; margin: .5rem 0 .9rem; }
.baseline b { font-family: var(--mono); font-weight: 400; color: var(--ink-500); }
.added { display: inline-block; font-family: var(--mono); font-size: 11.5px;
         white-space: nowrap; vertical-align: 2px; color: var(--warn);
         background: var(--warn-bg); border: 1px solid var(--warn-ln);
         padding: 0 .4rem; border-radius: 6px; margin-left: .5rem; font-weight: 400; }

/* ============ 全库问答库（qa/index.html）============
   跨册聚合，纸面做不到的那一类：各册各印各的问答汇到一处，按一句话搜。
   本页只登记题目与去处——答案留在原处，不做副本。
   无 JavaScript 时筛选条整块隐藏，下面的分组长列表本身就完整可读。 */
.qa-tools { display: none; position: sticky; top: var(--topbar-h, 0px); z-index: 5;
            background: var(--bg); padding: .8rem 0 .6rem; margin-bottom: .4rem;
            border-bottom: 1px solid var(--line); }
.js-on .qa-tools { display: block; }
.qa-tools input { width: 100%; font: inherit; font-size: 15px; color: var(--ink-900);
                  background: var(--card); border: 1px solid var(--line);
                  border-radius: var(--radius); padding: .55rem .8rem; }
.qa-tools input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.qa-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; }
.qa-chips .chip { cursor: pointer; font: inherit; font-size: 12px; font-weight: 600;
                  background: var(--card); color: var(--ink-500);
                  border: 1px solid var(--line); }
.qa-chips .chip.on { background: var(--blue-bg); border-color: var(--blue-ln); color: var(--blue-d); }
.qa-count { font-size: 13px; color: var(--ink-400); margin: .5rem 0 0; }
.qa-group > h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem;
                 margin: 1.8rem 0 .3rem; font-size: 16px; }
.qa-group > h3 .n { font-size: 12.5px; font-weight: 400; color: var(--ink-400); }
.qa-dim { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
          font-size: 12.5px; font-weight: 600; letter-spacing: .03em; color: var(--ink-500);
          margin: 1.1rem 0 .35rem; }
.qa-dim .n { font-weight: 400; color: var(--ink-400); }
.qrow { display: block; padding: .5rem .7rem; border-radius: 8px; font-size: 14.5px;
        color: var(--ink-700); line-height: 1.6; text-decoration: none; }
.qrow:hover { background: var(--blue-bg); color: var(--ink-900); text-decoration: none; }
.qrow .qn { display: inline-block; min-width: 2.6rem; margin-right: .5rem;
            font-family: var(--mono); font-size: 11.5px; font-weight: 600;
            color: var(--ink-400); vertical-align: 1px; }
.qrow .must { color: var(--warn); margin-right: .25rem; }
/* 术语表复用 .qrow：词条用 .qn 那一格（比问答的编号宽，容得下中文词），
   「容易认成什么」用 .n 压下去——不压的话它和释义一样重，一行里读不出主次。 */
.glossary .qrow .qn { min-width: 8.4rem; font-family: inherit; font-size: 14px;
                      font-weight: 700; color: var(--ink-900); }
.qrow .n { color: var(--ink-400); font-size: 13px; }
.qrow .fresh, .qrow .added { margin-left: .45rem; }
.qrow .fresh { font-size: 11.5px; color: var(--warn); white-space: nowrap; }
.qa-hide { display: none; }

/* ============ 模块页交互件（选型筛选器 / 显存计算器）============
   纪律（web-rules §九）：交互必须帮助定位/比较/理解/追证/决策之一。
   无 JavaScript 时整块隐藏——静态兜底（决策树表 / 心算公式）留在正文里。 */
.tool { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
        box-shadow: var(--shadow); padding: 1rem 1.2rem; margin: 1.2rem 0; display: none; }
.js-on .tool { display: block; }
.tool h4 { margin: 0 0 .2rem; }
.tool .controls { display: flex; flex-wrap: wrap; gap: .7rem 1.3rem; margin: .7rem 0 .9rem; }
.tool .ctl { display: flex; flex-direction: column; gap: .25rem;
             font-size: 13px; color: var(--ink-500); }
.tool select, .tool input[type="number"] {
  font: inherit; font-size: 14px; color: var(--ink-900); background: var(--card);
  border: 1px solid var(--line); border-radius: 8px; padding: .3rem .55rem; min-width: 9.5rem; }
.tool .ctl.chk { flex-direction: row; align-items: center; gap: .45rem; align-self: flex-end;
                 padding-bottom: .35rem; }
.tool .note { font-size: 12.5px; color: var(--ink-400); margin: .5rem 0 0; }
.hitcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr));
            gap: .7rem; margin-top: .5rem; }
.hitcard { border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .85rem;
           min-width: 0; }
.hitcard b { font-size: 14.5px; color: var(--ink-900); }
.hitcard .tagline2 { font-size: 12px; color: var(--blue-d); margin: .1rem 0 .25rem; }
.hitcard p { font-size: 13px; color: var(--ink-500); margin: 0; line-height: 1.7; }
.kpis { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .6rem; }
.kpi { background: var(--blue-bg); border: 1px solid var(--blue-ln); border-radius: var(--radius);
       padding: .5rem .9rem; font-size: 12.5px; color: var(--ink-500); min-width: 8rem; }
.kpi b { display: block; font-size: 17px; color: var(--blue-d); font-family: var(--mono);
         margin-top: .1rem; }
.kpi.warn2 { background: var(--warn-bg); border-color: var(--warn-ln); }
.kpi.warn2 b { color: var(--warn); }

/* ============ 响应式 ============ */
@media (max-width: 960px) {
  .cols { grid-template-columns: 1fr; gap: 1rem; }
  /* 窄屏目录做成吸顶折叠：此前是页顶一个静态平铺列表，往下滚就再也回不去，
     手机上翻一册两万字全靠拇指划——现在任何位置都能拉出目录跳章。 */
  /* 吸在顶栏下沿而不是视口顶——顶栏本身也 sticky，top:0 会让目录滑到它背后。
     顶栏在窄屏会折成两行，高度不定，故由 site.js 实测后写进 --topbar-h。 */
  .toc { position: sticky; top: var(--topbar-h, 0px); z-index: 6; margin-bottom: .6rem; }
  .toc ol { display: flex; flex-wrap: wrap; gap: .15rem .25rem; }
  /* 折叠开关由 site.js 挂在 data- 属性上（不新增类名，静态扫描无需登记）。 */
  .toc[data-fold="shut"] ol, .toc[data-fold="shut"] .pf { display: none; }
  .toc[data-fold] > h4 { cursor: pointer; margin: 0; padding-right: 1.2rem; position: relative; }
  .toc[data-fold] > h4::after { content: "▴"; position: absolute; right: .1rem; top: 0;
                                color: var(--ink-400); font-size: 12px; }
  .toc[data-fold="shut"] > h4::after { content: "▾"; }
  .wire-grid { grid-template-columns: 1fr; }
  .wire-grid > * + * { border-left: 0; border-top: 1px solid var(--line); }
  .anchor { opacity: 1; }
}

/* ============ 模块页：本页查找 + 前后册导航 ============ */
/* 本页查找由 site.js 注入进目录（各册标记不用各改一遍）；无 JavaScript 时不出现，
   目录本身仍是完整的阅读路径。单册最长两万余字，靠滚找太慢。 */
.pf { display: none; margin: .5rem 0 0; }
.js-on .pf { display: block; }
.pf input { width: 100%; font: inherit; font-size: 13px; color: var(--ink-900);
            background: var(--bg); border: 1px solid var(--line);
            border-radius: 8px; padding: .3rem .55rem; }
.pf input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.pf ol { margin: .4rem 0 0; padding: 0; list-style: none; display: block; }
.pf li { margin: .1rem 0; }
.pf a { display: block; font-size: 12.5px; line-height: 1.5; color: var(--ink-500);
        padding: .2rem .35rem; border-radius: 6px; }
.pf a:hover { background: var(--blue-bg); color: var(--blue-d); text-decoration: none; }
.pf .k { display: block; font-size: 11px; color: var(--ink-400); }
.pf .miss { font-size: 12.5px; color: var(--ink-400); padding: .2rem .35rem; }

.prevnext { display: flex; flex-wrap: wrap; gap: .6rem; margin: .9rem 0 0; }
.prevnext a { flex: 1 1 14rem; min-width: 0; display: block; padding: .6rem .85rem;
              background: var(--card); border: 1px solid var(--line);
              border-radius: var(--radius); text-decoration: none; color: inherit; }
.prevnext a:hover { border-color: var(--blue-ln); text-decoration: none; }
.prevnext .k { display: block; font-size: 11.5px; color: var(--ink-400); }
.prevnext b { font-size: 14px; color: var(--ink-900); }
.prevnext .nx { text-align: right; }
@media (max-width: 680px) {
  body { font-size: 14px; }
  .faces { grid-template-columns: 1fr; }
  th { white-space: normal; }
}

/* ============ 打印 ============ */
/* 打印上下文不执行动画且 fill-mode:both 会停在起始帧（2026-07-20 事故）；
   本版已无载入动画，仍保留复位以防后续有人加回。 */
@media print {
  * { animation: none !important; opacity: 1 !important; transform: none !important;
      box-shadow: none !important; }
  body { background: #fff; }
  .search, .toc, .nojs-note { display: none; }
  a { text-decoration: underline; }
  .wire pre { background: var(--line-2); color: var(--ink-900); }
  .wire .cap { color: var(--blue-d); }
  .wire .f { color: var(--ink-900); }
}

/* ============ 层级色相（导航站的视觉节奏来源；七层七色，登记于 library-rules 令牌表） ============ */
.hue-0 { --hue: #7C3AED; --hue-bg: #F3EFFE; }   /* 解决方案层 · 紫 */
.hue-1 { --hue: #2563EB; --hue-bg: #EFF6FF; }   /* 应用模式层 · 蓝 */
.hue-2 { --hue: #0891B2; --hue-bg: #ECFAFD; }   /* 协议层 · 青 */
.hue-3 { --hue: #EA580C; --hue-bg: #FFF3EB; }   /* 工程保障层 · 橙 */
.hue-4 { --hue: #16A34A; --hue-bg: #EFFBF2; }   /* 基础层 · 绿 */
.hue-5 { --hue: #6366F1; --hue-bg: #F0F1FE; }   /* 算力底座层 · 靛 */
.hue-6 { --hue: #D97706; --hue-bg: #FEF7E8; }   /* 数据底座层 · 琥珀 */

.layer > h3::before { background: var(--hue, var(--blue)); }
.layer .card:hover { border-color: var(--hue, var(--blue-ln)); }

/* 模块字标块（favicon 位） */
.chead { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.tile { flex: none; width: 32px; height: 32px; border-radius: 8px; text-align: center;
        font-family: var(--mono); font-weight: 700; font-size: 12.5px; line-height: 32px;
        color: #fff; background: var(--hue, var(--blue)); letter-spacing: .02em; }
.cname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
         font-size: 14.5px; font-weight: 700; color: var(--ink-900); }

/* 首页统计条（JS 增强；无 JS 时容器为空不占位） */
.stats { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
.stats:empty { display: none; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 999px;
        padding: .12rem .75rem; font-size: 13px; color: var(--ink-500); }
.stat b { color: var(--ink-900); font-size: 14px; margin-right: .15rem; }

/* 页头轻渐变（所有页共用，给白顶一点纵深）——起始色也走令牌，
   否则深色下页头是一条亮蓝带（与表头同一类漏网） */
.top { background: linear-gradient(180deg, var(--blue-bg) 0%, var(--card) 78%); }

/* ============ 全站顶栏（唯一导航模型，2026-07-21 定版）============
   每个页面同一条顶栏：品牌回首页 + 六个常用入口，当前页高亮。
   此前三套导航并存（网页版侧栏 / 其它页孤零零的返回链接 / 首页无导航），
   窄屏侧栏塌成一堆药丸还和正文重复——用户逐页指出后统一成这一条。 */
.topbar { position: sticky; top: 0; z-index: 50; background: var(--card);
          border-bottom: 1px solid var(--line); }
.topbar .tb { max-width: var(--maxw); margin: 0 auto; padding: .4rem 1.2rem;
              display: flex; align-items: center; gap: .15rem; flex-wrap: wrap; }
.topbar .brand { font-weight: 700; font-size: 15.5px; color: var(--ink-900);
                 text-decoration: none; margin-right: .7rem; white-space: nowrap; }
.topbar .brand:hover { color: var(--blue-d); text-decoration: none; }
.topbar a.ti { padding: .22rem .6rem; border-radius: 8px; font-size: 14px;
               color: var(--ink-500); text-decoration: none; white-space: nowrap; }
.topbar a.ti:hover { background: var(--line-2); color: var(--ink-900); text-decoration: none; }
.topbar a.ti.cur { background: var(--blue-bg); color: var(--blue-d); font-weight: 600; }
@media print { .topbar { display: none; } }

/* 顶栏右端的构建号：样式更新是否真的到达用户浏览器，肉眼可判——
   2026-07-21 三个旧标签页渲染两套 CSS，靠猜排查了两轮，此后不猜。 */
.topbar .ver { margin-left: auto; font-family: var(--mono); font-size: 11px;
               color: var(--ink-400); opacity: .65; white-space: nowrap; }

/* 七层色相 · 深色取值（必须排在浅色定义之后：同优先级，后者赢）。
   暗底上原来的紫 #7C3AED、靛 #6366F1 会糊进背景，整体提亮一档。 */
@media (prefers-color-scheme: dark) {
  .hue-0 { --hue: #A78BFA; --hue-bg: #221B38; }
  .hue-1 { --hue: #60A5FA; --hue-bg: #16243C; }
  .hue-2 { --hue: #22D3EE; --hue-bg: #0E2A31; }
  .hue-3 { --hue: #FB923C; --hue-bg: #2B1D11; }
  .hue-4 { --hue: #4ADE80; --hue-bg: #10241A; }
  .hue-5 { --hue: #818CF8; --hue-bg: #1B1E3A; }
  .hue-6 { --hue: #FBBF24; --hue-bg: #2A2113; }
}