*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);font-size:var(--fs-body);background:var(--bg);color:var(--ink);
  line-height:var(--lh-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:var(--r-xs)}
[hidden],.hidden{display:none!important}

[data-theme="dark"],[data-theme="light"],.theme-dark,.theme-light{color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}


h1,.h1{font-size:var(--fs-1);line-height:var(--lh-tight);font-weight:800;letter-spacing:-.02em}
h2,.h2{font-size:var(--fs-2);line-height:1.2;font-weight:750;letter-spacing:-.01em}
h3,.h3{font-size:var(--fs-3);line-height:var(--lh-snug);font-weight:700;letter-spacing:-.01em}
.display{font-size:var(--fs-display);line-height:1.05;font-weight:850;letter-spacing:-.025em}
.body{font-size:var(--fs-body)}
.small{font-size:var(--fs-sm);line-height:1.45}
.eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.eyebrow.accent{color:var(--gold-ink)}
.big-num{font-size:34px;font-weight:850;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.display-num{font-size:var(--fs-display);font-weight:850;letter-spacing:-.025em;line-height:1;font-variant-numeric:tabular-nums}
@media(max-width:520px){.display-num{font-size:36px}}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-2)}
.hint{color:var(--ink-3);font-size:var(--fs-sm)}
.hint.good{color:var(--good)} .hint.warn{color:var(--warn)} .hint.bad{color:var(--bad)}

.pos{color:var(--good);font-weight:650} .neg{color:var(--bad);font-weight:650}
.zero{color:var(--ink-2)} .t-warn{color:var(--warn);font-weight:650}
code{font-family:var(--font-mono);font-size:.9em;background:var(--surface-2);border:1px solid var(--line);
  padding:2px 6px;border-radius:calc(var(--r-sm) / 2);color:var(--ink-2)}
.codeblock{font-family:var(--font-mono);font-size:var(--fs-sm);background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);overflow:auto;max-height:var(--max,320px);white-space:pre;line-height:1.5}
.codeblock .ln{color:var(--ink-3);user-select:none;margin-right:1em}


.container{width:100%;margin:0 auto;padding:0 var(--sp-4);max-width:var(--maxw-ops)}
.container.app{max-width:var(--maxw-app)} .container.report{max-width:var(--maxw-report)} .container.site{max-width:var(--maxw-site)}
.stack{display:flex;flex-direction:column}
.stack.g8>*+*{margin-top:var(--sp-2)} .stack.g12>*+*{margin-top:var(--sp-3)}
.stack.g16>*+*{margin-top:var(--sp-4)} .stack.g24>*+*{margin-top:var(--sp-6)}
.row{display:flex;align-items:center;gap:var(--sp-3)}
.row.between{justify-content:space-between} .row.wrap{flex-wrap:wrap} .row.top{align-items:flex-start}
.grow{flex:1} .center{text-align:center} .pad{padding:var(--sp-5) var(--sp-4)}
.grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fill,minmax(var(--min,280px),1fr))}
.grid.g2{grid-template-columns:1fr 1fr} .grid.g3{grid-template-columns:repeat(3,1fr)} .grid.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:720px){.grid.g2,.grid.g3,.grid.g4{grid-template-columns:1fr}}
.divider{height:1px;background:var(--line);margin:var(--sp-1) 0}
.divider.v{width:1px;height:auto;align-self:stretch;margin:0 var(--sp-1)}
.scroll-y{max-height:var(--max,400px);overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.scroll-y::-webkit-scrollbar{width:6px;height:6px} .scroll-y::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:var(--sp-2)} .skip-link:focus{left:var(--sp-2);background:var(--surface);padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);z-index:100}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-5)}
.page-head .sub{color:var(--ink-2);margin-top:4px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.section-head .meta{color:var(--ink-3);font-size:var(--fs-sm)}
.ic{display:inline-flex;align-items:center;justify-content:center;width:1em;height:1em;line-height:1;flex:none}
.ic.md{font-size:20px} .ic.lg{font-size:26px} .ic.xl{font-size:40px}


.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--tap);padding:0 22px;
  border-radius:var(--r);font-weight:700;font-size:16px;letter-spacing:-.01em;background:var(--surface-2);color:var(--ink);
  transition:transform .12s var(--ease),background .15s,border-color .15s}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--primary);color:var(--primary-ink);box-shadow:var(--shadow-1)}
