:root {
  --bg: #0b0e14;
  --panel: #141924;
  --panel-2: #1b2130;
  --border: #262d3d;
  --text: #e6e9ef;
  --muted: #8b93a7;
  --accent: #4ade80;
  --accent-dim: #1e3a2a;
  --warn: #fbbf24;
  --bad: #f87171;
  --blue: #60a5fa;
  --radius: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: radial-gradient(1200px 600px at 70% -10%, #16203a 0%, var(--bg) 55%);
  color: var(--text);
  min-height: 100vh;
}

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: rgba(11,14,20,0.85); backdrop-filter: blur(8px); z-index: 5;
}
.brand { display: flex; align-items: center; gap: 14px; }
/* Logo is an SVG mark now, not a text glyph. `display: block` stops the inline-image baseline gap
   from pushing it out of alignment with the wordmark beside it. */
.logo { display: block; width: 30px; height: 30px; flex: none; }
h1 { font-size: 20px; margin: 0; letter-spacing: -0.02em; }
.tagline { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.toggle { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--muted); cursor: pointer; }
.select {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  padding: 6px 10px; border-radius: 8px; font-size: 13px; cursor: pointer;
}
.thresh { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.thresh input[type="range"] { width: 90px; accent-color: var(--accent); }
.threshVal { color: var(--text); min-width: 34px; font-variant-numeric: tabular-nums; }
.btn {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; transition: 0.15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.bell.on { border-color: var(--accent); color: var(--accent); }

/* live status */
.status { display: flex; align-items: center; gap: 6px; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px var(--accent); animation: pulse 1.6s ease-in-out infinite; display: inline-block;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

/* NEW badge + fresh-card flash */
.new-badge {
  background: var(--accent); color: #06210f; font-size: 10px; font-weight: 800;
  padding: 1px 7px; border-radius: 6px; letter-spacing: 0.06em; vertical-align: middle;
}
.chip.seen { color: var(--muted); }
.cross-badge {
  background: linear-gradient(90deg, #a78bfa, #60a5fa); color: #0b0e14; font-size: 10px;
  font-weight: 800; padding: 2px 8px; border-radius: 6px; letter-spacing: 0.04em;
  vertical-align: middle;
}
.ev-badge {
  background: #16324a; color: #7dd3fc; border: 1px solid #38bdf8; font-size: 10px;
  font-weight: 700; padding: 1px 7px; border-radius: 6px; vertical-align: middle;
}
.stat.ev .num { color: #7dd3fc; }
.card.ev { border-color: #38bdf8; }
.evbox { margin-top: 14px; background: #0e2233; border: 1px solid #1f4d6b; border-radius: 8px; padding: 12px 14px; }
.evbox h4 { margin: 0 0 8px; font-size: 12px; color: #7dd3fc; text-transform: uppercase; letter-spacing: 0.05em; }
.evnote { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); }
.card.fresh { animation: flash 1.6s ease-out; }
@keyframes flash {
  0% { box-shadow: 0 0 0 2px var(--accent), 0 0 30px -4px var(--accent); }
  100% { box-shadow: none; }
}

/* toasts */
.toasts { position: fixed; top: 84px; right: 20px; z-index: 50; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--panel); border: 1px solid var(--accent); border-radius: 10px;
  padding: 12px 16px; min-width: 240px; max-width: 340px;
  box-shadow: 0 10px 40px -10px rgba(0,0,0,0.6);
  opacity: 0; transform: translateX(20px); transition: 0.35s ease;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast-title { font-size: 13px; font-weight: 650; color: var(--accent); }
.toast-body { font-size: 12px; color: var(--muted); margin-top: 3px; }

.sources { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 28px 4px; }
.src-pill {
  display: flex; align-items: center; gap: 8px; background: var(--panel);
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 14px; font-size: 12.5px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.dot.ok { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.dot.bad { background: var(--bad); }
.src-pill .cnt { color: var(--muted); }
.src-pill .mock { color: var(--warn); font-size: 11px; border: 1px solid var(--warn); border-radius: 5px; padding: 0 5px; }

.summary { display: flex; gap: 16px; padding: 16px 28px; flex-wrap: wrap; }
.stat {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px 20px; min-width: 150px;
}
.stat .num { font-size: 26px; font-weight: 650; letter-spacing: -0.02em; }
.stat .lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }
.stat.good .num { color: var(--accent); }

/* The stats wrapper must not create a box of its own, so its children stay in the summary flex row
   alongside the bankroll tile (which is a sibling, to survive re-renders). */
#summaryStats { display: contents; }

/* Bankroll tile: same shape as the other stats so it reads as one of them, not a form bolted on. */
/* Sized like its neighbours rather than stretching to fill the row — an input's default width
   would make this tile several times wider than the stats it sits beside. */
.stat-bankroll { cursor: text; display: block; max-width: 190px; }
.stat-bankroll:focus-within { border-color: var(--accent); }
.bankroll-field { display: flex; align-items: baseline; gap: 3px; }
.bankroll-currency { font-size: 20px; font-weight: 650; color: var(--muted); }
.stat-bankroll input {
  background: none; border: none; outline: none; color: var(--text);
  font-size: 26px; font-weight: 650; letter-spacing: -0.02em; width: 100%;
  padding: 0; font-family: inherit; font-variant-numeric: tabular-nums;
}
.stat-bankroll input::placeholder { color: #3d4557; }
/* Number spinners add visual noise at this size. */
.stat-bankroll input::-webkit-outer-spin-button,
.stat-bankroll input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stat-bankroll input[type="number"] { -moz-appearance: textfield; }
.stat-bankroll:focus-within .lbl { color: var(--accent); }

/* Money figures inside a playbook leg — quiet, but scannable. */
.leg-amt { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }
.playbook-total {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 9px; border-top: 1px solid #2c5a3f; font-size: 13px;
}
.playbook-total b { color: var(--accent); font-variant-numeric: tabular-nums; }
.ev-stake { color: var(--text); font-weight: 650; font-variant-numeric: tabular-nums; }

.results { padding: 8px 28px 40px; display: flex; flex-direction: column; gap: 32px; }
.empty { color: var(--muted); padding: 40px; text-align: center; }
.empty-none { padding: 56px 40px; border: 1px dashed var(--border); border-radius: var(--radius); background: rgba(20,25,36,0.4); }
.empty-title { font-size: 17px; font-weight: 600; color: var(--text); }
.empty-sub { font-size: 13px; color: var(--muted); margin-top: 8px; }

.board-section { display: flex; flex-direction: column; gap: 14px; }
.section-head {
  display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.section-head h2 { font-size: 15px; font-weight: 650; margin: 0; letter-spacing: -0.01em; }
.section-count {
  font-size: 12px; color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 1px 9px;
}
.section-cards { display: flex; flex-direction: column; gap: 14px; }
.section-empty {
  padding: 28px; text-align: center; font-size: 13px; color: var(--muted);
  border: 1px dashed var(--border); border-radius: var(--radius); background: rgba(20,25,36,0.25);
}

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.card.arb { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-dim), 0 8px 30px -12px rgba(74,222,128,0.25); }
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 20px; cursor: pointer;
}
.card-title { font-size: 15px; font-weight: 600; }
.card-sub { font-size: 12px; color: var(--muted); margin-top: 3px; display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px; padding: 1px 8px; font-size: 11px; }
.chip.cat { text-transform: capitalize; }

.verdict { text-align: right; white-space: nowrap; }
.verdict .margin { font-size: 22px; font-weight: 700; }
.verdict.arb .margin { color: var(--accent); }
.verdict.ev .margin { color: #7dd3fc; }
.verdict.miss .margin { color: var(--warn); }
.verdict.no .margin { color: var(--muted); }
.verdict .vlbl { font-size: 11px; color: var(--muted); }

.card-body { border-top: 1px solid var(--border); padding: 16px 20px; display: none; }
.card.open .card-body { display: block; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--muted); font-weight: 500; padding: 6px 10px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; }
td { padding: 8px 10px; border-top: 1px solid var(--border); }
.venue-tag { font-weight: 600; text-transform: capitalize; }
.venue-tag.kalshi { color: #a78bfa; }
.venue-tag.polymarket { color: #60a5fa; }
.venue-tag.fanduel { color: #4ade80; }
.venue-tag.draftkings { color: #fb923c; }
.venue-tag.pinnacle { color: #f472b6; }
.venue-tag.betmgm { color: #facc15; }
.venue-tag.prophetx { color: #22d3ee; }
.venue-tag.betfair { color: #fde047; }
.best { color: var(--accent); font-weight: 600; }
.prob { color: var(--muted); }

.playbook { margin-top: 14px; background: var(--accent-dim); border: 1px solid #2c5a3f; border-radius: 8px; padding: 12px 14px; }
.playbook h4 { margin: 0; font-size: 12px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.05em; }
.playbook-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.btn.open-all {
  background: var(--accent); color: #06210f; border-color: var(--accent);
  font-weight: 700; font-size: 12px; padding: 6px 12px; white-space: nowrap;
}
.btn.open-all:hover { color: #06210f; filter: brightness(1.08); }
.legnote { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }

/* Venue names become links to the exact market, so a leg is one click from its bet slip. */
a.venue-link { text-decoration: none; border-bottom: 1px dotted currentColor; }
a.venue-link:hover { border-bottom-style: solid; filter: brightness(1.15); }
.leg-row { display: flex; justify-content: space-between; font-size: 13px; padding: 3px 0; }

.foot { padding: 20px 28px 40px; color: var(--muted); font-size: 12px; max-width: 900px; line-height: 1.6; }
.foot strong { color: var(--text); }

@media (max-width: 640px) {
  .topbar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .verdict .margin { font-size: 18px; }
}

/* ------------------------------------------------------------------ */
/* Buttons: primary + link variants (used by header + how-it-works)    */
/* ------------------------------------------------------------------ */
a.btn { text-decoration: none; display: inline-block; }
.btn.primary { background: var(--accent); color: #06210f; border-color: var(--accent); font-weight: 650; }
.btn.primary:hover { color: #06210f; filter: brightness(1.08); }
.btn.big { padding: 12px 24px; font-size: 15px; }

/* ------------------------------------------------------------------ */
/* How-it-works page                                                   */
/* ------------------------------------------------------------------ */
.doc { max-width: 780px; margin: 0 auto; padding: 28px 24px 60px; }
.doc-block { position: relative; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px 26px 24px 30px; margin-bottom: 18px; }
.doc-block.warn { border-color: #4a3a1a; background: #1a1710; }
.step-num {
  position: absolute; top: -14px; left: 24px; width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #06210f; font-weight: 800; display: flex;
  align-items: center; justify-content: center; font-size: 15px;
}
.doc-block.warn .step-num { background: var(--warn); }
.doc h2 { font-size: 19px; margin: 6px 0 12px; letter-spacing: -0.01em; }
.doc p { color: var(--text); line-height: 1.65; margin: 0 0 12px; font-size: 14.5px; }
.doc p.lead { font-size: 17px; }
.doc em { color: var(--accent); font-style: normal; }
.doc-block.warn em { color: var(--warn); }
.pos { color: var(--accent); }

.example { background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; margin: 14px 0; overflow-x: auto; }
.example table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.example th { text-align: left; color: var(--muted); font-weight: 500; padding: 6px 10px; font-size: 12px; }
.example td { padding: 8px 10px; border-top: 1px solid var(--border); }
.example .best { color: var(--accent); font-weight: 700; }
.example .note { color: var(--muted); font-size: 12px; margin: 8px 0 0; }

.math { background: var(--accent-dim); border: 1px solid #2c5a3f; border-radius: 10px;
  padding: 12px 16px; margin: 14px 0; }
.math-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 14px; }
.math-row.total { border-top: 1px solid #2c5a3f; margin-top: 4px; padding-top: 8px; }
.math-row.profit b { color: var(--accent); }

.callout { background: var(--panel-2); border-left: 3px solid var(--blue); border-radius: 6px;
  padding: 12px 16px; margin: 14px 0; font-size: 14px; line-height: 1.6; }
.note-ev { background: #0e2233; border-left: 3px solid #38bdf8; border-radius: 6px; padding: 10px 14px; font-size: 13.5px; }
.feature-list { margin: 6px 0 0; padding-left: 20px; }
.feature-list li { color: var(--text); line-height: 1.7; font-size: 14.5px; margin-bottom: 6px; }
.cta { text-align: center; margin-top: 26px; }

/* ------------------------------------------------------------------ */
/* First-visit onboarding tour                                         */
/* ------------------------------------------------------------------ */
.tour-blocker { position: fixed; inset: 0; background: rgba(4, 6, 10, 0.72);
  z-index: 1900; backdrop-filter: blur(1.5px); }
.tour-spot { position: relative; z-index: 1950 !important;
  outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 10px;
  box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.25); animation: spotpulse 1.8s ease-in-out infinite; }
@keyframes spotpulse { 0%,100% { box-shadow: 0 0 0 6px rgba(74,222,128,0.22); } 50% { box-shadow: 0 0 0 12px rgba(74,222,128,0.08); } }
.tour-raise-topbar .topbar { z-index: 1950; }

.tour-card {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  width: min(440px, calc(100vw - 32px)); background: var(--panel);
  border: 1px solid var(--accent); border-radius: 14px; padding: 20px 22px;
  z-index: 2000; box-shadow: 0 20px 60px -15px rgba(0,0,0,0.7);
}
.tour-eyebrow { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.tour-title { font-size: 17px; font-weight: 650; margin: 6px 0 8px; }
.tour-body { color: var(--muted); font-size: 14px; line-height: 1.6; }
.tour-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; }
.tour-dots { display: flex; gap: 6px; }
.tour-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.tour-dot.on { background: var(--accent); }
.tour-actions { display: flex; gap: 8px; }
.tour-skip { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px; }
.tour-skip:hover { color: var(--text); }

/* A quote excluded as an outlier: still listed for transparency, but clearly not in play. */
.row-outlier td { color: var(--muted); text-decoration: line-through; text-decoration-color: #4a5265; }
.row-outlier .prob { color: var(--warn); text-decoration: none; }

/* Bell is a true toggle, so the two states must be unmistakable at a glance. */
.btn.bell { filter: grayscale(1); opacity: 0.65; }
.btn.bell:hover { opacity: 0.9; }
.btn.bell.on { filter: none; opacity: 1; border-color: var(--accent); color: var(--accent); }

/* Prediction-market topic chips. Rendered only when more than one topic is present, so the row
   never advertises nine empty categories. */
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: -2px 0 4px; }
.cat-chip {
  background: var(--panel); color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer;
  font-family: inherit; transition: 0.15s;
}
.cat-chip span { color: #5b6478; margin-left: 3px; font-variant-numeric: tabular-nums; }
.cat-chip:hover { border-color: var(--accent); color: var(--text); }
.cat-chip.on { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.cat-chip.on span { color: var(--accent); opacity: 0.75; }
.venue-tag.predictit { color: #f59e0b; }

/* Source pills double as venue toggles. */
button.src-pill { font-family: inherit; cursor: pointer; transition: 0.15s; }
button.src-pill:hover { border-color: var(--accent); }
.src-pill.off { opacity: 0.4; }
.src-pill.off .name { text-decoration: line-through; }
.src-pill.off .dot { background: var(--muted); box-shadow: none; }
.src-hint { align-self: center; font-size: 11.5px; color: #5b6478; margin-left: 2px; }


/* Account controls in the header */
.account { display: inline-flex; align-items: center; gap: 8px; }
.signin { display: inline-flex; align-items: center; gap: 6px; }
.signin input {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); padding: 7px 10px; font-size: 13px; font-family: inherit; width: 170px;
}
.signin input:focus { outline: none; border-color: var(--accent); }
.acct-email { font-size: 12.5px; color: var(--muted); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Legal pages ------------------------------------------------------------------------------
   Reuses .doc / .doc-block from the how-it-works page. The only additions are numbered clauses,
   a draft banner, and TBD markers.

   .tbd is deliberately loud. These are the facts only the business can supply — legal entity,
   registered address, governing law. Inventing plausible-looking values would produce a document
   that READS finished and is actually false, which is worse than an obvious blank. Bright amber
   means nobody ships this by accident. Search the source for "tbd" to find every one. */
.legal-banner {
  max-width: 780px; margin: 22px auto -8px; padding: 14px 18px;
  background: #1a1710; border: 1px solid #4a3a1a; border-radius: var(--radius);
  color: var(--warn); font-size: 13.5px; line-height: 1.6;
}
.legal-banner strong { color: #fde68a; }
.tbd {
  background: var(--warn); color: #1a1710; font-weight: 700;
  padding: 1px 7px; border-radius: 5px; font-size: 12.5px;
  letter-spacing: 0.02em; white-space: nowrap;
}
.doc h3 { font-size: 15px; margin: 20px 0 8px; letter-spacing: -0.01em; color: var(--text); }
.doc-block > h3:first-of-type { margin-top: 0; }
.doc ul, .doc ol { color: var(--text); line-height: 1.65; font-size: 14.5px; padding-left: 20px; margin: 0 0 12px; }
.doc li { margin-bottom: 7px; }
.doc li::marker { color: var(--muted); }
.doc a { color: var(--blue); }
.updated { color: var(--muted); font-size: 12.5px; margin: 0 0 4px; }
/* Clause numbers sit in the same slot the how-it-works step numbers use. */
.doc-block .clause-num {
  position: absolute; top: 18px; left: -14px; background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border); width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600;
}
/* The clauses that limit liability or state what this product is NOT. Emphasised because a user
   skimming should still land on them. */
.doc-block.key { border-color: #2f4a3a; background: #101a15; }
.doc-block.key .clause-num { background: var(--accent-dim); color: var(--accent); border-color: #2f4a3a; }
.legal-nav { display: flex; gap: 8px; flex-wrap: wrap; max-width: 780px; margin: 24px auto 0; padding: 0 24px; }
.legal-nav a {
  font-size: 13px; padding: 7px 13px; border-radius: 8px; text-decoration: none;
  background: var(--panel-2); border: 1px solid var(--border); color: var(--muted);
}
.legal-nav a.on { color: var(--accent); border-color: #2f4a3a; background: var(--accent-dim); }
.foot a { color: var(--muted); }
.foot .foot-links { margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; }

/* --- Modal ------------------------------------------------------------------------------------
   Used for the "check your inbox" step. That moment is the one point in the flow where the next
   action happens OUTSIDE the page, in a mail client — so it has to interrupt. A toast that fades
   after six seconds and a 12px line in the header both let people sit waiting on a screen that
   looks like nothing happened. */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(6, 8, 12, 0.72); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; transition: opacity 0.18s ease;
}
.modal-backdrop.show { opacity: 1; }
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px;
  padding: 34px 32px 26px; max-width: 440px; width: 100%; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  transform: translateY(8px) scale(0.98); transition: transform 0.18s ease;
}
.modal-backdrop.show .modal { transform: none; }
.modal-icon {
  width: 60px; height: 60px; margin: 0 auto 20px; border-radius: 50%;
  background: var(--accent-dim); border: 1px solid #2f4a3a;
  display: flex; align-items: center; justify-content: center; color: var(--accent);
}
.modal h2 { margin: 0 0 10px; font-size: 21px; letter-spacing: -0.02em; }
.modal p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.modal p .addr { color: var(--text); font-weight: 600; word-break: break-all; }
.modal .modal-note {
  font-size: 13px; color: var(--muted); background: var(--panel-2);
  border: 1px solid var(--border); border-radius: 9px; padding: 11px 14px; margin: 18px 0 0;
  text-align: left; line-height: 1.55;
}
.modal-actions { display: flex; gap: 10px; margin-top: 22px; }
.modal-actions .btn { flex: 1; justify-content: center; }
.btn.ghost { background: transparent; }
.btn.ghost:disabled { opacity: 0.45; cursor: default; }
/* The header state after the dialog is dismissed. Deliberately not the muted grey the signed-in
   email uses — until they click the link, this is still an action in progress. */
.acct-pending { font-size: 12.5px; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.acct-pending button {
  background: none; border: none; color: var(--muted); font-size: 12.5px;
  text-decoration: underline; cursor: pointer; padding: 0; font-family: inherit;
}
.acct-pending button:hover { color: var(--text); }
.acct-pending button:disabled { opacity: 0.5; cursor: default; text-decoration: none; }
@media (max-width: 520px) {
  .modal { padding: 28px 22px 22px; }
  .modal-actions { flex-direction: column-reverse; }
}

/* --- Paywall gate -----------------------------------------------------------------------------
   Shown above the board when the data is locked. The sign-in form lives HERE rather than only in
   the header: a first-time visitor should not have to find a 200px input tucked beside the
   controls to work out how to start. */
.gate {
  max-width: 780px; margin: 26px auto 6px; padding: 30px 32px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 16px; text-align: center;
}
.gate h2 { margin: 0 0 10px; font-size: 24px; letter-spacing: -0.025em; }
.gate .gate-sub { margin: 0 auto 22px; font-size: 15px; color: var(--muted); line-height: 1.6; max-width: 540px; }
/* Live counts, straight off the board behind the gate. The single most persuasive thing available
   is that the numbers are real and moving, so they lead. */
.gate-proof { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-bottom: 24px; }
.gate-proof div { text-align: center; }
.gate-proof b { display: block; font-size: 27px; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.gate-proof span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.gate form { display: flex; gap: 9px; max-width: 430px; margin: 0 auto 12px; }
.gate input {
  flex: 1; background: var(--panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 12px 15px; border-radius: 10px; font-size: 15px; font-family: inherit;
}
.gate input:focus { outline: none; border-color: var(--accent); }
.gate .btn { padding: 12px 20px; }
.gate-fine { font-size: 12.5px; color: var(--muted); margin: 0; }
.gate-fine a { color: var(--blue); }
@media (max-width: 560px) {
  .gate { padding: 26px 20px; margin: 18px 14px 6px; }
  .gate form { flex-direction: column; }
  .gate-proof { gap: 20px; }
}

/* Locked cards: the board stays legible, the actionable half is replaced by a prompt. */
.card.locked .card-head { cursor: default; }
.lockbox { display: flex; align-items: center; gap: 13px; padding: 15px 16px; color: var(--muted); font-size: 13.5px; }
.lockbox svg { flex: none; color: var(--muted); }
.lockbox b { color: var(--text); font-weight: 600; }
.chip.locked-chip { color: var(--muted); border-style: dashed; }