/* ============================================================
   PARLAY GENIE — STYLESHEET
   ============================================================ */

/* === EDIT: Color Palette — Onyx & Gold theme (2026-06-09) === */
:root {
  /* Backgrounds — warm onyx, no blue cast */
  --color-bg: #0b0a0a;
  --color-bg-2: #060505;
  --color-surface: #1a1815;
  --color-surface-2: #211f1b;
  --color-surface-3: #2a2722;
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);

  /* Text — faintly warm white */
  --color-text: #f1ece1;
  --color-text-muted: #9c9384;
  --color-text-dim: #6b6456;

  /* Primary accent: gold */
  --color-accent: #E0AA3E;
  --color-accent-hover: #efc158;
  --color-accent-dim: rgba(224, 170, 62, 0.12);

  /* Text on gold fills (replaces old #002921 / #04342c) */
  --color-on-accent: #1a1206;

  /* Gold (brand) — same as accent; kept as alias for wordmark/tier uses */
  --color-gold: #E0AA3E;
  --color-gold-dim: rgba(224, 170, 62, 0.14);

  /* Semantic — warmed slightly, meanings unchanged */
  --color-green: #28c458;
  --color-green-dim: rgba(40, 196, 88, 0.14);

  /* Apple tier label — minimal warm shift */
  --color-apple: #ADE49C;
  --color-apple-dim: rgba(173, 228, 156, 0.14);

  /* Yellow — already warm, left as-is */
  --color-yellow: #eab308;
  --color-yellow-dim: rgba(234, 179, 8, 0.14);

  /* Red — warmed a hair */
  --color-red: #e84040;
  --color-red-dim: rgba(232, 64, 64, 0.14);

  /* Blue — desaturated steel; still clearly blue, fits warm palette */
  --color-blue: #5b8cb5;
  --color-blue-dim: rgba(91, 140, 181, 0.14);

  /* Purple — kept as distinct projection/devig marker */
  --color-purple: #a855f7;
  --color-purple-dim: rgba(168, 85, 247, 0.14);

  --font-body: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Geist Mono', 'Fira Code', ui-monospace, monospace;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --transition: 160ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 320ms cubic-bezier(0.16, 1, 0.3, 1);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 0 32px rgba(224, 170, 62, 0.18);

  --navbar-h: 64px;
  --container-max: 1280px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5 { margin: 0; line-height: 1.15; font-weight: 700; letter-spacing: -0.02em; }
p { margin: 0; }
a { color: var(--color-accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-accent-hover); }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }
input, select, textarea { font-family: inherit; color: inherit; }
[hidden] { display: none !important; }

/* All odds and numeric cells use tabular figures (project rule) */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-text-muted); }
.text-gold { color: var(--color-gold); }
.text-green { color: var(--color-green); }
.text-apple { color: var(--color-apple); }   /* New tier label color text */
.text-yellow { color: var(--color-yellow); }
.text-red { color: var(--color-red); }

.container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  transition: all var(--transition);
  white-space: nowrap;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.btn-sm { padding: 8px 14px; font-size: 14px; }
.btn-lg { padding: 14px 26px; font-size: 16px; }
.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: 0 4px 16px rgba(224, 170, 62, 0.25);
}
.btn-primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(224, 170, 62, 0.4); }
.btn-ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.btn-ghost:hover { background: var(--color-surface-2); border-color: var(--color-border-strong); color: var(--color-text); }
.btn-danger {
  background: var(--color-red);
  color: white;
}
.btn-danger:hover { background: #dc2626; color: white; }
.btn-block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }

.icon-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  transition: all var(--transition);
  position: relative;
}
.icon-btn:hover { background: var(--color-surface-2); color: var(--color-text); border-color: var(--color-border-strong); }
.icon-btn .caret { font-size: 9px; }
.icon-btn .active-dot {
  position: absolute;
  top: 5px; right: 5px;
  width: 6px; height: 6px;
  background: var(--color-blue);
  border-radius: 50%;
}

.link-btn {
  background: transparent;
  border: 0;
  color: var(--color-accent);
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.link-btn:hover { color: var(--color-accent-hover); text-decoration: underline; }

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(11, 10, 10, 0.85);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--color-border);
  height: var(--navbar-h);
}
.navbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 100%;
  gap: 24px;
}
.navbar-brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--color-accent);
  font-weight: 800; font-size: 19px; letter-spacing: -0.02em;
}
.navbar-brand-text { color: var(--color-text); }
.navbar-brand:hover { color: var(--color-accent-hover); }
.logo { width: 28px; height: 28px; }

.navbar-nav {
  display: flex; align-items: center; gap: 4px;
  flex: 1; justify-content: center;
}
.navbar-nav a, .navbar-dropdown-trigger {
  color: var(--color-text-muted);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-weight: 500; font-size: 14px;
  transition: all var(--transition);
  background: transparent;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.navbar-nav a:hover, .navbar-dropdown-trigger:hover { color: var(--color-text); background: var(--color-surface); }
.navbar-nav a.active { color: var(--color-accent); background: var(--color-accent-dim); }
.navbar-dropdown { position: relative; }
.navbar-dropdown.is-active .navbar-dropdown-trigger { color: var(--color-accent); background: var(--color-accent-dim); }
.caret-down { font-size: 10px; opacity: 0.7; }
.navbar-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 220px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 6px;
  box-shadow: var(--shadow-lg);
  z-index: 90;
}
.navbar-dropdown[aria-expanded="true"] .navbar-dropdown-menu,
.navbar-dropdown.open .navbar-dropdown-menu { display: block; }
.navbar-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  color: var(--color-text);
}
.navbar-dropdown-menu a:hover { background: var(--color-surface-2); color: var(--color-accent); }

.navbar-cta { display: flex; align-items: center; gap: 12px; }

.account-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  transition: all var(--transition);
}
.account-btn:hover { background: var(--color-surface-2); border-color: var(--color-accent); color: var(--color-accent); }
.account-btn .tier-badge-mini {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--color-accent-dim);
  color: var(--color-accent);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.navbar-toggle {
  display: none;
  width: 38px; height: 38px;
  flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.navbar-toggle span { display: block; width: 18px; height: 2px; background: var(--color-text); border-radius: 2px; transition: all var(--transition); }
.navbar-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navbar-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navbar-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ============================================================
   PAGES (hash router)
   ============================================================ */
.page { animation: fadeIn 320ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

.page-header {
  text-align: center;
  padding: 56px 0 32px;
}
.page-title {
  font-size: clamp(32px, 5vw, 48px);
  margin-bottom: 12px;
}
.page-sub { color: var(--color-text-muted); font-size: 17px; max-width: 600px; margin: 0 auto; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 80px 0 64px;
  overflow: hidden;
  border-bottom: 1px solid var(--color-border);
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(224, 170, 62, 0.14), transparent 70%),
    radial-gradient(ellipse 60% 40% at 100% 100%, rgba(168, 85, 247, 0.10), transparent 70%),
    linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-2) 100%);
  z-index: 0;
}
.hero-inner { position: relative; z-index: 1; text-align: center; max-width: 820px; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 13px; color: var(--color-text-muted);
  margin-bottom: 24px;
}
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 0 rgba(224, 170, 62, 0.7);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(224, 170, 62, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(224, 170, 62, 0); }
  100% { box-shadow: 0 0 0 0 rgba(224, 170, 62, 0); }
}

.hero-title { font-size: clamp(40px, 7vw, 72px); margin-bottom: 20px; }
.hero-subtitle { font-size: clamp(17px, 2vw, 20px); color: var(--color-text-muted); max-width: 620px; margin: 0 auto 36px; }
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 56px; }

.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  max-width: 640px; margin: 0 auto;
}
.hero-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.hero-stat strong { font-size: 22px; color: var(--color-accent); }
.hero-stat span { font-size: 12px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* ============================================================
   PREVIEW SECTION (blurred table on landing)
   ============================================================ */
.preview-section { padding: 64px 0 32px; }
.section-head { text-align: center; margin-bottom: 32px; }
.section-title { font-size: clamp(28px, 4vw, 38px); margin-bottom: 8px; }
.section-sub { color: var(--color-text-muted); }

.preview-wrap {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  max-height: 520px;
}
.preview-table-container { position: relative; }
.preview-table-container .data-table { margin: 0; }

.preview-table-container .data-row[data-preview-locked="true"] {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

.preview-lock {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: 130px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(11, 10, 10, 0) 0%, rgba(11, 10, 10, 0.65) 30%, rgba(11, 10, 10, 0.9) 100%);
  cursor: pointer;
  transition: background var(--transition);
}
.preview-lock:hover { background: linear-gradient(180deg, rgba(11, 10, 10, 0.1) 0%, rgba(11, 10, 10, 0.75) 30%, rgba(11, 10, 10, 0.95) 100%); }
.preview-lock:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -4px; }
.preview-lock-card {
  text-align: center;
  padding: 28px 36px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-width: 360px;
}
.preview-lock-icon { font-size: 36px; margin-bottom: 8px; }
.preview-lock-title { font-size: 19px; font-weight: 700; margin-bottom: 4px; }
.preview-lock-sub { font-size: 14px; color: var(--color-text-muted); margin-bottom: 16px; }
.preview-scroll-hint {
  text-align: center;
  margin-top: 20px;
  color: var(--color-text-muted);
  font-size: 14px;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ============================================================
   FEATURE BLOCKS (landing explainers)
   ============================================================ */
.feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 80px 0;
  border-bottom: 1px solid var(--color-border);
}
.feature-block:last-of-type { border-bottom: 0; }
.feature-block.reverse .feature-text { order: 2; }

.feature-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent);
  background: var(--color-accent-dim);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.feature-title { font-size: clamp(28px, 4vw, 42px); margin-bottom: 16px; }
.feature-text p { color: var(--color-text-muted); margin-bottom: 14px; font-size: 16px; }
.feature-text p:last-child { margin-bottom: 0; }

.bullet-list { list-style: none; padding: 0; margin: 16px 0 0; }
.bullet-list li {
  padding: 10px 0 10px 26px;
  position: relative;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.bullet-list li:last-child { border-bottom: 0; }
.bullet-list li::before {
  content: "→";
  position: absolute; left: 0; top: 10px;
  color: var(--color-accent);
  font-weight: 600;
}
.bullet-list strong { color: var(--color-text); }

/* Math card (Feature 1) */
.math-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-md);
}
.math-card-head { font-size: 14px; color: var(--color-text-muted); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--color-border); }
.math-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 8px 0;
  font-size: 14px;
}
.math-row span:first-child { color: var(--color-text); }
.math-divider { height: 1px; background: var(--color-border); margin: 8px 0; }
.math-final { font-weight: 600; }
.math-edge { font-weight: 700; font-size: 15px; }

/* Color grid (Feature 2) — Tasks 4, 5, 6 */
.color-grid { display: grid; gap: 12px; }
.color-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 18px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition);
}
.color-card:hover { transform: translateX(4px); border-color: var(--color-border-strong); }
.color-card h4 { margin-bottom: 2px; font-size: 17px; }
.color-card p { color: var(--color-text-muted); font-size: 14px; margin: 0; }
.color-card-gold { border-left: 3px solid var(--color-gold); }
.color-card-green { border-left: 3px solid var(--color-green); }
.color-card-apple { border-left: 3px solid var(--color-apple); }   /* New tier */
.color-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 16px;
  min-width: 84px;
}
.color-pill-gold { background: var(--color-gold-dim); color: var(--color-gold); }
.color-pill-green { background: var(--color-green-dim); color: var(--color-green); }
.color-pill-apple { background: var(--color-apple-dim); color: var(--color-apple); }   /* New tier */

/* How card (Feature 3) */
.how-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-md);
}
.how-card-top { display: flex; justify-content: space-between; align-items: start; margin-bottom: 16px; }
.how-name { font-size: 18px; font-weight: 700; }
.how-sub { font-size: 13px; color: var(--color-text-muted); margin-top: 2px; }
.how-pill { padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.how-pill-stat { background: rgba(59, 130, 246, 0.14); color: var(--color-blue); }
.how-card-body {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 14px;
}
.how-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.how-stat span { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.how-stat strong { font-size: 17px; }
.how-card-foot { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.how-book {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
}
.book-name { font-size: 10px; color: var(--color-text-muted); font-weight: 600; }
.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--color-red);
  border-radius: 50%;
  animation: pulse-red 1.6s infinite;
  margin-right: 3px;
}
@keyframes pulse-red {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Slip mockup (Feature 4) */
.slip-grid { display: grid; gap: 12px; margin-top: 20px; }
.slip-card { padding: 16px 20px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.slip-card h4 { margin-bottom: 6px; color: var(--color-accent); }
.slip-card p { color: var(--color-text-muted); font-size: 14px; margin: 0; }

.slip-mockup {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.slip-header {
  padding: 14px 20px;
  background: var(--color-accent-dim);
  color: var(--color-accent);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
}
.slip-leg {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--color-border);
  font-size: 14px;
}
.leg-pill {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border-radius: 4px;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.03em;
}
.slip-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-2);
  font-weight: 700;
}
.slip-footer span { font-size: 12px; color: var(--color-text-muted); letter-spacing: 0.05em; }
.slip-footer strong { color: var(--color-green); font-size: 18px; }

/* Tips grid (Feature 5) */
.tips-grid { display: grid; gap: 14px; }
.tip-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.tip-num {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-accent);
  opacity: 0.5;
}
.tip-card h4 { margin-bottom: 4px; }
.tip-card p { color: var(--color-text-muted); font-size: 14px; margin: 0; }

/* CTA Band */
.cta-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 64px 0 80px;
}
.cta-card {
  text-align: center;
  padding: 36px 28px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
}
.cta-card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.cta-card-icon { font-size: 36px; margin-bottom: 12px; }
.cta-card h3 { margin-bottom: 8px; }
.cta-card p { color: var(--color-text-muted); margin-bottom: 20px; }

/* ============================================================
   PRICING
   ============================================================ */
.billing-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  margin-top: 24px;
}
.billing-pill {
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: all var(--transition);
  display: inline-flex; align-items: center; gap: 8px;
}
.billing-pill.active {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.save-badge {
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  font-weight: 700;
}
.billing-pill:not(.active) .save-badge { background: var(--color-green-dim); color: var(--color-green); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: 1280px;
  margin: 32px auto 0;
}
.price-card {
  display: flex; flex-direction: column;
  padding: 28px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: all var(--transition);
  position: relative;
}
.price-card:hover { border-color: var(--color-border-strong); transform: translateY(-2px); }
.price-card.featured {
  border-color: var(--color-accent);
  background: linear-gradient(180deg, var(--color-accent-dim) 0%, var(--color-surface) 30%);
  box-shadow: var(--shadow-glow);
}
.price-card-badge {
  position: absolute;
  top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--color-accent);
  color: var(--color-on-accent);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.price-card-name { font-size: 19px; font-weight: 700; margin-bottom: 6px; }
.price-card-tagline { color: var(--color-text-muted); font-size: 13px; margin-bottom: 18px; min-height: 36px; }

.price-card-price { margin-bottom: 20px; }
.price-amount { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; }
.price-period { color: var(--color-text-muted); font-size: 14px; }
.price-strike { color: var(--color-text-dim); text-decoration: line-through; font-size: 16px; margin-right: 8px; font-family: var(--font-mono); }

.price-card-features { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.price-card-features li {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.price-card-features li:last-child { border-bottom: 0; }
.price-card-features li.feat-no { color: var(--color-text-dim); }
.feat-check {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--color-accent-dim);
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 700;
  margin-top: 1px;
}
.feat-x {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  color: var(--color-text-dim);
  font-size: 11px;
  margin-top: 1px;
}
.price-card-cta { margin-top: auto; }

.pricing-foot { text-align: center; margin-top: 40px; padding-bottom: 80px; color: var(--color-text-muted); font-size: 14px; }

/* ============================================================
   CALCULATORS
   ============================================================ */
.calc-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin: 16px auto 40px;
  max-width: 1100px;
  overflow-x: auto;
}
.calc-tab {
  padding: 9px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: all var(--transition);
}
.calc-tab:hover { background: var(--color-surface-2); color: var(--color-text); }
.calc-tab.active {
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
}

.calc-content { max-width: 720px; margin: 0 auto; padding-bottom: 80px; }

/* === EDIT: Split-vertical calcs get a much wider container ===
   The default 720px chokes the side-by-side layout into ~330px columns.
   Page-calculators detects when active calc is a split type and widens. */
.calc-content:has(.calc-card.calc-split-vertical) { max-width: 1100px; }

/* Base calc card */
.calc-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-md);
  margin: 0 auto;
  transition: max-width var(--transition);
}

/* === Task 3: Calculator Size Variants ===
   Scale down the entire card by reducing its max-width.
   The card stays centered; controls and outputs reflow naturally.
   Sizes:
     calc-size-50 → 50% of default (Arbitrage, Parlay, No-Vig)
     calc-size-20 → 20% of default (Kelly Criterion) — extreme reduction
*/
.calc-card.calc-size-50 { max-width: 360px; padding: 22px; }
.calc-card.calc-size-50 .calc-title { font-size: 18px; }
.calc-card.calc-size-50 .calc-desc { font-size: 12px; }
.calc-card.calc-size-50 .output-card-value { font-size: 17px; }
.calc-card.calc-size-50 .field input,
.calc-card.calc-size-50 .field select { padding: 8px 10px; font-size: 13px; }
.calc-card.calc-size-50 .field label { font-size: 12px; }
.calc-card.calc-size-50 .output-grid { gap: 8px; }
.calc-card.calc-size-50 .output-card { padding: 10px 12px; }
.calc-card.calc-size-50 .output-card-label { font-size: 10px; }
.calc-card.calc-size-50 .field-row,
.calc-card.calc-size-50 .field-row-3,
.calc-card.calc-size-50 .field-row-4 { gap: 8px; }
.calc-card.calc-size-50 .leg-card { padding: 12px; }

.calc-card.calc-size-20 { max-width: 220px; padding: 14px; }
.calc-card.calc-size-20 .calc-title { font-size: 14px; }
.calc-card.calc-size-20 .calc-desc { font-size: 10.5px; line-height: 1.3; }
.calc-card.calc-size-20 .calc-head { margin-bottom: 14px; }
.calc-card.calc-size-20 .calc-controls { padding-bottom: 10px; margin-bottom: 10px; gap: 6px; }
.calc-card.calc-size-20 .field { margin-bottom: 8px; }
.calc-card.calc-size-20 .field label { font-size: 10.5px; }
.calc-card.calc-size-20 .field input,
.calc-card.calc-size-20 .field select { padding: 6px 8px; font-size: 11.5px; }
.calc-card.calc-size-20 .field-row,
.calc-card.calc-size-20 .field-row-3,
.calc-card.calc-size-20 .field-row-4 { grid-template-columns: 1fr; gap: 6px; }
.calc-card.calc-size-20 .output-grid { grid-template-columns: 1fr; gap: 6px; }
.calc-card.calc-size-20 .output-card { padding: 8px 10px; }
.calc-card.calc-size-20 .output-card-label { font-size: 9px; }
.calc-card.calc-size-20 .output-card-value { font-size: 13px; }
.calc-card.calc-size-20 .calc-toggle button { padding: 4px 8px; font-size: 10px; }
.calc-card.calc-size-20 .calc-output { padding-top: 10px; margin-top: 12px; }
.calc-card.calc-size-20 .calc-output-title { font-size: 11px; margin-bottom: 8px; }

.calc-head { margin-bottom: 24px; }
.calc-title { font-size: 24px; margin-bottom: 6px; }
.calc-desc { color: var(--color-text-muted); font-size: 14px; }

.calc-controls {
  display: flex; flex-wrap: wrap; gap: 12px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--color-border);
}
.calc-toggle {
  display: inline-flex;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.calc-toggle button {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  border-radius: 5px;
  transition: all var(--transition);
}
.calc-toggle button.active { background: var(--color-accent); color: var(--color-on-accent); }

/* Reusable inline switch (used by 2-Man / Live / Round Stakes / etc) */
.calc-switch, .inline-switch {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--color-text-muted);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
}
.switch-track {
  position: relative;
  display: inline-block;
  width: 38px; height: 22px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: background var(--transition);
  flex-shrink: 0;
}
.switch-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--color-text);
  border-radius: 50%;
  transition: transform var(--transition);
}
.calc-switch input, .inline-switch input { display: none; }
.calc-switch input:checked + .switch-track,
.inline-switch input:checked + .switch-track { background: var(--color-accent); border-color: var(--color-accent); }
.calc-switch input:checked + .switch-track .switch-thumb,
.inline-switch input:checked + .switch-track .switch-thumb { transform: translateX(16px); background: var(--color-on-accent); }
.inline-switch .switch-label { color: var(--color-text-muted); font-weight: 500; font-size: 13px; }
.inline-switch input:checked ~ .switch-label { color: var(--color-accent); font-weight: 600; }

/* === EDIT (Logan): toggle stack — two rows of two switches. Top row
   (Confirmed Only / Pinnacle Only) is centered above the bottom row
   (Live Betting / Alt Lines). The switches shrink inside the stack so two
   rows fit the sticky filter bar height without pushing the center sliders. */
.switch-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.switch-stack-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.switch-stack .inline-switch { gap: 7px; font-size: 12px; }
.switch-stack .inline-switch .switch-label { font-size: 12px; }
.switch-stack .switch-track { width: 32px; height: 18px; }
.switch-stack .switch-thumb { width: 13px; height: 13px; top: 2px; left: 2px; }
.switch-stack .inline-switch input:checked + .switch-track .switch-thumb { transform: translateX(15px); }

.field {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 16px;
}
.field label { font-size: 13px; color: var(--color-text-muted); font-weight: 500; }
.field input, .field select {
  padding: 11px 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 15px;
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
}
.field input.num-input, .field input[type="number"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.field input:focus, .field select:focus { border-color: var(--color-accent); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.field-row-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

.input-with-prefix {
  position: relative;
  display: flex; align-items: center;
}
.input-with-prefix .prefix {
  position: absolute;
  left: 12px;
  color: var(--color-text-muted);
  font-size: 14px;
  pointer-events: none;
  font-family: var(--font-mono);
}
.input-with-prefix input {
  padding-left: 24px !important;
  width: 100%;
}

.leg-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
  position: relative;
}
.leg-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.leg-title { font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
.leg-remove {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-red);
  font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.leg-remove:hover { background: var(--color-red); color: white; }
.leg-add {
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  background: var(--color-surface-2);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  color: var(--color-accent);
  font-weight: 600;
  font-size: 14px;
  transition: all var(--transition);
}
.leg-add:hover { background: var(--color-accent-dim); border-color: var(--color-accent); }

.calc-output {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}
.calc-output-title { font-size: 14px; color: var(--color-text-muted); margin-bottom: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.output-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.output-card {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
}
.output-card-label { font-size: 11px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.output-card-value { font-size: 22px; font-weight: 700; }
.output-card.positive .output-card-value { color: var(--color-green); }
.output-card.negative .output-card-value { color: var(--color-red); }

.tip-box {
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--color-gold-dim);
  border-left: 3px solid var(--color-gold);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-text);
}
.tip-box strong { color: var(--color-gold); }

/* Outcome analysis (arbitrage) */
.outcome-block {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
}
.outcome-head { font-size: 14px; font-weight: 600; margin-bottom: 10px; color: var(--color-text-muted); }
.outcome-rows { display: flex; flex-direction: column; gap: 6px; }
.outcome-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.outcome-row.win { background: var(--color-green-dim); }
.outcome-row.lose { background: var(--color-red-dim); }
.outcome-icon {
  width: 24px; height: 24px;
  border-radius: 4px;
  background: var(--color-surface-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  color: var(--color-text);
}
.outcome-team { font-size: 14px; }
.outcome-amount { font-weight: 700; }
.outcome-row.win .outcome-amount { color: var(--color-green); }
.outcome-row.lose .outcome-amount { color: var(--color-red); }

/* ============================================================
   OPTIMIZER PAGE
   ============================================================ */
.page-optimizer, .page-arbitrage { padding: 0 0 80px; }

/* Shared sticky wrapper for the genie page's two control bars. Pins the
   whole unit under the navbar so the bars never overlap or gap. */
.opt-sticky {
  position: sticky;
  top: var(--navbar-h);
  z-index: 50;
}
.optimizer-bar {
  position: sticky;
  top: var(--navbar-h);
  z-index: 50;
  /* Faint show-through: same dim level as the rest of the page so the
     background video reads through the bars, matched to the content area. */
  background: rgba(11, 10, 10, 0.32);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-border);
}
/* Inside the shared wrapper the bars are static — the wrapper does the
   sticking. (Standalone .optimizer-bar on arb/screen pages stays sticky.) */
.opt-sticky > .optimizer-bar { position: static; top: auto; z-index: auto; }
.optimizer-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
  padding: 6px 24px 10px;
}
/* Left cluster GROWS to fill the row (never shrinks to min-content, so its
   controls always stay on one horizontal line at desktop). Right cluster is
   fixed-width and wraps to a second line only when there's truly no room. */
.optimizer-bar-left {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}
.optimizer-bar-right {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
.last-refreshed { font-size: 12px; color: var(--color-text-muted); font-family: var(--font-mono); white-space: nowrap; }

.tool-switch {
  display: inline-flex;
  padding: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.tool-switch-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: all var(--transition);
}
.tool-switch-btn.active {
  background: var(--color-accent);
  color: var(--color-on-accent);
}
.tool-switch-icon { font-size: 16px; }
.count-badge {
  display: inline-block;
  padding: 1px 8px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
  font-size: 11px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  margin-left: 4px;
}
.tool-switch-btn:not(.active) .count-badge { background: var(--color-surface-2); color: var(--color-text-muted); }

.refresh-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  transition: all var(--transition);
}
.refresh-btn:hover { background: var(--color-surface-2); border-color: var(--color-accent); color: var(--color-accent); }
.refresh-btn.spinning svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Filter bar (Bar 2) — static inside .opt-sticky; the wrapper handles pinning. */
.filter-bar {
  position: static;
  z-index: auto;
  background: rgba(11, 10, 10, 0.32);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-border);
}
.filter-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  padding: 14px 24px;
}
/* Left: tool switch + PP/UD + Live Betting (always one horizontal row) */
.filter-bar-left {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
/* Center: GROWS to fill the middle; its contents are centered. Holds the
   stacked stat sliders on top and the zoom control beneath them. */
.filter-bar-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 220px;
}
/* Stat sliders sit side-by-side in one row, centered above the zoom slider. */
.filter-slider-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}
/* Right: Search Player input with the Reset button sitting on the label row
   (label on the left, Reset on the right), input full-width beneath. */
