/* ============================================================
 * Vericost 设计系统 · 「深空账本」
 *
 * 视觉规则
 *   1. 两个颜色承担全部语义：青柠 = 钱还在，燃红 = 钱在漏，其余全是灰阶
 *   2. 所有数字等宽 + tabular-nums（财务软件的立身之本）
 *   3. 发丝线与留白划分层级，投影只留给悬浮于深空的主面板
 *   4. 满宽平铺：不用居中定宽容器。正文靠各自的 max-width(em) 保证行长可读。
 *      宽屏必须**用掉**横向空间（首屏两栏），否则右侧会留一大片空白。
 *
 * 兼容性（相对早期版本放宽）
 *   早期刻意禁用 CSS 自定义属性与 flex gap。现已启用：目标浏览器
 *   （Chrome/Edge 84+、Safari 14.1+、Firefox 78+，含全部国产 Chromium 系）
 *   均支持，唯一不支持的 IE 已停止支持。仍保留：不用 :has()、不用 aspect-ratio、
 *   不用逻辑属性。
 *
 * 本文件由三段拼装，改样式请改对应源文件：
 *   1. 令牌 + 顶栏   /tmp/ui/tokens.css（前 78 行）
 *   2. 首页各段落     landing.html 的 <style>
 *   3. 应用外壳       /tmp/ui/app.css
 *   4. 兼容层         其余页面的旧类名映射
 * ============================================================ */

/* Vericost 设计令牌 —— 「深空账本」
 * 方向：把财务软件的严谨（等宽数字、发丝线、表格）和深空的光感放在一起。
 * 视觉签名：酸性青柠 #C8FF3D 作为唯一高饱和色，用在"钱还在"的地方；
 *           燃红 #FF4D3D 只用在"钱在漏"的地方。两个颜色承担全部语义。
 */
