:root{color-scheme:dark;--bg:#10141c;--card:#19212d;--text:#eef3fa;--muted:#9caec3;--good:#60d394;--warn:#ffd166;--bad:#ff6b6b;--line:#2c394a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px system-ui,sans-serif}header,main,footer{max-width:1100px;margin:auto;padding:1rem}header{display:flex;justify-content:space-between;align-items:center}h1,h2{margin:.2rem 0}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1rem}.wide{grid-column:1/-1}.hidden{display:none}.metric{display:flex;justify-content:space-between;padding:.45rem 0;border-bottom:1px solid var(--line)}.muted,footer,#connection{color:var(--muted)}.good{color:var(--good)}.warning{color:var(--warn)}.critical,.alarm{color:var(--bad)}button{border:1px solid #51657d;background:#26374b;color:var(--text);border-radius:7px;padding:.6rem .8rem;cursor:pointer}button:hover{background:#344a65}.actions{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}canvas{width:100%;height:260px}.incident{padding:.6rem 0;border-bottom:1px solid var(--line)}@media(max-width:720px){.grid{grid-template-columns:1fr}.wide{grid-column:auto}header{align-items:flex-start}}