:root {
  --surface-1:      #fcfcfb;
  --page-plane:     #f9f9f7;
  --text-primary:   #0b0b0b;
  --text-secondary: #52514e;
  --text-muted:     #898781;
  --gridline:       #e1e0d9;
  --baseline:       #c3c2b7;
  --border:         rgba(11,11,11,0.10);
  --series-1:       #2a78d6;
  --good:           #006300;
  --bad:            #d03b3b;
  --warning:        #fab219;
  --chip-bg:        #f0efec;
}
@media (prefers-color-scheme: dark) {
  :root {
    --surface-1:      #1a1a19;
    --page-plane:     #0d0d0d;
    --text-primary:   #ffffff;
    --text-secondary: #c3c2b7;
    --text-muted:     #898781;
    --gridline:       #2c2c2a;
    --baseline:       #383835;
    --border:         rgba(255,255,255,0.10);
    --series-1:       #3987e5;
    --good:           #0ca30c;
    --bad:            #e66767;
    --warning:        #c98500;
    --chip-bg:        #26261f;
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--page-plane);
  color: var(--text-primary);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.gated { overflow: hidden; }
body:not(.authed) .app { display: none; }

.gate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--page-plane);
  z-index: 100;
}
body.authed .gate { display: none; }
.gate-card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 32px;
  width: 280px;
  text-align: center;
}
.gate-card h1 { font-size: 16px; margin: 0 0 16px; }
.gate-card input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--page-plane);
  color: var(--text-primary);
  font-size: 14px;
  margin-bottom: 10px;
}
.gate-card button {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  background: var(--series-1);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.gate-error { color: var(--bad); font-size: 12px; min-height: 16px; margin-top: 8px; }

.app { max-width: 960px; margin: 0 auto; padding: 24px 20px 64px; }

nav.topnav {
  display: flex;
  align-items: baseline;
  gap: 24px;
  padding: 8px 0 20px;
  border-bottom: 1px solid var(--gridline);
  margin-bottom: 24px;
}
nav.topnav .brand { font-weight: 600; margin-right: auto; }
nav.topnav a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  padding-bottom: 4px;
}
nav.topnav a.active { color: var(--text-primary); border-bottom: 2px solid var(--series-1); }
nav.topnav a:hover { color: var(--text-primary); }

.generated-at { color: var(--text-muted); font-size: 12px; margin-bottom: 4px; }

.live-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); margin-bottom: 20px; }
.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  animation: live-pulse 2s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.link-btn {
  background: none;
  border: none;
  color: var(--series-1);
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.table-note { color: var(--text-muted); font-size: 11px; margin: -8px 0 12px; }

.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.stat-tile {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 20px;
  flex: 1 1 160px;
}
.stat-tile .label { color: var(--text-secondary); font-size: 12px; margin-bottom: 6px; }
.stat-tile .value { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-tile .value.hero { font-size: 32px; }

.delta { font-size: 13px; font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; }
.delta.good { color: var(--good); }
.delta.bad { color: var(--bad); }
.delta .arrow { font-size: 11px; }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.card h2 { font-size: 15px; margin: 0 0 16px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: right; padding: 8px 6px; border-bottom: 1px solid var(--gridline); font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; font-variant-numeric: normal; }
th { color: var(--text-muted); font-weight: 500; font-size: 12px; }
tbody tr:last-child td { border-bottom: none; }

table.text-table th, table.text-table td { text-align: left; font-variant-numeric: normal; }

.chip {
  display: inline-block;
  background: var(--chip-bg);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.signal { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.signal.good { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.signal.bad { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.signal.warning { background: color-mix(in srgb, var(--warning) 20%, transparent); color: #9a6b00; }
.signal.neutral { background: var(--chip-bg); color: var(--text-secondary); }

.opp-item, .news-item { padding: 14px 0; border-bottom: 1px solid var(--gridline); }
.opp-item:last-child, .news-item:last-child { border-bottom: none; }
.opp-item .head, .news-item .head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.opp-item .rationale, .news-item .summary { color: var(--text-secondary); font-size: 13px; line-height: 1.5; margin: 4px 0; }
.opp-item .sources, .news-item .sources { font-size: 12px; margin-top: 6px; }
.opp-item .sources a, .news-item .sources a { color: var(--series-1); text-decoration: none; margin-right: 12px; }
.opp-item .sources a:hover, .news-item .sources a:hover { text-decoration: underline; }
.news-item .meta { color: var(--text-muted); font-size: 12px; }

.empty-state { color: var(--text-muted); font-size: 13px; padding: 20px 0; text-align: center; }

.sparkline-wrap { position: relative; }
.sparkline-tooltip {
  position: absolute;
  background: var(--text-primary);
  color: var(--surface-1);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  pointer-events: none;
  transform: translate(-50%, -130%);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.1s;
  font-variant-numeric: tabular-nums;
}

footer.foot { color: var(--text-muted); font-size: 11px; text-align: center; margin-top: 40px; }