*{box-sizing:border-box} :root{color-scheme:dark;--bg:#0b1220;--panel:#142237;--button:#213952;--accent:#50dfc5;--ink:#edf5ff;--muted:#97adc3;--line:#2a425d}body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 "Segoe UI",system-ui,sans-serif}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px max(24px,calc((100% - 1440px)/2));border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px;font-size:24px;font-weight:700;color:var(--ink);text-decoration:none}.brand img{width:52px;height:52px}.brand b{color:var(--accent)}#sync,p,time{color:var(--muted)}main{max-width:1440px;margin:auto;padding:42px 28px 70px}h1{font-size:clamp(30px,4vw,48px);line-height:1.16;margin:12px 0 14px;letter-spacing:-1px}h2{font-size:23px;margin:0 0 16px}h3{font-size:19px;margin:0;overflow-wrap:anywhere}.eyebrow{font-size:12px;letter-spacing:3px;color:var(--accent);font-weight:700}.heading{display:flex;align-items:center;justify-content:space-between;gap:20px}button,input{font:inherit}button{background:var(--button);color:var(--ink);padding:12px 19px;border:1px solid transparent;border-radius:14px;cursor:pointer;min-height:46px;transition:background .15s}button:hover{background:#2b4d68}button:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:3px}button.primary{background:var(--accent);color:#092a2c;font-weight:700}button.active{background:#1c4946;color:var(--accent);border-color:#32786b}button:disabled{opacity:.5;cursor:wait}nav{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0}nav #logout{margin-left:auto}input{width:100%;padding:13px 16px;background:#101e30;border:1px solid var(--line);color:var(--ink);border-radius:14px;min-width:0}.inline{display:flex;gap:10px;align-items:center}.inline input{width:20px}label{display:block;margin-bottom:18px;color:var(--muted)}label input{display:block;margin-top:8px}.toolbar{display:flex;justify-content:space-between;gap:20px;margin-bottom:24px}.toolbar input{max-width:420px}.switch,.actions{display:flex;gap:10px;flex-wrap:wrap}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:20px}.surface,.device,.alert{border:1px solid var(--line);border-radius:24px;background:linear-gradient(135deg,#172a40,#121e31);padding:24px}.device{display:flex;flex-direction:column;gap:18px;cursor:pointer}.device:hover{border-color:#4c8e9c}.device-top{display:flex;justify-content:space-between;align-items:start;gap:14px}.status{font-size:12px;white-space:nowrap;color:var(--accent)}.status.offline{color:#d3a269}.sub{color:var(--muted);font-size:13px}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:16px}.metric strong{font-size:23px;font-weight:600;display:block}.metric span{color:var(--muted);font-size:12px}.meter{height:5px;background:#2d4056;border-radius:4px;margin-top:7px;overflow:hidden}.meter i{display:block;height:100%;background:var(--accent);border-radius:4px}.danger{color:#ffb394}.device .actions{margin-top:auto}.device .actions button{width:100%}.list{display:flex;flex-direction:column;gap:12px}.list .device{display:grid;grid-template-columns:minmax(160px,1fr) 2fr 140px;align-items:center;gap:24px;padding:20px 24px}.list .device-top{flex-direction:column;gap:4px}.list .metrics{grid-template-columns:repeat(4,1fr)}.list .device>.sub{display:none}.list .device .actions{margin:0}dialog{position:fixed;border:1px solid var(--line);border-radius:26px;color:var(--ink);background:#142237;padding:36px;max-width:900px;width:calc(100% - 32px);max-height:90dvh;overflow:auto}dialog::backdrop{background:#030a14c9;backdrop-filter:blur(4px)}.close{position:absolute;right:14px;top:14px;font-size:24px;padding:3px 12px;min-height:38px}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}.detail-grid .surface{padding:18px}.chart{width:100%;height:150px;background:#0d192a;border-radius:14px}.chart polyline{fill:none;stroke:var(--accent);stroke-width:2}.chart text{fill:var(--muted);font-size:12px}.alert{margin:14px 0}.code{font-size:28px;letter-spacing:3px;color:var(--accent);font-weight:700;user-select:all;padding:20px;background:#0c192a;border-radius:14px;overflow-wrap:anywhere}#login{max-width:480px;margin-top:35px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#245b53;color:var(--ink);padding:16px 24px;border-radius:16px;z-index:5;max-width:90%}[hidden]{display:none!important}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--button);border:2px solid var(--bg);border-radius:10px}*{scrollbar-color:var(--button) var(--bg);scrollbar-width:thin}@media(max-width:850px){.list .device{grid-template-columns:1fr}.list .device-top{flex-direction:row}.list .metrics{grid-template-columns:repeat(4,1fr)}.heading{align-items:start}.detail-grid{grid-template-columns:1fr}}@media(max-width:600px){header{padding:20px}.brand{font-size:20px;gap:10px}.brand img{width:44px;height:44px}#sync{display:none}main{padding:28px 18px 50px}.heading,.toolbar{flex-direction:column}.heading>.primary,.toolbar input{width:100%;max-width:none}.switch{width:100%}.switch button{flex:1}nav{gap:8px}nav button{padding:10px 12px;font-size:13px}nav #logout{margin-left:0}.grid{grid-template-columns:minmax(0,1fr)}.list .metrics{grid-template-columns:1fr 1fr}.fields{grid-template-columns:1fr}dialog{padding:48px 20px 24px}.surface{padding:20px}.code{font-size:23px}}

@media(min-width:360px) and (max-width:600px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.grid .device{padding:14px;gap:12px}.grid .device-top{flex-direction:column;gap:5px}.grid .device h3{font-size:16px}.grid .metrics{gap:12px 8px}.grid .metric strong{font-size:18px}.grid .metric span{font-size:11px}.grid .device>.sub{display:none}.grid .device .actions button{padding:10px 6px;font-size:12px;min-height:40px}}