:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin:0; font:14px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color:#eee; background:#0f1115; }
.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#161a22; border-bottom:1px solid #232838; position:sticky; top:0; z-index:10; }
.topbar h1 { margin:0; font-size:16px; }
.status { display:flex; align-items:center; gap:8px; color:#9aa4b2; }
.status .gap{ width:16px; display:inline-block; }
.container { max-width:1200px; margin:20px auto; padding:0 16px; }
.card { background:#141824; border:1px solid #232838; border-radius:12px; padding:14px; margin-bottom:16px; box-shadow:0 2px 12px rgba(0,0,0,.2); }
h2 { margin:0 0 12px 0; font-size:15px; color:#dbe4ff; }
.grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.grid.g3 { grid-template-columns:repeat(3, minmax(0,1fr)); }
.row { display:flex; gap:8px; align-items:center; }
input, select, button { padding:8px 10px; border-radius:8px; border:1px solid #2a3142; background:#0b0f16; color:#d0d6e4; outline:none; }
button { background:#1e293b; cursor:pointer; }
button.primary { background:#0ea5e9; color:#001018; font-weight:600; }
button:hover { filter:brightness(1.05); }
.muted { color:#8a94a6; }
.badge { padding:4px 8px; background:#273147; border:1px solid #32405c; border-radius:999px; font-size:12px; color:#b2c3e7; }

.dot { display:inline-block; width:10px; height:10px; border-radius:50%; background:#4b5563; vertical-align:middle; margin:0 6px 0 2px; }
.dot.gray{ background:#4b5563; } .dot.blue{ background:#38bdf8; } .dot.green{ background:#22c55e; } .dot.red{ background:#ef4444; }

.tabs { display:flex; gap:6px; margin-bottom:8px; }
.tab { padding:6px 10px; background:#111520; border:1px solid #273147; border-radius:8px; color:#bcd; cursor:pointer; }
.tab.active { background:#0b1220; border-color:#3a4a6a; }

.table-wrap { overflow:auto; border:1px solid #273147; border-radius:8px; }
table { width:100%; border-collapse:collapse; }
th, td { border-bottom:1px solid #1e2638; padding:8px 10px; white-space:nowrap; }
thead th { position:sticky; top:0; background:#0d1322; z-index:1; }

.logs { background:#0b0f16; border:1px solid #273147; border-radius:8px; padding:10px; height:220px; overflow:auto; }