/*
  Apex Analytics — shared design system for consumer.html and dashboard.html.
  Dark-only (the product has no light-mode toggle) — a deliberate scope call,
  not an oversight.

  Categorical sport palette validated with the dataviz skill's
  validate_palette.js against this file's --bg-card surface (#111f35):
  all four checks (lightness band, chroma floor, CVD separation, contrast)
  PASS — see plan notes. Do not reorder or recolor --sport-* without
  re-running the validator.

  Two typefaces, self-hosted (no CDN — matches the rest of this file's
  self-hosted approach, see fonts/ used by content_generator.py):
    - Manrope: the real body/UI face for BOTH apps (--font below). The old
      --font referenced 'Inter' but nothing ever @font-face'd it, so every
      page has silently been rendering in the system-ui fallback since the
      var was introduced — this fixes that for real.
    - Baloo 2: consumer-only display face (--font-display), used sparingly
      for the picks hero and big numbers on consumer.html. Deliberately NOT
      used on dashboard.html — its rounded, friendly shape is the whole
      point of the consumer redesign, and would read as un-serious on an
      admin/ops tool.
*/
@font-face {
  font-family: 'Manrope';
  font-weight: 400 800;
  font-display: swap;
  src: url('/fonts/Manrope-Variable.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-weight: 500 800;
  font-display: swap;
  src: url('/fonts/Baloo2-Variable.woff2') format('woff2');
}

:root {
  /* Surfaces */
  --bg-page:        #0a1420;
  --bg-card:        #111f35;
  --bg-card-hover:  #16243d;
  --bg-inset:       #0d1b2e;   /* inputs, nested panels */
  --border:         #1e3550;
  --border-strong:  #2c4a7a;

  /* Ink */
  --text-primary:   #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted:     #64748b;

  /* Accent (UI chrome — buttons, links, active tabs. Never used for data.) */
  --accent:         #2563eb;
  --accent-hover:   #3b82f6;
  --accent-wash:    rgba(37, 99, 235, 0.15);

  /* Status (fixed — result badges, never reused for a sport) */
  --status-good:    #22c55e;
  --status-good-bg: rgba(34, 197, 94, 0.15);
  --status-crit:    #ef4444;
  --status-crit-bg: rgba(239, 68, 68, 0.15);
  --status-warn:    #eab308;
  --status-warn-bg: rgba(234, 179, 8, 0.15);
  --status-muted:   #94a3b8;
  --status-muted-bg: rgba(148, 163, 184, 0.12);

  /* Sport categorical palette — fixed order, validated, never cycled */
  --sport-nba:      #3987e5;
  --sport-mlb:      #199e70;
  --sport-tennis:   #9085e9;
  --sport-soccer:   #d55181;
  --sport-ncaab:    #d95926;
  --sport-nhl:      #0891b2;
  --sport-mlbprops: #a16207;
  --sport-wnba:     #f97316;

  /* Consumer accent — warm friendly green, distinct from --accent (the
     admin tool's UI-chrome blue). Used for consumer.html's primary actions,
     confidence pills, and the hero card; never appears on dashboard.html. */
  --accent-consumer:      #3ddc84;
  --accent-consumer-ink:  #06331f;
  --accent-consumer-soft: rgba(61, 220, 132, 0.13);
  --tier-good:      #f5b942;
  --tier-good-soft: rgba(245, 185, 66, 0.14);

  --radius:   12px;
  --radius-sm: 8px;
  --font:         'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: 'Baloo 2', 'Manrope', system-ui, sans-serif;
  --mono:     ui-monospace, 'SF Mono', 'Cascadia Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font);
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

/* ---------------------------------------------------------------------
   Components
--------------------------------------------------------------------- */

.apx-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.apx-card-hover:hover { background: var(--bg-card-hover); }

.apx-input, .apx-select {
  background: var(--bg-inset);
  border: 1px solid var(--border);
  color: var(--text-primary);
  border-radius: var(--radius-sm);
}
.apx-input:focus, .apx-select:focus {
  outline: none;
  border-color: var(--accent);
}

.apx-btn {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: background .15s;
}
.apx-btn:hover { background: var(--accent-hover); }
.apx-btn:disabled { opacity: .5; cursor: not-allowed; }

.apx-btn-ghost {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
}
.apx-btn-ghost:hover { color: var(--text-primary); border-color: var(--accent); }

.apx-btn-danger {
  background: var(--status-crit-bg);
  color: var(--status-crit);
  border: 1px solid rgba(239, 68, 68, .35);
  border-radius: var(--radius-sm);
}
.apx-btn-danger:hover { background: rgba(239, 68, 68, .25); }

/* Result badges — status color, never a sport color */
.apx-badge { border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .3px; padding: 2px 9px; }
.apx-badge-W    { background: var(--status-good-bg); color: var(--status-good); }
.apx-badge-L    { background: var(--status-crit-bg); color: var(--status-crit); }
.apx-badge-Push { background: var(--status-warn-bg); color: var(--status-warn); }
.apx-badge-Pending { background: var(--status-muted-bg); color: var(--status-muted); }

/* Sport pills — categorical color, fixed order */
.apx-pill { border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .3px; padding: 2px 9px; }
.apx-pill-NBA      { background: color-mix(in srgb, var(--sport-nba) 18%, transparent);      color: var(--sport-nba); }
.apx-pill-MLB      { background: color-mix(in srgb, var(--sport-mlb) 18%, transparent);      color: var(--sport-mlb); }
.apx-pill-Tennis   { background: color-mix(in srgb, var(--sport-tennis) 18%, transparent);   color: var(--sport-tennis); }
.apx-pill-Soccer   { background: color-mix(in srgb, var(--sport-soccer) 18%, transparent);   color: var(--sport-soccer); }
.apx-pill-NCAAB    { background: color-mix(in srgb, var(--sport-ncaab) 18%, transparent);    color: var(--sport-ncaab); }
.apx-pill-NHL      { background: color-mix(in srgb, var(--sport-nhl) 18%, transparent);      color: var(--sport-nhl); }
.apx-pill-MLBProps { background: color-mix(in srgb, var(--sport-mlbprops) 18%, transparent); color: var(--sport-mlbprops); }

.apx-tab { transition: all .15s; color: var(--text-muted); }
.apx-tab.active { background: var(--accent); color: #fff; }
.apx-tab:not(.active):hover { color: var(--text-secondary); }

.apx-lock-overlay {
  backdrop-filter: blur(4px);
  background: rgba(10, 20, 32, .72);
  border-radius: var(--radius);
}

.apx-sparkline-up   { color: var(--status-good); }
.apx-sparkline-down { color: var(--status-crit); }

/* Streak strip — small sequence of W/L dots, most recent first */
.apx-streak-dot {
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
}
.apx-streak-dot.W { background: var(--status-good-bg); color: var(--status-good); }
.apx-streak-dot.L { background: var(--status-crit-bg); color: var(--status-crit); }

/* CVD-safe fallback: a texture pattern reserved for cases where color alone
   would carry meaning (kept minimal — this product is short/long lists +
   simple charts, not scatter/heatmap, so it's rarely needed). */
.apx-texture-lines {
  background-image: repeating-linear-gradient(45deg, currentColor 0, currentColor 1px, transparent 1px, transparent 6px);
  opacity: .15;
}

/* ---------------------------------------------------------------------
   Terminal shell — icon rail + scrolling ticker (replaces the old top
   tab bar on both dashboard.html and consumer.html). Modeled on the
   dense trading-terminal layout of OddsJam/Unabated rather than a
   generic SaaS dashboard: numbers get their own typeface, nav is a
   persistent rail instead of competing for header space, and the
   ticker keeps top-line record/P&L/streak visible from every tab.
--------------------------------------------------------------------- */
.apx-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.apx-shell {
  display: grid;
  grid-template-columns: 64px 1fr;
  grid-template-rows: 30px 1fr;
  min-height: 100vh;
}

.apx-ticker {
  grid-column: 1 / -1;
  background: var(--bg-inset);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  white-space: nowrap;
}
.apx-ticker::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg-inset) 0%, transparent 5%, transparent 95%, var(--bg-inset) 100%);
  pointer-events: none;
  z-index: 1;
}
.apx-ticker-track {
  display: flex;
  gap: 2.25rem;
  padding-left: 1rem;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .01em;
  animation: apx-ticker-scroll 42s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .apx-ticker-track { animation: none; } }
