:root { --bg:#0b1220; --card:#0f182a; --text:#e6eefc; --muted:#9bb0d1; --accent:#5dd0ff; --ok:#39d98a; --warn:#ffd166; --err:#ff6b6b; }
* { box-sizing:border-box }
body {
  margin:0; font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial,sans-serif; color:var(--text);
  background: radial-gradient(1200px 1200px at 10% -10%, #15223b 0%, #0b1220 44%) fixed;
}
header { padding:24px 16px 4px; text-align:center }
h1 { margin:0 0 6px; font-size:28px; letter-spacing:.3px }
.sub { color:var(--muted); font-size:14px }
.wrap { max-width:1100px; margin:20px auto 80px; padding:0 16px }
.section-title { margin:18px 0 10px; font-size:18px }
.grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:14px }
.card { background:var(--card); border:1px solid #233252; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.35); padding:14px }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.meta { color:var(--muted); font-size:12px }
.pill { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid #2a416a; background:#0d1a30; font-size:12px }
.ok { color:var(--ok) } .err { color:var(--err) } .warn { color:var(--warn) }
.btn { padding:8px 10px; border-radius:10px; border:1px solid #2a416a; background:#12213a; color:var(--text); cursor:pointer }
.btn.primary { background:linear-gradient(135deg,#1976d2,#0ea5e9); border-color:#115a9c }
.btn.danger { background:#351a21; border-color:#5a1d2a }
label { display:block; font-size:12px; color:var(--muted); margin:10px 0 6px }
input[type="text"], input[type="number"]{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid #274069;background:#0b1426;color:var(--text);outline:none
}
.kv { display:grid; grid-template-columns: 130px 1fr; gap:6px 12px; margin-top:8px }
code { font-family: ui-monospace, Menlo, Consolas, "Liberation Mono", monospace; font-size:12px; color:#a6e1ff }
hr { border:0; border-top:1px solid #233252; margin:16px 0 }
.chips { display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
.chip { padding:6px 8px; border-radius:10px; border:1px dashed #2a416a; color:var(--muted); font-size:12px; cursor:pointer }
.chip:hover { color:var(--text); border-style:solid }
.muted { color:var(--muted) }
.mcap-delta { padding:2px 6px; border-radius:12px; font-size:.85rem }
.mcap-delta.up { background:#0a0; color:#fff }
.mcap-delta.down { background:#a00; color:#fff }
.pill {  padding: 2px 8px;  border-radius: 12px;  font-size: .85rem;  line-height: 1.6;
}

/* live WS indicators */
.live-dot {
  display:inline-block;width:10px;height:10px;border-radius:50%;
  background:#888; margin-left:8px; vertical-align:middle;
}
.last-tick { font-size:12px;color:#9bb0d1;margin-left:6px; }