:root{--bg:#11100e;--chrome:#0b0a09;--surface:#191814;--raised:#1d1b17;--rule:#2a2721;--ink:#dcd9cf;--strong:#f1ede2;--muted:#8a867b;--faint:#6f6b62;--accent:#e0a872;--accent-soft:rgba(224,168,114,.16);--on-accent:#1a140d;--ok:#9db07e;--err:#d9806f;--err-bg:#221512;--warn:#e0a872;--comms:#9fb4d0;--r:6px;--r-lg:10px;--mono:ui-monospace,'JetBrains Mono',Menlo,Consolas,monospace;--ui:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:14px;line-height:1.45;-webkit-text-size-adjust:100%}
body{padding-bottom:env(safe-area-inset-bottom)}
a{color:var(--accent);text-decoration:none}
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:8px;padding:10px 12px;padding-top:calc(10px + env(safe-area-inset-top));background:var(--chrome);border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:12.5px}
.top .ttl{color:var(--strong);font-weight:600}
.top .tot{margin-left:auto;color:var(--muted);text-align:right}
.top .back{background:none;border:0;color:var(--accent);font:inherit;font-size:18px;cursor:pointer;padding:0 6px 0 0;line-height:1}
.tabs{display:flex;gap:2px;padding:6px 8px 0;background:var(--chrome);border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:12px}
.tab{padding:6px 12px;color:var(--muted);border-radius:var(--r) var(--r) 0 0}
.tab.on{background:var(--bg);color:var(--strong);box-shadow:inset 0 2px 0 var(--accent)}
main{max-width:720px;margin:0 auto;padding:10px 12px 24px;display:flex;flex-direction:column;gap:8px}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:10px 12px;display:flex;flex-direction:column;gap:6px;min-width:0}
a.card{color:inherit;cursor:pointer}
a.card:active{border-color:var(--faint)}
.card.alert{border-color:var(--err)}
.card.warn{border-color:#5a4430}
.card.off,.card.nosignal{opacity:.65}
.hd{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12.5px;flex-wrap:wrap}
.hd .h{color:var(--strong);font-weight:500}
.hd .s{margin-left:auto;color:var(--faint);font-size:11px;white-space:nowrap}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--faint)}
.dot.ok{background:var(--ok)}.dot.alert{background:var(--err);box-shadow:0 0 0 3px rgba(217,128,111,.2)}.dot.warn{background:var(--warn)}.dot.off{background:var(--faint)}.dot.nosignal{background:var(--comms)}
.meters{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m{display:flex;flex-direction:column;gap:2px;font-family:var(--mono);font-size:11px;color:var(--muted);min-width:0}
.m b{color:var(--strong);font-weight:500}
.m.hot b{color:var(--err)}
.m svg{width:100%;height:22px;display:block}
.m .bar{height:4px;background:var(--rule);border-radius:2px;overflow:hidden}
.m .bar i{display:block;height:100%;background:var(--accent)}
.m.hot .bar i{background:var(--err)}
.ln{font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.ln b{color:var(--ink);font-weight:500}
.banner{display:flex;gap:8px;align-items:center;padding:6px 10px;border-left:2px solid var(--err);background:var(--err-bg);font-family:var(--mono);font-size:11.5px;color:var(--strong);border-radius:0 var(--r) var(--r) 0}
.banner .lbl{color:var(--err);flex:none}
.banner a{margin-left:auto;flex:none}
.btn{font:500 12px var(--ui);padding:6px 12px;border-radius:var(--r);border:1px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:transparent}
.btn.sm{padding:3px 9px;font-size:11.5px}
.btn:disabled{opacity:.45}
.sec{font:600 11px var(--mono);color:var(--muted);letter-spacing:.04em;text-transform:uppercase;margin:6px 0 0;display:flex;align-items:center;gap:8px}
.range{display:flex;gap:4px;margin-left:auto}
.range button{font:11px var(--mono);padding:3px 9px;border-radius:999px;border:1px solid var(--rule);background:none;color:var(--muted);cursor:pointer}
.range button.on{color:var(--strong);border-color:var(--accent)}
.chart{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-lg);padding:8px 10px}
.chart .lg{display:flex;gap:12px;font-family:var(--mono);font-size:11px;color:var(--muted);margin-bottom:4px;flex-wrap:wrap}
.chart .lg i{display:inline-block;width:10px;height:3px;vertical-align:middle;margin-right:4px;border-radius:2px}
.chart svg{width:100%;height:110px;display:block}
table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11.5px}
td,th{padding:5px 6px;text-align:left;border-top:1px solid var(--rule);vertical-align:top}
th{color:var(--muted);font-weight:500;border-top:0}
td.n{text-align:right;color:var(--strong);white-space:nowrap}
td.c{color:var(--ink);overflow-wrap:anywhere;word-break:break-word}
.k{font:10.5px var(--mono);color:var(--err);background:none;border:1px solid var(--rule);border-radius:999px;padding:1px 8px;cursor:pointer;margin-left:6px;white-space:nowrap}
.k.acc{color:var(--accent)}
.k:disabled{opacity:.5}
.chk{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;padding:5px 0;border-top:1px solid var(--rule);min-width:0}
.chk:first-child{border-top:0}
.chk .u{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.chk .ms{margin-left:auto;color:var(--muted);flex:none}
.chk .ms.bad{color:var(--err)}
.acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.hold{position:relative;overflow:hidden;font:500 12.5px var(--ui);padding:12px 10px;border-radius:var(--r);border:1px solid var(--rule);background:var(--surface);color:var(--ink);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;text-align:left;-webkit-touch-callout:none}
.hold.danger{color:var(--err);border-color:var(--err)}
.hold i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--accent-soft);transition:width .1s linear}
.hold.danger i{background:rgba(217,128,111,.25)}
.hold span{position:relative}
.hold small{display:block;font-weight:400;color:var(--muted);font-size:10.5px}
.toast{font-family:var(--mono);font-size:12px;color:var(--ok);padding:2px 0;min-height:1.6em;overflow-wrap:anywhere}
.toast.err{color:var(--err)}
.set{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--rule);font-size:12.5px}
.set:first-child{border-top:0}
.set label{flex:1}
.set input[type=range]{width:120px;accent-color:var(--accent)}
.set output{font-family:var(--mono);font-size:12px;color:var(--strong);width:5.5ch;text-align:right}
.sw{width:36px;height:22px;border-radius:999px;background:var(--rule);position:relative;cursor:pointer;flex:none;border:0;padding:0}
.sw::after{content:"";position:absolute;top:4px;left:4px;width:14px;height:14px;border-radius:50%;background:var(--muted);transition:left .12s}
.sw.on{background:var(--accent)}.sw.on::after{left:18px;background:var(--on-accent)}
.hist{font-family:var(--mono);font-size:11.5px;display:flex;flex-direction:column;gap:3px}
.hist span{color:var(--muted)}
.login{display:flex;flex-direction:column;gap:10px;margin:40px auto 0;max-width:360px;width:100%}
.login input{width:100%;padding:12px;font:14px var(--mono);background:var(--surface);color:var(--strong);border:1px solid var(--rule);border-radius:var(--r)}
.login .btn{padding:12px}
.offline{position:fixed;left:0;right:0;bottom:0;padding:8px 12px;background:var(--err-bg);color:var(--err);font:12px var(--mono);text-align:center;border-top:1px solid var(--err)}
.foot{text-align:center;color:var(--faint);font:11px var(--mono);padding:6px 0}
.empty{color:var(--faint);font:12px var(--mono);padding:14px;text-align:center}
@media (pointer:coarse){.btn,.range button,.k{min-height:32px}.set .sw{height:26px;width:42px}.set .sw::after{width:18px;height:18px}.set .sw.on::after{left:20px}}
@media (min-width:640px){.acts{grid-template-columns:repeat(4,1fr)}#cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}}