.filter-bar-right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  flex: 0 0 auto;
}
.filter-bar-right .filter-group-grow { flex: 0 0 auto; min-width: 0; }
.filter-bar-right .filter-group-grow input[type="text"] { min-width: 220px; }
.filter-search-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.filter-search-head .filter-reset { padding: 4px 10px; font-size: 12px; }
.filter-group { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.filter-group-grow { flex: 1; min-width: 180px; }
.filter-group label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.filter-group select,
.filter-group input[type="text"] {
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 14px;
  outline: none;
  min-width: 130px;
  transition: border-color var(--transition);
}
.filter-group select:focus, .filter-group input:focus { border-color: var(--color-accent); }
.filter-group input[type="range"] {
  width: 130px;
  accent-color: var(--color-accent);
}

.ou-toggle {
  display: inline-flex;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px;
}
.ou-btn {
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  border-radius: 4px;
  transition: all var(--transition);
}
.ou-btn.active { background: var(--color-accent); color: var(--color-on-accent); }

.multi-select { position: relative; }
.multi-select-trigger {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
  min-width: 150px;
  transition: border-color var(--transition);
}
.multi-select-trigger:hover { border-color: var(--color-accent); }
.caret { font-size: 10px; color: var(--color-text-muted); }
.multi-select-menu {
  position: absolute;
  top: calc(100% + 4px); left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  padding: 6px;
  min-width: 200px;
  z-index: 60;
  box-shadow: var(--shadow-lg);
  max-height: 280px;
  overflow-y: auto;
}
.multi-select-option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--transition);
}
.multi-select-option:hover { background: var(--color-surface-2); }
.multi-select-option input[type="checkbox"] { accent-color: var(--color-accent); width: 14px; height: 14px; }

/* ============================================================
   DATA TABLE (Parlay Genie + Odds Optimizer)
   ============================================================ */
.optimizer-content { padding-top: 24px; }
.optimizer-meta { font-size: 13px; color: var(--color-text-muted); margin-bottom: 12px; padding: 0 4px; text-align: center; }
.optimizer-meta strong { color: var(--color-text); }

/* === EDIT (Logan): table zoom scroll container =========================
   Non-zoomed wrapper around the framed card. The card itself is scaled via
   CSS `zoom`; this wrapper stays at container width and provides horizontal
   scrolling when the enlarged card is wider than the viewport (body has
   overflow-x:hidden, so page-level scroll isn't available). */
.table-zoomscroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;          /* keeps the h-scrollbar clear of the card edge */
  scrollbar-width: thin;
}
.table-zoomscroll::-webkit-scrollbar { height: 10px; }
.table-zoomscroll::-webkit-scrollbar-track { background: transparent; }
.table-zoomscroll::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 6px; }
.table-wrap {
  background: rgba(26, 24, 21, 0.8);   /* --color-surface (#1a1815) @ 80% — warm onyx */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* === EDIT (Logan): table zoom = transform + sizer ===
   CSS `zoom` was clipping right-hand columns above 100% (the framed card stayed
   pinned at one width while its contents scaled past it). Instead the card
   (.table-wrap) is scaled with `transform: scale()` from its top-left, and a
   wrapper (.table-zoomsizer) reserves the *scaled* footprint via inline
   width/height set in JS. That makes .table-zoomscroll scroll horizontally
   above 100% (no columns dropped) and centers the shrunken card below 100%.
   overflow:hidden on the sizer clips only the card's unscaled layout overflow
   (which is visually hidden by the transform), preventing a phantom scrollbar
   at <100%. */
.table-zoomsizer {
  margin-inline: auto;   /* centers the card when it is narrower than the scroller (<100%) */
  overflow: hidden;
}
.table-wrap.zoom-scaled {
  transform-origin: top left;
  margin-inline: 0;      /* centering now lives on .table-zoomsizer */
  max-width: none;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table thead th {
  text-align: left;
  padding: 14px 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: rgba(33, 31, 27, 0.8);   /* --color-surface-2 (#211f1b) @ 80% — warm onyx */
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  white-space: nowrap;
}
.data-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
}
.data-table tbody tr:last-child { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--color-surface-2); }
.data-table td {
  padding: 14px 12px;
  vertical-align: middle;
}

.player-cell { min-width: 200px; }
/* === EDIT (MLB lineup indicator): name + confirmed-starter dot share one
   flex row so the dot hugs the name (small gap, no large trailing space) and
   stays vertically centered in the row. */
.player-name-row { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; min-width: 0; }
.player-name { font-weight: 600; font-size: 14px; color: var(--color-text); }
.lineup-ind { display: inline-flex; align-items: center; gap: 3px; line-height: 1; flex: none; }
.lineup-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--lu-color, var(--color-text-dim));
}
.lineup-slot {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; line-height: 1;
  color: var(--lu-color, var(--color-text-muted)); font-variant-numeric: tabular-nums;
}
.lineup-ind--confirmed { --lu-color: var(--color-green);    --lu-rgb: 34, 197, 94; }
.lineup-ind--out       { --lu-color: var(--color-red);      --lu-rgb: 239, 68, 68; }
.lineup-ind--pending   { --lu-color: var(--color-yellow);   --lu-rgb: 234, 179, 8; }
.lineup-ind--gray      { --lu-color: var(--color-text-dim); --lu-rgb: 90, 101, 125; }
/* Soft pulsing halo on the three live states; gray (no data) stays static. */
.lineup-ind:not(.lineup-ind--gray) .lineup-dot { animation: lineupPulse 1.6s ease-out infinite; }
@keyframes lineupPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--lu-rgb), 0.55); }
  70%  { box-shadow: 0 0 0 5px rgba(var(--lu-rgb), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--lu-rgb), 0); }
}
@media (prefers-reduced-motion: reduce) { .lineup-dot { animation: none !important; } }
/* LIVE badge relocated to the Player column header. */
.th-live {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 8px;
  vertical-align: middle; color: var(--color-red);
  font-weight: 700; font-size: 10px; letter-spacing: 0.06em;
}
.th-live .live-dot { margin-right: 0; }
.player-meta { font-size: 11px; color: var(--color-text-muted); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sport-badge {
  padding: 2px 6px;
  background: var(--color-surface-3);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.stat-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.stat-pill-points { background: rgba(59, 130, 246, 0.14); color: var(--color-blue); }
.stat-pill-rebounds { background: rgba(168, 85, 247, 0.14); color: var(--color-purple); }
.stat-pill-assists { background: var(--color-accent-dim); color: var(--color-accent); }
.stat-pill-receptions { background: rgba(234, 179, 8, 0.14); color: var(--color-yellow); }
.stat-pill-strikeouts { background: rgba(239, 68, 68, 0.14); color: var(--color-red); }
.stat-pill-default { background: var(--color-surface-3); color: var(--color-text-muted); }

/* === EDIT: Unified Stat Tag (Parlay Genie + Goblin Mode tables) ===
   Single visual treatment so every stat looks identical in size/font/color.
   Replaces the multi-colored .stat-pill-* variants on the data table. */
.stat-tag {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  white-space: nowrap;
  min-width: 38px;
  text-align: center;
  cursor: help;
}

.ou-cell { font-weight: 700; }
.ou-cell.over { color: var(--color-green); }
.ou-cell.under { color: var(--color-red); }

.line-cell { font-weight: 600; font-size: 14px; }

/* Edge badges — Task 4 (apple), Task 5 (richer gold) */
.edge-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 15px;
  min-width: 70px;
}
.edge-gold { background: var(--color-gold-dim); color: var(--color-gold); border: 1px solid rgba(224, 170, 62, 0.3); }
.edge-green { background: var(--color-green-dim); color: var(--color-green); border: 1px solid rgba(34, 197, 94, 0.3); }
.edge-apple { background: var(--color-apple-dim); color: var(--color-apple); border: 1px solid rgba(171, 228, 160, 0.3); }

.consensus-cell { color: var(--color-text-muted); }

.book-cell {
  font-size: 12px;
  line-height: 1.5;
  min-width: 78px;
}
.book-cell .bk-row { display: flex; justify-content: space-between; gap: 6px; }
.book-cell .bk-row span:first-child { color: var(--color-text-muted); font-weight: 600; font-size: 10px; }
.book-cell .bk-row span:last-child { font-weight: 600; }
.book-cell .bk-line { color: var(--color-text-muted); font-size: 10px; margin-top: 2px; padding-top: 2px; border-top: 1px solid var(--color-border); }
/* === EDIT: Light-yellow highlight for mismatched line values ===
   When a book quotes a different line than the row's primary PP line,
   the entire cell gets a subtle yellow bg and the line value gets extra emphasis. */
.book-cell.book-cell-mismatch-yellow {
  background: rgba(255, 214, 0, 0.14);
  border-radius: 4px;
}
.book-cell .bk-line-mismatch-yellow {
  background: rgba(255, 214, 0, 0.22);
  border-radius: 3px;
  padding: 1px 4px;
  color: #ffd600;
  font-weight: 600;
}
/* === EDIT: Light-yellow LINE cell ===
   Applied when the row has any mismatched-line per-book cells. Signals
   "some books quote a different line — look at the yellow book cells." */
.data-table td.line-cell.line-cell-mismatch-yellow {
  background: rgba(255, 214, 0, 0.14);
  border-radius: 4px;
  color: #ffd600;
  font-weight: 700;
}
/* === EDIT (Logan): blue mismatch cells (alt line UNDER the standard line) ===
   Mirrors the yellow treatment (alt line OVER standard) but in blue. Color is
   chosen per book cell in renderOptimizerTable by the alt line's direction
   vs the row's standard line:  OVER -> yellow,  UNDER -> blue. */
.book-cell.book-cell-mismatch-blue {
  background: rgba(56, 139, 253, 0.14);
  border-radius: 4px;
}
.book-cell .bk-line-mismatch-blue {
  background: rgba(56, 139, 253, 0.24);
  border-radius: 3px;
  padding: 1px 4px;
  color: #6cb6ff;
  font-weight: 600;
}
/* === EDIT (Logan): neutral LINE-column square ===
   The Line cell only signals "this row has alternate book cells" — it carries
   no color now that per-cell color encodes direction. Weight only, no tint. */
.data-table td.line-cell.line-cell-mismatch-neutral {
  font-weight: 700;
}
/* Light-red consensus cell (only 1 book) */
.data-table td.consensus-cell.consensus-cell-thin {
  background: rgba(239, 68, 68, 0.10);
  border-left: 2px solid rgba(239, 68, 68, 0.4);
}
/* Green consensus cell — GOLD pick with Pinnacle + FanDuel (and Caesars, if
   priced) all favoring the pick's own side. Higher specificity than the base
   `.consensus-cell { color: muted }`, so the green text/weight wins. */
.data-table td.consensus-cell.consensus-cell-green {
  background: rgba(34, 197, 94, 0.16);
  border-left: 2px solid rgba(34, 197, 94, 0.7);
  color: #4ade80;
  font-weight: 700;
}
.book-cell-empty { color: var(--color-text-dim); text-align: center; font-size: 11px; }
/* Light-red highlight for empty Pinnacle / FanDuel cells */
.book-cell-empty-flagged {
  color: var(--color-text-dim); text-align: center; font-size: 11px;
  background: rgba(239, 68, 68, 0.10);
}

.data-row[data-locked="true"] {
  position: relative;
}
.data-row[data-locked="true"] td {
  filter: blur(4px);
  user-select: none;
}
.data-row[data-locked="true"]::after {
  content: "🔒 Subscribe to unlock";
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(11, 10, 10, 0.5);
  color: var(--color-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  filter: none;
  z-index: 2;
}
.data-row[data-locked="true"]:hover::after { background: rgba(11, 10, 10, 0.7); }

.data-row[data-dimmed="true"] td { opacity: 0.4; }
.data-row[data-dimmed="true"]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  background: var(--color-surface-3);
  color: var(--color-text);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  top: 50%; right: 16px; transform: translateY(-50%);
  z-index: 3;
  border: 1px solid var(--color-border-strong);
}

/* Skeleton loader */
.skeleton-row {
  display: grid;
  grid-template-columns: 200px 90px 60px 60px 80px 90px repeat(7, 80px);
  gap: 12px;
  padding: 14px 12px;
  border-bottom: 1px solid var(--color-border);
}
.skeleton-bar {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--color-surface-2) 0%, var(--color-surface-3) 50%, var(--color-surface-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.empty-state {
  padding: 60px 24px;
  text-align: center;
  color: var(--color-text-muted);
}
.empty-state-icon { font-size: 40px; margin-bottom: 12px; opacity: 0.6; }
.empty-state h3 { color: var(--color-text); margin-bottom: 8px; }

.optimizer-disclaimer {
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
}

/* ============================================================
   ARBITRAGE TOOL (Tool 10)
   ============================================================ */
.arb-bar-right {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.arb-search {
  position: relative;
  display: flex; align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 10px;
}
.arb-search svg { color: var(--color-text-muted); margin-right: 6px; }
.arb-search input {
  background: transparent;
  border: 0;
  padding: 8px 0;
  font-size: 13px;
  color: var(--color-text);
  outline: none;
  width: 160px;
}
.arb-betsize {
  display: flex; align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0 10px;
}
.arb-betsize .prefix { color: var(--color-text-muted); font-size: 14px; margin-right: 2px; font-family: var(--font-mono); }
.arb-betsize input {
  background: transparent;
  border: 0;
  padding: 8px 0;
  font-size: 13px;
  color: var(--color-text);
  outline: none;
  width: 70px;
}

.arb-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  overflow-x: auto;
}

.arb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.arb-table thead th {
  text-align: left;
  padding: 12px 10px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
  white-space: nowrap;
}
.arb-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition);
  cursor: pointer;
}
.arb-table tbody tr:last-of-type { border-bottom: 0; }
.arb-table tbody tr:hover { background: var(--color-surface-2); }
.arb-table td {
  padding: 12px 10px;
  vertical-align: middle;
}

.arb-pct {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-green);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.arb-event-time { font-size: 11px; color: var(--color-text-muted); margin-bottom: 2px; font-family: var(--font-mono); }
.arb-event-name { font-weight: 700; font-size: 13px; color: var(--color-text); margin-bottom: 4px; }
.arb-event-tag { font-size: 11px; color: var(--color-text-muted); margin-bottom: 6px; }
.arb-event-actions { display: flex; gap: 6px; }
.arb-event-actions button {
  width: 22px; height: 22px;
  background: var(--color-surface-2);
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  transition: all var(--transition);
}
.arb-event-actions button:hover { color: var(--color-accent); background: var(--color-accent-dim); }