.btn.accent{background:var(--accent);color:var(--accent-ink)}
.btn.soft{background:var(--accent-bg);color:var(--gold-ink)}
.btn.accent.glow{box-shadow:var(--glow-accent)}
[data-theme="dark"] .btn.soft,.theme-dark .btn.soft{color:var(--gold)}
.btn.ghost{background:transparent;color:var(--ink);border:1.5px solid var(--line-strong)}
.btn.danger{background:var(--bad-bg);color:var(--bad)}
.btn.sm{min-height:var(--tap-sm);font-size:14px;padding:0 14px}
.btn.xs{min-height:28px;font-size:var(--fs-xs);padding:0 10px;border-radius:var(--r-sm);gap:6px}
.btn.lg{min-height:56px;font-size:17px;padding:0 28px}
.btn.block{width:100%}
.btn.toggle[aria-pressed="true"]{background:var(--surface-2);border:1.5px solid var(--primary);color:var(--ink)}
.btn:disabled{opacity:.5;pointer-events:none}
.btn-row{display:flex;gap:10px}
.iconbtn{width:44px;height:44px;border-radius:var(--r-pill);display:grid;place-items:center;color:var(--ink-2);background:var(--surface-2);position:relative}
.iconbtn.sm{width:32px;height:32px}
.iconbtn .count{position:absolute;top:-4px;right:-4px}
.fab{position:fixed;right:var(--sp-4);bottom:calc(var(--sp-4) + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:var(--r-pill);
  background:var(--primary);color:var(--primary-ink);display:grid;place-items:center;box-shadow:var(--shadow-2);font-size:22px;z-index:30}
.seg{display:inline-flex;background:var(--surface-2);padding:3px;border-radius:var(--r-sm);gap:2px}
.seg .btn{min-height:28px;font-size:var(--fs-sm);padding:0 12px;border-radius:calc(var(--r-sm) - 2px);background:transparent;color:var(--ink-2)}
.seg .btn[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-1)}


.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-5);box-shadow:var(--shadow-1)}
.card.flat{box-shadow:none}
.card.flush{padding:0;overflow:hidden}
.card.flush>*{padding-left:var(--sp-5);padding-right:var(--sp-5)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.card-head.strip{margin:0;padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--line);background:var(--surface-2)}
.card-head.strip .eyebrow{margin:0}
.card-body{padding:var(--sp-4) var(--sp-5)}
.card.rule-good{border-left:3px solid var(--good)} .card.rule-bad{border-left:3px solid var(--bad)}
.card.rule-warn{border-left:3px solid var(--warn)} .card.rule-zero{border-left:3px solid var(--line-strong)}
.inset{background:var(--surface-2);border-radius:var(--r-sm);padding:var(--sp-4)}
.card-stat-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-top:var(--sp-3)}
.card-stat-row .l{font-size:var(--fs-xs);color:var(--ink-3);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.card-stat-row .v{font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px}


.tile{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);
  border:1.5px solid var(--line-strong);border-radius:var(--r);padding:var(--sp-4);transition:border-color .15s,background .15s,transform .12s var(--ease)}
.tile:active{transform:scale(.99)}
@media(hover:hover){.tile:hover{background:var(--surface-2)}}
.tile[aria-pressed="true"]{border-color:var(--primary);background:var(--surface-2)}
.tile .emoji{font-size:26px;width:44px;height:44px;display:grid;place-items:center;background:var(--surface-2);border-radius:12px;flex:none}
.tile[aria-pressed="true"] .emoji{background:var(--accent)}
.tile .t-main{flex:1;min-width:0}
.tile .t-title{font-weight:700;font-size:16px;display:block}
.tile .t-sub{font-size:var(--fs-sm);color:var(--ink-2);margin-top:3px;display:block;line-height:1.35}
.tile .t-price{font-weight:800;font-size:15px;white-space:nowrap}
.tile.compact{padding:var(--sp-3);gap:10px} .tile.compact .emoji{width:34px;height:34px;font-size:20px}