@keyframes apx-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.apx-ticker-item { color: var(--text-muted); display: flex; align-items: center; gap: .45em; }
.apx-ticker-item b { color: var(--text-primary); font-weight: 600; }

.apx-rail {
  grid-row: 2;
  background: var(--bg-page);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 2px;
  position: sticky;
  top: 30px;
  height: calc(100vh - 30px);
}
.apx-rail-mark {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--accent-hover);
  font-size: 16px;
  margin-bottom: 14px;
}
.apx-rail-btn {
  width: 64px; height: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  border: none; border-left: 2px solid transparent;
  background: none;
  color: var(--text-muted);
  font-size: 9px;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: 700;
  font-family: var(--font);
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.apx-rail-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.apx-rail-btn.active { color: var(--accent-hover); border-left-color: var(--accent-hover); background: var(--accent-wash); }
.apx-rail-btn:hover:not(.active) { color: var(--text-secondary); }
.apx-rail-btn:focus-visible { outline: 2px solid var(--accent-hover); outline-offset: -2px; }

.apx-main { grid-row: 2; padding: 20px 24px 48px; max-width: 1360px; width: 100%; margin: 0 auto; }

/* Betting-slip style row — used for pick lists in place of the old plain
   card-per-pick treatment. Left edge encodes result so a scanned column
   of picks reads win/loss at a glance without parsing the badge text. */
.apx-slip { display: flex; }
.apx-slip-edge { width: 3px; flex-shrink: 0; border-radius: 2px 0 0 2px; }
.apx-slip-edge.W       { background: var(--status-good); }
.apx-slip-edge.L       { background: var(--status-crit); }
.apx-slip-edge.Push    { background: var(--status-warn); }
.apx-slip-edge.Pending { background: var(--status-muted); }
.apx-slip-body { flex: 1; min-width: 0; }

@media (max-width: 640px) {
  .apx-shell { grid-template-columns: 54px 1fr; }
  .apx-rail-btn { width: 54px; font-size: 8px; }
  .apx-main { padding: 16px 14px 40px; }
  /* Big mono stat numbers (record, P&L, units) wrap to 3+ lines inside a
     2-col grid tile at phone widths — every such number in the product
     lives inside an .apx-card, so scoping the shrink there (rather than
     touching Tailwind's .text-3xl globally) can't catch anything else. */
  .apx-card .text-3xl { font-size: 1.5rem; line-height: 2rem; }
  /* Ticker items are sized for desktop skimming; tighten on phones so more
     of the scroll is legible at once without needing a bigger viewport. */
  .apx-ticker-track { font-size: 10px; gap: 1.5rem; }
}

/* Sport-chooser tiles — gate shown before a picks list (one sport at a
   time, chosen up front, rather than an all-sports feed filtered after
   the fact). */
.apx-sport-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 26px 12px; border-radius: var(--radius);
  background: var(--bg-card); border: 1px solid var(--border);
  cursor: pointer; transition: transform .15s, border-color .15s, background-color .15s;
  font-weight: 600; font-size: 14px; color: var(--text-secondary);
}
.apx-sport-tile:hover { transform: translateY(-2px); background: var(--bg-card-hover); }
.apx-sport-tile .apx-sport-tile-emoji { font-size: 28px; }

