:root{color-scheme:dark;--bg:#071018;--panel:#10202b;--line:#263b49;--text:#f5f7f9;--muted:#95a8b5;--accent:#94d82d;--good:#44d362;--bad:#ef493b}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,sans-serif;background:radial-gradient(circle at 80% -20%,#1b526866,transparent 35%),var(--bg);color:var(--text)}header{display:flex;justify-content:space-between;align-items:center;padding:18px clamp(18px,5vw,64px);border-bottom:1px solid var(--line);position:sticky;top:0;background:#071018e8;backdrop-filter:blur(12px)}header small{display:block;color:var(--muted);margin-top:3px}#pill{padding:8px 12px;border:1px solid var(--line);border-radius:999px;font-weight:800;font-size:.78rem}.online{color:var(--good)}.offline{color:var(--bad)}main{width:min(1100px,calc(100% - 30px));margin:32px auto 70px}.hero{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:20px}em{color:var(--accent);font-style:normal;font-size:.72rem;font-weight:900;letter-spacing:.16em}h1{font-size:clamp(2rem,6vw,3.8rem);margin:5px 0;line-height:1}.hero p,article p{color:var(--muted)}button{border:1px solid var(--line);background:#142734;color:white;padding:11px 16px;border-radius:12px;font-weight:800}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}article,.panel{border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,#142633,#0b1821);box-shadow:0 18px 50px #0003}article{min-height:205px;padding:22px;display:flex;flex-direction:column;justify-content:space-between}article label{color:var(--muted);font-weight:800}article strong{font-size:clamp(3rem,10vw,5.2rem);line-height:1;letter-spacing:-.06em}article strong small{font-size:.28em;color:var(--muted);letter-spacing:0;margin-left:7px}.status{display:flex;align-items:center;gap:18px}.status i{width:82px;height:82px;border-radius:50%;background:#566a77}.status i.normal{background:var(--good);box-shadow:0 0 30px #44d36255}.status i.alarm{background:var(--bad);box-shadow:0 0 30px #ef493b66}.status b{font-size:1.7rem}.meter{height:12px;background:#263846;border-radius:999px;overflow:hidden}.meter span{display:block;height:100%;width:0;background:var(--accent);border-radius:inherit;transition:.4s}.panel{margin-top:16px;padding:22px}.panel h2{margin:5px 0 18px}canvas{width:100%;height:auto;display:block}#empty{text-align:center;color:var(--muted);padding:40px}#error{margin-top:16px;padding:15px;border:1px solid #ef493b66;border-radius:14px;color:#ffb4ac;background:#ef493b14}footer{text-align:center;color:var(--muted);padding:28px;font-size:.8rem}@media(max-width:720px){.grid{grid-template-columns:1fr}.hero{align-items:flex-start}article{min-height:180px}}