/* CatWatcher dark theme (variables and components from web/catlab/index.html) */
:root{--bg:#12161c;--card:#1b212a;--card2:#232b36;--fg:#e8edf4;--dim:#93a1b3;
--ok:#3ddc84;--warn:#ffb020;--bad:#ff4d4f;--acc:#4da3ff;--line:#2c3542;
--x:#ff6b6b;--y:#3ddc84;--z:#4da3ff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
padding:12px;max-width:1200px;margin:0 auto}
h1{font-size:20px;margin:4px 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h2{font-size:14px;margin:0 0 10px;color:var(--acc);text-transform:uppercase;letter-spacing:.06em}
h3{font-size:13px;margin:14px 0 6px;color:var(--dim);text-transform:uppercase;letter-spacing:.05em}
a{color:var(--acc)}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.grid.sta{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.kpi{background:var(--card2);border-radius:10px;padding:9px 11px}
.kpi .v{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums}
.kpi .u{font-size:12px;color:var(--dim);font-weight:400}
.kpi .l{font-size:11px;color:var(--dim)}
.kpi.sel{outline:2px solid var(--acc)}
.kpi.click{cursor:pointer}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.row.end{justify-content:flex-end}
label{font-size:13px;color:var(--dim)}
input,select,textarea{background:#0f1319;color:var(--fg);border:1px solid var(--line);
border-radius:8px;padding:8px 10px;font-size:14px;min-width:0;width:100%;font-family:inherit}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--acc)}
.f{display:flex;flex-direction:column;gap:3px;flex:1 1 120px}
.f.sm{flex:0 1 92px}
.f.md{flex:0 1 180px}
button{background:var(--acc);color:#06121f;border:0;border-radius:9px;padding:10px 14px;
font-size:14px;font-weight:600;cursor:pointer;min-height:40px}
button.sec{background:var(--card2);color:var(--fg);border:1px solid var(--line)}
button.dan{background:var(--bad);color:#fff}
button.mini{padding:5px 9px;min-height:0;font-size:12px}
button:disabled{opacity:.4;cursor:default}
.pill{font-size:12px;padding:3px 9px;border-radius:999px;background:var(--card2);color:var(--dim);white-space:nowrap}
.pill.ok{background:#12321f;color:var(--ok)}
.pill.no{background:#3a1416;color:var(--bad)}
.pill.wa{background:#3a2c10;color:var(--warn)}
.pill.ac{background:#12283f;color:var(--acc)}
.tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.tabs button{background:var(--card);border:1px solid var(--line);color:var(--dim);font-weight:500}
.tabs button.on{background:var(--acc);color:#06121f;border-color:var(--acc);font-weight:600}
.pane{display:none}.pane.on{display:block}
canvas{width:100%;display:block;background:#0f1319;border-radius:9px;border:1px solid var(--line)}
.dim{color:var(--dim);font-size:13px}
.hint{font-size:12px;color:var(--dim);margin-top:6px;line-height:1.5}
.mono{font:12px/1.5 ui-monospace,Menlo,Consolas,monospace}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:5px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--dim);font-weight:500}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.detail td{white-space:normal;background:var(--card2);padding:12px}
tr.click{cursor:pointer}
tr.click:hover td{background:#1f2632}
.scroll{overflow-x:auto}
.lab{display:inline-flex;align-items:center;gap:6px}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex:0 0 auto}
#msg{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;background:#000d;
border:1px solid var(--line);padding:10px 16px;border-radius:9px;font-size:14px;display:none;z-index:9;max-width:90vw}
#msg.err{border-color:var(--bad);color:#ffb3b4}
#msg.ok{border-color:var(--ok)}
.log{font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;background:#0f1319;border:1px solid var(--line);
border-radius:9px;padding:9px;max-height:260px;overflow:auto;white-space:pre-wrap}
.sw{display:flex;align-items:center;gap:8px;font-size:14px;background:var(--card2);
border-radius:9px;padding:8px 11px;flex:1 1 160px}
.sw input{width:19px;height:19px;accent-color:var(--acc);flex:0 0 auto}
.evt{border-left:3px solid var(--warn);padding:5px 9px;margin:5px 0;background:var(--card2);
border-radius:0 8px 8px 0;font-size:13px;display:flex;gap:10px;flex-wrap:wrap}
.evt .t{color:var(--dim);font-variant-numeric:tabular-nums;min-width:64px}
.evt.ok{border-color:var(--ok)}.evt.bad{border-color:var(--bad)}.evt.acc{border-color:var(--acc)}.evt.dim{border-color:var(--line)}
.warnbox{background:#3a2c10;color:#ffd08a;border-radius:9px;padding:10px 12px;font-size:13px;margin-bottom:12px}
.okbox{background:#12321f;color:#b9f5d0;border-radius:9px;padding:10px 12px;font-size:13px;margin-bottom:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:800px){.two{grid-template-columns:1fr}}
.token{font:13px ui-monospace,Menlo,Consolas,monospace;background:#0f1319;border:1px dashed var(--acc);
border-radius:8px;padding:8px 10px;word-break:break-all;user-select:all}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--dim);margin-top:6px}
.empty{color:var(--dim);font-size:13px;padding:10px 0}
.login{max-width:360px;margin:12vh auto}
.login h1{justify-content:center}
.pending{padding:30px;text-align:center;color:var(--dim)}

/* --- Rules: tree editor --- */
.rg-group{border:1px solid var(--line);border-left:3px solid var(--acc);border-radius:8px;padding:6px 8px;margin:6px 0;background:var(--card2)}
.rg-children{margin-left:14px}
.rg-leaf{border:1px solid var(--line);border-radius:8px;padding:4px 8px;margin:4px 0}
.rg-leaf .row,.rg-group .row{flex-wrap:wrap;gap:6px;align-items:center}
button.mini{padding:2px 8px;font-size:12px}

/* --- Collar --- */
#coTable td,#coTable th{vertical-align:top;padding:5px 8px}
.co-group{text-align:left;color:var(--acc);font-size:12px;text-transform:uppercase;padding-top:12px}
tr.co-diff td{background:#2a2410}

/* --- Floorplan / Calibration --- */
#plPos .pill{margin-right:6px}
.ca-sub{margin-top:10px}
#caLabels button{font-size:15px;padding:12px 16px}