/* ---------------------------------------------------------------------
   Consumer shell — replaces the icon rail + scrolling ticker on
   consumer.html only (dashboard.html keeps .apx-shell/.apx-rail/.apx-ticker
   as-is; this product now genuinely has two different shells because it
   has two different audiences — Kesh running the model vs. someone who
   just wants to know what to bet today).
--------------------------------------------------------------------- */
.apx-cshell { max-width: 480px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.apx-ctop {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 16px 8px;
}
.apx-cbrand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 17px; }
.apx-cbrand-mark {
  width: 26px; height: 26px; border-radius: 8px; object-fit: contain;
}
.apx-cmain { flex: 1; padding: 4px 16px 100px; display: flex; flex-direction: column; gap: 24px; }

/* Bottom tab bar — plain labels, thumb-reachable, no icon-rail density */
.apx-ctabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  max-width: 480px; margin: 0 auto;
  display: flex; background: var(--bg-card); border-top: 1px solid var(--border);
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
}
.apx-ctab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 4px; border-radius: 12px; background: none; border: none;
  color: var(--text-muted); font-family: var(--font); font-weight: 700; font-size: 11px;
  cursor: pointer; transition: color .15s, background-color .15s;
}
.apx-ctab svg { width: 20px; height: 20px; }
.apx-ctab.active { color: var(--accent-consumer); background: var(--accent-consumer-soft); }
.apx-ctab:not(.active):hover { color: var(--text-secondary); }

