:root{--bg:#0f1419;--card:#1a2230;--ink:#e6edf3;--mut:#8b98a9;--ac:#2196F3;--bd:#222c3a;
  --canvas:#0c121b;--grid:#222c3a;--land:#16202e;--ocean:#0e1826;--coast:#2c3b52;--gratic:#172234;
  --z1:#ffffff08;--z2:#ffffff16;--input:#0f1722;--btn:#22324a;--btnh:#2b3e5c;--chip:#0f1722;--hot:#16202e}
:root.light{--bg:#f4f6f9;--card:#ffffff;--ink:#1a2230;--mut:#5a6776;--ac:#1976D2;--bd:#dce2ea;
  --canvas:#eef2f7;--grid:#dce2ea;--land:#d6e0ec;--ocean:#e9eef5;--coast:#a8b6c6;--gratic:#dde4ec;
  --z1:#00000006;--z2:#00000012;--input:#eef2f7;--btn:#e7ecf2;--btnh:#dbe2ea;--chip:#eef2f7;--hot:#e8f0fb}
*{box-sizing:border-box}
body{margin:0;font:15px/1.5 -apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink)}
header{padding:22px 28px;border-bottom:1px solid var(--bd);display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
h1{margin:0;font-size:21px;letter-spacing:.5px}
header .sub{color:var(--mut);font-size:13px}
.wrap{max-width:1180px;margin:0 auto;padding:22px 20px 60px}
#drop{border:2px dashed #33405264;border-radius:14px;padding:40px;text-align:center;color:var(--mut);
      background:var(--card);cursor:pointer;transition:.15s}
#drop.hot{border-color:var(--ac);color:var(--ink);background:var(--hot)}
#drop b{color:var(--ink)}
input[type=file]{display:none}
.note{color:var(--mut);font-size:12.5px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:12px;margin-top:6px}
.card{background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:13px 15px}
.card .k{font-size:19px;font-weight:700}
.card .l{color:var(--mut);font-size:12px;margin-top:2px}
.hl{outline:1px solid #4CAF5055}
.panel{background:var(--card);border:1px solid var(--bd);border-radius:12px;padding:18px;margin-top:20px}
.panel h2{margin:0 0 12px;font-size:13px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.05em;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.grid2>.panel,.grid3>.panel{margin-top:0}
@media(max-width:820px){.grid2,.grid3{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--bd);white-space:nowrap}
th{color:var(--mut);font-weight:600}
td.n,th.n{text-align:right}
.swatch{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:6px;vertical-align:middle}
canvas{max-height:300px}
.err{color:#ff6b6b}
.warn{color:#ff9800}
.tabbar{display:flex;gap:4px;margin-bottom:18px;border-bottom:1px solid var(--bd)}
.tabbtn{background:none;border:none;border-bottom:2px solid transparent;color:var(--mut);padding:9px 18px;cursor:pointer;font:inherit;font-size:14px;font-weight:600}
.tabbtn:hover{color:var(--ink)}
.tabbtn.active{color:var(--ink);border-bottom-color:var(--ac)}
table.matrix td,table.matrix th{text-align:center;padding:3px 8px;font-variant-numeric:tabular-nums}
table.matrix td.op,table.matrix th.op{text-align:left;font-weight:600}
table.matrix td.z{color:#55617340}
table.matrix .tot{font-weight:700}
.lbgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:16px}
.lbcol h3{margin:0 0 6px;font-size:12px;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.lbcol ol{margin:0;padding-left:20px;font-size:13px}
.lbcol li{padding:1px 0}
.lbcol li b{color:var(--ac)}
table tr.rarerow{background:#ff980018}
.rarebadge{color:#ff9800;font-weight:700;font-size:11px;white-space:nowrap}
.hide{display:none}
.scroll{max-height:340px;overflow:auto}
.dirwrap{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:flex-start}
.dirfig{margin:0;text-align:center}
.dirfig canvas{width:300px;max-width:80vw;height:auto;display:block}
.dirfig figcaption{margin-bottom:6px;line-height:1.3}
table.dirheattable{font-size:11px;border-collapse:collapse}
table.dirheattable th,table.dirheattable td{border:none;padding:1px 3px;white-space:nowrap}
table.dirheattable thead th{color:var(--mut);font-weight:600;text-align:center;font-size:10px}
table.dirheattable thead th.vh{writing-mode:vertical-rl;font-size:9px;padding:3px 0;line-height:1;height:30px}
table.dirheattable td.lab{text-align:right;color:var(--ink);font-variant-numeric:tabular-nums}
table.dirheattable td.fl{color:var(--mut);font-size:10px}
table.dirheattable th,table.dirheattable td{padding:0 1px}
table.dirheattable td.cell{width:12px;height:13px;text-align:center;font-size:8px}
table.dirheattable tbody tr td{background:var(--z1)}        /* even hour rows */
table.dirheattable tbody tr.zebra td{background:var(--z2)}  /* odd hours: lighter, to separate adjacent hours */
table.dirheattable tbody tr.totrow td{background:none;border-top:1px solid #2c3b52}
/* controls */
#ctl{position:sticky;top:0;z-index:5}
.ctlrow{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.ctlrow .grp{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:5px;background:#0f1722;border:1px solid var(--bd);
      background:var(--chip);border-radius:999px;padding:3px 10px;font-size:12.5px;cursor:pointer;user-select:none}
.chip input{accent-color:var(--ac);margin:0}
.lbl{color:var(--mut);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
select,input[type=number],input[type=text]{background:var(--input);color:var(--ink);border:1px solid var(--bd);border-radius:7px;padding:4px 8px;font:inherit;font-size:13px}
button.btn{background:var(--btn);color:var(--ink);border:1px solid var(--bd);border-radius:7px;padding:5px 12px;cursor:pointer;font:inherit;font-size:13px}
button.btn:hover{background:var(--btnh)}
.privacy{color:var(--mut);font-size:12px;margin:24px 2px 0;text-align:center}
#cbsPre{font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);
  background:var(--canvas);border:1px solid var(--bd);border-radius:8px;padding:14px;
  overflow:auto;max-height:70vh;white-space:pre}