.arb-market-link {
  color: var(--color-accent);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.arb-market-link:hover { color: var(--color-accent-hover); text-decoration: underline; }

.arb-books-cell { min-width: 220px; }
.arb-book-row {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  font-size: 12.5px;
}
.arb-book-num {
  width: 18px; height: 18px;
  border-radius: 4px;
  background: var(--color-surface-3);
  color: var(--color-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
}
.arb-book-name { font-weight: 600; color: var(--color-text); }
.arb-book-odds {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  font-size: 13px;
}
/* === EDIT (Logan): sportsbook brand tiles used as column headers =========
   Uniform render height; width auto so each logo keeps its aspect ratio
   (the Fanatics tile is wider by design). Source is inlined WebP data URIs
   (BOOK_LOGO_IMG in app.js). Headers are hidden on the mobile stacked view,
   where cells fall back to their text data-labels. */
.data-table thead th.th-book-logo-cell {
  padding-top: 6px;
  padding-bottom: 6px;
}
img.th-book-logo {
  height: 36px;
  width: auto;
  max-width: 58px;
  display: block;
  margin: 0 auto;
  vertical-align: middle;
  /* border-radius matches the tile's baked corner so the clip only trims the
     dark canvas corners, not artwork. No CSS box-shadow: the corrected tiles
     carry their own border, so an added ring/glow doubles up and reads wrong. */
  border-radius: 7px;
}
/* PrizePicks / Underdog DFS header marks — sit a touch smaller than the
   bordered sportsbook tiles so the icon-only marks don't read oversized. */
img.hdr-dfs-logo {
  height: 28px;
  width: auto;
  display: block;
  margin: 0 auto;
}

.book-logo {
  width: 22px; height: 22px;
  border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: white;
}
.book-logo-dk { background: #53d337; color: black; }
.book-logo-fd { background: #1493ff; }
.book-logo-mgm { background: #b8923c; }
.book-logo-czr { background: #1a4d2e; }
.book-logo-pin { background: #c41e3a; }
.book-logo-flf { background: #0d6efd; }
.book-logo-fan { background: #1c2f48; }
.book-logo-hr { background: #e93535; }
.book-logo-poly { background: #2c79ff; }
.book-logo-rebet { background: #ff6b35; }
.book-logo-kaishi { background: #6c5ce7; }
/* DFS apps */
.book-logo-pp  { background: #5a31f4; }  /* PrizePicks purple */
.book-logo-ud  { background: #f55a00; }  /* Underdog orange */
.book-logo-slp { background: #00d68f; color: black; }  /* Sleeper green */
.book-logo-btr { background: #ff3366; }  /* Betr pink */
/* New sportsbooks */
.book-logo-365 { background: #134e2c; }  /* bet365 green */
.book-logo-brv { background: #006bb6; }  /* BetRivers blue */
/* Exchanges */
.book-logo-nvg { background: #2e2e2e; }  /* Novig gunmetal */
.book-logo-prx { background: #6e44ff; }  /* ProphetX violet */

.arb-1click-cell { min-width: 130px; }
.arb-1click-stack { display: flex; flex-direction: column; gap: 4px; }
.arb-1click-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: var(--color-surface-2);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  transition: all var(--transition);
  text-decoration: none;
}
.arb-1click-btn:hover { border-color: var(--color-accent); }
.arb-1click-btn.is-dual {
  background: var(--color-accent-dim);
  color: var(--color-accent);
  border-color: var(--color-accent);
  font-weight: 800;
}
.arb-1click-btn.is-dual:hover { background: var(--color-accent); color: var(--color-on-accent); }

.arb-betsize-stack { display: flex; flex-direction: column; gap: 2px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.arb-betsize-stack .num { font-weight: 700; font-size: 14px; }

.arb-profit-cell { display: flex; align-items: center; gap: 8px; }
.arb-profit-range {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.arb-profit-pin {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  background: transparent;
}
.arb-profit-pin:hover { color: var(--color-accent); }

.arb-overflow-cell { width: 32px; }

/* Expanded arbitrage row */
.arb-expand-row td {
  padding: 0;
  background: var(--color-bg-2);
}
.arb-expand {
  padding: 18px 20px;
  border-top: 2px solid var(--color-accent);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.arb-expand-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.arb-expand-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.arb-expand-table th, .arb-expand-table td {
  padding: 8px 10px;
  text-align: center;
  border: 1px solid var(--color-border);
}
.arb-expand-table th {
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.arb-expand-table td.best-odds {
  background: var(--color-green-dim);
  color: var(--color-green);
  font-weight: 700;
}
.arb-expand-promo {
  font-size: 9px;
  background: var(--color-green);
  color: white;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 4px;
  font-family: var(--font-mono);
}
.arb-expand-btn {
  display: inline-block;
  padding: 3px 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 4px;
  text-decoration: none;
  letter-spacing: 0.05em;
}
.arb-expand-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* ============================================================
   PROMO GENIE (Tool 11)
   ============================================================ */
.promo-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}
.promo-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.promo-panel-head {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 18px;
  position: relative;
}
.promo-eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.promo-h2 { font-size: 22px; font-weight: 700; margin-bottom: 16px; }
.hidden-bets-toggle {
  position: absolute;
  top: 0; right: 0;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: all var(--transition);
}
.hidden-bets-toggle:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.hidden-bets-toggle.is-active {
  color: var(--color-accent);
  background: var(--color-accent-dim);
  border-color: var(--color-accent);
}
.hidden-bets-toggle .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

.promo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.promo-card {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition);
  text-align: left;
}
.promo-card:hover {
  border-color: var(--color-accent);
  transform: translateY(-1px);
}
.promo-card .book-logo {
  width: 36px; height: 36px;
  font-size: 12px;
  border-radius: var(--radius-sm);
}
.promo-card-name { font-weight: 700; font-size: 13px; margin-bottom: 3px; }
.promo-card-desc { font-size: 11.5px; color: var(--color-text-muted); line-height: 1.4; }
.promo-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--color-green-dim);
  color: var(--color-green);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.promo-arrow { color: var(--color-text-muted); font-size: 18px; }

.promo-quickrow {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}
.promo-quick-icon {
  position: relative;
  width: 42px; height: 42px;
  border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: white;
  cursor: pointer;
  transition: transform var(--transition);
}
.promo-quick-icon:hover { transform: translateY(-2px); }
.promo-quick-icon .badge {
  position: absolute;
  bottom: -4px; right: -4px;
  padding: 1px 5px;
  background: var(--color-green);
  color: white;
  font-size: 9px;
  font-weight: 700;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--color-bg);
}

.promo-form {
  display: flex; flex-direction: column; gap: 12px;
}
.promo-type-select { width: 100%; }
.promo-type-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 8px 12px;
  background: var(--color-surface-2);
  border-radius: var(--radius-sm);
  margin-top: 4px;
  font-style: italic;
  min-height: 20px;
}

.promo-customize {
  background: var(--color-surface);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-glow);
}
.promo-customize-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  align-items: end;
}

.promo-results { margin-bottom: 60px; }

.promo-profit { color: var(--color-green); font-weight: 700; font-size: 14px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.promo-profit-pct { color: var(--color-accent); font-size: 11px; font-weight: 700; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.promo-prev-odds {
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-size: 10px;
  font-family: var(--font-mono);
  display: block;
  margin-top: 2px;
}

/* Expanded promo row */
.promo-expand-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
}
.promo-expand-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  position: relative;
}
.promo-expand-card h4 {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  padding-right: 28px;
}
.promo-expand-card .book-logo {
  position: absolute; top: 12px; right: 12px;
  width: 22px; height: 22px;
  font-size: 9px;
}
.promo-expand-selection {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}
.promo-expand-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  margin-bottom: 10px;
}
.promo-expand-table th {
  text-align: left;
  padding: 4px 8px;
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.promo-expand-table td {
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.promo-expand-cash {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-green);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}
.promo-expand-or {
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* ============================================================
   SPORTSBOOK SCREEN (Tool 12)
   ============================================================ */
.page-sportsbook { padding: 0 0 80px; }

.screen-bar {
  position: sticky;
  top: var(--navbar-h);
  z-index: 50;
  background: rgba(11, 10, 10, 0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.screen-filters-row {
  display: flex; align-items: end; gap: 14px;
  padding: 12px 0 8px;
  flex-wrap: wrap;
}
.screen-pill-group {
  display: inline-flex;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 3px;
}
.screen-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: all var(--transition);
}
.screen-pill.active { background: var(--color-accent); color: var(--color-on-accent); }

.screen-market-tabs {
  display: flex; gap: 6px;
  padding: 4px 0 12px;
  overflow-x: auto;
  align-items: center;
}
.screen-market-tab {
  padding: 7px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: all var(--transition);
  cursor: pointer;
}
.screen-market-tab:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.screen-market-tab.active {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}
.screen-settings { margin-left: auto; }

.screen-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
  overflow-y: hidden;
}

.screen-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.screen-table thead th {
  padding: 10px 8px;
  text-align: center;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  white-space: nowrap;
}
.screen-table th.left-header { text-align: left; padding-left: 18px; min-width: 220px; }
.screen-table td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.screen-table td.left-cell { text-align: left; padding-left: 18px; }

.screen-group {
  background: var(--color-surface-2);
}
.screen-group-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 0;
}
.screen-group-head .game-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--color-text-muted);
}
.screen-group-head .star-favorite {
  cursor: pointer;
  color: var(--color-text-muted);
  transition: color var(--transition);
}
.screen-group-head .star-favorite.is-favorite { color: var(--color-gold); }
.screen-group-head .star-favorite:hover { color: var(--color-gold); }

.screen-team-row .event-num {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-text-dim);
  margin-right: 8px;
}
.screen-team-row .team-name { font-weight: 700; font-size: 13px; }

.screen-odds-cell {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.screen-odds-cell.is-best { color: var(--color-green); background: var(--color-green-dim); }
.screen-odds-context {
  display: block;
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 500;
  margin-top: 2px;
}

.screen-book-header {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.screen-book-header .book-logo { width: 26px; height: 26px; font-size: 10px; }

/* ============================================================
   DEPOSIT OPTIMIZER (Tool 13)
   ============================================================ */
.deposit-split {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 28px;
  padding-bottom: 80px;
}

.deposit-left {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex; flex-direction: column;
  gap: 20px;
}

.deposit-donut-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 320px;
  margin: 0 auto;
}
.deposit-donut {
  width: 100%; height: 100%;
}
.deposit-donut-center {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none;
}
.deposit-donut-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}
.deposit-donut-value {
  font-size: 32px;
  font-weight: 800;
}

.deposit-section { display: flex; flex-direction: column; gap: 8px; }
.deposit-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.deposit-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.deposit-pill {
  padding: 6px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: all var(--transition);
}
.deposit-pill:hover { color: var(--color-text); border-color: var(--color-border-strong); }
.deposit-pill.active {
  color: var(--color-accent);
  background: var(--color-accent-dim);
  border-color: var(--color-accent);
}

.deposit-bankroll-row {
  display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: center;
}
.deposit-bankroll-row .input-with-prefix input {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 8px 8px 8px 22px;
  color: var(--color-text);
  font-size: 14px;
  width: 100%;
  outline: none;
}
.deposit-slider {
  accent-color: var(--color-blue);
  width: 100%;
}

.deposit-access {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}
.deposit-access strong { color: var(--color-text); }

.deposit-rank-list { display: flex; flex-direction: column; gap: 8px; }
.deposit-rank-row {
  display: grid;
  grid-template-columns: 22px 32px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.deposit-rank-row .rank-num {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-accent);
  font-family: var(--font-mono);
}
.deposit-rank-row .book-name { font-weight: 700; font-size: 13px; }
.deposit-rank-row .rank-meta { font-size: 11px; color: var(--color-text-muted); }
.deposit-rank-row .rank-amount {
  font-weight: 800;
  font-size: 16px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

.deposit-right {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
}
.deposit-right-heading {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}
.deposit-bonus-line {
  color: var(--color-text-muted);
  font-size: 14px;
  margin-bottom: 18px;
}

.deposit-book-list { display: flex; flex-direction: column; gap: 8px; }
.deposit-book-row {
  display: grid;
  grid-template-columns: 22px 36px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition);
}
.deposit-book-row:hover { border-color: var(--color-border-strong); }
.deposit-book-row .rank-num {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  text-align: center;
}
.deposit-book-row .book-logo { width: 36px; height: 36px; }
.deposit-book-name { font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.deposit-book-promo { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; line-height: 1.4; }
.deposit-action {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 10px;
  background: var(--color-surface-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;
  transition: all var(--transition);
  white-space: nowrap;
}
.deposit-action:hover { border-color: var(--color-accent); color: var(--color-accent); }

.deposit-divider {
  margin: 16px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ============================================================
   AUTH MODALS + ACCOUNT DASHBOARD + ADMIN PANEL
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: fadeIn 200ms ease;
}
.modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
  position: relative;
  animation: fadeIn 200ms ease;
}
.modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.modal-close:hover { color: var(--color-text); background: var(--color-surface-3); }
.modal-title { font-size: 24px; margin-bottom: 6px; }
.modal-sub { color: var(--color-text-muted); font-size: 14px; margin-bottom: 22px; }
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.modal-form .field { margin-bottom: 0; }
.modal-error {
  padding: 10px 14px;
  background: var(--color-red-dim);
  border-left: 3px solid var(--color-red);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--color-red);
}
.modal-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  text-align: center;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Account dashboard */
.account-dashboard {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding-bottom: 60px;
}
.account-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.account-card-title {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  margin-bottom: 12px;
}
.account-card-value {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}
.account-card-meta {
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}
.account-card .btn { width: 100%; }

.tier-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-left: 8px;
  vertical-align: middle;
}
.tier-badge-free { background: var(--color-surface-3); color: var(--color-text-muted); }
.tier-badge-specialist { background: var(--color-blue-dim); color: var(--color-blue); }
.tier-badge-savant { background: var(--color-accent-dim); color: var(--color-accent); }
.tier-badge-oracle { background: var(--color-purple-dim); color: var(--color-purple); }

/* Admin panel */
.admin-table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 60px;
}
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table thead th {
  padding: 12px 14px;
  text-align: left;
  background: var(--color-surface-2);
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}
.admin-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table select {
  padding: 5px 8px;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 12px;
  color: var(--color-text);
}
.admin-locked-msg {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 40px 24px;
  text-align: center;
  color: var(--color-text-muted);
}

/* Row expand host (drawer used by some tools) */
.row-expand-host { /* reserved */ }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-2);
  padding: 48px 0 32px;
  margin-top: 64px;
}
.footer-inner { text-align: center; }
.footer-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800;
  color: var(--color-accent);
  margin-bottom: 16px;
  font-size: 18px;
}
.footer-links {
  display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
  margin-bottom: 24px;
}
.footer-links a {
  color: var(--color-text-muted);
  font-size: 14px;
}
.footer-links a:hover { color: var(--color-accent); }
.footer-disclaimer { color: var(--color-text-muted); font-size: 12px; max-width: 720px; margin: 0 auto 16px; line-height: 1.6; }
.footer-copy { color: var(--color-text-dim); font-size: 12px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Laptop band (≤1280): can't hold everything on one row. Bar 1's left filters
   take a full-width row and the refresh group drops beneath, right-aligned.
   Bar 2's center slider cluster drops to its own row below the left/right. */
@media (max-width: 1280px) {
  .optimizer-bar-left { flex: 1 1 100%; }
  .optimizer-bar-right { margin-left: auto; }
  .filter-bar-left { flex: 0 0 auto; }
  .filter-bar-right { margin-left: auto; }
  .filter-bar-center { flex: 1 1 100%; order: 3; }
}
@media (max-width: 1100px) {
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .deposit-split { grid-template-columns: 1fr; }
  .promo-split { grid-template-columns: 1fr; }
  .account-dashboard { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .feature-block { grid-template-columns: 1fr; gap: 32px; padding: 56px 0; }
  .feature-block.reverse .feature-text { order: 0; }
  .cta-band { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .promo-grid { grid-template-columns: 1fr; }
  .promo-expand-grid { grid-template-columns: 1fr; }
  .promo-expand-or { padding: 8px 0; }
}

@media (max-width: 768px) {
  .container { padding: 0 16px; }
  .navbar-nav {
    position: absolute;
    top: var(--navbar-h); left: 0; right: 0;
    flex-direction: column;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    padding: 12px;
    gap: 4px;
    transform: translateY(-150%);
    transition: transform var(--transition);
    z-index: 99;
  }
  .navbar-nav.open { transform: translateY(0); }
  .navbar-nav a { padding: 12px 14px; }
  .navbar-dropdown-trigger { padding: 12px 14px; width: 100%; justify-content: space-between; }
  .navbar-dropdown-menu {
    position: static;
    margin-top: 4px;
    box-shadow: none;
    border: 0;
    background: var(--color-surface-2);
  }
  .navbar-toggle { display: inline-flex; }

  .hero { padding: 56px 0 48px; }
  .preview-section { padding: 40px 0 24px; }
  .preview-lock { top: 100px; }

  .optimizer-bar-inner { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 16px; }
  .optimizer-bar-left { flex-direction: column; align-items: stretch; gap: 10px; }
  .optimizer-bar-right { justify-content: flex-start; }
  .filter-bar-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 16px;
  }
  .filter-bar-left { justify-content: flex-start; }
  .filter-bar-center { flex-basis: auto; order: 0; }
  .filter-slider-row { justify-content: flex-start; }
  .filter-bar-right { margin-left: 0; }
  .filter-bar-right .filter-group-grow { flex: 1; }
  .filter-group select, .filter-group input { min-width: 0; width: 100%; }
  .filter-group input[type="range"] { width: 100%; }

  /* === EDIT: Mobile Data-Table Card Layout (Task 1) ===
     Player + leading-stat cells render as label/value rows.
     Per-book cells (.book-cell-wrap) collapse into a 3-column grid
     inside the card so 14+ books don't eat 14 rows of vertical scroll.
     Landscape phone (orientation: landscape) and ≥600px bumps to 4 cols.
     Above 768px → untouched horizontal table. */
  .table-wrap { background: transparent; border: 0; }
  .data-table, .data-table thead, .data-table tbody { display: block; }
  .data-table thead { display: none; }
  .data-table tbody tr {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-bottom: 12px;
    padding: 14px;
  }
  .data-table tbody tr:hover { background: var(--color-surface); }

  /* Leading (non-book) cells: label/value row layout */
  .data-table td {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--color-border);
    min-width: 0;
    text-align: left;
  }
  .data-table td:last-child { border-bottom: 0; }
  .data-table td::before {
    content: attr(data-label);
    font-size: 10px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    white-space: nowrap;
  }
  /* Value cell must not overflow its column */
  .data-table td > * {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* Player cell: header style, no label prefix, full width */
  .data-table td.player-cell {
    display: block;
    border-bottom: 1px solid var(--color-border-strong);
    padding-bottom: 10px;
    margin-bottom: 8px;
  }
  .data-table td.player-cell::before { display: none; }

  /* === Per-book cells: 3-column compact grid === */
  /* Each book-cell-wrap td breaks out of the label/value rhythm and
     joins a sibling grid so books tile horizontally instead of stacking. */
  .data-table tbody tr {
    /* Row-wrap flex: leading cells take full-width rows (flex 0 0 100%) and
       book cells tile into a multi-column grid. (Previously flex-direction:
       column — in column direction flex-basis sizes HEIGHT not WIDTH, which
       left each book cell alone at ~33% width with the rest of the row empty.) */
    display: flex;
    flex-direction: row;
  }
  .data-table tbody tr > td:not(.book-cell-wrap) {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
  }
  /* The collection of .book-cell-wrap cells in a row tiles into a grid.
     We can't wrap them in a parent without JS, so each is a flex item sized
     via flex-basis. Portrait default = 4 columns; narrow phones drop to 3 and
     landscape bumps to 5 (overrides in the MOBILE UI WRAPPER REFIT block). */
  .data-table tbody tr {
    flex-wrap: wrap;
  }
  .data-table tbody tr > td:not(.book-cell-wrap) {
    flex: 0 0 100%;
    width: 100%;
    box-sizing: border-box;
  }
  .data-table tbody tr > td.book-cell-wrap {
    flex: 0 0 calc(25% - 6px);
    width: calc(25% - 6px);
    display: block;
    margin: 4px 3px 0 3px;
    padding: 8px 6px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    text-align: center;
  }
  /* Replace the hidden table-cell "data-label::before" with a visible book tag */
  .data-table tbody tr > td.book-cell-wrap::before {
    content: attr(data-label);
    display: block;
    font-size: 9px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-bottom: 4px;
    text-align: center;
  }
  .data-table tbody tr > td.book-cell-wrap .book-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: center;
    padding: 0;
  }
  .data-table tbody tr > td.book-cell-wrap .bk-row {
    display: flex;
    justify-content: center;
    gap: 4px;
    font-size: 11px;
    line-height: 1.2;
    margin: 0;
  }
  .data-table tbody tr > td.book-cell-wrap .bk-row span:first-child {
    color: var(--color-text-muted);
    font-weight: 700;
    font-size: 10px;
  }
  .data-table tbody tr > td.book-cell-wrap .bk-row span:last-child {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 11px;
  }
  .data-table tbody tr > td.book-cell-wrap .bk-line {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    font-size: 9px;
    margin-top: 3px;
    padding-top: 3px;
    border-top: 1px solid var(--color-border);
  }
  .data-table tbody tr > td.book-cell-wrap .book-cell-empty {
    color: var(--color-text-dim);
    font-size: 11px;
    text-align: center;
  }
  /* Numeric leading cells: keep tabular figures aligned left in card mode */
  .data-table tbody tr > td.consensus-cell,
  .data-table tbody tr > td.line-cell,
  .data-table tbody tr > td.ou-cell-wrap,
  .data-table tbody tr > td.stat-cell,
  .data-table tbody tr > td.edge-cell {
    text-align: left;
    justify-content: start;
  }

  .skeleton-row { grid-template-columns: 1fr; gap: 6px; }
  .skeleton-row .skeleton-bar { width: 100% !important; }

  .data-row[data-locked="true"]::after { font-size: 14px; }

  /* Calculator size variants on mobile (override desktop max-widths) */
  .calc-card, .calc-card.calc-size-50, .calc-card.calc-size-20 {
    max-width: 100%;
    padding: 22px 18px;
  }
  .calc-card.calc-size-20 { padding: 14px; }

  .field-row, .field-row-3, .field-row-4 { grid-template-columns: 1fr; }
  .calc-tabs { border-radius: var(--radius-md); }
  .pricing-foot { padding: 0 16px 60px; }
  /* (Pricing grid mobile layout is set in the Task 3 block further down) */

  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }

  /* Promo on mobile */
  .promo-customize-row { grid-template-columns: 1fr 1fr; }

  /* Arbitrage table — horizontal scroll on mobile */
  .arb-table-wrap { overflow-x: auto; }
  .arb-table { min-width: 900px; }

  /* Sportsbook screen on mobile */
  .screen-table { min-width: 700px; }
}

@media (max-width: 480px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .page-header { padding: 40px 0 24px; }
  .feature-title, .section-title { font-size: 26px; }
  .preview-lock-card { padding: 22px 24px; max-width: 92%; }
  .promo-customize-row { grid-template-columns: 1fr; }
  .promo-expand-grid { grid-template-columns: 1fr; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   v1.3 SIZING OVERRIDES
   Tasks 4 (navbar -65% + single-page calcs), 5 (calc page -30%),
   6 (pricing -30%), 7 (home -20% + hero gap -80%).
   All overrides live at the end of the file so they win the cascade.
   ============================================================ */

/* ============================================================
   TASK 4a: Navbar reduced 65% (64px → 22px)
   ============================================================ */
:root {
  --navbar-h: 22px;
}
.navbar {
  height: 22px;
  min-height: 22px;
}
.navbar-inner {
  padding-top: 0;
  padding-bottom: 0;
}
.navbar-brand {
  font-size: 12px;
  gap: 4px;
}
.navbar-brand svg,
.navbar-brand img {
  width: 14px;
  height: 14px;
}
.navbar-brand-text {
  font-size: 12px;
  line-height: 1;
}
.navbar-nav a,
.navbar-dropdown-trigger {
  font-size: 11px;
  padding: 2px 6px;
  line-height: 1.2;
  gap: 2px;
}
.navbar-nav a .nav-icon,
.navbar-dropdown-trigger svg {
  width: 10px;
  height: 10px;
}
.account-btn,
#account-btn {
  font-size: 10px;
  padding: 2px 6px;
  height: 18px;
  gap: 4px;
}
.account-btn svg,
#account-btn svg {
  width: 10px;
  height: 10px;
}
.tier-badge-mini {
  font-size: 8px;
  padding: 1px 3px;
}
.navbar-dropdown-menu {
  /* Keep the dropdown panel itself at a usable size even though the trigger is tiny */
  margin-top: 2px;
}
.navbar-toggle {
  width: 18px;
  height: 18px;
  padding: 0;
}
.navbar-toggle svg {
  width: 12px;
  height: 12px;
}

/* Push page content down only by the new (small) navbar height */
.page,
section.page {
  padding-top: 22px;
}
/* Hero already manages its own spacing; don't double-pad it */
.page-landing,
section.page-landing,
#page-landing {
  padding-top: 22px;
}

/* ============================================================
   TASK 4b: Calculators on a single page (no scrolling)
   The calc-content area is constrained to viewport height minus
   navbar minus page header so each calc fits without scrolling.
   Internal sections (controls + output grid) get more compact.
   ============================================================ */
.page-calculators .page-header {
  padding: 14px 0 10px;
}
.page-calculators .page-title {
  font-size: 24px;
  margin: 0;
}
.page-calculators .page-sub {
  font-size: 11px;
  margin: 2px 0 0;
}

#calc-tabs {
  padding: 4px 6px;
  gap: 2px;
  margin: 8px auto 10px;
  max-width: 880px;
}
.calc-tab {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 8px;
}

/* The calculator card itself: scale everything down 30% for Task 5
   AND clamp the height so internal scrolling never appears. */
#calc-content {
  /* Reserve room: navbar (22) + tabs row (~36) + page header (~50) ≈ 110 */
  max-height: calc(100vh - 120px);
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.calc-card {
  max-width: 560px;
  padding: 16px 18px;
  font-size: 12px;
  /* Cap the card itself — flex children can shrink */
  max-height: calc(100vh - 140px);
  overflow-y: auto;   /* if a calc is unusually tall, it scrolls INSIDE the card; the outer page stays static */
}
.calc-title {
  font-size: 18px;
  margin: 0 0 4px;
}
.calc-desc {
  font-size: 11px;
  margin: 0 0 10px;
}
.calc-controls {
  gap: 8px;
  margin-bottom: 10px;
}
.calc-toggle button {
  padding: 4px 10px;
  font-size: 11px;
}
.calc-switch {
  font-size: 11px;
}
.calc-switch .switch-label {
  font-size: 11px;
}
.field {
  margin-bottom: 8px;
}
.field label {
  font-size: 11px;
  margin-bottom: 3px;
}
.field input,
.field select,
.num-input {
  padding: 6px 8px;
  font-size: 12px;
}
.field-row,
.field-row-3,
.field-row-4 {
  gap: 8px;
  margin-bottom: 8px;
}
.leg-card {
  padding: 8px 10px;
  margin-bottom: 6px;
}
.leg-head {
  margin-bottom: 4px;
}
.leg-title {
  font-size: 11px;
}
.leg-remove {
  width: 18px;
  height: 18px;
  font-size: 14px;
  line-height: 1;
}
.leg-add {
  padding: 5px 10px;
  font-size: 11px;
  margin-top: 4px;
}
.calc-output {
  margin-top: 10px;
  padding-top: 10px;
}
.calc-output-title {
  font-size: 11px;
  margin-bottom: 6px;
}
.output-grid {
  gap: 6px;
}
.output-card {
  padding: 6px 8px;
}
.output-card-label {
  font-size: 9px;
}
.output-card-value {
  font-size: 14px;
}
.outcome-block {
  padding: 8px;
  margin-bottom: 6px;
}
.outcome-head {
  font-size: 11px;
  margin-bottom: 4px;
}
.outcome-row {
  padding: 3px 4px;
  font-size: 11px;
}
.outcome-icon {
  width: 20px;
  height: 20px;
  font-size: 9px;
}
.outcome-amount {
  font-size: 11px;
}
.tip-box {
  font-size: 10px;
  padding: 6px 8px;
  margin-top: 8px;
}

/* Calc-size-50 + calc-size-20 variants get further reduction
   so the small calcs are even more compact */
.calc-card.calc-size-50 {
  max-width: 280px;
  padding: 14px;
}
.calc-card.calc-size-50 .calc-title { font-size: 14px; }
.calc-card.calc-size-50 .calc-desc  { font-size: 10px; }
.calc-card.calc-size-20 {
  max-width: 200px;
  padding: 12px;
}
.calc-card.calc-size-20 .calc-title { font-size: 13px; }
.calc-card.calc-size-20 .calc-desc  { font-size: 10px; }
.calc-card.calc-size-20 .field input,
.calc-card.calc-size-20 .field select { padding: 5px 7px; font-size: 11px; }
.calc-card.calc-size-20 .output-card-value { font-size: 12px; }

/* ============================================================
   TASK 6: Pricing page reduced 30%
   ============================================================ */
.page-pricing .page-header,
#page-pricing .hero,
#page-pricing > .container > .page-header {
  padding: 18px 0 10px;
}
.page-pricing .page-title,
#page-pricing h1 {
  font-size: clamp(28px, 4vw, 50px);
  margin: 0 0 6px;
}
.page-pricing .page-sub,
#page-pricing .page-sub {
  font-size: 12px;
  margin-bottom: 14px;
}
.billing-toggle {
  margin-bottom: 18px;
}
.billing-pill {
  padding: 6px 14px;
  font-size: 12px;
}
.billing-pill .billing-pill-badge {
  font-size: 9px;
  padding: 2px 5px;
}
#pricing-grid {
  gap: 14px;
}
.price-card {
  padding: 18px 16px;
  border-radius: 12px;
}
.price-card-badge {
  font-size: 9px;
  padding: 3px 8px;
}
.price-card-name {
  font-size: 18px;
  margin-bottom: 3px;
}
.price-card-tagline {
  font-size: 11px;
  margin-bottom: 14px;
}
.price-card-price {
  margin-bottom: 14px;
}
.price-amount {
  font-size: 36px;
}
.price-period {
  font-size: 11px;
}
.price-strike {
  font-size: 14px;
}
.price-card-features {
  margin-bottom: 14px;
  gap: 5px;
}
.price-card-features li {
  font-size: 11px;
  gap: 6px;
}
.feat-check, .feat-x {
  width: 13px;
  height: 13px;
  font-size: 9px;
}
.price-card-cta {
  padding: 8px 12px;
  font-size: 12px;
}

/* ============================================================
   TASK 7: Home (landing) page reduced 20%
            + space between navbar and "Live sportsbook data" badge: -80%
   ============================================================ */
.hero {
  padding-top: 4px;   /* was big margin between navbar and badge — now 80% smaller */
  padding-bottom: 36px;
  min-height: auto;
}
.hero-eyebrow {
  margin-top: 4px;        /* effectively the gap between navbar and "Live sportsbook data" badge */
  margin-bottom: 16px;
  padding: 5px 12px;
  font-size: 11px;
}
.hero-eyebrow .dot {
  width: 6px;
  height: 6px;
}
.hero-title {
  font-size: clamp(32px, 5.6vw, 58px);   /* was clamp(40px, 7vw, 72px) */
  margin-bottom: 14px;
}
.hero-subtitle {
  font-size: clamp(13px, 1.6vw, 16px);
  max-width: 480px;
  margin-bottom: 24px;
}
.hero-cta {
  gap: 10px;
  margin-bottom: 36px;
}
.hero-cta .btn {
  padding: 10px 18px;
  font-size: 13px;
}
.hero-stats {
  gap: 16px;
}
.hero-stat {
  padding: 14px 12px;
  min-width: 110px;
}
.hero-stat-value {
  font-size: 22px;
}
.hero-stat-label {
  font-size: 9px;
}

/* Preview table (landing) — scale down 20% too */
.preview-wrap {
  margin-top: 28px;
  margin-bottom: 28px;
}
.preview-wrap .preview-lock {
  font-size: 13px;
  padding: 10px 18px;
}

/* ============================================================
   PROMO GENIE v1.3 — two-step layout + hedge book chips
   (Supporting styles for new markup added in Part 3.)
   ============================================================ */
.promo-step {
  width: 100%;
}
.promo-step2-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
}
.btn-sm {
  padding: 5px 10px;
  font-size: 11px;
  border-radius: 6px;
}

/* Step 2 panels stacked vertically */
.promo-step2-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.promo-step2-header h3 {
  font-size: 18px;
  margin: 0 0 2px;
}
.promo-step2-subtitle {
  font-size: 11px;
  color: var(--color-text-muted);
}
.promo-customize-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.promo-customize-panel .promo-customize-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.promo-step2-typedesc {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0 4px 14px;
  padding: 8px 10px;
  background: var(--color-surface);
  border-radius: 6px;
  border-left: 2px solid var(--color-accent);
}

/* Hedge book chip selector */
.promo-hedge-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.promo-hedge-title {
  font-size: 13px;
  margin: 0 0 4px;
  font-weight: 600;
}
.promo-hedge-desc {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 0 0 10px;
}
.promo-hedge-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.promo-hedge-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 11px;
  transition: background 0.12s, color 0.12s, border 0.12s;
}
.promo-hedge-chip:hover {
  border-color: var(--color-accent);
}
.promo-hedge-chip.is-active {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}
.book-logo-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 8px;
  font-weight: 700;
  color: var(--color-bg);
}
.chip-label {
  line-height: 1;
}

