/* Every colour is a token so light and dark stay in step. Anything hard-coded
   here would survive the theme switch and look broken in the other mode. */
:root{
  --bg:#f4f5f7; --panel:#fff; --panel-2:#f7f8fa; --panel-3:#eceef1; --field:#fff;
  /* --dim carries the "why this service is unavailable" text, so it has to
     stay readable: 4.7:1 on white, 4.3:1 on the group-header background. */
  --ink:#15181d; --muted:#626a76; --dim:#676f7b;
  --line:#dfe3e8; --line-soft:#eef0f3;
  --accent:#1f5fbf; --accent-fill:#1f5fbf; --on-fill:#fff; --accent-soft:#eaf1fc;
  --good:#0f7a4d; --good-soft:#e7f5ee;
  --warn:#9a5b00; --warn-soft:#fdf3e2; --warn-line:#f0d9ac;
  --bad:#a52020; --bad-soft:#fdeaea; --bad-line:#f3c9c9;
  --info:#0b6f9e; --info-soft:#e6f4fb; --info-line:#bfe2f3;
  --shadow:rgba(0,0,0,.12);
  --radius:8px;
  color-scheme:light;
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    /* Dark theme sampled from Allen's reference screenshot (2026-09-19).
       Neutral near-black surfaces — deliberately NOT purple-tinted — with
       #4f416f as the solid purple fill and four pastels carrying status.
       #4f416f reaches only 1.9:1 on #1f1f1f, so text and links use a lighter
       step off the same hue while the solid colour stays for fills, where
       white sits on it at 9:1. Worst pair in here is 5.0:1. */
    --bg:#121212; --panel:#1f1f1f; --panel-2:#2a2a2a; --panel-3:#333; --field:#191919;
    --ink:#fcfcfc; --muted:#a8a8a8; --dim:#999;
    --line:#333; --line-soft:#292929;
    --accent:#a89bc9; --accent-fill:#4f416f; --on-fill:#fff; --accent-soft:#302b3d;
    --good:#9cfeab; --good-soft:#334335;
    --warn:#fec983; --warn-soft:#433a2f; --warn-line:#66553f;
    --bad:#fe9a98; --bad-soft:#433332; --bad-line:#664646;
    --info:#a0dafe; --info-soft:#343d43; --info-line:#485b66;
    --shadow:rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  /* Dark theme sampled from Allen's reference screenshot (2026-09-19).
     Neutral near-black surfaces — deliberately NOT purple-tinted — with
     #4f416f as the solid purple fill and four pastels carrying status.
     #4f416f reaches only 1.9:1 on #1f1f1f, so text and links use a lighter
     step off the same hue while the solid colour stays for fills, where
     white sits on it at 9:1. Worst pair in here is 5.0:1. */
  --bg:#121212; --panel:#1f1f1f; --panel-2:#2a2a2a; --panel-3:#333; --field:#191919;
  --ink:#fcfcfc; --muted:#a8a8a8; --dim:#999;
  --line:#333; --line-soft:#292929;
  --accent:#a89bc9; --accent-fill:#4f416f; --on-fill:#fff; --accent-soft:#302b3d;
  --good:#9cfeab; --good-soft:#334335;
  --warn:#fec983; --warn-soft:#433a2f; --warn-line:#66553f;
  --bad:#fe9a98; --bad-soft:#433332; --bad-line:#664646;
  --info:#a0dafe; --info-soft:#343d43; --info-line:#485b66;
  --shadow:rgba(0,0,0,.6);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink)}
