/* =============================================================================
   app.css — shared design system for xylanpicks
   =============================================================================
   THE METHOD (read me before adding UI):
   Build pages out of these reusable, mobile-first components instead of bespoke
   per-page CSS.  Everything here is responsive by default (phone → tablet →
   desktop) and uses the shared tokens below, so new pages match automatically.

   Tokens (CSS vars) live in :root — use var(--x-*) for colors/spacing/radius so
   one change re-themes the whole app.

   Components (all prefixed `x-` so they never clash with page-local classes):
     .x-container        page wrapper: centers content, fluid gutters, safe max-width
     .x-section          vertical stack with consistent gap
     .x-section-title    small uppercase section heading
     .x-card             standard panel (dark, bordered, rounded, padded)
     .x-grid             auto-responsive grid: 1col phone → fills as it widens
       .x-grid--2 / --3 / --4   cap the max columns
     .x-row-scroll       horizontal scroller for carousels (snaps, hidden bar)
     .x-table-wrap       wrap ANY <table> in this so it scrolls on small screens
     .x-tabs / .x-tab    scrollable tab bar (.is-active for the current tab)
     .x-badge            tiny status/verdict chip; modifiers: --pos --neg --warn
                         --dim --accent  (or set --x-badge-bg inline)
     .x-pill             stat pill (mono, rounded)
     .x-btn              button; modifiers: --primary --ghost --warn --sm
     .x-stat             label-over-value tile (use inside .x-grid for stat rows)

   Rules of thumb:
     • Never set fixed px widths on layout containers — let flex/grid + max-width
       handle it.  Fixed px is fine for icons/avatars only.
     • Any table → wrap in .x-table-wrap.
     • Any horizontal list of cards → .x-row-scroll (don't let it widen the page).
     • Tap targets ≥ 40px (.x-btn and .x-tab already satisfy this).
   ========================================================================== */

:root {
  --x-bg:        #06090D;   /* ink slate base */
  --x-surface:   #0C1218;   /* cards / panels */
  --x-surface-2: #151C24;   /* insets, hover */
  --x-border:    rgba(148, 173, 196, 0.14);
  --x-text:      #E8EEF4;
  --x-text-dim:  #8FA3B5;
  --x-text-dim2: #5E7184;
  --x-accent:    #0F9F85;   /* primary (signal teal) */
  --x-accent-2:  #3DDCB0;   /* secondary (mint) — links/active */
  --x-pos:       #22c55e;
  --x-neg:       #ef4444;
  --x-warn:      #f5a524;

  --x-radius:    12px;
  --x-radius-sm: 8px;
  --x-gap:       14px;
  --x-pad:       14px;

  /* Fluid page gutter: smaller on phones, roomier on desktop. */
  --x-gutter: clamp(12px, 4vw, 24px);
}

/* ── Layout ───────────────────────────────────────────────────────────────── */
.x-container {
  width: 100%;
  max-width: 1024px;
  margin-inline: auto;
  padding-inline: var(--x-gutter);
  /* Respect iPhone notch / rounded corners (viewport-fit=cover is set). */
  padding-left:  max(var(--x-gutter), env(safe-area-inset-left));
  padding-right: max(var(--x-gutter), env(safe-area-inset-right));
}
.x-container--narrow { max-width: 768px; }
.x-container--wide   { max-width: 1280px; }

.x-section { display: flex; flex-direction: column; gap: var(--x-gap); }

.x-section-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--x-text-dim2);
}

/* ── Card ─────────────────────────────────────────────────────────────────── */
.x-card {
  background: var(--x-surface);
  border: 1px solid var(--x-border);
  border-radius: var(--x-radius);
  padding: var(--x-pad);
  display: flex; flex-direction: column; gap: 10px;
}
.x-card--flush { padding: 0; overflow: hidden; }

/* ── Responsive grid ──────────────────────────────────────────────────────── */
/* Default: as many ~150px columns as fit; 1 column on the narrowest phones. */
.x-grid {
  display: grid;
  gap: var(--x-gap);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.x-grid--2 { grid-template-columns: repeat(2, 1fr); }
.x-grid--3 { grid-template-columns: 1fr; }
.x-grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) {
  .x-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .x-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Horizontal scroller (carousels / pick rows) ──────────────────────────── */
.x-row-scroll {
  display: flex; gap: var(--x-gap);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;            /* Firefox */
  padding-bottom: 2px;
}
.x-row-scroll::-webkit-scrollbar { display: none; }   /* WebKit */
.x-row-scroll > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ── Tables: always scroll horizontally on small screens ──────────────────── */
.x-table-wrap {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--x-radius);
}
.x-table-wrap table { width: 100%; border-collapse: collapse; }

