/* page routing */
  .page { display: none !important; visibility: hidden !important; }
  .page.active { display: block !important; visibility: visible !important; }
  #page-roster.active,
  #page-scout.active,
  #page-game-sim.active,
  #page-dugout.active,
  #page-ev.active,
  #page-model.active,
  #page-raw.active,
  #page-kzone.active,
  #page-manage.active {
    display: flex !important;
    flex-direction: column;
    height: calc(100dvh - 88px);
    min-height: 100%;
    overflow: hidden;
  }
  /* Model page contains long content sections; allow page-level vertical scroll. */
  #page-model.active {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  #page-raw.active {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Raw page — slightly larger, bolder font throughout */
  #page-raw table * { font-size: 12px; font-weight: 500; }
  #page-raw table .text-\[9px\] { font-size: 11px; }
  #page-raw table .text-\[11px\] { font-size: 13px; }
  #page-raw table .font-semibold { font-weight: 600; }
  #page-raw table .font-bold { font-weight: 700; }
  #page-raw table .font-black { font-weight: 900; }
  #page-raw .mono { font-size: 12px; font-weight: 500; }
  #page-odds,
  #page-arbs-middle {
    display: none !important;
    visibility: hidden !important;
  }
  .shell-embed-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    overflow: hidden;
    position: relative;
  }
  .shell-embed-card > iframe {
    width: 100%;
    height: 100% !important;
    border: 0;
    display: block;
  }
  #page-manage.active { display: flex !important; visibility: visible !important; }
  #page-system.active { display: flex !important; visibility: visible !important; }

  .embed-error-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    background: rgba(8, 10, 16, 0.92);
    z-index: 3;
  }
  .embed-error-overlay.show { display: flex; }
  .embed-error-card {
    max-width: 560px;
    border: 1px solid rgba(255, 113, 108, 0.35);
    background: rgba(255, 113, 108, 0.08);
    color: #ffd9d6;
    border-radius: 12px;
    padding: 14px 16px;
  }


  /* stat card hover */
  .stat-card { transition: border-color 0.15s, box-shadow 0.15s; }
  .stat-card:hover { border-color: rgba(16,185,129,0.3); box-shadow: 0 0 12px rgba(16,185,129,0.06); }

  /* bet row hover */
  .bet-row:hover { background: #1a1d26; }
  .bet-row.bt-selected { background: rgba(16,185,129,0.06); }

  /* bet tracker page needs full height */
  #page-bet-tracker.active { display: flex; flex-direction: column; height: 100%; }

  /* progress bar */
  .prog-bar { transition: width 0.6s ease; }

  /* sidebar collapsible */
  #sidebar { transition: width 0.25s cubic-bezier(.4,0,.2,1); }
  /* slip panel minimized: narrow strip showing mini count */
  #slip-panel.slip-minimized { width: 40px !important; min-width: 40px; }
  #slip-panel.slip-minimized .slip-full { display: none !important; }
  #slip-panel:not(.slip-minimized) #slip-mini { display: none !important; }
  #slip-panel.slip-minimized #slip-mini { display: flex !important; flex-direction: column; }

  #sidebar.sb-collapsed { width: 52px !important; min-width: 52px; }
  #sidebar.sb-collapsed .sb-label { display: none; }
  #sidebar.sb-collapsed .sb-section { display: none; }
  #sidebar.sb-collapsed .sb-user-img { display: none; }
  #sidebar.sb-collapsed .sb-user-text { display: none; }
  #sidebar.sb-collapsed #sidebar-user-card { justify-content: center; padding: 0.5rem; gap: 0; }
  #sidebar.sb-collapsed nav a { justify-content: center; padding-left: 0.5rem; padding-right: 0.5rem; gap: 0; }
  #sidebar.sb-collapsed nav a { font-size: 0 !important; line-height: 0 !important; }
  #sidebar.sb-collapsed nav a .material-symbols-outlined { font-size: 22px !important; line-height: 1 !important; }
  #sidebar.sb-collapsed .sb-foot { display: none; }
  #sidebar-toggle-icon { transition: transform 0.25s ease; }
  @media (max-width: 768px) {
    /* ── Safe-area awareness (iPhone notch / home bar) ── */
    body {
      padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* ── Hide the top ticker to recover vertical space ── */
    .h-7.bg-surface-container-lowest { display: none !important; }

    /* ── Compact topbar: hide the big sidebar logo zone ── */
    header .w-52.flex.items-center.gap-3.px-4 { display: none !important; }
    header img[alt="User"] { display: none !important; }
    #api-live-counter { gap: 4px !important; padding: 4px 6px !important; }
    #api-live-counter #api-req-last { display: none !important; }
    #api-live-counter .mono.text-\[10px\] { font-size: 9px !important; }
    #api-live-counter .mono.text-\[11px\] { font-size: 10px !important; }
    /* Show a compact logo on mobile */
    header { position: relative; }
    #mobile-logo { display: flex !important; }

    /* ── Hide top-nav tabs (LIVE / UPCOMING / PARLAYS / RESULTS) ── */
    #top-nav { display: none !important; }

    /* ── Hide desktop sidebar & desktop bet-slip panel ── */
    #sidebar   { display: none !important; }
    #slip-panel { display: none !important; }

    /* ── Main layout shrinks to full width ── */
    #main-area { width: 100vw; max-width: 100vw; }

    /* The flex row now only has the main area */
    .flex.flex-1.overflow-hidden.min-w-0 { display: block; overflow: visible; height: auto; }
    body { overflow-y: auto !important; overflow-x: hidden !important; height: auto !important; max-height: none !important; }
    html { overflow: visible !important; }
    #main-area { overflow-y: visible !important; overflow-x: hidden !important; height: auto; min-height: calc(100dvh - 56px); }

    /* ── Bottom nav bar visible on mobile ── */
    #bottom-nav-bar { display: flex !important; }

    /* ── Slip FAB (floating button) ── */
    #slip-fab {
      display: flex !important;
      position: fixed;
      bottom: calc(72px + env(safe-area-inset-bottom, 0px));
      right: 16px;
      z-index: 210;
    }

    /* ── Prop builder: game header compact ── */
    #page-prop-builder .sticky.top-0 .flex.flex-wrap.gap-6 {
      flex-direction: column;
      gap: 8px;
      padding: 8px 10px;
    }
    /* Quick-action buttons (H2H / EXPORT) hidden on mobile to save space */
    #page-prop-builder .sticky.top-0 .flex.flex-wrap.gap-6 > .flex.gap-2:last-child {
      display: none;
    }
    /* Scoreboard: tighten up */
    #page-prop-builder .sticky.top-0 { padding: 0; }
    #score-left, #score-right { font-size: 1.6rem; }
    /* Game-lines chips: wrap */
    #game-lines { flex-wrap: wrap; gap: 4px; }

    /* ── Game dropdown becomes a bottom sheet on mobile ── */
    #game-dropdown {
      position: fixed !important;
      top: auto !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100vw !important;
      max-height: 72dvh !important;
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch !important;
      border-radius: 20px 20px 0 0 !important;
      margin: 0 !important;
      z-index: 310 !important;
      border: 1px solid rgba(255,255,255,.08) !important;
      padding-bottom: env(safe-area-inset-bottom, 0px);
      will-change: transform;
      transform: translateY(100%);
      transition: transform .3s cubic-bezier(.4,0,.2,1);
    }
    #game-dropdown.open {
      display: block !important;
      transform: translateY(0) !important;
    }
    #pb-game-backdrop {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 309;
      background: rgba(0,0,0,.45);
    }
    #pb-game-backdrop.open { display: block; }

    /* ── Prop table sticky player column ── */
    #prop-body tr td:first-child {
      position: sticky; left: 0; z-index: 1;
      background: var(--md-sys-color-surface-container, #161b27);
    }
    #prop-body tr:hover td:first-child {
      background: var(--md-sys-color-surface-container-high, #1e2230);
    }
    #page-prop-builder table thead tr th:first-child {
      position: sticky; left: 0; z-index: 2;
      background: var(--md-sys-color-surface-container-high, #1e2230);
    }
    /* ── Prop table: compact — hide book columns, show Player/Line/Edge/My Model ── */
    #page-prop-builder .bg-surface-container.rounded-xl.overflow-hidden.border {
      overflow-x: visible !important;
    }
    #page-prop-builder table.w-full { min-width: 0 !important; }
    #page-prop-builder table.w-full > thead > tr > th:nth-child(n+5),
    #prop-body > tr > td:nth-child(n+5) { display: none !important; }
    /* Alt-expand wrapper td keeps full width (single colspan cell) */
    #prop-body > tr > td[colspan] { display: table-cell !important; }
    /* Expanded alternate rows: subtle faded purple for quick visual separation. */
    #prop-body > tr.expanded-alt-row,
    #prop-table-body > tr.expanded-alt-row {
      background: rgba(168, 85, 247, 0.14) !important;
      box-shadow: inset 0 0 0 1px rgba(196, 137, 255, 0.22);
    }
    #prop-body > tr.expanded-alt-row:hover,
    #prop-table-body > tr.expanded-alt-row:hover {
      background: rgba(168, 85, 247, 0.2) !important;
    }
    /* RAW page expanded alternates: distinct bands so alts are obvious at a glance. */
    #raw-sections tr.raw-alt-row { border-left: 3px solid rgba(196, 137, 255, 0.45); }
    #raw-sections tr.raw-alt-green  { background: rgba(34, 197, 94, 0.09); }
    #raw-sections tr.raw-alt-amber  { background: rgba(245, 158, 11, 0.11); }
    #raw-sections tr.raw-alt-purple { background: rgba(168, 85, 247, 0.14); }
    #raw-sections tr.raw-alt-row:hover { filter: brightness(1.06); }
    /* Inner alt-line table: hide last 3 columns too */
    #prop-body td[colspan] table > tbody > tr > td:nth-child(n+5),
    #prop-body td[colspan] table > tbody > tr > th:nth-child(n+5) { display: none !important; }
    /* Filter tabs + search: tabs fill row, search wraps below */
    #prop-filter-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex: 0 0 100% !important; width: 100% !important; }
    #page-prop-builder .flex.items-center.gap-3.mb-4.flex-wrap { flex-wrap: wrap !important; overflow-x: visible !important; gap: 8px !important; padding-bottom: 4px; align-items: center; }
    /* Search bar stretches full width on second row */
    #page-prop-builder .flex.items-center.gap-2.ml-auto.bg-surface-container { flex: 1 1 auto; margin-left: 0 !important; width: 100%; box-sizing: border-box; }
    #prop-search { width: 100% !important; }

    /* ── Prop builder padding ── */
    #page-prop-builder .p-5 { padding: 10px; }

    /* ══ PROP BUILDER MOBILE (≤768px) ═══════════════════
       3-view slide system: Events → Markets → Picker     */
    /* Use .active so display:none still hides inactive pages */
    #page-prop-builder.active {
      display: flex !important;
      flex-direction: column;
      overflow: hidden;
      padding: 0 !important;
      height: calc(100dvh - 56px - 72px);
      max-height: calc(100dvh - 56px - 72px);
    }
    .pb2m-shell { display: flex; flex-direction: column; flex: 1; overflow: hidden; background: #0a0c12;
      min-height: 0; height: 100%; }

    /* League strip */
    .pb2m-league-strip {
      display: flex; align-items: center; overflow-x: auto; gap: 0;
      background: rgba(10,12,18,0.97); border-bottom: 1px solid rgba(255,255,255,0.07);
      flex-shrink: 0; -webkit-overflow-scrolling: touch;
    }
    .pb2m-league-strip::-webkit-scrollbar { display: none; }
    .pb2m-ltab {
      padding: 10px 16px; font-size: 12px; font-weight: 900; letter-spacing: 0.05em;
      text-transform: uppercase; color: rgba(200,216,255,0.45); white-space: nowrap;
      background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer;
      min-height: 42px; flex-shrink: 0;
    }
    .pb2m-ltab.active { color: #10b981; border-bottom-color: #10b981; }

    /* Slide views */
    .pb2m-views { flex: 1; overflow: hidden; position: relative; min-height: 0; display: flex; flex-direction: column; }
    .pb2m-view {
      position: absolute; inset: 0; display: flex; flex-direction: column;
      overflow-y: auto; -webkit-overflow-scrolling: touch;
      transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
      background: #0a0c12;
    }
    .pb2m-view.active { transform: translateX(0); }
    .pb2m-view.slide-left { transform: translateX(-30%); }

    /* Events view */
    .pb2m-ev-search {
      display: flex; align-items: center; gap: 8px; padding: 10px 12px;
      background: rgba(10,12,18,0.97); border-bottom: 1px solid rgba(255,255,255,0.07);
      flex-shrink: 0; position: sticky; top: 0; z-index: 10;
    }
    .pb2m-ev-search input {
      flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 10px; padding: 9px 14px; font-size: 14px; color: #e5e7eb;
      outline: none; min-height: 40px;
    }
    .pb2m-ev-search input::placeholder { color: rgba(200,216,255,0.35); }
    .pb2m-date-group-hdr {
      padding: 8px 12px 4px; font-size: 11px; font-weight: 900;
      letter-spacing: 0.08em; text-transform: uppercase; color: rgba(200,216,255,0.4);
    }
    .pb2m-ev-card {
      margin: 0 10px 8px; border-radius: 12px; overflow: hidden;
      border: 1px solid rgba(255,255,255,0.07); background: #131722; cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .pb2m-ev-card:active { opacity: 0.85; }
    .pb2m-ev-card.selected { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.05); }
    .pb2m-ev-card-hdr {
      display: flex; align-items: center; gap: 6px; padding: 7px 12px 5px;
      border-bottom: 1px solid rgba(255,255,255,0.05);
    }
    .pb2m-ev-status { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
    .pb2m-ev-status.live { color: #4ade80; }
    .pb2m-ev-status.sched { color: #10b981; }
    .pb2m-ev-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
    .pb2m-ev-dot.live { background: #4ade80; }
    .pb2m-ev-dot.sched { background: #10b981; }
    .pb2m-ev-time { font-size: 11px; color: rgba(200,216,255,0.5); font-family: monospace; }
    .pb2m-ev-league { font-size: 10px; font-weight: 900; color: rgba(200,216,255,0.4); text-transform: uppercase; letter-spacing: 0.06em; margin-left: auto; }
    .pb2m-ev-card-body { padding: 8px 12px 10px; }
    .pb2m-ev-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; margin-bottom: 8px; }
    .pb2m-ev-team-away { font-size: 16px; font-weight: 900; color: #e5e7eb; }
    .pb2m-ev-team-home { font-size: 16px; font-weight: 900; color: #e5e7eb; text-align: right; }
    .pb2m-ev-vs { font-size: 11px; color: rgba(200,216,255,0.4); font-weight: 700; text-align: center; }
    .pb2m-ev-score { font-size: 12px; font-family: monospace; font-weight: 700; color: rgba(200,216,255,0.5); text-align: center; }
    /* Odds grid: 3 columns (ML / Spread / Total) */
    .pb2m-ev-odds-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
    .pb2m-odds-col { display: flex; flex-direction: column; gap: 2px; }
    .pb2m-odds-col-hdr { font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(200,216,255,0.35); text-align: center; margin-bottom: 3px; }
    .pb2m-odds-pair { display: flex; flex-direction: column; gap: 2px; }
    .pb2m-odds-team-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; background: rgba(255,255,255,0.03); border-radius: 6px; border: 1px solid rgba(255,255,255,0.05); }
    .pb2m-odds-team-row.best { background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.25); }
    .pb2m-odds-book { width: 16px; height: 16px; border-radius: 4px; object-fit: cover; flex-shrink: 0; }
    .pb2m-odds-num { font-size: 13px; font-weight: 900; font-family: monospace; color: #e5e7eb; }
    .pb2m-odds-num.best { color: #4ade80; }
    .pb2m-odds-line-val { font-size: 10px; color: rgba(200,216,255,0.45); font-family: monospace; }
    .pb2m-odds-loading { font-size: 11px; color: rgba(200,216,255,0.3); text-align: center; padding: 6px 0; font-family: monospace; }

    /* Markets view */
    .pb2m-mkt-header {
      display: flex; flex-direction: column; padding: 12px 14px 10px;
      background: rgba(10,12,18,0.97); border-bottom: 1px solid rgba(255,255,255,0.07);
      flex-shrink: 0; position: sticky; top: 0; z-index: 10;
    }
    .pb2m-mkt-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
    .pb2m-mkt-title { font-size: 18px; font-weight: 900; color: #e5e7eb; }
    .pb2m-back-btn {
      display: flex; align-items: center; gap: 4px; background: none; border: none;
      color: rgba(200,216,255,0.55); font-size: 13px; font-weight: 700; cursor: pointer; padding: 4px 0;
    }
    .pb2m-mkt-game-info { font-size: 12px; color: rgba(200,216,255,0.5); margin-bottom: 8px; }
    .pb2m-mkt-dd-btn {
      display: flex; align-items: center; justify-content: space-between; gap: 8px;
      padding: 8px 14px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px; cursor: pointer; font-size: 14px; font-weight: 700; color: #e5e7eb;
      margin-bottom: 8px; min-height: 44px;
    }
    /* Category pills: Game Lines | Player Props */
    .pb2m-cat-pills { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .pb2m-cat-pills::-webkit-scrollbar { display: none; }
    .pb2m-cat-pill {
      padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 800;
      border: 1.5px solid rgba(255,255,255,0.15); color: rgba(200,216,255,0.5);
      background: transparent; cursor: pointer; white-space: nowrap; flex-shrink: 0; min-height: 32px;
    }
    .pb2m-cat-pill.active { background: rgba(16,185,129,0.15); border-color: #10b981; color: #10b981; }
    /* Sub-pills: Moneyline / Spread / Total */
    .pb2m-sub-pills { display: flex; gap: 6px; padding: 8px 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-shrink: 0; }
    .pb2m-sub-pills::-webkit-scrollbar { display: none; }
    .pb2m-sub-pill {
      padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 700;
      border: 1px solid rgba(255,255,255,0.12); color: rgba(200,216,255,0.45);
      background: transparent; cursor: pointer; white-space: nowrap; flex-shrink: 0; min-height: 32px;
    }
    .pb2m-sub-pill.active { background: rgba(6,182,212,0.12); border-color: rgba(6,182,212,0.5); color: #22d3ee; }

    /* Book table (markets view) */
    .pb2m-book-section { padding: 6px 0 0; }
    .pb2m-book-section-hdr {
      display: grid; grid-template-columns: 1fr 32px 1fr; padding: 6px 14px;
      font-size: 11px; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase;
      color: rgba(200,216,255,0.4);
    }
    .pb2m-book-section-hdr span:last-child { text-align: right; }
    .pb2m-book-row {
      display: grid; grid-template-columns: 1fr 44px 1fr; align-items: center;
      padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,0.04);
      -webkit-tap-highlight-color: transparent;
    }
    .pb2m-book-row.best { background: rgba(74,222,128,0.06); }
    .pb2m-book-cell { display: flex; align-items: center; gap: 8px; }
    .pb2m-book-cell.right { flex-direction: row-reverse; justify-content: flex-end; }
    .pb2m-book-logo { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #1e2333; }
    .pb2m-book-logo-ph {
      width: 32px; height: 32px; border-radius: 8px; background: #1e2333;
      display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900;
      color: #6b7280; flex-shrink: 0;
    }
    .pb2m-book-odds-wrap { display: flex; flex-direction: column; }
    .pb2m-book-odds { font-size: 15px; font-weight: 900; font-family: monospace; color: #e5e7eb; }
    .pb2m-book-odds.best { color: #4ade80; }
    .pb2m-book-liq { font-size: 10px; color: rgba(200,216,255,0.38); }
    .pb2m-book-arrow {
      display: flex; align-items: center; justify-content: center; width: 24px; height: 24px;
      border-radius: 6px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08);
      color: rgba(200,216,255,0.5); flex-shrink: 0;
    }
    .pb2m-book-center { display: flex; align-items: center; justify-content: center; }
    .pb2m-ts { font-size: 10px; color: rgba(200,216,255,0.3); text-align: right; padding: 4px 14px 0; }

    /* Props list inside markets view */
    .pb2m-props-section { padding: 8px 0; }
    .pb2m-prop-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 11px 14px; border-bottom: 1px solid rgba(255,255,255,0.04); gap: 10px;
    }
    .pb2m-prop-player { font-size: 14px; font-weight: 700; color: #e5e7eb; }
    .pb2m-prop-line { font-size: 12px; font-weight: 700; font-family: monospace; color: rgba(200,216,255,0.55); }
    .pb2m-prop-odds-pair { display: flex; gap: 6px; }
    .pb2m-prop-odds-btn {
      padding: 5px 10px; border-radius: 7px; font-size: 13px; font-weight: 900;
      font-family: monospace; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.04);
      color: #e5e7eb; cursor: pointer; min-height: 36px;
    }
    .pb2m-prop-odds-btn.best-o { background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.3); color: #4ade80; }
    .pb2m-prop-odds-btn.best-u { background: rgba(74,222,128,0.1); border-color: rgba(74,222,128,0.3); color: #4ade80; }
    .pb2m-loading-row { padding: 32px; text-align: center; font-size: 12px; color: rgba(200,216,255,0.4); font-family: monospace; }

    /* Picker view */
    .pb2m-picker-header {
      display: flex; align-items: center; gap: 10px; padding: 12px 14px;
      background: rgba(10,12,18,0.97); border-bottom: 1px solid rgba(255,255,255,0.07);
      flex-shrink: 0; position: sticky; top: 0; z-index: 10;
    }
    .pb2m-picker-search {
      flex: 1; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
      border-radius: 10px; padding: 9px 14px; font-size: 14px; color: #e5e7eb; outline: none; min-height: 44px;
    }
    .pb2m-picker-search::placeholder { color: rgba(200,216,255,0.35); }
    .pb2m-picker-section-hdr {
      padding: 12px 14px 4px; font-size: 11px; font-weight: 900; text-transform: uppercase;
      letter-spacing: 0.08em; color: rgba(200,216,255,0.4);
    }
    .pb2m-picker-item {
      padding: 14px 16px; font-size: 15px; font-weight: 600; color: #e5e7eb;
      border-bottom: 1px solid rgba(255,255,255,0.05); cursor: pointer;
      display: flex; align-items: center; justify-content: space-between; min-height: 50px;
      -webkit-tap-highlight-color: transparent;
    }
    .pb2m-picker-item.active { color: #10b981; }
    .pb2m-picker-item:active { background: rgba(255,255,255,0.04); }
    .pb2m-picker-check { color: #10b981; }

    /* ── Today page: single column ── */
    #today-game-grid  { grid-template-columns: 1fr !important; padding: 0 8px 70px !important; }
    #today-kpi-strip  { grid-template-columns: 1fr 1fr !important; padding: 0 8px 8px !important; gap: 6px !important; }
    #page-today .px-6.pt-5 { padding: 8px 8px 6px; }
    #today-btn-yest, #today-btn-tomorrow { display: none; }
    /* Compact today page header on mobile */
    #page-today h2.text-4xl { font-size: 1.25rem; }
    #page-today .flex.items-center.gap-2 { gap: 4px; flex-wrap: wrap; }
    #page-today .flex.items-center.gap-2 button { padding: 6px 8px; }
    #page-today .flex.items-center.gap-2 button .material-symbols-outlined { font-size: 16px; }
    #page-today .today-game-card { border-radius: 16px !important; }
    #page-today .today-game-card > div:first-child { padding: 10px 10px 8px !important; }
    #page-today .today-quarter-wrap,
    #page-today .today-odds-wrap { margin: 0 6px 8px !important; border-radius: 12px !important; }
    #page-today .today-quarter-wrap,
    #page-today .today-books-wrap,
    #page-today .today-kalshi-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
    #page-today .today-quarter-table { min-width: 520px; }
    #page-today .today-books-table,
    #page-today .today-kalshi-table { min-width: 430px; }
    #page-today .today-odds-head { padding: 7px 8px !important; flex-wrap: wrap; }
    #page-today .today-odds-grid { padding: 8px !important; gap: 6px !important; }
    #page-today .today-odds-side { padding: 7px 5px !important; }
    #page-today .today-odds-total { min-width: 62px !important; }

    /* ── API page controls + grid compact on mobile ── */
    #page-api .flex.items-start.justify-between.flex-wrap.gap-3 { flex-direction: column; align-items: stretch; }
    #page-api .flex.items-center.gap-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
    #api-range, #api-refresh-btn, #api-reset-btn { width: 100%; }
    #page-api .grid.grid-cols-2.md\:grid-cols-4 { grid-template-columns: 1fr 1fr !important; }

    /* ── Arbs + Middle controls and book filters ── */
    #am-controls-arbs,
    #am-controls-middle { flex-wrap: wrap; width: 100%; }
    #arbs-books-wrap,
    #middle-books-wrap { flex: 1 1 100%; }
    #arbs-books-btn,
    #middle-books-btn { width: 100%; justify-content: center; }
    #arbs-books-dd,
    #middle-books-dd { left: 0 !important; right: 0 !important; width: 100% !important; }

    /* ── Upcoming, parlays, best-bets, etc: full-width padding ── */
    .page.active.p-6 { padding: 12px 12px 70px !important; }
    #page-upcoming .grid-cols-2 { grid-template-columns: 1fr !important; }
    #page-parlays   .grid-cols-2 { grid-template-columns: 1fr !important; }

    /* ── Bet-tracker table: horizontal scroll ── */
    #page-bet-tracker .overflow-x-auto { -webkit-overflow-scrolling: touch; }

    /* ── Add bottom padding to all pages so content clears the bottom nav ── */
    .page { padding-bottom: calc(72px + env(safe-area-inset-bottom,0px) + 16px); }
    .page.p-6 { padding-bottom: calc(72px + env(safe-area-inset-bottom,0px) + 16px) !important; }

    /* ═══════════════════════════════════════════════
       COMPREHENSIVE MOBILE: all sub-pages
    ═══════════════════════════════════════════════ */

    /* ── Strike Zone KPIs: 2×2 ── */
    #page-strike-zone .grid.grid-cols-4 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    #page-strike-zone.page.p-6 { padding: 12px 10px 80px !important; }
    /* Strike Zone filter buttons: scroll horizontal */
    #page-strike-zone .flex.items-center.justify-between.flex-wrap { flex-direction: column; align-items: stretch; gap: 8px; }
    #page-strike-zone .flex.bg-surface-container.border { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
    #page-strike-zone .sz-filter-btn { white-space: nowrap; flex-shrink: 0; }
    /* Strike Zone title */
    #page-strike-zone h2.text-4xl { font-size: 1.5rem; }

    /* ── Results page: KPI 2×3 + scrollable table ── */
    #page-results .grid.grid-cols-5 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    #page-results .bg-surface-container.border.border-outline-variant\/10.rounded-xl.overflow-hidden {
      overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    }
    #page-results table.w-full { min-width: 520px; }
    #page-results table th, #page-results table td { padding: 6px 8px !important; font-size: 9px !important; }

    /* ── Best Bets: header KPIs stack, filter scroll, rows → cards ── */
    #page-best-bets .flex.items-start.justify-between { flex-direction: column; }
    #page-best-bets .flex.items-start.justify-between > .flex.gap-3 { width: 100%; display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
    #page-best-bets .flex.items-start.justify-between > .flex.gap-3 > div { min-width: 0 !important; }
    #page-best-bets .flex.items-center.justify-between.gap-3 { flex-direction: column; align-items: stretch; gap: 8px; }
    #page-best-bets .flex.items-center.gap-1.bg-surface-container { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; width: 100%; }
    #page-best-bets .flex.items-center.gap-1.bg-surface-container button { white-space: nowrap; flex-shrink: 0; }
    /* Best Bets grid header → hide on mobile */
    #page-best-bets .grid.grid-cols-\[1fr_90px_90px_100px_110px_70px_130px_36px\] { display: none !important; }
    /* Best Bets rows → card layout */
    #page-best-bets .bb-row,
    #page-best-bets .grid[class*="grid-cols-\\[1fr_110px"] {
      display: block !important; padding: 0 !important;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    /* Inner grid inside .bb-row → card layout */
    #page-best-bets .bb-row > .grid,
    #page-best-bets .bb-row > div > .grid {
      display: flex !important; flex-wrap: wrap !important; gap: 6px 10px !important;
      padding: 12px !important;
    }
    #page-best-bets .bb-row > .grid > div,
    #page-best-bets .bb-row > div > .grid > div { min-width: 0; }
    /* First child (player info) spans full width */
    #page-best-bets .bb-row > .grid > div:first-child,
    #page-best-bets .bb-row > div > .grid > div:first-child { flex: 0 0 100%; }
    /* Stat cells: equal flex on mobile */
    #page-best-bets .bb-row > .grid > div:not(:first-child),
    #page-best-bets .bb-row > div > .grid > div:not(:first-child) { flex: 1 1 60px; text-align: center; }
    /* Expand detail panel: full width */
    #page-best-bets .bb-detail { padding: 0 12px 12px !important; }
    #page-best-bets .bb-detail .grid.grid-cols-4 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    /* Legacy NBA rows */
    #page-best-bets .grid[class*="grid-cols-\\[1fr_110px"] > div { min-width: 0; }
    #page-best-bets .grid[class*="grid-cols-\\[1fr_110px"] > div:first-child { flex: 0 0 100%; }

    /* ── Calculators: single column ── */
    #page-calculators .grid.grid-cols-3 { grid-template-columns: 1fr !important; }
    #page-calculators .grid.grid-cols-2 { grid-template-columns: 1fr !important; }

    /* ── Analytics KPIs: 2×N ── */
    .grid.grid-cols-5 { grid-template-columns: 1fr 1fr !important; }
    .grid.grid-cols-4:not(#today-kpi-strip) { grid-template-columns: 1fr 1fr !important; }
    .grid.grid-cols-3 { grid-template-columns: 1fr !important; }

    /* ── EV page grids ── */
    #page-ev .grid.grid-cols-5 { grid-template-columns: 1fr 1fr !important; }
    #page-ev .grid.grid-cols-4 { grid-template-columns: 1fr 1fr !important; }


    /* ── Aincrad: SmartStake-style mobile cards ── */
    #page-aincrad { padding: 8px 8px 80px !important; }
    #ainc-grid { min-width: 0 !important; gap: 0 !important; }
    .ainc-mc-card {
      background: #161616;
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 16px;
      padding: 14px 16px 12px;
      margin-bottom: 8px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }
    .ainc-mc-card:active { background: #1e1e1e; }
    /* Desktop column headers: hidden on mobile (card layout has no need) */
    #ainc-grid > .ainc-col-header { display: none !important; }
    /* Event group header: show but compact */
    #ainc-grid > .ainc-evt-header {
      font-size: 11px !important; padding: 8px 4px 4px !important;
      border-radius: 0 !important; position: static !important;
    }

    /* ── Any table with fixed widths → horizontal scroll wrapper ── */
    table[style*="min-width"] { font-size: 9px; }

    /* ── Dialogs / modals: fit to screen ── */
    div[style*="min-width:340px"], div[style*="min-width:360px"] {
      min-width: 0 !important; width: calc(100vw - 32px) !important; max-width: 100% !important;
    }

    /* ── Fixed banners: don't overflow right ── */
    div[style*="position:fixed"][style*="right:24px"] {
      right: 12px !important; left: 12px !important; max-width: calc(100vw - 24px) !important;
    }

    /* ── MLB card: compact on mobile ── */
    .mlb-card-mobile .flex.items-center { gap: 2px !important; }

    /* ═══════════════════════════════════════════════════
       MLB-SPECIFIC MOBILE OPTIMIZATIONS
    ═══════════════════════════════════════════════════ */

    /* ── EV page: table horizontal scroll + compact ── */
    #page-ev .bg-surface-container.border.rounded-xl.overflow-hidden { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    #page-ev table.w-full { min-width: 580px; }
    #page-ev table th, #page-ev table td { padding: 6px 6px !important; font-size: 9px !important; }
    #page-ev .grid.grid-cols-3 { grid-template-columns: 1fr !important; gap: 8px !important; }
    /* EV filter buttons: horizontal scroll */
    #page-ev .flex.gap-2.flex-wrap { flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; padding-bottom: 4px; }
    #page-ev .flex.gap-2.flex-wrap button { white-space: nowrap; flex-shrink: 0; }
    #page-ev h2 { font-size: 1.1rem !important; }


    /* ── Strike Zone: game cards → single column ── */
    #sz-container .grid.grid-cols-2 { grid-template-columns: 1fr !important; }
    /* SZ player props tables: horizontal scroll */
    #sz-container .bg-surface-container.border.rounded-xl.overflow-hidden { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    #sz-container table { min-width: 520px; }
    /* SZ SP Strikeout cards: single column on small screens */
    #sz-container .grid.grid-cols-2.gap-3.mb-3.sz-sk { grid-template-columns: 1fr !important; }
    /* SZ title / header compact */
    #page-strike-zone h2 { font-size: 1.25rem !important; }
    /* SZ custom edge analyzer: stack inputs */
    #sz-container .flex.items-end.gap-3.flex-wrap { gap: 8px !important; }
    #sz-container .flex.items-end.gap-3.flex-wrap > div { flex: 1 1 calc(50% - 8px); min-width: 70px; }
    #sz-container .flex.items-end.gap-3.flex-wrap > button { flex: 0 0 100%; }

    /* ── MLB Box Score modal: scroll batting table ── */
    #mlb-boxscore-modal > div { min-width: 0 !important; width: calc(100vw - 24px) !important; max-width: 100% !important; max-height: 90vh !important; padding: 16px !important; }
    #boxscore-body { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    #boxscore-body table { min-width: 340px; font-size: 9px !important; }

    /* ── Scout / Builder page: compact on mobile ── */
    #page-builder .max-w-4xl { max-width: 100% !important; padding: 0 !important; }
    #page-builder .space-y-6 { gap: 12px !important; }
    #page-builder .grid.grid-cols-4 { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
    #page-builder .grid.grid-cols-3 { grid-template-columns: 1fr !important; gap: 8px !important; }
    #page-builder h2 { font-size: 1.1rem !important; }
    /* Scout input fields stack vertically */
    #page-builder .grid.grid-cols-2.gap-4 { grid-template-columns: 1fr !important; gap: 8px !important; }
    /* Scout Model Verdicts table: horizontal scroll */
    #bldr-analysis .bg-surface-container.border.rounded-xl.overflow-hidden { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
    #bldr-analysis table { min-width: 560px; }
    #bldr-analysis table th, #bldr-analysis table td { padding: 6px 6px !important; font-size: 9px !important; }
    /* Scout game log: horizontal scroll */
    #bldr-log .overflow-x-auto { -webkit-overflow-scrolling: touch !important; }
    /* Scout cards row: wrap on mobile */
    #bldr-cards { grid-template-columns: 1fr 1fr !important; }
    #bldr-cards > div { min-width: 0 !important; }
    /* Scout verdict buttons */
    #bldr-verdict button { font-size: 9px !important; padding: 6px !important; }
    /* Scout advanced matchup: compact */
    #bldr-advanced .grid.grid-cols-3 { grid-template-columns: 1fr !important; gap: 6px !important; }

    /* ── Today: MLB score readability on mobile ── */
    #today-game-grid .bg-surface-container { overflow: hidden; }
    /* Mobile parity: use the same neutral light palette site-wide */
    html.light body {
      background:
        radial-gradient(120% 92% at 14% 6%, rgba(243,246,251,0.75) 0%, rgba(243,246,251,0) 56%),
        radial-gradient(110% 84% at 86% 22%, rgba(232,237,245,0.68) 0%, rgba(232,237,245,0) 62%),
        linear-gradient(160deg, #fbfcff 0%, #f2f5fa 46%, #e9edf4 100%) !important;
      color: #111 !important;
    }
    html.light #main-area { background: transparent !important; }
    html.light .bg-surface-container { background-color: rgba(252,253,255,0.90) !important; }
    html.light .bg-surface-container-high { background-color: rgba(247,249,252,0.94) !important; }
    html.light .text-on-surface { color: #111 !important; }
    html.light .text-on-surface-variant { color: #2f3746 !important; }
    html.light .border-outline-variant,
    html.light .border-outline-variant\/10,
    html.light .border-outline-variant\/20 { border-color: rgba(0,0,0,0.38) !important; }
    /* Keep MLB footer/button color changes consistent on mobile */
    #today-game-grid [onclick*="mlbOpenCardDetails"] {
      color: #4169e1 !important;
      border-color: rgba(65,105,225,.3) !important;
      background: rgba(65,105,225,.12) !important;
    }
    #today-game-grid [onclick*="setSport('mlb');nav('prop-builder')"] {
      color: #111 !important;
    }


    /* ── Generic overflow protection ── */
    #main-area * { max-width: 100%; box-sizing: border-box; }
    #main-area img, #main-area svg { max-width: 100%; height: auto; }
    /* Exclude SVGs that have explicit sizes */
    #main-area svg[width] { max-width: none; height: unset; }
    /* Tables: allow scroll */
    #main-area table { max-width: none; }

    /* ── Sweat Station: full mobile overhaul ── */
    /* Page: scrollable column */
    #page-sweat {
      overflow-y: auto !important;
      height: auto !important;
      min-height: calc(100dvh - 56px);
      padding-bottom: calc(72px + env(safe-area-inset-bottom,0px) + 16px) !important;
    }
    /* Grid becomes vertical stack */
    #page-sweat > div.grid {
      display: flex !important;
      flex-direction: column !important;
      height: auto !important;
      overflow: visible !important;
    }
    /* Mobile stats strip visible */
    #sweat-mobile-stats {
      display: flex !important;
      flex-direction: row !important;
      padding-top: env(safe-area-inset-top, 0px);
    }
    /* Calendar column: full width, no right border, compact */
    #sweat-calendar-col {
      border-right: none !important;
      border-bottom: 1px solid rgba(255,255,255,.07) !important;
      overflow-y: visible !important;
    }
    /* Calendar grid: smaller cells on mobile */
    #sweat-cal-grid > div {
      min-height: 44px !important;
      padding: 4px 2px !important;
    }
    /* Collapsed calendar body hidden */
    #sweat-cal-body.sweat-cal-collapsed { display: none !important; }
    /* Show calendar toggle button on mobile */
    #sweat-cal-toggle { display: flex !important; }
    /* Right stats column: hidden on mobile (replaced by strip) */
    #sweat-right-col { display: none !important; }
    /* Center column: full width, scrollable */
    #sweat-center-col {
      overflow-y: visible !important;
      min-height: 0 !important;
      flex: none !important;
    }
    /* Tab bar: horizontally scrollable, no wrapping */
    #page-sweat .sweat-tabbar {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: none !important;
      flex-wrap: nowrap !important;
      padding-left: 12px !important;
      padding-right: 12px !important;
    }
    #page-sweat .sweat-tabbar::-webkit-scrollbar { display: none !important; }
    /* Today sport tab bar: hide scrollbar on all browsers */
    #today-sport-tabs::-webkit-scrollbar { display: none !important; }
    /* Tab buttons: no horizontal shrink */
    #page-sweat .sweat-tab { white-space: nowrap; flex-shrink: 0; }
    /* Bet cards: full width */
    #page-sweat .sweat-panel { padding: 12px !important; }
    #page-sweat .sweat-panel > div { width: 100% !important; }

    /* ══════════════════════════════════════════════════════
       PHASE D: MOBILE PORTRAIT OPTIMIZATIONS
    ══════════════════════════════════════════════════════ */

    /* ── 1. Global: min font + tap targets ── */
    * { -webkit-tap-highlight-color: transparent; }
    button, [role="button"], a, label, select, input[type="checkbox"],
    input[type="radio"], input[type="submit"] {
      min-height: 44px !important;
      min-width: 44px !important;
    }
    /* relax min-height for very small inline chips/tags */
    .bb-tag, .parlay-btn {
      min-height: 28px !important;
    }
    /* ensure no text is smaller than 12px on mobile */
    body, button, input, select, textarea {
      font-size: max(12px, 0.75rem) !important;
    }
    /* override tiny mono labels only where specific content needs it */
    .mono.text-\[8px\], .mono.text-\[9px\] { font-size: 10px !important; }
    .mono.text-\[10px\] { font-size: 11px !important; }

    /* ── 2. No horizontal overflow ── */
    body { overflow-x: hidden !important; }
    #main-area, .page { overflow-x: hidden !important; }

    /* ── 4. NBA box score modal → bottom sheet ── */
    #boxscore-modal {
      align-items: flex-end !important;
      padding: 0 !important;
    }
    #boxscore-sheet,
    #boxscore-modal > div {
      width: 100% !important;
      max-width: 100% !important;
      max-height: 90dvh !important;
      border-radius: 20px 20px 0 0 !important;
      border-left: none !important;
      border-right: none !important;
      border-bottom: none !important;
    }

    /* ── 5. NHL box score modal → bottom sheet ── */
    #nhl-boxscore-modal {
      align-items: flex-end !important;
      padding: 0 !important;
    }
    #nhl-boxscore-modal > div {
      width: 100% !important;
      max-width: 100% !important;
      max-height: 90dvh !important;
      border-radius: 20px 20px 0 0 !important;
      border-left: none !important;
      border-right: none !important;
      border-bottom: none !important;
    }
    #nhl-boxscore-body {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch !important;
    }
    /* NHL box score inner tables: horizontal scroll */
    #nhl-boxscore-body table { min-width: 480px; }
    #nhl-boxscore-body table th,
    #nhl-boxscore-body table td { padding: 5px 6px !important; font-size: 10px !important; }

    /* ── 6. MLB box score modal → bottom sheet ── */
    #mlb-boxscore-modal {
      align-items: flex-end !important;
      padding: 0 !important;
    }
    #mlb-boxscore-modal > div {
      width: 100% !important;
      max-width: 100% !important;
      max-height: 90dvh !important;
      border-radius: 20px 20px 0 0 !important;
      border-left: none !important;
      border-right: none !important;
      border-bottom: none !important;
    }

    /* ── 8. Bet tracker table: hide less-critical columns ── */
    #page-bet-tracker table th:nth-child(3),
    #page-bet-tracker table td:nth-child(3) { display: none !important; } /* book */
    #page-bet-tracker table th:nth-child(4),
    #page-bet-tracker table td:nth-child(4) { display: none !important; } /* odds */
    /* keep: date, bet, stake, result, p&l */

    /* ── 9. Bet slip table (inside slip panel / modal) ── */
    #slip-table th:nth-child(3),
    #slip-table td:nth-child(3) { display: none !important; }

    /* ── 10. Log modal: full screen ── */
    #log-modal.open > div { width: 100vw !important; max-width: 100% !important; max-height: 100dvh !important; border-radius: 0 !important; margin: 0 !important; }

    /* ── 11. Parlay builder modal: full-width bottom sheet ── */
    #parlay-modal.open {
      align-items: flex-end !important;
      padding: 0 !important;
    }
    #parlay-modal.open > div {
      width: 100% !important;
      max-width: 100% !important;
      max-height: 92dvh !important;
      border-radius: 20px 20px 0 0 !important;
    }
  }

  /* ── Mobile nav / logo ── */
  #mobile-nav { display: none; }
  #mobile-logo { display: none; }
  #slip-fab { display: none; }
  #bottom-nav-bar { display: none; }

  /* ══════════════════════════════════════════════════════
     BOTTOM NAV BAR
  ══════════════════════════════════════════════════════ */
  #bottom-nav-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: calc(62px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 250;
    background: rgba(10,12,18,0.97);
    border-top: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    flex-direction: row;
    align-items: stretch;
  }
  .bnav-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 4px 4px;
    background: none;
    border: none;
    color: rgba(200,216,255,0.38);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s;
    position: relative;
  }
  .bnav-btn.active { color: #10b981; }
  .bnav-btn.cat-open {
    color: #fff;
  }
  .bnav-btn.cat-open::before {
    content: '';
    position: absolute;
    top: 0; left: 12px; right: 12px;
    height: 2px;
    background: #10b981;
    border-radius: 0 0 2px 2px;
  }
  .bnav-icon { font-size: 22px; line-height: 1; }
  .bnav-label {
    font-size: 8px;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    letter-spacing: .07em;
    text-transform: uppercase;
    line-height: 1;
  }

  /* ── Radial overlay (backdrop + floating page items) ── */
  #radial-overlay {
    position: fixed;
    inset: 0;
    z-index: 249;
    pointer-events: none;
  }
  #radial-overlay.open { pointer-events: all; }
  #radial-overlay #radial-backdrop {
    position: absolute; inset: 0;
    background: rgba(4,6,12,0.32);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
  }
  #radial-overlay.open #radial-backdrop { opacity: 1; pointer-events: all; }

  /* Radial page items — JS sets top/left dynamically */
  .radial-item {
    position: fixed;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: rgba(18,22,34,0.94);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(237,237,245,0.82);
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    z-index: 252;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 3px 16px rgba(0,0,0,0.55);
    transform: scale(0.15);
    transition: transform .38s cubic-bezier(.34,1.56,.64,1), opacity .22s ease, background .18s, border-color .18s;
  }
  .radial-item::after {
    content: attr(data-label);
    position: absolute;
    bottom: -18px;
    left: 50%; transform: translateX(-50%);
    font-size: 7.5px;
    font-weight: 800;
    font-family: 'Inter', sans-serif;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(237,237,245,0.62);
    white-space: nowrap;
    pointer-events: none;
  }
  .radial-item.open {
    opacity: 1;
    pointer-events: all;
    transform: scale(1);
  }
  .radial-item:active { transform: scale(0.86) !important; }
  .radial-item.radial-active {
    background: rgba(16,185,129,0.22) !important;
    border-color: rgba(16,185,129,0.50) !important;
    color: #10b981 !important;
  }

  /* ── Slip bottom sheet (hidden by default, shown on mobile via JS) ── */
  #slip-sheet {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 300;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
  }
  #slip-sheet .sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
  }
  #slip-sheet .sheet-body {
    position: relative;
    background: #1a1d24;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border: 1px solid rgba(255,255,255,.08);
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }
  .mv-sheet-snav-active {
    color: #10b981 !important;
  }

  /* ══ CSS Colour tokens — applied via inline styles & JS-generated HTML ══
     :root  = dark defaults  |  html.light = readable light-mode values       */
  :root {
    --c-green:         #6bff8f;
    --c-green-dim:     rgba(107,255,143,0.60);
    --c-blue:          #10b981;
    --c-blue-dim:      rgba(16,185,129,0.53);
    --c-blue-muted:    rgba(16,185,129,0.40);
    --c-blue-faint:    rgba(16,185,129,0.27);
    --c-red:           #ff716a;
    --c-red-dim:       rgba(255,113,106,0.53);
    --c-text:          #f2f5fb;
    --c-text-dim:      #d7def0;
    --c-surface-inner: rgba(255,255,255,0.04);
    --c-dd-hover:      rgba(16,185,129,0.10);
    --c-green-bg:      rgba(107,255,143,0.10);
    --c-green-bd:      1.5px solid rgba(107,255,143,0.50);
    --c-green-log-bg:  rgba(107,255,143,0.12);
    --c-green-log-bd:  rgba(107,255,143,0.40);
    --c-model:         #bb86fc;
    --c-model-dim:     rgba(187,134,252,0.38);
    --c-fd:            #1493ff;
    --c-fd-dim:        rgba(20,147,255,0.50);
    --c-edge-great:    #00e676;
    --c-edge-good:     #69f0ae;
    --c-edge-ok:       #a8d8a8;
    --c-edge-warn:     #ffaa88;
    --c-edge-bad:      #ff5252;
    --c-gold:          #fbbf24;
    --c-xp-bg:         rgba(16,185,129,0.06);
    --c-xp-bd:         rgba(16,185,129,0.15);
    --c-xp-row:        rgba(16,185,129,0.08);
    --c-xp-head:       rgba(16,185,129,0.15);
  }
  html:not(.light) body {
    background: #000000 !important;
    color: #f0ece6 !important;
  }
  html:not(.light) .bg-surface,
  html:not(.light) .bg-surface-dim,
  html:not(.light) .bg-background { background-color: #000000 !important; }
  html:not(.light) .bg-surface-container-low { background-color: #111111 !important; }
  html:not(.light) .bg-surface-container { background-color: rgba(18,18,18,0.92) !important; }
  html:not(.light) .bg-surface-container-high { background-color: rgba(22,22,22,0.96) !important; }
  html:not(.light) .bg-surface-container-highest { background-color: rgba(28,28,28,0.98) !important; }
  html:not(.light) .bg-surface-bright { background-color: #1e1e1e !important; }
  html:not(.light) body { background: #000000 !important; }
  html:not(.light) #sidebar {
    background: rgba(8,8,8,0.99) !important;
    border-right-color: rgba(160,148,130,0.18) !important;
  }
  html:not(.light) #main-area {
    background: #000000 !important;
  }
  html:not(.light) .text-on-surface { color: #f0ece6 !important; }
  html:not(.light) .text-on-surface-variant { color: #d4cdc4 !important; }
  html:not(.light) .border-outline-variant\/5  { border-color: rgba(160,148,130,0.12) !important; }
  html:not(.light) .border-outline-variant\/10 { border-color: rgba(160,148,130,0.20) !important; }
  html:not(.light) .border-outline-variant\/15 { border-color: rgba(160,148,130,0.26) !important; }
  html:not(.light) .border-outline-variant\/20 { border-color: rgba(160,148,130,0.32) !important; }
  html:not(.light) .border-outline-variant\/30 { border-color: rgba(160,148,130,0.40) !important; }
  html:not(.light) .border-outline-variant { border-color: #5e564c !important; }

  /* ── EX page: all borders visibly white ── */
  html:not(.light) #page-ex .border-outline-variant\/5  { border-color: rgba(255,255,255,.12) !important; }
  html:not(.light) #page-ex .border-outline-variant\/10 { border-color: rgba(255,255,255,.20) !important; }
  html:not(.light) #page-ex .border-outline-variant\/15 { border-color: rgba(255,255,255,.28) !important; }
  html:not(.light) #page-ex .border-outline-variant\/20 { border-color: rgba(255,255,255,.35) !important; }
  html:not(.light) #page-ex .border-white\/5            { border-color: rgba(255,255,255,.12) !important; }
  /* outer container borders → 2 px */
  #page-ex .border.border-outline-variant\/15  { border-width: 2px !important; }
  #page-ex input.border-outline-variant\/15    { border-width: 2px !important; }
  /* filter drawer */
  html:not(.light) #ex-filter-drawer .border-outline-variant\/10 { border-color: rgba(255,255,255,.20) !important; }
  html:not(.light) #ex-filter-drawer .border-outline-variant\/20 { border-color: rgba(255,255,255,.32) !important; }

  html.light {
    --c-green:         #007028;
    --c-green-dim:     rgba(0,112,40,0.70);
    --c-blue:          #2a5bc6;
    --c-blue-dim:      rgba(42,91,198,0.60);
    --c-blue-muted:    rgba(42,91,198,0.45);
    --c-blue-faint:    rgba(42,91,198,0.28);
    --c-red:           #bd2c22;
    --c-red-dim:       rgba(189,44,34,0.60);
    --c-text:          #1c2238;
    --c-text-dim:      #38405f;
    --c-surface-inner: rgba(0,0,0,0.04);
    --c-dd-hover:      rgba(100,108,168,0.12);
    --c-green-bg:      rgba(0,112,40,0.14);
    --c-green-bd:      1.5px solid rgba(0,112,40,0.55);
    --c-green-log-bg:  rgba(0,112,40,0.14);
    --c-green-log-bd:  rgba(0,112,40,0.55);
    --c-model:         #7b1fa2;
    --c-model-dim:     rgba(123,31,162,0.45);
    --c-fd:            #0b6fcc;
    --c-fd-dim:        rgba(11,111,204,0.45);
    --c-edge-great:    #007028;
    --c-edge-good:     #1b8a3e;
    --c-edge-ok:       #4a7a58;
    --c-edge-warn:     #c66a20;
    --c-edge-bad:      #bd2c22;
    --c-gold:          #b45309;
    --c-xp-bg:         rgba(100,108,168,0.06);
    --c-xp-bd:         rgba(100,108,168,0.25);
    --c-xp-row:        rgba(100,108,168,0.12);
    --c-xp-head:       rgba(100,108,168,0.25);
  }
  html.light ::selection { background: rgba(42,91,198,0.22); color: #18192a; }

  /* ══════════════════════════════════════════════════════
     MLB THEME  ·  body[data-sport="mlb"]  ·  Gold/amber accent
  ══════════════════════════════════════════════════════ */

  /* ── Today page toolbar + sidebar always stay green ── */
  body[data-sport="mlb"] #page-today .text-primary            { color: #10b981 !important; }
  body[data-sport="mlb"] #page-today .bg-primary              { background-color: #10b981 !important; }
  body[data-sport="mlb"] #page-today .bg-primary\/5           { background-color: rgba(16,185,129,0.07) !important; }
  body[data-sport="mlb"] #page-today .bg-primary\/10          { background-color: rgba(16,185,129,0.10) !important; }
  body[data-sport="mlb"] #page-today .bg-primary\/15          { background-color: rgba(16,185,129,0.15) !important; }
  body[data-sport="mlb"] #page-today .bg-primary\/20          { background-color: rgba(16,185,129,0.20) !important; }
  body[data-sport="mlb"] #page-today .border-primary          { border-color: #10b981 !important; }
  body[data-sport="mlb"] #page-today .border-primary\/20      { border-color: rgba(16,185,129,0.20) !important; }
  body[data-sport="mlb"] #page-today .border-primary\/30      { border-color: rgba(16,185,129,0.30) !important; }
  body[data-sport="mlb"] #page-today .text-on-primary         { color: #022c22 !important; }
  /* Sidebar + header always green regardless of sport */
  body[data-sport="mlb"] #sidebar .text-primary               { color: #10b981 !important; }
  body[data-sport="mlb"] #sidebar .bg-primary                 { background-color: #10b981 !important; }
  body[data-sport="mlb"] #sidebar .bg-primary\/10             { background-color: rgba(16,185,129,0.10) !important; }
  body[data-sport="mlb"] #sidebar .bg-primary\/20             { background-color: rgba(16,185,129,0.20) !important; }
  body[data-sport="mlb"] #sidebar .border-primary\/30         { border-color: rgba(16,185,129,0.30) !important; }
  body[data-sport="mlb"] #sidebar .text-on-primary            { color: #022c22 !important; }
  body[data-sport="mlb"] header .text-primary                 { color: #10b981 !important; }
  body[data-sport="mlb"] header .bg-primary\/10               { background-color: rgba(16,185,129,0.10) !important; }
  body[data-sport="mlb"] header .border-primary\/20           { border-color: rgba(16,185,129,0.20) !important; }
  body[data-sport="mlb"] #bottom-nav-bar .text-primary        { color: #10b981 !important; }

  body[data-sport="mlb"] .text-primary            { color: #fbbf24 !important; }
  body[data-sport="mlb"] .bg-primary              { background-color: #fbbf24 !important; }
  body[data-sport="mlb"] .bg-primary\/5           { background-color: rgba(251,191,36,0.07) !important; }
  body[data-sport="mlb"] .bg-primary\/10          { background-color: rgba(251,191,36,0.12) !important; }
  body[data-sport="mlb"] .bg-primary\/15          { background-color: rgba(251,191,36,0.16) !important; }
  body[data-sport="mlb"] .bg-primary\/20          { background-color: rgba(251,191,36,0.22) !important; }
  body[data-sport="mlb"] .bg-primary\/70          { background-color: rgba(251,191,36,0.62) !important; }
  body[data-sport="mlb"] .border-primary          { border-color: #fbbf24 !important; }
  body[data-sport="mlb"] .border-primary\/20      { border-color: rgba(251,191,36,0.22) !important; }
  body[data-sport="mlb"] .border-primary\/30      { border-color: rgba(251,191,36,0.32) !important; }
  body[data-sport="mlb"] .text-on-primary         { color: #3a1f00 !important; }
  body[data-sport="mlb"] .border-b-2.border-primary { border-color: #fbbf24 !important; }
  body[data-sport="mlb"] {
    --c-blue:       #fbbf24;
    --c-blue-dim:   rgba(251,191,36,0.53);
    --c-blue-muted: rgba(251,191,36,0.40);
    --c-blue-faint: rgba(251,191,36,0.27);
    --md-sys-color-primary:    #fbbf24;
    --md-sys-color-on-primary: #3a1f00;
  }
  html.light body[data-sport="mlb"] .text-primary       { color: #b45309 !important; }
  html.light body[data-sport="mlb"] .bg-primary         { background-color: #d97706 !important; }
  html.light body[data-sport="mlb"] .bg-primary\/5      { background-color: rgba(217,119,6,0.07) !important; }
  html.light body[data-sport="mlb"] .bg-primary\/10     { background-color: rgba(217,119,6,0.12) !important; }
  html.light body[data-sport="mlb"] .bg-primary\/15     { background-color: rgba(217,119,6,0.16) !important; }
  html.light body[data-sport="mlb"] .bg-primary\/20     { background-color: rgba(217,119,6,0.22) !important; }
  html.light body[data-sport="mlb"] .border-primary     { border-color: #d97706 !important; }
  html.light body[data-sport="mlb"] .border-primary\/20 { border-color: rgba(217,119,6,0.22) !important; }
  html.light body[data-sport="mlb"] .border-primary\/30 { border-color: rgba(217,119,6,0.32) !important; }
  html.light body[data-sport="mlb"] .text-on-primary    { color: #fff8e7 !important; }
  html.light body[data-sport="mlb"] {
    --c-blue:       #d97706;
    --c-blue-dim:   rgba(217,119,6,0.60);
    --c-blue-muted: rgba(217,119,6,0.45);
    --c-blue-faint: rgba(217,119,6,0.28);
    --md-sys-color-primary:    #d97706;
    --md-sys-color-on-primary: #fff8e7;
  }

  /* ══════════════════════════════════════════════════════
     LIGHT MODE  ·  html.light  ·  Matte silver-white gradient
  ══════════════════════════════════════════════════════ */
  html.light { color-scheme: light; }

  html.light body {
    background:
      radial-gradient(120% 92% at 14% 6%, rgba(243,246,251,0.75) 0%, rgba(243,246,251,0) 56%),
      radial-gradient(110% 84% at 86% 22%, rgba(232,237,245,0.68) 0%, rgba(232,237,245,0) 62%),
      linear-gradient(160deg, #fbfcff 0%, #f2f5fa 46%, #e9edf4 100%) !important;
    color: #111 !important;
  }

  /* Surfaces */
  html.light .bg-background,
  html.light .bg-surface,
  html.light .bg-surface-dim           { background-color: #f3f5f9 !important; }
  html.light .bg-surface-container-lowest         { background-color: #e7ebf0 !important; }
  html.light .bg-surface-container-lowest\/60     { background-color: rgba(231,235,240,0.78) !important; }
  html.light .bg-surface-container-lowest\/80     { background-color: rgba(231,235,240,0.90) !important; }
  html.light .bg-surface-container-low            { background-color: #eff2f7 !important; }
  html.light .bg-surface-container                { background-color: rgba(252,253,255,0.90) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  html.light .bg-surface-container-high           { background-color: rgba(247,249,252,0.94) !important; }
  html.light .bg-surface-container-high\/20       { background-color: rgba(247,249,252,0.44) !important; }
  html.light .bg-surface-container-high\/30       { background-color: rgba(247,249,252,0.56) !important; }
  html.light .bg-surface-container-high\/40       { background-color: rgba(247,249,252,0.66) !important; }
  html.light .bg-surface-container-high\/60       { background-color: rgba(247,249,252,0.80) !important; }
  html.light .bg-surface-container-highest        { background-color: rgba(243,246,250,0.96) !important; }
  html.light .bg-surface-bright           { background-color: rgba(255,255,255,0.98) !important; }
  html.light .bg-surface-variant          { background-color: #e8ecf2 !important; }

  /* Text */
  html.light .text-on-surface             { color: #111 !important; }
  html.light .text-on-surface-variant     { color: #2f3746 !important; }
  html.light .text-on-background          { color: #111 !important; }
  html.light .text-outline                { color: #414959 !important; }
  html.light #page-aincrad,
  html.light #page-aincrad .text-on-surface,
  html.light #page-aincrad .mono { color: #1f2741 !important; }
  html.light #page-aincrad .text-on-surface-variant,
  html.light #page-aincrad .text-on-surface-variant\/60,
  html.light #page-aincrad .text-on-surface-variant\/50,
  html.light #page-aincrad .text-on-surface-variant\/40 {
    color: #5a6482 !important;
    opacity: 1 !important;
  }
  html.light #page-aincrad input,
  html.light #page-aincrad select,
  html.light #page-aincrad button {
    font-weight: 700 !important;
  }
  html.light #page-aincrad input::placeholder { color: #7a84a0 !important; }

  /* Prop Builder v2 (site-wide light mode readability) */
  html.light #page-prop-builder #pb2-tab-nba,
  html.light #page-prop-builder #pb2-tab-mlb {
    color: #2f3746 !important;
    border-color: rgba(0,0,0,0.24) !important;
    background: rgba(255,255,255,0.65) !important;
  }
  html.light #page-prop-builder #pb2-tab-nba[style*="rgba(16,185,129,.16)"],
  html.light #page-prop-builder #pb2-tab-mlb[style*="rgba(16,185,129,.16)"] {
    color: #1f3f9c !important;
    border-color: rgba(65,105,225,.55) !important;
    background: rgba(65,105,225,.16) !important;
  }
  html.light #page-prop-builder #pb2-market-select {
    color: #111 !important;
    border-color: rgba(0,0,0,0.30) !important;
    background: rgba(255,255,255,0.82) !important;
  }
  html.light #page-prop-builder #pb2-fav-tabs button {
    color: #2f3746 !important;
    border-color: rgba(0,0,0,0.24) !important;
    background: rgba(255,255,255,0.68) !important;
  }
  html.light #page-prop-builder #pb2-fav-tabs button[style*="rgba(16,185,129,.16)"] {
    color: #1f3f9c !important;
    border-color: rgba(65,105,225,.55) !important;
    background: rgba(65,105,225,.16) !important;
  }
  html.light #page-prop-builder button[onclick*="pb2AddSelectedMarket"] {
    color: #0d7b39 !important;
    border-color: rgba(13,123,57,.34) !important;
    background: rgba(13,123,57,.12) !important;
  }
  html.light #page-prop-builder button[onclick*="pb2RemoveSelectedMarket"] {
    color: #b2302a !important;
    border-color: rgba(178,48,42,.34) !important;
    background: rgba(178,48,42,.12) !important;
  }
  html.light #page-prop-builder #pb2-events button {
    color: #111 !important;
    border-color: rgba(0,0,0,0.22) !important;
    background: rgba(255,255,255,0.70) !important;
  }
  html.light #page-prop-builder #pb2-events button[style*="rgba(16,185,129,.10)"] {
    border-color: rgba(65,105,225,.55) !important;
    background: rgba(65,105,225,.10) !important;
  }
  html.light #page-prop-builder #pb2-events button .text-on-surface-variant,
  html.light #page-prop-builder #pb2-events button span[style*="color:#10b981"] {
    color: #334155 !important;
  }
  html.light #page-prop-builder #pb2-coverage-badge {
    color: #1f3f9c !important;
    border-color: rgba(65,105,225,.45) !important;
    background: rgba(65,105,225,.12) !important;
  }
  html.light #page-prop-builder #pb2-props-head-row {
    background: #1c2334 !important;
    color: #dbe6ff !important;
  }
  html.light #page-prop-builder #pb2-props-head-row th { color: #dbe6ff !important; }

  /* Borders */
  html.light .border-outline-variant\/5  { border-color: rgba(0,0,0,0.14) !important; }
  html.light .border-outline-variant\/10 { border-color: rgba(0,0,0,0.22) !important; }
  html.light .border-outline-variant\/15 { border-color: rgba(0,0,0,0.30) !important; }
  html.light .border-outline-variant\/20 { border-color: rgba(0,0,0,0.38) !important; }
  html.light .border-outline-variant\/30 { border-color: rgba(0,0,0,0.48) !important; }
  html.light .border-outline-variant     { border-color: rgba(0,0,0,0.45) !important; }

  /* Primary – richer blue on light */
  html.light .text-primary               { color: #2a5bc6 !important; }
  html.light .text-on-primary            { color: #ffffff !important; }
  html.light .bg-primary                 { background-color: #3a6dd4 !important; }
  html.light .bg-primary\/5              { background-color: rgba(58,109,212,0.07) !important; }
  html.light .bg-primary\/10             { background-color: rgba(58,109,212,0.12) !important; }
  html.light .bg-primary\/20             { background-color: rgba(58,109,212,0.20) !important; }
  html.light .border-primary             { border-color: #3a6dd4 !important; }
  html.light .border-primary\/15         { border-color: rgba(58,109,212,0.28) !important; }
  html.light .border-primary\/20         { border-color: rgba(58,109,212,0.35) !important; }
  html.light .border-primary\/30         { border-color: rgba(58,109,212,0.46) !important; }
  html.light .focus\:border-primary:focus{ border-color: #3a6dd4 !important; }

  /* Secondary – deeper green */
  html.light .text-secondary             { color: #007028 !important; }
  html.light .bg-secondary               { background-color: #007028 !important; }
  html.light .bg-secondary\/5            { background-color: rgba(0,112,40,0.07) !important; }
  html.light .bg-secondary\/8            { background-color: rgba(0,112,40,0.09) !important; }
  html.light .bg-secondary\/10           { background-color: rgba(0,112,40,0.12) !important; }
  html.light .bg-secondary\/15           { background-color: rgba(0,112,40,0.15) !important; }
  html.light .bg-secondary\/20           { background-color: rgba(0,112,40,0.18) !important; }
  html.light .bg-secondary\/30           { background-color: rgba(0,112,40,0.22) !important; }
  html.light .bg-secondary\/60           { background-color: rgba(0,112,40,0.52) !important; }
  html.light .bg-secondary\/70           { background-color: rgba(0,112,40,0.62) !important; }
  html.light .bg-secondary\/80           { background-color: rgba(0,112,40,0.72) !important; }
  html.light .border-secondary\/15       { border-color: rgba(0,112,40,0.28) !important; }
  html.light .border-secondary\/20       { border-color: rgba(0,112,40,0.36) !important; }
  html.light .border-secondary\/30       { border-color: rgba(0,112,40,0.48) !important; }

  /* Tertiary – deeper red */
  html.light .text-tertiary              { color: #bd2c22 !important; }
  html.light .bg-tertiary                { background-color: #bd2c22 !important; }
  html.light .bg-tertiary\/5             { background-color: rgba(189,44,34,0.07) !important; }
  html.light .bg-tertiary\/10            { background-color: rgba(189,44,34,0.10) !important; }
  html.light .bg-tertiary\/15            { background-color: rgba(189,44,34,0.14) !important; }
  html.light .bg-tertiary\/20            { background-color: rgba(189,44,34,0.18) !important; }
  html.light .bg-tertiary\/30            { background-color: rgba(189,44,34,0.20) !important; }
  html.light .bg-tertiary\/60            { background-color: rgba(189,44,34,0.52) !important; }
  html.light .border-tertiary\/20        { border-color: rgba(189,44,34,0.36) !important; }
  html.light .border-tertiary\/30        { border-color: rgba(189,44,34,0.46) !important; }

  /* Primary – missing opacity variants */
  html.light .bg-primary\/15             { background-color: rgba(58,109,212,0.16) !important; }
  html.light .bg-primary\/70             { background-color: rgba(58,109,212,0.62) !important; }

  /* Sidebar */
  html.light #sidebar {
    background:
      radial-gradient(140% 90% at 8% 12%, rgba(236,239,246,0.92) 0%, rgba(236,239,246,0) 55%),
      radial-gradient(120% 85% at 88% 28%, rgba(228,232,240,0.82) 0%, rgba(228,232,240,0) 58%),
      linear-gradient(180deg, rgba(252,253,255,0.99) 0%, rgba(240,243,249,0.99) 52%, rgba(233,237,245,0.99) 100%) !important;
    border-right-color: rgba(0,0,0,0.45) !important;
  }
  html.light #main-area {
    background: #f0f2f5 !important;
  }
  /* dark-mode active nav item */
  .nav-active {
    background: rgba(16,185,129,0.10) !important;
    color: #10b981 !important;
    box-shadow: inset 2px 0 0 #10b981;
  }
  .nav-active .material-symbols-outlined {
    color: #10b981 !important;
  }
  html.light .nav-active {
    background: rgba(5,150,105,0.10) !important;
    color: #065f46 !important;
    box-shadow: inset 2px 0 0 #059669;
    border-right-color: transparent !important;
  }
  html.light .nav-active .material-symbols-outlined {
    color: #065f46 !important;
  }
  /* Sidebar — white background */
  html.light #sidebar {
    background: #ffffff !important;
    border-right-color: rgba(0,0,0,0.10) !important;
  }
  html.light #sidebar nav a,
  html.light #sidebar nav a .material-symbols-outlined,
  html.light #sidebar .sb-label,
  html.light #sidebar .text-on-surface-variant {
    color: #1a1a2e !important;
  }
  /* Sidebar section labels (CORE / RESEARCH / MANAGEMENT / MODEL HEALTH) → royal blue */
  html.light #sidebar .text-primary\/50,
  html.light #sidebar [class*="text-primary"] {
    color: #2553c7 !important;
    opacity: 1 !important;
  }
  html.light #sidebar nav > div {
    color: #1a1a2e !important;
    opacity: 1 !important;
  }
  /* Sidebar divider lines under section labels */
  html.light #sidebar .bg-outline-variant\/15 {
    background-color: rgba(37,83,199,0.20) !important;
  }

  /* Header */
  html.light header {
    background-color: #ffffff !important;
    border-bottom-color: rgba(0,0,0,0.09) !important;
  }

  /* Ticker bar */
  html.light .h-7.bg-surface-container-lowest {
    background-color: #dae0f1 !important;
    border-bottom-color: rgba(100,108,168,0.20) !important;
  }

  /* Inputs / selects */
  html.light input[type="number"],
  html.light input[type="text"],
  html.light input[type="email"],
  html.light select,
  html.light textarea {
    background-color: rgba(255,255,255,0.80) !important;
    color: #18192a !important;
    border-color: rgba(100,108,168,0.36) !important;
  }
  html.light input::placeholder,
  html.light textarea::placeholder { color: #9096ad !important; }

  /* Scrollbar */
  html.light ::-webkit-scrollbar-thumb  { background: #aeb3ce !important; }
  html.light ::-webkit-scrollbar-track  { background: rgba(215,220,238,0.5) !important; }

  /* Bet rows */
  html.light .bet-row:hover             { background: rgba(58,109,212,0.05) !important; }
  html.light .bet-row.bt-selected       { background: rgba(58,109,212,0.08) !important; }

  /* Row hover highlights — Tailwind generates separate hover: classes that need their own override */
  html.light .hover\:bg-surface-container-high:hover { background-color: rgba(0,0,0,0.06) !important; }
  html.light .hover\:bg-surface-container:hover      { background-color: rgba(0,0,0,0.08) !important; }
  html.light .hover\:bg-surface-bright:hover         { background-color: rgba(255,255,255,0.90) !important; }

  /* Slip sheet - light mode */
  html.light #slip-sheet .sheet-body    { background: #eef1fc !important; border-top-color: rgba(100,108,168,0.20) !important; }

  /* Bottom nav bar - light mode */
  html.light #bottom-nav-bar { background: rgba(238,241,252,0.97) !important; border-top-color: rgba(100,108,168,0.20) !important; }
  html.light .bnav-btn { color: rgba(24,25,42,0.38) !important; }
  html.light .bnav-btn.active { color: #2a5bc6 !important; }
  html.light .bnav-btn.cat-open { color: #18192a !important; }
  html.light .bnav-btn.cat-open::before { background: #3a6dd4 !important; }
  html.light .radial-item { background: rgba(248,250,255,0.97) !important; color: #18192a !important; border-color: rgba(100,108,168,0.22) !important; box-shadow: 0 2px 14px rgba(100,108,168,0.20) !important; }
  html.light .radial-item::after { color: rgba(24,25,42,0.60) !important; }
  html.light .radial-item.radial-active { background: rgba(58,109,212,0.12) !important; border-color: rgba(58,109,212,0.40) !important; color: #2a5bc6 !important; }

  /* Stat card hover */
  html.light .stat-card:hover { border-color: rgba(58,109,212,0.28) !important; box-shadow: 0 0 12px rgba(58,109,212,0.07) !important; }

  /* Best odds chip */
  html.light .best-odds { border-color: rgba(0,112,40,0.48) !important; color: #007028 !important; }

  /* Parlay button */
  html.light .parlay-btn {
    background: rgba(100,70,200,0.18) !important;
    border-color: rgba(100,70,200,0.55) !important;
    color: #4526b0 !important;
  }
  html.light .parlay-btn:hover { background: rgba(100,70,200,0.28) !important; }
  /* Prop table: light mode text overrides (inline style → !important) */
  html.light .prop-name-txt  { color: #18192a !important; }
  html.light .prop-proj-txt  { color: #18192a !important; }
  html.light .prop-line-ov   { color: rgba(24,25,42,0.80) !important; }
  html.light .prop-line-un   { color: rgba(24,25,42,0.38) !important; }

  /* Toast */
  html.light #toast {
    background: rgba(248,250,255,0.98) !important;
    border-color: rgba(58,109,212,0.28) !important;
    color: #2a5bc6 !important;
  }


  /* ── Light mode: NBA "Betting Odds" inner panel — white bg, dark text — overrides inline dark styles ── */
  /* ── Light mode: KPI strip boxes — white ── */
  html.light #today-kpi-strip > div {
    background: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.08) !important;
  }
  html.light #today-kpi-strip > div > div:first-child { color: #6b7280 !important; }

  /* ── Light mode: NBA "Betting Odds" inner panel — white bg, dark text — overrides inline dark styles ── */
  html.light .today-odds-wrap {
    background: rgba(255,255,255,0.96) !important;
    border-color: rgba(0,0,0,0.10) !important;
  }
  html.light .today-odds-head {
    background: rgba(245,246,250,0.98) !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
  }
  html.light .today-odds-head span[style*="color:#dbe3ff"],
  html.light .today-odds-head span { color: #1a1a2e !important; }
  html.light .today-odds-side {
    background: rgba(243,244,248,0.95) !important;
    border-color: rgba(0,0,0,0.09) !important;
  }
  /* Text inside betting odds cells — override inline color */
  html.light .today-odds-side div,
  html.light .today-odds-side span,
  html.light .today-odds-total div,
  html.light .today-odds-total span {
    color: #1a1a2e !important;
    text-shadow: none !important;
  }
  /* Book comparison section */
  html.light .today-books-wrap {
    border-top-color: rgba(0,0,0,0.07) !important;
  }
  html.light .today-books-table td,
  html.light .today-books-table th { color: #374151 !important; }
  html.light .today-books-table tr { border-top-color: rgba(0,0,0,0.06) !important; }

  /* ── Light mode: .tc-shimmer gradient cards keep dark bg — text = white + dark‑outline shadow ── */
  /* The team‑colour gradient centre is rgba(14,16,24,.96) in both modes, so text must stay white.  */
  /* Only override Tailwind utility‑class text; inline‑style colours in the JS templates are fixed   */
  /* in the isLight JS variables below. Inner white‑bg panels are excluded via .tc-inner-panel.      */
  html.light .tc-shimmer .text-on-surface {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.90), 0 0 10px rgba(0,0,0,.55) !important;
  }
  html.light .tc-shimmer .text-on-surface-variant {
    color: rgba(255,255,255,.82) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.85) !important;
  }
  html.light .tc-shimmer .text-secondary {
    color: #6bff8f !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.80) !important;
  }
  html.light .tc-shimmer .text-primary {
    color: #7dcfff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,.75) !important;
  }
  /* White‑background inner panels (pitcher box, live matchup) inside gradient cards — dark text, no shadow */
  html.light .tc-shimmer .tc-inner-panel,
  html.light .tc-shimmer .tc-inner-panel .text-on-surface,
  html.light .tc-shimmer .tc-inner-panel .text-on-surface-variant {
    color: #111 !important;
    text-shadow: none !important;
  }

  /* Light mode toggle knob position */
  html.light #toggle-light-mode       { background: #3a6dd4 !important; }
  html.light #toggle-light-mode > div { margin-left: auto !important; }

  /* Model Selector Bar – light mode */
  html.light .model-selector-header {
    display: none;
  }

  html.light .model-selector-bar,
  html.light .model-selector-bar-integrated {
    background: transparent;
  }
  html.light .model-selector-bar .ms-label,
  html.light .model-selector-bar-integrated .ms-label { 
    color: rgba(42,91,198,0.55) !important; 
  }
  html.light .model-selector-bar select,
  html.light .model-selector-bar-integrated select {
    background: rgba(255,255,255,0.85) !important;
    color: #18192a !important;
    border-color: rgba(100,108,168,0.36) !important;
  }
  html.light .model-selector-bar .ms-badge,
  html.light .model-selector-bar-integrated .ms-badge { 
    color: rgba(42,91,198,0.55) !important; 
  }
  html.light .model-selector-bar .ms-badge span,
  html.light .model-selector-bar-integrated .ms-badge span { 
    color: #2a5bc6 !important; 
  }

  /* ══════════════════════════════════════════════════════
     SWEAT STATION  ·  Dark Mode  ·  Aurora gradient
  ══════════════════════════════════════════════════════ */
  #page-sweat {
    --sw-text:       #f5f7fb;
    --sw-text-med:   rgba(226,232,243,0.92);
    --sw-text-dim:   rgba(198,207,224,0.72);
    --sw-text-faint: rgba(163,175,198,0.56);
    --sw-card-bg:    rgba(30,35,46,0.92);
    --sw-card-bd:    rgba(148,165,201,0.22);
    --sw-stat-bg:    rgba(255,255,255,0.05);
    --sw-sep:        rgba(255,255,255,0.09);
    --sw-accent:     #10b981;
    --sw-green:      #6bff8f;
    --sw-red:        #ff716a;
    --sw-gold:       #fbbf24;
  }
  #page-sweat .sweat-panel {
    background: linear-gradient(165deg, rgba(25,34,56,0.60) 0%, rgba(18,24,38,0.46) 35%, rgba(30,18,48,0.36) 70%, rgba(18,24,38,0.46) 100%);
  }
  #sweat-center-col {
    background: linear-gradient(175deg, rgba(18,30,58,0.42) 0%, rgba(12,18,32,0.28) 40%, rgba(30,16,54,0.24) 75%, rgba(12,18,32,0.28) 100%);
  }

  /* ══════════════════════════════════════════════════════
     SWEAT STATION  ·  Light Mode  ·  Apple-style contrast
  ══════════════════════════════════════════════════════ */
  html.light #page-sweat {
    --sw-text:       #1d1d1f;
    --sw-text-med:   #3a3a3c;
    --sw-text-dim:   #6e6e73;
    --sw-text-faint: #8e8e93;
    --sw-card-bg:    rgba(255,255,255,0.85);
    --sw-card-bd:    rgba(0,0,0,0.08);
    --sw-stat-bg:    rgba(0,0,0,0.03);
    --sw-sep:        rgba(0,0,0,0.06);
    --sw-accent:     #2a5bc6;
    --sw-green:      #007028;
    --sw-red:        #bd2c22;
    --sw-gold:       #b45309;
  }
  html.light #page-sweat .sweat-panel { background: transparent; }
  html.light #sweat-center-col { background: transparent; }
  /* Card surfaces */
  html.light #page-sweat .bg-surface-container { background-color: rgba(246,248,252,0.92) !important; border-color: rgba(56,64,95,0.14) !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
  html.light #page-sweat .bg-surface-container-low { background-color: rgba(248,248,250,0.95) !important; }
  html.light #page-sweat .bg-surface-container-high { background-color: rgba(245,245,247,0.90) !important; }
  /* Tab bar */
  html.light #page-sweat .sweat-tabbar { background-color: rgba(248,250,255,0.98) !important; border-bottom-color: rgba(0,0,0,0.08) !important; }
  html.light #page-sweat .sweat-tab.text-on-surface-variant { color: #8e8e93 !important; }
  html.light #page-sweat .sweat-tab.text-secondary { color: #007028 !important; }
  html.light #page-sweat .sweat-tab.border-secondary { border-color: #007028 !important; }
  /* Calendar column */
  html.light #sweat-calendar-col { border-right-color: rgba(0,0,0,0.06) !important; }
  html.light #sweat-right-col { border-left-color: rgba(0,0,0,0.06) !important; }
  /* Sport pill */
  html.light #sweat-sport-pill { background: rgba(0,0,0,0.03) !important; border-color: rgba(0,0,0,0.08) !important; }
  html.light #sweat-sport-pill button[style*="background:#10b981"] { background: #2a5bc6 !important; color: #fff !important; }
  html.light #sweat-sport-pill button[style*="background:transparent"] { color: #6e6e73 !important; }

  /* ── Model Selector Dropdown (Integrated into pages) ── */
  .model-selector-header {
    display: none;
  }

  .model-selector-bar-integrated {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
  }

  .ms-selector-group {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
  }

  .model-selector-bar,
  .model-selector-bar-integrated .ms-label {
    font-family: Inter, sans-serif;
    font-size: 9px;
    font-weight: 900;
    color: #10b98166;
    text-transform: uppercase;
    letter-spacing: .1em;
    white-space: nowrap;
  }

  .model-selector-bar select,
  .model-selector-bar-integrated select {
    background: #1d2026;
    border: 1px solid rgba(16,185,129,.2);
    border-radius: 8px;
    color: #e8eaee;
    font-family: Inter, sans-serif;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
    outline: none;
    transition: border-color .15s;
  }

  .model-selector-bar select:hover,
  .model-selector-bar select:focus,
  .model-selector-bar-integrated select:hover,
  .model-selector-bar-integrated select:focus {
    border-color: rgba(16,185,129,.5);
  }

  .model-selector-bar .ms-badge,
  .model-selector-bar-integrated .ms-badge {
    font-family: Inter, sans-serif;
    font-size: 10px;
    color: #10b98188;
  }

  .model-selector-bar .ms-badge span,
  .model-selector-bar-integrated .ms-badge span {
    color: #10b981;
    font-weight: 700;
  }

  /* ═══════════════════════════════════════════════════════════════
     LIQUID GLASS  ·  iOS / macOS 27 Design Language
     Inspired by Apple's dynamic material — frosted glass surfaces,
     spring animations, SF Pro typography, concentric pill shapes.
     SAFE RULE: zero !important on .stat-card · .today-game-card · .tc-shimmer
  ═══════════════════════════════════════════════════════════════ */

  /* ── 1. Font stack: SF Pro → system-ui → Inter fallback ── */
  body, button, input, select, textarea,
  .font-body, .font-headline, .font-mono {
    font-family: -apple-system, "SF Pro Display", "SF Pro Text",
                 BlinkMacSystemFont, "Helvetica Neue",
                 Inter, ui-sans-serif, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* ── 2. Background: pure black ── */
  html:not(.light) body {
    background: #000000 !important;
    color: #f0f2f8 !important;
  }
  html:not(.light) #main-area {
    background: #000000 !important;
  }
  html:not(.light) .bg-surface,
  html:not(.light) .bg-surface-dim,
  html:not(.light) .bg-background { background-color: #000000 !important; }
  html:not(.light) .bg-surface-container-low { background-color: rgba(18,18,18,0.90) !important; }
  html:not(.light) .bg-surface-container-lowest { background-color: #0a0a0a !important; }

  /* ── 3. Header: Liquid Glass floating bar ── */
  html:not(.light) header {
    background: rgba(8,10,16,0.76) !important;
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    border-bottom-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,0.05);
  }

  /* ── 4. Sidebar: deep glass layer ── */
  html:not(.light) #sidebar {
    background: rgba(10,10,10,0.98) !important;
    backdrop-filter: blur(40px) saturate(160%);
    -webkit-backdrop-filter: blur(40px) saturate(160%);
    border-right-color: rgba(255,255,255,0.07) !important;
  }

  /* ── 5. Surface containers: frosted glass panels ── */
  html:not(.light) .bg-surface-container {
    background: rgba(14,14,14,0.85) !important;
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
  }
  html:not(.light) .bg-surface-container-high {
    background: rgba(18,18,18,0.92) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  html:not(.light) .bg-surface-container-highest {
    background: rgba(22,22,22,0.97) !important;
  }
  html:not(.light) .bg-surface-bright { background-color: rgba(28,28,28,0.98) !important; }

  /* ── 6. Text color tune for cool dark ── */
  html:not(.light) .text-on-surface { color: #eef0f8 !important; }
  html:not(.light) .text-on-surface-variant { color: #9ba3bf !important; }

  /* ── 7. Border tones: cool blue-grey ── */
  html:not(.light) .border-outline-variant\/5  { border-color: rgba(200,210,255,0.06) !important; }
  html:not(.light) .border-outline-variant\/10 { border-color: rgba(200,210,255,0.10) !important; }
  html:not(.light) .border-outline-variant\/15 { border-color: rgba(200,210,255,0.14) !important; }
  html:not(.light) .border-outline-variant\/20 { border-color: rgba(200,210,255,0.18) !important; }
  html:not(.light) .border-outline-variant\/30 { border-color: rgba(200,210,255,0.26) !important; }
  html:not(.light) .border-outline-variant { border-color: rgba(200,210,255,0.28) !important; }

  /* ── 8. Sidebar nav links: concentric pill, glass active ── */
  #sidebar nav a {
    border-radius: 14px !important;
    transition: background 0.18s cubic-bezier(.4,0,.2,1),
                color 0.18s cubic-bezier(.4,0,.2,1),
                box-shadow 0.18s cubic-bezier(.4,0,.2,1) !important;
  }
  #sidebar nav a.nav-active {
    background: rgba(16,185,129,0.15) !important;
    color: #10b981 !important;
    box-shadow: inset 0 0 0 1px rgba(16,185,129,0.24) !important;
  }
  #sidebar nav a:hover:not(.nav-active) {
    background: rgba(200,210,255,0.06) !important;
    box-shadow: none !important;
  }

  /* ── 9. Sidebar LOG NEW BET → pill CTA ── */
  #sidebar .sb-foot button:first-child {
    border-radius: 50px !important;
    background: rgba(16,185,129,0.14) !important;
    border: 1px solid rgba(16,185,129,0.32) !important;
    box-shadow: 0 0 0 0 rgba(16,185,129,0) !important;
    transition: background 0.2s, box-shadow 0.2s, transform 0.12s cubic-bezier(.34,1.56,.64,1) !important;
    letter-spacing: 0.07em !important;
  }
  #sidebar .sb-foot button:first-child:hover {
    background: rgba(16,185,129,0.24) !important;
    box-shadow: 0 0 20px rgba(16,185,129,0.20) !important;
  }
  #sidebar .sb-foot button:first-child:active {
    transform: scale(0.96) !important;
  }

  /* ── 10. Header buttons: glass pills ── */
  header button {
    border-radius: 14px !important;
    transition: background 0.15s, box-shadow 0.15s, transform 0.1s cubic-bezier(.34,1.56,.64,1) !important;
  }
  header button:active { transform: scale(0.93) !important; }

  /* ── 11. API counter chip: glass pill ── */
  #api-live-counter {
    border-radius: 50px !important;
    background: rgba(14,17,26,0.72) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-color: rgba(255,255,255,0.09) !important;
  }
  #api-live-counter .text-on-surface,
  #api-live-counter .text-on-surface-variant,
  #api-live-counter #api-req-total,
  #api-live-counter #api-req-last {
    color: rgba(255,255,255,0.96) !important;
  }
  #api-live-counter #api-req-last { color: rgba(255,255,255,0.72) !important; }

  /* ── 12. Bankroll button: glass pill ── */
  header button[onclick*="nav('bet-tracker')"] {
    border-radius: 50px !important;
    padding: 6px 14px !important;
    background: rgba(14,17,26,0.72) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
  }
  header button[onclick*="nav('bet-tracker')"]:hover {
    background: rgba(20,24,36,0.88) !important;
    border-color: rgba(16,185,129,0.28) !important;
  }

  /* ── 13. Bottom nav bar: floating Liquid Glass ── */
  #bottom-nav-bar {
    background: rgba(8,10,16,0.86) !important;
    backdrop-filter: blur(28px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
    border-top-color: rgba(255,255,255,0.08) !important;
    box-shadow: 0 -1px 0 rgba(255,255,255,0.04) !important;
  }
  .bnav-btn {
    border-radius: 14px !important;
    margin: 5px 3px !important;
    transition: background 0.18s cubic-bezier(.4,0,.2,1),
                color 0.18s cubic-bezier(.4,0,.2,1),
                transform 0.14s cubic-bezier(.34,1.56,.64,1) !important;
  }
  .bnav-btn.active {
    background: rgba(16,185,129,0.15) !important;
    box-shadow: inset 0 0 0 1px rgba(16,185,129,0.22) !important;
    color: #10b981 !important;
  }
  .bnav-btn.active::before { background: #10b981 !important; }
  .bnav-btn:active { transform: scale(0.86) !important; }

  /* ── 14. Radial items: spherical glass ── */
  .radial-item {
    background: rgba(12,15,24,0.90) !important;
    backdrop-filter: blur(24px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
    border-color: rgba(255,255,255,0.13) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.65),
                inset 0 1px 0 rgba(255,255,255,0.09) !important;
    transition: transform 0.38s cubic-bezier(.34,1.56,.64,1),
                opacity 0.22s ease,
                background 0.18s,
                border-color 0.18s !important;
  }
  .radial-item:hover {
    background: rgba(16,20,32,0.96) !important;
    border-color: rgba(16,185,129,0.32) !important;
  }
  .radial-item.radial-active {
    background: rgba(16,185,129,0.20) !important;
    border-color: rgba(16,185,129,0.50) !important;
    box-shadow: 0 0 18px rgba(16,185,129,0.22),
                inset 0 1px 0 rgba(255,255,255,0.09) !important;
  }

  /* ── 15. Input fields: glass with focus ring ── */
  html:not(.light) input[type="text"],
  html:not(.light) input[type="number"],
  html:not(.light) input[type="search"],
  html:not(.light) input[type="email"],
  html:not(.light) input[type="password"],
  html:not(.light) select,
  html:not(.light) textarea {
    background: rgba(12,14,22,0.72) !important;
    border-color: rgba(255,255,255,0.10) !important;
    border-radius: 12px !important;
    color: #eef0f8 !important;
    transition: border-color 0.18s, box-shadow 0.18s !important;
  }
  html:not(.light) input:focus,
  html:not(.light) select:focus,
  html:not(.light) textarea:focus {
    border-color: rgba(16,185,129,0.46) !important;
    box-shadow: 0 0 0 3px rgba(16,185,129,0.12) !important;
    outline: none !important;
  }

  /* ── 16. Modals / bottom sheets: deep glass ── */
  html:not(.light) #boxscore-modal > div,
  html:not(.light) #nhl-boxscore-modal > div,
  html:not(.light) #mlb-boxscore-modal > div {
    background: rgba(10,12,20,0.96) !important;
    backdrop-filter: blur(32px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
    border-color: rgba(255,255,255,0.09) !important;
  }
  html:not(.light) #log-modal > div,
  html:not(.light) #parlay-modal > div {
    background: rgba(10,12,20,0.96) !important;
    backdrop-filter: blur(32px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
    border-color: rgba(255,255,255,0.09) !important;
  }

  /* ── 17. Slip sheet / bet slip: glass ── */
  html:not(.light) #slip-sheet .sheet-body {
    background: rgba(10,12,20,0.96) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
    border-color: rgba(255,255,255,0.09) !important;
  }

  /* ── 18. Alert panel: glass dropdown ── */
  #alert-panel {
    background: rgba(10,12,20,0.96) !important;
    backdrop-filter: blur(32px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
    border-color: rgba(255,255,255,0.09) !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.65) !important;
  }

  /* ── 19. Game dropdown (prop builder): glass sheet ── */
  #game-dropdown {
    background: rgba(10,12,20,0.96) !important;
    backdrop-filter: blur(32px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(160%) !important;
    border-color: rgba(16,185,129,0.14) !important;
  }

  /* ── 20. Filter chips / tab pills: glass capsule ── */
  .sz-filter-btn {
    border-radius: 50px !important;
    transition: background 0.18s, border-color 0.18s, box-shadow 0.16s !important;
  }
  .sz-filter-btn:active { transform: scale(0.93) !important; }

  /* ── 21. Scrollbar: ultra-thin refined ── */
  ::-webkit-scrollbar { width: 3px; height: 3px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    background: rgba(200,210,255,0.12);
    border-radius: 8px;
  }
  ::-webkit-scrollbar-thumb:hover { background: rgba(200,210,255,0.24); }

  /* ── 22. Spring press feedback on all interactive elements ── */
  html:not(.light) button:not(.bnav-btn):not(.radial-item) {
    transition: background 0.15s, border-color 0.15s,
                box-shadow 0.15s,
                transform 0.1s cubic-bezier(.4,0,.2,1) !important;
  }
  html:not(.light) button:not(.bnav-btn):not(.radial-item):active {
    transform: scale(0.95) !important;
  }

  /* ── 23. KPI strip & stat cards: subtle glass ring on hover ── */
  html:not(.light) .stat-card:hover {
    border-color: rgba(16,185,129,0.30) !important;
    box-shadow: 0 0 0 1px rgba(16,185,129,0.12),
                0 4px 24px rgba(0,0,0,0.28) !important;
  }

  /* ── 24. Ticker bar: thin glass edge ── */
  html:not(.light) .bg-surface-container-lowest {
    background: rgba(6,7,14,0.92) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  /* ── 25. Sidebar user card: glass panel ── */
  html:not(.light) #sidebar-user-card {
    background: rgba(12,14,22,0.72) !important;
    border-bottom-color: rgba(255,255,255,0.07) !important;
  }

  /* ── 26. Sidebar footer: glass surface ── */
  html:not(.light) .sb-foot {
    border-top-color: rgba(255,255,255,0.07) !important;
    background: rgba(8,10,18,0.60) !important;
  }

  /* ── 27. Light mode glass parity ── */
  html.light header {
    background: rgba(248,250,255,0.80) !important;
    backdrop-filter: blur(32px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
    border-bottom-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04) !important;
  }
  html.light #sidebar {
    background: rgba(244,247,255,0.95) !important;
    backdrop-filter: blur(40px) !important;
    -webkit-backdrop-filter: blur(40px) !important;
    border-right-color: rgba(0,0,0,0.08) !important;
  }
  html.light #bottom-nav-bar {
    background: rgba(244,247,252,0.88) !important;
    backdrop-filter: blur(28px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
    border-top-color: rgba(0,0,0,0.07) !important;
  }
  html.light .bnav-btn { color: rgba(50,60,100,0.46) !important; }
  html.light .bnav-btn.active {
    color: #059669 !important;
    background: rgba(16,185,129,0.12) !important;
    box-shadow: inset 0 0 0 1px rgba(16,185,129,0.20) !important;
  }
  html.light #alert-panel {
    background: rgba(248,250,255,0.96) !important;
    border-color: rgba(0,0,0,0.08) !important;
    box-shadow: 0 16px 48px rgba(0,0,20,0.14) !important;
  }
  html.light #game-dropdown {
    background: rgba(248,250,255,0.96) !important;
    backdrop-filter: blur(32px) !important;
    -webkit-backdrop-filter: blur(32px) !important;
  }
  /* END LIQUID GLASS */

  /* ── Scout & Roster Page ── */
  #page-scout.active { display:flex !important; flex-direction:column; }
  /* ── top-level Roster / Scout tab bar ── */
  .sr-tab-bar { display:flex; gap:2px; padding:10px 16px 0; border-bottom:1px solid rgba(100,116,139,.12); background:var(--color-surface-container,#0f0f0f); flex-shrink:0; }
  .sr-top-tab { padding:7px 20px; border-radius:8px 8px 0 0; font-size:10.5px; font-weight:900; letter-spacing:.07em; text-transform:uppercase; cursor:pointer; border:none; background:transparent; color:var(--color-on-surface-variant,#9ba3b8); transition:all .15s; border-bottom:2px solid transparent; margin-bottom:-1px; display:flex; align-items:center; gap:5px; }
  .sr-top-tab:hover { color:var(--color-on-surface,#e2e4f3); }
  .sr-top-tab.sr-tab-active { color:var(--color-primary,#3d5afa); border-bottom-color:var(--color-primary,#3d5afa); background:var(--color-surface-dim,#000000); }
  /* league tabs inside roster sidebar */
  .scout-tab {
    padding:4px 8px;border-radius:6px;font-size:10px;font-weight:800;
    text-transform:uppercase;letter-spacing:.05em;cursor:pointer;
    border:1px solid transparent;
    background:var(--color-surface-dim,#000000);
    color:var(--color-on-surface-variant,#9ba3b8);
    transition:all .15s;white-space:nowrap;
  }
  .scout-tab:hover { background:var(--color-surface-container-high,#252638); color:var(--color-on-surface,#e2e4f3); }
  .scout-tab.scout-tab-active {
    background:var(--color-primary-container,#1a2669);
    color:var(--color-primary,#3d5afa);
    border-color:rgba(61,90,250,.25);
  }
  /* team row in roster list */
  .scout-team-row {
    padding:8px 10px; border-radius:9px; cursor:pointer;
    border:1px solid transparent; margin-bottom:3px;
    display:flex; align-items:center; gap:8px;
    transition:all .12s; background:var(--color-surface-container-high,#252638);
  }
  .scout-team-row:hover { border-color:rgba(100,116,139,.2); background:var(--color-surface-bright,#292c34); }
  .scout-team-row.scout-team-expanded { border-color:rgba(61,90,250,.2); background:var(--color-primary-container,#1a2669); }
  .scout-player-card {
    padding:7px 10px 7px 28px; border-radius:8px; cursor:pointer;
    border:1px solid transparent; margin-bottom:3px;
    display:flex; align-items:center; gap:8px;
    transition:all .12s;
    background:var(--color-surface-container,#0f0f0f);
  }
  .scout-player-card:hover { background:var(--color-surface-container-high,#252638); border-color:rgba(100,116,139,.2); }
  .scout-player-card.scout-card-active { background:var(--color-primary-container,#1a2669); border-color:rgba(61,90,250,.3); }
  .scout-stat-card {
    background:var(--color-surface-container,#0f0f0f);
    border:1px solid rgba(100,116,139,.15);
    border-radius:10px;padding:10px 12px;
    flex:1;min-width:72px;max-width:130px;overflow:hidden;
  }
  .scout-section-title {
    font-size:9px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;
    color:var(--color-on-surface-variant,#9ba3b8);margin-bottom:8px;
    display:flex;align-items:center;gap:6px;
  }
  .scout-log-table { width:100%;border-collapse:collapse;font-size:10.5px; }
  .scout-log-table th {
    padding:5px 8px;text-align:right;font-size:8.5px;font-weight:900;
    letter-spacing:.08em;text-transform:uppercase;color:var(--color-on-surface-variant,#9ba3b8);
    border-bottom:1px solid rgba(100,116,139,.15);white-space:nowrap;
  }
  .scout-log-table th:first-child,.scout-log-table td:first-child { text-align:left; }
  .scout-log-table td {
    padding:5px 8px;text-align:right;
    border-bottom:1px solid rgba(100,116,139,.07);
    color:var(--color-on-surface,#e2e4f3);white-space:nowrap;
  }
  .scout-log-table tr:last-child td { border-bottom:none; }
  .scout-log-table tr:hover td { background:rgba(61,90,250,.05); }
  /* Fix 3: page height — scout page must fill main without body overflowing */
  #page-scout.active { display:flex !important; flex-direction:column; height:100%; overflow:hidden; }
  #sr-roster-wrap { flex:1; min-height:0; }
  /* Fix 3: page height — scout page must fill main without body overflowing */
  #page-scout.active { display:flex !important; flex-direction:column; height:100%; overflow:hidden; }
  #sr-roster-wrap { flex:1; min-height:0; }
  /* scout analysis form */
  .scout-form-label { font-size:8.5px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; color:var(--color-on-surface-variant,#9ba3b8); display:block; margin-bottom:5px; }
  .scout-form-input { width:100%; box-sizing:border-box; padding:9px 12px; border-radius:9px; font-size:12px; font-family:inherit; border:1px solid rgba(100,116,139,.25); background:var(--color-surface-container,#0f0f0f); color:var(--color-on-surface,#e2e4f3); outline:none; transition:border-color .15s; }
  .scout-form-input:focus { border-color:rgba(61,90,250,.5); }
  .sa-dir-btn { flex:1; padding:9px; border-radius:9px; font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; transition:all .15s; }
  .sa-dir-btn.sa-dir-inactive { border:1px solid rgba(100,116,139,.2); background:transparent; color:var(--color-on-surface-variant,#9ba3b8); }
  .sa-dir-btn.sa-dir-over-active { border:1px solid rgba(61,90,250,.4); background:var(--color-primary-container,#1a2669); color:var(--color-primary,#3d5afa); }
  .sa-dir-btn.sa-dir-under-active { border:1px solid rgba(239,68,68,.4); background:rgba(239,68,68,.12); color:#ef4444; }
  html.light .sr-tab-bar {
    background: #f5f7fb;
    border-bottom-color: rgba(0,0,0,.08);
  }
  html.light .sr-top-tab { color: #64748b; }
  html.light .sr-top-tab:hover { color: #111827; }
  html.light .sr-top-tab.sr-tab-active {
    color: #2553c7;
    border-bottom-color: #2553c7;
    background: #ffffff;
  }
  html.light .scout-tab {
    background: #eef2f8;
    color: #5b6474;
    border-color: rgba(0,0,0,.06);
  }
  html.light .scout-tab:hover {
    background: #e4ebf5;
    color: #111827;
  }
  html.light .scout-tab.scout-tab-active {
    background: #dfe8fb;
    color: #2553c7;
    border-color: rgba(37,83,199,.22);
  }
  html.light #scout-sidebar {
    background: #f7f9fc !important;
    border-right-color: rgba(0,0,0,.08) !important;
  }
  html.light #scout-detail,
  html.light #sr-scout-wrap {
    background: #ffffff !important;
  }
  html.light #scout-search-input {
    background: #ffffff !important;
    color: #111827 !important;
    border-color: rgba(0,0,0,.10) !important;
  }
  html.light .scout-team-row {
    background: #eef2f8;
    border-color: rgba(0,0,0,.04);
  }
  html.light .scout-team-row:hover {
    background: #e7edf7;
    border-color: rgba(37,83,199,.16);
  }
  html.light .scout-team-row.scout-team-expanded {
    background: #dfe8fb;
    border-color: rgba(37,83,199,.20);
  }
  html.light .scout-player-card {
    background: #ffffff;
    border-color: rgba(0,0,0,.05);
  }
  html.light .scout-player-card:hover {
    background: #edf3fb;
    border-color: rgba(37,83,199,.14);
  }
  html.light .scout-player-card.scout-card-active {
    background: #dfe8fb;
    border-color: rgba(37,83,199,.22);
  }
  html.light .scout-stat-card {
    background: #ffffff;
    border-color: rgba(0,0,0,.08);
  }
  html.light .scout-log-table td { color: #1f2937; }
  html.light .scout-log-table th,
  html.light .scout-section-title,
  html.light .scout-form-label { color: #6b7280; }
  html.light .scout-form-input {
    background: #ffffff;
    color: #111827;
    border-color: rgba(0,0,0,.10);
  }
  @media(max-width:640px){
    #page-scout.active { flex-direction:column; }
    #sr-roster-wrap { flex-direction:column; }
    #scout-sidebar { width:100% !important; min-width:0 !important; border-right:none !important; border-bottom:1px solid rgba(100,116,139,.15) !important; max-height:260px; }
  }

  .odds-board-wrap {
    overflow: auto;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(10,12,18,.72);
  }
  .odds-board-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: separate;
    border-spacing: 0;
  }
  .odds-board-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(15,18,26,.96);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .odds-board-table th,
  .odds-board-table td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    vertical-align: top;
  }
  .odds-board-table th {
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(229,231,235,.62);
  }
  .odds-board-table tbody tr:hover td {
    background: rgba(255,255,255,.02);
  }
  .odds-date-row td {
    background: rgba(16,185,129,.08);
    color: #8af5c0;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-bottom-color: rgba(16,185,129,.16);
  }
  .odds-matchup-away,
  .odds-matchup-home {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
    font-weight: 800;
  }
  .odds-matchup-home {
    margin-top: 5px;
  }
  .odds-meta-note {
    margin-top: 7px;
    font-size: 9px;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(156,163,175,.8);
  }
  .odds-live-text {
    color: #6bff8f;
    font-weight: 900;
  }
  .odds-cell-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 104px;
  }
  .odds-cell-line {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 7px 8px;
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
  }
  .odds-cell-line .lbl {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(156,163,175,.9);
  }
  .odds-cell-line .val {
    font-size: 11px;
    font-weight: 900;
    color: #eef2ff;
    font-family: 'Inter', sans-serif;
    text-align: right;
  }
  .odds-cell-line.best .val {
    color: #6bff8f;
  }
  .odds-book-head {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
  }
  .odds-book-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 0;
    background: transparent;
    padding: 0;
  }
  .odds-inline-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .odds-inline-pill {
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(229,231,235,.82);
  }
  .odds-empty-state {
    padding: 34px 18px;
    text-align: center;
    color: rgba(156,163,175,.92);
    font-size: 12px;
    line-height: 1.7;
  }
  .odds-book-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px;
    background: rgba(255,255,255,.03);
    cursor: grab;
  }
  .odds-book-item:active {
    cursor: grabbing;
  }
  .odds-book-item.dragging {
    opacity: .55;
    border-color: rgba(16,185,129,.4);
  }
  .odds-book-handle {
    color: rgba(156,163,175,.9);
    font-size: 14px;
    user-select: none;
  }
  .odds-book-label {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(229,231,235,.9);
    flex: 1;
  }
  html.light .odds-board-wrap {
    background: #ffffff;
    border-color: rgba(37,99,235,.12);
    box-shadow: 0 14px 36px rgba(37,99,235,.07);
  }
  html.light .odds-board-table thead th {
    background: rgba(248,250,255,.98);
  }
  html.light .odds-board-table th {
    color: rgba(30,41,59,.7);
  }
  html.light .odds-board-table td {
    color: #0f172a;
    border-bottom-color: rgba(37,99,235,.08);
  }
  html.light .odds-board-table tbody tr:hover td {
    background: rgba(37,99,235,.03);
  }
  html.light .odds-date-row td {
    background: rgba(37,99,235,.07);
    color: #1d4ed8;
    border-bottom-color: rgba(37,99,235,.12);
  }
  html.light .odds-meta-note,
  html.light .odds-inline-pill {
    color: rgba(51,65,85,.78);
  }
  html.light .odds-cell-line {
    background: #f8faff;
    border-color: rgba(37,99,235,.09);
  }
  html.light .odds-cell-line .val {
    color: #0f172a;
  }
  html.light .odds-book-item {
    background: #f8faff;
    border-color: rgba(37,99,235,.10);
  }
  html.light .odds-book-logo {
    background: transparent;
    border: none;
  }
  html.light .odds-book-label {
    color: #0f172a;
  }
  @media (max-width: 768px) {
    .odds-board-table {
      min-width: 860px;
    }
  }