.apx-display { font-family: var(--font-display); }

.apx-greeting h1 {
  font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.15;
  margin: 0 0 4px; text-wrap: balance; color: var(--text-primary);
}
.apx-greeting p { margin: 0; color: var(--text-secondary); font-size: 14.5px; line-height: 1.5; }

.apx-streak-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 12px 6px 10px;
  font-size: 12.5px; font-weight: 700; color: var(--text-primary);
}
.apx-streak-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-consumer); }

/* Hero pick card — photo (when resolved) or a sport-colored gradient
   fallback, full-bleed, with the day's single best pick in plain language.
   The dark wash keeps text legible over any photo, same technique as the
   ballpark carousel backgrounds in content_generator.py. */
.apx-hero {
  position: relative; border-radius: 24px; overflow: hidden;
  min-height: 380px; display: flex; flex-direction: column; justify-content: flex-end;
  box-shadow: 0 20px 50px -24px rgba(0,0,0,0.6);
  background-color: var(--bg-inset);
}
.apx-hero-bg { position: absolute; inset: 0; background-size: cover; background-position: center 60%; }
.apx-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,20,32,0.1) 0%, rgba(10,20,32,0.35) 42%, rgba(10,20,32,0.94) 100%);
}
.apx-hero-inner { position: relative; padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.apx-hero-toprow { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.apx-hero-matchup {
  font-size: 12.5px; font-weight: 700; color: rgba(241,245,249,0.8);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.15);
  padding: 6px 11px; border-radius: 999px; backdrop-filter: blur(6px);
}
.apx-hero-pick {
  font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1.06;
  color: #fff; text-wrap: balance; text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.apx-hero-why { font-size: 14px; line-height: 1.5; color: rgba(241,245,249,0.86); max-width: 44ch; }
.apx-hero-stats { display: flex; gap: 10px; }
.apx-hero-stat {
  flex: 1; background: rgba(17,31,53,0.72); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 10px 12px; backdrop-filter: blur(8px);
}
.apx-hero-stat .num { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: #fff; font-variant-numeric: tabular-nums; }
.apx-hero-stat .label { font-size: 11px; color: rgba(241,245,249,0.65); font-weight: 700; margin-top: 1px; }

/* Confidence pill — plain-language tier instead of a raw EV%/edge number
   on the surface. The real number still exists (apx-hero-stat / detail
   toggle), this is just what leads. */
.apx-confidence {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 12.5px; padding: 7px 13px; border-radius: 999px;
}
.apx-confidence.strong { background: var(--accent-consumer); color: var(--accent-consumer-ink); box-shadow: 0 8px 18px -6px rgba(61,220,132,0.5); }
.apx-confidence.good   { background: var(--tier-good); color: #2b1a02; }

/* Simple pick rows — the rest of the day's picks below the hero */
.apx-pickrow {
  display: flex; align-items: center; gap: 13px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; padding: 13px 13px;
}
.apx-pickrow-emblem {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 13px; color: #fff;
}
.apx-pickrow-main { flex: 1; min-width: 0; }
.apx-pickrow-teams { font-size: 11.5px; color: var(--text-muted); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.apx-pickrow-line { font-size: 14.5px; font-weight: 700; color: var(--text-primary); margin-top: 2px; }
.apx-tier-chip { flex-shrink: 0; font-size: 11.5px; font-weight: 800; padding: 5px 10px; border-radius: 999px; white-space: nowrap; }
.apx-tier-chip.strong { background: var(--accent-consumer-soft); color: var(--accent-consumer); }
.apx-tier-chip.good   { background: var(--tier-good-soft); color: var(--tier-good); }

/* "How it works" explainer strip */
.apx-explainer {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px;
  padding: 16px 16px; display: flex; gap: 13px; align-items: flex-start;
}
.apx-explainer-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px;
  background: var(--accent-consumer-soft); display: flex; align-items: center; justify-content: center; font-size: 15px;
}
.apx-explainer p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); }
.apx-explainer strong { color: var(--text-primary); }

/* Subscribe / CTA card */
.apx-cta-card {
  background: linear-gradient(160deg, var(--bg-card), var(--bg-inset));
  border: 1px solid var(--border); border-radius: 22px; padding: 24px 20px;
  text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.apx-cta-card h3 { font-family: var(--font-display); font-size: 20px; margin: 0; text-wrap: balance; color: var(--text-primary); }
.apx-cta-card p { margin: 0; color: var(--text-secondary); font-size: 13.5px; max-width: 34ch; }
.apx-cta-btn {
  margin-top: 4px; width: 100%; background: var(--accent-consumer); color: var(--accent-consumer-ink);
  border: none; border-radius: 14px; padding: 14px; font-family: var(--font); font-weight: 800;
  font-size: 15px; cursor: pointer; box-shadow: 0 10px 22px -10px rgba(61,220,132,0.5);
}
.apx-cta-btn:hover { filter: brightness(1.05); }
.apx-cta-btn:disabled { opacity: .6; cursor: not-allowed; }
.apx-cta-fine { font-size: 11.5px; color: var(--text-muted); }

/* Plain-language stat tiles for the Track Record tab */
.apx-stat-tile {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  padding: 14px 16px; flex: 1;
}
.apx-stat-tile .num { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.apx-stat-tile .label { font-size: 12px; color: var(--text-muted); font-weight: 700; margin-top: 2px; }

/* ---------------------------------------------------------------------
   Consumer desktop layout — the shell above is phone-first (480px column,
   fixed bottom tabs) on purpose, since that's the primary use case, but it
   was never given a real desktop treatment: a 480px column centered on a
   1440px monitor just reads as "the mobile site, stretched," which is
   exactly the bug. From here up, the tab bar moves inline next to the
   brand instead of pinned to the bottom, the shell actually uses the
   width, and the Today tab arranges the hero pick and the rest of the
   day's picks side by side instead of one long vertical stack.
--------------------------------------------------------------------- */
@media (min-width: 900px) {
  .apx-cshell { max-width: 1120px; }
  .apx-ctop { padding: 28px 8px 20px; }
  .apx-cbrand { font-size: 19px; }
  .apx-cmain { padding: 4px 8px 64px; gap: 28px; }

  /* Tab bar: .apx-ctabs is a DOM sibling of .apx-ctop/.apx-cmain inside the
     flex-column .apx-cshell, so unpinning it from the bottom alone leaves it
     trailing after the main content in normal flow — it needs an explicit
     order to actually become a nav row under the header instead of a mobile
     bar pinned to the viewport bottom. */
  .apx-ctop  { order: 1; }
  .apx-ctabs {
    order: 2; position: static; max-width: none; margin: 0 8px 4px; width: auto;
    background: none; border-top: none; border-bottom: 1px solid var(--border);
    padding: 0 0 14px; gap: 4px;
  }
  .apx-cmain { order: 3; }
  .apx-ctab {
    flex: none; flex-direction: row; gap: 7px;
    padding: 9px 16px; border-radius: 10px; font-size: 13px;
  }
  .apx-ctab svg { width: 16px; height: 16px; }

  .apx-greeting h1 { font-size: 34px; }
  .apx-greeting p { font-size: 16px; }

  /* Today tab is a vertical stack of full-width sections on desktop; each
     section fills the width with its own internal grid so the page reads as
     a complete scrolling homepage instead of a 480px column stretched. */
  #todayContent { display: flex; flex-direction: column; gap: 40px; }
  .apx-hero { min-height: 360px; }
  .apx-hero-inner { padding: 32px 36px; gap: 16px; }
  .apx-hero-pick { font-size: 48px; }
  .apx-hero-logos .apx-logo { width: 104px !important; height: 104px !important; }
  .apx-hero-logos .apx-logo-vs { font-size: 20px; }
  .apx-slate-grid { grid-template-columns: repeat(3, 1fr); }
  .apx-season-grid { grid-template-columns: repeat(4, 1fr); }
  .apx-cta-card { padding: 40px; }
  .apx-cta-card .apx-cta-btn { max-width: 360px; }

  /* Track Record tab: keep line length sane instead of letting stat
     numbers and pick rows stretch across the full 1120px shell. */
  #recordContent { max-width: 760px; }

  #tab-account-panel { max-width: 480px; }
}

/* ---------------------------------------------------------------------
   Team logos + rich homepage sections (consumer "Today" tab). Logos are
   served by /api/logo/<sport>/<team>; the colored emblem shows first and
   the real logo fades in over it, so a miss (Tennis players, ESPN gaps)
   just leaves the emblem — never a broken-image icon.
--------------------------------------------------------------------- */
.apx-logo { position: relative; display: inline-flex; flex-shrink: 0; }
.apx-logo-fb {
  position: absolute; inset: 0; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 12px; color: #fff;
  transition: opacity .25s;
}
.apx-logo img { position: relative; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .25s; }
/* Round player headshots (Tennis, MLB Props) — cover-cropped avatars with a
   subtle ring, distinct from the contain-fit transparent team logos. */
.apx-logo-round .apx-logo-fb { border-radius: 50%; }
.apx-logo-round img { object-fit: cover; border-radius: 50%; background: var(--bg-inset); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.apx-logo-emblem {
  border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 12px; flex-shrink: 0;
}
.apx-logo-pair { display: inline-flex; align-items: center; gap: 12px; }
.apx-logo-vs { font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--text-muted); }

/* Section scaffolding */
.apx-section { display: flex; flex-direction: column; gap: 14px; }
.apx-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.apx-section-head h2 { font-size: 19px; font-weight: 700; margin: 0; color: var(--text-primary); }
.apx-section-sub { font-size: 13px; color: var(--text-muted); font-weight: 600; white-space: nowrap; }
.apx-section-link { background: none; border: none; color: var(--accent-consumer); font-family: var(--font); font-weight: 700; font-size: 13px; cursor: pointer; padding: 0; }

/* Hero logos */
.apx-hero-logos { display: flex; align-items: center; justify-content: flex-start; margin: 2px 0; }
.apx-hero-logos .apx-logo-vs { color: rgba(255,255,255,.7); font-size: 16px; }
.apx-hero-logos .apx-logo-fb { background: rgba(255,255,255,.16) !important; }

/* Today's slate — card grid */
.apx-slate-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.apx-slate-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px;
  padding: 16px; display: flex; flex-direction: column; gap: 10px;
  transition: transform .15s, border-color .15s;
}
.apx-slate-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }
.apx-slate-top { display: flex; align-items: center; justify-content: space-between; }
.apx-slate-logos { display: flex; align-items: center; justify-content: center; padding: 4px 0; min-height: 50px; }
.apx-slate-emoji { font-size: 30px; }
.apx-slate-teams { font-size: 11.5px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; text-align: center; }
.apx-slate-pick { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--text-primary); text-align: center; text-wrap: balance; line-height: 1.15; }
.apx-slate-foot { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-secondary); font-weight: 600; border-top: 1px solid var(--border); padding-top: 10px; }

