:root { --bg:#f3f4f6; --card:#fff; --text:#1c2430; --muted:#667085; --line:#d9dde3; --accent:#0b62d6; --accent-t:#fff; --ok:#17a34a; --off:#b6bcc6; --danger:#c62828; }
@media (prefers-color-scheme: dark) {
  :root { --bg:#14181e; --card:#1d232c; --text:#e7eaee; --muted:#98a2b3; --line:#343c48; --accent:#4c9aff; --accent-t:#0b1220; --off:#566070; --danger:#ff6b6b; }
}
* { box-sizing: border-box; }
body { margin:0; font:15px/1.45 "Segoe UI", system-ui, sans-serif; background:var(--bg); color:var(--text); }
h1 { font-size:20px; margin:0; } h2 { font-size:18px; margin:0 0 8px; } h3 { font-size:15px; margin:16px 0 4px; }
.hidden { display:none !important; }
.muted { color:var(--muted); } .error { color:var(--danger); min-height:1.2em; margin:4px 0; }
.spacer { flex:1; }
.center { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:16px; }
header { display:flex; align-items:center; gap:10px; padding:12px 20px; background:var(--card); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px; margin:16px 20px; }
.narrow { width:340px; max-width:100%; margin:0; display:flex; flex-direction:column; gap:10px; }
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; } .row.end { justify-content:flex-end; margin-top:12px; }
label { display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--muted); margin:8px 0; }
label.check { flex-direction:row; align-items:center; gap:6px; margin:0; color:var(--text); font-size:14px; }
input:not([type=checkbox]) { font:inherit; padding:7px 10px; border:1px solid var(--line); border-radius:6px; background:var(--bg); color:var(--text); min-width:0; }
#quick input:not([type=checkbox]) { width:200px; } #search { flex:1; min-width:180px; }
button, a.button { font:inherit; padding:7px 14px; border:1px solid var(--line); border-radius:6px; background:var(--card); color:var(--text); cursor:pointer; text-decoration:none; display:inline-block; }
button:hover, a.button:hover { border-color:var(--accent); }
button.primary, a.button.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-t); font-weight:600; }
button.danger { color:var(--danger); } button:disabled { opacity:.45; cursor:default; }
.tablewrap { overflow-x:auto; margin-top:12px; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--line); white-space:nowrap; }
td.note { white-space:normal; max-width:260px; color:var(--muted); }
th { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
td.actions { text-align:right; } td.actions button { margin-left:6px; }
td.id { font-variant-numeric:tabular-nums; font-family:Consolas, monospace; }
.dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--off); }
.dot.on { background:var(--ok); } .dot.busy { background:#e8a100; }
.sub { display:block; font-size:12px; color:var(--muted); }
.key { font-size:12px; color:var(--muted); margin-left:6px; }
dialog { max-height:calc(100vh - 32px); overflow:auto; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--text); padding:20px; width:480px; max-width:calc(100vw - 32px); }
dialog::backdrop { background:rgba(0,0,0,.45); }
code { background:var(--bg); padding:2px 6px; border-radius:4px; font-family:Consolas, monospace; }
code.wrap { word-break:break-all; display:inline-block; }
table.kv th { text-transform:none; letter-spacing:0; font-size:14px; }
hr { border:0; border-top:1px solid var(--line); margin:16px 0; }
.status { margin:6px 0; padding:8px 10px; border-radius:6px; background:var(--bg); font-size:14px; }
.status:empty { display:none; }
.status.ok { border-left:4px solid var(--ok); } .status.bad { border-left:4px solid var(--danger); }