:root {
  --bg: #0f1218;
  --panel: #171b24;
  --border: #272d3a;
  --text: #e3e7ee;
  --muted: #8a93a5;
  --strong: #4d86ff;
  --weak: #e0565b;
  --neutral: #9aa3b5;
  --good: #3fb97c;
  --warn: #e0b341;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 16px;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; margin-bottom: 12px; }
h1 { margin: 0; font-size: 20px; }
#menu { display: flex; flex-wrap: wrap; gap: 8px; }

.tab {
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
}
.tab.active { color: var(--text); border-color: var(--strong); }

.banner { border-radius: 6px; padding: 8px 12px; margin-bottom: 8px; border: 1px solid var(--border); }
.banner-bearish { background: #3a1a1e; border-color: var(--weak); color: #ffd7d9; }
.banner-stale, .banner-old { background: #3a3216; border-color: var(--warn); color: #ffecb0; }
.banner-chaotic { background: var(--panel); color: var(--muted); }

.meta-line { margin: 0 0 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.market-bullish { color: var(--good); }
.market-bearish { color: var(--weak); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--panel); }
table { border-collapse: collapse; width: 100%; min-width: 760px; }
th, td { padding: 8px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); }
th { position: sticky; top: 0; background: var(--panel); }
th button { all: unset; cursor: pointer; color: var(--muted); font-weight: 600; }
th[aria-sort="ascending"] button, th[aria-sort="descending"] button { color: var(--text); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #1c212c; }
td a { color: var(--text); font-weight: 600; text-decoration: none; }
td a:hover { text-decoration: underline; }

.state-strong { color: var(--strong); font-weight: 600; }
.state-weak { color: var(--weak); font-weight: 600; }
.state-neutral { color: var(--neutral); }
.bool-yes { color: var(--good); font-weight: 600; }
.bool-no, .muted { color: var(--muted); }

.empty { padding: 32px 16px; text-align: center; color: var(--muted); }