.list{display:flex;flex-direction:column}
.list-row{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) 0;border-bottom:1px solid var(--line)}
.list-row:last-child{border-bottom:0}
@media(hover:hover){.list-row.hover:hover{background:var(--surface-2)}}
.list-row .lead{flex:none} .list-row .main{flex:1;min-width:0}
.list-row .title{font-weight:650} .list-row .sub{font-size:var(--fs-sm);color:var(--ink-2)}
.list-row .val{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.list-row.rule-good{box-shadow:inset 3px 0 0 var(--good)} .list-row.rule-bad{box-shadow:inset 3px 0 0 var(--bad)}
.list-row.rule-zero{box-shadow:inset 3px 0 0 var(--line-strong)}
.list-row .rank{width:24px;text-align:center;font-weight:800;color:var(--ink-3);font-variant-numeric:tabular-nums}
.list-row .rank.r1{color:var(--gold-ink)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px var(--sp-3);align-items:baseline}
.kv dt{color:var(--ink-3);font-size:var(--fs-sm)} .kv dd{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.kv.dashed dt{position:relative} 
.checklist{list-style:none} .checklist li{display:flex;gap:10px;align-items:flex-start;padding:6px 0}
.checklist .ic{width:22px;height:22px;border-radius:50%;font-size:12px;background:var(--surface-2);color:var(--ink-2);margin-top:1px}
.checklist .ic.good{background:var(--good-bg);color:var(--good)} .checklist .ic.warn{background:var(--warn-bg);color:var(--warn)}
.checklist .ic.bad{background:var(--bad-bg);color:var(--bad)} .checklist .ic.num{font-weight:800}
.checklist.cols-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 var(--sp-6)}


.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;
  background:var(--surface-2);color:var(--ink-2)}
.pill.good{background:var(--good-bg);color:var(--good)} .pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)} .pill.info{background:var(--info-bg);color:var(--info)}
.pill.accent{background:var(--accent-bg);color:var(--gold-ink)}
.pill.gold{background:var(--gold);color:var(--navy)}
.pill.solid.good{background:var(--good);color:var(--good-ink)} .pill.solid.warn{background:var(--warn);color:var(--warn-ink)}
.pill.solid.bad{background:var(--bad);color:var(--bad-ink)} .pill.solid.info{background:var(--info);color:var(--info-ink)}
.pill.outline{background:transparent;border:1px solid currentColor}
.pill.sm{padding:3px 9px;font-size:var(--fs-xs)} .pill.xs{padding:2px 7px;font-size:11px;gap:4px}
.pill.dash{border:1px dashed var(--line-strong);background:transparent;color:var(--ink-3)}
.side{padding:2px 7px;font-size:11px;font-weight:750;border-radius:var(--r-xs);letter-spacing:.04em;text-transform:uppercase}
.side.long{background:var(--good-bg);color:var(--good)} .side.short{background:var(--bad-bg);color:var(--bad)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none}
.dot.good{background:var(--good)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)} .dot.info{background:var(--info)}
.dot.accent{background:var(--accent)} .dot.sm{width:6px;height:6px}
.dot.pulse{animation:pulse-dot 1.4s var(--ease) infinite}
.dot.glow{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 25%,transparent)}
.badge{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.badge .dot{background:var(--good)}
.badge.warn .dot{background:var(--warn)} .badge.bad .dot{background:var(--bad)} .badge.info .dot{background:var(--info)} .badge.off .dot{background:var(--ink-3)}
.count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);
  font-size:11px;font-weight:700;background:var(--surface-2);color:var(--ink-2);font-variant-numeric:tabular-nums}
.count.bad{background:var(--bad);color:var(--bad-ink)} .count.warn{background:var(--warn);color:var(--warn-ink)}
.count.info{background:var(--info);color:var(--info-ink)} .count.accent{background:var(--accent);color:var(--accent-ink)}
.count:empty{display:none}
.tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-xs);font-size:11px;font-weight:700;
  color:var(--cat,var(--ink-2));background:color-mix(in srgb,var(--cat,var(--ink-2)) 14%,transparent)}
.tag.cat-1{--cat:var(--cat-1)} .tag.cat-2{--cat:var(--cat-2)} .tag.cat-3{--cat:var(--cat-3)} .tag.cat-4{--cat:var(--cat-4)}
.tag.cat-5{--cat:var(--cat-5)} .tag.cat-6{--cat:var(--cat-6)} .tag.cat-7{--cat:var(--cat-7)} .tag.cat-8{--cat:var(--cat-8)}


