:root {
  --bg: #08090d;
  --surface: #11131a;
  --raised: #171922;
  --border: #2f3240;
  --text: #f5f6fa;
  --muted: #8e93a4;
  --red: #ef303e;
  --blue: #7ebfff;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: radial-gradient(1200px 480px at 100% -10%, rgba(239, 48, 62, .18), transparent 55%), var(--bg); color: var(--text); font: 15px/1.45 "Segoe UI", sans-serif; }
header, .toolbar, .table-wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
header { display: flex; justify-content: space-between; gap: 16px; align-items: end; padding: 28px 0 18px; }
.kicker { margin: 0; color: var(--muted); letter-spacing: .16em; font-size: 11px; }
h1 { margin: 4px 0 0; font-size: 28px; font-weight: 650; }
#meta { margin: 0; color: var(--muted); font-size: 13px; text-align: right; }
.toolbar { display: flex; gap: 10px; margin-bottom: 14px; }
#q { flex: 1; border: 0; border-radius: 10px; background: var(--raised); color: var(--text); padding: 12px 14px; outline: 1px solid var(--border); }
#q:focus { outline-color: var(--red); }
button { border: 0; border-radius: 10px; min-width: 84px; padding: 12px 16px; background: var(--raised); color: var(--muted); cursor: pointer; font-weight: 650; }
button.on { background: var(--red); color: var(--text); }
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; overflow: auto; margin-bottom: 32px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.empty { color: var(--muted); text-align: center; padding: 36px 12px; }
.stale { color: var(--muted); }
.buy { color: var(--blue); }
.live { color: #31cd8b; font-size: 12px; font-weight: 650; }
.nopm { color: var(--red); font-size: 12px; font-weight: 650; }
.pmok { color: var(--muted); font-size: 12px; }
@media (max-width: 720px) {
  header { flex-direction: column; align-items: start; }
  #meta { text-align: left; }
}