/* ── Tabs (scrollable on phones) ──────────────────────────────────────────── */
.x-tabs {
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--x-border);
}
.x-tabs::-webkit-scrollbar { display: none; }
.x-tab {
  flex: 0 0 auto; background: transparent; border: 0; cursor: pointer;
  color: var(--x-text-dim); font-size: 13px; font-weight: 700;
  padding: 10px 12px; min-height: 40px;          /* tap target */
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.x-tab.is-active { color: var(--x-accent-2); border-bottom-color: var(--x-accent-2); }

/* ── Badge ────────────────────────────────────────────────────────────────── */
.x-badge {
  display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
  color: #000; background: var(--x-badge-bg, var(--x-text-dim2));
}
.x-badge--pos    { --x-badge-bg: var(--x-pos); }
.x-badge--neg    { --x-badge-bg: var(--x-neg); }
.x-badge--warn   { --x-badge-bg: var(--x-warn); }
.x-badge--dim    { --x-badge-bg: var(--x-text-dim2); }
.x-badge--accent { --x-badge-bg: var(--x-accent); color: #fff; }

/* ── Pill (stat chip) ─────────────────────────────────────────────────────── */
.x-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, monospace; font-size: 11.5px; font-weight: 800;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--x-border); color: var(--x-text-dim);
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.x-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: 8px 16px; border: 1px solid var(--x-border);
  border-radius: var(--x-radius-sm); background: var(--x-surface-2);
  color: var(--x-text); font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.x-btn:hover:not(:disabled) { background: #1A2430; }
.x-btn:disabled { opacity: .6; cursor: default; }
.x-btn--primary { background: var(--x-accent-2); color: #04110D; border-color: transparent; }
.x-btn--primary:hover:not(:disabled) { background: #5EE9C1; }
.x-btn--warn    { background: var(--x-warn); color: #000; border-color: transparent; }
.x-btn--ghost   { background: transparent; }
.x-btn--sm      { min-height: 32px; padding: 5px 12px; font-size: 12px; }

/* ── Stat tile (label over value) ─────────────────────────────────────────── */
.x-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.x-stat__label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--x-text-dim2); line-height: 1.2;
}
.x-stat__value {
  font-family: ui-monospace, monospace; font-size: 18px; font-weight: 800;
  color: var(--x-text);
}

/* ── Color helpers ────────────────────────────────────────────────────────── */
.x-pos { color: var(--x-pos); } .x-neg { color: var(--x-neg); }
.x-warn { color: var(--x-warn); } .x-dim { color: var(--x-text-dim); }
.x-accent { color: var(--x-accent-2); }

/* ── League nav (Sports section) — scroll leagues + sub-tabs on phones ───── */
.ln-wrap {
  display: flex; flex-direction: column; gap: 8px;
  max-width: 100%; min-width: 0;
}
.ln-leagues-scroll,
.ln-subtabs-scroll {
  display: flex; max-width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  padding-bottom: 2px;
}
.ln-leagues-scroll::-webkit-scrollbar,
.ln-subtabs-scroll::-webkit-scrollbar { display: none; }

/* =============================================================================
   GRADIENT SKIN — "Signal Harbor"  (2026-07-22)
   =============================================================================
   Ink-slate base; brand color flows through one teal→emerald→amber family
   instead of the old violet/fuchsia skin:

       g1 #0E8F7A (deep teal, cold anchor)
        → g2 #1DBF8A (signal emerald, the energy)
        → g3 #E8B84A (warm amber tip — used sparingly)

   Layering tricks (so NO per-page template edits are needed):
     • Page <style> blocks load AFTER this file, so the overrides below use
       !important to win — they target the exact page classes that hardcode
       a flat brand accent.
     • Card "sheen" sets background-IMAGE only: page CSS background:#1a1a1a
       shorthand resets image to none at normal priority, so the !important
       longhand image layers over each card's existing color untouched.
     • Atmosphere = two fixed radial washes on body::before/after at low
       opacity — depth without lifting the blacks.
   ========================================================================== */

:root {
  --g1: #0E8F7A;
  --g2: #1DBF8A;
  --g3: #E8B84A;
  /* Buttons/pills read teal→emerald with a warm amber corner past the edge. */
  --grad:      linear-gradient(135deg, var(--g1) 0%, var(--g2) 62%, var(--g3) 130%);
  /* Text + hairlines show the full run, amber included. */
  --grad-full: linear-gradient(100deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);
  --grad-veil: linear-gradient(160deg, rgba(14, 143, 122, 0.10) 0%,
                                       rgba(29, 191, 138, 0.04) 38%,
                                       rgba(0, 0, 0, 0) 62%);
}

/* Keep secondary in the same family — one token recolors every
   .x-tab/.x-accent/link built on it. */
:root { --x-accent-2: #3DDCB0; }
.x-btn--primary { background: var(--grad); color: #fff; }
.x-btn--primary:hover:not(:disabled) { background: var(--grad); filter: brightness(1.15); }

/* ── Atmosphere: fixed corner washes on the ink void ──────────────────────── */
body::before, body::after {
  content: ""; position: fixed; z-index: -1; pointer-events: none;
  width: 70vmax; height: 70vmax; border-radius: 50%;
}
body::before {      /* teal, upper left */
  top: -32vmax; left: -22vmax;
  background: radial-gradient(circle, rgba(14, 143, 122, 0.14) 0%, rgba(14, 143, 122, 0) 62%);
}
body::after {       /* emerald→amber, lower right */
  bottom: -36vmax; right: -24vmax;
  background: radial-gradient(circle, rgba(29, 191, 138, 0.10) 0%,
                                      rgba(232, 184, 74, 0.05) 40%,
                                      rgba(0, 0, 0, 0) 65%);
}

/* ── Nav: gradient hairline + wordmark ────────────────────────────────────── */
nav.sticky { border-bottom-color: transparent !important; position: sticky; }
nav.sticky::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--grad-full); opacity: 0.65; pointer-events: none;
}
.g-text {
  background-image: var(--grad-full);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important; -webkit-text-fill-color: transparent;
}
.g-dot { color: var(--g3) !important; }

/* ── Page titles: gradient display text ───────────────────────────────────── */
main h1 {
  background-image: var(--grad-full);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
}

/* ── Tailwind accent surfaces (league pills, sub-tabs, admin Run, etc.) ───── */
.bg-accent {
  background-image: var(--grad) !important;
  box-shadow: 0 2px 14px -6px rgba(29, 191, 138, 0.55);
}
.bg-accent:hover { filter: brightness(1.12); }

/* ── Page-local actives + track buttons → gradient ────────────────────────
   (excludes tracked/pending states so their green/quiet styles still win) */
.sp-pill.active, .tp-pill.active, .mh-pill.active, .mb-pill.active,
.rs-chip.active, .view-pill-active,
.track-btn:not(.is-tracked):not(.is-pending),
.sp-track-btn:not(.is-tracked):not(.is-pending),
.tp-track-btn:not(.is-tracked):not(.is-pending),
.gd-track-btn:not(.is-tracked):not(.is-pending) {
  background: var(--grad) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 12px -6px rgba(29, 191, 138, 0.5);
}
.sp-pill.active, .tp-pill.active, .mh-pill.active, .mb-pill.active,
.rs-chip.active, .view-pill-active { color: #fff !important; }
.track-btn:hover:not(:disabled):not(.is-tracked),
.sp-track-btn:hover:not(:disabled):not(.is-tracked),
.tp-track-btn:hover:not(:disabled):not(.is-tracked),
.gd-track-btn:hover:not(:disabled):not(.is-tracked) {
  background: var(--grad) !important; filter: brightness(1.15);
}

/* Tab underlines join the family (gradient border via border-image). */
.gd-tab.active {
  border-image: var(--grad-full) 1 !important;
  color: #fff !important;
}
.x-tab.is-active { color: var(--x-accent-2); border-bottom-color: var(--g2); }

/* ── Card sheen: a warm light from the upper-left, color untouched ────────── */
.x-card, .sp-card, .tp-card, .nr-card, .tp-scorebox, .mb-card, .mh-card,
.gd-card, .rs-card, .pp-card, .dash-card, .sp-quota,
.hm-hero, .hm-bento-item, .hm-ev-card, .hm-conf-card, .hm-scan-card, .hm-hi-card, .hm-stub, .hm-news-card,
.pc-row, .pc-mcard, .gg-header, .prop-card, .pl-hero, .pl-card,
.bg-card {
  background-image: var(--grad-veil) !important;
}

/* ── Small polish ─────────────────────────────────────────────────────────── */
::selection { background: rgba(29, 191, 138, 0.45); color: #fff; }
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid rgba(29, 191, 138, 0.6); outline-offset: 1px;
}

/* =============================================================================
   HOME — command-center dashboard
   ========================================================================== */
.hm-page {
  display: flex; flex-direction: column; gap: clamp(20px, 4vw, 28px);
  padding-block: clamp(16px, 3vw, 28px);
}
.hm-page.hm-blank {
  min-height: 50vh;
}

.hm-hero {
  position: relative; overflow: hidden;
  border-radius: calc(var(--x-radius) + 4px);
  border: 1px solid var(--x-border);
  background: var(--x-surface);
  background-image: var(--grad-veil);
  padding: clamp(18px, 4vw, 28px);
  display: grid; gap: 18px;
}
.hm-hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--grad-full); opacity: 0.85;
}
.hm-hero-copy {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hm-hero-kicker {
  font-size: 10px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--x-text-dim2);
}
.hm-hero-title {
  font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; line-height: 1.1;
  letter-spacing: -0.02em; margin-top: 4px;
  background-image: var(--grad-full);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hm-hero-sub {
  font-size: 13px; color: var(--x-text-dim); margin-top: 8px;
  max-width: 46ch; line-height: 1.45;
  text-align: center;
}
.hm-hero-stats {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 480px) {
  .hm-hero-stats { grid-template-columns: repeat(3, 1fr); }
}
.hm-hero-stat {
  min-width: 0;
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--x-border);
  border-radius: var(--x-radius-sm); padding: 12px 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hm-hero-stat__label {
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--x-text-dim2);
}
.hm-hero-stat__value {
  font-family: ui-monospace, monospace; font-size: 1.35rem;
  font-weight: 800; margin-top: 4px;
}
.hm-hero-stat__meta {
  font-size: 11px; font-weight: 600; font-family: ui-monospace, monospace;
  color: var(--x-text-dim2); margin-top: 2px;
}

.hm-bento {
  display: grid; gap: 10px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .hm-bento { grid-template-columns: repeat(4, 1fr); } }
.hm-bento-item {
  min-width: 0; overflow: hidden;
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: var(--x-radius); padding: 14px 16px;
  background-image: var(--grad-veil);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.hm-bento-item:hover { border-color: rgba(61, 220, 176, 0.35); transform: translateY(-1px); }
.hm-bento-label {
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--x-text-dim2); line-height: 1.25;
}
.hm-bento-main {
  font-size: 1.125rem; font-weight: 800; font-family: ui-monospace, monospace;
  margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hm-bento-sub {
  font-size: 11px; font-weight: 600; font-family: ui-monospace, monospace;
  margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.hm-section { display: flex; flex-direction: column; gap: 12px; }
.hm-section-hd {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.hm-section-title {
  font-size: 11px; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--x-text);
  display: inline-flex; align-items: center; gap: 8px;
}
.hm-section-title::before {
  content: ""; width: 4px; height: 14px; border-radius: 2px;
  background: var(--grad-full);
}
.hm-section-meta { font-size: 11px; color: var(--x-text-dim2); }
.hm-section-more {
  margin-left: auto; font-size: 11px; font-weight: 700;
  color: var(--x-accent-2); text-decoration: none;
}
.hm-section-more:hover { text-decoration: underline; }
.hm-count {
  margin-left: auto; font-size: 11px; font-weight: 700;
  padding: 2px 10px; border-radius: 999px;
  background: var(--x-surface-2); border: 1px solid var(--x-border);
  color: var(--x-text-dim);
}

/* Live High Confidence board (ensemble > hero bar) */
.hm-hi-list { display: flex; flex-direction: column; gap: 8px; }
.hm-hi-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: var(--x-radius); padding: 12px 14px;
  background-image: var(--grad-veil);
}
.hm-hi-main {
  flex: 1; min-width: 0; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 3px;
}
.hm-hi-matchup {
  font-size: 11px; color: var(--x-text-dim2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.hm-hi-pick {
  font-size: 14px; font-weight: 700; color: var(--x-text);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.hm-hi-meta {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  font-family: ui-monospace, monospace; font-size: 11px;
}
.hm-hi-ens { font-weight: 800; color: var(--x-accent-2); }
.hm-hi-rank { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.hm-hi-rank-pos { color: var(--x-pos); }
.hm-hi-rank-warn { color: #eab308; }
.hm-hi-rank-dim { color: var(--x-text-dim2); }
.hm-hi-rank-neg { color: var(--x-neg); }
.hm-hi-dim { color: var(--x-text-dim2); }
.hm-hi-track {
  flex: 0 0 auto; min-height: 36px; padding: 6px 14px;
  border: 0; border-radius: var(--x-radius-sm); cursor: pointer;
  background: var(--grad); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: 0.02em;
}
.hm-hi-track:hover:not(:disabled) { filter: brightness(1.12); }
.hm-hi-track:disabled { opacity: 0.65; cursor: default; }
.hm-hi-track.is-tracked {
  background: var(--x-surface-2); color: var(--x-pos);
  border: 1px solid var(--x-pos); filter: none;
}
.hm-hi-track.is-pending { opacity: 0.7; cursor: progress; }

/* Stacked full-width rows: EV scan, then Highest confidence. */
.hm-layout {
  display: flex; flex-direction: column; gap: clamp(20px, 4vw, 28px);
  min-width: 0; width: 100%; max-width: 100%;
}
.hm-layout > .hm-section { min-width: 0; max-width: 100%; width: 100%; }

.hm-carousel-wrap {
  position: relative; width: 100%; max-width: 100%;
  min-width: 0; overflow: hidden;
}
.hm-carousel-scroll {
  display: flex; gap: 10px; padding: 4px 2px 8px;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; flex-wrap: nowrap;
  scrollbar-width: none;
  max-width: 100%;
}
.hm-carousel-scroll::-webkit-scrollbar { display: none; }

/* EV / Highest-confidence scan cards — matchup + pick + tiny blurb */
.hm-scan-card {
  flex: 0 0 268px; width: 268px; max-width: 268px;
  scroll-snap-align: start; text-decoration: none; color: inherit;
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: calc(var(--x-radius) + 2px); padding: 14px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
  background-image:
    linear-gradient(180deg, rgba(15, 159, 133, 0.06) 0%, transparent 42%),
    var(--grad-veil);
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  overflow: hidden; box-sizing: border-box;
}
.hm-scan-card:hover {
  border-color: rgba(61, 220, 176, 0.45);
  box-shadow: 0 10px 28px -14px rgba(29, 191, 138, 0.4);
  transform: translateY(-2px);
}
.hm-scan-top {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.hm-scan-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--x-accent-2);
}
.hm-scan-time {
  font-size: 10.5px; font-weight: 600; color: var(--x-text-dim2);
  font-family: ui-monospace, monospace; white-space: nowrap;
}
.hm-scan-matchup {
  display: flex; flex-direction: column; gap: 5px;
}
.hm-scan-team {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; color: var(--x-text);
  min-width: 0;
}
.hm-scan-team span {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.hm-scan-logo {
  width: 18px; height: 18px; border-radius: 4px; object-fit: contain;
  background: #fff; flex: 0 0 auto;
}
.hm-scan-logo--lg { width: 22px; height: 22px; border-radius: 5px; }
.hm-scan-pick {
  display: flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 800; color: var(--x-text);
  letter-spacing: -0.01em; line-height: 1.15;
  min-width: 0;
}
.hm-scan-pick span {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.hm-scan-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding-top: 2px;
}
.hm-scan-metric {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.hm-scan-metric__label {
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--x-text-dim2);
}
.hm-scan-metric__value {
  font-family: ui-monospace, monospace; font-size: 13px; font-weight: 800;
  color: var(--x-text);
}
.hm-scan-metric__value--pos { color: var(--x-pos); }
.hm-scan-metric__value--accent { color: var(--x-accent-2); }
.hm-scan-blurb {
  margin: 0; font-size: 11px; line-height: 1.35; color: var(--x-text-dim);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}


.hm-carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--x-surface); border: 1px solid var(--x-border);
  color: var(--x-text-dim); font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 5; transition: background 0.15s;
}
.hm-carousel-arrow:hover { background: var(--x-surface-2); color: var(--x-text); }
.hm-carousel-arrow.left { left: -12px; }
.hm-carousel-arrow.right { right: -12px; }
@media (max-width: 640px) { .hm-carousel-arrow { display: none; } }

.hm-empty {
  color: var(--x-text-dim2); font-size: 13px; font-style: italic;
  text-align: center; padding: 24px 16px;
  background: var(--x-surface); border: 1px dashed var(--x-border);
  border-radius: var(--x-radius);
}

.hm-stub-grid {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .hm-stub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .hm-stub-grid { grid-template-columns: repeat(3, 1fr); } }
.hm-stub {
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: var(--x-radius); padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
  background-image: var(--grad-veil);
  text-decoration: none; color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
a.hm-stub:hover {
  border-color: rgba(61, 220, 176, 0.45);
  transform: translateY(-1px);
}
.hm-stub-matchup { font-size: 14px; font-weight: 800; color: var(--x-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-stub-time {
  font-size: 11px; font-weight: 600; font-family: ui-monospace, monospace;
  color: var(--x-text-dim);
}

.hm-tp-list { display: flex; flex-direction: column; gap: 10px; }
.hm-tp-card {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: var(--x-radius); padding: 14px 16px;
  background-image: var(--grad-veil);
  text-decoration: none; color: inherit;
  transition: border-color 0.15s, transform 0.15s;
}
.hm-tp-card:hover {
  border-color: rgba(61, 220, 176, 0.45);
  transform: translateY(-1px);
}
.hm-tp-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.hm-tp-label {
  font-size: 14px; font-weight: 800; color: var(--x-text);
  line-height: 1.3; min-width: 0;
}
.hm-tp-conf {
  flex-shrink: 0; font-family: ui-monospace, monospace;
  font-size: 13px; font-weight: 800; color: var(--x-pos);
}
.hm-tp-narr {
  font-size: 12.5px; line-height: 1.45; color: var(--x-text-dim);
  margin: 0;
}
.hm-live-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--x-neg); box-shadow: 0 0 8px var(--x-neg);
  animation: hm-pulse 1.2s ease-in-out infinite;
}
@keyframes hm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.hm-news-wrap { position: relative; }
.hm-news-viewport { width: 100%; overflow: hidden; }
.hm-news-track {
  display: flex; gap: 12px; transition: transform 0.35s ease;
  will-change: transform;
}
.hm-news-card {
  flex: 0 0 calc((100% - 24px) / 3);
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: var(--x-radius); overflow: hidden;
  text-decoration: none; color: var(--x-text);
  display: flex; flex-direction: column;
  transition: border-color 0.15s, transform 0.15s;
  scroll-snap-align: start;
}
@media (max-width: 899px) { .hm-news-card { flex: 0 0 calc((100% - 12px) / 2); } }
@media (max-width: 639px) {
  .hm-news-viewport {
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .hm-news-viewport::-webkit-scrollbar { display: none; }
  .hm-news-track {
    transform: none !important;
    transition: none;
    will-change: auto;
  }
  .hm-news-card { flex: 0 0 88%; }
}
.hm-news-card:hover { border-color: rgba(61, 220, 176, 0.4); transform: translateY(-2px); }
.hm-news-thumb { position: relative; aspect-ratio: 16/9; background: #0a0a0a; }
.hm-news-thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}
.hm-news-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hm-news-fallback { position: absolute; inset: 0; background: var(--x-surface-2); }
.hm-news-badge {
  position: absolute; bottom: 10px; left: 10px; z-index: 1;
  font-size: 9px; font-weight: 800; letter-spacing: 0.05em;
  padding: 3px 8px; border-radius: 999px;
}
.hm-news-badge-mlb  { background: rgba(96, 165, 250, 0.2); color: #93c5fd; border: 1px solid rgba(96,165,250,0.3); }
.hm-news-badge-wnba { background: rgba(245, 158, 11, 0.15); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.hm-news-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.hm-news-title {
  font-size: 12.5px; font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.hm-news-time { margin-top: auto; padding-top: 8px; font-size: 10.5px; color: var(--x-text-dim2); font-family: ui-monospace, monospace; }

.hm-ai-cta {
  display: flex; align-items: center; gap: 16px; width: 100%;
  text-decoration: none; color: inherit;
  border-radius: calc(var(--x-radius) + 2px);
  border: 1px solid transparent;
  background: linear-gradient(var(--x-surface), var(--x-surface)) padding-box,
              var(--grad-full) border-box;
  padding: 18px 20px;
  transition: filter 0.15s, transform 0.15s;
}
.hm-ai-cta:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hm-ai-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad); font-size: 20px;
  box-shadow: 0 4px 16px -4px rgba(29, 191, 138, 0.5);
}
.hm-ai-title { font-size: 15px; font-weight: 800; color: var(--x-text); }
.hm-ai-sub { font-size: 12px; color: var(--x-text-dim); margin-top: 2px; }
.hm-ai-arrow { font-size: 1.25rem; color: var(--x-accent-2); margin-left: auto; flex-shrink: 0; }

/* Home color tokens (template uses hm-c-*) */
.hm-c-pos  { color: var(--x-pos); }
.hm-c-neg  { color: var(--x-neg); }
.hm-c-warn { color: var(--x-warn); }
.hm-c-dim  { color: var(--x-text-dim2); }
.hm-c-primary { color: var(--x-accent-2); }
/* Hero units: force green/red so inherited muted text cannot win. */
.hm-hero-stat__value.hm-units.hm-c-pos { color: var(--x-pos) !important; }
.hm-hero-stat__value.hm-units.hm-c-neg { color: var(--x-neg) !important; }
.hm-hero-stat__value.hm-units.hm-c-dim { color: var(--x-text-dim2) !important; }

/* =============================================================================
   SPORTS SLATE — stadium scoreboard
   ========================================================================== */
.sp-page {
  display: flex; flex-direction: column; gap: clamp(14px, 3vw, 20px);
  padding-block: clamp(12px, 3vw, 24px);
}

.sp-masthead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 12px 20px;
}
.sp-masthead-title {
  font-size: clamp(1.35rem, 3.5vw, 1.75rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1;
  background-image: var(--grad-full);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.sp-masthead-sub { font-size: 12px; color: var(--x-text-dim); margin-top: 4px; }
.sp-masthead-badge {
  font-size: 10px; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 6px 12px; border-radius: 999px;
  background: var(--x-surface); border: 1px solid var(--x-border);
  color: var(--x-accent-2);
}

.sp-datebar {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px; padding: 10px 14px;
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: var(--x-radius);
  background-image: var(--grad-veil);
}
.sp-arrow {
  width: 36px; height: 36px; border-radius: var(--x-radius-sm);
  background: var(--x-surface-2); border: 1px solid var(--x-border);
  color: var(--x-text); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 18px; line-height: 1; text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.sp-arrow:hover { background: #1d1d1d; border-color: rgba(61, 220, 176, 0.3); }
.sp-datelbl {
  font-size: 14px; font-weight: 700; color: var(--x-text);
  letter-spacing: 0.02em; min-width: 140px; text-align: center;
}
.sp-dateinput {
  background: var(--x-surface-2); border: 1px solid var(--x-border);
  color: var(--x-text); font-size: 12.5px; padding: 7px 10px;
  border-radius: var(--x-radius-sm); width: 150px;
}
.sp-dateinput:focus { outline: none; border-color: var(--g2); }

.sp-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .sp-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1280px) { .sp-grid { gap: 16px; } }

.sp-card {
  position: relative; overflow: hidden;
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: calc(var(--x-radius) + 2px);
  padding: 12px 12px 10px; display: flex; flex-direction: column; gap: 8px;
  min-width: 0; background-image: var(--grad-veil);
  transition: border-color 0.15s, box-shadow 0.15s;
  text-decoration: none; color: inherit;
}
a.sp-card { cursor: pointer; }
.sp-card:hover { border-color: rgba(255, 255, 255, 0.18); }
.sp-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-full); opacity: 0.5;
}

.sp-text-pos { color: var(--x-pos); }
.sp-text-neg { color: var(--x-neg); }
.sp-text-warn { color: var(--x-warn); }
.sp-text-text { color: var(--x-text); }
.sp-text-dim { color: var(--x-text-dim); }
.sp-text-dim2 { color: var(--x-text-dim2); }

.sp-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-chip {
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(15, 159, 133, 0.2); color: var(--x-accent-2);
  border: 1px solid rgba(15, 159, 133, 0.25);
}
.sp-time { font-size: 11px; color: var(--x-text-dim); font-family: ui-monospace, monospace; margin-left: auto; }
.sp-matchup-pill {
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  padding: 3px 10px; border-radius: 999px; text-decoration: none;
  background: var(--x-surface-2); border: 1px solid var(--x-border);
  color: var(--x-accent-2); line-height: 1.4;
  transition: background 0.15s, border-color 0.15s;
}
.sp-matchup-pill:hover { background: #1d1d1d; border-color: rgba(61, 220, 176, 0.35); }

.sp-state-live {
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--x-pos); display: inline-flex; align-items: center; gap: 5px;
}
.sp-livedot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--x-pos);
  box-shadow: 0 0 8px var(--x-pos); animation: sp-pulse 1.2s ease-in-out infinite;
}
@keyframes sp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.sp-state-final {
  font-size: 9px; font-weight: 800; letter-spacing: 0.1em;
  color: var(--x-text-dim);
}
.sp-result-pos, .sp-result-neg, .sp-result-warn {
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 999px;
}
.sp-result-pos { color: var(--x-pos); background: rgba(34, 197, 94, 0.12); }
.sp-result-neg { color: var(--x-neg); background: rgba(239, 68, 68, 0.12); }
.sp-result-warn { color: var(--x-warn); background: rgba(234, 179, 8, 0.12); }

/* Scoreboard: stacked away/home rows with score on the right */
.sp-scoreboard {
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(0, 0, 0, 0.28); border: 1px solid var(--x-border);
  border-radius: var(--x-radius); padding: 8px 10px;
}
.sp-row {
  display: flex; align-items: center; gap: 10px; min-width: 0;
}
.sp-row .sp-logo {
  width: 28px; height: 28px; border-width: 1px;
}
.sp-row .sp-logo-init { font-size: 9px; }
.sp-row .sp-logo-img { padding: 3px; }
.sp-row-name {
  flex: 1; min-width: 0;
  font-size: 14px; font-weight: 700; color: var(--x-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-row-score {
  font-size: 18px; font-weight: 800; font-family: ui-monospace, monospace;
  color: var(--x-text); line-height: 1; min-width: 1.4em; text-align: right;
}
.sp-row-proj, .sp-row-prob {
  font-size: 13px; font-weight: 700; font-family: ui-monospace, monospace;
  color: var(--x-accent-2);
}
.sp-row.fav .sp-row-prob { color: var(--x-pos); }
.sp-row-prob.dim { color: var(--x-text-dim2); }

/* Legacy scorecard kept for any leftover refs */
.sp-scorecard {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--x-border);
  border-radius: var(--x-radius); padding: 14px 12px;
}
.sp-tm { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.sp-logo {
  position: relative; display: inline-flex; width: 52px; height: 52px;
  border-radius: 50%; background: var(--x-surface-2);
  align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
  border: 2px solid var(--x-border);
}
.sp-logo-init { font-size: 12px; font-weight: 800; color: var(--x-text); letter-spacing: 0.03em; }
.sp-logo-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #fff; padding: 5px; box-sizing: border-box;
}
.sp-tm-abbr { font-size: 12px; font-weight: 800; color: var(--x-text); letter-spacing: 0.04em; }
.sp-tm-prob {
  font-size: 11px; font-weight: 700; color: var(--x-accent-2);
  font-family: ui-monospace, monospace;
}
.sp-tm-prob.fav { color: var(--x-pos); }

.sp-proj {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  flex: 1 1 0; min-width: 0; overflow: hidden; padding: 0 4px;
}
.sp-proj-score {
  font-size: 1.65rem; font-weight: 800; font-family: ui-monospace, monospace;
  color: var(--x-text); letter-spacing: 0.04em; white-space: nowrap; line-height: 1;
}
.sp-proj-score.sp-proj-actual {
  font-size: 13px; white-space: normal; text-align: center;
  letter-spacing: 0; max-width: 100%; overflow-wrap: anywhere; line-height: 1.25;
}
.sp-proj-score .dash { color: var(--x-text-dim2); margin: 0 4px; }
.sp-proj-none { font-size: 12px; color: var(--x-text-dim2); font-weight: 700; }
.sp-proj-label {
  font-size: 8px; font-weight: 800; letter-spacing: 0.12em; color: var(--x-text-dim2);
}

/* Always 3 equal boxes across (desktop + mobile) */
.sp-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sp-pick {
  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--x-border);
  border-radius: var(--x-radius-sm); padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-align: center; min-width: 0;
  transition: border-color 0.15s;
}
.sp-pick-label {
  font-size: 8px; font-weight: 800; letter-spacing: 0.08em; color: var(--x-text-dim2);
}
.sp-pick-team {
  font-size: 11px; font-weight: 800; color: var(--x-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.sp-pick-mark { font-size: 11px; font-weight: 800; }
.sp-pick-mark.win { color: var(--x-pos); }
.sp-pick-mark.loss { color: var(--x-neg); }
.sp-pick-mark.void { color: var(--x-warn); }
.sp-pick-detail {
  font-size: 10px; font-weight: 600; font-family: ui-monospace, monospace;
  color: var(--x-pos);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.sp-pick-detail.dim { color: var(--x-text-dim); }
.sp-pick.empty .sp-pick-team { color: var(--x-text-dim2); font-weight: 700; }
.sp-box-win { border-color: var(--x-pos) !important; box-shadow: inset 0 0 0 1px rgba(34,197,94,0.2); }
.sp-box-loss { border-color: var(--x-neg) !important; box-shadow: inset 0 0 0 1px rgba(239,68,68,0.2); }
.sp-box-void { border-color: var(--x-warn) !important; box-shadow: inset 0 0 0 1px rgba(234,179,8,0.15); }

.sp-bottom {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 2px; padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sp-details {
  color: var(--x-accent-2); text-decoration: none; font-size: 11.5px; font-weight: 700;
}
.sp-details:hover { text-decoration: underline; }
.sp-track-btn {
  font-weight: 800; font-size: 10px; padding: 6px 14px;
  border-radius: var(--x-radius-sm); border: 0; cursor: pointer; line-height: 1;
  color: #fff;
}
.sp-track-btn:disabled { opacity: 0.65; cursor: default; }
.sp-track-btn.is-tracked {
  background: var(--x-surface-2) !important; color: var(--x-pos) !important;
  border: 1px solid var(--x-pos) !important; padding: 5px 13px;
}
.sp-track-btn.is-pending { opacity: 0.7; cursor: progress; }
.sp-track-btn.sp-pick-track { font-size: 9px; padding: 4px 8px; margin-top: 2px; }

.sp-quota {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--x-surface); border: 1px dashed var(--x-neg);
  border-radius: var(--x-radius); padding: 12px 16px;
}
.sp-quota-icon { font-size: 18px; color: var(--x-neg); flex-shrink: 0; }
.sp-quota-title { font-size: 12.5px; font-weight: 700; color: var(--x-neg); }
.sp-quota-sub { font-size: 11.5px; color: var(--x-text-dim); margin-top: 2px; }

.sp-empty {
  color: var(--x-text-dim); font-size: 13px; font-style: italic;
  text-align: center; background: var(--x-surface);
  border: 1px dashed var(--x-border); border-radius: var(--x-radius);
  padding: 28px 16px;
}

@media (max-width: 639px) {
  .sp-pick-label { font-size: 8px; }
  .sp-pick { padding: 8px 4px; gap: 2px; }
  .sp-pick-team { font-size: 10.5px; }
  .sp-pick-detail { font-size: 9.5px; }
  .sp-track-btn.sp-pick-track {
    min-height: 28px; font-size: 9px; padding: 4px 6px; margin-top: 2px;
    width: auto; max-width: 100%;
  }
}

/* =============================================================================
   PLAYER PROPS — per-player pick cards
   ========================================================================== */
.pp-page { padding-block: clamp(12px, 3vw, 20px); }

.pp-masthead {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 10px 16px; margin-bottom: 4px;
}
.pp-masthead-title {
  font-size: clamp(1.25rem, 3.2vw, 1.6rem); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.1;
  background-image: var(--grad-full);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.pp-masthead-sub { font-size: 12px; color: var(--x-text-dim); margin-top: 4px; }

.pp-sticky {
  position: sticky; top: 3.5rem; z-index: 20;
  background: rgba(0, 0, 0, 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--x-border);
}
.pp-sticky-inner {
  display: flex; flex-direction: column; gap: 12px;
  padding-block: 12px;
}

/* ── Props.Cash-style board layout ── */
.pp-shell .x-container--wide { max-width: min(100%, 1480px); }
.pp-market-wrap {
  padding-top: 4px;
  padding-bottom: 2px;
}
.pp-layout {
  display: grid;
  gap: 14px;
  align-items: start;
  padding-block: clamp(8px, 2vw, 16px);
}
@media (min-width: 901px) {
  .pp-layout {
    grid-template-columns: minmax(0, 1fr) minmax(180px, 220px);
  }
  .pp-layout .pp-sidebar { display: none; }
  .pp-layout .pp-filters-rail {
    display: flex !important;
    max-width: 220px;
    width: 100%;
    min-width: 0;
  }
  .pp-filt-close { display: none; }
  .pp-filt-backdrop { display: none !important; }
  .pp-filters-rail .pl-filters-hd { font-size: 18px; }
}
@media (min-width: 1201px) {
  .pp-layout {
    grid-template-columns: minmax(168px, 200px) minmax(0, 1fr) minmax(180px, 220px);
  }
  .pp-layout .pp-sidebar { display: block; }
}
.pp-filters-rail {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0 0 8px 4px;
}
.pp-filt-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 4px;
}
.pp-filt-close {
  flex-shrink: 0;
  background: var(--x-surface-2); color: var(--x-text);
  border: 1px solid var(--x-border); border-radius: 999px;
  padding: 6px 12px; font-size: 11px; font-weight: 800; cursor: pointer;
}
.pp-filt-close:hover { border-color: rgba(61, 220, 176, 0.35); }
.pp-filt-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 2px; border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pp-filt-row-label {
  flex: 1; font-size: 13px; font-weight: 700; color: var(--x-text);
}
.pp-filt-acc .pp-filt-summary { padding-right: 0; }
.pp-filt-acc .pl-filt-summary-badge { margin-left: auto; margin-right: 6px; }
.pp-filt-row--toggle .pl-filt-summary-badge { margin-left: auto; margin-right: 8px; }
.pp-filt-switch-wrap { flex-shrink: 0; margin-left: auto; }
.pp-filt-summary {
  display: flex; align-items: center; width: 100%; gap: 6px;
}
.pp-filt-summary .pl-filt-acc-summary-label { flex: 1; min-width: 0; }
.pp-filt-checklist {
  display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto;
}
.pp-filt-checklist--bvp {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; max-height: none;
}
.pp-filt-checklist--books {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px 12px; max-height: 280px;
}
.pp-books-all {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 4px; margin-bottom: 2px;
  background: transparent; border: none; border-radius: 6px;
  font-size: 12px; font-weight: 700; color: var(--x-text-dim);
  cursor: pointer; text-align: left;
}
.pp-books-all::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15);
}
.pp-books-all.active { color: var(--x-text); }
.pp-books-all.active::before { background: var(--x-pos); box-shadow: none; }
.pp-books-all:hover { background: rgba(255, 255, 255, 0.03); color: var(--x-text); }
.pp-filt-check--book input { border-radius: 50%; }
.pp-hit-filter { gap: 10px; }
.pp-hit-windows.pl-filt-seg-row { flex-wrap: wrap; }
.pp-hit-windows .pl-filt-seg { flex: 1 1 auto; min-width: 0; padding: 8px 4px; font-size: 11px; }
.pp-hit-scope { margin-top: 2px; }
.pp-filt-check {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 4px; font-size: 12px; font-weight: 600; color: var(--x-text-dim);
  cursor: pointer; border-radius: 6px;
}
.pp-filt-check:hover { color: var(--x-text); background: rgba(255, 255, 255, 0.03); }
.pp-filt-check input { accent-color: var(--x-pos); width: 14px; height: 14px; flex-shrink: 0; }
.pp-filt-range-field { display: flex; flex-direction: column; gap: 4px; }
.pp-filt-range-label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; font-weight: 600; color: var(--x-text);
}
.pp-filt-dual-range {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px;
}
.pp-filt-dual-range .pp-filt-range-label { grid-column: span 1; font-size: 11px; }
.pp-filt-num {
  width: 100%; background: var(--x-surface-2); border: 1px solid var(--x-border);
  border-radius: var(--x-radius-sm); color: var(--x-text);
  font-size: 12px; font-weight: 700; font-family: ui-monospace, monospace;
  padding: 8px 10px;
}
.pp-filt-num:focus { outline: none; border-color: var(--x-pos); }
.pp-odds-filter { gap: 10px; }
.pp-range-filter { gap: 10px; }
.pp-range-filter .pl-filt-range-track,
.pp-odds-filter .pl-filt-range-track { margin-top: 4px; cursor: pointer; }
.pp-range-filter .pl-filt-range-handle,
.pp-odds-filter .pl-filt-range-handle { cursor: grab; z-index: 2; }
.pp-range-filter .pl-filt-range-handle:active,
.pp-odds-filter .pl-filt-range-handle:active { cursor: grabbing; }
.pp-odds-presets {
  display: flex; align-items: stretch;
  border: 1px solid var(--x-border); border-radius: 999px;
  overflow: hidden; background: var(--x-surface-2);
}
.pp-odds-preset {
  flex: 1; min-width: 0; padding: 9px 6px;
  background: transparent; border: none; border-right: 1px solid var(--x-border);
  color: var(--x-text-dim); font-size: 11px; font-weight: 700;
  cursor: pointer; line-height: 1.2;
}
.pp-odds-preset:last-child { border-right: none; }
.pp-odds-preset:hover { color: var(--x-text); background: rgba(255, 255, 255, 0.03); }
.pp-odds-preset.active { background: rgba(34, 197, 94, 0.12); color: var(--x-pos); }
.pp-filt-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.pp-filt-clear {
  width: 100%; background: var(--x-surface-2); color: var(--x-text);
  border: 1px solid var(--x-border); border-radius: 999px;
  padding: 10px 14px; font-size: 12px; font-weight: 800; cursor: pointer;
}
.pp-filt-clear:hover { border-color: rgba(61, 220, 176, 0.35); }
.pp-filt-clear.hidden { display: none; }
.pp-filt-sort { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--x-border); }
.pp-filt-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(2px);
}
.pp-filt-backdrop.hidden { display: none; }
.pp-filt-backdrop.is-open { display: block; }
.pp-filter-btn--mobile { display: none; }
.pp-filter-icon {
  font-size: 16px; line-height: 1; font-weight: 700;
}
.pp-filter-btn-label { font-size: 12px; font-weight: 700; }
.pp-filter-count {
  margin-left: 4px; font-size: 10px; font-weight: 800;
  color: var(--x-pos);
}
.pp-mobile-only { display: none; }
@media (max-width: 900px) {
  .pp-layout { grid-template-columns: 1fr; }
  .pp-sidebar { display: none; }
  .pp-filter-btn--mobile {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .pp-mobile-only { display: block; }
  .pp-board-actions { flex: 1 1 100%; width: 100%; }
  .pp-search-wrap { flex: 1 1 auto; max-width: none; }
  .pp-table-wrap.pp-is-mobile-cards {
    background: transparent; border: none; border-radius: 0;
    overflow: visible;
  }
  .pp-table-wrap.pp-is-mobile-cards .pp-table-hd { display: none !important; }
  .pp-table-wrap.pp-is-mobile-cards .pp-table-body {
    display: flex; flex-direction: column; gap: 10px;
  }
  body.filter-sheet-open { overflow: hidden; }
  .pp-layout .pp-filters-rail {
    display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    max-height: min(92vh, 100dvh); max-width: none; width: auto;
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    border-radius: 16px 16px 0 0; transform: translateY(100%);
    transition: transform 0.25s ease; margin: 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-bottom: 0;
    background: var(--x-surface);
    border: 1px solid var(--x-border);
    border-bottom: none;
  }
  .pp-layout .pp-filters-rail.is-open {
    display: flex; transform: translateY(0);
  }
  .pp-filt-head {
    position: sticky; top: 0; z-index: 2;
    background: var(--x-surface); margin: -16px -16px 8px;
    padding: 12px 16px; border-bottom: 1px solid var(--x-border);
  }
}
.pp-sidebar {
  position: sticky; top: 12px;
  max-height: calc(100vh - 24px);
}
.pp-sidebar-hd {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem);
  font-weight: 800; letter-spacing: -0.02em;
  color: var(--x-text); text-transform: none;
  padding: 0 2px 10px;
}
.pp-main { display: flex; flex-direction: column; gap: 10px; min-width: 0; overflow: hidden; }
.pp-perf-note {
  font-size: 12px; color: var(--x-text-dim); margin: 0;
}

.pp-market-bar {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; padding: 6px 0 10px;
}
.pp-market-pill {
  flex-shrink: 0;
  background: transparent; color: var(--x-text-dim);
  border: 1px solid transparent; border-radius: 999px;
  padding: 8px 14px; font-size: 12px; font-weight: 800;
  letter-spacing: 0.01em; cursor: pointer; white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pp-market-pill:hover { color: var(--x-text); background: rgba(255, 255, 255, 0.04); }
.pp-market-pill.active {
  background: var(--x-pos); color: #000; border-color: transparent;
}

.pp-board-hd {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 10px 16px;
}
.pp-board-title {
  font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 800;
  letter-spacing: -0.02em; color: var(--x-text); margin: 0;
}
.pp-board-actions {
  display: flex; align-items: center; gap: 10px; flex: 1 1 280px;
  justify-content: flex-end; min-width: 0;
}
.pp-search-wrap {
  position: relative; flex: 1 1 220px; max-width: 420px; min-width: 0;
}
.pp-search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 14px; color: var(--x-text-dim2); pointer-events: none;
}
.pp-search-input {
  width: 100%; background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: 999px; padding: 10px 14px 10px 34px;
  font-size: 13px; color: var(--x-text);
}
.pp-search-input:focus { outline: none; border-color: var(--x-pos); }
.pp-filter-btn { flex-shrink: 0; }
.pp-quick-bar { margin-top: -4px; }

.pp-table-wrap {
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: calc(var(--x-radius) + 2px);
  overflow-x: auto; overflow-y: hidden;
}
.pp-table-hd, .pp-table-row {
  display: grid;
  grid-template-columns:
    minmax(200px, 2.2fr)
    minmax(72px, 0.75fr)
    minmax(52px, 0.45fr)
    minmax(44px, 0.4fr)
    minmax(44px, 0.4fr)
    minmax(44px, 0.4fr)
    minmax(64px, 0.55fr)
    minmax(56px, 0.5fr)
    minmax(72px, 0.65fr);
  align-items: center; gap: 8px;
  min-width: 880px;
}
.pp-table-hd {
  padding: 10px 14px; border-bottom: 1px solid var(--x-border);
  background: rgba(0, 0, 0, 0.35);
}
.pp-th {
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--x-text-dim2); text-transform: uppercase;
}
button.pp-th-sort {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--x-text-dim2); text-transform: uppercase;
  cursor: pointer; text-align: left;
  transition: color 0.12s;
}
button.pp-th-sort:hover { color: var(--x-text-dim); }
button.pp-th-sort.is-active { color: var(--x-text); }
.pp-conf-val {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pp-conf-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.pp-conf-line {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 1px;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.pp-conf-part { font-size: 11px; font-weight: 600; }
.pp-conf-overall { font-size: 13px; font-weight: 800; }
.pp-conf-sep { font-size: 10px; font-weight: 600; color: var(--x-text-dim2); }
.pp-conf-missing { color: var(--x-text-dim2); font-weight: 700; }
.pp-conf-na {
  color: var(--x-text-dim2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pp-conf-sub {
  display: block;
  margin-top: 1px;
  font-size: 9px;
  font-weight: 700;
  color: var(--x-text-dim2);
  font-variant-numeric: tabular-nums;
}
.pp-conf-sub-pos { color: var(--x-pos); }
.pp-conf-sub-neg { color: var(--x-neg); }
.pp-verdict {
  display: block;
  margin-top: 2px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pp-verdict-pos { color: #22c55e; }
.pp-verdict-warn { color: #eab308; }
.pp-verdict-neg { color: #ef4444; }
.pp-verdict-dim { color: #6b7280; }
.pp-table-body { display: flex; flex-direction: column; }
.pp-table-row {
  padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.12s;
}
.pp-table-row:last-child { border-bottom: none; }
.pp-table-row:hover { background: rgba(255, 255, 255, 0.03); }
.pp-table-row.dimmed { opacity: 0.55; }
.pp-td { min-width: 0; }
.pp-na { font-size: 12px; color: var(--x-text-dim2); }

.pp-line-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pp-line-avatar {
  width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  background: var(--x-surface-2); border: 2px solid var(--x-border); flex-shrink: 0;
}
.pp-line-avatar-fb {
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: var(--x-text-dim);
}
.pp-line-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pp-line-name {
  font-size: 13px; font-weight: 800; color: var(--x-text);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-line-name:hover { color: var(--x-accent-2); }
.pp-line-meta {
  font-size: 10px; font-weight: 600; color: var(--x-text-dim2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pp-line-pick {
  font-size: 11px; font-weight: 800; letter-spacing: 0.02em;
}
.pp-pick-over { color: var(--x-pos); }
.pp-pick-under { color: var(--x-neg); }
.pp-line-actions { flex-shrink: 0; }

.pp-l10-spark {
  position: relative;
  display: flex; align-items: flex-end; gap: 2px; height: 28px;
}
.pp-spark-line {
  position: absolute; left: 0; right: 0; z-index: 1;
  height: 1px; background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
}
.pp-spark-bar {
  position: relative; z-index: 2;
  flex: 1; min-width: 3px; max-width: 8px; border-radius: 2px 2px 0 0;
  background: var(--x-text-dim2);
}
.pp-spark-bar.hit { background: var(--x-pos); }
.pp-spark-bar.miss { background: #52525b; }
.pp-spark-bar.push { background: #3f3f46; }

.pp-odds {
  font-size: 12px; font-weight: 800; font-family: ui-monospace, monospace;
  color: var(--x-text);
}
.pp-pct { font-size: 12px; font-weight: 800; font-family: ui-monospace, monospace; }
.pp-pct-pos { color: var(--x-pos); }
.pp-pct-neg { color: var(--x-neg); }
.pp-pct-mid { color: var(--x-text-dim); }
.pp-pct-dim { color: var(--x-text-dim2); }

.pp-streak-val { font-size: 13px; font-weight: 800; font-family: ui-monospace, monospace; }

.pp-match-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.pp-opp-logo { width: 22px; height: 22px; object-fit: contain; }
.pp-opp-ab {
  font-size: 9px; font-weight: 800; color: var(--x-text-dim2);
}
.pp-grade {
  font-size: 12px; font-weight: 900; font-family: ui-monospace, monospace;
}
.pp-grade-pos { color: var(--x-pos); }
.pp-grade-warn { color: #eab308; }
.pp-grade-neg { color: var(--x-neg); }
.pp-grade-dim { color: var(--x-text-dim2); }

/* FIT column: side-aware player-vs-team matchup fit grade. */
.pp-fit-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.pp-fit-letter {
  font-size: 13px; font-weight: 900; font-family: ui-monospace, monospace;
}
.pp-fit-sub {
  font-size: 8px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--x-text-dim2); white-space: nowrap;
  font-family: ui-monospace, monospace;
}

.pp-edge-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pp-edge-val { font-size: 12px; font-weight: 800; font-family: ui-monospace, monospace; }
.pp-edge-bar {
  height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.pp-edge-fill { display: block; height: 100%; border-radius: inherit; }

.pp-empty {
  margin: 24px 14px; min-width: 0;
  text-align: center; font-size: 13px; font-weight: 600;
  color: var(--x-text-dim);
}
.pp-empty-hint {
  display: block; margin-top: 8px; font-size: 12px;
  font-weight: 600; color: var(--x-text-dim2);
}

.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Filter panel ── */
.fp-chip {
  cursor: pointer; border: 1px solid var(--x-border);
  background: var(--x-surface); color: var(--x-text-dim);
  font-size: 12px; font-weight: 600; padding: 5px 11px;
  border-radius: 999px; white-space: nowrap; line-height: 1.2;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.fp-chip:hover { color: var(--x-text); border-color: rgba(61, 220, 176, 0.3); }
.fp-chip.active {
  background: rgba(34, 197, 94, 0.12); border-color: var(--x-pos); color: var(--x-pos);
}
.fp-select {
  background: var(--x-surface); border: 1px solid var(--x-border);
  color: var(--x-text); font-size: 12.5px; padding: 7px 10px;
  border-radius: var(--x-radius-sm); width: 100%; min-width: 0;
}
.fp-select:focus { outline: none; border-color: var(--g2); }
.fp-label {
  display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--x-text-dim2); text-transform: uppercase; margin-bottom: 4px;
}
.fp-range {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; margin-top: 10px;
  background: var(--x-surface-2); border-radius: 999px; outline: none; cursor: pointer;
}
.fp-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--g2); border: 2px solid #0b0b0b; cursor: pointer;
  box-shadow: 0 0 0 1px var(--g2);
}
.fp-range::-moz-range-thumb {
  width: 16px; height: 16px; border: 2px solid #0b0b0b;
  border-radius: 50%; background: var(--g2); cursor: pointer;
}
.fp-val { font-size: 12px; font-weight: 800; color: var(--x-text); font-family: ui-monospace, monospace; }

.fp-ms { position: relative; margin-top: 4px; }
.fp-ms-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; background: var(--x-surface); border: 1px solid var(--x-border);
  color: var(--x-text); font-size: 12.5px; padding: 8px 10px;
  border-radius: var(--x-radius-sm); cursor: pointer; text-align: left;
}
.fp-ms-btn:hover { border-color: rgba(61, 220, 176, 0.3); }
.fp-ms.open .fp-ms-btn { border-color: var(--g2); }
.fp-ms-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-ms-chev { color: var(--x-text-dim); flex-shrink: 0; transition: transform 0.15s; }
.fp-ms.open .fp-ms-chev { transform: rotate(180deg); }
.fp-ms-menu {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 240px; overflow-y: auto; background: var(--x-surface);
  border: 1px solid var(--x-border); border-radius: var(--x-radius-sm);
  padding: 6px; box-shadow: 0 12px 30px -10px rgba(0,0,0,0.7);
  display: flex; flex-direction: column; gap: 2px;
}
.fp-ms-opt {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--x-text-dim);
}
.fp-ms-opt:hover { background: var(--x-surface-2); }
.fp-ms-opt input { accent-color: var(--g2); width: 14px; height: 14px; cursor: pointer; flex-shrink: 0; }
.fp-ms-empty { font-size: 12px; color: var(--x-text-dim2); font-style: italic; padding: 6px 8px; }

#filter-toggle.has-active,
#filter-toggle-mobile.has-active {
  background: var(--x-pos) !important; color: #000 !important; border-color: var(--x-pos) !important;
}

.fp-switch { position: relative; display: inline-block; width: 34px; height: 18px; flex-shrink: 0; }
.fp-switch input { opacity: 0; width: 0; height: 0; }
.fp-switch .slider {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--x-surface-2); border-radius: 999px; transition: background 0.15s;
}
.fp-switch .slider::before {
  content: ""; position: absolute; width: 14px; height: 14px;
  left: 2px; top: 2px; background: var(--x-text-dim); border-radius: 50%;
  transition: transform 0.15s, background 0.15s;
}
.fp-switch input:checked + .slider { background: var(--x-pos); }
.fp-switch input:checked + .slider::before { transform: translateX(16px); background: #000; }

/* ── View pills + toolbar ── */
.view-pill {
  background: var(--x-surface); color: var(--x-text-dim);
  border: 1px solid var(--x-border); font-size: 11.5px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.view-pill:hover { color: var(--x-text); }
.view-pill-active { color: #fff; border-color: transparent; }

.props-toolbar-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.props-tbtn {
  background: var(--x-surface); border: 1px solid var(--x-border); color: var(--x-text);
  font-size: 12px; font-weight: 700; border-radius: var(--x-radius-sm);
  padding: 8px 12px; min-height: 40px; white-space: nowrap;
  transition: border-color 0.12s;
}
.props-tbtn:hover { border-color: rgba(61, 220, 176, 0.35); }
.props-sort-wrap select, .props-sort-wrap #sort-dir { min-height: 40px; }

.filter-backdrop {
  position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.filter-backdrop.is-open { opacity: 1; pointer-events: auto; }

/* ── Swipe mode ── */
.sw-counter {
  font-size: 11px; color: var(--x-text-dim2); text-align: center;
  font-family: ui-monospace, monospace; width: 100%; padding: 2px 0 8px; user-select: none;
}
.sw-stage { position: relative; width: 100%; max-width: 480px; margin: 0 auto; }
.sw-hint {
  position: absolute; top: 50%; left: 50%; z-index: 20; transform: translate(-50%, -50%);
  pointer-events: none; font-size: 72px; font-weight: 900; opacity: 0;
  transition: opacity 0.08s linear; will-change: opacity;
}
.sw-card-wrap {
  cursor: grab; touch-action: none; will-change: transform, opacity;
  transform-origin: center 80%; transition: transform 0.3s ease, opacity 0.3s ease;
}
.sw-card-wrap.is-dragging { transition: none; cursor: grabbing; }
.sw-card-wrap > .prop-card { transform: none !important; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6); }
.sw-card-wrap > .prop-card:hover { transform: none !important; box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6); }
.sw-buttons { display: flex; justify-content: center; gap: 32px; padding: 18px 0 8px; }
.sw-btn {
  width: 60px; height: 60px; border-radius: 50%; font-size: 24px; font-weight: 900;
  cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: center;
  background: transparent; transition: background 0.15s, transform 0.12s;
}
.sw-btn:active { transform: scale(0.94); }
.sw-btn-dismiss { background: rgba(239,68,68,0.12); color: var(--x-neg); border: 2px solid var(--x-neg); }
.sw-btn-dismiss:hover { background: rgba(239,68,68,0.22); }
.sw-btn-track { background: rgba(34,197,94,0.12); color: var(--x-pos); border: 2px solid var(--x-pos); }
.sw-btn-track:hover { background: rgba(34,197,94,0.22); }
.sw-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 20px; text-align: center; }
.sw-empty-icon { font-size: 48px; color: var(--x-pos); line-height: 1; }
.sw-empty-title { font-size: 18px; font-weight: 800; color: var(--x-text); }
.sw-empty-body { font-size: 13px; color: var(--x-text-dim); max-width: 320px; }
.sw-reset-btn {
  margin-top: 4px; background: var(--x-surface); color: var(--x-text-dim);
  border: 1px solid var(--x-border); font-size: 11.5px; font-weight: 700;
  padding: 6px 14px; border-radius: 999px; cursor: pointer;
}
.sw-reset-btn:hover { background: var(--x-surface-2); color: var(--x-text); }

.prop-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
  background-image: var(--grad-veil);
}
.prop-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -12px rgba(29, 191, 138, 0.4);
}
.dimmed { opacity: 0.55; }
.player-name-link { color: inherit; text-decoration: none; }
.player-name-link:hover { text-decoration: underline; opacity: 0.9; }

/* ── By-game groups ── */
.gg-header {
  display: flex; align-items: center; gap: 10px;
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: var(--x-radius); padding: 12px 14px;
  cursor: pointer; min-width: 0; background-image: var(--grad-veil);
  transition: border-color 0.12s, background 0.12s;
}
.gg-header:hover { border-color: rgba(61, 220, 176, 0.3); }
.gg-abbr { font-size: 13px; font-weight: 800; color: var(--x-text); white-space: nowrap; }
.gg-at { font-size: 11px; color: var(--x-text-dim2); }
.gg-spacer { flex: 1; min-width: 4px; }
.gg-time {
  font-size: 11px; color: var(--x-text-dim2); font-family: ui-monospace, monospace;
  white-space: nowrap; flex-shrink: 0;
}
.gg-count {
  background: var(--x-surface-2); color: var(--x-text-dim);
  font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  flex-shrink: 0; white-space: nowrap; border: 1px solid var(--x-border);
}
.gg-chev {
  color: var(--x-text-dim); transform: rotate(0deg);
  transition: transform 0.15s ease; flex-shrink: 0;
  width: 16px; height: 16px; display: inline-block;
}
.gg-chev.is-open { transform: rotate(90deg); }
.gg-body {
  margin: 8px 0 4px; padding-left: 12px;
  border-left: 2px solid rgba(15, 159, 133, 0.35);
}

/* ── Player prop list (desktop row) ── */
.pc-wrap {
  display: flex; flex-direction: column; gap: 10px;
  grid-column: 1 / -1; width: 100%;
}
.pc-item { display: flex; flex-direction: column; }

.pc-row {
  position: relative; overflow: hidden;
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: calc(var(--x-radius) + 2px);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px;
  background-image: var(--grad-veil);
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
}
.pc-row::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-full); opacity: 0.55;
}
.pc-row:hover {
  border-color: rgba(61, 220, 176, 0.35);
  box-shadow: 0 8px 24px -14px rgba(29, 191, 138, 0.35);
}
.pc-row.dimmed { opacity: 0.55; }

.pc-row-top {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 2px;
}
.pc-sport {
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(15, 159, 133, 0.18); color: var(--x-accent-2);
  border: 1px solid rgba(15, 159, 133, 0.25);
}
.pc-time-top, .pc-matchup-top {
  font-size: 10px; color: var(--x-text-dim2); font-family: ui-monospace, monospace;
}
.pc-matchup-top { margin-left: auto; text-align: right; }

.pc-main { display: flex; align-items: center; gap: 12px; min-width: 0; flex-wrap: wrap; }
.pc-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: var(--x-surface-2); border: 2px solid var(--x-border); flex-shrink: 0;
}
.pc-avatar-fb {
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800; color: var(--x-text-dim);
}
.pc-id { display: flex; flex-direction: column; min-width: 120px; flex: 1 1 160px; gap: 2px; }
.pc-name {
  font-size: 14px; font-weight: 800; color: var(--x-text); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-name:hover { color: var(--x-accent-2); }
.pc-stat {
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: var(--x-text-dim2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.pc-pick-zone {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--x-border);
  border-radius: var(--x-radius-sm); padding: 6px 10px;
}
.pc-ou { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.pc-ou-btn {
  background: var(--x-surface-2); color: var(--x-text-dim2); border: 1px solid var(--x-border);
  border-radius: 6px; width: 26px; height: 26px; font-size: 10px;
  font-weight: 800; cursor: pointer; line-height: 1;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.pc-ou-btn.pc-ou-over  { background: var(--x-pos); color: #000; border-color: transparent; }
.pc-ou-btn.pc-ou-under { background: var(--x-neg); color: #fff; border-color: transparent; }
.pc-line {
  font-size: 1.125rem; font-weight: 800; font-family: ui-monospace, monospace;
  min-width: 36px; text-align: center; color: var(--x-text);
}

.pc-metrics { display: flex; align-items: stretch; gap: 6px; flex-shrink: 0; }
.pc-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-width: 48px; padding: 4px 6px;
  background: rgba(0, 0, 0, 0.3); border: 1px solid var(--x-border);
  border-radius: var(--x-radius-sm);
}
.pc-cell-label {
  font-size: 7.5px; font-weight: 800; letter-spacing: 0.1em; color: var(--x-text-dim2);
}
.pc-proj { font-size: 13px; font-weight: 800; font-family: ui-monospace, monospace; }
.pc-proj-pos { color: var(--x-pos); }
.pc-proj-neg { color: var(--x-neg); }
.pc-proj-dim { color: var(--x-text-dim); }
.pc-conf { font-size: 12px; font-weight: 800; font-family: ui-monospace, monospace; }
.pc-odds { font-size: 12px; font-weight: 700; font-family: ui-monospace, monospace; color: var(--x-text-dim); }
.pc-na { color: var(--x-text-dim2); }

.pc-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
.pc-ai-link {
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--x-accent-2); text-decoration: none; padding: 4px 8px;
  border: 1px solid rgba(61, 220, 176, 0.35); border-radius: 999px;
  flex-shrink: 0;
}
.pc-ai-link:hover { background: rgba(15, 159, 133, 0.12); }
.track-btn {
  font-weight: 800; font-size: 10px; padding: 6px 14px;
  border-radius: var(--x-radius-sm); border: 0; cursor: pointer; line-height: 1;
  letter-spacing: 0.02em; color: #fff;
  transition: filter 0.15s, opacity 0.15s;
}
.track-btn:disabled { cursor: default; opacity: 0.85; }
.track-btn.is-tracked {
  background: var(--x-surface-2) !important; color: var(--x-pos) !important;
  border: 1px solid var(--x-pos) !important; padding: 5px 13px;
}
.track-btn.is-pending { opacity: 0.65; cursor: progress; }

.pc-expand {
  background: transparent; border: 0; color: var(--x-text-dim2); cursor: pointer;
  font-size: 12px; line-height: 1; padding: 6px; flex-shrink: 0;
  transition: transform 0.15s, color 0.12s;
}
.pc-expand:hover { color: var(--x-text); }
.pc-expand.is-open { transform: rotate(90deg); color: var(--x-accent-2); }

.pc-conf-track {
  height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.08);
  overflow: hidden; margin-top: 2px;
}
.pc-conf-fill { height: 100%; border-radius: inherit; min-width: 4%; transition: width 0.2s; }

.pc-sub {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pc-avgs { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pc-avg { font-size: 11px; font-family: ui-monospace, monospace; color: var(--x-text-dim); }
.pc-avg b {
  font-size: 8px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--x-text-dim2); margin-right: 3px;
}
.pc-meta { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pc-time { font-size: 10px; color: var(--x-text-dim2); }
.pc-show-sm { display: none; }

/* Expandable detail */
.pc-detail {
  background: rgba(0, 0, 0, 0.45); border: 1px solid var(--x-border); border-top: 0;
  border-radius: 0 0 var(--x-radius) var(--x-radius); margin: -6px 0 2px; padding: 12px 14px;
}
.pc-detail-inner { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.pc-mini { min-width: 170px; flex: 1 1 200px; }
.pc-mini-cap {
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--x-text-dim2); margin-bottom: 4px;
}
.pc-bars { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 48px; }
.pc-bar-col { flex: 1; display: flex; align-items: flex-end; height: 48px; min-width: 7px; }
.pc-bar { width: 100%; border-radius: 2px 2px 0 0; }
.pc-bar-line { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(255,255,255,0.35); opacity: 0.5; }
.pc-splits, .pc-env { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pc-split {
  font-size: 11px; border: 1px solid var(--x-border); border-radius: 6px;
  padding: 4px 8px; white-space: nowrap; background: var(--x-surface);
}
.pc-split b { font-size: 8px; font-weight: 800; letter-spacing: 0.04em; color: var(--x-text-dim2); margin-right: 3px; }
.pc-split-n { color: var(--x-text-dim2); font-size: 10px; }
.pc-detail-link { font-size: 11px; font-weight: 700; color: var(--x-accent-2); text-decoration: none; white-space: nowrap; }
.pc-detail-link:hover { text-decoration: underline; }
.pc-detail-empty { font-size: 11px; color: var(--x-text-dim2); }

/* Next-day no-odds board */
.nd-mkts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nd-mkt {
  display: inline-flex; align-items: baseline; gap: 5px;
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: 6px; padding: 4px 9px; text-decoration: none;
  transition: border-color 0.12s;
}
.nd-mkt:hover { border-color: rgba(61, 220, 176, 0.4); }
.nd-mkt-label { font-size: 8.5px; font-weight: 800; letter-spacing: 0.05em; color: var(--x-text-dim2); }
.nd-mkt-line { font-size: 12px; font-weight: 800; font-family: ui-monospace, monospace; color: var(--x-text); }

/* Mobile stacked player card */
.pc-mcard {
  position: relative; overflow: hidden;
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: calc(var(--x-radius) + 2px); padding: 14px;
  display: flex; flex-direction: column; gap: 12px;
  background-image: var(--grad-veil);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.pc-mcard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--grad-full); opacity: 0.55;
}
.pc-mcard:hover {
  border-color: rgba(61, 220, 176, 0.35);
  box-shadow: 0 8px 24px -14px rgba(29, 191, 138, 0.35);
}
.pc-mcard.dimmed { opacity: 0.55; }
.pc-mcard-head { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.pc-mcard-id { flex: 1; min-width: 0; }
.pc-mcard-name {
  font-size: 17px; font-weight: 800; color: var(--x-text); text-decoration: none;
  display: block; line-height: 1.2;
}
.pc-mcard-name:hover { color: var(--x-accent-2); }
.pc-mcard-stat {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em; color: var(--x-text-dim2);
  margin-top: 3px;
}
.pc-mcard-pick {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--x-border);
  border-radius: var(--x-radius); padding: 12px 14px;
}
.pc-mcard-line {
  font-size: 2rem; font-weight: 800; font-family: ui-monospace, monospace; line-height: 1;
}
.pc-mcard-ou .pc-ou-btn { width: 34px; height: 34px; font-size: 11px; }
.pc-mcard-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
.pc-mcard-metrics-4 { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pc-mcard-metric {
  background: rgba(0, 0, 0, 0.35); border: 1px solid var(--x-border);
  border-radius: var(--x-radius-sm); padding: 10px 6px; text-align: center;
}
.pc-mcard-metric b {
  display: block; font-size: 8px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--x-text-dim2); margin-bottom: 4px;
}
.pc-mcard-metric span {
  font-size: 14px; font-weight: 800; font-family: ui-monospace, monospace;
}
.pc-mcard-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pc-mcard-meta { font-size: 10px; color: var(--x-text-dim2); min-width: 0; }
.pc-mcard-foot .track-btn { min-height: 40px; padding: 8px 18px; font-size: 12px; }

@media (min-width: 901px) { .pc-mcard { display: none; } }
@media (max-width: 639px) {
  .props-toolbar-row { flex-wrap: nowrap; }
  .props-sport-bar, .props-quick-bar, .props-filter-reset-bar { display: none !important; }
  #filter-panel.filter-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    max-height: min(92vh, 100dvh);
    overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%); transition: transform 0.25s ease;
    border-bottom: 0; margin: 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  #filter-panel.filter-sheet.is-open { transform: translateY(0); }
  body.filter-sheet-open { overflow: hidden; }
  .filter-sheet-head {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 2;
    background: var(--x-surface);
    padding-bottom: 12px; margin: -16px -16px 12px;
    padding: 12px 16px; border-bottom: 1px solid var(--x-border);
  }
  .filter-sheet-done {
    background: var(--g2); color: #fff; border: 0;
    font-size: 12px; font-weight: 800; border-radius: 8px;
    padding: 8px 14px; min-height: 36px; cursor: pointer;
  }
  .pc-row { display: none; }
  .pc-hide-sm { display: none; }
  .pc-show-sm { display: inline-flex; }
  .track-btn { min-height: 36px; }
  .nd-mkts { padding-left: 0; }
}
@media (min-width: 640px) {
  .filter-sheet-head, .filter-sheet-mobile-only { display: none !important; }
  .filter-backdrop { display: none !important; }
}

/* =============================================================================
   PLAYER PROFILE — Research vs AI Take modes
   ========================================================================== */
.pl-page { padding-block: clamp(12px, 3vw, 24px); display: flex; flex-direction: column; gap: 12px; }
body.pl-spa-active .pp-shell { display: none !important; }
#pl-spa-mount.hidden { display: none; }
#pl-spa-mount:not(.hidden) { display: block; }

/* ── Three-column research layout (Phase A) ─────────────────────── */
.pl-layout {
  display: grid;
  grid-template-columns: minmax(168px, 210px) minmax(0, 1fr) minmax(200px, 240px);
  gap: 14px;
  align-items: start;
}
.pl-sidebar {
  position: sticky; top: 12px;
  display: flex; flex-direction: column; gap: 8px;
  max-height: calc(100vh - 24px); overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 159, 133, 0.55) var(--x-bg);
}
.pl-sidebar::-webkit-scrollbar { width: 6px; }
.pl-sidebar::-webkit-scrollbar-track {
  background: var(--x-bg);
  border-radius: 3px;
}
.pl-sidebar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.35);
}
.pl-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 159, 133, 0.65);
}
.pl-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pl-sidebar-hd {
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em;
  color: var(--x-text-dim2); padding: 0 2px 4px;
}
.pl-game-card {
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: var(--x-radius); padding: 10px 10px 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.pl-game-card.is-active {
  border-color: rgba(29, 191, 138, 0.45);
  box-shadow: 0 0 0 1px rgba(29, 191, 138, 0.12);
}
.pl-game-datetime {
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--x-text-dim2); line-height: 1.3;
}
.pl-game-team {
  display: flex; align-items: center; gap: 8px; min-width: 0;
}
.pl-game-logo {
  width: 22px; height: 22px; object-fit: contain; flex-shrink: 0;
}
.pl-game-abbr { font-size: 12px; font-weight: 800; min-width: 28px; }
.pl-game-tag {
  margin-left: auto; font-size: 11px; font-weight: 800;
  font-family: ui-monospace, monospace; color: var(--x-text-dim);
}
.pl-game-top4 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 2px; }
.pl-game-pfp {
  display: block; width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; background: var(--x-surface-2);
}
.pl-game-pfp.is-active { border-color: var(--x-accent-2); box-shadow: 0 0 0 2px rgba(29, 191, 138, 0.25); }
.pl-game-pfp img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-game-pfp.sm { width: 28px; height: 28px; }
.pl-game-more { margin-top: 2px; }
.pl-game-more summary {
  cursor: pointer; font-size: 10px; font-weight: 800; color: var(--x-text-dim);
  list-style: none; user-select: none;
}
.pl-game-more summary::-webkit-details-marker { display: none; }
.pl-game-more[open] summary { color: var(--x-accent-2); }
.pl-game-more-list { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.pl-game-player-row {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  color: var(--x-text-dim); min-width: 0;
}
.pl-game-player-row:hover { color: var(--x-text); }
.pl-game-player-row.is-active .pl-game-player-name { color: var(--x-accent-2); font-weight: 800; }
.pl-game-player-name {
  font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-game-more-hint { font-size: 10px; font-weight: 700; color: var(--x-text-dim2); }
.pl-chart-card--clean { gap: 8px; }
.pl-chart-card--clean .pl-chart { height: 280px; }
.pl-chart-span {
  margin: 0; padding: 0 2px;
  font-size: 10px; font-weight: 700; color: var(--x-text-dim2);
  letter-spacing: 0.02em; line-height: 1.3;
}
.pl-brush {
  position: relative; height: 56px; margin-top: 6px; touch-action: none; user-select: none;
}
.pl-brush-track {
  position: absolute; left: 0; right: 0; top: 16px; height: 28px;
  display: flex; align-items: flex-end; gap: 1px;
  border-radius: 4px; overflow: hidden; background: rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.pl-brush-seg {
  flex: 1 1 0; min-width: 1px; height: 100%; border-radius: 1px;
  align-self: flex-end; transition: opacity 0.12s;
}
.pl-brush-seg.hit { background: var(--x-pos); opacity: 0.9; }
.pl-brush-seg.miss { background: var(--x-neg); opacity: 0.9; }
.pl-brush-seg.push { background: #52525b; opacity: 0.7; }
.pl-brush-seg.zero { background: #52525b; opacity: 0.45; min-height: 2px; }
.pl-brush-seg.excluded {
  background: #52525b !important;
  opacity: 0.35 !important;
}
.pl-brush-seg.out {
  background: #52525b !important;
  opacity: 0.35 !important;
}
.pl-brush-seg.excluded.out { opacity: 0.22 !important; }
.pl-brush-years {
  position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  pointer-events: none;
}
.pl-brush-year {
  position: absolute; bottom: 0; transform: translateX(-2px);
  font-size: 9px; font-weight: 800; color: var(--x-text-dim2);
  letter-spacing: 0.04em;
}
.pl-brush-marker {
  position: absolute; top: 2px; left: 0;
  width: 11px; height: 11px;
  border: 2px solid #9ca3af; border-radius: 50%;
  background: rgba(20, 20, 20, 0.85);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  cursor: grab; z-index: 2; touch-action: none;
  transform: translateX(-50%);
  /* left % set in JS — no transition while dragging for smooth follow */
}
.pl-brush-marker:not(:active) { transition: left 0.08s ease-out; }
.pl-brush-marker:active { cursor: grabbing; border-color: #d1d5db; transition: none; }

/* ── Right filters rail (Props.Cash-style) ───────────────────────── */
.pl-filters-rail {
  position: sticky; top: 12px;
  display: flex; flex-direction: column; gap: 10px;
  max-height: calc(100vh - 24px); overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(15, 159, 133, 0.55) var(--x-bg);
  padding-bottom: 8px;
}
.pl-filters-rail::-webkit-scrollbar { width: 6px; }
.pl-filters-rail::-webkit-scrollbar-track { background: var(--x-bg); border-radius: 3px; }
.pl-filters-rail::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.14); border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.35);
}
.pl-filters-rail::-webkit-scrollbar-thumb:hover { background: rgba(15, 159, 133, 0.65); }
.pl-filters-hd {
  margin: 0; padding: 0 2px 4px;
  font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--x-text);
}
.pl-filt-section { display: flex; flex-direction: column; gap: 8px; }
/* Full-width segmented control (All Games / Home / Away) */
.pl-filt-seg-row {
  display: flex; width: 100%;
  background: var(--x-surface-2); border: 1px solid var(--x-border);
  border-radius: 999px; padding: 3px; gap: 0;
}
.pl-filt-seg {
  flex: 1 1 0; min-width: 0;
  background: transparent; color: var(--x-text-dim);
  border: 0; border-radius: 999px;
  padding: 8px 4px; font-size: 10px; font-weight: 800;
  cursor: pointer; text-align: center; line-height: 1.2;
  transition: color 0.12s, background 0.12s;
}
.pl-filt-seg:hover:not(:disabled):not(.active) { color: var(--x-text); }
.pl-filt-seg.active { background: var(--x-pos); color: #000; }
.pl-filt-seg:disabled { opacity: 0.45; cursor: default; }
.pl-filt-seg .pl-filt-count { display: block; font-size: 8px; font-weight: 700; opacity: 0.85; }
.pl-filt-seg-row[data-win-row] .pl-filt-seg {
  font-size: 9px; padding: 8px 1px; letter-spacing: -0.02em;
  white-space: nowrap; overflow: visible;
}
.pl-filt-seg-row[data-win-row] .pl-filt-seg[data-season] {
  flex: 1.25 1 0; min-width: 26px;
}
.pl-filt-pill-row {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pl-filt-pill-row--tight .pl-filt-pill {
  flex: 1 1 calc(33.333% - 6px); min-width: 52px; padding: 7px 6px;
  font-size: 10px; text-align: center;
}
.pl-filt-pill {
  flex: 1 1 auto; min-width: 0;
  background: var(--x-surface-2); color: var(--x-text-dim);
  border: 1px solid var(--x-border); border-radius: 999px;
  padding: 8px 12px; font-size: 11px; font-weight: 800;
  cursor: pointer; transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.pl-filt-pill:hover:not(:disabled) { color: var(--x-text); }
.pl-filt-pill.active {
  background: var(--x-pos); color: #000; border-color: transparent;
}
.pl-filt-pill:disabled { opacity: 0.45; cursor: default; }
.pl-filt-row-title { font-size: 13px; font-weight: 800; color: var(--x-text); }
.pl-filt-altline-acc {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pl-filt-games-summary {
  gap: 8px; justify-content: flex-start;
}
.pl-filt-acc-summary-label { font-weight: inherit; }
.pl-filt-summary-badge {
  font-size: 11px; font-weight: 700; color: var(--x-text-dim);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--x-border);
  border-radius: 999px; padding: 1px 8px; line-height: 1.45;
  margin-left: 6px;
}
.pl-filt-games-summary .pl-filt-summary-badge { margin-left: 6px; }
.pl-filt-games-summary .pl-filt-acc-summary-label { flex: 1; }
.pl-filt-games-body { padding-top: 4px; }
.pl-games-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pl-games-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 4px; border: 0; background: transparent;
  color: var(--x-text); font-size: 12px; font-weight: 600;
  text-align: left; cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pl-games-opt:nth-child(odd) { padding-right: 10px; }
.pl-games-opt:nth-child(even) { padding-left: 10px; }
.pl-games-opt:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.pl-games-opt::before {
  content: ""; flex-shrink: 0;
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  background: transparent; transition: background 0.12s, border-color 0.12s;
}
.pl-games-opt:hover { color: var(--x-text); }
.pl-games-opt.active {
  color: var(--x-text);
  box-shadow: inset 0 0 0 1px var(--x-pos);
  border-radius: 4px;
}
.pl-games-opt.active::before {
  background: var(--x-pos); border-color: var(--x-pos);
}
.pl-filt-radio-grid { margin-top: 2px; }
.pl-filt-radio-opt.active {
  box-shadow: none;
  border-radius: 0;
}
.pl-filt-mix-body { gap: 12px; }
.pl-filt-mix-tabs {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.pl-filt-mix-tab {
  flex: 1 1 calc(25% - 6px); min-width: 0;
  background: var(--x-surface-2); color: var(--x-text);
  border: 1px solid var(--x-border); border-radius: 999px;
  padding: 8px 6px; font-size: 10px; font-weight: 800;
  letter-spacing: 0.02em; cursor: default; text-align: center;
}
.pl-filt-mix-tab.active {
  background: var(--x-pos); color: #000; border-color: transparent;
}
.pl-filt-range-list {
  display: flex; flex-direction: column; gap: 14px;
}
.pl-filt-range-block--stat { margin-top: 4px; }
.pl-filt-range-hd {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; font-weight: 600; color: var(--x-text);
  margin-bottom: 8px;
}
.pl-filt-range-hd span:last-child {
  font-size: 11px; font-weight: 700; color: var(--x-text-dim);
}
.pl-filt-range-track {
  position: relative; height: 4px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); margin: 0 7px;
}
.pl-filt-range-fill {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  border-radius: inherit; background: var(--x-pos);
}
.pl-filt-range-handle {
  position: absolute; top: 50%; width: 14px; height: 14px;
  margin-top: -7px; border-radius: 50%;
  background: var(--x-pos); border: 2px solid #0a0a0a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}
.pl-filt-range-handle--l { left: 0; transform: translateX(-50%); }
.pl-filt-range-handle--r { right: 0; transform: translateX(50%); }
.pl-filt-range-ends {
  display: flex; justify-content: space-between;
  font-size: 11px; font-weight: 700; color: var(--x-text-dim);
  margin-top: 6px; padding: 0 2px;
}
.pl-filt-stat-body { gap: 12px; }
.pl-filt-sec-charts-summary {
  display: flex; align-items: center; gap: 6px;
}
.pl-filt-sec-charts-icon {
  font-size: 13px; line-height: 1; color: var(--x-text-dim);
}
.pl-filt-games-body .pl-filt-seg-row { width: 100%; }
.pl-filt-altline-summary {
  gap: 0; padding: 10px 2px; justify-content: flex-start;
}
.pl-filt-altline-left {
  display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1;
}
.pl-filt-altline-right {
  display: flex; align-items: center; flex-shrink: 0;
  margin-left: auto; margin-right: 4px;
}
.pl-filt-altline-acc summary::after { margin-left: 0; flex-shrink: 0; }
.pl-filt-line-badge {
  font-size: 12px; font-weight: 700; color: var(--x-text-dim);
  line-height: 1;
}
.pl-filt-linectl {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--x-border);
  border-radius: 999px; padding: 1px 8px;
}
.pl-filt-linectl .pl-line-btn {
  width: auto; height: auto; min-width: 0; padding: 0;
  background: none; border: none; border-radius: 0;
  font-size: 13px; font-weight: 700; color: var(--x-text-dim);
}
.pl-filt-linectl .pl-line-btn:hover { background: none; color: var(--x-text); }
.pl-filt-altline-body { padding-top: 2px; }
.pl-altline-scroll {
  display: flex; align-items: center;
  overflow-x: auto; overflow-y: hidden;
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: 8px; padding: 3px 4px;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.pl-altline-scroll::-webkit-scrollbar { height: 3px; }
.pl-altline-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22); border-radius: 999px;
}
.pl-altline-opt {
  flex: 0 0 auto; min-width: 28px; height: 24px; padding: 0 4px;
  border: 0; background: transparent; color: var(--x-text-dim);
  font-size: 12px; font-weight: 700; cursor: pointer;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: inline-flex; align-items: center; justify-content: center;
}
.pl-altline-opt:last-child { border-right: 0; }
.pl-altline-opt:hover { color: var(--x-text); }
.pl-altline-opt.active {
  background: var(--x-pos); color: #000; border-radius: 50%;
  width: 22px; height: 22px; min-width: 22px; padding: 0; margin: 0 2px;
  border-right-color: transparent; font-size: 11px;
}
.pl-filt-acc {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pl-filt-acc summary {
  cursor: pointer; list-style: none; user-select: none;
  padding: 12px 2px; font-size: 13px; font-weight: 700; color: var(--x-text);
  display: flex; align-items: center; justify-content: space-between;
}
.pl-filt-acc summary::-webkit-details-marker { display: none; }
.pl-filt-acc summary::after {
  content: "▾"; font-size: 11px; color: var(--x-text-dim2); transition: transform 0.12s;
}
.pl-filt-acc[open] summary::after { transform: rotate(180deg); }
.pl-filt-acc-body { padding: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.pl-filt-soon {
  margin: 0; font-size: 11px; font-weight: 600; color: var(--x-text-dim2); font-style: italic;
}

.pl-header-stats {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; overflow: hidden;
  background: rgba(0, 0, 0, 0.18);
}
.pl-header-stat {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 4px; border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.pl-header-stat:last-child { border-right: 0; }
.pl-header-stat-v {
  font-size: 15px; font-weight: 800; font-family: ui-monospace, monospace; line-height: 1;
}
.pl-header-stat-l {
  font-size: 8px; font-weight: 800; color: var(--x-text-dim2); letter-spacing: 0.07em;
}
@media (max-width: 1024px) {
  .pl-layout { grid-template-columns: minmax(0, 1fr); }
  /* Hide the games rail on narrow viewports — don't stack under the chart. */
  .pl-sidebar { display: none; }
  /* Filters (windows, alt lines, games) stay usable on mobile: the rail
     stacks below the main column instead of disappearing. */
  .pl-filters-rail {
    position: static; max-height: none; overflow-y: visible;
  }
}

/* app.css loads after Tailwind, so component display rules would beat the
   .hidden utility / [hidden] attribute on ties — pin the hidden states. */
.pl-market-panel.hidden,
.pl-ai-block.hidden,
.pl-linehist.hidden,
.pl-subtabs.hidden,
.pl-card.hidden,
.pl-filters-rail.hidden,
.pl-hero-meta.hidden,
.pl-rates[hidden],
.pl-context-row[hidden],
.pl-streak[hidden],
.pl-form[hidden] { display: none; }

.pl-ai-block {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: calc(var(--x-radius) + 4px); padding: 16px;
  background-image: var(--grad-veil);
}
.pl-ai-block::before {
  content: ""; display: block; height: 2px; margin: -16px -16px 12px;
  border-radius: calc(var(--x-radius) + 4px) calc(var(--x-radius) + 4px) 0 0;
  background: var(--grad-full); opacity: 0.7;
}

.pl-ai-verdict-hd {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.pl-ai-tier {
  font-size: 10px; font-weight: 800; letter-spacing: 0.06em;
  padding: 4px 12px; border-radius: 999px; color: #000; text-transform: uppercase;
}
.pl-ai-align {
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  padding: 4px 10px; border-radius: 999px; border: 1px solid var(--x-border);
}
.pl-ai-align.agree { color: var(--x-pos); background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.35); }
.pl-ai-align.disagree { color: var(--x-neg); background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.35); }
.pl-ai-align.neutral { color: var(--x-warn); background: rgba(234, 179, 8, 0.08); border-color: rgba(234, 179, 8, 0.3); }

.pl-ai-headline {
  font-size: 15px; font-weight: 700; line-height: 1.55; color: var(--x-text);
}
.pl-ai-body {
  font-size: 13px; line-height: 1.65; color: var(--x-text-dim);
}
.pl-ai-model-line {
  font-size: 11px; font-family: ui-monospace, monospace; color: var(--x-text-dim2);
  padding: 8px 10px; background: rgba(0, 0, 0, 0.35);
  border-radius: var(--x-radius-sm); border: 1px solid var(--x-border);
}

.pl-ai-details { margin-top: 4px; }
.pl-ai-details summary {
  cursor: pointer; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  color: var(--x-accent-2); list-style: none; padding: 6px 0;
}
.pl-ai-details summary::-webkit-details-marker { display: none; }
.pl-ai-details-body {
  display: flex; flex-direction: column; gap: 10px; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.pl-ai-point {
  font-size: 12px; line-height: 1.5; color: var(--x-text-dim);
  padding-left: 10px; border-left: 2px solid rgba(15, 159, 133, 0.4);
}

.pl-scouting-details, .pl-gamelog-details {
  /* extends .pl-fold — inner padding only */
}
.pl-scouting-inner, .pl-gamelog-inner { padding: 4px 0 0; }

.pl-card, .pl-hero, .pl-ai-block {
  background-image: var(--grad-veil);
}

/* ── Player page tokens & utilities ─────────────────────────────── */
.pl-text-pos { color: var(--x-pos); }
.pl-text-neg { color: var(--x-neg); }
.pl-text-warn { color: var(--x-warn); }
.pl-text-text { color: var(--x-text); }
.pl-text-dim { color: var(--x-text-dim); }
.pl-text-dim2 { color: var(--x-text-dim2); }
.pl-text-primary { color: var(--x-accent-2); }

.pl-card {
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: calc(var(--x-radius) + 2px); padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}

/* ── Slim hero ─────────────────────────────────────────────────── */
.pl-hero {
  position: relative; overflow: hidden;
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: calc(var(--x-radius) + 4px); padding: 14px 16px;
}
.pl-hero::before {
  content: ""; position: absolute; inset: -50% -30% auto auto; width: 55%; height: 140%;
  background: radial-gradient(circle, rgba(29, 191, 138, 0.12) 0%, rgba(232, 184, 74, 0.05) 45%, transparent 70%);
  pointer-events: none;
}
.pl-hero-row { display: flex; align-items: center; gap: 14px; position: relative; min-width: 0; }
.pl-hero-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 240px);
  gap: 14px; align-items: stretch; position: relative; min-width: 0;
}
.pl-hero-player { min-width: 0; }
.pl-matchup-slot {
  background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column;
  gap: 8px; justify-content: center; min-height: 88px; min-width: 0;
}
.pl-matchup-slot-hd {
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em; color: var(--x-text-dim2);
}
.pl-matchup-slot-body { font-size: 11px; font-weight: 600; color: var(--x-text-dim); }
.pl-matchup-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pl-matchup-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pl-matchup-pit-headshot {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: var(--x-surface-2); border: 1px solid rgba(255, 255, 255, 0.08);
}
.pl-matchup-pit-headshot img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.pl-matchup-pit-meta { min-width: 0; flex: 1; }
.pl-matchup-pit-name-row {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; min-width: 0;
}
.pl-matchup-pit-name {
  font-size: 13px; font-weight: 800; color: var(--x-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl-matchup-pit-hand {
  font-size: 10px; font-weight: 700; color: var(--x-text-dim2); flex-shrink: 0;
}
.pl-matchup-pit-time {
  margin-top: 2px; font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--x-text-dim2); text-transform: uppercase;
}
.pl-matchup-stats-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.pl-matchup-stats {
  display: flex; align-items: flex-end; gap: 10px; flex: 1; min-width: 0;
}
.pl-matchup-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pl-matchup-stat-k {
  font-size: 9px; font-weight: 700; letter-spacing: 0.04em; color: var(--x-text-dim2);
}
.pl-matchup-stat-v {
  font-size: 13px; font-weight: 800; color: var(--x-text); font-variant-numeric: tabular-nums;
}
.pl-matchup-grade {
  --grade-pct: 50; --grade-color: #22c55e;
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; position: relative;
  background: conic-gradient(
    var(--grade-color) calc(var(--grade-pct) * 1%),
    rgba(255, 255, 255, 0.08) 0
  );
  display: flex; align-items: center; justify-content: center;
}
.pl-matchup-grade::before {
  content: ""; position: absolute; inset: 4px; border-radius: 50%;
  background: rgba(10, 10, 10, 0.92);
}
.pl-matchup-grade span {
  position: relative; z-index: 1; font-size: 11px; font-weight: 800;
  color: var(--grade-color); line-height: 1;
}
.pl-matchup-apps {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 8px;
}
.pl-matchup-app {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 10px; font-weight: 600;
}
.pl-matchup-app-yr { color: var(--x-text-dim2); flex-shrink: 0; }
.pl-matchup-app-line { color: var(--x-text-dim); text-align: right; }
.pl-matchup-first {
  margin: 0; font-size: 10px; font-weight: 600; color: var(--x-text-dim2);
  border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 8px;
}
@media (max-width: 768px) {
  .pl-hero-split { grid-template-columns: 1fr; }
}
.pl-headshot {
  position: relative; width: 64px; height: 64px; border-radius: 50%; flex-shrink: 0;
  padding: 2px; background: var(--grad-full);
}
.pl-headshot img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
  background: var(--x-surface-2); display: block;
}
.pl-hero-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.pl-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pl-name {
  font-size: clamp(18px, 4vw, 22px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15;
  background-image: var(--grad-full); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; margin: 0;
}
.pl-hero-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-id-chip {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; background: var(--x-surface-2);
  color: var(--x-text-dim); border: 1px solid var(--x-border);
}
.pl-chip {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
}
.pl-hero-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 11px; font-weight: 700;
}
.pl-pick-marquee {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; width: 100%; min-width: 0; flex-wrap: wrap;
}
.pl-pick-marquee .pl-pick-line { flex: 1; min-width: 0; }
.pl-pick-line {
  display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: ui-monospace, monospace; letter-spacing: 0.02em;
}
.pl-pick-line .over,
.pl-pick-line .under,
.pl-pick-line .model {
  font-size: 16px; font-weight: 800; line-height: 1.2;
}
.pl-pick-line .over { color: var(--x-pos); }
.pl-pick-line .under { color: var(--x-neg); }
.pl-pick-line .odds {
  font-size: 14px; font-weight: 700; color: var(--x-text-dim2);
}
.pl-pick-line .model { color: var(--x-accent-2); }

.pl-rest-chip {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; padding: 3px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid currentColor;
}
.pl-rest-chip.pos { color: var(--x-pos); background: rgba(34, 197, 94, 0.08); }
.pl-rest-chip.warn { color: var(--x-warn); background: rgba(234, 179, 8, 0.08); }
.pl-rest-chip.neg { color: var(--x-neg); background: rgba(239, 68, 68, 0.08); }
.pl-rest-chip.dim { color: var(--x-text-dim); background: var(--x-surface-2); }
.pl-rest-sub { font-size: 10px; color: var(--x-text-dim2); font-weight: 600; }

/* ── Market sub-tabs ───────────────────────────────────────────── */
.pl-subtabs {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px;
  scrollbar-width: thin;
}
.pl-subtab {
  background: var(--x-surface); color: var(--x-text-dim); border: 1px solid var(--x-border);
  font-size: 11px; font-weight: 800; padding: 6px 12px; cursor: pointer; border-radius: 999px;
  white-space: nowrap; transition: color 0.12s, background 0.12s;
}
.pl-subtab:hover { color: var(--x-text); }
.pl-subtab.active { background: var(--grad); color: #fff; border-color: transparent; }

/* ── Research workspace ─────────────────────────────────────────── */
.pl-workspace { display: flex; flex-direction: column; gap: 12px; }
.pl-market-panel { display: flex; flex-direction: column; gap: 12px; }

.pl-snapshot {
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: var(--x-radius); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.pl-rates {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 10px; overflow: hidden;
}
.pl-rate {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: transparent; padding: 8px 4px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.pl-rate:last-child { border-right: 0; }
.pl-rate-pct { font-size: 16px; font-weight: 800; font-family: ui-monospace, monospace; line-height: 1; }
.pl-rate-tag { font-size: 8.5px; font-weight: 800; color: var(--x-text-dim2); letter-spacing: 0.07em; }
.pl-rate-bar { width: 72%; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.pl-rate-fill { height: 100%; border-radius: 2px; }
.pl-rate-fill.pos { background: var(--x-pos); }
.pl-rate-fill.warn { background: var(--x-warn); }
.pl-rate-fill.neg { background: var(--x-neg); }
.pl-rate-fill.dim { background: #3f3f46; }

.pl-streak {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 2px;
}
.pl-streak-dots { display: inline-flex; align-items: center; gap: 3px; }
.pl-streak-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
}
.pl-streak-dot.hit { background: var(--x-pos); }
.pl-streak-dot.miss { background: var(--x-neg); }
.pl-streak-dot.push { background: #52525b; }
.pl-streak-label { font-size: 10.5px; font-weight: 800; }

/* ── Chart card (primary focus) ─────────────────────────────────── */
.pl-chart-card {
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: calc(var(--x-radius) + 2px); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.pl-chart-hd {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.pl-linectl {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex: 1; min-width: 0;
}
.pl-line-btn {
  background: var(--x-surface-2); color: var(--x-text); border: 1px solid var(--x-border);
  border-radius: 8px; width: 26px; height: 26px; font-size: 14px; font-weight: 800;
  cursor: pointer; line-height: 1; transition: background 0.12s;
}
.pl-line-btn:hover { background: #262626; }
.pl-line-val {
  font-family: ui-monospace, monospace; font-weight: 800; font-size: 17px;
  min-width: 36px; text-align: center;
}
.pl-side-btn {
  background: rgba(15, 159, 133, 0.12); color: var(--x-accent-2);
  border: 1px solid rgba(61, 220, 176, 0.35); border-radius: 8px;
  padding: 4px 11px; font-size: 10.5px; font-weight: 800; cursor: pointer; letter-spacing: 0.04em;
}
.pl-side-btn:hover { background: rgba(15, 159, 133, 0.2); }
.pl-line-odds { font-family: ui-monospace, monospace; font-size: 11.5px; font-weight: 700; }
.pl-line-lbl {
  font-size: 9px; font-weight: 800; letter-spacing: 0.07em; color: var(--x-text-dim2);
}

.pl-track-btn {
  background: var(--grad); color: #fff; font-weight: 800; font-size: 10.5px;
  letter-spacing: 0.03em; padding: 7px 14px; border-radius: 8px; border: 0;
  cursor: pointer; line-height: 1; flex-shrink: 0;
  box-shadow: 0 2px 12px -6px rgba(29, 191, 138, 0.5);
}
.pl-track-btn:hover:not(:disabled) { filter: brightness(1.12); }
.pl-track-btn:disabled { opacity: 0.65; cursor: default; }
.pl-track-btn.is-tracked {
  background: var(--x-surface-2); color: var(--x-pos); border: 1px solid var(--x-pos);
  box-shadow: none; padding: 6px 13px;
}
.pl-track-btn.is-pending { opacity: 0.7; cursor: progress; }

.pl-chart-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.pl-winpills { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pl-winpill {
  background: var(--x-surface-2); color: var(--x-text-dim); border: 1px solid var(--x-border);
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; padding: 4px 9px;
  border-radius: 999px; cursor: pointer; transition: color 0.12s, background 0.12s;
}
.pl-winpill:hover { color: var(--x-text); }
.pl-winpill.active { background: var(--grad); color: #fff; border-color: transparent; }

.pl-avg {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.04em;
  padding: 4px 9px; border-radius: 999px; font-family: ui-monospace, monospace;
  border: 1px solid currentColor;
}

.pl-nslider {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0, 0, 0, 0.25); border-radius: 8px; padding: 6px 10px;
}
.pl-nslider-n {
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em; color: var(--x-text-dim);
  min-width: 52px; white-space: nowrap;
}
.pl-nslider-input {
  -webkit-appearance: none; appearance: none; flex: 1; height: 3px;
  border-radius: 999px; background: #2a2a2a; outline: none; cursor: pointer; min-width: 0;
}
.pl-nslider-input::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 14px;
  border-radius: 50%; background: var(--x-accent-2); cursor: pointer;
  box-shadow: 0 0 0 3px rgba(29, 191, 138, 0.22);
}
.pl-nslider-input::-moz-range-thumb {
  width: 14px; height: 14px; border: 0; border-radius: 50%;
  background: var(--x-accent-2); cursor: pointer;
}
.pl-nslider-out {
  font-size: 10.5px; font-family: ui-monospace, monospace; color: var(--x-text-dim);
  white-space: nowrap; min-width: 88px; text-align: right;
}

.pl-chart-frame {
  background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 10px; padding: 6px 4px 2px;
}
.pl-chart { width: 100%; height: 240px; }

/* ── Collapsible folds ─────────────────────────────────────────── */
.pl-fold {
  border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 10px;
  background: rgba(0, 0, 0, 0.2); overflow: hidden;
}
.pl-fold summary {
  cursor: pointer; padding: 10px 12px; font-size: 11px; font-weight: 800;
  letter-spacing: 0.04em; color: var(--x-text-dim); list-style: none;
  display: flex; align-items: center; gap: 8px; user-select: none;
  transition: color 0.12s;
}
.pl-fold summary:hover { color: var(--x-text); }
.pl-fold summary::-webkit-details-marker { display: none; }
.pl-fold summary::before {
  content: "▸"; font-size: 10px; color: var(--x-accent-2); transition: transform 0.15s;
}
.pl-fold[open] summary::before { transform: rotate(90deg); }
.pl-fold[open] summary {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06); color: var(--x-text);
}
.pl-fold-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.pl-fold-hint { font-size: 9.5px; font-weight: 600; color: var(--x-text-dim2); margin-left: auto; }

.pl-intel-details .pl-fold-body { gap: 12px; }
#pl-splits-host.pl-card, #pl-pm-host.pl-card { padding: 10px 12px; margin: 0; }

/* ── Chart research filters ─────────────────────────────────────── */
.pl-filt-block { display: flex; flex-direction: column; gap: 7px; }
.pl-filt-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pl-filt-lbl {
  font-size: 8.5px; font-weight: 800; color: var(--x-text-dim2); letter-spacing: 0.07em;
  flex-shrink: 0; width: 40px;
}
.pl-filt-scroll {
  display: flex; align-items: center; gap: 5px; overflow-x: auto;
  padding-bottom: 2px; scrollbar-width: thin; flex: 1; min-width: 0;
}
.pl-filt-scroll::-webkit-scrollbar { height: 3px; }
.pl-filt-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 2px; }
.pl-filt-count { font-size: 8.5px; font-weight: 700; color: #52525b; margin-left: 1px; }

/* ── Context panel (form, splits, matchup) ─────────────────────── */
.pl-context-body { display: flex; flex-direction: column; gap: 12px; }
.pl-context-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 11px;
}
.pl-context-lbl {
  font-size: 9px; font-weight: 800; letter-spacing: 0.06em; color: var(--x-text-dim2);
  min-width: 52px;
}
.pl-split-chip {
  display: inline-flex; align-items: baseline; gap: 4px;
  border: 1px solid var(--x-border); border-radius: 6px; padding: 3px 8px;
  font-size: 10.5px; background: var(--x-surface);
}
.pl-split-chip b { font-weight: 800; }
.pl-split-chip em { font-style: normal; color: var(--x-text-dim); font-size: 10px; }
.pl-context-note { font-size: 11px; font-weight: 600; line-height: 1.45; color: var(--x-text-dim); }
.pl-context-note strong { color: var(--x-text); font-weight: 800; }

.pl-form {
  display: flex; flex-direction: column; gap: 8px;
  background: rgba(0, 0, 0, 0.25); border-radius: 8px; padding: 10px 12px;
}
.pl-form-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-trend {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px;
}
.pl-trend-hot { background: rgba(239, 68, 68, 0.16); color: #f87171; }
.pl-trend-heatingup { background: rgba(34, 197, 94, 0.15); color: var(--x-pos); }
.pl-trend-steady { background: rgba(107, 114, 128, 0.18); color: #d1d5db; }
.pl-trend-cooling { background: rgba(234, 179, 8, 0.15); color: var(--x-warn); }
.pl-trend-cold { background: rgba(59, 130, 246, 0.15); color: #93c5fd; }
.pl-dist { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pl-dist-cell {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--x-surface); border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px; padding: 6px 4px;
}
.pl-dist-v { font-size: 15px; font-weight: 800; font-family: ui-monospace, monospace; color: var(--x-text); line-height: 1; }
.pl-dist-t { font-size: 8px; font-weight: 800; color: var(--x-text-dim2); letter-spacing: 0.07em; }
.pl-proj { font-size: 10.5px; font-weight: 600; line-height: 1.5; color: var(--x-text-dim); }

.pl-books { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-books-lbl { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; color: var(--x-text-dim2); }
.pl-book {
  font-size: 10.5px; font-weight: 700; font-family: ui-monospace, monospace; color: var(--x-text-dim);
  background: var(--x-surface); border: 1px solid var(--x-border); border-radius: 6px;
  padding: 3px 7px; display: inline-flex; align-items: center; gap: 4px;
}
.pl-book b { color: var(--x-text); font-weight: 800; }
.pl-book.is-best { border-color: rgba(34, 197, 94, 0.55); background: rgba(34, 197, 94, 0.08); }
.pl-book.is-best b { color: var(--x-pos); }

.pl-linehist {
  display: flex; align-items: center; gap: 12px;
  background: var(--x-surface); border: 1px solid var(--x-border);
  border-radius: 8px; padding: 8px 10px; flex-wrap: wrap;
}
.pl-lh-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pl-lh-head { font-size: 9px; font-weight: 800; letter-spacing: 0.05em; color: var(--x-text-dim2); }
.pl-lh-move { font-size: 11.5px; font-weight: 700; font-family: ui-monospace, monospace; }
.pl-lh-sub { font-size: 9px; color: var(--x-text-dim2); font-weight: 600; }

/* ── Splits / pitch matchup (lazy cards) ───────────────────────── */
.pl-splits, .pl-pm { display: flex; flex-direction: column; gap: 8px; }
.pl-splits-head, .pl-pm-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-split-row {
  display: flex; align-items: center; gap: 10px;
  background: rgba(0, 0, 0, 0.25); border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px; padding: 8px 10px;
}
.pl-split-row.is-today { border-color: rgba(61, 220, 176, 0.45); background: rgba(29, 191, 138, 0.06); }
.pl-split-tag { font-size: 10.5px; font-weight: 800; letter-spacing: 0.03em; min-width: 50px; color: #d1d5db; }
.pl-split-stats { display: flex; gap: 10px; flex-wrap: wrap; font-family: ui-monospace, monospace; font-size: 11px; }
.pl-split-stat { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.pl-split-v { font-weight: 800; color: var(--x-text); line-height: 1; }
.pl-split-t { font-size: 7.5px; font-weight: 800; color: var(--x-text-dim2); letter-spacing: 0.05em; }
.pl-today-chip {
  font-size: 8.5px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 6px; border-radius: 999px;
  background: rgba(29, 191, 138, 0.18); color: var(--x-accent-2); margin-left: auto;
}
.pl-pm-verdict {
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em; padding: 2px 8px;
  border-radius: 999px; margin-left: auto;
}
.pl-pm-verdict.favorable { background: rgba(34, 197, 94, 0.15); color: var(--x-pos); }
.pl-pm-verdict.tough { background: rgba(239, 68, 68, 0.16); color: var(--x-neg); }
.pl-pm-verdict.neutral { background: rgba(107, 114, 128, 0.18); color: #d1d5db; }
.pl-pm-row {
  display: grid; grid-template-columns: 1.4fr 0.7fr 1fr 0.7fr; gap: 6px; align-items: center;
  background: rgba(0, 0, 0, 0.22); border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 8px; padding: 5px 9px;
}
.pl-pm-pitch { font-size: 11px; font-weight: 700; color: #e5e7eb; }
.pl-pm-velo { font-size: 8.5px; color: var(--x-text-dim2); font-weight: 600; }
.pl-pm-usage { font-size: 10.5px; font-weight: 800; font-family: ui-monospace, monospace; color: #2DD4A8; text-align: right; }
.pl-pm-slash { font-size: 10.5px; font-family: ui-monospace, monospace; text-align: center; font-weight: 700; }
.pl-pm-k { font-size: 10px; font-family: ui-monospace, monospace; color: var(--x-text-dim); text-align: right; }

/* ── Game log table ─────────────────────────────────────────────── */
.pl-table { width: 100%; border-collapse: collapse; }
.pl-table th {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.05em; color: var(--x-text-dim2);
  padding: 7px 10px; border-bottom: 1px solid var(--x-border); white-space: nowrap;
  position: sticky; top: 0; background: var(--x-surface);
}
.pl-table td {
  font-size: 11.5px; font-family: ui-monospace, monospace; padding: 5px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04); white-space: nowrap;
}
.pl-table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.pl-empty {
  color: var(--x-text-dim); font-size: 12px; font-style: italic; text-align: center;
  background: var(--x-surface); border: 1px dashed var(--x-border); border-radius: 10px; padding: 16px;
}
.pl-empty--inline {
  font-style: normal; text-align: left; padding: 10px 12px; margin-bottom: 4px;
}
.pl-skeleton { color: var(--x-text-dim2); font-size: 12px; font-style: italic; padding: 8px 0; }
.pp-slate-loading {
  color: var(--x-text-dim);
  font-size: 13px;
  font-weight: 600;
  padding: 24px 8px;
  text-align: center;
}
.pp-slate-retry {
  margin-left: 8px;
  color: var(--x-accent-2);
  text-decoration: underline;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
}

@media (max-width: 520px) {
  .pl-chart-hd { flex-direction: column; align-items: stretch; }
  .pl-track-btn { width: 100%; text-align: center; }
  .pl-rate-pct { font-size: 14px; }
  .pl-chart { height: 210px; }
}