.verdict{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:var(--r-pill);font-size:var(--fs-xs);font-weight:750;
  letter-spacing:.03em;text-transform:uppercase;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.verdict::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.verdict.ok{background:var(--good-bg);color:var(--good)}
.verdict.idle-ok{background:var(--info-bg);color:var(--info)}
.verdict.scanning{background:var(--info-bg);color:var(--info)} .verdict.scanning::before{animation:pulse-dot 1.4s var(--ease) infinite}
.verdict.degraded{background:var(--warn-bg);color:var(--warn)}
.verdict.down{background:var(--bad-bg);color:var(--bad)}
.verdict.down-expected{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-strong)}
.verdict.down-expected::before{background:transparent;border:1.5px solid currentColor;width:6px;height:6px}
.verdict.unknown{background:var(--surface-2);color:var(--ink-3);border:1px dashed var(--line-strong)}
.verdict.stale,.verdict.nodata{background:var(--bad);color:var(--bad-ink);border:1px dashed color-mix(in srgb,var(--bad-ink) 50%,transparent)}
.verdict.solid{border-radius:var(--r-sm);padding:8px 14px;font-size:var(--fs-sm)}
.verdict .meta{font-weight:600;text-transform:none;letter-spacing:0;color:inherit;opacity:.8}
@keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.25}}
.live{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2)}
.live .dot{background:var(--good);animation:pulse-dot 2s var(--ease) infinite}
.live .age{color:var(--ink-3);font-variant-numeric:tabular-nums}
.live.stale .dot{background:var(--warn);animation:none} .live.down .dot{background:var(--bad);animation:none}
.live.nodata{color:var(--bad)} .live.nodata .dot{background:var(--bad);animation:none;outline:1px dashed var(--bad);outline-offset:2px}


.alert{display:flex;gap:12px;align-items:flex-start;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--ink);border:1px solid var(--line);font-size:var(--fs-sm)}
.alert .ic{font-size:18px;margin-top:1px} .alert .t{font-weight:750} .alert .b{color:inherit;opacity:.9}
.alert.good{background:var(--good-bg);border-color:color-mix(in srgb,var(--good) 30%,transparent);color:var(--good)}
.alert.warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 30%,transparent);color:var(--warn)}
.alert.bad{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 30%,transparent);color:var(--bad)}
.alert.info{background:var(--info-bg);border-color:color-mix(in srgb,var(--info) 30%,transparent);color:var(--info)}
.alert.accent{background:var(--accent-bg);border-color:color-mix(in srgb,var(--gold) 40%,transparent);color:var(--gold-ink)}
.alert .actions{margin-left:auto;flex:none}
.banner{position:sticky;top:0;z-index:25;border-radius:0;border-width:0 0 1px;padding:8px var(--sp-4);align-items:center}
.banner.solid.bad{background:var(--bad);color:var(--bad-ink)} .banner.solid.good{background:var(--good);color:var(--good-ink)}


