/* TPI 面板 · 样式
   设计语言沿用 STREAK（MZICH-work/streak/static/app.css）：四层底色（画布 → 卡面 → 悬停 → 选中）、
   赚绿亏红、等宽数字、卡片头部小号字距标题。⛔ 这里不复制 STREAK 的任何交易组件。
   ⚠ CSP 是 style-src 'self'（契约 §9.5）⇒ HTML 里⛔ 不能有 style="" 属性、⛔ 不能有 <style>；
     需要按数值变化的宽度/颜色一律用 class 分档，或由 JS 走 CSSOM（el.style.x = …，CSP 不拦）。 */

/* ── 调色板：只允许存在这一处（STREAK 09-18 的教训：两套同名变量，后面那套会让前面整套失效） ── */
:root {
  --ground: #1e2733; --surface: #26313f; --surface2: #2e3a49; --surface3: #374453;
  --ink: #eaf0f7; --muted: #a8b6c4; --faint: #8d9aa7;
  --rule: #3c4857; --rule2: #4b586a;
  --primary: #8fb8e6; --primarySoft: #2b3f58; --primaryInk: #10161d;
  --up: #57cf9b; --upSoft: #22423a; --down: #ef8874; --downSoft: #47312d;
  --warn: #ebc074; --warnSoft: #443827; --idle: #93a1af;
  --tagInk: #0f1419; --accent2: #a58bff;
  /* 图表系列色（JS 从这里读给 ECharts；提示框色块用同一组变量） */
  --c0: #8fb8e6; --c1: #57cf9b; --c2: #ebc074; --c3: #ef8874; --c4: #a58bff; --c5: #6fd3e0; --c6: #d79bd0; --c7: #c3ad74; --c8: #93a1af; --c9: #f2a65a; --c10: #9ed36a; --c11: #c9d3de;
  --h-p1: rgba(87,207,155,.14); --h-p2: rgba(87,207,155,.26); --h-p3: rgba(87,207,155,.40); --h-p4: rgba(87,207,155,.56);
  --h-n1: rgba(239,136,116,.14); --h-n2: rgba(239,136,116,.26); --h-n3: rgba(239,136,116,.40); --h-n4: rgba(239,136,116,.56);
  color-scheme: dark;
}
:root[data-theme="light"] {
  --ground: #dde3ea; --surface: #eceff4; --surface2: #e3e8ef; --surface3: #d3dae3;
  --ink: #15202a; --muted: #4c5a6b; --faint: #596572;
  --rule: #cdd5de; --rule2: #b4bfcb;
  --primary: #245f9c; --primarySoft: #d6e5f5; --primaryInk: #ffffff;
  --up: #0e714c; --upSoft: #d3eadf; --down: #b53a27; --downSoft: #f2dcd7;
  --warn: #865b10; --warnSoft: #efe4cb; --idle: #6f7d8b;
  --tagInk: #ffffff; --accent2: #5b3fc4;
  --c0: #245f9c; --c1: #0e714c; --c2: #8a6212; --c3: #b53a27; --c4: #5b3fc4; --c5: #11798a; --c6: #9a3d8c; --c7: #6d5a1f; --c8: #5f6b78; --c9: #b4500f; --c10: #4e7d1e; --c11: #2b3540;
  --h-p1: rgba(14,113,76,.10); --h-p2: rgba(14,113,76,.20); --h-p3: rgba(14,113,76,.32); --h-p4: rgba(14,113,76,.46);
  --h-n1: rgba(181,58,39,.10); --h-n2: rgba(181,58,39,.20); --h-n3: rgba(181,58,39,.32); --h-n4: rgba(181,58,39,.46);
  color-scheme: light;
}