.promo-results-wrap {
  margin-top: 4px;
}
.promo-results-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

/* ============================================================
   MOBILE (≤768px): keep things readable on phones —
   undo the more aggressive navbar shrink because tap targets
   become impossible.
   ============================================================ */
@media (max-width: 768px) {
  :root { --navbar-h: 44px; }
  .navbar, .navbar-inner { height: 44px; min-height: 44px; }
  .navbar-brand { font-size: 16px; }
  .navbar-brand-text { font-size: 16px; }
  .navbar-nav a, .navbar-dropdown-trigger {
    font-size: 13px; padding: 8px 12px;
  }
  .account-btn, #account-btn {
    font-size: 12px; padding: 6px 10px; height: auto;
  }
  .page, section.page { padding-top: 44px; }
  .calc-card { max-height: none; overflow: visible; }
  #calc-content { max-height: none; overflow: visible; }
  .promo-customize-panel .promo-customize-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   v1.4 SIZING + DATA-LAYER UI OVERRIDES
   1. Navbar: small vertical padding so buttons aren't touching borders,
      and Tools dropdown trigger vertically re-centered.
   2. Home page: 25% smaller (excluding navbar). Today's Top Plays gap
      shrunk; title→table gap shrunk.
   3. Calculators page: title spacing reduced, ALL calcs fit on screen.
   4. Optimizer/Promo tables: smaller default rows + density slider badge.
   5. Old 1-click bet column: defensively hidden if any stale markup leaks through.
   ============================================================ */

/* ============================================================
   TASK 1: Navbar — restore small padding around buttons,
            re-center Tools dropdown trigger vertically.
   ============================================================ */
:root {
  --navbar-h: 30px;    /* up from 22 → enough room for small padding around buttons */
}
.navbar {
  height: 30px;
  min-height: 30px;
  /* Small vertical padding so buttons aren't kissing the borders */
  padding-top: 3px;
  padding-bottom: 3px;
}
.navbar-inner {
  /* Make the inner row a flex container that vertically centers everything,
     including the Tools dropdown trigger that was floating high before. */
  display: flex;
  align-items: center;
  height: 24px;          /* navbar-h minus top+bottom padding */
}
.navbar-brand {
  display: inline-flex;
  align-items: center;
  height: 100%;
  font-size: 12px;
  gap: 4px;
}
.navbar-nav {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 2px;
}
.navbar-nav a,
.navbar-dropdown-trigger {
  display: inline-flex;
  align-items: center;            /* re-centers Tools trigger that was misaligned */
  justify-content: center;
  height: 22px;                   /* exact same height for ALL navbar items so nothing looks off-axis */
  padding: 0 8px;                 /* small horizontal */
  font-size: 11px;
  line-height: 1;
  gap: 3px;
  box-sizing: border-box;
}
.navbar-dropdown {
  display: inline-flex;
  align-items: center;
  height: 100%;
}
.account-btn,
#account-btn {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 11px;
  gap: 4px;
}
/* Push page content down by the new navbar height */
.page,
section.page {
  padding-top: 30px;
}

/* ============================================================
   TASK 2: Home (landing) page — 25% smaller (excluding navbar).
            Today's Top Plays: top gap halved, title→table gap minimized.
   ============================================================ */

/* Hero: another 25% reduction on top of what we already had */
.hero {
  padding-top: 6px;
  padding-bottom: 18px;
}
.hero-eyebrow {
  margin-top: 2px;
  margin-bottom: 10px;
  padding: 3px 9px;
  font-size: 9px;
}
.hero-eyebrow .dot {
  width: 5px;
  height: 5px;
}
.hero-title {
  font-size: clamp(24px, 4.2vw, 44px);   /* 25% smaller than v1.3 (32-58) */
  margin-bottom: 10px;
}
.hero-subtitle {
  font-size: clamp(11px, 1.3vw, 13px);
  max-width: 380px;
  margin-bottom: 18px;
}
.hero-cta {
  gap: 8px;
  margin-bottom: 24px;
}
.hero-cta .btn {
  padding: 8px 14px;
  font-size: 11px;
}
.hero-stats {
  gap: 10px;
}
.hero-stat {
  padding: 10px 8px;
  min-width: 84px;
}
.hero-stat-value {
  font-size: 16px;
}
.hero-stat-label {
  font-size: 7.5px;
}

/* "Today's Top Plays" — half the top gap, way tighter title→table gap */
.preview-section {
  padding-top: 14px;    /* was ~28px → halved */
}
.section-head {
  margin-bottom: 4px;   /* gap between title and table — was much larger */
  padding-bottom: 0;
}
.section-title {
  font-size: 16px;
  margin: 0 0 1px;
  line-height: 1.1;
}
.section-sub {
  font-size: 10px;
  margin: 0;
  line-height: 1.2;
}
.preview-wrap {
  margin-top: 4px;     /* near-zero — title→table flush */
  margin-bottom: 20px;
}

/* ============================================================
   TASK 3: Calculator page — reduce header spacing, ensure single screen
   ============================================================ */
.page-calculators .page-header,
#page-calculators .page-header {
  padding: 6px 0 4px;   /* was 14px 0 10px in v1.3 */
}
.page-calculators .page-title {
  font-size: 18px;       /* down from 24 */
  margin: 0;
  line-height: 1.1;
}
.page-calculators .page-sub {
  font-size: 10px;
  margin: 1px 0 0;
}
#calc-tabs {
  padding: 3px 4px;
  gap: 2px;
  margin: 4px auto 6px;
  max-width: 760px;
}
.calc-tab {
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 6px;
}
#calc-content {
  /* navbar 30 + page header ~32 + tab row ~28 = 90.  Reserve a little extra. */
  max-height: calc(100vh - 100px);
  overflow: hidden;
}
.calc-card {
  /* Single-screen: card must NOT scroll internally either */
  max-height: calc(100vh - 110px);
  overflow: visible;          /* override v1.3 overflow-y:auto */
  padding: 10px 14px;
  font-size: 11px;
}
.calc-title    { font-size: 14px; margin: 0 0 2px; }
.calc-desc     { font-size: 10px; margin: 0 0 6px; }
.calc-controls { gap: 6px; margin-bottom: 6px; }
.calc-toggle button { padding: 3px 8px; font-size: 10px; }
.calc-switch, .calc-switch .switch-label { font-size: 10px; }
.field         { margin-bottom: 5px; }
.field label   { font-size: 10px; margin-bottom: 2px; }
.field input,
.field select,
.num-input     { padding: 4px 6px; font-size: 11px; }
.field-row,
.field-row-3,
.field-row-4   { gap: 6px; margin-bottom: 5px; }
.leg-card      { padding: 5px 8px; margin-bottom: 4px; }
.leg-head      { margin-bottom: 2px; }
.leg-title     { font-size: 10px; }
.leg-remove    { width: 16px; height: 16px; font-size: 12px; }
.leg-add       { padding: 3px 8px; font-size: 10px; margin-top: 2px; }
.calc-output   { margin-top: 6px; padding-top: 6px; }
.calc-output-title { font-size: 10px; margin-bottom: 4px; }
.output-grid   { gap: 4px; }
.output-card   { padding: 4px 6px; }
.output-card-label { font-size: 8px; }
.output-card-value { font-size: 12px; }
.outcome-block { padding: 6px; margin-bottom: 4px; }
.outcome-head  { font-size: 10px; margin-bottom: 3px; }
.outcome-row   { padding: 2px 3px; font-size: 10px; }
.outcome-icon  { width: 16px; height: 16px; font-size: 8px; }
.outcome-amount{ font-size: 10px; }
.tip-box       { font-size: 9px; padding: 4px 6px; margin-top: 6px; }

/* ============================================================
   TASK 4: Optimizer/Promo table — row density (compact / normal / comfortable)
            + a compact horizontal slider badge centered above each tool table.
   ============================================================ */
.row-density-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px auto 6px;
  padding: 3px 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 10px;
  width: max-content;        /* badge hugs its content; doesn't take up the row */
  display: flex;             /* flex with auto margins centers it */
  justify-content: center;
}
.optimizer-content .row-density-badge,
.preview-section   .row-density-badge {
  margin-left: auto;
  margin-right: auto;
}
.row-density-label {
  color: var(--color-text-muted);
  font-size: 10px;
  padding-right: 4px;
}
.density-btn {
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.density-btn:hover {
  color: var(--color-text);
}
.density-btn.active {
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 600;
}

/* === Table zoom slider === */
.table-zoom-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  margin: 0;
  padding: 3px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  width: max-content;
  opacity: 1;
}
.table-zoom-label {
  color: var(--color-text);
  font-size: 10px;
  white-space: nowrap;
}
.table-zoom-slider {
  width: 100px;
  height: 4px;
  accent-color: var(--color-accent);
  cursor: pointer;
  opacity: 1;
}
.table-zoom-val {
  color: var(--color-text);
  font-size: 10px;
  min-width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Density modifiers — applied to <table> directly */
.data-table.density-compact td,
.data-table.density-compact th,
.arb-table.density-compact td,
.arb-table.density-compact th {
  padding-top: 4px;
  padding-bottom: 4px;
  font-size: 11px;
  line-height: 1.2;
}
.data-table.density-compact .player-name,
.arb-table.density-compact  .arb-event-name {
  font-size: 11px;
  line-height: 1.15;
}
.data-table.density-compact .player-meta,
.arb-table.density-compact  .arb-event-time,
.arb-table.density-compact  .arb-event-tag {
  font-size: 9px;
  line-height: 1.1;
}
.data-table.density-compact .book-cell {
  font-size: 10px;
  padding: 2px 4px;
}
.data-table.density-compact .book-cell .bk-row { font-size: 10px; line-height: 1.1; }
.data-table.density-compact .book-cell .bk-line { font-size: 9px; }
.data-table.density-compact .edge-badge,
.data-table.density-compact .stat-pill,
.data-table.density-compact .ou-cell {
  font-size: 10px;
  padding: 1px 6px;
}

.data-table.density-normal td,
.data-table.density-normal th,
.arb-table.density-normal td,
.arb-table.density-normal th {
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 12px;
}

.data-table.density-comfortable td,
.data-table.density-comfortable th,
.arb-table.density-comfortable td,
.arb-table.density-comfortable th {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 13px;
}

/* ============================================================
   Task 5: defensively hide any leaked 1-click bet markup
   ============================================================ */
.arb-1click-cell,
.arb-1click-stack,
.arb-1click-btn,
th:has(+ th):empty + th[data-removed] {
  display: none !important;
}

/* ============================================================
   Empty state styling tweak — appears on the optimizer when there's no /props
   data yet. Make it less visually heavy.
   ============================================================ */
.empty-state {
  padding: 24px 18px;
}
.empty-state h3 { font-size: 14px; margin: 4px 0; }
.empty-state p  { font-size: 11px; margin: 0; }
.empty-state-icon { font-size: 26px; }

/* ============================================================
   Mobile (≤768px): keep tap targets usable
   ============================================================ */
@media (max-width: 768px) {
  :root { --navbar-h: 48px; }
  .navbar, .navbar-inner { height: 48px; min-height: 48px; }
  .navbar-nav a, .navbar-dropdown-trigger {
    height: 32px; font-size: 13px; padding: 0 12px;
  }
  .account-btn, #account-btn { height: 32px; font-size: 12px; padding: 0 10px; }
  .page, section.page { padding-top: 48px; }
  .hero-title { font-size: clamp(28px, 7vw, 40px); }
  #calc-content { max-height: none; overflow: visible; }
  .calc-card { max-height: none; overflow: visible; }
  .row-density-badge { font-size: 11px; }
  .density-btn { font-size: 11px; padding: 4px 10px; }
}

/* ============================================================
   v1.5 — Multi-book column support
   The /props endpoint returns 12-16 books per pick now that DFS apps
   are included. Tables need horizontal scroll. Cell padding tightened
   to fit more columns visibly without scroll on wider screens.
   ============================================================ */

.table-wrap,
.arb-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.data-table {
  /* Let columns size to their content, but force a minimum so wide tables scroll */
  min-width: 920px;
}

/* Compact density needs even tighter book columns when there are 16 of them */
.data-table.density-compact .book-cell-wrap,
.data-table.density-compact .book-cell {
  padding-left: 4px;
  padding-right: 4px;
  min-width: 44px;
}
.data-table.density-compact .book-cell .bk-row {
  gap: 2px;
}

/* Sticky-ish leading columns so player name stays visible while scrolling sideways */
.data-table thead th:first-child,
.data-table tbody td:first-child {
  position: sticky;
  left: 0;
  background: var(--color-surface);
  z-index: 2;
}
.data-table thead th:first-child {
  z-index: 3;
}

/* The OU label we promoted from <label> to <span class="filter-label" id="ou-toggle-label">
   needs the same visual treatment as a real .filter-group label. */
.filter-group .filter-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
}

/* Mobile: keep the sticky first column but make book columns scrollable */
@media (max-width: 768px) {
  .data-table {
    min-width: 720px;
  }
  .data-table thead th:first-child,
  .data-table tbody td:first-child {
    /* On mobile cards, sticky isn't useful since rows stack */
    position: static;
  }
}

/* ============================================================
   v1.6 — Promo Genie redesign (math engine verified)
   Sleek picker → tabbed tool view → live calc + results panel
   ============================================================ */

/* ============================================================
   PICKER VIEW — Three big choice cards
   ============================================================ */
.promo-picker {
  padding-top: 8px;
}
.promo-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.promo-tool-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 22px 20px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.16s, border-color 0.16s, background 0.16s;
  font-family: inherit;
  color: inherit;
}
.promo-tool-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  background: var(--color-surface-elev, var(--color-surface));
}
.promo-tool-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 4px;
}
.promo-tool-name {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
}
.promo-tool-tagline {
  font-size: 12px;
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.4;
  flex: 1;
}
.promo-tool-arrow {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-accent);
}

/* ============================================================
   TOOL VIEW — top bar with back button + tab strip
   ============================================================ */
.promo-tool-view {
  padding-top: 4px;
}
.promo-tool-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
}
.promo-tool-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.promo-tool-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
}
.promo-tool-tab:hover {
  color: var(--color-text);
  border-color: var(--color-text-muted);
}
.promo-tool-tab.active {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
  font-weight: 600;
}
.promo-tool-tab .tab-icon {
  font-size: 12px;
}

/* ============================================================
   TOOL HEADER — icon + name + description
   ============================================================ */
.promo-tool-header {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}
.promo-tool-header-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}
.promo-tool-header-name {
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--color-text);
}
.promo-tool-header-desc {
  font-size: 12px;
  margin: 0;
  color: var(--color-text-muted);
  line-height: 1.5;
}

/* ============================================================
   2-COLUMN GRID — Form on left, Results on right
   ============================================================ */
.promo-tool-grid {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 16px;
  align-items: flex-start;
}
.promo-tool-form-col,
.promo-tool-results-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ============================================================
   FORM PANEL
   ============================================================ */
.promo-form-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.promo-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.promo-field-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.promo-input {
  width: 100%;
  padding: 7px 9px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.12s;
}
.promo-input:focus {
  outline: none;
  border-color: var(--color-accent);
}

.input-with-prefix,
.input-with-suffix {
  display: flex;
  align-items: stretch;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;
}
.input-with-prefix:focus-within,
.input-with-suffix:focus-within {
  border-color: var(--color-accent);
}
.input-with-prefix .prefix,
.input-with-suffix .suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 600;
  border-right: 1px solid var(--color-border);
}
.input-with-suffix .suffix {
  border-right: 0;
  border-left: 1px solid var(--color-border);
}
.input-with-prefix .promo-input,
.input-with-suffix .promo-input {
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* ============================================================
   PRESET BUTTON ROW (quick-fill chips)
   ============================================================ */
.promo-preset-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.promo-preset-label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.promo-preset-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.promo-preset-btn {
  padding: 4px 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
}
.promo-preset-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}

/* ============================================================
   TOGGLE ROW (checkbox + label inline)
   ============================================================ */
.promo-toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-text);
}
.promo-toggle-row input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* ============================================================
   INFO TOOLTIP (ⓘ icon with hover/focus pop-up)
   ============================================================ */
.info-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: help;
}
.info-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text-muted);
  font-size: 9px;
  font-weight: 700;
  transition: background 0.12s, color 0.12s;
}
.info-icon-wrap:hover .info-icon,
.info-icon-wrap:focus .info-icon {
  background: var(--color-accent);
  color: var(--color-bg);
}
.info-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  padding: 8px 10px;
  background: var(--color-bg, #0a0e1a);
  border: 1px solid var(--color-accent);
  border-radius: 6px;
  font-size: 11px;
  color: var(--color-text);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  line-height: 1.4;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 100;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.info-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-accent);
}
.info-icon-wrap:hover .info-tooltip,
.info-icon-wrap:focus .info-tooltip,
.info-icon-wrap:focus-within .info-tooltip {
  opacity: 1;
}

/* ============================================================
   RESULTS PANEL
   ============================================================ */
.promo-results-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.promo-results-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0;
  font-weight: 700;
}
.promo-results-empty {
  padding: 30px 12px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 12px;
}