.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--sp-4)}
.kpi .k-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.kpi .k-val{font-size:28px;font-weight:850;letter-spacing:-.02em;margin-top:6px;font-variant-numeric:tabular-nums}
.kpi .k-sub{font-size:var(--fs-sm);color:var(--ink-2);margin-top:4px}
.kpi.pos .k-val{color:var(--good)} .kpi.neg .k-val{color:var(--bad)} .kpi.zero .k-val{color:var(--ink-2)} .kpi.warn .k-val{color:var(--warn)}
.kpi.accent .k-val{color:var(--gold-ink)}
.kpi.sm{padding:var(--sp-3);border-radius:var(--r-sm);background:var(--surface-2);border:0}
.kpi.sm .k-val{font-size:20px;font-weight:750;margin-top:3px} .kpi.sm .k-label{font-size:11px}
.kpi.center{text-align:center}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp-3)}
.masked{filter:blur(8px);user-select:none;pointer-events:none}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table.data{width:100%;border-collapse:collapse;font-size:14px}
table.data th{text-align:left;padding:10px 14px;font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
  background:var(--surface-2);border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
table.data td{padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
table.data tr:last-child td{border-bottom:0}
table.data th.num,table.data td.num{text-align:right;font-variant-numeric:tabular-nums}
table.data td.num{font-family:var(--font-mono)}
table.data td.pos{color:var(--good);font-weight:650} table.data td.neg{color:var(--bad);font-weight:650}
@media(hover:hover){table.data tbody tr:hover{background:var(--surface-2)}}
table.data.compact{font-size:var(--fs-xs)} table.data.compact th,table.data.compact td{padding:6px 10px} table.data.compact th{position:static}
table.data.grid td,table.data.grid th{border-right:1px solid var(--line)} table.data.grid td:last-child,table.data.grid th:last-child{border-right:0}
.meter{height:8px;background:var(--surface-2);border-radius:var(--r-pill);overflow:hidden;position:relative}
.meter .fill{height:100%;background:var(--accent);border-radius:inherit;width:var(--v,0%)}
.meter.good .fill{background:var(--good)} .meter.warn .fill{background:var(--warn)} .meter.bad .fill{background:var(--bad)} .meter.info .fill{background:var(--info)}
.meter.diverging .fill{position:absolute;left:50%;transform-origin:left} .meter.diverging .fill.neg{transform:scaleX(-1);background:var(--bad)}
.meter-row{display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-3);align-items:center;font-size:var(--fs-sm)}
.meter-row .l{color:var(--ink-2)} .meter-row .v{font-variant-numeric:tabular-nums;font-weight:700}
.chart{position:relative} .chart svg{width:100%;height:auto;display:block}
.chart .grid-line{stroke:var(--chart-grid)} .chart .series{fill:none;stroke:var(--chart-line);stroke-width:1.5}
.chart .area-pos{fill:color-mix(in srgb,var(--chart-pos) 18%,transparent)} .chart .area-neg{fill:color-mix(in srgb,var(--chart-neg) 18%,transparent)}
.chart .s1{stroke:var(--cat-1)} .chart .s2{stroke:var(--cat-2)} .chart .s3{stroke:var(--cat-3)} .chart .s4{stroke:var(--cat-4)}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:var(--sp-8) var(--sp-4);color:var(--ink-3)}
.empty .ic{font-size:40px;opacity:.7;margin-bottom:4px} .empty .t{font-weight:700;color:var(--ink-2)} .empty .h{font-size:var(--fs-sm);max-width:52ch}
.empty.sm{padding:var(--sp-4)} .empty.sm .ic{font-size:26px}
.pager{display:flex;align-items:center;gap:6px;justify-content:center;padding:var(--sp-3) 0}
.pager .status{font-size:var(--fs-sm);color:var(--ink-3);padding:0 8px;font-variant-numeric:tabular-nums}


.field label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--ink-2);margin-bottom:7px}
.input{width:100%;min-height:var(--tap);padding:14px 16px;border-radius:var(--r-sm);background:var(--surface);
  border:1.5px solid var(--line-strong);font-size:16px;transition:border-color .15s}
.input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--focus) 25%,transparent)}
.input[aria-invalid="true"]{border-color:var(--bad)}
.input.sm{min-height:var(--tap-sm);padding:6px 10px;font-size:var(--fs-sm)}
.input.code{font-family:var(--font-mono);letter-spacing:.3em;text-align:center;font-size:22px}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
textarea.input{min-height:88px;padding-top:12px;resize:vertical}
.field .err{color:var(--bad);font-size:var(--fs-sm);font-weight:600;margin-top:6px}
.input-group{display:flex} .input-group .input{border-radius:0} .input-group .input:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.input-group .btn{border-radius:0 var(--r-sm) var(--r-sm) 0;min-height:var(--tap)}
.switch{position:relative;width:60px;height:34px;flex:none;display:inline-block}
.switch input{opacity:0;width:100%;height:100%;margin:0;position:relative;z-index:2;cursor:pointer}
.switch .track{position:absolute;inset:0;background:var(--line-strong);border-radius:999px;transition:background .2s}
.switch .knob{position:absolute;top:3px;left:3px;width:28px;height:28px;background:var(--white);border-radius:50%;transition:transform .2s var(--ease);box-shadow:var(--shadow-1)}
.switch input:checked ~ .track{background:var(--good)} .switch input:checked ~ .knob{transform:translateX(26px)}
.switch input:disabled ~ .track{opacity:.4}
.switch.sm{width:36px;height:20px} .switch.sm .knob{width:14px;height:14px} .switch.sm input:checked ~ .knob{transform:translateX(16px)}
.dropzone{border:2px dashed var(--line-strong);border-radius:var(--r-sm);padding:var(--sp-6);text-align:center;color:var(--ink-2);background:var(--surface-2)}
.dropzone:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.rating{display:inline-flex;gap:2px} .rating input{position:absolute;opacity:0;width:0;height:0}
.rating label{font-size:26px;color:var(--line-strong);cursor:pointer} .rating input:checked ~ label{color:var(--line-strong)}
.rating label.on{color:var(--accent)}
.fav{font-size:20px;color:var(--ink-3)} .fav[aria-pressed="true"]{color:var(--accent)}


