:root{
  --bg:#101113;--panel:#191b1f;--panel2:#202329;--line:#343941;--text:#f2efe8;--muted:#a8abb3;--faint:#737984;
  --green:#28d17c;--cyan:#2fb7ff;--amber:#e0a62b;--red:#ff5f6d;--button:#e8e0cf;--buttonText:#181818;
}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;letter-spacing:0}
button,input{font:inherit}
button{border:0;border-radius:6px;background:var(--button);color:var(--buttonText);font-weight:800;padding:9px 12px;cursor:pointer}
button:disabled{opacity:.55;cursor:not-allowed}.state-on{background:var(--green);color:#06150d}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 24px;border-bottom:1px solid var(--line);background:#151619;position:sticky;top:0;z-index:10}
.eyebrow{font-size:12px;color:var(--amber);text-transform:uppercase;font-weight:800}h1{font-size:24px;margin:4px 0 10px}
.navlinks{display:flex;gap:8px;flex-wrap:wrap}.navlinks a{color:var(--muted);text-decoration:none;border:1px solid var(--line);border-radius:6px;padding:6px 8px;font-size:12px}.navlinks a.active,.navlinks a:hover{color:var(--text);border-color:#59616f}
.top-actions{display:flex;align-items:center;gap:10px}.pill{border:1px solid var(--line);border-radius:6px;padding:8px 11px;font-size:13px;color:var(--muted);background:var(--panel2)}.pill.ok{color:var(--green);border-color:rgba(40,209,124,.45)}.pill.warn{color:var(--amber);border-color:rgba(224,166,43,.45)}
.shell{padding:18px 24px 34px}.status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.metric,.panel,.readout{background:var(--panel);border:1px solid var(--line);border-radius:8px}.metric{padding:13px 14px;min-height:72px}.metric span,.readout span,.timeline span{display:block;color:var(--muted);font-size:12px;margin-bottom:8px}.metric strong,.readout strong{font-size:20px;word-break:break-word}
.main-grid{display:grid;grid-template-columns:310px minmax(0,1fr) 270px;gap:12px;align-items:start}.panel{padding:14px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:13px}.panel h2{font-size:18px;margin:0}.subtle{color:var(--muted);font-size:12px}
.settings-form{display:grid;gap:10px}.settings-form label{display:grid;gap:5px;color:var(--muted);font-size:12px}.settings-form input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:6px;color:var(--text);padding:8px}.settings-form .check{display:flex;align-items:center;gap:8px}.settings-form .check input{width:auto}.settings-form button{margin-top:4px}
.monitor-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:12px}.readout{background:var(--panel2);padding:12px;min-height:76px}
.timeline{display:grid;gap:10px;margin-bottom:12px}.timeline>div{border:1px solid var(--line);border-radius:6px;background:var(--panel2);padding:12px}.timeline strong{display:block;margin-bottom:5px}.timeline small{display:block;color:var(--faint);font-size:12px;min-height:16px}
.control-row{display:flex;gap:8px;flex-wrap:wrap}.safety-note{margin-top:12px;color:var(--muted);font-size:13px;line-height:1.45}
.kv{display:grid;grid-template-columns:1fr;gap:6px}.kv span{color:var(--muted);font-size:12px}.kv strong{margin-bottom:8px}
.lower-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin-top:12px}pre{margin:0;white-space:pre-wrap;word-break:break-word;background:#0d0e10;border:1px solid var(--line);border-radius:6px;padding:12px;max-height:420px;overflow:auto;color:#dfe3ea;font-size:12px;line-height:1.45}
@media(max-width:1100px){.main-grid{grid-template-columns:1fr}.status-grid,.monitor-grid,.lower-grid{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.topbar{align-items:flex-start;flex-direction:column}.status-grid,.monitor-grid,.lower-grid{grid-template-columns:1fr}.shell{padding:14px}}