/* ── 字体：只装拉丁字母与数字的子集（Inter 48 KB、JetBrains Mono 31 KB），中文走系统字体 ── */
@font-face { font-family: "Inter var"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "JB Mono var"; font-style: normal; font-weight: 100 800; font-display: swap; src: url(/fonts/jetbrains-mono-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215; }

* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--ground); color: var(--ink);
  font-family: "Inter var", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  font-size: 13px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  padding-inline: max(14px, env(safe-area-inset-left)) max(14px, env(safe-area-inset-right));
}
.mono, .n, td.n, th.n { font-family: "JB Mono var", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--primary); }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
[hidden] { display: none !important; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--muted); } .na { color: var(--faint); }
.muted { color: var(--muted); } .faint { color: var(--faint); } .warn { color: var(--warn); }
small, .small { font-size: 11px; }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── 启动 / 登录 ── */
.boot { min-height: 60vh; display: grid; place-items: center; color: var(--faint); }
.login { min-height: 100vh; display: grid; place-items: center; padding-block: 24px; }
.login-box { display: grid; gap: 12px; padding: 24px; width: min(380px, 100%); }
.login-box .brand { font-size: 22px; margin-bottom: 2px; }
.login-box .brand small { font-size: 12px; color: var(--muted); letter-spacing: .02em; margin-left: 8px; font-weight: 500; }
.reg { border-top: 1px solid var(--rule); padding-top: 10px; }
.reg summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.reg[open] summary { margin-bottom: 8px; }
.reg .stack { display: grid; gap: 8px; }

/* ── 顶栏（桌面 sticky；窄屏不 sticky，导航改到底部固定条） ── */
.topbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; padding-block: 10px 8px; border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; background: var(--ground); z-index: 20; }
.brand { font-weight: 700; font-size: 16px; letter-spacing: 0.12em; white-space: nowrap; display: flex; align-items: center; gap: 2px; }
.brand small { font-weight: 600; font-size: 11px; color: var(--warn); margin-left: 8px; letter-spacing: 0; }
.live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--up); margin-right: 8px; box-shadow: 0 0 0 3px var(--upSoft); flex: none; }
.live.off { background: var(--down); box-shadow: 0 0 0 3px var(--downSoft); }
.live.poll { background: var(--warn); box-shadow: 0 0 0 3px var(--warnSoft); }
.tabs { display: flex; gap: 2px; margin-right: auto; min-width: 0; }
.tabs button { background: none; border: 0; padding: 6px 12px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; border-radius: 4px 4px 0 0; white-space: nowrap; }
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--primary); font-weight: 600; background: var(--surface); }
.tabs button .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--warn); margin-left: 4px; vertical-align: 2px; }
.topright { display: flex; align-items: center; gap: 8px; }
.scopetag { font-size: 11.5px; color: var(--muted); white-space: nowrap; border: 1px solid var(--rule2); border-radius: 4px; padding: 1px 8px; letter-spacing: .02em; }
.clock { font-size: 12px; color: var(--muted); white-space: nowrap; }
.iconbtn { background: none; border: 1px solid var(--rule2); border-radius: 4px; padding: 2px 9px; cursor: pointer; color: var(--muted); font-size: 12px; }
.iconbtn:hover { color: var(--ink); background: var(--surface2); }

/* 顶栏状态条：两条基线（标签 11px、数值 17px），换行铺满，⛔ 不横滚（STREAK 09-19 用户原话：「必须完全避免」） */
.strip { display: flex; flex-wrap: wrap; gap: 6px 0; flex: 1 1 100%; min-width: 0; }
.strip .kv { display: grid; grid-template-rows: 12px 19px; padding: 0 14px; border-left: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); min-width: 0; }
.strip .kv:first-child { border-left: 0; padding-left: 0; }
.strip .k { font-size: 10px; line-height: 12px; color: var(--faint); letter-spacing: .04em; white-space: nowrap; }
.strip .v { font-size: 15px; line-height: 19px; font-weight: 600; white-space: nowrap; }
.strip .v.big { font-size: 17px; }