h1,h2,h3{margin:0;font-weight:600}
button{font:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--field)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}
input[type=checkbox]{padding:0;accent-color:var(--accent-fill)}
header{background:var(--panel);border-bottom:1px solid var(--line);padding:10px 18px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:sticky;top:0;z-index:20}
header h1{font-size:15px;white-space:nowrap}
.spacer{margin-left:auto}
.tabs{display:flex;gap:2px;background:var(--panel-3);padding:2px;border-radius:7px}
.tabs button{border:0;background:transparent;padding:5px 13px;border-radius:5px;color:var(--muted);font-size:13px}
.tabs button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px var(--shadow);font-weight:500}
main{padding:16px 18px 60px;max-width:1500px;margin:0 auto}
.grid{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
@media(max-width:960px){.grid{grid-template-columns:1fr}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:14px}
.panel h2{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
.field{margin-bottom:9px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.field input,.field select{width:100%}
.dims{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.help{font-size:11.5px;color:var(--muted);line-height:1.45;margin:4px 0 9px}
.help>div{margin:3px 0}
.help b{color:var(--ink);font-weight:600}
.help .warn,.help.warn{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn);padding:6px 8px;border-radius:6px;margin:5px 0}
.help .warn b{color:var(--warn)}
.field .help{margin-bottom:0}
.checks{display:flex;flex-direction:column;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.checks label{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
.diag{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.chip{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:4px 11px;font-size:12px}
.chip b{font-weight:600}
.chip.on{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.chip.err{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad)}
table.res{width:100%;border-collapse:collapse}
table.res th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:right;padding:5px 8px;border-bottom:1px solid var(--line);font-weight:600}
table.res th:first-child{text-align:left}
table.res td{padding:6px 8px;border-bottom:1px solid var(--line-soft);text-align:right;font-variant-numeric:tabular-nums}
table.res td:first-child{text-align:left}
table.res tr.grp td{background:var(--panel-2);font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:600}
table.res tr.grp.off td{background:var(--bg);color:var(--dim)}
table.res th.etahead,table.res td.eta{text-align:left}
.eta{font-size:12px;color:var(--ink);white-space:nowrap}
.eta.est{color:var(--dim);font-style:italic}
.legend{margin-top:10px;padding-top:9px;border-top:1px solid var(--line-soft);font-size:11px;color:var(--muted);line-height:1.5}
.legend .eta{font-size:11px}
.from{float:right;text-transform:none;letter-spacing:0;font-size:12px;font-weight:700;color:var(--ink)}
.from.none{font-weight:500;font-style:italic;color:var(--dim)}
.phead{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.phead h2{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.btn.sm{padding:4px 10px;font-size:12px}
.btn.sm.on{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn);font-weight:600}
.upd{font-size:11px;font-weight:600;color:var(--warn);background:var(--warn-soft);border:1px solid var(--warn-line);border-radius:20px;padding:2px 10px;animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}
#resTable,#bdPanel,#diag{transition:opacity .12s ease}
body.calc-stale #resTable,body.calc-stale #bdPanel,body.calc-stale #diag{opacity:.32;filter:grayscale(.5);pointer-events:none}
@media(prefers-reduced-motion:reduce){.upd{animation:none}}
table.res tr.svc{cursor:pointer}
table.res tr.svc:hover{background:var(--accent-soft)}
table.res tr.na td{color:var(--dim)}
.price{font-weight:600}.cust{color:var(--accent);font-weight:700}
.best td{background:var(--good-soft)}.best .cust{color:var(--good)}
.reason{font-size:12px;color:var(--dim);font-style:italic}
.tag{display:inline-block;font-size:10px;padding:1px 6px;border-radius:10px;background:var(--panel-3);color:var(--muted);margin-left:6px;vertical-align:1px}
.tag.inc{background:var(--info-soft);border:1px solid var(--info-line);color:var(--info);font-weight:600}
.bd table{width:100%;border-collapse:collapse;max-width:660px}
.bd td{padding:4px 8px;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}
.bd td:last-child{text-align:right}
.bd td.lbl{color:var(--muted)}
.bd tr.tot td{border-top:2px solid var(--line);border-bottom:0;font-weight:700;padding-top:7px}
.bd tr.sub td{font-weight:600}
.bd .note{font-size:12px;color:var(--muted);margin-top:8px}
.adm{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;align-items:start}
.adm .panel{margin:0}
.kv{display:grid;grid-template-columns:1fr 110px;gap:6px;align-items:center;margin-bottom:6px}
.kv label{font-size:13px}
.kv .hint{grid-column:1/-1;font-size:11px;color:var(--muted);margin:-3px 0 5px}
.btn{border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:7px 13px;border-radius:6px;font-size:13px}
.btn:hover{background:var(--panel-2)}
.btn.pri{background:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-fill)}
.btn.pri:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.5;cursor:default}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.banner{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn);padding:9px 12px;border-radius:var(--radius);font-size:13px;margin-bottom:14px}
.banner.bad{background:var(--bad-soft);border-color:var(--bad-line);color:var(--bad)}
.login{max-width:340px;margin:9vh auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:22px}
.login h1{font-size:17px;margin-bottom:4px}
.login p{color:var(--muted);font-size:13px;margin:0 0 16px}
.login input{width:100%;margin-bottom:9px}
.login .btn{width:100%}
.pwrule{font-size:12px;color:var(--muted);margin:2px 0 10px;padding-left:18px}
.pwrule li{margin:1px 0}
small.src{color:var(--muted);font-size:11px}
.pw{border:1px solid var(--line);border-radius:6px;padding:10px;margin-bottom:8px}
.pw.active{border-color:var(--good);background:var(--good-soft)}
.pw .row input,.pw .row select{flex:1;min-width:88px}
.utable{width:100%;border-collapse:collapse;font-size:13px}
.utable td,.utable th{padding:5px 6px;border-bottom:1px solid var(--line-soft);text-align:left}
.utable th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}