/* §23: sem framework, <200 KB, 360 px a 4K, contraste AA. Uma folha só. */
:root {
  --bg:#0f1419; --panel:#1a2129; --border:#2a3441; --text:#e6edf3;
  --dim:#8b98a5; --accent:#2f81f7; --ok:#2ecc71; --bad:#e74c3c; --warn:#f1c40f;
}
* { box-sizing:border-box; margin:0; }
body { background:var(--bg); color:var(--text);
       font:15px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
main { max-width:720px; margin:0 auto; padding:16px; }
h1 { font-size:20px; margin:12px 0 16px; }
h1 small { color:var(--dim); font-weight:normal; font-size:13px; }
.card { background:var(--panel); border:1px solid var(--border);
        border-radius:10px; padding:16px; margin-bottom:12px; }
label { display:block; color:var(--dim); font-size:13px; margin:10px 0 4px; }
input { width:100%; padding:12px; border-radius:8px; font-size:16px;
        border:1px solid var(--border); background:var(--bg); color:var(--text); }
button { width:100%; padding:13px; margin-top:14px; border:0; border-radius:8px;
         background:var(--accent); color:#fff; font-size:16px; font-weight:600;
         min-height:44px; }              /* alvo de toque §19A.3 */
button.link { background:none; color:var(--accent); font-weight:normal;
              text-decoration:underline; min-height:32px; padding:6px; }
.err { color:var(--bad); margin-top:10px; min-height:1.2em; }
.hint { color:var(--dim); font-size:13px; margin-top:10px; }
.big { font-size:28px; letter-spacing:4px; text-align:center; margin:14px 0;
       font-family:ui-monospace,Consolas,monospace; }
.sys { display:flex; justify-content:space-between; align-items:center;
       padding:14px 6px; border-bottom:1px solid var(--border); cursor:pointer;
       min-height:44px; }
.sys:last-child { border-bottom:0; }
.dot { display:inline-block; width:10px; height:10px; border-radius:5px;
       margin-right:8px; }
.on  { background:var(--ok); } .off { background:var(--bad); }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; color:var(--dim); font-weight:normal; font-size:12px;
     padding:6px 4px; border-bottom:1px solid var(--border); }
td { padding:8px 4px; border-bottom:1px solid var(--border); }
td.v, th.v { text-align:right; font-family:ui-monospace,Consolas,monospace; }
.q-good{} .q-invalid,.q-overflow{color:var(--warn);}
.q-not_communicating{color:var(--bad);} .q-substituted{color:var(--accent);}
.q-stale{color:var(--dim);}
.state { padding:8px 12px; border-radius:8px; font-size:13px; margin-bottom:10px;
         background:var(--border); }
.state.offline { background:#5c2b29; }
.topbar { display:flex; justify-content:space-between; align-items:center; }
.hide { display:none; }