.timeline{list-style:none;position:relative;padding-left:6px}
.timeline li{display:flex;gap:14px;padding-bottom:20px;position:relative}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{content:"";position:absolute;left:11px;top:26px;bottom:0;width:2px;background:var(--line)}
.timeline li:last-child::before{display:none}
.timeline .node{width:24px;height:24px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-3);
  font-size:12px;z-index:1;border:2px solid var(--line-strong)}
.timeline li.done .node{background:var(--good);color:var(--good-ink);border-color:var(--good)}
.timeline li.active .node{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);animation:pulse 1.6s infinite}
.timeline .tl-title{font-weight:650} .timeline li.pending .tl-title{color:var(--ink-3)}
.timeline .tl-sub{font-size:var(--fs-sm);color:var(--ink-2)}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 50%,transparent)}50%{box-shadow:0 0 0 8px transparent}}
.stepper{display:flex;gap:6px} .stepper .step{flex:1;height:6px;border-radius:var(--r-pill);background:var(--line)}
.stepper .step.done{background:var(--good)} .stepper .step.active{background:var(--accent)}

.stepper.named{gap:var(--sp-2)}
.stepper.named .step{height:auto;text-align:center;font-size:var(--fs-xs);font-weight:600;line-height:1.25;
  color:var(--ink-3);padding:8px 4px;border-radius:var(--r-sm);background:var(--surface-2);border:1px solid var(--line)}
.stepper.named .step.active{border-color:var(--accent);color:var(--accent);font-weight:750;background:var(--accent-bg)}
.stepper.named .step.done{background:var(--good-bg);border-color:var(--good);color:var(--good)}
.spin{width:20px;height:20px;border:2.5px solid color-mix(in srgb,currentColor 25%,transparent);border-top-color:currentColor;border-radius:50%;
  animation:spin .8s linear infinite;display:inline-block}
.spin.lg{width:40px;height:40px;border-width:3px;color:var(--accent)}
@keyframes spin{to{transform:rotate(360deg)}}
.searching-orb{width:76px;height:76px;border-radius:50%;margin:0 auto;background:radial-gradient(circle at 50% 40%,var(--accent),transparent 68%);position:relative}
.searching-orb::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--accent);opacity:.4;animation:ripple 1.8s var(--ease) infinite}
@keyframes ripple{0%{transform:scale(.7);opacity:.6}100%{transform:scale(1.9);opacity:0}}
.skeleton{background:linear-gradient(90deg,var(--surface-2) 25%,var(--line) 50%,var(--surface-2) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-xs);min-height:1em}
@keyframes shimmer{to{background-position:-200% 0}}
.toast{background:var(--navy);color:var(--white);padding:12px 18px;border-radius:var(--r-pill);font-size:14px;font-weight:600;box-shadow:var(--shadow-2);display:inline-flex;gap:10px;align-items:center}
.toast.good{background:var(--good);color:var(--good-ink)} .toast.bad{background:var(--bad);color:var(--bad-ink)}
.toast-host{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;align-items:center;max-width:88%}
.scrim{position:fixed;inset:0;background:var(--scrim);z-index:40}
.sheet{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-2);z-index:50}
.sheet.center{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,92vw);border-radius:var(--r-lg);padding:var(--sp-6)}
.sheet.right{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);border-radius:0;padding:var(--sp-5);overflow:auto}
.sheet.bottom{position:sticky;bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;border-width:1px 0 0;box-shadow:var(--shadow-3);
  padding:var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom))}
.disclosure{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.disclosure summary{list-style:none;cursor:pointer;padding:var(--sp-3) var(--sp-4);font-weight:650;display:flex;align-items:center;gap:10px}
.disclosure summary::-webkit-details-marker{display:none}
.disclosure summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(-45deg);transition:transform .15s;flex:none}
.disclosure[open] summary::before{transform:rotate(45deg)}
.disclosure .body{padding:0 var(--sp-4) var(--sp-4);color:var(--ink-2);font-size:var(--fs-sm)}
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);
  background:var(--navy);color:var(--white);font-size:var(--fs-xs);font-weight:600;padding:5px 9px;border-radius:var(--r-xs);white-space:nowrap;z-index:60;box-shadow:var(--shadow-1)}


