@font-face{font-family:BoxiGen;src:url(fonts/BOXIGEN.ttf) format('truetype');font-display:swap}
:root{--bg:#0f0f0f;--card:#111;--edge:#242424;--fg:#e5e5e5;--mut:#8a8a8a;--acc:#22c55e;--acc2:#16a34a;--warn:#f59e0b;--crit:#ef4444;--blue:#3b82f6;--dim:#1c1c1c}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--fg);font-family:system-ui,sans-serif;display:flex;justify-content:center;padding:26px 14px}
.wrap{width:100%;max-width:1240px}
a{color:inherit;text-decoration:none}
h1{font-family:BoxiGen,system-ui;color:var(--acc);font-size:1.8rem;letter-spacing:.14em}
.sub{color:var(--mut);font-size:.85rem;margin:2px 0 4px}
.eyes{color:var(--mut);font-size:.8rem;margin-bottom:18px}
.eyes b{color:var(--acc);font-weight:600}
.crumb{color:var(--mut);font-size:.85rem;display:inline-block;margin-bottom:10px}
.crumb:hover{color:var(--acc)}

/* alerts */
#alerts{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.alert{border:1px solid var(--edge);border-left:4px solid var(--warn);background:var(--card);border-radius:10px;padding:9px 13px;font-size:.88rem}
.alert.crit{border-left-color:var(--crit)}
.alert b{font-family:BoxiGen,system-ui;letter-spacing:.06em;font-weight:400;margin-right:6px}
.alert.warn b{color:var(--warn)}.alert.crit b{color:var(--crit)}

/* fleet grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px}
.loading{color:var(--mut);padding:30px 4px}
.card{background:var(--card);border:1px solid var(--edge);border-radius:14px;padding:14px 16px}
.dev.offline{opacity:.75}
.dev .head{display:flex;align-items:center;gap:9px;margin-bottom:2px}
.dot{width:9px;height:9px;border-radius:50%;background:#444;flex:none}
.online>.head .dot{background:var(--acc);box-shadow:0 0 7px var(--acc);animation:pulse 2.4s infinite}
@keyframes pulse{50%{box-shadow:0 0 2px var(--acc)}}
.devname{font-family:BoxiGen,system-ui;font-size:1.06rem;letter-spacing:.08em;text-transform:uppercase}
.devname:hover{color:var(--acc)}
.chip{margin-left:auto;font-size:.74rem;border:1px solid var(--edge);border-radius:20px;padding:2px 9px;color:var(--mut);white-space:nowrap;font-variant-numeric:tabular-nums}
.chip.charge{color:var(--acc);border-color:var(--acc2)}
.chip.low{color:var(--crit);border-color:var(--crit)}
.chip.old{color:var(--warn);border-color:var(--warn)}
.chip+.chip{margin-left:0}
.meta{color:var(--mut);font-size:.76rem;margin-bottom:11px}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:8px;margin-bottom:10px}
.stat{background:#141414;border:1px solid var(--edge);border-radius:10px;padding:7px 9px 5px}
.stat .l{color:var(--mut);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.stat .v{font-size:1.06rem;font-weight:600;font-variant-numeric:tabular-nums;margin:1px 0 2px}
.stat .u{color:var(--mut);font-size:.66rem;font-weight:400}
.stat svg{display:block;width:100%;height:22px}
.spark{stroke:var(--acc);stroke-width:1.4;fill:none;stroke-linejoin:round;stroke-linecap:round}
.sparkfill{fill:var(--acc);opacity:.12;stroke:none}

/* disk bars */
.disks{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.dbar{display:flex;align-items:center;gap:8px;font-size:.72rem;color:var(--mut)}
.dbar .m{width:88px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}
.dbar .track{flex:1;height:5px;background:var(--dim);border-radius:3px;overflow:hidden}
.dbar .fill{display:block;height:100%;background:var(--acc2);border-radius:3px}
.dbar.hot .fill{background:var(--crit)}
.dbar .pct{width:74px;text-align:right;font-variant-numeric:tabular-nums}

.netline,.gpuline{color:var(--mut);font-size:.76rem;margin-bottom:7px;font-variant-numeric:tabular-nums}
.netline b,.gpuline b{color:var(--fg);font-weight:500}
.procs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:11px}
.proc{font-size:.72rem;background:#161616;border:1px solid var(--edge);border-radius:7px;padding:2px 8px;color:var(--mut);font-variant-numeric:tabular-nums}
.proc b{color:var(--fg);font-weight:500}

/* 7-day timeline */
.tl{margin-bottom:8px}
.tl svg{display:block;width:100%;height:12px}
.tl .lbl{display:flex;justify-content:space-between;color:#555;font-size:.62rem;margin-top:2px}
.foot{color:#555;font-size:.7rem;display:flex;justify-content:space-between;gap:8px}
.foot .ago.stale{color:var(--warn)}

/* archive shelf */
.shelf{margin-top:22px}
.shelf summary{cursor:pointer;color:var(--mut);font-size:.85rem;padding:6px 2px}
.shelf summary:hover{color:var(--fg)}
#archgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;margin-top:10px}
.arch{opacity:.6}
.arch .devname{color:var(--mut)}

/* device detail page */
.dhead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:4px}
.dhead h1{font-size:1.6rem}
.metagrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;margin:14px 0}
.metagrid .kv{background:var(--card);border:1px solid var(--edge);border-radius:10px;padding:8px 11px}
.metagrid .k{color:var(--mut);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase}
.metagrid .v{font-size:.86rem;margin-top:2px;word-break:break-word}
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-bottom:12px}
.chart .head2{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.chart .l{color:var(--mut);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.chart .cur{font-size:1rem;font-weight:600;font-variant-numeric:tabular-nums}
.chart .cur .u{color:var(--mut);font-size:.7rem;font-weight:400}
.chart svg{display:block;width:100%;height:110px}
.chart .range{display:flex;justify-content:space-between;color:#555;font-size:.62rem;margin-top:3px;font-variant-numeric:tabular-nums}
.legend{display:flex;gap:12px;color:var(--mut);font-size:.68rem;margin-top:4px}
.legend i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:4px;vertical-align:middle}
.section{margin:18px 0 8px;color:var(--mut);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
table.ifc{width:100%;border-collapse:collapse;font-size:.8rem}
table.ifc th{text-align:left;color:var(--mut);font-weight:500;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:5px 8px;border-bottom:1px solid var(--edge)}
table.ifc td{padding:6px 8px;border-bottom:1px solid #1a1a1a;font-variant-numeric:tabular-nums}
details.raw{margin-top:16px}
details.raw summary{cursor:pointer;color:var(--mut);font-size:.8rem}
details.raw pre{background:var(--card);border:1px solid var(--edge);border-radius:10px;padding:12px;font-size:.72rem;overflow-x:auto;margin-top:8px;color:#9a9a9a}

/* diagnostics */
table.diag{width:100%;border-collapse:collapse;font-size:.8rem}
table.diag td{padding:6px 8px;border-bottom:1px solid #1a1a1a;vertical-align:top;word-break:break-word}
table.diag tr:last-child td{border-bottom:none}
table.diag td.k{color:var(--mut);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;width:170px;white-space:nowrap}
table.diag td.bad{color:var(--warn)}
table.diag pre{white-space:pre-wrap;color:#9a9a9a;font-size:.72rem;margin:4px 0 0}

/* changelog */
.chlog{margin-top:18px}
.chlog summary{cursor:pointer;color:var(--mut);font-size:.85rem;padding:6px 2px}
.chlog summary:hover{color:var(--fg)}
.clnote{background:var(--card);border:1px solid var(--edge);border-radius:10px;padding:8px 12px;margin-top:8px;font-size:.8rem;color:var(--mut)}
.clnote b{color:var(--acc);font-family:BoxiGen,system-ui;font-weight:400;letter-spacing:.06em;margin-right:9px}

.ft{color:#555;font-size:.72rem;margin-top:24px}