:root{color-scheme:dark;--bg:#101923;--panel:#192635;--line:#304253;--muted:#b0c0ce;--text:#f3f7fa;--accent:#baf273}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 Tahoma,Arial,sans-serif}main{max-width:1080px;padding:32px 28px;margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding-bottom:30px;border-bottom:1px solid var(--line)}.brand{display:flex;gap:14px;align-items:center;color:inherit;text-decoration:none;font-size:22px;font-weight:bold}.brand-icon{display:grid;place-items:center;background:var(--accent);color:var(--bg);border-radius:12px;width:48px;height:48px;font:700 28px Arial}.brand small{display:block;font:11px/1.8 Arial;letter-spacing:1.7px;color:var(--muted)}.tag{font-size:14px;color:var(--muted)}.intro{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:38px 0 25px}h1{font-size:36px;line-height:1.35;margin:8px 0}p{margin:8px 0;color:var(--muted)}.eyebrow{font-size:14px;color:var(--accent);margin:0}button{font:inherit;background:var(--accent);color:#182213;border:0;border-radius:10px;min-height:48px;padding:10px 18px;cursor:pointer;font-weight:bold}button:disabled{opacity:.6;cursor:wait}button span{margin-right:8px}.update-bar{display:flex;justify-content:space-between;gap:15px;font-size:14px;color:var(--muted);padding:15px 0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;min-width:0}.card-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.number{font:14px monospace;color:var(--muted)}.badge{font-size:14px;border-radius:30px;padding:4px 10px;background:#2d3b49;color:#d5dee5;display:inline-block}.online{background:#213e31;color:#baf273}.offline{background:#4b282e;color:#ffb6bf}.protected{background:#493d24;color:#f6d48b}h2{font-size:24px;margin:18px 0 0;text-align:right}.card p{font-size:14px;margin:2px 0 12px}.host{font:14px/1.6 monospace;color:var(--muted);overflow-wrap:anywhere;text-align:right}.detail{font-size:13px;color:var(--muted);min-height:44px;padding:12px 0}.open{margin-top:auto;display:block;text-align:center;padding:9px;border:1px solid #516477;border-radius:9px;color:var(--text);text-decoration:none;min-height:46px}.open:hover{background:#2b4054}.battery{margin-top:22px;padding:26px;background:linear-gradient(120deg,#243529,#192635 65%);border:1px solid #405744;border-radius:16px}.battery-heading{display:flex;align-items:center;justify-content:space-between}.battery h2{margin:4px 0;font-family:Arial,sans-serif;letter-spacing:1px}.metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:26px 0 18px;gap:20px}.metrics>div{display:flex;flex-direction:column;gap:5px}.metrics>div+div{border-right:1px solid var(--line);padding-right:24px}.metrics strong{font:38px/1.4 Arial,sans-serif;direction:ltr;text-align:right}.metrics strong.charging{font:22px/2.4 Tahoma,Arial,sans-serif}.metrics span,.note,footer{font-size:14px;color:var(--muted)}meter{width:90%;height:12px;accent-color:var(--accent)}footer{padding:24px 0}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:4px}@media(max-width:760px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.intro{padding-top:26px}h1{font-size:30px}}@media(max-width:480px){main{padding:22px 16px}header{padding-bottom:22px}.tag{display:none}.intro{display:block}.intro button{margin-top:14px;width:100%}.update-bar{flex-direction:column;gap:2px}.grid{grid-template-columns:1fr}.card{padding:20px}.metrics{gap:12px}.metrics>div+div{padding-right:12px}.metrics strong{font-size:28px}.metrics strong.charging{font-size:16px}.battery{padding:20px}.metrics span{font-size:14px}}@media(prefers-reduced-motion:no-preference){.open,button{transition:background .15s}}

.metrics strong.charging{direction:rtl;font-size:clamp(1rem,2.5vw,1.375rem);line-height:1.7;overflow-wrap:anywhere}.metrics strong.charger-connected{color:#baf273}.metrics strong.charger-disconnected{color:#ffb6bf}