:root{
  --navy:#0d2547;--navy2:#16407a;--gold:#f5b942;--gold-ink:#8a5a00;
  --plat1:#e9edf2;--plat2:#b9c2cf;--plat-ink:#334155;
  --bg:#f4f7fc;--card:#ffffff;--ink:#15233b;--muted:#5b6b82;--line:#e3e9f2;
  --ok:#1f7a3f;--ok-bg:#e6f5ec;--warn:#9a4a00;--warn-bg:#fff2e0;--bad:#a3262a;--bad-bg:#fde9ea;--info-bg:#eaf1fb;
  --focus:#1d5fbf;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0b1322;--card:#121d31;--ink:#e7edf6;--muted:#9fb0c6;--line:#24324a;
  --ok:#6fd08f;--ok-bg:#12301f;--warn:#ffb36b;--warn-bg:#33230f;--bad:#ff8a8f;--bad-bg:#3a1619;--info-bg:#15243d;
  --plat1:#2a3445;--plat2:#4a5568;--plat-ink:#e2e8f0;--gold-ink:#f5b942;--focus:#7fb0ff;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0b1322;--card:#121d31;--ink:#e7edf6;--muted:#9fb0c6;--line:#24324a;
  --ok:#6fd08f;--ok-bg:#12301f;--warn:#ffb36b;--warn-bg:#33230f;--bad:#ff8a8f;--bad-bg:#3a1619;--info-bg:#15243d;
  --plat1:#2a3445;--plat2:#4a5568;--plat-ink:#e2e8f0;--gold-ink:#f5b942;--focus:#7fb0ff;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
header.top{background:var(--navy);color:#fff;padding:12px 16px calc(10px)}
.brandrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;max-width:1100px;margin:0 auto}
.logo{font-weight:900;letter-spacing:1px;color:var(--gold);font-size:1.5rem}
.plat{background:linear-gradient(135deg,#f8fafc,#cbd5e1 55%,#94a3b8);color:#1e293b;font-weight:800;padding:3px 10px;border-radius:999px;font-size:.85rem;letter-spacing:.5px}
.demo-pill{background:#ffffff22;border:1px solid #ffffff44;color:#fff;font-size:.75rem;padding:2px 8px;border-radius:999px}
.controls{display:flex;gap:8px;flex-wrap:wrap;max-width:1100px;margin:10px auto 0}
.controls label{font-size:.75rem;color:#cbd5e1;display:flex;flex-direction:column;gap:2px;flex:1 1 150px}
.controls select{width:100%}
nav.tabs{position:sticky;top:0;z-index:5;background:var(--card);border-bottom:1px solid var(--line);overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
nav.tabs .inner{display:flex;max-width:1100px;margin:0 auto;padding:0 8px}
nav.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:12px 10px;color:var(--muted);font:600 .92rem/1 inherit;cursor:pointer;flex:0 0 auto}
nav.tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--gold)}
main{max-width:1100px;margin:0 auto;padding:14px 16px 80px}
.banner{background:var(--info-bg);border:1px solid var(--line);border-left:4px solid var(--plat2);padding:10px 12px;border-radius:10px;font-size:.9rem;color:var(--muted);margin-bottom:12px}
h2{font-size:1.2rem;margin:.2rem 0 .6rem}
h3{font-size:1rem;margin:1rem 0 .4rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;margin:10px 0}
.grid{display:grid;gap:10px}
@media(min-width:720px){.grid.two{grid-template-columns:1fr 1fr}.grid.three{grid-template-columns:repeat(3,1fr)}}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:720px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr))}}
.tile{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.tile span{display:block;color:var(--muted);font-size:.78rem}
.tile b{display:block;font-size:1.15rem;overflow-wrap:anywhere}
.tile.good b{color:var(--ok)}.tile.bad b{color:var(--bad)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:600;font-size:.78rem;white-space:nowrap}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
tr:last-child td{border-bottom:0}
input,select,textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-height:40px;max-width:100%}
input[type=number]{width:7.5em}
input.wide,textarea{width:100%}
textarea{min-height:110px}
label.field{display:flex;flex-direction:column;gap:4px;font-size:.82rem;color:var(--muted)}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end}
button.btn{font:600 .95rem/1 inherit;border-radius:10px;padding:11px 14px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;min-height:42px}
button.primary{background:var(--navy);border-color:var(--navy);color:#fff}
button.gold{background:var(--gold);border-color:var(--gold);color:#1a1300}
button.danger{color:var(--bad);border-color:var(--bad)}
button.small{padding:7px 10px;min-height:34px;font-size:.85rem}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,nav.tabs button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:.75rem;font-weight:700;white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok)}.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}.chip.info{background:var(--info-bg);color:var(--muted)}
.chip.sim{background:var(--plat1);color:var(--plat-ink)}
.muted{color:var(--muted)}.small{font-size:.85rem}
.note{font-size:.85rem;color:var(--muted);margin:.4rem 0}
.steps{list-style:none;padding:0;margin:0}
.steps li{display:flex;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0}
.tick{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.8rem;background:var(--line);color:var(--muted)}
.tick.done{background:var(--ok-bg);color:var(--ok)}
.bidcard{display:flex;flex-direction:column;gap:4px}
.bidcard .t{font-weight:700}
.toast{pointer-events:none;position:fixed;left:50%;bottom:18px;transform:translateX(-50%);max-width:min(92vw,560px);background:var(--ink);color:var(--bg);padding:12px 14px;border-radius:12px;box-shadow:0 8px 24px #0004;z-index:20;font-size:.92rem}
.toast.err{background:var(--bad);color:#fff}
.bars{display:flex;align-items:flex-end;gap:3px;height:120px;padding:6px 0;border-bottom:1px solid var(--line)}
.bar{flex:1;min-width:6px;border-radius:3px 3px 0 0}
.bar.pos{background:var(--ok)}.bar.neg{background:var(--bad)}
.confirm{display:flex;gap:8px;align-items:flex-start;font-size:.88rem;margin:8px 0}
.confirm input{min-height:auto;width:20px;height:20px;margin-top:2px}
.kv{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:.92rem}
.kv .n{text-align:right;font-variant-numeric:tabular-nums}
.kv .sep{grid-column:1/-1;border-top:1px solid var(--line);margin:4px 0}
.hidden{display:none}
.row>*{min-width:0;max-width:100%}
label.field{min-width:0;max-width:100%}
label.field select{width:100%;text-overflow:ellipsis}
.pick{flex:1 1 260px}

/* sizing hooks (no inline styles, so a strict style-src CSP works) */
#main [data-w="4em"]{width:4em}#main [data-w="5em"]{width:5em}#main [data-w="5.5em"]{width:5.5em}#main [data-w="6em"]{width:6em}
#main [data-w="7em"]{width:7em}#main [data-w="8em"]{width:8em}#main [data-w="10em"]{width:10em}#main [data-w="12em"]{width:12em}
#main [data-s="mt8"]{margin-top:8px}#main [data-s="mt0"]{margin-top:0}
#main [data-s="between"]{justify-content:space-between}#main [data-s="between-center"]{justify-content:space-between;align-items:center}
#main [data-s="tall"]{min-height:180px}