/* Design tokens (light default, html[data-theme=dark]) and shared primitives, matching the reference site's system. */
:root{
  --paper:#f8f7f4; --paper-2:#fff; --card:#fff; --track:#efece5; --ink:#1a1a18; --muted:#696762; --frame:#dad6cc; --line:#efece5;
  --chrome:#85837e; --well:#f5f3ef; --well-2:#efece5; --head:#3f6212; --head-lit:#4d7c0f; --fill:#1a1a18; --fill-lit:#3c3c38; --on-fill:#f8f7f4;
  --lime:#a3e635; --phos:#2e7d4f; --phos-dim:#8fb39d; --gold:#9a6b12; --alert:#be123c; --brand:#c2410c;
  --notice:#1a1a18; --on-notice:#f8f7f4; --panel:#1a1a18; --on-panel:#f8f7f4; --tip:#f7fee7; --tip-line:#d9f99d; --on-tip:#3f6212;
  --rest:0 0 0 1px #efece5, 0 1px 2px #3a383208, 0 2px 4px #3a38320a;
  --pop:0 6px 12px -2px #3a38320d, 0 12px 24px -4px #3a383214; --lift:0 6px 12px -2px #3a38320d, 0 12px 24px -4px #3a383214;
  --scroll:#c2beb2; --bar:#f8f7f4f0; --disc-ring:linear-gradient(160deg,#fff 0%,#e6e3dc 100%);
  --strip-h:32px; --topbar-h:60px; --rail-w:244px;
  --sans:"Geist","Geist Fallback",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --crt:"VT323","VT323 Fallback",monospace;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Segoe UI Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --up:var(--head); --down:var(--alert);
}
html[data-theme=dark]{
  --paper:#121211; --paper-2:#1a1a18; --card:#1a1a18; --track:#26251f; --ink:#f2f1ed; --muted:#97958e; --frame:#3a3935; --line:#262521;
  --chrome:#6f6d67; --well:#201f1d; --well-2:#262521; --head:#a3e635; --head-lit:#bef264; --fill:#f2f1ed; --fill-lit:#fff; --on-fill:#121211;
  --phos:#4ade80; --phos-dim:#4a6b58; --gold:#e3b341; --alert:#f2555a; --brand:#ea6a2a;
  --notice:#080807; --on-notice:#f2f1ed; --panel:#1f1f1c; --on-panel:#f2f1ed; --tip:#a3e63512; --tip-line:#a3e63533; --on-tip:#bef264;
  --rest:0 0 0 1px #262521, 0 1px 2px #0000004d; --pop:0 16px 40px #0000008c; --lift:0 8px 22px #00000073;
  --scroll:#3a3935; --bar:#121211f0; --disc-ring:linear-gradient(160deg,#3a3935 0%,#1f1f1c 100%);
}
html[data-rail=compact]{--rail-w:64px}
html[data-notice=off]{--strip-h:0px}
html[data-updown=red]{--up:var(--alert); --down:var(--head)}
*,*::before,*::after{box-sizing:border-box; border:0 solid; margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scrollbar-width:thin; scrollbar-color:var(--scroll) transparent}
body{min-height:100vh; background:var(--paper); color:var(--ink); font:400 14px/1.5 var(--sans); -webkit-font-smoothing:antialiased}
html[lang^=zh] body{line-height:1.6}
a{color:inherit; text-decoration:none}
button,input,textarea,select{font:inherit; color:inherit; background:none}
button{cursor:pointer}
img,svg,canvas{display:block}
::selection{background:color-mix(in srgb,var(--head) 30%,transparent)}
[hidden]{display:none !important}
:focus-visible{outline:2px solid var(--head); outline-offset:2px}
.tnum{font-variant-numeric:tabular-nums}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)} .head{color:var(--head)} .alert{color:var(--alert)} .up{color:var(--up)} .down{color:var(--down)}
.trunc{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.sr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.px{image-rendering:pixelated}

/* page frame */
.grid12{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:12px; width:100%}
.c12{grid-column:span 12}
.page-title{font-size:22px; font-weight:500; letter-spacing:-.02em; line-height:1.36}
.lede{margin-top:8px; max-width:62ch; font-size:13px; line-height:1.625; color:var(--muted)}
.panel{border-radius:6px; border:1px solid var(--line); background:var(--card); padding:20px}
.panel-h{display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; font-weight:500; letter-spacing:-.005em}
.panel-h small{font-size:11px; font-weight:400; color:var(--muted)}
.panel-sub{margin-top:2px; font-size:11px; color:var(--muted)}
.empty{padding:56px 12px; text-align:center; font-size:12.5px; color:var(--muted)}

/* stat strip */
.tiles{display:grid; border:1px solid var(--line); border-radius:6px; background:var(--card); overflow:hidden}
.tiles>div{padding:20px; border-right:1px solid var(--line); min-width:0}
.tiles>div:last-child{border-right:0}
.tile-l{font-size:11px; color:var(--muted)}
.tile-v{margin-top:14px; font-size:22px; font-weight:500; letter-spacing:-.01em; line-height:1.15; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:8px}
.tile-v.lime{color:var(--head)}
.tile-s{margin-top:4px; font-size:11px; color:var(--muted)}
.tiles.t4{grid-template-columns:repeat(4,minmax(0,1fr))} .tiles.t5{grid-template-columns:repeat(5,minmax(0,1fr))}

/* key/value rows */
.kv{display:flex; align-items:baseline; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); padding:3px 0}
.kv:last-child{border-bottom:0}
.kv .k{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.kv .v{font-size:12px; font-variant-numeric:tabular-nums}

/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 12px; border-radius:4px; font-size:13px; font-weight:500; white-space:nowrap; transition:background .15s,border-color .15s,color .15s}
.btn.fill{background:var(--fill); color:var(--on-fill)} .btn.fill:hover{background:var(--fill-lit)}
.btn.line{border:1px solid var(--line); background:var(--card)} .btn.line:hover{border-color:var(--frame)}
.btn.ghost:hover{background:color-mix(in srgb,var(--frame) 35%,transparent)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.4; cursor:not-allowed}
.ibtn{display:grid; place-items:center; width:36px; height:36px; border-radius:4px; color:var(--muted); transition:background .15s,color .15s; flex:none}
.ibtn:hover{background:color-mix(in srgb,var(--frame) 35%,transparent); color:var(--ink)}
.rbtn{display:grid; place-items:center; width:28px; height:28px; border-radius:999px; color:var(--muted)}
.rbtn:hover{background:var(--well); color:var(--ink)}
.arrow{transition:transform .15s} a:hover>.arrow,button:hover>.arrow,.group:hover .arrow{transform:translateX(2px)}
.ext{display:inline-flex; align-items:center; gap:4px} .ext svg{transition:transform .15s} .ext:hover svg{transform:translate(1px,-1px)}