:root{
  --bg:#05070C;
  --bg-2:#080B12;
  --line:rgba(255,255,255,.07);
  --line-2:rgba(255,255,255,.12);
  --ink:#F2F5F9;
  --ink-2:#AEB9CA;
  --ink-3:#6C7889;
  --lime:#C8FF3D;
  --lime-dim:rgba(200,255,61,.14);
  --burn:#FF4D3D;
  --burn-dim:rgba(255,77,61,.13);
  --amber:#FFB020;
  --cyan:#4DD8E8;
  --sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"SF Mono","JetBrains Mono","Roboto Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* 深空光感：两层径向渐变 + 极细网格 */
.aurora{position:fixed;inset:0;pointer-events:none;z-index:0}
.aurora::before{
  content:"";position:absolute;top:-30%;left:-10%;width:80%;height:90%;
  background:radial-gradient(ellipse at 30% 30%,rgba(77,216,232,.14),transparent 62%);
  filter:blur(20px);
}
.aurora::after{
  content:"";position:absolute;top:-10%;right:-15%;width:70%;height:80%;
  background:radial-gradient(ellipse at 70% 40%,rgba(200,255,61,.09),transparent 60%);
  filter:blur(24px);
}
.grid-overlay{
  position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:88px 88px;
  mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 0%,#000 20%,transparent 75%);
}
/* 满宽平铺：不用居中定宽容器。正文靠各自的 max-width(em) 保证行长可读，
   而不是靠把整个页面收窄 —— 后者在宽屏上会留下大片空白。 */
.wrap{position:relative;z-index:1;width:100%;padding:0 48px}

/* ---------- 顶栏 ---------- */
.nav{position:relative;z-index:3;border-bottom:1px solid var(--line)}
.nav-in{width:100%;padding:0 48px;height:70px;display:flex;align-items:center}
.mark{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16.5px;letter-spacing:-.2px}
.mark .glyph{
  width:26px;height:26px;border:1.5px solid var(--lime);border-radius:6px;
  display:flex;align-items:center;justify-content:center;color:var(--lime);
  font-family:var(--mono);font-size:13px;font-weight:700;
  box-shadow:0 0 0 3px var(--lime-dim);
}
.mark .cn{color:var(--ink-3);font-weight:500;font-size:13.5px}
.nav-links{display:flex;gap:30px;margin-left:52px}
.nav-links a{color:var(--ink-2);text-decoration:none;font-size:14px;transition:color .18s}
.nav-links a:hover{color:var(--ink)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.nav-right .ghost{color:var(--ink-2);text-decoration:none;font-size:14px}
.btn{
  display:inline-flex;align-items:center;gap:8px;border-radius:9px;
  padding:9px 18px;font-size:14px;font-weight:650;text-decoration:none;
  border:1px solid transparent;transition:all .18s;
}
.btn-lime{background:var(--lime);color:#05070C;box-shadow:0 0 0 0 rgba(200,255,61,.4)}
.btn-lime:hover{box-shadow:0 0 24px 0 rgba(200,255,61,.35)}
.btn-line{border-color:var(--line-2);color:var(--ink)}
.btn-line:hover{border-color:var(--ink-3);background:rgba(255,255,255,.03)}
.btn-lg{padding:14px 28px;font-size:15.5px;border-radius:11px}



/* ---------- 第 1 段：Hero ---------- */
.hero{position:relative;z-index:1;padding:96px 0 0}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);
  font-size:11.5px;letter-spacing:2.4px;text-transform:uppercase;color:var(--lime);
  border:1px solid rgba(200,255,61,.3);background:var(--lime-dim);
  border-radius:999px;padding:6px 15px 6px 12px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 10px var(--lime);animation:pulse 2.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
h1.big{
  margin:34px 0 0;font-size:76px;line-height:1.2;font-weight:800;
  letter-spacing:-3px;max-width:16ch;
}
/* 中文字体的 em 盒（ascent+descent）约 1.4em，远高于字形，
   直接给 inline 元素上底色会撑成一个比字高得多的方块。
   用 inline-block + line-height:1 把背景盒压到接近字形的实际高度。 */
h1.big .hl{
  display:inline-block;line-height:1.02;vertical-align:-.03em;
  background:var(--lime);color:#05070C;padding:0 .085em;border-radius:9px;
  white-space:nowrap;
  box-shadow:0 10px 50px -12px rgba(200,255,61,.55);
}
h1.big .burn{color:var(--burn);white-space:nowrap;text-shadow:0 0 42px rgba(255,77,61,.45)}
.lead{margin:30px 0 0;font-size:18.5px;line-height:1.75;color:var(--ink-2);max-width:56ch}
.lead b{color:var(--ink);font-weight:600}
.cta-row{margin-top:40px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.cta-note{color:var(--ink-3);font-size:13.5px;margin-left:6px}

.panel{
  margin-top:74px;border:1px solid var(--line-2);border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  overflow:hidden;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.02) inset;
}
.panel-hd{
  display:flex;align-items:center;gap:14px;padding:15px 22px;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:12px;
  color:var(--ink-3);letter-spacing:.6px;
}
.panel-hd .live{display:flex;align-items:center;gap:7px;color:var(--lime)}
.panel-hd .live i{width:6px;height:6px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 8px var(--lime);animation:pulse 1.8s infinite}
.panel-hd .sp{margin-left:auto}
.panel-body{padding:34px 34px 30px}

.figure-row{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:2px;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.fig{background:#070A11;padding:24px 22px}
.fig .lb{font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.fig .lb .sq{width:7px;height:7px;border-radius:2px}
.fig .vl{font-family:var(--mono);font-size:36px;font-weight:600;letter-spacing:-1.4px;
  margin-top:12px;font-variant-numeric:tabular-nums}
.fig .sub{font-size:12.5px;color:var(--ink-3);margin-top:7px;font-family:var(--mono)}
.fig.hero-fig .vl{font-size:46px}
.vl.lime{color:var(--lime)} .vl.burn{color:var(--burn)} .vl.ink{color:var(--ink)}

.leak{margin-top:30px}
.leak-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.leak-top .t{font-size:13px;color:var(--ink-2)}
.leak-top .v{font-family:var(--mono);font-size:13px;color:var(--ink-3)}
.strip{height:30px;border-radius:7px;overflow:hidden;display:flex;background:#070A11;
  border:1px solid var(--line-2)}
.strip .seg{position:relative;height:100%}
.strip .seg.ok{background:linear-gradient(90deg,rgba(200,255,61,.85),rgba(200,255,61,.55))}
.strip .seg.burn{background:repeating-linear-gradient(115deg,var(--burn) 0 7px,
  rgba(255,77,61,.35) 7px 14px);box-shadow:0 0 26px rgba(255,77,61,.5)}
.legend{display:flex;gap:26px;margin-top:13px;font-size:12.5px;color:var(--ink-3);flex-wrap:wrap}
.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:7px;
  vertical-align:middle}

.src-row{display:flex;gap:20px;align-items:center;margin-top:28px;padding-top:22px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-3);flex-wrap:wrap}
.src-row .chip{border:1px solid var(--line);border-radius:6px;padding:5px 11px;
  font-family:var(--mono);font-size:11.5px;display:inline-flex;align-items:center;gap:7px}
.chip .ok{color:var(--lime)}
.chip .no{color:var(--amber)}

/* ---------- 第 2 段：漏损解剖 ---------- */
.sect{position:relative;z-index:1;padding:130px 0 0}
.sect-hd{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  padding-bottom:26px;border-bottom:1px solid var(--line)}
.sect-idx{font-family:var(--mono);font-size:11.5px;color:var(--lime);letter-spacing:2px}
h2.sect-t{margin:14px 0 0;font-size:44px;line-height:1.2;font-weight:750;letter-spacing:-1.6px;
  max-width:20ch;text-wrap:balance}
h2.sect-t em{font-style:normal;white-space:nowrap}
.sect-d{margin:0;color:var(--ink-2);font-size:15.5px;max-width:44ch;line-height:1.75}

.anat{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:44px}
.anat-c{background:#070A11;padding:32px 28px}
.anat-c .no{font-family:var(--mono);font-size:11.5px;color:var(--ink-3);letter-spacing:1.6px}
.anat-c h3{margin:18px 0 0;font-size:18px;font-weight:650;letter-spacing:-.3px}
.anat-c p{margin:12px 0 0;font-size:14px;color:var(--ink-2);line-height:1.75}
.anat-c .mini{margin-top:22px;font-family:var(--mono);font-size:26px;font-weight:600;
  letter-spacing:-1px;font-variant-numeric:tabular-nums}
.anat-c .mini.burn{color:var(--burn)}
.anat-c .mini.lime{color:var(--lime)}
.anat-c .mini.amber{color:var(--amber)}

/* 归因流向图 */
.flow{margin-top:44px;border:1px solid var(--line-2);border-radius:14px;background:#070A11;
  padding:34px 30px;display:grid;grid-template-columns:200px 1fr 220px;gap:34px;align-items:center}
.flow-col .cap{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:1.8px;
  margin-bottom:16px}
.node{border:1px solid var(--line-2);border-radius:9px;padding:12px 15px;margin-bottom:9px;
  font-size:13.5px;background:rgba(255,255,255,.02);display:flex;justify-content:space-between;
  gap:14px;align-items:center}
.node .n{font-family:var(--mono);font-size:13px;color:var(--ink)}
.node small{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.node.hot{border-color:rgba(255,77,61,.4);background:var(--burn-dim)}
.node.hot small{color:var(--burn)}
.node.good{border-color:rgba(200,255,61,.32);background:var(--lime-dim)}
.node.good small{color:var(--lime)}
.flow-mid{position:relative;height:220px}
.flow-mid svg{width:100%;height:100%;overflow:visible}
.flow-mid .lbl{position:absolute;top:-2px;left:0;font-family:var(--mono);font-size:11px;
  color:var(--ink-3);letter-spacing:1.8px}
.flow-mid .tick{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.flow-mid .t1{left:0}.flow-mid .t2{left:50%}.flow-mid .t3{left:100%}
/* 曲线上的三个数值标签。
 *
 * **位置必须用百分比，不能用固定 px。**
 * 原本写的是 top:78px / 150px / 196px —— 按桌面版图高 220px 调的。
 * 但 ≤1080px 时 .flow-mid 被压到 150px，标签位置没跟着变，
 * 第三个标签直接掉到图外 46px，压在下面的「归因结果」上（用户截图反馈）。
 * 百分比随容器高度自适应，不会再出现这种错位。 */
.flowval{position:absolute;font-family:var(--mono);font-size:12px;letter-spacing:-.2px;
  padding:3px 8px;border-radius:5px;background:#0B0F18;border:1px solid var(--line-2);
  transform:translateY(-50%)}
.flowval.f1{top:30%;right:14%;color:var(--burn)}
.flowval.f2{top:58%;right:14%;color:var(--lime)}
.flowval.f3{top:80%;right:8%;color:var(--cyan)}

/* ---------- 第 3 段：可信 ---------- */
.trust{display:grid;grid-template-columns:1.1fr 1fr;gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-top:44px}
.trust-l{background:#070A11;padding:40px 36px}
.trust-r{background:#070A11;padding:40px 36px}
.trust-l h3{margin:0;font-size:26px;font-weight:700;letter-spacing:-.8px;line-height:1.35}
.trust-l h3 span{color:var(--lime)}
.trust-l p{margin:20px 0 0;color:var(--ink-2);font-size:15px;line-height:1.8}
.quote{margin-top:26px;padding-left:20px;border-left:2px solid var(--lime);color:var(--ink);
  font-size:15.5px;line-height:1.75}
.quote cite{display:block;margin-top:9px;font-style:normal;font-family:var(--mono);
  font-size:11.5px;color:var(--ink-3);letter-spacing:.6px}
.meter-row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink-3);
  font-family:var(--mono);margin-bottom:10px}
.meter{height:12px;border-radius:4px;overflow:hidden;display:flex;background:#0B0F18;
  border:1px solid var(--line)}
.meter .m-ok{background:var(--lime)}
.meter .m-no{background:repeating-linear-gradient(115deg,var(--amber) 0 5px,
  rgba(255,176,32,.3) 5px 10px)}
.trust-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.trust-item:last-child{border-bottom:0}
.trust-item .ic{font-family:var(--mono);font-size:12px;width:22px;flex:none;padding-top:2px}
.trust-item .ic.ok{color:var(--lime)}
.trust-item .ic.no{color:var(--amber)}
.trust-item .tx{font-size:14px;color:var(--ink-2);line-height:1.7}
.trust-item .tx b{color:var(--ink);font-weight:600}

/* ---------- 第 4 段：价格库 ---------- */
.prices{margin-top:44px;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  background:#070A11}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:15px 22px;font-size:11.5px;color:var(--ink-3);font-weight:500;
  letter-spacing:1.4px;font-family:var(--mono);border-bottom:1px solid var(--line);
  text-transform:uppercase;white-space:nowrap}
td{padding:16px 22px;border-bottom:1px solid var(--line);font-size:14px}
tr:last-child td{border-bottom:0}
td.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13.5px}
td .tag{font-family:var(--mono);font-size:10.5px;padding:3px 8px;border-radius:4px;
  letter-spacing:.4px}
.tag.ok{background:var(--lime-dim);color:var(--lime);border:1px solid rgba(200,255,61,.3)}
.tag.no{background:rgba(255,176,32,.12);color:var(--amber);border:1px solid rgba(255,176,32,.3)}
.tag.tier{background:rgba(77,216,232,.12);color:var(--cyan);border:1px solid rgba(77,216,232,.3)}
.src-link{color:var(--ink-3);text-decoration:none;font-family:var(--mono);font-size:11.5px}
.pt-foot{display:flex;justify-content:space-between;padding:17px 22px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-3);font-family:var(--mono);flex-wrap:wrap;gap:10px}

/* ---------- 第 5 段：主张 ---------- */
.claim{position:relative;z-index:1;padding:150px 0 0;text-align:center}
.claim q{quotes:none;display:block;font-size:52px;line-height:1.32;font-weight:750;
  letter-spacing:-2px;max-width:20ch;margin:0 auto}
.claim q em{font-style:normal;color:var(--lime)}
.claim .who{margin-top:30px;font-family:var(--mono);font-size:12.5px;color:var(--ink-3);
  letter-spacing:1.2px}

/* ---------- 收尾 ---------- */
.final{position:relative;z-index:1;margin-top:150px;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(200,255,61,.05),transparent 70%)}
.final-in{max-width:1320px;margin:0 auto;padding:96px 40px;display:flex;
  justify-content:space-between;align-items:center;gap:50px;flex-wrap:wrap}
.final h2{font-size:42px;font-weight:750;letter-spacing:-1.6px;line-height:1.25;max-width:18ch}
.final p{margin:18px 0 0;color:var(--ink-2);font-size:15.5px;max-width:46ch}
footer{position:relative;z-index:1;padding:44px 0 70px}
.foot-in{max-width:1320px;margin:0 auto;padding:0 40px;display:flex;
  justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ink-3);font-family:var(--mono)}
.foot-in a{color:var(--ink-3);text-decoration:none;margin-left:22px}

/* ============ 响应式：桌面优先，逐级塌陷 ============ */
@media (max-width:1080px){
  .wrap,.nav-in,.final-in,.foot-in{padding-left:26px;padding-right:26px}
  h1.big{font-size:58px;letter-spacing:-2.2px}
  .figure-row{grid-template-columns:1fr 1fr}
  .anat,.trust{grid-template-columns:1fr}
  .flow{grid-template-columns:1fr;gap:22px}
  .flow-mid{height:150px}
  h2.sect-t{font-size:36px}
}
@media (max-width:760px){
  .wrap,.nav-in,.final-in,.foot-in{padding-left:20px;padding-right:20px}
  .nav-in{height:60px}
  /* 桌面导航在窄屏收起，只留 CTA —— 原型阶段不做抽屉 */
  .nav-links{display:none}
  .nav-right{margin-left:auto;gap:12px}
  .mark{font-size:15px}
  .hero{padding-top:56px}
  h1.big{font-size:40px;letter-spacing:-1.5px;line-height:1.28;margin-top:24px}
  h1.big .hl{padding:0 .07em;border-radius:6px}
  .lead{font-size:16px;line-height:1.8;margin-top:22px}
  .cta-row{margin-top:28px;gap:10px}
  .cta-note{width:100%;margin:2px 0 0;font-size:12.5px}
  .btn-lg{padding:12px 20px;font-size:14.5px;border-radius:9px}
  .panel{margin-top:44px;border-radius:13px}
  .panel-body{padding:20px 18px}
  .panel-hd{padding:12px 16px;font-size:11px;flex-wrap:wrap;gap:8px}
  .panel-hd .sp{display:none}
  .figure-row{grid-template-columns:1fr 1fr;border-radius:10px}
  .fig{padding:17px 15px}
  .fig .vl{font-size:26px;letter-spacing:-1px}
  .fig.hero-fig .vl{font-size:30px}
  .fig .lb{font-size:11.5px}
  .fig .sub{font-size:11px}
  .leak-top{flex-direction:column;gap:4px;align-items:flex-start}
  .legend{gap:14px;font-size:11.5px}
  .src-row{gap:9px;font-size:11.5px}
  .src-row .chip{font-size:10.5px;padding:4px 8px}
  .sect{padding-top:72px}
  .sect-hd{flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:20px}
  h2.sect-t{font-size:27px;letter-spacing:-1px}
  .sect-d{font-size:14px}
  .anat-c{padding:24px 20px}
  .flow{padding:22px 18px}
  .trust-l,.trust-r{padding:26px 20px}
  .trust-l h3{font-size:20px}
  .prices{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .prices table{min-width:660px}
  th,td{padding:12px 14px;font-size:12.5px}
  .claim{padding-top:84px}
  .claim q{font-size:27px;letter-spacing:-1px}
  .final{margin-top:84px}
  .final-in{padding-top:56px;padding-bottom:56px;flex-direction:column;align-items:flex-start;gap:26px}
  .final h2{font-size:28px;letter-spacing:-1px}
  .final p{font-size:14.5px}
  .foot-in{flex-direction:column;align-items:flex-start;gap:12px}
  .foot-in a{margin:0 20px 0 0}
}
@media (max-width:400px){
  h1.big{font-size:34px}
  .fig .vl{font-size:22px}
  .fig.hero-fig .vl{font-size:26px}
}

/* 应用外壳与通用组件 —— 所有登录后的页面共用 */

/* 外壳容器的 display:flex 必须在这里，不能放在 body 上 ——
   否则首页所有段落会变成 flex item 排成一行，页面横向撑到 3400px。 */
.shell{display:flex;min-height:100vh;position:relative;z-index:1}

/* ---------- 侧栏 ---------- */
.rail{width:230px;flex:none;border-right:1px solid var(--line);position:relative;z-index:2;
  background:rgba(6,8,13,.7);display:flex;flex-direction:column;padding:20px 0}
.rail .mark{padding:0 20px 22px;font-size:15.5px}
.rail-nav{padding:0 12px;flex:1}
.rail-nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:8px;
  color:var(--ink-2);text-decoration:none;font-size:13.5px;margin-bottom:2px;transition:all .15s}
.rail-nav a:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.rail-nav a.on{background:var(--lime-dim);color:var(--lime);font-weight:600;
  box-shadow:inset 2px 0 0 var(--lime)}
.rail-nav a i{width:16px;text-align:center;font-style:normal;font-family:var(--mono);
  font-size:12px;opacity:.85}
.rail-nav .grp{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:1.6px;
  padding:16px 12px 7px}
.rail-foot{padding:16px 20px 0;border-top:1px solid var(--line);margin:0 12px}
.rail-foot .acct{font-size:12.5px;color:var(--ink-3);font-family:var(--mono);
  word-break:break-all;line-height:1.6}
/* 这里曾有一条 `.rail-foot .plan{margin-top:8px}` ——
 * 那是 FREE 竖着排在邮箱下面时的样式。改成并排后它没删，
 * 而 flex 的 align-items:center 居中的是**外边距盒**：
 * 上边距 8px、下边距 0 → 内容盒被下推 4px，正是量到的错位差。
 *
 * 这是本项目**第三次**被「没删干净的旧规则」咬（前两次是
 * .rail-nav{display:flex} 和 .flow 类名撞车）。删布局时要把旧规则一起删，
 * 只在后面追加新规则，跨上下文时迟早打架。 */
/* 样式见下方 .foot-row .plan */

/* ---------- 主区 ---------- */
.main{flex:1;min-width:0;position:relative;z-index:1}
.top{height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  gap:18px;padding:0 30px}
.top h1{font-size:16px;font-weight:650;letter-spacing:-.2px;margin:0}
.top .crumb{color:var(--ink-3);font-size:13px;text-decoration:none}
.top .crumb:hover{color:var(--ink-2)}
.top .sp{margin-left:auto}
.icon-btn{border:1px solid var(--line-2);background:none;border-radius:8px;
  color:var(--ink-2);width:34px;height:34px;cursor:pointer;font-size:14px}
.icon-btn:hover{border-color:var(--ink-3);color:var(--ink)}
.body{padding:26px 30px 60px}

/* 周期切换 */
.period{display:flex;align-items:center;border:1px solid var(--line-2);
  border-radius:8px;overflow:hidden}
.period button{background:none;border:0;color:var(--ink-3);font-size:13px;
  padding:7px 13px;cursor:pointer;font-family:var(--mono)}
.period button:hover{color:var(--ink)}
.period .cur{background:rgba(255,255,255,.05);color:var(--ink)}

/* ---------- 区块 ---------- */
.sec{margin-top:26px;border:1px solid var(--line-2);border-radius:12px;background:#070A11;
  overflow:hidden}
.sec:first-child{margin-top:0}
.sec-hd{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--line)}
.sec-hd h2{margin:0;font-size:13.5px;font-weight:650;letter-spacing:.1px}
.sec-hd .sp{margin-left:auto}
.sec-hd .tool{font-size:12px;color:var(--ink-3);font-family:var(--mono)}
.sec-bd{padding:22px 20px}
.sec-bd.tight{padding:0}

/* ---------- 表格 ---------- */
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:11px 20px;font-size:11px;color:var(--ink-3);font-weight:500;
  font-family:var(--mono);letter-spacing:1.2px;text-transform:uppercase;
  border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:13px 20px;border-bottom:1px solid var(--line);font-size:13.5px;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr:hover{background:rgba(255,255,255,.02)}
td.m{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px}
td.r,th.r{text-align:right}
.neg{color:var(--burn)} .pos{color:var(--lime)} .mut{color:var(--ink-3)}

/* 链接型单元格 */
td a{color:var(--ink);text-decoration:none;font-weight:600}
td a:hover{color:var(--lime)}

/* ---------- 标签 ---------- */
.tag{font-family:var(--mono);font-size:10.5px;padding:3px 8px;border-radius:4px;
  letter-spacing:.4px;white-space:nowrap;display:inline-block}
.tag.ok{background:var(--lime-dim);color:var(--lime);border:1px solid rgba(200,255,61,.3)}
.tag.no{background:rgba(255,176,32,.12);color:var(--amber);border:1px solid rgba(255,176,32,.3)}
.tag.bad{background:var(--burn-dim);color:var(--burn);border:1px solid rgba(255,77,61,.3)}
.tag.tier{background:rgba(77,216,232,.12);color:var(--cyan);border:1px solid rgba(77,216,232,.3)}
.tag.off{background:rgba(255,255,255,.04);color:var(--ink-3);border:1px solid var(--line-2)}

/* ---------- 按钮与表单 ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:8px;
  padding:9px 16px;font-size:13.5px;font-weight:600;text-decoration:none;
  border:1px solid transparent;cursor:pointer;font-family:var(--sans);transition:all .16s}
.btn-lime{background:var(--lime);color:#05070C}
.btn-lime:hover{box-shadow:0 0 22px -2px rgba(200,255,61,.45)}
.btn-line{border-color:var(--line-2);color:var(--ink);background:none}
.btn-line:hover{border-color:var(--ink-3);background:rgba(255,255,255,.03)}
.btn-sm{padding:6px 12px;font-size:12.5px}
.btn-danger{border-color:rgba(255,77,61,.35);color:var(--burn);background:none}
.btn-danger:hover{background:var(--burn-dim);border-color:var(--burn)}
.btn:disabled{opacity:.4;cursor:not-allowed}

input,select,textarea{background:#0B0F18;border:1px solid var(--line-2);color:var(--ink);
  border-radius:7px;padding:9px 11px;font-size:13px;font-family:var(--mono);
  -webkit-appearance:none;appearance:none;width:100%}
input:focus,select:focus{outline:none;border-color:var(--lime)}
input::placeholder{color:var(--ink-3)}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),
  linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 15px) 18px,calc(100% - 10px) 18px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:30px}
label.fld{display:block;font-size:12.5px;color:var(--ink-3);margin-bottom:5px}
.form-row{display:grid;gap:14px;align-items:end}
.hint{font-size:12px;color:var(--ink-3);margin-top:7px;line-height:1.6}

/* ---------- KPI ---------- */
.row-kpi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:12px;overflow:hidden}
.kpi{background:#070A11;padding:20px 20px 18px;position:relative}
.kpi .lbl{font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.kpi .lbl .sq{width:6px;height:6px;border-radius:2px}
.kpi .num{font-family:var(--mono);font-size:29px;font-weight:600;letter-spacing:-1.2px;
  margin-top:11px;font-variant-numeric:tabular-nums}
.kpi .note{font-size:12px;color:var(--ink-3);margin-top:6px;font-family:var(--mono)}
.kpi .bar{position:absolute;left:0;top:0;height:2px;width:100%}
.kpi.b .num,.kpi.b .big{color:var(--burn)} .kpi.b .bar{background:var(--burn)}
.kpi.g .num{color:var(--lime)} .kpi.g .bar{background:var(--lime)}
.kpi.c .num{color:var(--cyan)} .kpi.c .bar{background:var(--cyan)}
.kpi.n .bar{background:var(--ink-3)}

/* ---------- 成本条 / 进度 ---------- */
.leakstrip{height:26px;border-radius:6px;overflow:hidden;display:flex;
  border:1px solid var(--line-2);background:#0B0F18}
.leakstrip div{height:100%}
.leakstrip .ok{background:linear-gradient(90deg,rgba(200,255,61,.9),rgba(200,255,61,.6))}
.leakstrip .burn{background:repeating-linear-gradient(115deg,var(--burn) 0 6px,
  rgba(255,77,61,.35) 6px 12px);box-shadow:0 0 22px rgba(255,77,61,.45)}
.leakstrip .gap{background:repeating-linear-gradient(115deg,rgba(255,255,255,.11) 0 5px,
  rgba(255,255,255,.03) 5px 10px)}
.leaklg{display:flex;gap:24px;margin-top:12px;font-size:12px;color:var(--ink-3);flex-wrap:wrap}
.leaklg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;
  vertical-align:middle}

.track{height:8px;background:#0B0F18;border-radius:3px;overflow:hidden}
.track .fill{height:100%;border-radius:3px;display:block;
  background:linear-gradient(90deg,rgba(77,216,232,.5),var(--cyan))}
.track.ok .fill{background:linear-gradient(90deg,rgba(200,255,61,.5),var(--lime))}

/* 零位在中间的盈亏条 */
.mbar{position:relative;height:18px;width:170px;background:#0B0F18;border-radius:4px;
  overflow:hidden;border:1px solid var(--line)}
.mbar .zero{position:absolute;top:0;bottom:0;left:50%;width:1px;background:var(--line-2)}
.mbar .fill{position:absolute;top:2px;bottom:2px;border-radius:2px}
.mbar .fill.n{background:linear-gradient(90deg,rgba(255,77,61,.5),var(--burn))}
.mbar .fill.p{background:linear-gradient(90deg,rgba(200,255,61,.45),var(--lime))}
.mbar .pv{position:absolute;right:6px;top:0;line-height:16px;font-family:var(--mono);
  font-size:10.5px;color:var(--burn)}
.mbar .pv.p{left:6px;right:auto;color:#0A0D14}

/* ---------- 两栏 ---------- */
.two{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:26px;align-items:start}
/* 两处都要写：栅格用 minmax(0,…)，子元素 min-width:0。只写一处仍会被撑破。 */
.two > *,.grid > *{min-width:0}
.two.wide{grid-template-columns:minmax(0,1fr) 420px}
.stack{display:flex;flex-direction:column;gap:26px}

/* ---------- 可信度 ---------- */
.trustrow{display:flex;gap:11px;padding:13px 0;border-bottom:1px solid var(--line);
  align-items:flex-start;font-size:13px;color:var(--ink-2);line-height:1.65}
.trustrow:last-child{border-bottom:0;padding-bottom:0}
.trustrow .ic{font-family:var(--mono);font-size:12px;flex:none;padding-top:1px}
.trustrow .ic.ok{color:var(--lime)} .trustrow .ic.no{color:var(--amber)}
.trustrow b{color:var(--ink);font-weight:600}
.gauge{display:flex;align-items:center;gap:16px;padding:4px 0 18px;
  border-bottom:1px solid var(--line);margin-bottom:4px}
.ring{width:74px;height:74px;flex:none;position:relative}
.ring svg{transform:rotate(-90deg)}
.ring .val{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;font-family:var(--mono)}
.ring .val b{font-size:19px;font-weight:600;letter-spacing:-.6px;color:var(--lime)}
.ring .val span{font-size:9.5px;color:var(--ink-3);letter-spacing:.6px}
.gauge .tx{font-size:13px;color:var(--ink-2);line-height:1.7}
.gauge .tx b{color:var(--ink)}

/* ---------- 模型条形 ---------- */
.blist{display:flex;flex-direction:column;gap:13px}
.brow{display:grid;grid-template-columns:150px minmax(0,1fr) 108px;gap:14px;align-items:center;font-size:13px}
.brow .nm{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.brow .vv{font-family:var(--mono);font-size:12px;color:var(--ink-3);text-align:right}

/* ---------- 模拟器 ---------- */
.sim{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-2)}
.sim select,.sim input{width:auto;min-width:120px}
.sim input{width:70px;min-width:70px;text-align:right}
.sim-out{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:18px}
.so{background:#0B0F18;padding:15px 17px}
.so .l{font-size:12px;color:var(--ink-3)}
.so .v{font-family:var(--mono);font-size:22px;font-weight:600;margin-top:7px;
  letter-spacing:-.8px;font-variant-numeric:tabular-nums}

/* 告警规则表单：宽屏 7 列，窄屏折成 2 列。
   原先这些列是写死在 style="" 里的，媒体查询改不动它 ——
   手机上 7 列各剩 24–30px，输入框点不中也没法读。 */
.rule-form{display:grid;gap:12px;align-items:end;
  grid-template-columns:minmax(0,1.6fr) minmax(0,.8fr) minmax(0,.8fr)
    minmax(0,1.1fr) minmax(0,.9fr) minmax(0,2fr) auto}

/* ---------- 公开价格表 /models ----------
 * 这个页面是给**陌生人**看的，不是给客户看的 —— 与站内页面的差别在这里：
 *   * 首屏必须一眼看到"这是什么、可不可信"，不能要求滚动
 *   * 独立性声明放在表内而不是只放落地页（从搜索直接落进来的人不看落地页）
 *   * 来源做成看得见的链接，它是这页唯一区别于别家价格表的东西 */
.m-head{display:flex;gap:40px;align-items:flex-start;justify-content:space-between;
  padding:64px 0 34px;flex-wrap:wrap}
.m-head .lead{margin-top:14px;max-width:58ch}
.m-stat{flex:none;min-width:210px;border:1px solid var(--line-2);border-radius:12px;
  background:#070A11;padding:16px 18px}
.m-stat-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:7px 0;font-size:13px;color:var(--ink-3)}
.m-stat-row+.m-stat-row{border-top:1px solid var(--line)}
.m-stat-row b{font-family:var(--mono);font-size:14px;color:var(--ink)}
.m-stat-row b.ok{color:var(--lime)}

.m-claim{border:1px solid var(--line-2);border-left:3px solid var(--lime);
  border-radius:10px;background:#070A11;padding:18px 22px;margin-bottom:22px}
.m-claim-t{font-size:13.5px;font-weight:600;margin-bottom:10px}
.m-claim ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.m-claim li{font-size:13px;color:var(--ink-2);line-height:1.7}

.m-note{font-size:12.5px;color:var(--ink-3);font-family:var(--mono);margin-bottom:12px}

.m-table{margin-top:0}
.m-table td.m b{font-family:var(--mono);font-size:12.5px}
.m-table td.r,.m-table th.r{text-align:right}
.m-table td.dim{color:var(--ink-3)}
.m-table .tag.tier{margin-left:8px;font-size:10px}
.m-table .src{font-family:var(--mono);font-size:12px;color:var(--cyan);
  text-decoration:none;border-bottom:1px dotted rgba(77,216,232,.4)}
.m-table .src:hover{color:var(--ink);border-bottom-color:var(--ink-3)}
.m-table .src.none{color:var(--ink-3);border-bottom:0}
.tag.est{background:rgba(255,176,32,.1);border-color:rgba(255,176,32,.3);color:#F5D08A}

.m-foot{padding:30px 0 70px;display:flex;flex-direction:column;gap:18px}
.m-foot p{font-size:13.5px;color:var(--ink-2);max-width:62ch;line-height:1.75}

@media (max-width:900px){
  .m-head{padding:34px 0 22px;gap:22px}
  .m-stat{min-width:0;width:100%}
  .m-claim{padding:15px 16px}
  /* 窄屏表格横向滚动，别把来源列压没 —— 来源是这页的重点，不能省 */
  .m-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .m-table table{min-width:840px}
  .m-foot{padding:24px 0 48px}
}

/* ---------- 行动清单 ----------
 * 看板回答「花了多少」，这一块回答「下一步做什么」。
 * 设计上刻意**不像 KPI**：KPI 是数字+说明，这里是结论+依据+动作三段，
 * 因为用户要照着一行行去做，不是扫一眼。
 *
 * 颜色只用来区分优先级，不用来"好看" —— 酸绿留给「钱还在」这个语义，
 * 这里一律用中性色 + 一条左侧色带，避免把语义色用滥。 */
.act-sec{margin-bottom:18px}
.act{padding:14px 18px;border-bottom:1px solid var(--line);position:relative}
.act:last-child{border-bottom:0}
.act::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;border-radius:1px}
.act.high::before{background:var(--burn)}
.act.mid::before{background:var(--amber)}
.act.info::before{background:var(--line-2)}

.act-top{display:flex;align-items:baseline;gap:10px}
.act-tag{font-family:var(--mono);font-size:10px;letter-spacing:1px;flex:none;
  padding:2px 7px;border-radius:4px;border:1px solid var(--line-2);color:var(--ink-3)}
.act.high .act-tag{color:#FFB3AA;border-color:rgba(255,77,61,.35);background:var(--burn-dim)}
.act.mid .act-tag{color:#F5D08A;border-color:rgba(255,176,32,.3);background:rgba(255,176,32,.08)}
.act-title{flex:1;min-width:0;font-size:13.5px;color:var(--ink);line-height:1.5}
.act-impact{flex:none;font-family:var(--mono);font-size:13.5px;font-weight:600;
  font-variant-numeric:tabular-nums;color:var(--ink-2)}

.act-ev{margin-top:6px;font-size:12.5px;color:var(--ink-3);line-height:1.65;
  font-family:var(--mono)}
.act-sug{margin-top:8px;font-size:13px;color:var(--ink-2);line-height:1.7;display:flex;gap:8px}
.act-sug .ic{font-family:var(--mono);color:var(--lime);flex:none;opacity:.8}

/* 「另有 N 项」的收尾行。不折叠成按钮 —— 那些条目本身价值不大，
 * 折叠交互反而让人以为里面还有大发现。 */
.act-more{padding:12px 18px;font-size:12.5px;color:var(--ink-3);
  border-top:1px solid var(--line);font-family:var(--mono)}

/* 窄屏：金额换行到第二行，不要挤掉标题 */
@media (max-width:560px){
  .act{padding:13px 15px}
  .act-top{flex-wrap:wrap;gap:7px}
  .act-title{flex:1 1 100%;order:2;font-size:13px}
  .act-impact{order:1;margin-left:auto;font-size:14px}
  .act-ev{font-size:12px}
}

/* ---------- 提示条 ---------- */
.alert{border-radius:9px;padding:12px 15px;font-size:13px;line-height:1.65;
  display:flex;gap:10px;align-items:flex-start}
.alert .ic{font-family:var(--mono);flex:none}
.alert.warn{background:rgba(255,176,32,.08);border:1px solid rgba(255,176,32,.28);color:#F5D08A}
.alert.err{background:var(--burn-dim);border:1px solid rgba(255,77,61,.3);color:#FFB3AA}
.alert.ok{background:var(--lime-dim);border:1px solid rgba(200,255,61,.3);color:#DFF5A8}
.alert.info{background:rgba(77,216,232,.07);border:1px solid rgba(77,216,232,.25);color:#A8E4EE}
.alert code{background:rgba(0,0,0,.3);border:1px solid var(--line-2)}
code{font-family:var(--mono);font-size:12.5px;color:#93C5FD;background:#0D1526;
  border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;word-break:break-all}
pre{font-family:var(--mono);font-size:12.5px;background:#0B0F18;border:1px solid var(--line-2);
  border-radius:9px;padding:14px 16px;overflow-x:auto;color:#93C5FD;line-height:1.7;
  -webkit-overflow-scrolling:touch}
.empty{padding:34px 20px;text-align:center;color:var(--ink-3);font-size:13.5px}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .two,.two.wide{grid-template-columns:minmax(0,1fr)}
  .row-kpi{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 窄屏的排版微调。
 *
 * **这里原来还有一段「侧栏收成顶部横向滚动条」** ——
 * 那是侧栏还在正常文档流里时的设计。后来侧栏改成抽屉，这段没删，
 * 于是两套移动端设计同时生效：`.rail` 是我的 fixed 抽屉，
 * 而 `.rail-nav{display:flex}` 是老规则，把导航项横过来塞进竖抽屉，
 * 变成一排间距巨大的横条（实测 rail-nav 高 809px）。
 *
 * 教训：**改布局时要把被取代的旧规则删掉**，而不是只在后面追加新的。
 * 追加式覆盖在同一个断点里还能靠层叠生效，跨断点就会莫名其妙地打架。 */
@media (max-width:760px){
  .top{padding:0 18px;height:56px;gap:12px}
  .top h1{font-size:15px}
  .body{padding:18px 16px 50px}
  .row-kpi{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .kpi{padding:16px 15px}
  .kpi .num{font-size:23px;letter-spacing:-.8px}
  .sec-hd{padding:12px 15px;flex-wrap:wrap;gap:8px}
  .sec-bd{padding:16px 15px}
  th,td{padding:11px 15px;font-size:12.5px}
  .sec-bd.tight{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sec-bd.tight table{min-width:640px}
  .sim{gap:9px;font-size:13px}
  .sim select,.sim input{min-width:0;flex:1}
  .sim-out{grid-template-columns:minmax(0,1fr)}
  .mbar{width:120px}
  .brow{grid-template-columns:minmax(0,1fr) 90px;gap:10px}
  .brow .track{grid-column:1/-1}
}

/* ---------- SVG 图表文字（svg.rs 输出依赖这两个类） ---------- */
/* 换 CSS 时漏掉它们会让覆盖率圆环里的数字变成「隐形黑字」—— */
/* <text> 没有 fill 时默认黑色，落在深色底上就看不见了。 */
.rt{fill:var(--ink);font-family:var(--mono);font-size:19px;font-weight:600;
  text-anchor:middle;font-variant-numeric:tabular-nums}
.rs{fill:var(--ink-3);font-family:var(--mono);font-size:10px;text-anchor:middle}
.ring svg,.ringbox svg{display:block}

/* ============================================================
 * 兼容层：其余页面（价格库 / 来源巡检 / 告警 / API Key / 租户 /
 * 登录注册 / 文档）仍使用早期类名。这里把它们映射到新视觉语言，
 * 让整个应用一次性统一，而不是新旧混着。
 *
 * 这些页面后续会逐个改成新布局（侧栏 + 报表式排版），
 * 中途不会出现「点进去像另一个产品」的断层。
 * ============================================================ */

/* ---------- 顶部条（旧页面的导航形态） ---------- */
.hd{position:relative;z-index:3;display:flex;align-items:center;gap:14px;
  width:100%;padding:0 48px;height:70px;
  border-bottom:1px solid var(--line)}
.hd .brand{font-weight:700;font-size:16.5px;letter-spacing:-.2px;
  display:flex;align-items:center;gap:9px}
.hd .brand .tag,.hd .tag{color:var(--ink-3);font-weight:500;font-size:13.5px}
.hd nav{display:flex;gap:28px;margin-left:44px}
.hd nav a{color:var(--ink-2);text-decoration:none;font-size:14px;transition:color .16s}
.hd nav a:hover{color:var(--ink)}
.hd .sp{margin-left:auto}
.hd .badge{font-size:12.5px;color:var(--ink-2);border:1px solid var(--line-2);
  border-radius:7px;padding:5px 11px;text-decoration:none;white-space:nowrap}
.hd .badge b{color:var(--ink);font-weight:600}
.hd form{display:inline}

/* ---------- 容器与栅格 ---------- */
/* 旧页面的内边距：用兄弟选择器限定，避免覆盖首页的 .wrap */
.hd ~ .wrap{padding-top:26px;padding-bottom:70px}
.grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;margin-top:2px}
.grid > *{min-width:0}
.grid.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.g-kpi{grid-template-columns:repeat(5,minmax(0,1fr))}
.grid .span-all{grid-column:1/-1}

/* ---------- 卡片 ---------- */
.card{background:#070A11;border:1px solid var(--line-2);border-radius:12px;
  padding:20px 22px;min-width:0}
.card h2{margin:0 0 14px;font-size:13.5px;font-weight:650;letter-spacing:.1px;
  color:var(--ink)}
.card.kpi{padding:20px}
.card.good{border-color:rgba(200,255,61,.3)}
.card.warn{border-color:rgba(255,176,32,.3)}
.card.bad{border-color:rgba(255,77,61,.32)}

/* 旧 KPI 子结构 */
.kl{font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.kv{font-family:var(--mono);font-size:29px;font-weight:600;letter-spacing:-1.2px;
  margin-top:11px;font-variant-numeric:tabular-nums;color:var(--ink)}
.kn{font-size:12px;color:var(--ink-3);margin-top:6px;font-family:var(--mono)}
.card.good .kv{color:var(--lime)}
.card.warn .kv{color:var(--amber)}
.card.bad .kv{color:var(--burn)}

/* ---------- 表格 ---------- */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -22px}
.tw table{width:100%;border-collapse:collapse;min-width:0}
.tw th{text-align:left;padding:11px 22px;font-size:11px;color:var(--ink-3);
  font-weight:500;font-family:var(--mono);letter-spacing:1.2px;text-transform:uppercase;
  border-bottom:1px solid var(--line);white-space:nowrap}
.tw td{padding:13px 22px;border-bottom:1px solid var(--line);font-size:13.5px;
  vertical-align:middle}
.tw tr:last-child td{border-bottom:0}
.tw tbody tr:hover{background:rgba(255,255,255,.02)}
.scrollhint{font-size:11.5px;color:var(--ink-3);margin-top:10px;font-family:var(--mono)}
.scrollhint::before{content:"↔ ";opacity:.6}

/* ---------- 文本与状态 ---------- */
.note{font-size:12.5px;color:var(--ink-3);line-height:1.75}
.note a,.card a{color:var(--lime);text-decoration:none}
.note a:hover,.card a:hover{text-decoration:underline}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.ok{color:var(--lime)}
.err{color:var(--burn)}
.warn{color:var(--amber)}
.empty{padding:34px 20px;text-align:center;color:var(--ink-3);font-size:13.5px}
.empty::before{content:"— ";opacity:.5}
.src{color:var(--ink-3);text-decoration:none;font-family:var(--mono);font-size:11.5px}
.src:hover{color:var(--ink)}
.linkbtn{background:none;border:0;color:var(--ink-2);font-size:13px;cursor:pointer;
  padding:0;font-family:var(--sans)}
.linkbtn:hover{color:var(--burn);text-decoration:underline}

/* ---------- 代码 ---------- */
.codeblock,.card .code{background:#0B0F18;border:1px solid var(--line-2);border-radius:9px;
  padding:14px 16px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;
  color:#93C5FD;line-height:1.7;-webkit-overflow-scrolling:touch;white-space:pre}
code{font-family:var(--mono);font-size:12.5px;color:#93C5FD;background:#0D1526;
  border:1px solid var(--line-2);border-radius:4px;padding:1px 5px;word-break:break-all}

/* ---------- 表单（旧 simform） ---------- */
.simform{margin:0}
.simform .row{display:flex;gap:11px;align-items:flex-end;flex-wrap:wrap}
.simform .row > *{flex:1;min-width:150px}
.simform button{flex:none;background:var(--lime);color:#05070C;border:0;border-radius:8px;
  padding:10px 20px;font-size:13.5px;font-weight:650;cursor:pointer;font-family:var(--sans)}
.simform button:hover{box-shadow:0 0 22px -2px rgba(200,255,61,.45)}
.simout{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.simrow{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.simrow:last-child{border-bottom:0}
.simrow .sl{color:var(--ink-3);flex:none}
.simrow b{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:600;
  text-align:right}

/* ---------- 可信度面板（旧 trust） ---------- */
.trustlist{display:flex;flex-direction:column;gap:0}
.trustlist li{list-style:none;display:flex;gap:11px;padding:12px 0;
  border-bottom:1px solid var(--line);font-size:13px;color:var(--ink-2);line-height:1.65}
.trustlist li:last-child{border-bottom:0}
.ringbox{display:flex;align-items:center;gap:16px;padding-bottom:16px;
  border-bottom:1px solid var(--line)}

/* ---------- 认证页 ---------- */
.authwrap{position:relative;z-index:1;max-width:430px;margin:0 auto;padding:9vh 22px 60px}
.authcard{background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  border:1px solid var(--line-2);border-radius:16px;padding:34px 30px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9)}
.authtitle{margin:0;font-size:25px;font-weight:750;letter-spacing:-.8px}
.authform{margin-top:24px;display:flex;flex-direction:column;gap:15px}
.authform label{display:block;font-size:12.5px;color:var(--ink-3)}
.authform input{display:block;width:100%;margin-top:6px;background:#0B0F18;
  border:1px solid var(--line-2);color:var(--ink);border-radius:8px;padding:11px 13px;
  font-size:14px;-webkit-appearance:none;appearance:none;font-family:var(--mono)}
.authform input:focus{outline:none;border-color:var(--lime)}
.authform button{width:100%;margin-top:8px;background:var(--lime);color:#05070C;border:0;
  border-radius:9px;padding:13px;font-size:15px;font-weight:700;cursor:pointer;
  font-family:var(--sans)}
.authform button:hover{box-shadow:0 0 26px -2px rgba(200,255,61,.5)}
.authcard .note{margin-top:20px;text-align:center;font-size:13.5px}

/* ---------- 文档页 ---------- */
/* 侧栏底部：账户名一行，下面 FREE 与「退出」并排。
 *
 * 用户反馈这段「不明显、太小、没和 FREE 对齐」。量的结果是：
 *     FREE  49×25  中心 y=868
 *     退出  42×22  中心 y=864   ← 差 4px，且小一圈
 * 颜色用的是 --ink-3（最暗那档），在一排小字里几乎不像按钮。
 *
 * 重做：两者**统一高度**保证水平对齐，退出按钮提亮一档、加图标与明确 hover。 */
.rail-foot{padding:14px 16px 16px;border-top:1px solid var(--line);margin:0 12px}
.rail-foot .acct{font-size:12.5px;color:var(--ink-3);font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.foot-row{display:flex;align-items:center;justify-content:space-between;
  gap:10px;margin-top:10px}
/* form 也设为 flex —— 否则按钮按行内基线排，会与左侧差几个像素 */
.foot-row form{margin:0;display:flex}

/* 两个元素共用同一套盒模型，高度写死同一个值。
   只靠 align-items:center 不够：高度不同时中心仍可能对不齐。 */
.foot-row .plan,
.foot-row .exit{
  height:30px;box-sizing:border-box;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 11px;border-radius:8px;line-height:1;
  font-size:11.5px;white-space:nowrap}

.foot-row .plan{
  border:1px solid rgba(200,255,61,.32);background:var(--lime-dim);color:var(--lime);
  font-family:var(--mono);font-weight:600;letter-spacing:1.2px}

/* 从 --ink-3 提到 --ink-2 并加底色 —— 它是个可点的控件，不该长得像说明文字 */
.foot-row .exit{
  gap:5px;border:1px solid var(--line-2);background:rgba(255,255,255,.05);
  color:var(--ink-2);cursor:pointer;font-family:inherit;
  transition:color .15s,border-color .15s,background .15s}
.foot-row .exit .ic{width:13px;height:13px;flex:none;opacity:.9}
.foot-row .exit:hover{color:var(--ink);border-color:rgba(255,255,255,.26);
  background:rgba(255,255,255,.09)}
.foot-row .exit:hover .ic{opacity:1}
.foot-row .exit:active{transform:translateY(1px)}

/* 分页控件：与排序控件同一套视觉语言，放在表格底部。
   off 态用 span 而不是禁用样式的 a —— 不可点的东西就不该是链接。 */
/* 解除某一段的 overflow:hidden，让内部 position:sticky 能相对视口生效。
   overflow:hidden 会把元素变成滚动容器，sticky 就只在那层里定位 —— 形同虚设。 */
.sec.sec-noclip{overflow:visible}

/* 分页控件粘在视口底部。
   长表格里翻页按钮会被推到很远；粘住之后随时可点，
   用户不必为了翻页先滚到表格末尾。
   注意它必须在表格的横向滚动容器**外面** —— 否则 sticky 只在那层容器内生效。 */
.pager{display:flex;align-items:center;gap:6px;padding:12px 18px;
  border-top:1px solid var(--line-2);flex-wrap:wrap;
  position:sticky;bottom:0;z-index:6;
  /* 接近不透明：0.94 时下面的表格行会透出来，看着像脏了。
     加一层向上的阴影，把它和滚动内容分开。 */
  background:rgba(7,10,17,.985);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 -10px 22px -12px rgba(0,0,0,.9)}
.pg-info{font-size:12.5px;color:var(--ink-3);font-family:var(--mono);flex:none}
.pg-btn{padding:5px 12px;border-radius:7px;font-size:12.5px;color:var(--ink-2);
  text-decoration:none;border:1px solid var(--line);white-space:nowrap}
.pg-btn:hover{color:var(--ink);border-color:rgba(255,255,255,.18)}
.pg-btn.off{color:var(--ink-3);opacity:.4}
.pg-num{min-width:28px;height:28px;padding:0 6px;border-radius:7px;font-size:12.5px;
  color:var(--ink-2);text-decoration:none;font-family:var(--mono);
  display:inline-flex;align-items:center;justify-content:center}
.pg-num:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.pg-num.on{background:rgba(200,255,61,.14);color:var(--lime);font-weight:600}
.pg-gap{color:var(--ink-3);padding:0 2px;font-size:12px}

/* 汇率簿排序控件：三个小按钮，选中的高亮。
   放在 sec-hd 里而不是表格上方 —— 它是「这张表的视图」，属于表头。 */
.fxsort{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:8px;
  padding:2px;flex:none}
.fxsort a{padding:4px 11px;border-radius:6px;font-size:12px;color:var(--ink-3);
  text-decoration:none;font-family:var(--mono);white-space:nowrap}
.fxsort a:hover{color:var(--ink)}
.fxsort a.on{background:rgba(200,255,61,.12);color:var(--lime)}

/* 接入文档：满宽平铺 + 两栏。
   文档页最忌讳「标题居中、正文单栏」—— 宽屏上右边全空，
   而正文一旦拉宽到 1920 行长就没法读了。
   正确做法是把横向空间交给**导航**：右侧 sticky 目录。 */
.docs{width:100%;padding-top:56px}
.docs-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:56px;align-items:end}
.docs-hero-copy{min-width:0}
.docs-hero-copy .lead{max-width:26em}
.docs-quick{min-width:0}
.quick-card{border:1px solid var(--line);border-radius:12px;padding:22px 24px 20px;
  background:rgba(255,255,255,.02)}
.quick-hd{font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--ink-3);text-transform:uppercase;margin-bottom:16px}
.qstep{display:flex;gap:14px;padding:11px 0;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--ink)}
.qstep:first-of-type{border-top:0}
.qstep em{font-style:normal;color:var(--ink-3);font-size:12.5px}
.qn{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:11px;color:var(--lime)}
.quick-end{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:12.5px}

.docs-body{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;
  align-items:start;margin-top:48px}
.docs-main{min-width:0}
/* min-width:0 两处都要写：只写栅格会被里面的表格撑破 */
.docs-main > *,.docs-toc > *{min-width:0}
.docs-toc{position:sticky;top:24px}
.toc-card{border:1px solid var(--line);border-radius:12px;padding:18px 20px;
  background:rgba(255,255,255,.02);margin-bottom:16px}
.toc-hd{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--ink-3);text-transform:uppercase;margin-bottom:12px}
.toc-card a{display:block;padding:7px 0;font-size:13px;color:var(--ink-2);
  text-decoration:none;border-top:1px solid var(--line)}
.toc-card a:first-of-type{border-top:0}
.toc-card a:hover{color:var(--lime)}
.toc-note{font-size:12.5px;line-height:1.7;color:var(--ink-3);padding:8px 0;
  border-top:1px solid var(--line)}
.toc-note:first-of-type{border-top:0;padding-top:0}
.toc-note b{color:var(--ink-2)}
.dh{margin:0 0 10px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.docs-main .sec{scroll-margin-top:24px}

/* 窄屏：右侧目录收成横向条，正文单栏。
   不能只是 display:none —— 那样手机上就没有目录了。 */
@media(max-width:1180px){
  .docs-body{grid-template-columns:minmax(0,1fr);gap:28px}
  .docs-toc{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
  .docs-hero{grid-template-columns:minmax(0,1fr);gap:32px;align-items:start}
}
/* 文档旧版遗留的排版规则 */
.docs h3{margin:18px 0 8px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.docs h2{margin:26px 0 10px;font-size:15px;font-weight:650;color:var(--ink)}
.docs h3{margin:18px 0 8px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.docs p,.docs li{font-size:13.5px;line-height:1.75;color:var(--ink-2)}
.docs ul{padding-left:20px;margin:8px 0}

/* ---------- 兜底 ---------- */
.q{color:var(--ink-3)}
footer{position:relative;z-index:1;width:100%;padding:40px 48px;
  font-size:12px;color:var(--ink-3);font-family:var(--mono)}

/* ---------- 兼容层的响应式 ---------- */
@media (max-width:1080px){
  .grid.g-3,.grid.g-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hd{padding:0 26px}
  .wrap{padding-left:26px;padding-right:26px}
}
@media (max-width:760px){
  .hd{height:auto;padding:12px 18px;flex-wrap:wrap;gap:10px}
  .hd nav{margin-left:0;gap:18px;width:100%;order:3;overflow-x:auto;
    -webkit-overflow-scrolling:touch;padding-bottom:2px}
  .hd nav a{white-space:nowrap;font-size:13px}
  .hd .sp{margin-left:auto}
  .wrap{padding:18px 16px 60px}
  .grid.g-2,.grid.g-3,.grid.g-kpi{grid-template-columns:minmax(0,1fr)}
  .card{padding:16px 15px;border-radius:10px}
  .tw{margin:0 -15px}
  .tw th,.tw td{padding:10px 15px;font-size:12.5px}
  .kv{font-size:23px}
  .authwrap{padding:6vh 16px 50px}
  .authcard{padding:26px 22px}
  .authtitle{font-size:21px}
}

/* ---------- SVG 图表文字（旧 svg.rs 输出依赖这两个类） ---------- */
/* 换 CSS 时漏掉它们会让覆盖率圆环里的数字变成「隐形黑字」—— */
/* <text> 没有 fill 时默认黑色，落在深色底上就看不见了。 */
.rt{fill:var(--ink);font-family:var(--mono);font-size:19px;font-weight:600;
  text-anchor:middle;font-variant-numeric:tabular-nums}
.rs{fill:var(--ink-3);font-family:var(--mono);font-size:10px;text-anchor:middle}
.ring svg,.ringbox svg{display:block}


/* ============================================================
 * 宽屏：满宽之后必须**用掉**横向空间，否则右侧会留一大片空白。
 * 单纯去掉定宽只是把内容拉散，不是「大气」。
 * 首屏在宽屏改为两栏：标题在左、实况面板在右。
 * ============================================================ */
@media (min-width:1440px){
  /* 左栏必须是一个**单独的** grid 项。否则标题、副标题、按钮各自成为一项，
     会被右侧面板的高度撑开，标题掉到页面下半部分。 */
  .hero{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
    column-gap:64px;align-items:start;padding-top:104px;
  }
  .hero > .hero-copy{grid-column:1}
  .hero > .panel{
    grid-column:2;grid-row:1;margin-top:0;align-self:start;
  }
  .hero-copy .eyebrow{display:inline-flex;width:auto;justify-self:start}
  /* 面板变窄后，4 个数字改为 2×2 */
  .hero > .panel .figure-row{grid-template-columns:1fr 1fr}
  .hero > .panel .panel-body{padding:26px 26px 24px}
  .hero h1.big{font-size:68px}
  .lead{max-width:32em}

  /* 段落标题栏也拉开：标题左、说明右，中间留白由 grid 撑开 */
  .sect-hd{grid-template-columns:minmax(0,1fr) minmax(0,30em);column-gap:80px}
}
@media (min-width:1800px){
  .wrap{padding-left:72px;padding-right:72px}
  .nav-in,.final-in,.foot-in,.hd{padding-left:72px;padding-right:72px}
  .hero{column-gap:88px}
  .hero h1.big{font-size:76px}
}

/* ============================================================================
   布局：固定导航 + 移动端抽屉
   ----------------------------------------------------------------------------
   规则写在**最后**，靠层叠覆盖前面的定义 —— 前面的样式是逐轮长出来的，
   散在几处，就地改容易漏。集中在这里，一眼能看出「固定与响应式」这套规则。
   ============================================================================ */

/* 公开页顶栏：滚动时固定。
   blur + 半透明背景：内容从下面穿过时仍然读得清，而不是一块死板的色块。 */
.nav{position:sticky;top:0;z-index:30;
  background:rgba(5,7,12,.86);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%)}

/* logo 现在是链接。去掉下划线并给一点可点区域 */
.mark{text-decoration:none;color:inherit;display:inline-flex;align-items:center;gap:9px}
a.mark:hover .glyph{box-shadow:0 0 18px -2px rgba(200,255,61,.5)}

/* 应用外壳：侧栏固定，只滚右侧内容。
   align-items:flex-start 是关键 —— 默认的 stretch 会让侧栏跟着内容一起变高，
   sticky 就没有可滚动的余量，形同虚设。 */
.shell{display:flex;min-height:100vh;align-items:flex-start}
.rail{position:sticky;top:0;height:100vh;overflow-y:auto;flex:none}
.rail::-webkit-scrollbar{width:6px}
.rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:3px}

/* 顶栏粘在内容区顶部。左内边距要与 .body 对齐 */
.top{position:sticky;top:0;z-index:20;
  background:rgba(5,7,12,.9);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  backdrop-filter:blur(14px) saturate(140%)}

/* 汉堡按钮：只在窄屏出现 */
.burger{display:none;align-items:center;justify-content:center;
  width:38px;height:38px;flex:none;border:1px solid var(--line-2);background:none;
  color:var(--ink-2);border-radius:9px;cursor:pointer;font-size:16px;line-height:1;
  font-family:var(--system,inherit)}
.burger:hover{color:var(--ink);border-color:var(--ink-3)}
.burger:active{transform:scale(.96)}
.scrim{display:none}

/* 无感刷新时的顶部进度条。
   原先只把整页透明度调低 —— 那种反馈太弱，用户不知道是卡住了还是在加载。
   一条 2px 的线是"在进行中"最轻的表达。 */
.vc-bar{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--lime),var(--cyan));
  box-shadow:0 0 10px rgba(200,255,61,.6);
  transition:width .3s ease,opacity .35s ease;opacity:0}
.vc-bar.on{opacity:1}
.vc-bar.done{width:100%!important;opacity:0}

/* 键盘可达性 */
:focus-visible{outline:2px solid var(--lime);outline-offset:2px;border-radius:5px}
.skip{position:absolute;left:-9999px;top:0;z-index:300;
  background:var(--lime);color:#05070C;font-weight:650;font-size:13.5px;
  padding:10px 18px;border-radius:0 0 9px 0;text-decoration:none}
.skip:focus{left:0}

/* 代码块复制按钮。默认隐藏，hover / 聚焦时才出现，不干扰阅读 */
pre{position:relative}
.copy{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:11px;
  padding:3px 9px;border-radius:6px;border:1px solid var(--line-2);
  background:rgba(5,7,12,.85);color:var(--ink-3);cursor:pointer;
  opacity:0;transition:opacity .15s,color .15s}
pre:hover .copy,.copy:focus-visible{opacity:1}
.copy.done{color:var(--lime);border-color:rgba(200,255,61,.45);opacity:1}

/* 尊重系统设置：前庭功能敏感的用户会被动效伤到 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------------------------------------------------------------- 窄屏 */
@media (max-width:900px){
  .burger{display:inline-flex}

  /* 侧栏变成抽屉。用 100dvh 而不是 100vh —— 移动端浏览器地址栏收放时
     vh 不变，抽屉底部会被地址栏盖住。 */
  .rail{
    position:fixed;top:0;left:0;bottom:0;height:100dvh;width:272px;max-width:82vw;
    transform:translateX(-100%);transition:transform .22s cubic-bezier(.4,0,.2,1);
    z-index:60;background:#070A11;border-right:1px solid var(--line-2);
    box-shadow:0 0 48px rgba(0,0,0,.7);padding-top:16px}
  html.vc-drawer .rail{transform:none}
  html.vc-drawer{overflow:hidden}

  .scrim{display:block;position:fixed;inset:0;z-index:55;
    background:rgba(0,0,0,.58);opacity:0;pointer-events:none;
    transition:opacity .2s}
  html.vc-drawer .scrim{opacity:1;pointer-events:auto}

  /* 窄屏内边距收紧 */
  .body{padding:16px 14px 72px}

  /* 顶栏：不允许换行，改为横向滚动。
     原来什么都不做，结果「总览」折成两行、「2026-10」也折行 ——
     一个 58px 高的条里塞三行字，比滚动难看得多。
     横向滚动至少什么都不丢：手机上滑工具栏是常见操作。 */
  .top{padding:0 14px;gap:10px;height:58px;
    flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .top::-webkit-scrollbar{display:none}
  .top > *{flex:none}
  .top h1{font-size:15px;white-space:nowrap;flex:none}
  .top .sp{margin-left:0;flex:1 1 auto;min-width:8px}
  .top .crumb{white-space:nowrap}
  .period{flex:none}
  .top .btn{padding:7px 12px;font-size:12.5px;white-space:nowrap}

  /* KPI 从五列变两列。一列太窄会把数字挤断行，两列刚好 */
  .row-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:15px 15px 14px}
  .kpi .num{font-size:23px;letter-spacing:-.8px}

  /* 宽表格改为横向滚动，而不是把列压成看不清。
     外面套一层滚动容器 —— 直接让 table 溢出会撑破整个页面。 */
  .sec-bd.tight{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sec-bd.tight table{min-width:600px}

  /* ---------- 触控目标 ----------
   * 全量审计（11 页 × 手机/平板/桌面，真实命中测试）发现的全部问题都在这一节。
   * 桌面端零发现 —— 这些只在手指操作的设备上成立。
   *
   * 标准：控件 >= 44x44（Apple HIG），正文内联链接 >= 24x24（WCAG 2.2 AA 2.5.8）。
   * 表格里的链接**不算正文内联链接**，豁免不适用，要按控件标准放大命中区。
   */
  .rail-nav a{padding:13px 12px;font-size:14px}

  /* 汉堡按钮原来 38x38，拇指容易点空 */
  .burger{width:44px;height:44px;font-size:17px}

  /* 告警表单折成 2 列。7 列挤在 356px 里每列只剩 24px，没法用。 */
  .rule-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .rule-form .span2{grid-column:1/-1}

  /* 表单控件统一到 44px 高。原来 35px —— 在手机上不好点，
     尤其是 /alerts 的筛选下拉与 /keys 的输入框。 */
  input,select,textarea{min-height:44px}
  .btn,button:not(.burger){min-height:44px}
  /* 小的行内按钮（如「创建」）单独给最小宽度，否则只有 31px 宽 */
  .row-form button,.inline-btn,.btn-create{min-width:64px}

  /* 表格与面包屑里的链接：加内边距把命中区撑到 24px 以上。
     负 margin 抵消，视觉位置不变。 */
  td a,th a{display:inline-block;padding:6px 3px;margin:-6px -3px}
  .crumb{display:inline-block;padding:6px 4px;margin:-6px -4px}
  .src{display:inline-block;padding:6px 3px;margin:-6px -3px}
  .period button,.period .pbtn,.period .cur{padding:10px 14px}
  .pg-btn,.pg-num{min-height:38px;display:inline-flex;align-items:center}
  /* 窄屏不换行，横向滚动。截图里分页控件折成两排把表尾顶下去了 */
  .pager{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:10px 14px}
  .pager::-webkit-scrollbar{display:none}
  .pager > *{flex:none}
  /* 窄屏两个都放大到 44px（触控目标），高度同值以保持对齐 */
  .foot-row .plan,.foot-row .exit{height:44px;padding:0 14px;font-size:12.5px}
  .foot-row .exit .ic{width:15px;height:15px}

  /* 公开页顶栏。
     链接**不能藏** —— 藏了「接入文档」在首页就没有入口，而它是转化路径的一环。
     但缩小字号也救不了 360px 宽的屏（实测四个链接会被挤成 0 宽）。
     所以和 App 侧栏用同一套抽屉机制：窄屏收进抽屉，任何宽度都成立。 */
  .nav-in{padding:0 13px;height:58px;gap:11px}
  .nav-right{gap:8px;margin-left:auto}
  .nav-right .ghost{display:none}
  .nav-right .btn{padding:7px 11px;font-size:12.5px;white-space:nowrap}
  .mark{font-size:14px;gap:7px}

  .nav-links{
    position:fixed;top:0;left:0;bottom:0;height:100dvh;width:272px;max-width:82vw;
    transform:translateX(-100%);transition:transform .22s cubic-bezier(.4,0,.2,1);
    z-index:60;background:#070A11;border-right:1px solid var(--line-2);
    box-shadow:0 0 48px rgba(0,0,0,.7);
    display:flex;flex-direction:column;align-items:stretch;
    gap:0;margin:0;padding:74px 12px 20px;overflow-y:auto}
  html.vc-drawer .nav-links{transform:none}
  .nav-links a{padding:15px 13px;border-radius:9px;font-size:15px;
    border-bottom:1px solid var(--line);white-space:nowrap}
  .nav-links a:last-child{border-bottom:0}
  .nav-links a:hover{background:rgba(255,255,255,.04)}

  .wrap{padding:0 16px}
  .docs-hero,.docs-body{gap:26px}
  .sec-hd{padding:12px 15px;flex-wrap:wrap;gap:8px}
  .sec-bd{padding:16px 15px}
  td,th{padding:11px 15px}

  /* 移动端不要 hover 效果：触屏上 hover 会"粘住" */
  tbody tr:hover{background:none}
}

/* 手机：KPI 改横向紧凑行（标签在左、数字在右）。
   竖排 5 张卡要占满一整屏，用户得先滚过所有数字才看得到内容 ——
   而手机上最该先看到的是「有没有问题」，不是逐个大数字。
   横排后 5 张卡约 280px，一屏放得下。 */
@media (max-width:560px){
  .row-kpi{grid-template-columns:minmax(0,1fr)}
  .kpi{display:grid;grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"lbl num" "note num";gap:1px 14px;align-items:center;
    padding:13px 15px}
  .kpi .lbl{grid-area:lbl}
  .kpi .num{grid-area:num;margin-top:0;font-size:21px;letter-spacing:-.6px}
  .kpi .note{grid-area:note;margin-top:0}
  .top h1{font-size:14.5px}
  .sec{margin-top:16px}
  .sec-hd h2{font-size:13px}
}

/* 超宽屏：侧栏与内边距同步放大，避免内容贴着边 */
@media (min-width:1800px){
  .rail{width:250px}
  .body{padding:30px 48px 80px}
  .top{padding:0 48px}
}