:root{color-scheme:dark;--bg:#071018;--card:#101d28;--line:#243746;--green:#42d392;--red:#ff647c;--muted:#91a4b4}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 10% 0,#123048 0,var(--bg) 38%);color:#edf6fb;font:15px system-ui,sans-serif;min-height:100dvh}
header{display:flex;justify-content:space-between;align-items:center;padding:22px clamp(18px,5vw,70px);border-bottom:1px solid var(--line);background:#071018cc;backdrop-filter:blur(14px);position:sticky;top:0}
.brand{font-size:22px;font-weight:800;letter-spacing:.04em}header small{display:block;color:var(--muted);margin-top:3px}#updated{color:var(--muted)}main{padding:34px clamp(18px,5vw,70px)}.devices{display:grid;gap:24px;max-width:1200px;margin:auto}
.device{background:linear-gradient(145deg,#122432,#0d1821);border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:0 18px 45px #0005}.device-head,.device-head>div{display:flex;align-items:center;justify-content:space-between;gap:12px}.device-head h2{margin:0}.dot{width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 16px var(--green)}.offline .dot{background:var(--red);box-shadow:0 0 16px var(--red)}.offline .device-head strong{color:var(--red)}
.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:24px 0}.metrics span,.sensor{background:#09141d;border:1px solid var(--line);border-radius:14px;padding:16px}.metrics span{color:var(--muted)}.metrics b{display:block;color:#fff;font-size:18px;margin-top:5px}.sensors{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}.sensor{display:grid;gap:7px}.sensor h3{margin:2px 0}.sensor small,.sensor span,footer{color:var(--muted)}.sensor>strong{font-size:20px;color:var(--green)}.sensor.fault{border-color:var(--red)}.sensor.fault>strong{color:var(--red)}footer{margin-top:18px;text-align:right}.login{min-height:100dvh;display:grid;place-items:center}.login form{width:min(390px,90vw);padding:32px;border-radius:20px;background:var(--card);border:1px solid var(--line)}.login h1{margin-bottom:4px}.login p{color:var(--muted)}label{display:grid;gap:8px;margin:25px 0}input,button{border:1px solid var(--line);border-radius:10px;padding:13px;background:#071018;color:#fff}button{background:var(--green);color:#052015;font-weight:800;width:100%;cursor:pointer}.alert{color:var(--red)}
nav{display:flex;align-items:center;gap:16px}a,.link{color:var(--green);text-decoration:none}.link{background:none;padding:0;border:0;width:auto}.narrow{max-width:520px;margin:auto}.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:20px}.admin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}.admin-grid .panel{margin:0}.panel select{width:100%;padding:13px;border:1px solid var(--line);border-radius:10px;background:#071018;color:#fff}.success,.secret-once{padding:14px;border:1px solid var(--green);border-radius:10px;margin:12px 0;color:var(--green)}.secret-once code{display:block;overflow-wrap:anywhere;color:#fff;margin-top:8px}.row{display:flex;justify-content:space-between;gap:16px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}.row small{display:block;color:var(--muted);margin-top:4px}.row form{display:flex;gap:8px}.row button{width:auto}
@media(max-width:650px){header{align-items:flex-start;gap:12px;flex-wrap:wrap}nav{flex-wrap:wrap}.metrics{grid-template-columns:1fr}.device{padding:18px}.device-head{align-items:flex-start}.device-head>div{align-items:flex-start}.row{align-items:flex-start;flex-direction:column}.row form{width:100%}}