/* segmented control, chips, notes */
.seg{display:inline-flex; align-items:center; gap:4px; border-radius:999px; background:var(--well); padding:4px}
.seg button{white-space:nowrap; border-radius:999px; padding:6px 14px; font-size:12px; font-weight:500; color:var(--muted); transition:background .15s,color .15s}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed=true]{background:#fff; color:var(--ink); box-shadow:0 1px 2px #3a38320f}
html[data-theme=dark] .seg button[aria-pressed=true]{background:var(--track); box-shadow:none}
.seg button .n{margin-left:5px; font-size:11px; color:var(--muted); font-weight:400}
.chip{display:inline-flex; align-items:center; border-radius:3px; padding:3px 6px; font-size:9px; font-weight:500; text-transform:uppercase; letter-spacing:.08em; background:var(--well); color:var(--muted)}
.chip.lime{background:color-mix(in srgb,var(--head) 15%,transparent); color:var(--head)}
.chip.warn{background:color-mix(in srgb,var(--gold) 14%,transparent); color:var(--gold)}
.pill{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:999px; padding:4px 10px; font-size:12px; background:var(--card)}
.soon{border-radius:999px; background:var(--well); padding:1px 6px; font-size:8.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.note{border-radius:6px; border:1px solid var(--line); background:var(--well); padding:8px 12px; font-size:12px; line-height:1.6; color:var(--muted)}
.note.tip{background:var(--tip); border-color:var(--tip-line); color:var(--on-tip)}
.note.alert{border-color:color-mix(in srgb,var(--alert) 35%,transparent); color:var(--alert); background:color-mix(in srgb,var(--alert) 6%,transparent)}
.copy{display:inline-flex; align-items:center; gap:4px; font:400 11px var(--mono); color:var(--muted)} .copy:hover{color:var(--ink)}
.skel{background:var(--well); border-radius:4px; animation:skeleton 1.4s ease-in-out infinite}
.lamp{display:inline-block; width:6px; height:6px; border-radius:999px; background:var(--lime); color:var(--lime); animation:lamp 2.2s ease-in-out infinite; flex:none}
.cursor-blk{display:inline-block; width:9px; height:5px; background:var(--brand); animation:cursor 1.1s steps(1) infinite}

@keyframes lamp{0%,100%{opacity:1; box-shadow:0 0 0 0 color-mix(in srgb,currentColor 50%,transparent)} 50%{opacity:.45; box-shadow:0 0 0 3px color-mix(in srgb,currentColor 0%,transparent)}}
@keyframes cursor{0%,49%{opacity:1} 50%,100%{opacity:0}}
@keyframes skeleton{50%{opacity:.45}}
@keyframes toast-in{from{opacity:0; transform:translateY(-8px)}}
@keyframes sheen{0%{transform:translateX(-180%) skewX(-18deg)} 42%,100%{transform:translateX(460%) skewX(-18deg)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important; transition:none !important}}