:root { color-scheme: dark; --bg:#0b0e13; --card:#141a23; --line:#232c3a;
  --txt:#dbe2ec; --mut:#8b96a5; --acc:#5ac8fa; --grn:#3ddc84; --red:#ff6b6b; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--txt);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif; }
#app { max-width:1100px; margin:0 auto; padding:16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; margin-bottom:14px; }
.center { max-width:380px; margin:8vh auto; text-align:center; }
h1 { font-size:20px; margin:0 0 10px; } h2 { font-size:15px; margin:12px 0 6px; }
h3 { font-size:13px; }
input { width:100%; margin:4px 0; padding:9px 10px; background:#0e141d;
  border:1px solid var(--line); border-radius:7px; color:var(--txt); }
button { padding:9px 14px; margin:4px 4px 4px 0; border:0; border-radius:7px;
  background:var(--acc); color:#04121c; font-weight:600; cursor:pointer; }
button.ghost { background:transparent; color:var(--acc); border:1px solid var(--line); }
button:disabled { opacity:.4; cursor:default; }
header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; }
.grid { display:grid; grid-template-columns:2fr 1fr; gap:14px; }
@media (max-width:800px){ .grid{ grid-template-columns:1fr; } }
table { width:100%; border-collapse:collapse; font-size:12.5px; }
th,td { padding:5px 6px; border-bottom:1px solid var(--line); text-align:right; }
th:first-child,td:first-child { text-align:left; }
.muted{ color:var(--mut); } .err{ color:var(--red); } .mono{ font-family:ui-monospace,monospace; font-size:12px; white-space:pre-wrap;}
.big{ font-size:20px; color:var(--grn); }
.badge{ font-size:11px; background:#243247; color:var(--acc); border-radius:20px; padding:2px 10px; }
.dot{ display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--red); margin-right:5px;}
.dot.on{ background:var(--grn); }
canvas{ width:100%; height:220px; background:#0e141d; border:1px solid var(--line); border-radius:7px;}
.hidden{ display:none; } .row{ display:flex; justify-content:space-between; align-items:center;}
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center;}
.modal .card{ width:min(480px,92vw); max-height:88vh; overflow:auto;}
.modal.hidden{ display:none; }
code{ background:#0e141d; padding:2px 6px; border-radius:5px; word-break:break-all;}
#settingsForm label{ display:grid; grid-template-columns:1fr 110px; gap:6px; align-items:center; font-size:12.5px; color:var(--mut);}
#settingsForm input{ width:110px; text-align:right;}