:root{--bg: #0a0d12;--panel: #12161d;--panel-2: #171d26;--border: #232a35;--grid: #1c222b;--text: #d7dee6;--text-muted: #6b7684;--cyan: #33d6c0;--amber: #ffb020;--red: #ff4d4f;--mono: "SFMono-Regular", "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;--sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--sans)}.app{display:grid;grid-template-rows:auto 1fr;height:100%}.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#10141b,#0a0d12)}.topbar .title{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.topbar .title strong{color:var(--text);font-weight:600}.status-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}.status-dot.rec{background:var(--red);box-shadow:0 0 8px var(--red);animation:pulse 1s infinite}.status-dot.idle{background:var(--text-muted)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.main{display:grid;grid-template-columns:280px 1fr;gap:12px;padding:12px;overflow:hidden}@media (max-width: 800px){.main{grid-template-columns:1fr;overflow:auto}}.gauge-col{display:flex;flex-direction:column;gap:12px;align-items:center}.panel{background:var(--panel);border:1px solid var(--border);border-radius:6px;padding:10px}.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}.tile{background:var(--panel-2);border:1px solid var(--border);border-radius:6px;padding:8px 10px}.tile .label{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}.tile .value{font-family:var(--mono);font-size:20px;font-weight:600;margin-top:2px}.tile .value.unavailable{color:var(--text-muted);font-size:12px;font-weight:400}.tile .value.warn{color:var(--amber)}.right-col{display:flex;flex-direction:column;gap:12px;overflow:hidden}.controls{display:flex;gap:8px;flex-wrap:wrap}button{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:5px;padding:8px 14px;font-size:13px;cursor:pointer;font-family:var(--sans)}button:hover{border-color:var(--cyan)}button.primary{background:var(--cyan);color:#05201c;border-color:var(--cyan);font-weight:600}button.danger{background:var(--red);color:#200505;border-color:var(--red);font-weight:600}button:disabled{opacity:.4;cursor:not-allowed}.flags{max-height:160px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}.flag-item{border-left:3px solid var(--amber);padding:6px 8px;background:var(--panel-2);border-radius:4px;font-size:12px}.flag-item .label{color:var(--amber);font-weight:600}.flag-item .detail{color:var(--text-muted)}.event-strip{height:32px;border:1px solid var(--border);border-radius:4px;position:relative;background:repeating-linear-gradient(90deg,var(--grid) 0 1px,transparent 1px 40px);overflow:hidden}.event-marker{position:absolute;top:4px;width:4px;height:24px;background:var(--amber);border-radius:2px}section h3{margin:0 0 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.graph-panel{flex:1;min-height:200px}