:root { --bg:#0f1419; --panel:#1a222c; --line:#2d3946; --text:#e6edf3; --dim:#8b98a5; --acc:#3fb950; --warn:#f0883e; --bad:#f85149; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:15px/1.4 system-ui,sans-serif; }
main { max-width:520px; margin:0 auto; padding:12px 16px 40px; }
h1 { font-size:18px; margin:0 0 2px; }
.sub { color:var(--dim); font-size:13px; margin-bottom:12px; }
.stats { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-bottom:8px; }
.stat { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 10px; }
.stat b { display:block; font-size:18px; font-variant-numeric:tabular-nums; }
.stat span { color:var(--dim); font-size:12px; }
button { font:inherit; color:var(--text); background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:9px 10px; cursor:pointer; }
button:disabled { opacity:.45; cursor:default; }
button.primary { background:var(--acc); border-color:var(--acc); color:#07130a; font-weight:600; width:100%; margin-bottom:10px; }
.tabs { display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin-bottom:10px; }
.tabs button { padding:8px 2px; font-size:12px; }
.good { color:var(--acc); }
.warn { color:var(--warn); }
.bad { color:var(--bad); }
.next { display:grid; gap:4px; background:var(--panel); border:1px solid var(--acc); border-radius:8px; padding:10px; margin-bottom:8px; }
.next span { color:var(--acc); font-size:12px; }
.next small { color:var(--dim); font-size:13px; }
.next button { margin-top:4px; }
.alerts { display:grid; gap:2px; font-size:13px; margin-bottom:8px; }
.notice { background:var(--panel); border:1px solid var(--acc); border-radius:8px; padding:8px; font-size:13px; margin-bottom:8px; }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 10px; margin-bottom:8px; }
.kv { display:flex; justify-content:space-between; gap:10px; font-size:13px; padding:2px 0; }
.kv span { color:var(--dim); }
.kv b { font-weight:600; text-align:right; }
.cell.rack { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
.cell.rack.good { background:#1f3a2a; color:var(--text); }
.cell.rack.warn { background:#4a3a1a; color:var(--text); }
.cell.rack.bad { background:#4f1f1c; color:var(--text); }
.stack { display:grid; gap:3px; margin-bottom:10px; }
.dev { display:grid; grid-template-columns:30px 1fr auto; gap:2px 6px; align-items:center; background:var(--panel); border:1px solid var(--line); border-left-width:4px; border-radius:6px; padding:5px 6px; font-size:13px; }
.dev .u { color:var(--dim); font-size:11px; }
.dev small { color:var(--dim); display:block; font-size:11px; }
.dev .btns { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.dev .btns button { padding:4px; font-size:12px; }
.dev.miner { border-left-color:var(--acc); }
.dev.switch { border-left-color:#388bfd; }
.dev.pdu { border-left-color:var(--warn); }
.dev.cool { border-left-color:#a371f7; }
th { text-align:left; color:var(--dim); font-size:12px; font-weight:500; padding:4px; border-bottom:1px solid var(--line); }
.tabs button.on { border-color:var(--acc); color:var(--acc); }
.grid { display:grid; gap:4px; margin-bottom:10px; }
.cell { aspect-ratio:1; padding:2px; font-size:11px; line-height:1.1; border-radius:6px; overflow:hidden; }
.cell.m { background:#1f3a2a; border-color:#2ea04366; }
.cell.hot { background:#4a2a1a; border-color:var(--warn); }
.cell.c { background:#1b3350; border-color:#388bfd66; }
.cell.sel { outline:2px solid var(--text); }
.list { display:grid; gap:6px; }
.actions { display:grid; gap:6px; margin-bottom:10px; }
.item { display:flex; justify-content:space-between; gap:8px; align-items:center; text-align:left; width:100%; }
.item small { color:var(--dim); display:block; }
.item.on { border-color:var(--acc); }
.hint { color:var(--dim); font-size:13px; margin:8px 0; }
.err { color:var(--bad); font-size:13px; min-height:18px; }
.code { font-family:monospace; font-size:12px; word-break:break-all; background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px; }
input { font:inherit; width:100%; padding:10px; border-radius:8px; border:1px solid var(--line); background:var(--panel); color:var(--text); margin:8px 0; }
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; }
td { padding:6px 4px; border-bottom:1px solid var(--line); }
td:last-child { text-align:right; }
tr.me td { color:var(--acc); font-weight:600; }
h2 { font-size:14px; margin:14px 0 4px; }