/* Recent-results strip — horizontal scroll of settled picks */
.apx-week-strip { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; }
.apx-week-chip {
  scroll-snap-align: start; flex: 0 0 172px;
  background: var(--bg-card); border: 1px solid var(--border); border-left-width: 3px;
  border-radius: 14px; padding: 12px 13px; display: flex; flex-direction: column; gap: 8px;
}
.apx-week-chip.W { border-left-color: var(--status-good); }
.apx-week-chip.L { border-left-color: var(--status-crit); }
.apx-week-chip.Push { border-left-color: var(--status-warn); }
.apx-week-top { display: flex; align-items: center; gap: 9px; }
.apx-week-pick { font-size: 13.5px; font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.apx-week-res { font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* Season-at-a-glance stat grid */
.apx-season-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

/* Loss variant of the plain-language tier chip */
.apx-tier-chip.loss { background: var(--status-crit-bg); color: var(--status-crit); }

/* Desktop grid overrides — placed after the component base rules above so
   they win by source order (the earlier @media block's copies of these were
   being overridden by the later single-column base defaults). */
@media (min-width: 900px) {
  .apx-slate-grid  { grid-template-columns: repeat(3, 1fr); }
  .apx-season-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------------
   Sport-first navigation: the picker (landing), the back control, and the
   per-sport top-bar label. The app opens on the picker; choosing a sport
   scopes the whole dashboard to it, with one tap back to switch.
--------------------------------------------------------------------- */
.apx-sportpick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.apx-sportpick-tile {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 22px 14px 18px; border-radius: 18px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--sc, var(--border-strong));
  color: var(--text-primary); font-family: var(--font);
  transition: transform .15s, border-color .15s, background-color .15s;
}
.apx-sportpick-tile:hover { transform: translateY(-3px); background: var(--bg-card-hover); }
.apx-sportpick-emoji { font-size: 34px; line-height: 1; }
.apx-sportpick-name { font-family: var(--font-display); font-weight: 700; font-size: 17px; text-align: center; }
.apx-sportpick-rec { font-size: 12.5px; color: var(--text-muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.apx-sportpick-today { margin-top: 4px; font-size: 11.5px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--accent-consumer-soft); color: var(--accent-consumer); }
.apx-sportpick-today.off { background: var(--status-muted-bg); color: var(--text-muted); }

#topLeft { display: flex; align-items: center; gap: 10px; }
.apx-back {
  width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--bg-card); color: var(--text-primary); font-size: 18px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.apx-back:hover { border-color: var(--accent-consumer); color: var(--accent-consumer); }
.apx-topsport { font-family: var(--font-display); font-weight: 700; font-size: 17px; white-space: nowrap; }

/* Record tab best/worst — stacked on mobile, side-by-side on desktop */
.apx-record-bestworst { display: grid; grid-template-columns: 1fr; gap: 20px; }

@media (min-width: 900px) {
  .apx-sportpick-grid { grid-template-columns: repeat(4, 1fr); }
  .apx-record-bestworst { grid-template-columns: 1fr 1fr; }
}