/* Headline metric — large HV% / Conversion% display at top */
.promo-results-headline {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px;
  background: var(--color-bg);
  border-radius: 8px;
  gap: 4px;
}
.promo-results-headline-label {
  font-size: 11px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.promo-results-headline-value {
  font-size: 38px;
  font-weight: 800;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.promo-results-headline-value.positive { color: var(--color-accent); }
.promo-results-headline-value.negative { color: var(--color-red, #e93535); }

/* Results grid — small cards in 2 cols */
.promo-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
}
.promo-result-card {
  padding: 10px 12px;
  background: var(--color-bg);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.promo-result-card.highlight {
  background: rgba(0, 200, 150, 0.06);
  border: 1px solid rgba(0, 200, 150, 0.2);
}
.promo-result-label {
  font-size: 10px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.promo-result-value {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}
.promo-result-value.positive { color: var(--color-accent); }
.promo-result-value.negative { color: var(--color-red, #e93535); }
.promo-result-note {
  font-size: 9.5px;
  color: var(--color-text-muted);
  line-height: 1.3;
  margin-top: 2px;
}

/* Action banner at bottom of results */
.promo-results-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid;
}
.promo-results-banner.success {
  background: rgba(0, 200, 150, 0.08);
  border-color: rgba(0, 200, 150, 0.3);
  color: var(--color-text);
}
.promo-results-banner.success .banner-icon { color: var(--color-accent); font-weight: 700; }
.promo-results-banner.warn {
  background: rgba(255, 165, 0, 0.08);
  border-color: rgba(255, 165, 0, 0.3);
  color: var(--color-text);
}
.promo-results-banner.warn .banner-icon { color: orange; font-weight: 700; }
.promo-results-banner.info {
  background: rgba(80, 140, 255, 0.08);
  border-color: rgba(80, 140, 255, 0.3);
  color: var(--color-text);
}
.promo-results-banner.info .banner-icon { color: #5a8fff; font-weight: 700; }

/* ============================================================
   RESPONSIVE — stack form + results on narrow screens
   ============================================================ */
@media (max-width: 880px) {
  .promo-tool-grid {
    grid-template-columns: 1fr;
  }
  .promo-tool-topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .promo-tool-tabs {
    justify-content: center;
  }
  .promo-results-headline-value {
    font-size: 30px;
  }
}

/* ============================================================
   PROMO SCANNER UI — used by Profit Boost / Free Bet / Risk-Free Bet
   ============================================================ */
.promo-scanner-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px;
  background: var(--color-surface, #161b22);
  border: 1px solid var(--color-border, #30363d);
  border-radius: 10px;
  margin-bottom: 12px;
  align-items: flex-end;
}
.promo-scanner-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 100px;
}
.promo-scanner-field.promo-scanner-scan-wrap {
  min-width: 0;
}
.promo-scanner-label {
  font-size: 10px;
  color: var(--color-text-muted, #8b949e);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}
.promo-scanner-input {
  padding: 6px 10px;
  background: var(--color-bg, #0d1117);
  border: 1px solid var(--color-border, #30363d);
  border-radius: 6px;
  color: var(--color-text, #e6edf3);
  font-size: 13px;
  font-family: inherit;
  min-width: 110px;
}
.promo-scanner-input:focus {
  outline: none;
  border-color: var(--color-accent, #3fb950);
}
.promo-scanner-input.num {
  font-family: var(--font-mono, 'SF Mono', monospace);
  font-variant-numeric: tabular-nums;
}
.promo-scanner-scan {
  padding: 8px 22px;
  font-weight: 700;
  white-space: nowrap;
  height: 34px;
}
.promo-scanner-scan:disabled {
  opacity: 0.55;
  cursor: wait;
}

.promo-scanner-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 12px 14px;
  background: var(--color-surface, #161b22);
  border: 1px solid var(--color-border, #30363d);
  border-radius: 10px;
  margin-bottom: 12px;
  align-items: center;
  font-size: 12px;
}
.promo-toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text, #e6edf3);
  cursor: pointer;
}
.promo-toggle-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-accent, #3fb950);
}
.promo-toggle-note {
  color: var(--color-text-muted, #8b949e);
  font-size: 11px;
  margin-left: 2px;
}

.promo-scanner-status {
  font-size: 12px;
  color: var(--color-text-muted, #8b949e);
  margin-bottom: 10px;
  padding: 0 2px;
}
.promo-scanner-status strong {
  color: var(--color-accent, #3fb950);
  font-weight: 700;
}

.promo-scanner-results {
  background: var(--color-surface, #161b22);
  border: 1px solid var(--color-border, #30363d);
  border-radius: 10px;
  overflow: hidden;
}
.promo-scanner-empty {
  padding: 50px 20px;
  text-align: center;
  color: var(--color-text-muted, #8b949e);
}
.promo-scanner-table-wrap {
  overflow-x: auto;
  max-height: 70vh;
  overflow-y: auto;
}
.promo-scanner-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.promo-scanner-table thead th {
  text-align: left;
  padding: 8px 10px;
  font-size: 10px;
  text-transform: uppercase;
  color: var(--color-text-muted, #8b949e);
  border-bottom: 1px solid var(--color-border, #30363d);
  position: sticky;
  top: 0;
  background: var(--color-surface, #161b22);
  z-index: 1;
  white-space: nowrap;
  letter-spacing: 0.03em;
  font-weight: 700;
}
.promo-scanner-table tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--color-border, #30363d);
  vertical-align: top;
}
.promo-scanner-table tbody .promo-result-row {
  cursor: pointer;
  transition: background 80ms ease;
}
.promo-scanner-table tbody .promo-result-row:hover {
  background: rgba(63, 185, 80, 0.05);
}
.promo-scanner-table .num {
  font-family: var(--font-mono, 'SF Mono', monospace);
  font-variant-numeric: tabular-nums;
}
.promo-scanner-table .pos { color: var(--color-accent, #3fb950); }
.promo-scanner-table .neg { color: var(--color-red, #f85149); }
.promo-event-date {
  font-size: 10px;
  color: var(--color-text-muted, #8b949e);
  margin-bottom: 2px;
}
.promo-expand-row td.promo-expand-cell {
  background: var(--color-bg, #0d1117);
  padding: 12px 14px;
}
.promo-expand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.promo-expand-card {
  padding: 8px 10px;
  background: var(--color-surface, #161b22);
  border-radius: 6px;
  border: 1px solid var(--color-border, #30363d);
}
.promo-expand-label {
  font-size: 10px;
  color: var(--color-text-muted, #8b949e);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.promo-expand-value {
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 768px) {
  .promo-scanner-bar { padding: 10px; gap: 8px; }
  .promo-scanner-field { min-width: 0; flex: 1 1 calc(50% - 8px); }
  .promo-scanner-toggles { gap: 10px; padding: 10px; }
  .promo-scanner-table { font-size: 11px; }
  .promo-scanner-table thead th { font-size: 9px; padding: 6px 6px; }
  .promo-scanner-table tbody td { padding: 6px 6px; }
}

/* ============================================================
   FOOTER + HOME BUSINESS DESCRIPTION (Stripe-compliance visibility)
   ============================================================ */
.hero-business-desc {
  max-width: 720px;
  margin: 28px auto 0;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted, #8b949e);
  background: rgba(63, 185, 80, 0.04);
  border: 1px solid rgba(63, 185, 80, 0.18);
  border-radius: 8px;
  text-align: center;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
  margin-bottom: 28px;
  padding-top: 8px;
}
.footer-col h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text, #e6edf3);
  margin-bottom: 12px;
  font-weight: 700;
}
.footer-col a {
  display: block;
  font-size: 13px;
  color: var(--color-text-muted, #8b949e);
  text-decoration: none;
  padding: 4px 0;
  transition: color 100ms ease;
}
.footer-col a:hover {
  color: var(--color-accent, #3fb950);
}
.footer-business {
  font-size: 12px;
  line-height: 1.55;
  color: var(--color-text-muted, #8b949e);
  margin-bottom: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border, #30363d);
}

/* Hide the legacy footer-links class if any old markup still references it */
.footer-links {
  display: none;
}

@media (max-width: 768px) {
  .hero-business-desc { font-size: 12px; padding: 12px 14px; margin-top: 20px; }
  .footer-columns { gap: 20px; }
}

.modal-tos-note {
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-muted, #8b949e);
  margin-bottom: 14px;
  padding: 10px 12px;
  background: rgba(63, 185, 80, 0.04);
  border-left: 3px solid var(--color-accent, #3fb950);
  border-radius: 4px;
}
.modal-tos-note a {
  color: var(--color-accent, #3fb950);
  text-decoration: none;
}
.modal-tos-note a:hover {
  text-decoration: underline;
}

.pricing-billing-terms {
  max-width: 800px;
  margin: 20px auto 0;
  padding: 14px 18px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text-muted, #8b949e);
  background: var(--color-surface, #161b22);
  border: 1px solid var(--color-border, #30363d);
  border-radius: 8px;
}
.pricing-billing-terms strong {
  color: var(--color-text, #e6edf3);
}
.pricing-billing-terms a {
  color: var(--color-accent, #3fb950);
  text-decoration: none;
}
.pricing-billing-terms a:hover {
  text-decoration: underline;
}

/* ============================================================
   === EDIT: Platform Toggle (Goblin Mode: PP ↔ UD) ===
   Visible only when Goblin Mode is the active tool. Mirrors the
   .ou-toggle visual treatment so it sits naturally in the bar.
   ============================================================ */
.platform-toggle {
  display: inline-flex;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 0;
}
.platform-toggle[hidden] { display: none !important; }
.platform-btn {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  border-radius: 4px;
  font-family: var(--font-mono);
  letter-spacing: 0.5px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
}
.platform-btn:hover { color: var(--color-text); }
.platform-btn.active { background: var(--color-accent); color: var(--color-on-accent); }

/* ============================================================
   === EDIT: Goblin Mode column hiding ===
   When the optimizer table has .goblin-mode, BTR + SLP book
   columns and their cells are visually hidden. We keep the
   columns in the DOM so the data-cell index alignment per-row
   stays simple; CSS class on the table is the only switch.
   ============================================================ */
.data-table.goblin-mode th[title="Betr"],
.data-table.goblin-mode th[title="Sleeper"],
.data-table.goblin-mode td[data-label="BTR"],
.data-table.goblin-mode td[data-label="SLP"] {
  display: none;
}

/* ============================================================
   === EDIT: Risk Disclaimer (Task 5 of original prompt) ===
   ============================================================ */
.footer-risk-disclaimer {
  background: rgba(255, 90, 90, 0.08);
  border: 1px solid rgba(255, 90, 90, 0.25);
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 14px;
  color: #ffb3b3;
  text-align: center;
  line-height: 1.5;
}
.footer-risk-disclaimer strong { color: #ff8888; font-weight: 700; }

.calc-risk-disclaimer {
  background: rgba(255, 90, 90, 0.06);
  border: 1px solid rgba(255, 90, 90, 0.2);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  margin: 24px 0 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.5;
}
.calc-risk-disclaimer strong { color: #ff9999; }

/* ============================================================
   === EDIT: Annual Toggle Gray-out (Task 2 of original prompt) ===
   When billing=annual and tier doesn't support annual, the card
   is rendered with .price-card-disabled and the CTA is replaced
   with a "Monthly only" label.
   ============================================================ */
.price-card-disabled {
  opacity: 0.5;
  filter: grayscale(0.8);
  pointer-events: none;
  position: relative;
}
.price-card-disabled .price-card-features,
.price-card-disabled .price-card-price,
.price-card-disabled .price-card-name,
.price-card-disabled .price-card-tagline {
  color: var(--color-text-dim) !important;
}
.price-card-monthly-only {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 12px;
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 14px;
  font-style: italic;
}

/* ============================================================
   === EDIT: Table Column Spacing (per picture 2) ===
   Make the gap between Player↔Stat and Stat↔O/U match the gap
   between book-odds columns. Center the % Chance to Hit and
   Consensus headers over their columns. Shift book cells slightly
   to the left.
   ============================================================ */
.data-table th.th-center {
  text-align: center;
}
.data-table th,
.data-table td {
  /* Match the natural inter-column gap of book cells. The book
     cells use ~10px horizontal padding; mirror that for the leading
     columns so spacing reads as consistent across the table. */
  padding-left: 10px;
  padding-right: 10px;
}
.data-table td.book-cell-wrap {
  /* Shift book-odds in slightly to the left so the cell content
     hugs the left edge of its column rather than centering. */
  padding-left: 8px;
  padding-right: 4px;
}
.data-table .book-cell {
  /* Align book-cell internal content to the left within the cell. */
  text-align: left;
}
.data-table th[title="Consensus"],
.data-table td.consensus-cell {
  text-align: center;
}

/* ============================================================
   === EDIT: Optimizer Table Column Spacing (picture #2 fixes) ===
   Goal: even out the spacing between the first 4 columns so it
   matches the rhythm of the book columns. Also center the
   "% CHANCE TO HIT" and "CONSENSUS" header text over their cells,
   and pull book-odds content slightly left.
   ============================================================ */
.data-table th.th-center,
.data-table td.consensus-cell {
  text-align: center;
}

/* === Leading-cluster alignment ===
   Stat, O/U, Line, Chance-to-Hit and Consensus: center BOTH the header
   (the th-center class, added in app.js) AND the cell contents, so every
   title sits dead-center over its column. Player stays left (text column);
   the book columns keep their left two-line O/U blocks. This replaces the
   old nth-child(5) rules, which were off-by-one — they centered the empty
   DFS-tag column (5th) instead of the % Chance column (6th), leaving its
   pill stuck on the left while the header sat centered. */
.data-table tbody td.stat-cell,
.data-table tbody td.ou-cell-wrap,
.data-table tbody td.line-cell,
.data-table tbody td.edge-cell,
.data-table tbody td.consensus-cell {
  text-align: center;
}

/* Even, tight horizontal rhythm: every leading-cluster column uses the
   same 8px side padding as the book columns, so the gaps between Line,
   Chance to Hit, Consensus and the first DFS book column read uniform —
   no wide gaps. Player keeps a roomier text column. */
.data-table .player-cell    { min-width: 160px; padding-left: 12px; padding-right: 12px; }
.data-table th.th-center    { padding-left: 8px; padding-right: 8px; }
.data-table .stat-cell      { padding-left: 8px; padding-right: 8px; }
.data-table .ou-cell-wrap   { padding-left: 8px; padding-right: 8px; }
.data-table .line-cell      { padding-left: 8px; padding-right: 8px; }
.data-table .edge-cell      { padding-left: 8px; padding-right: 8px; }
.data-table .consensus-cell { padding-left: 8px; padding-right: 8px; }

/* Book cells: keep contents left-aligned and snug. */
.data-table .book-cell-wrap {
  text-align: left;
  padding-left: 8px;
  padding-right: 8px;
}
.data-table .book-cell-wrap .book-cell {
  text-align: left;
}

/* ============================================================
   === EDIT: Flex Tier Selector (bar control) ===
   ============================================================ */
.flex-tier-wrap {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  margin-right: 8px;
}
.flex-tier-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  font-weight: 600;
}
.flex-tier-select {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  min-width: 140px;
}
.flex-tier-select:hover { border-color: var(--color-accent); }

/* ============================================================
   === EDIT: Calculator Vertical Splits (per Task 4 original prompt) ===
   Applied to: Arbitrage, Parlay, Kelly Criterion, No-Vig Fair Odds.
   Layout: title + inputs on the LEFT, output panel on the RIGHT.
   Uses CSS grid with a 1.1fr / 1fr split — left slightly wider to
   accommodate longer input rows. The .calc-output child slides into
   the right column; everything else stays in the left.

   On mobile (≤768px), the split collapses to a single stacked column
   so inputs stay above results (no horizontal scroll).
   ============================================================ */
.calc-card.calc-split-vertical {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  max-width: 100% !important;   /* override size-50/size-20 caps */
  width: 100%;
  padding: 28px 32px;
}
/* Force calc-size-50 + calc-size-20 to stretch full width inside split */
.calc-card.calc-size-50.calc-split-vertical,
.calc-card.calc-size-20.calc-split-vertical {
  max-width: 100% !important;
}
.calc-card.calc-split-vertical > .calc-head {
  grid-column: 1;
  margin-bottom: 0;
}
.calc-card.calc-split-vertical > .calc-controls,
.calc-card.calc-split-vertical > .field,
.calc-card.calc-split-vertical > .field-row,
.calc-card.calc-split-vertical > .field-row-3,
.calc-card.calc-split-vertical > .leg-add,
.calc-card.calc-split-vertical > div:not(.calc-output):not(.calc-head):not(.tip-box) {
  grid-column: 1;
  min-width: 0;   /* prevent flex/grid blowout from long content */
}
.calc-card.calc-split-vertical > .calc-output {
  grid-column: 2;
  grid-row: 1 / span 99;
  margin-top: 0;
  position: sticky;
  top: 16px;
  align-self: start;
  background: var(--color-surface-2);
  border-radius: var(--radius-md);
  padding: 22px 24px;
  border: 1px solid var(--color-border);
  min-width: 0;
}
.calc-card.calc-split-vertical > .tip-box {
  grid-column: 1 / -1;
  margin-top: 12px;
}

/* Make sure input/select fields actually fill their column inside a split */
.calc-card.calc-split-vertical .field input,
.calc-card.calc-split-vertical .field select {
  width: 100%;
  box-sizing: border-box;
}
.calc-card.calc-split-vertical .field-row,
.calc-card.calc-split-vertical .field-row-3 {
  display: grid;
  gap: 12px;
}
.calc-card.calc-split-vertical .field-row    { grid-template-columns: 1fr 1fr; }
.calc-card.calc-split-vertical .field-row-3  { grid-template-columns: 1fr 1fr 1fr; }

@media (max-width: 768px) {
  .calc-card.calc-split-vertical {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .calc-card.calc-split-vertical > .calc-output {
    grid-column: 1;
    grid-row: auto;
    position: static;
  }
}

/* ============================================================
   === EDIT: Referrals Page ===
   ============================================================ */
.referrals-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 12px 0 60px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.referrals-loading-card {
  padding: 32px;
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Counters strip */
.referrals-counters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.referrals-counter {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
}
.referrals-counter-paid   { border-color: rgba(34, 197, 94, 0.35); }
.referrals-counter-unpaid { border-color: rgba(234, 179, 8, 0.35); }
.referrals-counter-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}
.referrals-counter-value {
  font-size: 36px;
  font-weight: 800;
  color: var(--color-text);
}
.referrals-counter-paid   .referrals-counter-value { color: var(--color-green); }
.referrals-counter-unpaid .referrals-counter-value { color: var(--color-yellow); }

/* Share link card */
.referrals-share-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 24px;
}
.referrals-share-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  font-weight: 600;
}
.referrals-share-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.referrals-share-input {
  flex: 1;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  min-width: 0;
}
.referrals-copy-btn { min-width: 88px; }
.referrals-copy-btn.copied { background: var(--color-green); border-color: var(--color-green); color: #001a0e; }
.referrals-share-explainer {
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.5;
}
.referrals-offline-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-yellow);
  font-style: italic;
}

/* Signups table */
.referrals-table-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 20px;
}
.referrals-table-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 12px;
}
.referrals-empty {
  color: var(--color-text-muted);
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
}
.referrals-table {
  width: 100%;
  border-collapse: collapse;
}
.referrals-table th,
.referrals-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
}
.referrals-table th {
  color: var(--color-text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.referrals-table tbody tr:last-child td { border-bottom: 0; }
.referrals-status {
  font-weight: 600;
  font-size: 12px;
}
.referrals-status-paid   { color: var(--color-green); }
.referrals-status-unpaid { color: var(--color-yellow); }
.referrals-status-meta   { color: var(--color-text-muted); font-weight: 400; margin-left: 4px; }

@media (max-width: 600px) {
  .referrals-counters { grid-template-columns: 1fr; }
  .referrals-share-row { flex-direction: column; }
  .referrals-copy-btn { width: 100%; }
}

/* ============================================================
   === EDIT: Trial-period subtitle (under each paid-tier CTA) ===
   Tells the user a 3-day free trial precedes any charge.
   Sits directly under the .price-card-cta button.
   ============================================================ */
.price-card-trial-note {
  margin-top: 10px;
  padding: 8px 10px;
  background: rgba(224, 170, 62, 0.07);
  border: 1px solid rgba(224, 170, 62, 0.22);
  border-radius: var(--radius-sm);
  font-size: 11px;
  line-height: 1.4;
  color: var(--color-text-muted);
  text-align: center;
}
.price-card-trial-note strong {
  color: var(--color-accent);
  font-weight: 700;
}

/* ============================================================
   === EDIT: Support Page ===
   Contact form with anti-spam honeypot (CSS-hidden).
   ============================================================ */
.support-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 8px 0 60px;
}
.support-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 28px;
}
.support-field {
  margin-bottom: 18px;
}
.support-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
.support-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.support-label-row .support-label { margin-bottom: 0; }
.support-counter {
  font-size: 11px;
  color: var(--color-text-muted);
}
.support-counter-near {
  color: var(--color-yellow);
}
.support-input,
.support-textarea {
  width: 100%;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  box-sizing: border-box;
}
.support-textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--font-sans);
  line-height: 1.5;
}
.support-input:focus,
.support-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}
/* Honeypot — visible to bots, invisible to humans. Off-screen + zero size. */
.support-honey {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
.support-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.support-status {
  font-size: 13px;
  color: var(--color-text-muted);
  flex: 1;
}
.support-status-error {
  color: var(--color-red);
}
.support-success {
  text-align: center;
  padding: 24px 0;
}
.support-success-icon {
  font-size: 44px;
  color: var(--color-green);
  margin-bottom: 12px;
}
.support-success-title {
  font-size: 18px;
  color: var(--color-text);
  margin-bottom: 8px;
}
.support-success-body {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 420px;
  margin: 0 auto;
}
.support-faq-note {
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--color-text-muted);
}
.support-faq-note a {
  color: var(--color-accent);
}

/* ============================================================
   === EDIT: Verification Banners ===
   Shown on the account page:
     - .verify-banner-success — green, after successful /verify click
     - .verify-banner-warn    — yellow, on expired/invalid token redirect
     - .verify-banner-prompt  — accent, when user.verified === false (persistent)
   ============================================================ */
.verify-banner {
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid;
}
.verify-banner strong { display: inline-block; margin-right: 4px; }
.verify-banner-success {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.35);
  color: var(--color-green);
}
.verify-banner-warn {
  background: rgba(234, 179, 8, 0.10);
  border-color: rgba(234, 179, 8, 0.35);
  color: var(--color-yellow);
}
.verify-banner-prompt {
  background: rgba(224, 170, 62, 0.07);
  border-color: rgba(224, 170, 62, 0.30);
  color: var(--color-text);
}
.verify-banner-body {
  margin: 6px 0 10px;
  color: var(--color-text-muted);
  font-size: 13px;
}
.verify-banner-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.verify-banner-status {
  font-size: 13px;
  color: var(--color-text-muted);
}
.verify-banner-status-ok  { color: var(--color-green); }
.verify-banner-status-err { color: var(--color-red); }

/* ============================================================================
   === EDIT: COMPREHENSIVE MOBILE PASS ===
   Single appended block — cascade-last so it overrides earlier rules cleanly.
   CSS-only. No HTML or JS touched. No tool math affected.

   Layered breakpoints:
     ≤1024px : tablets — grid relaxation
     ≤768px  : phones landscape / small tablets — main collapse
     ≤480px  : phones portrait — polish layer

   Rules of engagement:
     - Container queries not used (Safari pre-16 support).
     - !important used sparingly to override the v1.3 SIZING OVERRIDES block
       which lives below the original mobile rules and competes.
     - Tap targets ≥ 44px (iOS) where interactive.
     - Horizontal overflow killed at the root.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   VIEWPORT HYGIENE — applies at all sizes but does no harm on desktop.
   --------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  /* Prevent any single overflowing element from creating a horizontal scroll
     that drags the whole page sideways on mobile. Individual scrolling regions
     (tables, code blocks) still scroll inside their own boundaries. */
  max-width: 100%;
  overflow-x: hidden;
}
/* Long unbreakable strings (URLs, tokens, player names) shouldn't push layout */
.support-input,
.support-textarea,
.referrals-share-input,
.referrals-table td,
.account-card-meta,
.player-name,
.player-meta {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ============================================================================
   TABLET LAYER (≤1024px)
   ============================================================================ */
@media (max-width: 1024px) {
  /* Calculators stay wide but ease padding */
  .calc-content:has(.calc-card.calc-split-vertical) { max-width: 100%; padding: 0 16px 80px; }
  /* Pricing grid: 2 columns at tablet width */
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  /* Footer: 2-column on tablet */
  .footer-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ============================================================================
   MAIN MOBILE LAYER (≤768px)
   This block is additive — there's already a 768px block earlier in the file
   that handles navbar collapse and the optimizer data-table card layout.
   These rules either reinforce or extend that coverage.
   ============================================================================ */
@media (max-width: 768px) {

  /* -- NAVBAR --
     The v1.3 sizing block forced 22px globally; that's untouchable on mobile
     (no room for the hamburger + brand + account button to coexist). Restore
     a usable mobile navbar height. */
  :root { --navbar-h: 56px; }
  .navbar { height: 56px !important; min-height: 56px !important; }
  .navbar-inner { padding: 0 14px !important; height: 56px; align-items: center; }
  .navbar-brand,
  .navbar-brand-text { font-size: 15px !important; }
  .navbar-brand svg,
  .navbar-brand img { width: 22px !important; height: 22px !important; }
  .navbar-nav a,
  .navbar-dropdown-trigger { font-size: 15px !important; padding: 14px 16px !important; line-height: 1.3 !important; }
  .navbar-nav a .nav-icon,
  .navbar-dropdown-trigger svg { width: 14px !important; height: 14px !important; }
  .account-btn,
  #account-btn {
    font-size: 12px !important;
    padding: 8px 12px !important;
    height: 36px !important;
    min-width: 44px !important;
  }
  .navbar-toggle {
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .navbar-toggle svg { width: 22px !important; height: 22px !important; }
  .tier-badge-mini { font-size: 10px !important; padding: 2px 6px !important; }

  /* -- STICKY BARS --
     On phones both bars stack vertically inside the shared sticky wrapper. */
  .optimizer-bar-inner {
    padding: 10px 14px;
    gap: 10px;
    flex-direction: column;
    align-items: stretch;
  }
  .filter-bar-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 10px 14px;
    gap: 10px;
  }
  .filter-group { min-width: 0; }
  .filter-group select,
  .filter-group input { font-size: 14px; }

  /* Tool-switch buttons (Parlay Genie / Goblin Mode) */
  .tool-switch-bar { flex-wrap: wrap; gap: 8px; }
  .tool-switch-btn { flex: 1 1 auto; min-width: 0; padding: 10px 12px; font-size: 13px; }

  /* -- HERO --
     Reduce hero padding and title size. */
  .hero { padding: 40px 0 32px; }
  .hero-title { font-size: clamp(28px, 7vw, 40px) !important; line-height: 1.1; }
  .hero-sub { font-size: 15px; line-height: 1.5; padding: 0 8px; }
  .hero-cta { flex-direction: column; gap: 10px; }
  .hero-cta .btn { width: 100%; min-height: 48px; font-size: 15px; }
  .hero-stats { gap: 10px; }
  .hero-stat-value { font-size: 30px; }
  .hero-stat-label { font-size: 10px; }

  /* -- PAGE HEADER --
     Smaller titles, less vertical padding. */
  .page-header { padding: 28px 0 18px; }
  .page-title { font-size: 26px !important; line-height: 1.15; }
  .page-sub { font-size: 14px; line-height: 1.5; }

  /* -- CONTAINER --
     Ensure consistent 16px gutter everywhere. */
  .container { padding: 0 14px !important; max-width: 100%; }

  /* -- PRICING (Task 3) --
     2x2 grid on phones so all 4 tiers fit on screen and the disclaimer +
     top of the footer logo are visible without immediate scroll.
     Card internals shrink proportionally. Below 380px → single column. */
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 100% !important;
    gap: 10px;
    padding: 0 2px;
    margin-top: 12px;
  }
  .price-card {
    padding: 14px 12px !important;
    border-radius: var(--radius-md);
  }
  .price-card-name { font-size: 15px; margin-bottom: 3px; }
  .price-card-tagline {
    font-size: 10.5px;
    line-height: 1.35;
    margin-bottom: 10px;
    min-height: 0;
  }
  .price-card-price { margin-bottom: 10px; }
  .price-amount { font-size: 24px; }
  .price-period { font-size: 11px; }
  .price-strike { font-size: 12px; margin-right: 4px; }
  .price-card-features { margin: 0 0 12px; }
  .price-card-features li {
    font-size: 11.5px;
    padding: 4px 0;
    gap: 6px;
    line-height: 1.3;
  }
  .feat-check, .feat-x {
    width: 14px; height: 14px;
    font-size: 9px;
    margin-top: 2px;
  }
  .price-card-badge {
    font-size: 9px;
    padding: 2px 8px;
    top: -8px;
    letter-spacing: 0.04em;
  }
  .price-card-cta {
    min-height: 36px !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
  .pricing-billing-toggle { flex-wrap: wrap; justify-content: center; }
  .pricing-foot {
    margin-top: 20px;
    padding-bottom: 40px;
    font-size: 12px;
  }
  .pricing-foot p { font-size: 12px; line-height: 1.45; }
  .pricing-billing-terms { font-size: 11px !important; line-height: 1.4 !important; }

  /* Very small phones: fall back to single column so cards stay readable */
  @media (max-width: 379px) {
    .pricing-grid { grid-template-columns: 1fr !important; }
    .price-amount { font-size: 28px; }
  }

  /* -- DATA TABLE CARD LAYOUT --
     Per-book cell styling now lives in the Task 1 block above (3-col grid
     of compact book tiles). The legacy rules that placed book rows inline
     have been removed to prevent conflicts. */
  /* Center cells default-aligned for desktop; reset for mobile card view */
  .data-table tbody td.consensus-cell,
  .data-table tbody td.line-cell,
  .data-table tbody td.ou-cell-wrap { text-align: left; }
  /* The "% Hit" cell looks weird centered in card layout — left align */
  .data-table tbody td:nth-child(5) { text-align: left; }

  /* -- ARBITRAGE & SCREEN TABLES --
     These have too many columns to card-collapse cleanly. Keep horizontal
     scroll but make it obvious with a subtle visual cue at the right edge. */
  .arb-table-wrap,
  .screen-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  .arb-table-wrap::after,
  .screen-table-wrap::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 24px;
    background: linear-gradient(90deg, transparent, var(--color-bg));
    pointer-events: none;
  }

  /* -- CALCULATORS --
     The split-vertical already collapses at 768px (rule from earlier). Pad
     the calc card and ensure all field inputs fill width. */
  .calc-card { padding: 18px 16px !important; }
  .calc-content { padding: 0 4px 60px; }
  .calc-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    padding: 4px;
    gap: 4px;
  }
  .calc-tabs button,
  .calc-tab { flex-shrink: 0; padding: 10px 14px; font-size: 13px; min-height: 40px; }
  .calc-title { font-size: 20px; }
  .calc-desc { font-size: 13px; }
  .output-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .output-card-value { font-size: 22px; }
  .calc-card .field input,
  .calc-card .field select,
  .calc-card .field textarea {
    width: 100%;
    min-height: 44px;
    font-size: 16px;  /* iOS won't zoom on focus if font-size ≥ 16px */
  }
  /* American/Decimal toggle + Round switch */
  .calc-controls { flex-wrap: wrap; gap: 10px; }

  /* -- MODALS --
     Bottom-sheet style: full width with a top-margin to feel like a sheet. */
  #modal-login,
  #modal-register,
  .modal-card {
    max-width: 100% !important;
    width: calc(100% - 24px) !important;
    margin: 12px auto !important;
    padding: 22px 20px !important;
    border-radius: 14px !important;
  }
  .modal-card input { min-height: 44px; font-size: 16px; }
  .modal-card .btn { min-height: 44px; width: 100%; }

  /* -- FOOTER --
     Stack columns; center-align content. */
  .footer-cols {
    grid-template-columns: 1fr !important;
    gap: 24px;
    text-align: center;
  }
  .footer-col h4 { margin-bottom: 8px; }
  .footer-col a { padding: 6px 0; display: inline-block; }
  .footer-business,
  .footer-risk-disclaimer,
  .footer-disclaimer { font-size: 12px; padding: 0 4px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }

  /* -- ACCOUNT DASHBOARD --
     Single-column cards. */
  .account-dashboard {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .account-card { padding: 18px 16px; }
  .account-card-title { font-size: 14px; }
  .account-card-value { font-size: 22px; }

  /* -- REFERRALS PAGE -- */
  .referrals-wrap { padding: 6px 0 40px; gap: 18px; }
  .referrals-share-card,
  .referrals-table-card { padding: 18px 16px; }
  .referrals-share-row { flex-direction: column; gap: 10px; }
  .referrals-copy-btn { width: 100%; min-height: 44px; }
  .referrals-share-input { min-height: 44px; font-size: 16px; }
  .referrals-counters { gap: 10px; }
  .referrals-counter { padding: 14px 10px; }
  .referrals-counter-value { font-size: 26px; }
  .referrals-counter-label { font-size: 10px; }
  .referrals-table th,
  .referrals-table td { padding: 8px 6px; font-size: 12px; }

  /* -- SUPPORT PAGE -- */
  .support-wrap { padding: 4px 0 40px; }
  .support-card { padding: 20px 16px; }
  .support-input,
  .support-textarea { min-height: 44px; font-size: 16px; }
  .support-textarea { min-height: 130px; }
  .support-action-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .support-action-row .btn { width: 100%; min-height: 48px; }

  /* -- PROMO GENIE -- */
  .promo-picker-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .promo-customize-row { grid-template-columns: 1fr; gap: 12px; }
  .promo-expand-grid { grid-template-columns: 1fr; gap: 10px; }
  .promo-form-pane,
  .promo-results-pane { width: 100%; padding: 16px; }
  .promo-summary-grid { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* -- DEPOSIT OPTIMIZER -- */
  .deposit-layout {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .deposit-card { padding: 18px 16px; }
  .deposit-donut-wrap { max-width: 280px; margin: 0 auto; }

  /* -- VERIFICATION BANNER on small screens -- */
  .verify-banner { padding: 12px 14px; font-size: 13px; }
  .verify-banner-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .verify-banner-actions .btn { width: 100%; }

  /* -- ADMIN PANEL -- */
  .admin-table { font-size: 12px; }
  .admin-table th,
  .admin-table td { padding: 8px 6px; }
  .admin-controls { flex-direction: column; align-items: stretch; gap: 10px; }
  .admin-locked-msg { padding: 24px 18px; }

  /* -- TIP / WARNING BOXES -- */
  .tip-box,
  .calc-risk-disclaimer { font-size: 12px; padding: 12px 14px; }

  /* -- BUTTONS — global 44px min-height tap-target rule on phones -- */
  .btn { min-height: 44px; padding: 10px 16px; font-size: 14px; }
  .btn-sm { min-height: 36px; padding: 8px 12px; font-size: 13px; }
  .btn-block { width: 100%; }

  /* -- INPUTS — universal 16px font-size to prevent iOS zoom-on-focus -- */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  select,
  textarea {
    font-size: 16px;
  }

  /* -- ROW-DENSITY toggle on mobile is moot (cards anyway) — hide for clarity -- */
  .row-density-bar { display: none; }
}

/* ============================================================================
   PHONE PORTRAIT LAYER (≤480px) — final polish layer
   ============================================================================ */
@media (max-width: 480px) {
  /* Tighter hero / page header to maximize content visibility */
  .hero { padding: 32px 0 24px; }
  .hero-title { font-size: clamp(24px, 7vw, 32px) !important; }
  .hero-sub { font-size: 14px; padding: 0 4px; }
  .hero-stats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-stat-value { font-size: 24px; }
  .page-title { font-size: 22px !important; }
  .page-header { padding: 20px 0 14px; }

  /* Container becomes tighter */
  .container { padding: 0 12px !important; }

  /* Calc tabs: shorter labels (text already abbreviated where possible) */
  .calc-tabs button,
  .calc-tab { font-size: 12px; padding: 8px 11px; }

  /* Tool toggle buttons get a touch smaller to fit "Parlay Genie | Goblin Mode" comfortably */
  .tool-switch-btn { font-size: 12px; padding: 9px 10px; }

  /* Sticky bar: tighter padding */
  .optimizer-bar-inner { padding: 8px 12px; gap: 6px; }
  .filter-bar-inner { padding: 8px 12px; gap: 8px; }

  /* Pricing card: more comfortable on very narrow screens */
  .price-card { padding: 20px 16px !important; }
  .price-card-price { font-size: 28px; }
  .price-card-features li { font-size: 13px; }

  /* Data table card collapse — tighter inner spacing */
  .data-table tbody tr { padding: 10px; margin-bottom: 10px; }
  .data-table td { padding: 5px 0; grid-template-columns: 88px 1fr; }
  .data-table td::before { font-size: 10px; }

  /* Referrals counters stack at 480px */
  .referrals-counters { grid-template-columns: 1fr !important; }

  /* Promo picker grid: 1 column at smallest width */
  .promo-picker-grid { grid-template-columns: 1fr; }
  .promo-summary-grid { grid-template-columns: 1fr; }

  /* Footer columns center-aligned content */
  .footer-business,
  .footer-risk-disclaimer,
  .footer-disclaimer { font-size: 11px; line-height: 1.5; }

  /* Modal slightly tighter */
  .modal-card { padding: 18px 14px !important; margin: 8px auto !important; }
  .modal-card h2 { font-size: 18px; }

  /* Calculator inner spacing */
  .calc-card { padding: 16px 12px !important; }
  .calc-title { font-size: 18px; }
  .output-card { padding: 12px; }
  .output-card-value { font-size: 18px; }
}

/* ============================================================================
   END MOBILE PASS
   ============================================================================ */

/* ============================================================================
   === EDIT: Expandable row + Min Consensus slider styles ===
   Pure-display panel that drops beneath a clicked data-row in the Parlay
   Genie / Optimizer table. Renders a grid of book boxes (logo + over/under
   prices) for every book that quoted the line, including books not shown
   as columns and DFS pick'em apps.

   No state of its own — driven entirely by state.optimizer.expandedRowId.
   The JS sets a `.data-row-expanded` class on the source row and emits a
   sibling `<tr class="data-row-expanded-panel">` that holds the panel.
   ============================================================================ */

/* Source row when expanded: subtle highlight + accent border underneath */
.data-table .data-row.data-row-expanded {
  background: rgba(255, 255, 255, 0.025);
}
.data-table .data-row.data-row-expanded > td {
  border-bottom-color: var(--color-accent, #2dd4bf);
}

/* Cursor affordance on clickable rows */
.data-table .data-row[style*="cursor"] {
  transition: background-color 120ms ease;
}
.data-table .data-row[style*="cursor"]:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* The expanded panel row itself — full-table-width <tr> */
.data-table .data-row-expanded-panel {
  background: rgba(255, 255, 255, 0.02);
}
.data-table .data-row-expanded-panel > td.expanded-panel-cell {
  padding: 0;
  border-bottom: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
}
.expanded-panel-inner {
  padding: 18px 24px 22px;
}
.expanded-panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--color-text-muted, #94a3b8);
  flex-wrap: wrap;
}
.expanded-panel-heading > span:first-child {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}
.expanded-panel-line {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text, #e2e8f0);
  font-size: 12px;
}
.expanded-panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.expanded-book-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08));
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.expanded-book-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--color-text, #e2e8f0);
}
.expanded-book-head .book-logo {
  flex: 0 0 auto;
}
.expanded-book-name {
  font-size: 11px;
  color: var(--color-text-muted, #94a3b8);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.expanded-book-prices {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.expanded-bk-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.expanded-bk-row > span:first-child {
  color: var(--color-text-muted, #94a3b8);
  font-weight: 600;
}
.expanded-bk-row > span:last-child {
  color: var(--color-text, #e2e8f0);
  font-variant-numeric: tabular-nums;
}
.expanded-panel-empty {
  color: var(--color-text-muted, #94a3b8);
  font-style: italic;
  padding: 10px 4px;
}

/* === EDIT: Min Consensus slider — matches Min Books / Min Edge styling === */
#filter-min-consensus {
  width: 100%;
}
#min-consensus-val {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ----------------------------------------------------------------------
   Mobile (≤768px): collapse expanded panel into a single column.
   The data-table itself already restacks via the existing mobile pass,
   so we just need the panel grid to follow suit.
   ---------------------------------------------------------------------- */
@media (max-width: 768px) {
  .expanded-panel-inner {
    padding: 14px 16px 18px;
  }
  .expanded-panel-heading {
    font-size: 12px;
  }
  .expanded-panel-grid {
    /* On phones, two columns max — boxes stay readable */
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
  }
  .expanded-book-box {
    padding: 8px 10px;
  }
  .expanded-book-head {
    font-size: 11px;
    gap: 6px;
  }
  .expanded-bk-row {
    font-size: 12px;
  }
}
/* ============================================================================
   === EDIT: Task 2 — Mobile Navbar Authoritative Override ===
   ----------------------------------------------------------------------------
   Resolves cascade conflicts between the base navbar rules (≈L175), the
   global navbar-shrink overrides at ≈L2629 / L3183 (which leak onto mobile
   and break the drawer collapse), and the earlier mobile blocks at L2489 /
   L3146 / L5074.
   This block lives at the end of the file so it wins the cascade, and uses
   !important on the critical drawer behavior properties. Without this, the
   navbar-nav items render inline inside the 56px header bar instead of
   collapsing into a hidden drawer that drops down on hamburger tap.
   ============================================================================ */
@media (max-width: 768px) {
  :root { --navbar-h: 56px; }

  /* Header bar: fixed 56px, brand-left / cta-right, no nav inline */
  .navbar {
    height: 56px !important;
    min-height: 56px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .navbar-inner {
    height: 56px !important;
    min-height: 56px !important;
    padding: 0 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px;
    position: relative;
  }
  .navbar-brand {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    font-size: 16px !important;
    gap: 8px;
  }
  .navbar-brand svg,
  .navbar-brand img,
  .logo {
    width: 22px !important;
    height: 22px !important;
  }
  .navbar-brand-text { font-size: 16px !important; }

  /* Drawer: hidden by default, slides down from below the header on .open */
  .navbar-nav {
    position: absolute !important;
    top: 56px !important;
    left: 0 !important;
    right: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    height: auto !important;
    background: var(--color-surface) !important;
    border-bottom: 1px solid var(--color-border-strong) !important;
    border-top: 1px solid var(--color-border) !important;
    padding: 10px 12px 14px !important;
    gap: 4px !important;
    transform: translateY(-150%) !important;
    transition: transform var(--transition);
    z-index: 99;
    box-shadow: var(--shadow-md);
    pointer-events: none;
    visibility: hidden;
  }
  .navbar-nav.open {
    transform: translateY(0) !important;
    pointer-events: auto;
    visibility: visible;
  }
  .navbar-nav a,
  .navbar-dropdown-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100%;
    height: auto !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    box-sizing: border-box;
    border-radius: var(--radius-sm);
  }
  .navbar-dropdown {
    display: block !important;
    width: 100%;
    height: auto !important;
    position: relative;
  }
  .navbar-dropdown-trigger {
    justify-content: space-between !important;
  }
  .navbar-dropdown-menu {
    position: static !important;
    display: none;
    margin: 2px 0 6px 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    background: var(--color-surface-2) !important;
    padding: 4px !important;
    min-width: 0 !important;
  }
  .navbar-dropdown[aria-expanded="true"] .navbar-dropdown-menu,
  .navbar-dropdown.open .navbar-dropdown-menu {
    display: block !important;
  }
  .navbar-dropdown-menu a {
    padding: 11px 14px !important;
    font-size: 14px !important;
  }

  /* CTA group on the right: account button + hamburger */
  .navbar-cta {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    height: auto !important;
  }
  .account-btn,
  #account-btn {
    display: inline-flex !important;
    align-items: center !important;
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    gap: 6px;
    min-width: 0;
  }
  .account-btn svg,
  #account-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
  .tier-badge-mini {
    font-size: 9px !important;
    padding: 2px 5px !important;
  }
  .navbar-toggle {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    gap: 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }
  .navbar-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--color-text);
    border-radius: 2px;
    transition: all var(--transition);
  }

  /* Push page content down by the new (mobile) navbar height */
  .page,
  section.page {
    padding-top: 56px !important;
  }
}

/* ============================================================================
   === EDIT: BRAND INTEGRATION (FS Parlay Genie wordmark, hero video,
              brand stamp, navbar/footer/modal logo treatments) ===
   ----------------------------------------------------------------------------
   Lives at the very end of the file so brand-specific selectors win the
   cascade against existing utility/layout rules. Gold appears ONLY inside
   `.brand-wordmark` — the rest of the UI keeps teal as the primary accent.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Gradient wordmark — FS (cyan) → Parlay (white) → Genie (gold)
   ---------------------------------------------------------------------------- */
.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
  white-space: nowrap;
}
.brand-wordmark .bw-fs,
.brand-wordmark .bw-parlay,
.brand-wordmark .bw-genie {
  display: inline-block;
}
.brand-wordmark .bw-fs {
  background: linear-gradient(180deg, #fcf9f1 0%, #dcd6c6 52%, #b0a994 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}
.brand-wordmark .bw-parlay {
  /* === EDIT: Parlay gold matches Genie gold — same gradient === */
  background: linear-gradient(180deg, #f5cb6a 0%, var(--color-gold) 50%, #b9842b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 700;
}
.brand-wordmark .bw-genie {
  background: linear-gradient(180deg, #f5cb6a 0%, var(--color-gold) 50%, #b9842b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-weight: 800;
}
/* When the wordmark sits in a header where the parent already controls color,
   keep the gradient stops working even if currentColor cascades down. */
.brand-wordmark { color: var(--color-text); }

/* ----------------------------------------------------------------------------
   2. Navbar brand — image logo + wordmark
   ---------------------------------------------------------------------------- */
.navbar-brand-logo {
  /* === EDIT (Task 1): bumped +40% for desktop visibility (was 28px) === */
  width: 50px;
  height: 50px;
  object-fit: contain;
  display: inline-block;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  transition: transform var(--transition);
}
.navbar-brand:hover .navbar-brand-logo {
  transform: translateY(-1px) scale(1.04);
}
.navbar-brand {
  /* === EDIT (Task 1): gap scaled proportionally with the larger logo === */
  gap: 13px;
}
.navbar-brand-text.brand-wordmark {
  /* === EDIT (Task 1): wordmark bumped +40% (was 17px) === */
  font-size: 24px;
}
/* Override the shrunken navbar wordmark size from the L2629 / L3183 blocks */
/* === EDIT (Task 1): bumped from 15px to 24px so the navbar wordmark wins
   the cascade at the larger size === */
.navbar .brand-wordmark { font-size: 24px; }
.navbar .brand-wordmark .bw-fs,
.navbar .brand-wordmark .bw-parlay,
.navbar .brand-wordmark .bw-genie {
  font-size: inherit;
}

/* ----------------------------------------------------------------------------
   3. Global background video — fixed behind all pages, dimmed + blurred
   ---------------------------------------------------------------------------- */
.hero { isolation: isolate; }
.global-video-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  opacity: 0.33;
  filter: blur(3px) saturate(110%);
  /* Subtle parallax-ready scale — keeps blur edges off-canvas */
  transform: translate(-50%, -50%) scale(1.06);
}
.hero-video-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 50%, transparent 0%, rgba(11, 10, 10, 0.55) 70%, rgba(11, 10, 10, 0.85) 100%),
    linear-gradient(180deg, rgba(11, 10, 10, 0.35) 0%, rgba(11, 10, 10, 0.70) 100%);
  z-index: 1;
}
/* Push the existing hero-bg gradient above the video overlay so the teal/purple
   glow still reads, but below the text. */
.hero-bg { z-index: 2; opacity: 0.7; }
.hero-inner { position: relative; z-index: 3; }

/* Reduced motion: pause + hide video, lean on poster gradient */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-video-overlay { background: rgba(11, 10, 10, 0.35); }
}

/* ----------------------------------------------------------------------------
   4. Hero brand stamp — slim lockup above the title
   ---------------------------------------------------------------------------- */
.hero-brand-stamp {
  display: inline-flex;
  align-items: center;
  /* === EDIT (Task 1): gap scaled proportionally with larger logo === */
  gap: 16px;
  margin: 0 auto 22px;
  padding: 0;
  max-width: 100%;
}
.hero-brand-rule {
  /* === EDIT (Task 1): rule length scaled +30% to match larger stamp === */
  flex: 0 0 73px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(224, 170, 62, 0.55) 50%, transparent 100%);
}
.hero-brand-stamp-logo {
  /* === EDIT (Task 1): bumped to 42px (+30% from scope target 32) === */
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(224, 170, 62, 0.45));
}
.hero-brand-stamp-text.brand-wordmark {
  /* === EDIT (Task 1): bumped to 29px (+30% from scope target 22) === */
  font-size: 29px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hero-brand-stamp-text.brand-wordmark .bw-fs,
.hero-brand-stamp-text.brand-wordmark .bw-parlay,
.hero-brand-stamp-text.brand-wordmark .bw-genie {
  letter-spacing: inherit;
}

/* ----------------------------------------------------------------------------
   5. Footer brand — image logo + wordmark
   ---------------------------------------------------------------------------- */
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.footer-brand-logo {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.footer-brand-text.brand-wordmark {
  font-size: 19px;
}

/* ----------------------------------------------------------------------------
   6. Modal brand mark — centered above modal title
   ---------------------------------------------------------------------------- */
.modal-brand-mark {
  display: flex;
  justify-content: center;
  margin: 4px 0 14px;
}
.modal-brand-mark img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(224, 170, 62, 0.22));
}
.modal-title .brand-wordmark {
  font-size: inherit;
  vertical-align: baseline;
}

/* ----------------------------------------------------------------------------
   7. Mobile responsive — keep brand lockups tight on small screens
   ---------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .navbar-brand-logo {
    /* === EDIT (Task 1): mobile navbar logo +40% (was 24px) === */
    width: 42px !important;
    height: 42px !important;
  }
  /* === EDIT (Task 1): mobile wordmark +40% (was 14px) === */
  .navbar .brand-wordmark { font-size: 20px !important; }
  /* === EDIT (Task 1): gap scaled with larger logo === */
  .navbar-brand { gap: 10px !important; }

  .hero-brand-stamp {
    /* === EDIT (Task 1): gap scaled for larger stamp === */
    gap: 12px;
    margin-bottom: 14px;
  }
  /* === EDIT (Task 1): rule length scaled with stamp === */
  .hero-brand-rule { flex-basis: 48px; }
  .hero-brand-stamp-logo {
    /* === EDIT (Task 1): mobile +30% (was 18px), target 32px === */
    width: 32px;
    height: 32px;
  }
  .hero-brand-stamp-text.brand-wordmark {
    /* === EDIT (Task 1): mobile +30% (was 11px), target 22px === */
    font-size: 22px;
    letter-spacing: 0.14em;
  }

  /* === EDIT (Task 2a): Mobile video MUCH more visible ===
     User reported near-total invisibility on iOS Safari. Bumped opacity,
     reduced blur, and lightened both overlay gradients ~30%. */
  .hero-video {
    opacity: 0.55;
    filter: blur(0.5px) saturate(115%);
  }
  .hero-video-overlay {
    background:
      radial-gradient(ellipse 80% 50% at 50% 50%, transparent 0%, rgba(11, 10, 10, 0.25) 70%, rgba(11, 10, 10, 0.50) 100%),
      linear-gradient(180deg, rgba(11, 10, 10, 0.18) 0%, rgba(11, 10, 10, 0.42) 100%);
  }

  .footer-brand-logo { width: 28px; height: 28px; }
  .footer-brand-text.brand-wordmark { font-size: 17px; }

  .modal-brand-mark img { width: 38px; height: 38px; }
}

/* Very small phones: rule lines shrink further, wordmark stays readable */
@media (max-width: 380px) {
  .hero-brand-rule { flex-basis: 20px; }
  .hero-brand-stamp-text.brand-wordmark {
    font-size: 10px;
    letter-spacing: 0.12em;
  }
}

/* ----------------------------------------------------------------------------
   8. Print + dark-mode safety — fallback so the wordmark text still reads
      if the gradient -webkit-text-fill-color trick fails (e.g. some screen
      readers / older browsers). The fallback color is the existing teal
      accent so brand recognition survives degraded environments.
   ---------------------------------------------------------------------------- */
@supports not (-webkit-background-clip: text) {
  .brand-wordmark .bw-fs    { color: var(--color-accent); -webkit-text-fill-color: currentColor; }
  .brand-wordmark .bw-parlay { color: var(--color-gold);   -webkit-text-fill-color: currentColor; }
  .brand-wordmark .bw-genie { color: var(--color-gold);   -webkit-text-fill-color: currentColor; }
}

/* ============================================================================
   === EDIT: Trial-Cancel Modal + Live-Row Badge ===
   ----------------------------------------------------------------------------
   Trial-cancel modal: alertdialog variant of the existing .modal base. Reuses
   modal-backdrop, modal-close, btn-primary, btn-danger. Adds a centered
   warning icon, a list of revoked tools, and a two-button action row.
   Live-row badge: small "LIVE" pill applied to in-play rows in the Optimizer
   data table (Phase 4 of the Live Betting fix, CSS-only — no markup needed
   because the row already gets a data-live attribute from the renderer).
   ============================================================================ */

/* ---- Cancel modal shared ---- */
.modal.modal-warning {
  max-width: 460px;
  text-align: center;
}
.modal-warning-icon {
  display: flex;
  justify-content: center;
  margin: 4px 0 14px;
  color: var(--color-amber, #f59e0b);
}
.modal-warning-icon svg {
  filter: drop-shadow(0 2px 12px rgba(245, 158, 11, 0.35));
}
.modal-warning-lead {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
  margin: 0 0 14px;
}
.modal-warning-lead strong {
  color: var(--color-red);
  font-weight: 700;
}
.modal-warning-note {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 14px 0 0;
}
.modal-body {
  margin-bottom: 22px;
}
.modal-list {
  list-style: none;
  padding: 14px 16px;
  margin: 14px 0 0;
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-align: left;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 14px;
}
.modal-list li {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 3px 0 3px 18px;
  position: relative;
  line-height: 1.4;
}
.modal-list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-red);
  opacity: 0.7;
}
.modal-actions {
  display: flex;
  gap: 10px;
  flex-direction: row-reverse; /* danger on the right (primary "Keep" gets the eye-line on the left) */
  justify-content: stretch;
}
.modal-actions .btn {
  flex: 1 1 50%;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 14px;
}
.modal-actions .btn-primary {
  /* Keep button — visually dominant so the safer action is the easy choice */
  box-shadow: 0 0 0 3px rgba(224, 170, 62, 0.22);
}

/* Mobile: stack the action buttons full-width with the safer action on top */
@media (max-width: 768px) {
  .modal.modal-warning,
  #modal-cancel-standard {
    max-width: 100%;
    padding: 24px 20px;
  }
  .modal-warning-icon svg { width: 38px; height: 38px; }
  .modal-warning-lead { font-size: 14px; }
  .modal-list {
    grid-template-columns: 1fr;
    padding: 12px 14px;
    gap: 4px;
  }
  .modal-list li { font-size: 12.5px; }
  .modal-actions {
    flex-direction: column;
  }
  .modal-actions .btn {
    width: 100%;
  }
}

/* ---- LIVE row indicator (Phase 4 of Live Betting fix) ----
   The Optimizer renderer adds class "is-live" to <tr> elements whose
   commence_time has passed. We don't duplicate the inline "LIVE" pill
   already drawn inside .player-meta — instead we add a subtle red
   left-edge accent so the row scans as live at a glance. */
.data-table tbody tr.is-live {
  box-shadow: inset 3px 0 0 var(--color-red);
}
/* On mobile card view, the same accent appears as a top border instead */
@media (max-width: 768px) {
  .data-table tbody tr.is-live {
    box-shadow: inset 0 3px 0 var(--color-red);
  }
}

/* ============================================================================
   === EDIT (Task 2): DFS-alt tag column (goblin/demon badges) ===
   ----------------------------------------------------------------------------
   New column sits between LINE and % CHANCE TO HIT. Always rendered (column
   structure stays consistent across Parlay Genie and Goblin Mode so per-book
   grids align), but the cell is empty for Parlay Genie rows since r.goblin
   and r.demon are only set on Goblin Mode rows.
   ============================================================================ */

/* Column header: narrow, centered, no visible text (the badges speak for
   themselves; the title attr provides hover hint) */
.data-table thead th.dfs-tag-th {
  width: 36px;
  min-width: 36px;
  padding-left: 4px;
  padding-right: 4px;
}

/* Cell: narrow, centered, vertical middle so the SVG sits flush with adjacent
   numeric cells */
.data-table tbody td.dfs-tag-cell {
  width: 36px;
  min-width: 36px;
  padding-left: 4px;
  padding-right: 4px;
  text-align: center;
  vertical-align: middle;
  line-height: 1;
}

/* Only Goblin Mode sets r.goblin / r.demon, so this column is always empty
   in Parlay Genie and HR Builder (neither table carries the .goblin-mode
   class). Collapse it to zero width there — removes the empty gap between
   LINE and CHANCE TO HIT. Goblin Mode keeps the 36px column for its badges. */
.data-table:not(.goblin-mode) thead th.dfs-tag-th,
.data-table:not(.goblin-mode) tbody td.dfs-tag-cell {
  width: 0;
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

/* The inline SVG icon itself */
.dfs-tag-icon {
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  /* Subtle drop-shadow gives the small icons a touch of pop without
     competing with the colored edge-badge in the next column */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
  transition: transform 120ms ease;
}
/* Tiny hover affordance — slight scale-up to confirm it's a meaningful icon */
.data-table tbody tr:hover .dfs-tag-icon {
  transform: scale(1.12);
}

/* Mobile stacked-card layout (≤768px): hide empty PP cells so Parlay Genie
   rows don't grow a blank "PP" label row inside each card. Goblin Mode rows
   that have an actual badge still render. */
@media (max-width: 768px) {
  .data-table tbody td.dfs-tag-cell:empty {
    display: none;
  }
  /* Non-empty PP cell on mobile: render with the same label/value pattern
     as other cells (label on left, badge on right) so it stacks cleanly
     inside the card. The existing 72px label column handles the layout. */
  .data-table tbody td.dfs-tag-cell:not(:empty) {
    text-align: left;
    justify-content: start;
  }
}

/* ============================================================================
   === EDIT (Task 6): No-Vig modal trigger styling ===
   ----------------------------------------------------------------------------
   Two access points to the No-Vig Fair Odds modal:
     1. Per-row 🧮 icon inline within the % Chance to Hit cell
     2. Global "🧮 No-Vig Calc" button in the Parlay Genie filter bar
   ============================================================================ */

/* Per-row icon button — small, unobtrusive, sits to the right of the %Hit
   badge. pointer-events stay on so the row's own click handlers don't
   accidentally swallow it (event.stopPropagation in the JS handler handles
   the row-expand bubbling). */
.row-novig-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 2px 6px;
  font-size: 13px;
  line-height: 1;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  vertical-align: middle;
  transition: all var(--transition);
}
.row-novig-btn:hover {
  background: var(--color-accent-dim);
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: scale(1.06);
}
.row-novig-btn:active { transform: scale(0.96); }

/* Global filter-bar button — matches the existing .filter-reset visual
   weight so they read as a related pair. */
.filter-novig {
  /* Inherits .btn .btn-ghost .btn-sm. Just tweak letter-spacing so the
     emoji and label space cleanly. */
  letter-spacing: 0.02em;
}

/* Modal body — when the No-Vig modal opens, its body uses the same .field
   and .calc-output structure as the standalone calc. Override max-width
   to keep the modal compact. */
#modal-novig-calc .modal-body {
  max-width: 100%;
}
#modal-novig-calc .field {
  margin-bottom: 14px;
}
#modal-novig-calc .calc-output {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}
#modal-novig-calc .outcome-block {
  margin-bottom: 10px;
}
#modal-novig-calc .outcome-block:last-child {
  margin-bottom: 0;
}

/* Mobile: per-row button shrinks slightly, filter-bar button stays single-line */
@media (max-width: 768px) {
  .row-novig-btn {
    margin-left: 6px;
    padding: 1px 5px;
    font-size: 12px;
  }
  .filter-novig {
    font-size: 12px;
    white-space: nowrap;
  }
}

/* ============================================================
   2026-06-01 UI REFINEMENTS (minor changes pass)
   Tasks 1-7. Appended last so these win the cascade where
   specificity ties earlier rules.
   ============================================================ */

/* --- Task 1: remove the large gap above Bar 1 on the optimizer page.
   The global `section.page { padding-top }` rule was pushing the whole
   sticky unit down off the navbar. Zero it here so Bar 1 hugs the navbar. */
section.page-optimizer { padding-top: 0; }
@media (max-width: 768px) {
  section.page-optimizer { padding-top: 0; }
}

/* --- Task 2: timestamp hangs centered directly above the Refresh button,
   and the whole timestamp+button unit is scaled to 75%. */
.refresh-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  transform: scale(0.75);
  transform-origin: center right;
}
.refresh-stack .last-refreshed { text-align: center; }

/* --- Task 3: bring "Search Player" label down so it hangs directly above
   the search box (matching how Flex Tier sits above its select). The Reset
   button shares the label row but the label now bottom-aligns to the box. */
.filter-search-group { gap: 3px; }
/* Head shrinks to its content and left-aligns above the box, so "Search
   Player" hangs left and Reset sits just to its right with a tiny gap. */
.filter-search-head {
  align-items: flex-end;
  justify-content: flex-start;
  width: max-content;
  max-width: 100%;
  gap: 6px;
}
/* "Search Player" label: 50% smaller (11px -> 5.5px). */
.filter-search-head label { font-size: 5.5px; }
/* Reset button: 40% smaller (font 12 -> 7.2px, padding scaled to match). */
.filter-search-head .filter-reset { padding: 2.4px 6px; font-size: 7.2px; }

/* --- Task 4 / slider sizing: all stat sliders share one width. Min Consensus
   had an ID rule (`#filter-min-consensus { width:100% }`) that made it wider
   than Min Books; both are now equal and set to 75% of the prior 104px width.
   104 * 0.75 = 78px. The ID override below beats the `width:100%` rule. */
.filter-slider-row input[type="range"] { width: 78px; }
#filter-min-consensus { width: 78px; }
.table-zoom-slider { width: 80px; }

/* --- Player search box: ~30% longer than the prior 110px -> 143px. */
.filter-bar-right .filter-group-grow input[type="text"] {
  min-width: 143px;
  width: 143px;
}

/* --- Task 5: Sport / Stat Types / Side controls equal size and aligned.
   They previously mixed control heights (the Side toggle was shorter) and
   the Side label carried extra margin, throwing the baseline off. */
.optimizer-bar-left .filter-group { align-self: flex-end; }
.optimizer-bar-left .filter-group > label,
.optimizer-bar-left .filter-group .filter-label {
  margin-bottom: 0;
  line-height: 1.3;
}
.optimizer-bar-left #filter-sport,
.optimizer-bar-left .multi-select-trigger,
.optimizer-bar-left .ou-toggle {
  box-sizing: border-box;
  height: 38px;
  width: 160px;
  min-width: 160px;
}
.optimizer-bar-left .ou-toggle { align-items: stretch; padding: 3px; }
.optimizer-bar-left .ou-btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}

/* --- Task 6 (revised): the Stat Types dropdown renders IN FRONT of Bar 2 so
   it stays fully visible. Bar 2 must NOT sit above it, and the menu carries a
   z-index above the bars (but the whole sticky unit is still under the navbar). */
/* --- Task 6 (revised again): the Stat Types dropdown lives inside Bar 1,
   whose backdrop-filter creates a stacking context that TRAPS the menu — so
   bumping only the menu's z-index can't lift it above Bar 2. The real fix is
   to give Bar 1's whole stacking context a higher z-index than Bar 2's.
   Both bars get position:relative (z-index is a no-op on static blocks) and
   top:auto so the base .optimizer-bar sticky `top` doesn't shove Bar 1 down. */
.opt-sticky > .optimizer-bar { position: relative; top: auto; z-index: 2; }
.opt-sticky .filter-bar { position: relative; top: auto; z-index: 1; }
.optimizer-bar .multi-select-menu { z-index: 80; }

/* --- Task 7: page content was being covered by the fixed background-video
   overlay (z-index:0, positioned) site-wide on the arbitrage / sportsbook /
   promo pages. Lift every page (and the footer) above that layer so content
   is fully visible while transparent areas still show the faint video. */
.page,
section.page {
  position: relative;
  z-index: 1;
}
.footer {
  position: relative;
  z-index: 1;
}

/* ============================================================
   2026-06-01 — CONTROL LEGIBILITY RESTORE (all viewports)
   The earlier 5.5px "Search Player" label and 7.2px Reset were
   too small to read. Bring them back in line with the other
   micro-labels so the search header is legible everywhere.
   ============================================================ */
.filter-search-head label { font-size: 10px; }
.filter-search-head .filter-reset { padding: 3px 8px; font-size: 11px; }

/* ============================================================
   2026-06-01 — COMPACT CONTROL BAR PASS (desktop ≥769px)
   One unified rhythm for Bar 1 (Sport / Stat Types / Side /
   No-Vig · Flex Tier / Refresh) and Bar 2 (tool switch / PP-UD /
   Live · sliders / zoom · search):
     • control height 30px   • micro-labels 10px
     • control text 13px     • tighter, even padding + gaps
   Appended last so it wins the cascade. All bar-specific mobile
   rules live in ≤768px media blocks, so wrapping this in a
   ≥769px query leaves the mobile layout completely untouched.
   ============================================================ */
@media (min-width: 769px) {
  /* --- Outer padding + gaps: tighter and even on both bars --- */
  .optimizer-bar-inner { padding: 7px 20px; gap: 9px 14px; align-items: flex-end; }
  .optimizer-bar-left  { gap: 9px 12px; }
  .optimizer-bar-right { gap: 12px; }
  .filter-bar-inner    { padding: 9px 20px; gap: 10px 20px; }
  .filter-bar-left     { gap: 12px; }
  .filter-bar-center   { gap: 5px; }
  .filter-slider-row   { gap: 16px; }

  /* --- Every micro-label: one legible size --- */
  .optimizer-bar-left .filter-group > label,
  .optimizer-bar-left .filter-group .filter-label,
  .filter-bar .filter-group label,
  .flex-tier-label,
  .filter-search-head label,
  .table-zoom-label,
  .table-zoom-val { font-size: 10px; letter-spacing: 0.04em; line-height: 1.25; }

  /* --- Bar 1 left: Sport / Stat Types / Side — 30px tall, snug widths --- */
  .optimizer-bar-left #filter-sport,
  .optimizer-bar-left .multi-select-trigger,
  .optimizer-bar-left .ou-toggle {
    box-sizing: border-box;
    height: 30px;
    min-width: 0;
  }
  .optimizer-bar-left #filter-sport         { width: 112px; font-size: 13px; padding: 0 10px; }
  .optimizer-bar-left .multi-select-trigger { width: 130px; font-size: 13px; padding: 0 10px; }
  .optimizer-bar-left .ou-toggle            { width: auto; padding: 2px; align-items: stretch; }
  .optimizer-bar-left .ou-btn               { padding: 0 11px; font-size: 12px; }

  /* No-Vig Calc button — matches the 30px control height. */
  .filter-novig {
    height: 30px;
    padding: 0 11px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
  }

  /* --- Bar 1 right: Flex Tier + Refresh, same rhythm --- */
  .flex-tier-select { height: 30px; min-width: 0; width: 168px; padding: 0 8px; font-size: 12.5px; }
  .refresh-stack { transform: none; gap: 2px; }   /* drop the 0.75 shrink — keep it crisp */
  .refresh-btn { height: 30px; padding: 0 12px; font-size: 13px; }
  .refresh-stack .last-refreshed { font-size: 10px; }

  /* --- Bar 2 left: tool switch / PP-UD / Live Betting --- */
  .tool-switch { padding: 3px; }
  .tool-switch-btn { padding: 6px 12px; font-size: 13px; gap: 6px; }
  .tool-switch-icon { font-size: 15px; }
  .platform-toggle { padding: 2px; }
  .platform-btn { padding: 5px 10px; font-size: 11px; }
  .inline-switch .switch-label { font-size: 12px; }

  /* --- Bar 2 center: sliders + zoom --- */
  .filter-slider-row input[type="range"],
  #filter-min-consensus { width: 84px; }
  .table-zoom-badge { padding: 3px 10px; gap: 6px; }
  .table-zoom-slider { width: 84px; }

  /* --- Bar 2 right: search (label left, Reset right, tiny gap, box below) --- */
  .filter-search-group { gap: 3px; }
  .filter-search-head {
    width: max-content;
    max-width: 100%;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 8px;
  }
  .filter-search-head label { font-size: 10px; }
  .filter-search-head .filter-reset { padding: 3px 8px; font-size: 11px; }
  .filter-bar-right .filter-group-grow input[type="text"] {
    height: 30px;
    width: 152px;
    min-width: 152px;
    padding: 0 10px;
    font-size: 13px;
  }
}

/* ============================================================
   === MOBILE UI WRAPPER REFIT (authoritative) ===
   1. Book-odds card grid: responsive column count for the table
      cards built in the ≤768px block above (base there = 4 cols).
   2. Compact sticky header bars (Bar 1 = .optimizer-bar,
      Bar 2 = .filter-bar): pack controls into tight grids instead
      of one full-width control per stacked row.
   Placed LAST on purpose so it cleanly supersedes the older,
   overlapping mobile bar rules earlier in the file (~2636, ~5376,
   ~5678) by source order — no specificity hacks, no !important.
   Desktop (≥769px) and the top navbar are untouched.
   ============================================================ */

/* ---- Task 1: responsive book-card column count ---- */
/* Narrow phones (small Androids, iPhone SE / mini): 3 columns. */
@media (max-width: 380px) {
  .data-table tbody tr > td.book-cell-wrap {
    flex: 0 0 calc(33.333% - 6px);
    width: calc(33.333% - 6px);
  }
}
/* Landscape phones still ≤768 wide (card layout active): 5 columns. */
@media (min-width: 481px) and (max-width: 768px) and (orientation: landscape) {
  .data-table tbody tr > td.book-cell-wrap {
    flex: 0 0 calc(20% - 6px);
    width: calc(20% - 6px);
  }
}

/* ---- Task 2: compact header bars ---- */
@media (max-width: 768px) {

  /* === BAR 1 (.optimizer-bar): Sport · Stat Types · Side · No-Vig · Flex Tier · Refresh ===
     2-column grid. The left/right wrappers dissolve (display:contents) so
     their controls flow directly into the grid:
        [ Sport     ][ Stat Types ]
        [ Side      ][ No-Vig     ]
        [ Flex Tier ][ Refresh    ]                                          */
  .optimizer-bar-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
    padding: 8px 14px;
    align-items: end;
  }
  .optimizer-bar-left,
  .optimizer-bar-right { display: contents; }

  .optimizer-bar-inner .filter-group { width: 100%; min-width: 0; gap: 4px; }
  /* Every Bar-1 control fills its grid cell (overrides desktop fixed 160px). */
  .optimizer-bar-inner #filter-sport,
  .optimizer-bar-inner .filter-group .multi-select-trigger,
  .optimizer-bar-inner .ou-toggle,
  .optimizer-bar-inner .flex-tier-wrap,
  .optimizer-bar-inner .flex-tier-select,
  .optimizer-bar-inner .filter-novig {
    width: 100%;
    min-width: 0;
  }
  .optimizer-bar-inner .ou-toggle { display: flex; }
  .optimizer-bar-inner .ou-btn { flex: 1 1 0; }
  .optimizer-bar-inner .flex-tier-wrap { align-self: end; }
  .optimizer-bar-inner .filter-novig { align-self: end; height: 38px; }
  /* Refresh: drop the desktop 0.75 shrink, fill the cell (timestamp stays
     stacked above the button to avoid overflow in a half-width cell). */
  .optimizer-bar-inner .refresh-stack {
    transform: none;
    width: 100%;
    align-self: end;
    gap: 2px;
  }
  .optimizer-bar-inner .refresh-btn { width: 100%; justify-content: center; }
  .optimizer-bar-inner .refresh-stack .last-refreshed {
    font-size: 10px;
    white-space: nowrap;
    text-align: center;
  }

  /* === BAR 2 (.filter-bar): tools · sliders · search ===
     Stacked regions, each packing horizontally:
        [ Parlay Genie | Goblin Mode ]        (full-width row)
        [ PP/UD ] [ Live Betting ]
        [ Min Books ][ Min Consensus ]
        [ Min Edge   ]
        [ Zoom (centered pill) ]
        [ Search Player        Reset ]
        [ search input (full width)  ]                                       */
  .filter-bar-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 8px 14px;
  }
  .filter-bar-left {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    order: 0;
  }
  .filter-bar-left .tool-switch { flex: 1 1 100%; display: flex; }
  .filter-bar-left .tool-switch-btn { flex: 1 1 0; justify-content: center; }
  .filter-bar-left .platform-toggle { flex: 0 0 auto; }
  .filter-bar-left .inline-switch { flex: 0 0 auto; }

  .filter-bar-center {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    order: 0;
    min-width: 0;
  }
  .filter-slider-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    align-items: end;
    justify-content: stretch;
  }
  .filter-slider-row .filter-group { width: 100%; min-width: 0; }
  .filter-slider-row .filter-group input[type="range"],
  .filter-slider-row .filter-group #filter-min-consensus { width: 100%; }
  .filter-bar-center .table-zoom-badge { align-self: center; }

  .filter-bar-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    order: 0;
  }
  .filter-bar-inner .filter-bar-right .filter-group-grow { width: 100%; min-width: 0; }
  .filter-bar-inner .filter-bar-right .filter-group-grow input[type="text"] {
    width: 100%;
    min-width: 0;
  }
}

/* ============================================================
   2026-06-08 — PG HEADER REDESIGN (Logan)
   Single sticky bar above the Parlay Genie table. Replaces the old
   two-bar (.optimizer-bar + .filter-bar) layout on the OPTIMIZER PAGE
   ONLY. The old structural classes remain in this stylesheet because
   the Arbitrage page still renders .optimizer-bar / .optimizer-bar-inner;
   this block is purely additive and reuses the existing component
   classes (.tool-switch, .platform-toggle, .inline-switch, .switch-stack,
   .filter-group, .ou-toggle, .multi-select, .flex-tier-*, .table-zoom-badge,
   .btn) — only the grouping containers are new (pg-*).

   Desktop layout: grid 1fr | auto | 1fr
     col1 = refresh stack + 2-row toggle grid        (justify start)
     col2 = mode toggles + PP/UD                      (centered over table)
     col3 = Filters / Display popovers + Search       (justify end)
   The side clusters wrap internally when cramped so the centered modes
   never push off-center and the row never overflows horizontally.
   ============================================================ */

/* Bar shell — glassy show-through, matched to the old bars. */
.pg-header {
  background: rgba(11, 10, 10, 0.32);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--color-border);
}
/* Inner aligns to the same 1280 container as .optimizer-content, so the
   refresh stack hugs the table's left edge and Search hugs the right edge. */
.pg-header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 10px 24px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px 18px;
}
.pg-left   { justify-self: start;  display: flex; flex-wrap: wrap; align-items: center; gap: 18px; min-width: 0; }
.pg-center { justify-self: center; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: center; }
.pg-right  { justify-self: end;    display: flex; flex-wrap: wrap; align-items: center; gap: 14px; justify-content: flex-end; min-width: 0; }

/* Refresh stack: "Updated …" left-aligned directly above the Refresh button,
   both flush left. Own class (not the old .refresh-stack) so the 0.75-scale
   and centering overrides on .refresh-stack do not apply here. */
.pg-refresh { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pg-refresh .last-refreshed { text-align: left; }

/* --- Filters / Display popovers --- */
.pg-menus { display: flex; align-items: center; gap: 10px; }
.pg-popover { position: relative; }
.pg-popover-trigger { gap: 6px; }
.pg-popover-trigger .caret { font-size: 10px; color: var(--color-text-muted); }
.pg-popover-trigger[aria-expanded="true"] { border-color: var(--color-accent); color: var(--color-accent); }

.pg-popover-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 200;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: visible; /* let the nested Stat Types menu overflow the panel */
}
.pg-popover-panel[hidden] { display: none; }

/* Normalize every relocated control to fill the panel width. These override
   the component base widths AND the #filter-min-consensus ID width rule and
   the >=769px desktop width rules (higher specificity + later in cascade). */
.pg-popover-panel .filter-group { width: 100%; min-width: 0; gap: 6px; }
.pg-popover-panel .filter-group select,
.pg-popover-panel .multi-select,
.pg-popover-panel .multi-select-trigger { width: 100%; min-width: 0; }
.pg-popover-panel .filter-group input[type="range"],
.pg-popover-panel #filter-min-consensus { width: 100%; }
.pg-popover-panel .ou-toggle { display: flex; width: 100%; }
.pg-popover-panel .ou-btn { flex: 1 1 0; text-align: center; }
.pg-popover-panel .filter-novig { width: 100%; }
.pg-popover-panel .flex-tier-wrap { width: 100%; margin-right: 0; }
.pg-popover-panel .flex-tier-select { width: 100%; min-width: 0; }
.pg-popover-panel .table-zoom-badge { width: 100%; justify-content: space-between; }
.pg-popover-panel .table-zoom-slider { flex: 1 1 auto; width: auto; }
.pg-popover-panel .multi-select-menu { z-index: 210; }

/* --- Search Player: label + Reset on the top row, input beneath, flush right.
   Own classes (.pg-search*) so the old .filter-search-head 5.5px-label and
   width overrides don't apply — the label is readable again. --- */
.pg-search { display: flex; flex-direction: column; align-items: stretch; gap: 5px; }
.pg-search-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pg-search-head label {
  font-size: 11px; color: var(--color-text-muted);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; white-space: nowrap;
}
.pg-search-head .filter-reset { padding: 5px 12px; font-size: 12px; }
.pg-search input[type="text"] {
  width: 200px; max-width: 100%;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 14px; outline: none;
  transition: border-color var(--transition);
}
.pg-search input[type="text"]:focus { border-color: var(--color-accent); }

/* --- Tablet / mobile: collapse the grid. --- */
@media (max-width: 768px) {
  .pg-header-inner {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 12px; padding: 10px 16px;
  }
  .pg-left   { flex-direction: column; align-items: center; gap: 12px; }
  .pg-center { flex-direction: column; align-items: center; gap: 8px; }
  .pg-right  { flex-direction: column; align-items: stretch; gap: 12px; }

  .pg-refresh { flex-direction: row; align-items: center; gap: 10px; justify-content: center; }
  .pg-refresh .last-refreshed { text-align: center; }

  .tool-switch { width: 100%; }
  .tool-switch-btn { flex: 1 1 0; justify-content: center; }

  /* Two trigger buttons stay side-by-side; panels anchor to the full-width
     .pg-menus row so the stacked controls inside get full width. */
  .pg-menus { position: relative; gap: 10px; }
  .pg-menus .pg-popover { position: static; flex: 1 1 0; }
  .pg-popover-trigger { width: 100%; }
  .pg-popover-panel { left: 0; right: 0; width: auto; min-width: 0; top: calc(100% + 8px); }

  .pg-search input[type="text"] { width: 100%; }
}

@media (max-width: 420px) {
  .tool-switch-btn { padding: 8px 8px; font-size: 12px; gap: 5px; }
  .tool-switch-icon { font-size: 14px; }
  .pg-header-inner { padding: 8px 12px; }
}

/* ============================================================
   2026-06-08b — PG HEADER REFINEMENTS (Logan)
   Six resize tweaks. All additive overrides of the 2026-06-08 block
   (later in cascade), scoped to the optimizer page / pg-* classes so
   nothing else (navbar, arb, screen) is affected.
   ============================================================ */

/* (1) Widen the optimizer content area +10% (1280 -> 1408). Header bar and
   table widen together so they stay edge-aligned. NOTE: the global navbar
   stays at 1280, so the bar/table now extend ~64px past the navbar on each
   side. Flagged for Logan — easy to revert or widen the navbar to match. */
.pg-header-inner { max-width: 1408px; }
.page-optimizer .optimizer-content { max-width: 1408px; }

/* (2) Tighten dead space in the mode-toggle pill group.
   Between pills: was 2*12px=24px -> 2*6px=12px  (-50%).
   Each end:      was 3px+12px=15px -> 5px+6px=11px (~-25%). */
.pg-center .tool-switch { padding: 3px 5px; }
.pg-center .tool-switch-btn { padding: 6px 6px; }

/* (3) Search Player box + its label ~40% smaller. */
.pg-search { gap: 3px; }
.pg-search-head label { font-size: 7px; }
.pg-search input[type="text"] { width: 120px; padding: 5px 7px; font-size: 9px; }

/* (4) Reset button ~15% smaller. */
.pg-search-head .filter-reset { padding: 4px 10px; font-size: 10px; }

/* (5) Remove the meta line ("N plays · … · sorted by …") and tighten the gap
   between the header and the table. Hidden (not deleted) so the arb page's
   separate #arb-meta and the JS that writes #optimizer-meta are untouched. */
#optimizer-meta { display: none; }
.page-optimizer .optimizer-content { padding-top: 12px; }

/* (6) Header column-image cards: lock to a uniform size so they no longer
   scale with column width / zoom / cache. Intrinsic art is 161x76; render at
   a fixed 40px height, proportional width, centered in the column. */
.th-title-card { height: 40px; width: auto; max-width: 100%; margin: 0 auto; }

/* ============================================================
   2026-06-08c — PG HEADER: combine menus + true swap + search resize
   Additive overrides of the prior blocks (later in cascade). All scoped to
   pg-* / the optimizer page.
   ============================================================ */

/* (Task 3 — true swap) The combined Filters menu now sits at the FAR-LEFT, so
   its panel must open to the RIGHT (anchor left:0) rather than right:0. Desktop
   only — the mobile rule already pins the panel full-width (left:0 right:0). */
@media (min-width: 769px) {
  .pg-left .pg-popover-panel { left: 0; right: auto; }
}

/* (Task 2) Reset, now the last item inside the Filters panel, fills the panel
   width like the No-Vig button above it. */
.pg-popover-panel .filter-reset { width: 100%; }

/* (Task 1) Search Player box + its label ~15% larger than the prior size, and
   the label hangs directly above the box (gap removed). */
.pg-search { gap: 0; }
.pg-search-head label { font-size: 8px; }
.pg-search input[type="text"] { width: 138px; padding: 6px 8px; font-size: 10px; }

/* ============================================================
   ONYX & GOLD THEME — 2026-06-09
   Navbar brand plaque, logo animation, pg-header z-index fix,
   warm-onyx site-wide token application.
   All rules additive; later in cascade than all prior blocks.
   ============================================================ */

/* --- Keyframes --- */
@keyframes metalSheen {
  0%       { background-position: 230% 0, 0 0; }
  55%, 100% { background-position: -70% 0, 0 0; }
}
@keyframes brandGlint {
  0%        { transform: translateX(-150%) skewX(-18deg); }
  16%, 100% { transform: translateX(420%) skewX(-18deg); }
}
@keyframes lampBreathe {
  0%, 100% { filter: drop-shadow(0 0 7px rgba(224, 170, 62, 0.30)); }
  50%      { filter: drop-shadow(0 0 18px rgba(224, 170, 62, 0.65)); }
}

/* --- Glass plaque wrapper on navbar brand --- */
.navbar-brand {
  position: relative;
  overflow: hidden;
  padding: 8px 16px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(#100e0b, #0c0b09) padding-box,
    linear-gradient(125deg, #f7e4b0, #E0AA3E 45%, #8f6420) border-box !important;
  box-shadow:
    0 0 28px rgba(224, 170, 62, 0.15),
    inset 0 1px 0 rgba(255, 240, 210, 0.14) !important;
  transition: box-shadow var(--transition) !important;
}
.navbar-brand:hover {
  box-shadow:
    0 0 42px rgba(224, 170, 62, 0.28),
    inset 0 1px 0 rgba(255, 240, 210, 0.22) !important;
  color: var(--color-text) !important;
}

/* Traveling glint over the glass plaque */
.navbar-brand::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 38%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(255, 250, 225, 0),
    rgba(255, 250, 225, 0.15),
    rgba(255, 250, 225, 0)
  );
  animation: brandGlint 7s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Lamp glyph breathing glow */
.navbar-brand-logo {
  animation: lampBreathe 4s ease-in-out infinite !important;
  box-shadow: 0 0 0 1px rgba(224, 170, 62, 0.38) !important;
  border-radius: 50% !important;
  position: relative;
  z-index: 2;
}
.navbar-brand:hover .navbar-brand-logo {
  transform: translateY(-1px) scale(1.04);
}

/* FS wordmark — white-gold / platinum with sweeping sheen */
.navbar .brand-wordmark .bw-fs {
  background:
    linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,0.88) 47%, rgba(255,255,255,0) 56%),
    linear-gradient(180deg, #fcf9f1, #dcd6c6 52%, #b0a994);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: metalSheen 5.4s ease-in-out infinite;
}

/* Parlay Genie wordmark — gold with sweeping sheen */
.navbar .brand-wordmark .bw-parlay,
.navbar .brand-wordmark .bw-genie {
  background:
    linear-gradient(115deg, rgba(255,250,220,0) 38%, rgba(255,250,220,0.86) 47%, rgba(255,250,220,0) 56%),
    linear-gradient(180deg, #f7e4b0, #E0AA3E 50%, #9f7220);
  background-size: 250% 100%, 100% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: metalSheen 5.4s ease-in-out infinite 0.2s;
}

/* Wordmark on all other brand instances (hero stamp, footer, modal) —
   FS platinum, Parlay/Genie gold, static (no animation outside navbar) */
.brand-wordmark .bw-fs {
  background: linear-gradient(180deg, #fcf9f1 0%, #dcd6c6 52%, #b0a994 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.brand-wordmark .bw-parlay,
.brand-wordmark .bw-genie {
  background: linear-gradient(180deg, #f7e4b0, #E0AA3E 50%, #9f7220);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* --- pg-header z-index fix: panel now renders above table + disclaimer --- */
.pg-header {
  position: relative;
  z-index: 60;
}

/* --- Hero brand-stamp logo drop-shadow updated to gold (already in sweep) --- */

/* --- Warm the hero-bg glow tones (purple stays, teal replaced by gold) ---*/
/* Already handled via :root + rgba sweeps above. */

/* --- Reduced-motion: keep lamp breathe paused --- */
@media (prefers-reduced-motion: reduce) {
  .navbar-brand::after,
  .navbar-brand-logo,
  .navbar .brand-wordmark .bw-fs,
  .navbar .brand-wordmark .bw-parlay,
  .navbar .brand-wordmark .bw-genie {
    animation: none !important;
  }
  .navbar-brand-logo {
    filter: drop-shadow(0 0 10px rgba(224, 170, 62, 0.4)) !important;
  }
}

/* ============================================================
   2026-06-09b — PG HEADER LAYOUT REORGANISATION
   Two-row layout: Row 1 = Filters | Modes+Platform | Refresh+Search
                   Row 2 = Toggle rail (all 5) + Reset flush right
   All additive, pg-* scoped.
   ============================================================ */

/* pg-header-inner is now a flex column (two rows) */
.pg-header-inner {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  padding: 12px 24px 0 !important;
}

/* Row 1: 3-column grid (mirrors the old 1fr auto 1fr) */
.pg-row-main {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px 18px;
  padding-bottom: 12px;
}

/* Row 2: toggle rail + Reset, full width, hairline separator on top */
.pg-row-toggles {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 12px;
  border-top: 1px solid var(--color-border);
}

/* Flat single-row rail for all 5 toggles */
.pg-toggle-rail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

/* Reset in the toggle row — warm-red ghost pill */
.pg-row-toggles .filter-reset {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--color-red) !important;
  border-color: rgba(232, 64, 64, 0.30) !important;
  background: rgba(232, 64, 64, 0.07) !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
}
.pg-row-toggles .filter-reset:hover {
  background: rgba(232, 64, 64, 0.14) !important;
}

/* Search: inline (no column stack, no header row) */
.pg-search {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0 !important;
}
.pg-search input[type="text"] {
  width: 160px !important;
  padding: 7px 11px !important;
  font-size: 12px !important;
}
/* sr-only: keep label in DOM for accessibility, hide visually */
.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;
}

/* Override old popover Reset rule (Reset no longer in popover) */
.pg-popover-panel .filter-reset { display: none !important; }

/* Mobile: stack the two rows vertically */
@media (max-width: 768px) {
  .pg-header-inner { padding: 10px 16px 0 !important; }
  .pg-row-main {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch;
    gap: 12px;
    padding-bottom: 10px;
  }
  .pg-left, .pg-center, .pg-right {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    justify-content: center;
  }
  .pg-row-toggles { flex-wrap: wrap; gap: 10px; padding-bottom: 10px; }
  .pg-toggle-rail { gap: 12px; justify-content: center; }
  .pg-search input[type="text"] { width: 100% !important; }
  .pg-row-toggles .filter-reset { margin-left: 0; }
}

/* ============================================================
   2026-06-09c — PG HEADER COMPONENT REFINEMENT
   Apply the mockup's design system to every control: 32px pills,
   hairline gold-tinted borders, refined gradient gold active states,
   the toggle rail as a bordered container.
   ============================================================ */

/* --- Filters trigger pill --- */
.pg-row-main .pg-popover-trigger {
  height: 32px;
  padding: 0 14px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--color-text) !important;
  font-size: 12px !important;
  font-weight: 500;
  gap: 7px;
  display: inline-flex;
  align-items: center;
  transition: all var(--transition);
}
.pg-row-main .pg-popover-trigger:hover,
.pg-row-main .pg-popover-trigger[aria-expanded="true"] {
  border-color: rgba(224,170,62,0.40) !important;
  background: rgba(224,170,62,0.07) !important;
  color: var(--color-text) !important;
}
.pg-row-main .pg-popover-trigger .caret {
  color: var(--color-text-muted);
  font-size: 10px;
}

/* --- Mode switcher segmented control --- */
.pg-center .tool-switch {
  padding: 3px !important;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 11px;
  background: rgba(255,255,255,0.03);
  gap: 3px;
  display: inline-flex;
  align-items: center;
}
.pg-center .tool-switch-btn {
  height: 26px;
  padding: 0 13px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--color-text-muted) !important;
  font-size: 12px !important;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition);
}
.pg-center .tool-switch-btn:hover {
  background: rgba(255,255,255,0.05) !important;
  color: var(--color-text) !important;
}
.pg-center .tool-switch-btn.active {
  background: linear-gradient(180deg, #f0c869, #E0AA3E) !important;
  color: var(--color-on-accent) !important;
  font-weight: 700;
  box-shadow: 0 2px 9px rgba(224,170,62,0.40);
}
.pg-center .tool-switch-icon { font-size: 14px; }

/* --- PP/UD segmented control (matches mode switcher) --- */
.pg-center .platform-toggle {
  padding: 3px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 11px !important;
  background: rgba(255,255,255,0.03) !important;
  gap: 3px;
  display: inline-flex;
  align-items: center;
}
.pg-center .platform-btn {
  height: 26px;
  padding: 0 14px !important;
  border-radius: 8px !important;
  border: none !important;
  background: transparent !important;
  color: var(--color-text-muted) !important;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: all var(--transition);
}
.pg-center .platform-btn:hover {
  background: rgba(255,255,255,0.05) !important;
  color: var(--color-text) !important;
}
.pg-center .platform-btn.active {
  background: linear-gradient(180deg, #f0c869, #E0AA3E) !important;
  color: var(--color-on-accent) !important;
  box-shadow: 0 2px 9px rgba(224,170,62,0.40);
}

/* --- Refresh pill --- */
.pg-row-main .refresh-btn {
  height: 32px;
  padding: 0 14px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--color-text) !important;
  font-size: 12px !important;
  font-weight: 500;
  gap: 7px;
  display: inline-flex;
  align-items: center;
  transition: all var(--transition);
}
.pg-row-main .refresh-btn:hover {
  border-color: rgba(224,170,62,0.40) !important;
  background: rgba(224,170,62,0.07) !important;
}
.pg-row-main .refresh-btn svg { width: 14px; height: 14px; }

/* --- Updated time --- */
.pg-refresh {
  align-items: flex-start !important;
  gap: 3px !important;
}
.pg-refresh .last-refreshed {
  font-size: 10px !important;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  font-weight: 500;
}

/* --- Search input (visible hairline pill, same height as Refresh) --- */
.pg-row-main .pg-search input[type="text"] {
  height: 32px !important;
  padding: 0 13px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.04) !important;
  color: var(--color-text) !important;
  font-size: 12px !important;
  width: 170px !important;
  transition: all var(--transition);
}
.pg-row-main .pg-search input[type="text"]::placeholder {
  color: var(--color-text-dim);
}
.pg-row-main .pg-search input[type="text"]:focus {
  border-color: rgba(224,170,62,0.50) !important;
  background: rgba(224,170,62,0.05) !important;
  outline: none;
}

/* Right cluster — bottom-align so Refresh and Search land on the same baseline */
.pg-row-main .pg-right {
  align-items: flex-end !important;
  gap: 14px !important;
}

/* --- Toggle rail — hairline gold-tinted bordered container --- */
.pg-toggle-rail {
  padding: 10px 18px !important;
  border: 1px solid rgba(224,170,62,0.18) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.02) !important;
  gap: 22px !important;
}
.pg-toggle-rail .inline-switch {
  font-size: 12px;
  gap: 8px;
}

/* --- Reset pill (right of rail) — matched height + radius --- */
.pg-row-toggles .filter-reset {
  height: 32px !important;
  padding: 0 16px !important;
  border-radius: 9px !important;
  font-size: 12px !important;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  color: var(--color-red) !important;
  border: 1px solid rgba(232, 64, 64, 0.30) !important;
  background: rgba(232, 64, 64, 0.07) !important;
  transition: all var(--transition);
}
.pg-row-toggles .filter-reset:hover {
  background: rgba(232, 64, 64, 0.16) !important;
  border-color: rgba(232, 64, 64, 0.50) !important;
}

/* --- Slightly more breathing room between the two rows --- */
.pg-row-main { padding-bottom: 14px !important; }
.pg-row-toggles { padding: 14px 0 16px !important; }

/* ============================================================
   2026-06-09d — TABLE WARM-UP + BAR 1 LEVEL + BAR 2 SHRINK
   ============================================================ */

/* TASK 1: Warm the cyan column-header card images via hue-rotate.
   The cards are embedded data URIs (in app.js) baked with a cyan palette;
   filter shifts the entire image hue ~225° (cyan -> warm amber) and
   desaturates slightly so it sits in the onyx-gold palette. */
.th-title-card {
  filter: hue-rotate(225deg) saturate(0.80) brightness(1.02);
}

/* TASK 2: Bar 1 — everything on one horizontal line, all 32px, centered.
   The "Updated …" timestamp moves inline with Refresh (no more vertical stack). */
.pg-row-main .pg-right {
  align-items: center !important;
}
.pg-refresh {
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
}
.pg-refresh .last-refreshed {
  font-size: 11px !important;
  letter-spacing: 0.04em;
  white-space: nowrap;
  text-align: left !important;
}
.pg-row-main { align-items: center; }

/* TASK 3: Bar 2 (toggle row) smaller than Bar 1.
   Tighter rail padding, smaller switches and labels, slimmer Reset pill. */
.pg-row-toggles {
  padding: 8px 0 10px !important;
}
.pg-toggle-rail {
  padding: 6px 14px !important;
  gap: 18px !important;
}
.pg-toggle-rail .inline-switch {
  font-size: 11px !important;
  gap: 7px !important;
}
.pg-toggle-rail .inline-switch .switch-label {
  font-size: 11px;
}
/* Slightly shorter switch track to match the smaller bar */
.pg-toggle-rail .inline-switch .switch-track {
  width: 30px !important;
  height: 16px !important;
}
.pg-toggle-rail .inline-switch .switch-thumb {
  width: 12px !important;
  height: 12px !important;
}
.pg-toggle-rail .inline-switch input:checked + .switch-track .switch-thumb {
  transform: translateX(14px) !important;
}
/* Reset slimmer to match the smaller bar */
.pg-row-toggles .filter-reset {
  height: 26px !important;
  padding: 0 13px !important;
  font-size: 11px !important;
  border-radius: 8px !important;
}

/* ============================================================
   2026-06-09e — CARD GOLD FIX, PLAYER COL MATCH, HEADER COMPRESS,
   RESET RETURNED TO FILTERS POPOVER
   ============================================================ */

/* TASK 1 — Column-title CARDS to gold (previous hue-rotate landed on green).
   sepia(1) crushes cyan→warm brown; saturate+hue-rotate tunes it to amber/gold. */
.th-title-card {
  filter: brightness(0.95) sepia(1) saturate(2.6) hue-rotate(-10deg);
}

/* TASK 2 — Player column shade match.
   The sticky first column was solid var(--color-surface) but the rest of the
   table renders rgba(26,24,21,.8) over #0b0a0a. Use the rendered solid colors
   so the sticky column blends into the body and head. */
.data-table thead th:first-child,
.data-table tbody td:first-child {
  background: rgb(23, 21, 19) !important;
}
.data-table thead th:first-child {
  background: rgb(31, 29, 25) !important;
}

/* TASK 3 — Compress the header. All pills 28px, segments 22px, less padding. */
.pg-header-inner {
  padding: 8px 24px 0 !important;
}
.pg-row-main {
  padding-bottom: 6px !important;
  gap: 10px 16px;
}
.pg-row-toggles {
  padding: 4px 0 6px !important;
}

/* Pill heights down to 28px */
.pg-row-main .pg-popover-trigger,
.pg-row-main .refresh-btn,
.pg-row-main .pg-search input[type="text"] {
  height: 28px !important;
  font-size: 12px !important;
}
.pg-row-main .pg-popover-trigger,
.pg-row-main .refresh-btn {
  padding: 0 12px !important;
}

/* Segmented control segments down to 22px */
.pg-center .tool-switch,
.pg-center .platform-toggle {
  padding: 2px !important;
  border-radius: 9px !important;
}
.pg-center .tool-switch-btn,
.pg-center .platform-btn {
  height: 22px !important;
  padding: 0 11px !important;
  font-size: 11px !important;
  border-radius: 7px !important;
}
.pg-center .tool-switch-icon { font-size: 12px; }

/* Toggle rail tighter */
.pg-toggle-rail {
  padding: 4px 12px !important;
  gap: 16px !important;
}
.pg-toggle-rail .inline-switch .switch-track {
  width: 26px !important;
  height: 14px !important;
}
.pg-toggle-rail .inline-switch .switch-thumb {
  width: 10px !important;
  height: 10px !important;
}
.pg-toggle-rail .inline-switch input:checked + .switch-track .switch-thumb {
  transform: translateX(12px) !important;
}
.pg-toggle-rail .inline-switch,
.pg-toggle-rail .inline-switch .switch-label {
  font-size: 11px !important;
}

/* Refresh icon scaled to match smaller pill */
.pg-row-main .refresh-btn svg { width: 13px; height: 13px; }
.pg-refresh .last-refreshed { font-size: 10px !important; }

/* TASK 4 — Reset back in Filters popover.
   Override the previous display:none and the warm-red look used in the row. */
.pg-popover-panel .filter-reset {
  display: block !important;
  width: 100%;
  margin-top: 6px;
  height: auto !important;
  padding: 8px 12px !important;
  font-size: 12px !important;
  font-weight: 500;
  border-radius: var(--radius-sm) !important;
  color: var(--color-red) !important;
  border: 1px solid rgba(232, 64, 64, 0.30) !important;
  background: rgba(232, 64, 64, 0.06) !important;
}
.pg-popover-panel .filter-reset:hover {
  background: rgba(232, 64, 64, 0.14) !important;
  border-color: rgba(232, 64, 64, 0.50) !important;
}