.topbar{display:flex;align-items:center;gap:12px;padding:14px 18px;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar.sticky{position:sticky;top:0;z-index:20}
.topbar.inverse{background:var(--navy);color:var(--white);border-bottom:1px solid var(--navy-3)}
.topbar.accent-rule{border-bottom:2px solid var(--accent)}
.topbar .brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:17px;letter-spacing:-.02em}
.topbar .brand .key{width:26px;height:26px;display:grid;place-items:center;background:var(--navy);color:var(--gold);border-radius:8px;font-size:15px}
.topbar .brand .key.inverse{background:var(--gold);color:var(--navy)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs [role="tab"]{padding:10px 14px;font-weight:650;color:var(--ink-2);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:inline-flex;gap:8px;align-items:center}
@media(hover:hover){.tabs [role="tab"]:hover{color:var(--ink)}}
.tabs [role="tab"][aria-selected="true"]{color:var(--ink);border-bottom-color:var(--primary)}
.tabbar{display:flex;background:var(--surface);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.tabbar [role="tab"],.tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;color:var(--ink-3);font-size:11px;font-weight:600;border-radius:12px;position:relative}
.tabbar [aria-selected="true"],.tabbar button.active{color:var(--primary)}
.tabbar [aria-selected="true"]::before,.tabbar button.active::before{content:"";position:absolute;top:0;width:20px;height:3px;border-radius:2px;background:var(--primary)}
.tabbar .ic{font-size:20px}
.sidenav{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3);background:var(--surface);border-right:1px solid var(--line);min-width:220px}
.sidenav .navsec{margin:var(--sp-3) 0 4px}
.sidenav .navitem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:600;font-size:14px;position:relative}
@media(hover:hover){.sidenav .navitem:hover{background:var(--surface-2);color:var(--ink)}}
.sidenav .navitem[aria-current="page"]{background:var(--surface-2);color:var(--ink);box-shadow:inset 3px 0 0 var(--primary)}
.sidenav .navitem .count{margin-left:auto}
.nav-toggle{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-sm)}
.avatar{width:52px;height:52px;border-radius:50%;background:var(--navy);color:var(--gold);display:grid;place-items:center;font-weight:800;font-size:19px;flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover} .avatar.sm{width:28px;height:28px;font-size:11px} .avatar.md{width:36px;height:36px;font-size:14px}
.avatar.inverse{background:var(--gold);color:var(--navy)}
.stars{color:var(--accent);letter-spacing:1px;font-size:14px}
.link{color:var(--info);font-weight:600;text-decoration:underline;text-underline-offset:2px}


.band{padding:var(--sp-12) var(--sp-4);background:var(--surface)}
.band[data-theme="dark"],.band.navy{background:var(--navy)}
.band .container{padding:0}
.prose{max-width:70ch;line-height:1.65}
.prose p+p{margin-top:1em} .prose ul,.prose ol{padding-left:1.4em;margin:1em 0} .prose li+li{margin-top:.35em}
.prose a{color:var(--info);text-decoration:underline;text-underline-offset:2px}
.prose h2{margin:1.6em 0 .5em} .prose h3{margin:1.3em 0 .4em}
.prose blockquote{border-left:3px solid var(--line-strong);padding-left:1em;color:var(--ink-2);margin:1em 0}
.footer{background:var(--surface);border-top:1px solid var(--line);padding:var(--sp-8) var(--sp-4);color:var(--ink-2);font-size:var(--fs-sm)}
.footer.navy,.footer[data-theme="dark"]{background:var(--navy);color:var(--ink-2)}
.footer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--sp-6)}
.footer-legal{margin-top:var(--sp-6);font-size:var(--fs-xs);color:var(--ink-3)}
.link-row{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4);list-style:none}
.map{background:var(--surface-2);border-radius:var(--r);min-height:200px;position:relative;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:24px 24px}
.pin{position:absolute;width:14px;height:14px;border-radius:50% 50% 50% 0;transform:translate(-50%,-100%) rotate(-45deg);background:var(--primary);border:2px solid var(--surface)}
.pin.tech{background:var(--good)} .pin.job{background:var(--accent)} .pin.offline{background:var(--ink-3)}