/* ── 横幅：演示 / 过期 / 推送断线 / warnings（⛔ 不许吞掉 warnings，契约 §0.1） ── */
.banners { display: grid; gap: 6px; margin-top: 10px; }
.banner { font-size: 12px; padding: 6px 10px; border-left: 3px solid currentColor; background: var(--surface); border-radius: 0 4px 4px 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.banner b { font-weight: 700; }
.banner .code { font-family: "JB Mono var", ui-monospace, monospace; font-size: 11px; color: var(--faint); }
.banner.info { color: var(--primary); } .banner.warn { color: var(--warn); } .banner.bad { color: var(--down); } .banner.demo { color: var(--accent2); }
.banner span.t { color: var(--ink); }

/* ── 页面骨架 ── */
main { padding-block: 12px 40px; }
.view { display: grid; gap: 12px; min-width: 0; }
.row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); min-width: 0; }
.row.r2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.scope { font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.scope b { color: var(--ink); font-weight: 600; }
h3.sec { font-size: 13px; letter-spacing: .06em; color: var(--primary); margin: 10px 0 0; font-weight: 600; }

.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; min-width: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.035); }
:root[data-theme="light"] .panel { box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 1px 2px rgba(16,24,32,.04); }
.phead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 9px 12px; background: linear-gradient(var(--surface2), var(--surface)); border-bottom: 1px solid var(--rule); border-radius: 6px 6px 0 0; }
.phead h2 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--ink); }
.phead .meta { font-size: 11px; color: var(--faint); }
.phead .right { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pbody { padding: 10px 12px; min-width: 0; }
.pbody.flush { padding: 0; }
.note { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.note b { color: var(--ink); font-weight: 600; }
.empty { color: var(--faint); font-size: 12px; padding: 14px 12px; }
.loading { color: var(--faint); padding: 18px 2px; }
.err { color: var(--down); padding: 12px; font-size: 12px; }

/* ── KPI ── */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 14px; }
.kpis.wide { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.kv2 { display: grid; gap: 1px; min-width: 0; }
.kv2 .k { font-size: 10.5px; color: var(--faint); letter-spacing: .04em; }
.kv2 .v { font-size: 17px; font-weight: 600; font-family: "JB Mono var", ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kv2 .v.txt { font-family: inherit; font-size: 14px; }
.kv2 .s { font-size: 11px; color: var(--muted); font-family: "JB Mono var", ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.kv2.hero .v { font-size: 22px; }

/* 键值表（闸门、本金、对账…） */
.kvt { width: 100%; border-collapse: collapse; }
.kvt th, .kvt td { padding: 5px 0; border-top: 1px solid color-mix(in srgb, var(--rule) 65%, transparent); vertical-align: baseline; font-size: 12px; }
.kvt tr:first-child th, .kvt tr:first-child td { border-top: 0; }
.kvt th { text-align: left; color: var(--muted); font-weight: 500; padding-right: 12px; width: 46%; }
.kvt td { text-align: right; font-family: "JB Mono var", ui-monospace, Consolas, monospace; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kvt td.txt { font-family: inherit; }

/* ── 标签 ── */
.pill { display: inline-block; font-size: 11px; line-height: 17px; padding: 0 7px; border-radius: 4px; border: 1px solid color-mix(in srgb, currentColor 38%, transparent); background: var(--surface); font-weight: 600; white-space: nowrap; }
.pill.on { color: var(--up); } .pill.off { color: var(--faint); } .pill.bad { color: var(--down); } .pill.warnp { color: var(--warn); } .pill.info { color: var(--primary); }
.pill.dot::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; }
.pill.big { font-size: 14px; line-height: 24px; padding: 0 12px; }
.tag { font-size: 10px; color: var(--muted); border: 1px solid var(--rule); padding: 0 5px; border-radius: 4px; white-space: nowrap; }
.side-U { color: var(--up); } .side-D { color: var(--down); }

/* ── 控件 ── */
.btn { border: 1px solid var(--rule2); background: var(--surface2); padding: 4px 11px; border-radius: 4px; cursor: pointer; font-size: 12px; color: var(--ink); transition: background 120ms ease, border-color 120ms ease; }
.btn:hover { background: var(--surface3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { color: var(--primary); border-color: var(--primary); }
.submit { border: 0; border-radius: 5px; padding: 11px; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--tagInk); width: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--up) 92%, #fff 8%), var(--up)); box-shadow: 0 1px 0 rgba(0,0,0,.25); }
.submit:disabled { background: var(--surface3); color: var(--muted); box-shadow: none; cursor: not-allowed; }
.lab { font-size: 11px; color: var(--muted); display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.lab span { color: var(--faint); }
.field { background: var(--surface2); border: 1px solid var(--rule); border-radius: 4px; padding: 6px 8px; width: 100%; min-width: 0; }
.field:focus { border-color: var(--primary); background: var(--surface); outline: none; }
select.field { padding: 5px 6px; }
.alert { font-size: 12px; padding: 6px 9px; border-left: 3px solid currentColor; background: var(--surface2); overflow-wrap: anywhere; }
.alert.block { color: var(--down); } .alert.info { color: var(--primary); } .alert.ok { color: var(--up); } .alert.warn { color: var(--warn); }
.subtabs { display: flex; gap: 4px; flex-wrap: wrap; }
.subtabs button { background: none; border: 1px solid var(--rule2); padding: 2px 12px; border-radius: 12px; cursor: pointer; color: var(--muted); font-size: 12px; }
.subtabs button[aria-pressed="true"] { color: var(--ink); border-color: var(--primary); background: var(--primarySoft); }
.filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 10px; align-items: end; }
.filters .f { display: grid; gap: 3px; min-width: 0; }
.filters .act { display: flex; gap: 6px; flex-wrap: wrap; }

/* ── 数据表（同 STREAK table.log） ── */
.tw { overflow-x: auto; min-width: 0; -webkit-overflow-scrolling: touch; }
table.tbl { width: 100%; border-collapse: collapse; }
table.tbl th, table.tbl td { padding: 6px 9px; text-align: left; white-space: nowrap; font-size: 12px; }
table.tbl th { font-size: 10.5px; letter-spacing: .03em; color: var(--faint); font-weight: 600; border-bottom: 1px solid var(--rule2); background: var(--surface); position: sticky; top: 0; z-index: 1; }
table.tbl td { border-top: 1px solid color-mix(in srgb, var(--rule) 65%, transparent); }
table.tbl td.n, table.tbl th.n { text-align: right; }
table.tbl td.wrap { white-space: normal; min-width: 180px; }
table.tbl td .sub { display: block; font-size: 10px; color: var(--faint); }
table.tbl tr.click { cursor: pointer; }
table.tbl tr.click:hover td { background: color-mix(in srgb, var(--primary) 6%, var(--surface2)); }
table.tbl tr.tot td { font-weight: 700; border-top: 1px solid var(--rule2); }
table.tbl tr.dim td { color: var(--faint); }
table.tbl th[title] { cursor: help; text-decoration: underline dotted color-mix(in srgb, var(--faint) 60%, transparent); text-underline-offset: 3px; }
.scope.pad { padding: 10px 12px 4px; }
.trunc { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.more { display: flex; gap: 10px; align-items: center; padding: 10px 12px; flex-wrap: wrap; }

/* 热力格（网格 / 价位带）：按数值分档上色，⛔ 不用 style="" */
td.h-p1 { background: var(--h-p1); } td.h-p2 { background: var(--h-p2); } td.h-p3 { background: var(--h-p3); } td.h-p4 { background: var(--h-p4); }
td.h-n1 { background: var(--h-n1); } td.h-n2 { background: var(--h-n2); } td.h-n3 { background: var(--h-n3); } td.h-n4 { background: var(--h-n4); }
td.h0 { color: var(--faint); }

/* 停机余量条：宽度由 JS 走 CSSOM 设（CSP 不拦 CSSOM） */
.bar { position: relative; height: 8px; background: var(--surface3); border-radius: 4px; overflow: hidden; margin-top: 6px; }
.bar > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--up); border-radius: 4px; }
.bar.warnb > i { background: var(--warn); } .bar.badb > i { background: var(--down); }

/* ── 图表 ── */
.chart { width: 100%; height: 320px; min-width: 0; }
.chart.sm { height: 220px; }
.chart.lg { height: 380px; }
.chartbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.tip { font-size: 12px; line-height: 1.5; }
.tip .tt { color: var(--muted); margin-bottom: 2px; }
.tip .tr { display: flex; gap: 10px; justify-content: space-between; }
.tip .tr .nm { color: var(--muted); }
.tip .sw { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }
.tip .sw.c0 { background: var(--c0); } .tip .sw.c1 { background: var(--c1); } .tip .sw.c2 { background: var(--c2); } .tip .sw.c3 { background: var(--c3); }
.tip .sw.c4 { background: var(--c4); } .tip .sw.c5 { background: var(--c5); } .tip .sw.c6 { background: var(--c6); } .tip .sw.c7 { background: var(--c7); }
.tip .sw.c8 { background: var(--c8); } .tip .sw.c9 { background: var(--c9); } .tip .sw.c10 { background: var(--c10); } .tip .sw.c11 { background: var(--c11); }

/* ── 抽屉（行详情） ── */
.drawer { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: flex-end; background: rgba(8, 12, 16, .45); }
.drawer .sheet { width: min(560px, 100%); height: 100%; overflow-y: auto; background: var(--surface); border-left: 1px solid var(--rule2); padding: 14px 16px 40px; }
.drawer .sheet h2 { font-size: 14px; margin: 0 0 4px; }
.drawer .sheet .id { font-size: 11px; color: var(--faint); word-break: break-all; margin-bottom: 10px; }
.drawer .close { float: right; }

/* ── 总文档 ── */
.docs { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; align-items: start; }
.toc { position: sticky; top: 120px; max-height: calc(100vh - 140px); overflow-y: auto; font-size: 12px; }
.toc a { display: block; padding: 3px 8px; color: var(--muted); text-decoration: none; border-left: 2px solid transparent; overflow-wrap: anywhere; }
.toc a:hover { color: var(--ink); border-left-color: var(--rule2); }
.toc a.l2 { padding-left: 16px; } .toc a.l3 { padding-left: 24px; font-size: 11px; } .toc a.l4, .toc a.l5, .toc a.l6 { padding-left: 32px; font-size: 11px; }
.searchbox { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.searchbox .field { flex: 1 1 220px; }
.hits { display: grid; gap: 2px; }
.hit { display: block; padding: 7px 10px; border-radius: 4px; text-decoration: none; color: var(--ink); border: 1px solid transparent; }
.hit:hover { background: var(--surface2); border-color: var(--rule); }
.hit .hh { font-size: 11px; color: var(--primary); }
.hit .hs { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
mark { background: var(--warnSoft); color: var(--ink); border-radius: 2px; padding: 0 1px; }
.md { font-size: 13.5px; line-height: 1.65; overflow-wrap: anywhere; min-width: 0; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { line-height: 1.3; margin: 1.3em 0 .5em; scroll-margin-top: 120px; }
.md h1 { font-size: 20px; } .md h2 { font-size: 17px; border-bottom: 1px solid var(--rule); padding-bottom: 4px; } .md h3 { font-size: 15px; } .md h4, .md h5, .md h6 { font-size: 13.5px; }
.md p, .md ul, .md ol, .md blockquote, .md pre { margin: .6em 0; }
.md ul, .md ol { padding-left: 1.4em; }
.md blockquote { border-left: 3px solid var(--rule2); padding: 2px 12px; color: var(--muted); background: var(--surface2); }
.md code { font-family: "JB Mono var", ui-monospace, Consolas, monospace; font-size: 12px; background: var(--surface2); border: 1px solid var(--rule); border-radius: 3px; padding: 0 4px; }
.md pre { background: var(--ground); border: 1px solid var(--rule); border-radius: 4px; padding: 10px 12px; overflow-x: auto; }
.md pre code { background: none; border: 0; padding: 0; white-space: pre; overflow-wrap: normal; }
.md hr { border: 0; border-top: 1px solid var(--rule); margin: 1.2em 0; }
.md .tblw { overflow-x: auto; margin: .8em 0; }
.md table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
.md th, .md td { border: 1px solid var(--rule); padding: 5px 8px; vertical-align: top; text-align: left; overflow-wrap: normal; word-break: normal; }
.md td:first-child, .md th:first-child { white-space: nowrap; }
.md td { min-width: 4em; }
.md th { background: var(--surface2); font-weight: 600; }
.md td.al-r, .md th.al-r { text-align: right; } .md td.al-c, .md th.al-c { text-align: center; }
.md tr:target td, .md .flash, .md tr.flash td { background: var(--warnSoft); transition: background 1.2s ease; }
.md a.ext::after { content: "↗"; font-size: 10px; margin-left: 2px; color: var(--faint); }

/* ── 提示 ── */
.toasts { position: fixed; right: 14px; top: 60px; display: grid; gap: 6px; z-index: 60; width: min(380px, calc(100vw - 28px)); }
.toast { background: var(--surface3); border: 1px solid var(--rule2); border-left: 3px solid var(--primary); padding: 8px 12px; font-size: 13px; border-radius: 4px; }
.toast.ok { border-left-color: var(--up); } .toast.warn { border-left-color: var(--warn); } .toast.error { border-left-color: var(--down); }

footer.foot { color: var(--faint); font-size: 11px; padding: 10px 0 24px; border-top: 1px solid var(--rule); display: flex; gap: 14px; flex-wrap: wrap; }

/* ── 窄屏 ── */
@media (max-width: 1100px) {
  .docs { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; max-height: 260px; }
}
@media (max-width: 860px) {
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .topbar { position: static; gap: 8px 12px; }
  .topbar .brand { margin-right: auto; }
  /* 导航移到底部固定条：6 个页签一行装得下（375px ÷ 6 ≈ 62px，标签最长 2 个字），⛔ 不横滚 */
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0;
    background: var(--surface); border-top: 1px solid var(--rule2); padding-bottom: env(safe-area-inset-bottom); }
  .tabs button { padding: 11px 0 12px; border-radius: 0; border-bottom: 0; border-top: 2px solid transparent; font-size: 12.5px; text-align: center; overflow: hidden; }
  .tabs button[aria-selected="true"] { border-top-color: var(--primary); background: var(--surface2); }
  .scopetag { order: 1; flex: 1 1 100%; white-space: normal; overflow-wrap: anywhere; border: 0; padding: 0; }
  .strip { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .strip .kv { padding: 0; border-left: 0; grid-template-rows: auto auto; }
  .strip .k, .strip .v { white-space: normal; overflow-wrap: anywhere; }
  .strip .v.big { font-size: 16px; }
  .chart { height: 250px; } .chart.lg { height: 300px; } .chart.sm { height: 200px; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpis.wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv2 .v { font-size: 15px; } .kv2.hero .v { font-size: 19px; }
  .kvt th { width: 50%; }
  .toc { top: 0; }
  .toasts { top: auto; bottom: calc(66px + env(safe-area-inset-bottom)); }
  .drawer .sheet { width: 100%; border-left: 0; }
  /* 文档里的宽表在手机上改成卡片：每行一张，列名由 JS 写进 data-label（⛔ 不让整页横滚） */
  .md table.cards, .md table.cards tbody, .md table.cards tr, .md table.cards td { display: block; width: 100%; }
  .md table.cards thead { display: none; }
  .md table.cards tr { border: 1px solid var(--rule); border-radius: 6px; margin-bottom: 10px; background: var(--surface); }
  .md table.cards td { border: 0; border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); padding: 6px 10px; }
  .md table.cards td:first-child { border-top: 0; font-weight: 700; }
  .md table.cards td[data-label]::before { content: attr(data-label); display: block; font-size: 10.5px; color: var(--faint); letter-spacing: .03em; }
}
@media (max-width: 420px) {
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clock { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }