:root {
    --bg:       #080509;
    --bg2:      #0d0a0f;
    --bg3:      #140f16;
    --border:   #281620;
    --accent:   #dc2626;
    --accent2:  #f43f5e;
    --red:      #ef4444;
    --yellow:   #f59e0b;
    --green:    #22c55e;
    --text:     #f2eaf0;
    --muted:    #c89aaa;
    --mono:     'JetBrains Mono', monospace;
    --sans:     'Space Grotesk', sans-serif;
    --shadow-sm:  0 2px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.025);
    --shadow-md:  0 4px 28px rgba(0,0,0,0.5),  inset 0 1px 0 rgba(255,255,255,0.03);
    --shadow-lg:  0 10px 52px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.04);
    --radius:     12px;
    --radius-sm:  8px;
  }

  /* ── THEMES ── */
  [data-theme="crimson"] {
    --bg:#09060a;--bg2:#0f0a10;--bg3:#170f18;--border:#2e1a22;
    --accent:#dc2626;--accent2:#f43f5e;--text:#f0e8ec;--muted:#c89aaa;
  }
  [data-theme="slate"] {
    --bg:#0a0e14;--bg2:#0f1520;--bg3:#16202e;--border:#1e2d40;
    --accent:#3b82f6;--accent2:#60a5fa;--text:#e8eef4;--muted:#9abdd8;
  }
  [data-theme="forest"] {
    --bg:#080e0a;--bg2:#0d1410;--bg3:#121d14;--border:#1c2e20;
    --accent:#22c55e;--accent2:#4ade80;--text:#e8f4ec;--muted:#8abf9a;
  }

  [data-theme="midnight"] {
    --bg:#04040a;--bg2:#080814;--bg3:#0e0e1e;--border:#1a1a30;
    --accent:#a855f7;--accent2:#c084fc;--text:#ede8f4;--muted:#aa99cc;
  }
  [data-theme="neon"] {
    --bg:#050508;--bg2:#0a0a10;--bg3:#10101a;--border:#1a1a2e;
    --accent:#ff0080;--accent2:#00ffcc;--text:#f0eaff;--muted:#9a8aaa;
    --red:#ff3366;--yellow:#ffcc00;--green:#00ffcc;
  }
  [data-theme="ocean"] {
    --bg:#020810;--bg2:#061018;--bg3:#0a1822;--border:#112230;
    --accent:#06b6d4;--accent2:#22d3ee;--text:#e0f4fa;--muted:#80bfcc;
    --red:#f43f5e;--yellow:#fbbf24;--green:#10b981;
  }
  [data-theme="ember"] {
    --bg:#0a0502;--bg2:#120804;--bg3:#1c0e06;--border:#2e1608;
    --accent:#f97316;--accent2:#fb923c;--text:#fef2e8;--muted:#c08f68;
    --red:#ef4444;--yellow:#fbbf24;--green:#22c55e;
  }
  [data-theme="rose"] {
    --bg:#0a0508;--bg2:#12080e;--bg3:#1a0c16;--border:#2e1428;
    --accent:#e879f9;--accent2:#f0abfc;--text:#fce8ff;--muted:#c48ac4;
    --red:#f43f5e;--yellow:#fbbf24;--green:#34d399;
  }
  [data-theme="obsidian"] {
    --bg:#080808;--bg2:#0f0f0f;--bg3:#161616;--border:#252525;
    --accent:#e2e8f0;--accent2:#94a3b8;--text:#f8fafc;--muted:#475569;
    --red:#ef4444;--yellow:#f59e0b;--green:#22c55e;
  }
  [data-theme="nighttime"] {
    --bg:#0d0d0f;--bg2:#111116;--bg3:#16161c;--border:#22222d;
    --accent:#6ab0d4;--accent2:#8ecae6;--text:#cdd6e0;--muted:#556070;
    --red:#c0667a;--yellow:#b89a5a;--green:#5aaa7a;
  }
  /* ── Daytime: warm cream/natural light, easy on eyes in bright environments ── */
  [data-theme="daylight"] {
    --bg:#f7f3ec;--bg2:#ede8de;--bg3:#e2dbd0;--border:#c8bfb0;
    --accent:#b45309;--accent2:#d97706;--text:#1c1208;--muted:#6b5240;
    --red:#dc2626;--yellow:#d97706;--green:#15803d;
    --mono:"JetBrains Mono",monospace;
  }
  /* ── Amber Night: scientifically tuned for blue-light elimination after dark ── */
  /* All cool/blue light removed; only warm amber/orange wavelengths remain     */
  [data-theme="amber-night"] {
    --bg:#0b0500;--bg2:#120800;--bg3:#1c0e00;--border:#2e1800;
    --accent:#d97706;--accent2:#f59e0b;--text:#fde68a;--muted:#a16207;
    --red:#b45309;--yellow:#d97706;--green:#78716c;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--bg);
    background-image: radial-gradient(ellipse 120% 55% at 50% -8%, rgba(220,38,38,0.08) 0%, transparent 62%);
    color: var(--text);
    font-family: var(--sans);
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* ── LAYOUT ── */
  #app { display: flex; min-height: 100vh; }

  #sidebar {
    width: 220px;
    min-height: 100vh;
    background: var(--bg2);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 0;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
    overflow-y: auto;
  }

  #main {
    margin-left: 220px;
    flex: 1;
    min-width: 0; /* prevent flex item from expanding beyond its allocation */
    padding: 24px;
    min-height: 100vh;
  }

  #page-content {
    max-width: 1100px;
    width: 100%;
    overflow-x: hidden;
  }

  @media (min-width: 1500px) {
    #main { padding: 28px 48px; }
  }

  /* ── SIDEBAR ── */
  .sidebar-logo {
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--border);
  }
  .sidebar-logo .brand {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .sidebar-logo .sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
  }

  .sport-switcher {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 12px 10px 4px;
    gap: 4px;
  }
  .sport-btn {
    width: 100%;
    padding: 6px 0;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .sport-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #000;
  }

  .nav-section {
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
  }
  .nav-label {
    padding: 6px 16px 4px;
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.12s;
    border-left: 2px solid transparent;
    user-select: none;
  }
  .nav-item:hover { color: var(--text); background: var(--bg3); }
  .nav-item.active {
    color: var(--accent);
    border-left-color: var(--accent);
    background: rgba(0,212,170,0.06);
  }
  .nav-icon { font-size: 14px; width: 18px; text-align: center; }

  .sidebar-footer {
    margin-top: auto;
    padding: 12px 16px;
    border-top: 1px solid var(--border);
  }
  .user-pill {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .user-pill span { color: var(--accent); }
  .logout-btn {
    width: 100%;
    padding: 7px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s;
  }
  .logout-btn:hover { border-color: var(--red); color: var(--red); }

  /* ── PAGE HEADER ── */
  .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .page-title {
    font-family: var(--mono);
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
  }
  .page-title span { color: var(--accent); }
  .page-sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
  }
  .refresh-btn {
    padding: 7px 14px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 12px;
    font-family: var(--mono);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.12s;
  }
  .refresh-btn:hover { border-color: var(--accent); color: var(--accent); }

  /* ── CARDS ── */
  .card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 14px rgba(0,0,0,0.22);
  }
  .card-title {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 12px;
  }

  .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
  .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
  /* Sport summary cards in grid-5: flex-col so bottom stat always anchors to bottom */
  .grid-5 > .card { display: flex; flex-direction: column; }

  /* ── STAT TILES ── */
  .stat-tile {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
    text-align: center;
    box-shadow: 0 1px 8px rgba(0,0,0,0.2);
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .stat-tile:hover { border-color: rgba(220,38,38,0.28); box-shadow: 0 2px 16px rgba(220,38,38,0.07); }
  .stat-tile .label {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
  }
  .stat-tile .value {
    font-family: var(--mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--accent);
  }
  .stat-tile .sub { font-size: 11px; color: var(--muted); margin-top: 3px; }

  /* ── PLAY CARD ── */
  .play-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 22px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.03);
  }
  .play-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
  }
  .play-card.play-away::before { background: linear-gradient(90deg, var(--accent2), var(--accent)); }

  .play-matchup {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
  }
  .play-bet {
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 8px;
  }
  .play-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }
  .play-stat { font-size: 12px; color: var(--muted); }
  .play-stat strong { color: var(--text); font-family: var(--mono); }

  .badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  .badge-high  { background: rgba(34,197,94,0.15);  color: var(--green); border: 1px solid rgba(34,197,94,0.3); }
  .badge-med   { background: rgba(245,158,11,0.15); color: var(--yellow); border: 1px solid rgba(245,158,11,0.3); }
  .badge-low   { background: rgba(239,68,68,0.15);  color: var(--red);   border: 1px solid rgba(239,68,68,0.3); }
  .badge-acc   { background: rgba(0,212,170,0.12);  color: var(--accent); border: 1px solid rgba(0,212,170,0.25); }

  /* Line-movement △ badge — surfaces how much the total moved since first capture.
     Yellow = market moved against our pick, green = market moved toward our pick.
     Only renders when |delta_pt| >= 0.25 to avoid noise. */
  .line-mv-badge {
    display: inline-block; margin-left: 8px;
    padding: 1px 7px; border-radius: 3px;
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    background: rgba(255,255,255,0.04); border: 1px solid var(--border);
    letter-spacing: .03em;
  }

  /* Best-book ★ tag — surfaces which sportsbook is offering the best
     number/odds across DK/FD/Fanatics for this pick. */
  .best-book-tag {
    display: inline-block;
    padding: 2px 8px; border-radius: 4px;
    font-family: var(--mono); font-size: 10px; font-weight: 600;
    color: var(--gold, #f59e0b);
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.22);
    letter-spacing: .03em;
  }

  /* 🏥 injury badge next to team names — count of IL players on that roster.
     Hover to see the top injured players (OPS in the tooltip).
     Hidden when team has none. */
  .inj-badge {
    display: inline-block; margin-left: 4px;
    padding: 0 6px; border-radius: 3px;
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    color: #f87171;
    background: rgba(239,68,68,0.10);
    border: 1px solid rgba(239,68,68,0.25);
    cursor: help;
  }

  /* "Why?" button on play cards — opens the rationale modal which fetches
     the cached, fact-grounded plain-English explanation. Sits in the card
     footer next to the model timestamp. */
  .why-btn {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border); color: var(--muted);
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    letter-spacing: .06em; padding: 4px 10px; border-radius: 5px;
    cursor: pointer; transition: all .12s;
  }
  .why-btn:hover {
    color: var(--accent); border-color: var(--accent);
    background: rgba(245,158,11,0.06);
  }

  /* ── LIVE BADGES ── */
  .live-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: rgba(239,68,68,0.15); color: var(--red);
    border: 1px solid rgba(239,68,68,0.4);
    padding: 2px 8px; border-radius: 3px;
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em;
  }
  .live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--red);
    animation: livePulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
  }
  @keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.3; transform: scale(0.7); }
  }
  .live-period { color: var(--muted); font-weight: 400; font-size: 9px; }
  .live-score  { color: var(--text); font-weight: 700; }
  .final-badge {
    display: inline-block;
    background: rgba(124,92,101,0.2); color: var(--muted);
    border: 1px solid var(--border);
    padding: 2px 8px; border-radius: 3px;
    font-family: var(--mono); font-size: 10px; font-weight: 700;
  }

  /* ── TABLE ── */
  .tbl-wrap { overflow-x: auto; }
  table { width: 100%; border-collapse: collapse; font-size: 12px; }
  th {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
  }
  td {
    padding: 8px 10px;
    border-bottom: 1px solid rgba(30,42,53,0.6);
    color: var(--text);
    white-space: nowrap;
  }
  tr:last-child td { border-bottom: none; }
  tr:hover td { background: rgba(255,255,255,0.02); }
  .mono { font-family: var(--mono); }
  .num  { font-family: var(--mono); text-align: right; }
  .pos  { color: var(--green); }
  .neg  { color: var(--red); }
  .dim  { color: var(--muted); font-size: 11px; }

  /* ── INJURY TABLE ── */
  .inj-out      { color: var(--red); font-family: var(--mono); font-size: 11px; font-weight: 700; }
  .inj-doubtful { color: #f97316; font-family: var(--mono); font-size: 11px; font-weight: 700; }
  .inj-gtd      { color: var(--yellow); font-family: var(--mono); font-size: 11px; }
  .inj-q        { color: var(--muted); font-family: var(--mono); font-size: 11px; }

  /* ── WEATHER FLAG ── */
  .wx-flag {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    background: rgba(245,158,11,0.12);
    color: var(--yellow);
    border: 1px solid rgba(245,158,11,0.25);
  }

  /* ── AI CHAT ── */
  #ai-widget {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    width: 560px;
    max-width: calc(100vw - 280px);
  }
  #ai-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: 10px 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    cursor: text;
    transition: border-color 0.15s;
  }
  #ai-bar:hover, #ai-bar:focus-within { border-color: var(--accent); }
  #ai-bar-icon { font-size: 16px; flex-shrink: 0; }
  #ai-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 13px;
    font-family: var(--sans);
    outline: none;
    min-width: 0;
  }
  #ai-input::placeholder { color: var(--muted); }
  #ai-send {
    padding: 6px 14px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 12px;
    font-family: var(--mono);
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.12s;
  }
  #ai-send:hover { opacity: 0.85; }
  .ai-cursor {
    display: inline-block; width: 2px; height: 13px;
    background: var(--accent); margin-left: 1px; vertical-align: middle;
    animation: ai-blink 0.9s step-end infinite;
  }
  @keyframes ai-blink { 0%,100%{opacity:1} 50%{opacity:0} }
  #ai-panel {
    display: none;
    position: absolute;
    bottom: 58px; left: 0; right: 0;
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
  }
  #ai-panel.open { display: block; }
  .ai-header {
    padding: 12px 16px;
    background: var(--bg3);
    border-bottom: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: 8px;
  }
  #ai-messages {
    height: 280px;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .ai-msg {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.55;
    max-width: 88%;
  }
  .ai-msg.user {
    background: rgba(220,38,38,0.1);
    color: var(--accent);
    align-self: flex-end;
    font-family: var(--mono);
    font-size: 12px;
    border: 1px solid rgba(220,38,38,0.2);
  }
  .ai-msg.bot {
    background: var(--bg3);
    color: var(--text);
    align-self: flex-start;
    border: 1px solid var(--border);
  }
  .ai-msg.thinking { color: var(--muted); font-style: italic; }

  /* ── LOGIN ANIMATIONS ── */
  @keyframes logoRollIn {
    0%   { transform: translateY(-60px) rotate(-15deg) scale(0.7); opacity: 0; }
    60%  { transform: translateY(6px) rotate(2deg) scale(1.04); opacity: 1; }
    80%  { transform: translateY(-3px) rotate(-1deg) scale(0.99); }
    100% { transform: translateY(0) rotate(0) scale(1); opacity: 1; }
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .login-logo-anim {
    animation: logoRollIn 0.7s cubic-bezier(.22,.68,0,1.2) forwards;
  }
  .login-fields-anim {
    opacity: 0;
    animation: fadeUp 0.5s ease 0.6s forwards;
  }

  /* ── LEFT-SIDE STAGGER ANIMATIONS ── */
  @keyframes ll-rise {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .ll-s {
    opacity: 0;
    animation: ll-rise 0.6s cubic-bezier(.22,.68,0,1.06) forwards;
  }
  .ll-s1 { animation-delay: 0.06s; }
  .ll-s2 { animation-delay: 0.18s; }
  .ll-s3 { animation-delay: 0.30s; }
  .ll-s4 { animation-delay: 0.42s; }
  .ll-s5 { animation-delay: 0.54s; }
  .ll-s6 { animation-delay: 0.66s; }

  /* ── MOBILE: disable timer animation; reveal on scroll via .ll-visible ── */
  @media (max-width: 899px) {
    .ll-s {
      animation: none;
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.52s cubic-bezier(.22,.68,0,1.06),
                  transform 0.52s cubic-bezier(.22,.68,0,1.06);
    }
    .ll-s.ll-visible {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ── LOGIN BOX GRADIENT CAP (mobile only) ── */
  .login-cap-bar { display: none; }
  .mobile-scroll-hint { display: none; }
  @keyframes bounce-down {
    0%, 100% { transform: translateY(0); opacity: .7; }
    50% { transform: translateY(5px); opacity: 1; }
  }
  @media (max-width: 899px) {
    .login-box { position: relative; }
    .login-cap-bar {
      display: block;
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--accent), var(--accent2));
      border-radius: 9px 9px 0 0;
    }
  }

  /* ── TAB PANEL FADE ── */
  @keyframes tab-in {
    from { opacity: 0; transform: translateY(7px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .tab-fade-in { animation: tab-in 0.2s ease forwards; }

  /* ══════════════════════════════════════════════════════════
     PREMIUM UI — skeleton screens, counters, transitions
  ══════════════════════════════════════════════════════════ */

  /* ── Page entrance ── */
  @keyframes page-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .page-entering { animation: page-in 0.2s cubic-bezier(.22,.68,0,1.05) forwards; }

  /* ── Skeleton shimmer ── */
  @keyframes sk-sweep {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
  }
  .sk {
    background: linear-gradient(90deg,
      var(--bg3) 0%, var(--bg2) 40%, var(--bg3) 100%);
    background-size: 600px 100%;
    animation: sk-sweep 1.5s ease infinite;
    border-radius: 6px;
  }
  .sk-line  { height: 13px; margin-bottom: 9px; }
  .sk-title { height: 18px; width: 45%; margin-bottom: 14px; }
  .sk-card  {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
    padding: 20px 22px;
    margin-bottom: 12px;
  }

  /* ── Premium stat tiles ── */
  .bt-stat-tile {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
    padding: 18px 16px 14px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s;
  }
  .bt-stat-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    opacity: 0.6;
  }
  .bt-stat-tile .tile-val {
    font-size: 26px;
    font-weight: 800;
    font-family: var(--mono);
    letter-spacing: -0.02em;
    line-height: 1;
    margin-bottom: 6px;
  }
  .bt-stat-tile .tile-lbl {
    font-size: 10px;
    font-family: var(--mono);
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .14em;
  }

  /* ── Win-rate bar ── */
  .wr-track {
    flex: 1;
    height: 6px;
    background: var(--bg3);
    border-radius: 3px;
    overflow: hidden;
  }
  .wr-fill {
    height: 100%;
    border-radius: 3px;
    width: 0;
    transition: width 0.9s cubic-bezier(.22,.68,0,1.06);
  }

  /* ── Equity curve container ── */
  .eq-wrap {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius, 12px);
    padding: 16px 20px 12px;
    margin-bottom: 16px;
  }
  .eq-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
  }
  .eq-label {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: .15em;
    text-transform: uppercase;
  }
  .eq-final {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: 800;
  }
  .eq-dates {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
    font-size: 10px;
    color: var(--muted);
    font-family: var(--mono);
  }

  /* ══════════════════════════════════════════════════════════════
     TRILLION-DOLLAR TIER — glow, greeting, pulse, chat, drawer,
     freshness, monthly chart, shareable card
  ══════════════════════════════════════════════════════════════ */

  /* ── Confidence glow system ── */
  @keyframes conf-gold-pulse {
    0%,100% { box-shadow:0 0 0 0 rgba(251,191,36,0); border-color:rgba(251,191,36,.45); }
    50%      { box-shadow:0 0 22px 5px rgba(251,191,36,.18), inset 0 0 20px rgba(251,191,36,.04); border-color:rgba(251,191,36,.8); }
  }
  .play-card[data-conf="HIGH"] {
    border-color: rgba(251,191,36,.55) !important;
    animation: conf-gold-pulse 2.8s ease-in-out infinite;
  }
  .play-card[data-conf="HIGH"]::before {
    background: linear-gradient(90deg,#f59e0b,#fbbf24,#f59e0b) !important;
    background-size: 200% 100% !important;
    animation: shimmer-gold 3s linear infinite !important;
    opacity: 1 !important;
  }
  @keyframes shimmer-gold {
    0%   { background-position:200% 0; }
    100% { background-position:-200% 0; }
  }
  .conf-gold-badge {
    display: inline-flex; align-items: center; gap: 3px;
    background: linear-gradient(135deg,rgba(251,191,36,.2),rgba(251,191,36,.06));
    border: 1px solid rgba(251,191,36,.45); border-radius: 4px;
    padding: 2px 7px; font-family: var(--mono); font-size: 9px;
    font-weight: 800; color: #fbbf24; letter-spacing: .12em; text-transform: uppercase;
    margin-left: 6px; vertical-align: middle;
  }

  /* ── Dashboard greeting strip ── */
  .dash-greeting {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
    background: linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
    border: 1px solid var(--border); border-radius: var(--radius,12px);
    padding: 18px 22px; margin-bottom: 20px;
  }
  .dash-greeting-name {
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    color: var(--muted); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px;
  }
  .dash-greeting-msg {
    font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  }
  .dash-greeting-sub { font-size: 11px; color: var(--muted); margin-top: 4px; }
  .dash-stat-pills { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
  .dash-stat-pill {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 10px 16px; background: var(--bg3);
    border-radius: 10px; border: 1px solid var(--border);
    min-width: 64px;
  }
  .dash-stat-pill .dsv { font-family: var(--mono); font-size: 20px; font-weight: 800; line-height: 1; }
  .dash-stat-pill .dsl { font-size: 9px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; font-family: var(--mono); }

  /* ── Model Pulse Card ── */
  .model-pulse-card {
    position: relative; overflow: hidden;
    background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius,12px);
    padding: 16px 20px; margin-bottom: 20px;
  }
  .model-pulse-card::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
    opacity: .5;
  }
  .pulse-live-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e; box-shadow: 0 0 0 0 rgba(34,197,94,.6);
    animation: pulse-ring 2s ease-in-out infinite; margin-right: 6px; vertical-align: middle;
  }
  @keyframes pulse-ring {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.7); }
    70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  }
  .pulse-kv-row { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
  .pulse-kv { display: flex; flex-direction: column; }
  .pulse-val { font-family: var(--mono); font-size: 21px; font-weight: 800; line-height: 1; }
  .pulse-key { font-size: 9px; color: var(--muted); letter-spacing: .12em; text-transform: uppercase; font-family: var(--mono); margin-top: 3px; }

  /* ── Freshness badge ── */
  .fresh-badge {
    display: inline-flex; align-items: center; gap: 4px;
    font-family: var(--mono); font-size: 9px; color: var(--muted); letter-spacing: .06em; vertical-align: middle; margin-left: 8px;
  }
  .fresh-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
  .fresh-dot.green  { background: #22c55e; box-shadow: 0 0 5px rgba(34,197,94,.6); }
  .fresh-dot.yellow { background: #f59e0b; }
  .fresh-dot.red    { background: #ef4444; }


  /* ── PREMIUM CHAT overrides ── */
  #ai-panel {
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -4px 60px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06) !important;
    backdrop-filter: blur(20px) !important;
    background: rgba(14,11,20,.97) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    border-bottom: none !important;
  }
  .ai-header {
    background: linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.01)) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    padding: 14px 16px !important;
  }
  .ai-header-brand { display:flex; align-items:center; gap:9px; }
  .ai-header-icon {
    width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0;
    background: linear-gradient(135deg,var(--accent),var(--accent2));
    display: flex; align-items: center; justify-content: center;
    font-size: 14px;
  }
  .ai-header-title { font-family:var(--mono); font-size:12px; font-weight:800; letter-spacing:.05em; }
  .ai-header-sub   { font-family:var(--mono); font-size:9px; color:var(--muted); letter-spacing:.08em; }
  #ai-messages {
    height: 380px !important;
    gap: 10px !important;
    padding: 14px !important;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  }
  .ai-msg.user {
    align-self: flex-end !important;
    background: linear-gradient(135deg,var(--accent),var(--accent2)) !important;
    color: #000 !important;
    border-radius: 18px 18px 4px 18px !important;
    font-weight: 600 !important;
    border: none !important;
    max-width: 85% !important;
    padding: 10px 14px !important;
  }
  .ai-msg.bot {
    align-self: flex-start !important;
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 4px 18px 18px 18px !important;
    max-width: 90% !important;
    padding: 10px 14px !important;
    line-height: 1.6 !important;
  }
  .ai-msg.thinking {
    background: transparent !important;
    border: none !important;
    padding: 4px 0 !important;
  }
  /* Animated typing indicator */
  .ai-typing-wrap { display: flex; align-items: center; gap: 5px; padding: 10px 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 4px 18px 18px 18px; width: fit-content; }
  .ai-typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: ai-bounce 1.4s ease-in-out infinite; }
  .ai-typing-dot:nth-child(2) { animation-delay: .18s; }
  .ai-typing-dot:nth-child(3) { animation-delay: .36s; }
  @keyframes ai-bounce {
    0%,80%,100% { transform: translateY(0); opacity: .45; }
    40%          { transform: translateY(-6px); opacity: 1; }
  }
  /* Tool call chip */
  .ai-tool-row { display:flex; flex-wrap:wrap; gap:4px; padding:2px 0 0; }
  .ai-tool-chip {
    display: inline-flex; align-items: center; gap: 3px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px; padding: 2px 9px; font-size: 9px;
    font-family: var(--mono); color: var(--muted); letter-spacing: .05em;
  }
  .ai-tool-chip::before { content: '⚡'; font-size: 8px; }
  /* Quick chips */
  #ai-chips-bar {
    display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 8px;
    border-top: 1px solid rgba(255,255,255,.06);
  }
  .ai-chip {
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px; padding: 6px 13px; font-size: 11px; color: var(--text);
    cursor: pointer; font-family: var(--sans); white-space: nowrap;
    transition: border-color .15s, background .15s, transform .12s;
  }
  .ai-chip:hover { border-color: var(--accent); background: rgba(255,255,255,.08); transform: translateY(-1px); }
  .ai-chip.morning-chip {
    background: linear-gradient(135deg,rgba(220,38,38,.15),rgba(251,146,60,.12));
    border-color: rgba(220,38,38,.35); color: var(--accent); font-weight: 700;
  }
  .ai-chip.morning-chip:hover { border-color: var(--accent); background: linear-gradient(135deg,rgba(220,38,38,.25),rgba(251,146,60,.2)); }
  #ai-bar {
    border-radius: 0 0 50px 50px !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
    background: rgba(14,11,20,.97) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
  }

  /* ── Monthly performance bar chart ── */
  .monthly-chart-wrap {
    background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius,12px);
    padding: 16px 20px 12px; margin-bottom: 16px;
  }
  .monthly-chart-head {
    display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px;
  }
  .monthly-chart-label { font-family:var(--mono); font-size:10px; font-weight:700; color:var(--muted); letter-spacing:.14em; text-transform:uppercase; }
  .monthly-chart-bars { display: flex; gap: 6px; align-items: flex-end; height: 72px; }
  .monthly-bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; }
  .monthly-bar { width:100%; border-radius:4px 4px 0 0; min-height:3px; transition: height .9s cubic-bezier(.22,.68,0,1.06); }
  .monthly-bar-lbl { font-size:9px; font-family:var(--mono); color:var(--muted); }
  .monthly-bar-val { font-size:8px; font-family:var(--mono); font-weight:700; }

  /* ── Shareable record card ── */
  #share-card-overlay {
    position: fixed; inset: 0; z-index: 700;
    background: rgba(0,0,0,.75); backdrop-filter: blur(10px);
    display: none; align-items: center; justify-content: center;
    padding: 24px;
  }
  #share-card-overlay.open { display: flex; }
  #share-card {
    background: #0c0a14; border: 1px solid rgba(255,255,255,.12); border-radius: 22px;
    padding: 30px; width: 440px; max-width: 100%;
    box-shadow: 0 50px 120px rgba(0,0,0,.9);
    position: relative;
  }
  #share-card::before {
    content: ''; position: absolute; inset: 0; border-radius: 22px;
    background: radial-gradient(ellipse at top left, rgba(220,38,38,.08), transparent 60%);
    pointer-events: none;
  }
  .share-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
  .share-card-brand  { display: flex; align-items: center; gap: 10px; }
  .share-card-logo   { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
  .share-card-name   { font-family: var(--mono); font-size: 12px; font-weight: 800; color: rgba(255,255,255,.9); letter-spacing: .1em; text-transform: uppercase; }
  .share-card-url    { font-size: 10px; color: rgba(255,255,255,.35); font-family: var(--mono); margin-top: 1px; }
  .share-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
  .share-kv { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: 16px 18px; }
  .share-kv .sv { font-family: var(--mono); font-size: 26px; font-weight: 900; line-height: 1; }
  .share-kv .sk { font-size: 9px; color: rgba(255,255,255,.4); margin-top: 6px; text-transform: uppercase; letter-spacing: .12em; font-family: var(--mono); }
  .share-card-footer {
    border-top: 1px solid rgba(255,255,255,.07); padding-top: 14px;
    text-align: center; font-size: 10px; color: rgba(255,255,255,.3);
    font-family: var(--mono); letter-spacing: .1em;
  }
  .share-actions { display: flex; gap: 10px; margin-top: 18px; }
  .share-btn { flex:1; padding:12px; border-radius:10px; font-weight:800; font-family:var(--mono); font-size:11px; letter-spacing:.08em; cursor:pointer; transition:opacity .15s,transform .1s; border:none; text-transform:uppercase; }
  .share-btn:hover { opacity:.85; transform:translateY(-1px); }
  .share-btn.primary { background: linear-gradient(135deg,var(--accent),var(--accent2)); color:#000; }
  .share-btn.secondary { background: var(--bg3); border: 1px solid var(--border); color: var(--text); }

  /* ── MISSION FLASH ── */
  #mission-flash {
    display: none; position: fixed; inset: 0; z-index: 9998;
    background: var(--bg); align-items: center; justify-content: center;
    flex-direction: column; text-align: center; padding: 32px;
  }
  #mission-flash.show { display: flex; }
  @keyframes missionIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
  }
  #mission-flash .mf-inner {
    animation: missionIn 0.5s ease forwards;
    max-width: 480px;
  }

  /* ── LOGIN ── */
  #login-screen {
    display: none;
    min-height: 100vh;
    background: var(--bg);
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  #login-screen.visible { display: flex; }
  .login-box {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 36px;
    width: 360px;
  }
  .login-logo {
    font-family: var(--mono);
    font-size: 16px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 6px;
  }
  .login-sub {
    text-align: center;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 28px;
  }
  .form-group { margin-bottom: 16px; }
  .form-group label {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .form-group input {
    width: 100%;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 5px;
    outline: none;
    font-family: var(--sans);
  }
  .form-group input:focus { border-color: var(--accent); }
  .submit-btn {
    width: 100%;
    padding: 11px;
    background: var(--accent);
    color: #000;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 4px;
    font-family: var(--sans);
    transition: opacity 0.12s;
  }
  .submit-btn:hover { opacity: 0.9; }
  .login-error {
    margin-top: 12px;
    padding: 8px 12px;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
    color: var(--red);
    border-radius: 4px;
    font-size: 13px;
    display: none;
  }
  .remember-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    cursor: pointer;
    user-select: none;
  }
  .remember-row input[type="checkbox"] {
    width: 14px; height: 14px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
  }
  .remember-row span {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  /* ── LOCKED PLAY CARD ── */
  .play-card.card-locked {
    border-color: #b45309;
    box-shadow: 0 0 0 1px rgba(180,83,9,0.25), 0 2px 12px rgba(180,83,9,0.12);
  }
  .play-card.card-locked::before { background: linear-gradient(90deg, #f59e0b, #d97706); }
  .play-card.card-started {
    border-color: rgba(239,68,68,0.4);
    box-shadow: 0 0 0 1px rgba(239,68,68,0.15);
    opacity: 0.75;
  }
  .play-card.card-started::before { background: var(--red); }
  .lock-badge {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(245,158,11,0.12);
    border: 1px solid rgba(245,158,11,0.35);
    color: #f59e0b;
    padding: 2px 7px; border-radius: 3px;
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em;
  }
  /* Admin-only verified-lock chip — green = backend confirms locked, grey = backend says open */
  .admin-lock-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 7px; border-radius: 3px;
    font-family: var(--mono); font-size: 10px; font-weight: 700;
    letter-spacing: 0.08em; cursor: help;
  }
  .admin-lock-chip.locked  { background: rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.45); color:#22c55e; }
  .admin-lock-chip.open    { background: rgba(148,163,184,0.10); border:1px solid var(--border); color: var(--muted); }
  .admin-lock-chip.unknown { background: rgba(148,163,184,0.10); border:1px dashed var(--border); color: var(--muted); }
  .rest-tag {
    display: inline-block;
    background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.2);
    color: var(--red); padding: 1px 6px; border-radius: 3px;
    font-family: var(--mono); font-size: 10px; font-weight: 700;
  }

  /* ── LOADING ── */
  .loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 13px;
    padding: 40px 0;
  }
  .spinner {
    width: 18px; height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ── SKELETON LOADER ── */
  @keyframes sk-shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
  }
  @keyframes sk-logo-pulse {
    0%,100% { box-shadow: 0 0 10px 2px color-mix(in srgb,var(--accent) 35%,transparent); opacity:.75; }
    50%     { box-shadow: 0 0 28px 10px color-mix(in srgb,var(--accent) 55%,transparent); opacity:1; }
  }
  .sk-wrap { padding: 4px 0; }
  .sk-brand {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: 32px; padding: 4px 0;
  }
  .sk-brand img {
    width: 52px; height: 52px; border-radius: 50%;
    animation: sk-logo-pulse 1.8s ease-in-out infinite;
  }
  .sk-brand-text { display: flex; flex-direction: column; gap: 6px; }
  .sk-pulse {
    background: linear-gradient(90deg,
      var(--bg3) 0%,
      var(--bg3) 30%,
      color-mix(in srgb, var(--accent) 18%, var(--bg3)) 50%,
      var(--bg3) 70%,
      var(--bg3) 100%);
    background-size: 1200px 100%;
    animation: sk-shimmer 1.8s ease-in-out infinite;
    border-radius: 5px;
  }
  .sk-card {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 20px;
    margin-bottom: 12px;
  }
  .sk-hdr  { height: 26px; width: 160px; }
  .sk-sub  { height: 11px; width: 110px; opacity: .6; }
  .sk-line { height: 14px; margin-bottom: 10px; }
  .sk-line.lg { height: 20px; }
  .sk-line.sm { height: 11px; opacity: .7; }
  .sk-w-70 { width: 70%; }
  .sk-w-50 { width: 50%; }
  .sk-w-35 { width: 35%; }
  .sk-stats { display: flex; gap: 10px; margin: 14px 0 4px; }
  .sk-stat  { height: 40px; flex: 1; border-radius: 6px; }

  .empty {
    color: var(--muted);
    font-family: var(--mono);
    font-size: 13px;
    padding: 32px 0;
    text-align: center;
  }

  /* ── PIPELINE PANEL ── */
  .pipeline-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
  }
  .pipeline-btn {
    padding: 9px 12px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--mono);
    font-size: 11px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.12s;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .pipeline-btn:hover { border-color: var(--accent); color: var(--accent); }
  .pipeline-btn.running { border-color: var(--yellow); color: var(--yellow); }
  .pipeline-btn.done    { border-color: var(--green);  color: var(--green); }
  .pipeline-btn.error   { border-color: var(--red);    color: var(--red); }

  .task-output {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 12px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text);
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
    margin-top: 10px;
    display: none;
  }
  .task-output.visible { display: block; }

  /* ── BUCKET BAR ── */
  .bucket-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }
  .bucket-label { font-family: var(--mono); font-size: 12px; width: 50px; color: var(--muted); }
  .bucket-track {
    flex: 1;
    height: 8px;
    background: var(--bg3);
    border-radius: 4px;
    overflow: hidden;
  }
  .bucket-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
  }
  .bucket-pct { font-family: var(--mono); font-size: 11px; width: 40px; text-align: right; }
  .bucket-rec { font-family: var(--mono); font-size: 11px; color: var(--muted); width: 60px; text-align: right; }

  /* ── Team matchup trends (per-game card) ── */
  .team-trends {
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
  }
  .team-trends-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
  }
  .trends-team-block {
    margin-bottom: 8px;
  }
  .trends-team-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    display: block;
  }
  .trends-stat-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
  }
  .trends-stat-pill {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
  }
  .trends-stat-pill b { font-weight: 700; }
  /* Mini bar chart for team trends */
  .trends-bars {
    height: 52px;
    position: relative;
    margin-top: 4px;
  }
  .trends-bars-zero {
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 1px;
    background: rgba(255,255,255,.12);
    z-index: 0;
  }
  .trends-bars-inner {
    display: flex;
    height: 100%;
    align-items: center;
    gap: 2px;
    position: relative;
    z-index: 1;
  }
  .trends-bar-wrap {
    flex: 1;
    min-width: 6px;
    max-width: 18px;
    height: 100%;
    position: relative;
    cursor: pointer;
  }
  .trends-bar {
    position: absolute;
    left: 0; right: 0;
    border-radius: 2px;
    transition: opacity .12s;
  }
  .trends-bar:hover { opacity: .65; }
  .trends-bar.win  { background: #4ade80; bottom: 50%; border-radius: 2px 2px 0 0; }
  .trends-bar.loss { background: #f87171; top:    50%; border-radius: 0 0 2px 2px; }
  .trends-bar.push { background: #888; top: calc(50% - 1px); height: 3px !important; border-radius: 2px; }
  /* Expandable team trends game table */
  .team-trends-toggle {
    cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    padding: 6px 0; user-select: none;
  }
  .team-trends-toggle:hover .tt-chevron { color: var(--text); }
  .tt-chevron { transition: transform .15s; display: inline-block; }
  .tt-body { padding-top: 4px; }
  .tt-team-header {
    display: flex; align-items: baseline; justify-content: space-between;
    flex-wrap: wrap; gap: 6px; margin-bottom: 4px;
  }
  .tt-team-name { font-size: 11px; font-weight: 700; color: var(--text); }
  .tt-pills { display: flex; gap: 8px; flex-wrap: wrap; }
  .tt-pill { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .tt-venue-toggle { display: flex; gap: 4px; margin: 4px 0 6px; }
  .tt-venue-btn {
    font-size: 10px; padding: 2px 9px; border-radius: 4px; cursor: pointer;
    border: 1px solid var(--border); background: transparent; color: var(--muted);
    font-family: var(--mono); transition: all .12s; line-height: 1.6;
  }
  .tt-venue-btn.active { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: var(--text); font-weight: 600; }
  .tt-venue-btn:hover:not(.active) { border-color: rgba(255,255,255,.15); color: var(--text); }
  .tt-win-btn {
    font-size: 10px; padding: 2px 9px; border-radius: 4px; cursor: pointer;
    border: 1px solid var(--border); background: transparent; color: var(--muted);
    font-family: var(--mono); transition: all .12s; line-height: 1.6;
  }
  .tt-win-btn.active { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: var(--text); font-weight: 600; }
  .tt-win-btn:hover:not(.active) { border-color: rgba(255,255,255,.15); color: var(--text); }
  .tt-toggles { display: flex; gap: 10px; align-items: center; margin: 4px 0 6px; flex-wrap: wrap; }
  .tt-game-table { width: 100%; border-collapse: collapse; font-size: 11px; margin: 6px 0 12px; }
  .tt-game-table thead tr { border-bottom: 1px solid var(--border); }
  .tt-game-table th { padding: 3px 8px 3px 0; text-align: left; font-size: 9px;
    font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .tt-game-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid rgba(255,255,255,.04);
    vertical-align: middle; }
  .tt-game-table tr:last-child td { border-bottom: none; }
  .tt-res-win  { color: #4ade80; font-weight: 700; }
  .tt-res-loss { color: #f87171; font-weight: 700; }
  .tt-res-push { color: #888;    font-weight: 700; }

  /* Responsive */
  @media (max-width: 900px) {
    #sidebar { width: 180px; }
    #main    { margin-left: 180px; padding: 16px; }
    .grid-4  { grid-template-columns: 1fr 1fr; }
    .grid-3  { grid-template-columns: 1fr 1fr; }
    .grid-5  { grid-template-columns: 1fr 1fr; }
    .stat-tile { padding: 12px; }
    .stat-tile .value { font-size: 20px; }
    /* tables inside scroll wrappers must expand beyond container to allow scroll */
    .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .tbl-wrap table { width: max-content; min-width: 100%; }
  }

  /* ── MOBILE ── */
  #mobile-header {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 50px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    align-items: center;
    padding: 0 14px;
    z-index: 300;
    gap: 12px;
  }
  #mobile-header .brand {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: .1em;
    flex: 1;
  }
  #hamburger {
    background: none;
    border: none;
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
    padding: 6px 8px;
    line-height: 1;
  }
  #sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 149;
  }
  @keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
  #sidebar-overlay.open { display: block; animation: overlay-in 0.22s ease forwards; }

  @media (max-width: 640px) {
    /* ── Layout ── */
    #mobile-header { display: flex; }
    #sidebar {
      transform: translateX(-100%);
      transition: transform 0.25s ease;
      width: 240px; z-index: 150; top: 0;
      padding-bottom: max(20px, env(safe-area-inset-bottom, 20px));
    }
    #sidebar.open { transform: translateX(0); }
    #main {
      margin-left: 0;
      padding: 10px;
      padding-top: 58px; /* clear fixed mobile header */
      overflow-x: hidden;
    }

    /* ── Ticker: sit below mobile header when sticky ── */
    #ticker-strip { top: 50px; }

    /* ── Grids ── */
    .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr 1fr; gap: 8px; }
    .grid-2 { grid-template-columns: 1fr 1fr; }
    /* Span last card full-width when alone in its row (5th item in 2-col grid) */
    .grid-5 > *:last-child:nth-child(odd) { grid-column: 1 / -1; }

    /* ── Stat tiles: compact ── */
    .stat-tile { padding: 10px 8px; }
    .stat-tile .value { font-size: 17px; }
    .stat-tile .label { font-size: 9px; }
    .stat-tile .sub   { font-size: 10px; }

    /* ── Cards ── */
    .card { padding: 12px; margin-bottom: 8px; }
    .card-title { font-size: 10px; margin-bottom: 8px; }

    /* ── Play cards ── */
    .play-card { padding: 12px; padding-right: 60px; margin-bottom: 8px; } /* right pad for conviction ring */
    .play-matchup { font-size: 12px; }
    .play-bet { font-size: 13px; margin-bottom: 6px; }
    .play-stats { gap: 8px; margin-bottom: 4px; }
    .play-stat { font-size: 11px; }
    .conviction-ring-wrap { width: 38px; height: 38px; top: 10px; right: 10px; }
    .conviction-pct { font-size: 9px; }

    /* ── Page header ── */
    .page-header { flex-direction: row; align-items: center; gap: 8px; margin-bottom: 12px; }
    .page-title  { font-size: 14px; }
    .page-sub    { display: none; } /* hide subtitle on mobile to save space */
    .refresh-btn { padding: 6px 10px; font-size: 11px; }

    /* ── Tables ── */
    .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* width:100% collapses columns so nothing overflows — use max-content instead */
    .tbl-wrap table { width: max-content; min-width: 100%; }
    td { font-size: 12px; padding: 8px 6px; }
    th { font-size: 10px; padding: 7px 6px; }

    /* ── Login ── */
    .login-box { width: calc(100vw - 32px); padding: 20px 16px; border-radius: 8px; }

    /* ── AI chat ── */
    #ai-widget { bottom: 12px; left: 8px; right: 8px; width: auto; max-width: none; transform: none; }
    #ai-panel  { bottom: 60px; }

    /* ── Betslip ── */
    #slip-panel { width: calc(100vw - 60px); left: 0; bottom: 58px; }
    #slip-widget { bottom: 12px; left: 8px; }

    /* ── Touch targets ── */
    .nav-item  { padding: 11px 16px; font-size: 13px; }
    .submit-btn { padding: 13px; font-size: 14px; }
    .sport-btn  { padding: 7px 0; font-size: 11px; }

    /* ── Section spacing ── */
    #main > *   { margin-bottom: 8px; }
    .grid-4.stats-row { grid-template-columns: 1fr 1fr; }

    /* ── Bankroll tracker compact on mobile ── */
    .br-card .grid-4 { grid-template-columns: 1fr 1fr; }

    /* ── Badges ── */
    .badge { font-size: 9px; padding: 2px 6px; }
    .lock-badge, .rest-tag { font-size: 9px; }

    /* ── Streak dots: smaller ── */
    .streak-dot { width: 6px; height: 6px; }

    /* ── Prevent horizontal overflow ── */
    html { overflow-x: hidden; max-width: 100vw; }
    /* Reset hardcoded inline min-widths so flex items can shrink below their floor */
    #main *[style*="min-width"] { min-width: 0 !important; max-width: 100% !important; }
    /* Force inline-flex rows to wrap so content stays within viewport */
    #main *[style*="display:flex"], #main *[style*="display: flex"] { flex-wrap: wrap !important; }
    /* Ensure page content itself never exceeds viewport */
    #page-content { max-width: 100vw; overflow-x: hidden; }
  }

  /* ── BETSLIP ── */
  #slip-widget { position: fixed; bottom: 20px; left: 20px; z-index: 200; }
  #slip-toggle {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--bg3); border: 1px solid var(--border);
    cursor: pointer; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5); transition: all 0.15s; position: relative;
  }
  #slip-toggle:hover { border-color: var(--accent); }
  #slip-badge {
    display: none; position: absolute; top: -4px; right: -4px;
    width: 18px; height: 18px; background: var(--accent); color: #000;
    border-radius: 50%; font-size: 10px; font-weight: 700;
    font-family: var(--mono); align-items: center; justify-content: center;
  }
  #slip-badge.show { display: flex; }
  #slip-panel {
    display: none; position: absolute; bottom: 60px; left: 0;
    width: 320px; background: var(--bg2); border: 1px solid var(--border);
    border-radius: 10px; overflow: hidden; box-shadow: 0 8px 40px rgba(0,0,0,0.5);
  }
  #slip-panel.open { display: block; }
  .slip-header {
    padding: 12px 16px; background: var(--bg3); border-bottom: 1px solid var(--border);
    font-family: var(--mono); font-size: 12px; font-weight: 700;
    display: flex; align-items: center; justify-content: space-between;
  }
  #slip-legs { max-height: 240px; overflow-y: auto; padding: 8px; }
  .slip-leg {
    display: flex; align-items: flex-start; gap: 8px; padding: 8px;
    border-radius: 6px; background: var(--bg3); border: 1px solid var(--border);
    margin-bottom: 6px; font-size: 12px;
  }
  .slip-leg-info { flex: 1; }
  .slip-leg-label { font-weight: 700; color: var(--text); margin-bottom: 2px; }
  .slip-leg-sub { color: var(--muted); font-size: 11px; }
  .slip-leg-odds { font-family: var(--mono); font-size: 12px; color: var(--accent); white-space: nowrap; }
  .slip-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0 4px; line-height: 1; }
  .slip-remove:hover { color: var(--red); }
  .slip-footer { padding: 10px; border-top: 1px solid var(--border); background: var(--bg3); }
  .slip-odds-row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; margin-bottom: 8px; }
  .slip-stake-row { display: flex; gap: 6px; margin-bottom: 8px; align-items: center; }
  #slip-stake {
    width: 72px; background: var(--bg2); border: 1px solid var(--border);
    color: var(--text); padding: 6px 8px; font-size: 13px;
    font-family: var(--mono); border-radius: 4px; outline: none;
  }
  #slip-stake:focus { border-color: var(--accent); }
  .slip-payout { font-family: var(--mono); font-size: 12px; color: var(--green); flex: 1; padding-left: 6px; }
  .slip-bet-row { display: flex; gap: 6px; }
  .slip-bet-btn {
    flex: 1; padding: 8px; border: 1px solid var(--border); border-radius: 5px;
    font-size: 11px; font-weight: 700; font-family: var(--mono); cursor: pointer;
    background: var(--bg2); color: var(--text); text-decoration: none;
    display: block; text-align: center; transition: all 0.12s;
  }
  .slip-bet-btn:hover { border-color: var(--accent); color: var(--accent); }
  .slip-clear { width: 100%; padding: 5px; background: none; border: 1px solid var(--border); color: var(--muted); font-size: 11px; border-radius: 4px; cursor: pointer; margin-top: 6px; font-family: var(--mono); }
  .slip-clear:hover { border-color: var(--red); color: var(--red); }
  .add-slip-btn {
    padding: 4px 10px; background: transparent; border: 1px solid var(--border);
    color: var(--muted); font-size: 11px; font-family: var(--mono);
    border-radius: 4px; cursor: pointer; transition: all 0.12s; white-space: nowrap;
  }
  .add-slip-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(0,212,170,0.05); }
  .add-slip-btn.added { border-color: var(--accent); color: var(--accent); background: rgba(0,212,170,0.08); }

  /* ── MINIMIZE (universal — works on all screen sizes) ── */
  #ai-mini-pill  { display: none; }
  #slip-mini-pill { display: none; }
  #ai-widget.minimized  #ai-bar   { display: none; }
  #ai-widget.minimized  #ai-panel { display: none !important; }
  #ai-widget.minimized  #ai-mini-pill  { display: flex; }
  #slip-widget.minimized #slip-toggle-label { display: none; }
  #slip-widget.minimized #slip-mini-pill    { display: flex; }

  /* ── SPEED-DIAL FAB (all screen sizes) ── */

  /* Hide individual floating widgets — FAB replaces them everywhere */
  #ai-widget:not(.mob-show)   { display: none !important; }
  #slip-widget:not(.mob-show) { display: none !important; }
  #dbg-fab                    { display: none !important; }

  /* Hide FAB on login / landing page */
  #login-screen.visible ~ #mobile-fab-wrap { display: none !important; }

  #mobile-fab-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9100;
  }
  #mobile-fab-btn {
    width: 52px; height: 52px; border-radius: 50%;
    background: var(--accent); border: none; cursor: pointer;
    font-size: 22px; display: flex; align-items: center; justify-content: center;
    color: #000; box-shadow: 0 4px 20px rgba(0,0,0,.5);
    transition: transform .2s; flex-shrink: 0;
  }
  #mobile-fab-btn.open { transform: rotate(45deg); }
  #mobile-fab-opts {
    display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  }
  #mobile-fab-opts.hidden { display: none; }
  .mfab-opt {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: 24px; padding: 9px 16px;
    color: var(--text); font-size: 13px; font-family: var(--sans);
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 2px 14px rgba(0,0,0,.45);
  }
  .mfab-opt span { font-weight: 600; font-size: 12px; }

  /* ── GATE TOOLTIPS (login page) ── */
  .gate-item { display:flex;align-items:center;gap:6px; }
  .gate-tip {
    display:inline-flex;align-items:center;justify-content:center;
    width:14px;height:14px;border-radius:50%;border:1px solid var(--muted);
    font-size:9px;color:var(--muted);cursor:pointer;flex-shrink:0;
    transition:border-color .15s,color .15s;
  }
  .gate-tip:hover { border-color:var(--accent2);color:var(--accent2); }
  .gate-tooltip {
    display:none;position:absolute;left:0;top:100%;margin-top:4px;
    background:var(--bg3);border:1px solid var(--border);border-radius:6px;
    padding:8px 10px;font-size:11px;color:var(--muted);line-height:1.6;
    width:280px;z-index:50;box-shadow:0 4px 16px rgba(0,0,0,.4);
  }
  .gate-item:hover .gate-tooltip { display:block; }

  /* ── PUBLIC RESULTS LEDGER ── */
  #public-ledger-inner .pub-record {
    display:flex;gap:16px;justify-content:center;align-items:baseline;
    margin-bottom:12px;flex-wrap:wrap;
  }
  .pub-rec-block { text-align:center; }
  .pub-rec-num { font-size:22px;font-weight:700;color:#f0e8ec; }
  .pub-rec-lbl { font-size:9px;color:#7c5c65;letter-spacing:.1em;text-transform:uppercase;margin-top:2px; }
  .pub-result-row {
    display:flex;justify-content:space-between;align-items:center;
    padding:5px 0;border-bottom:1px solid #1a0f12;font-size:11px;gap:8px;
  }
  .pub-result-row:last-child { border-bottom:none; }
  .pub-win  { color:#22c55e;font-weight:700; }
  .pub-loss { color:#ef4444;font-weight:700; }
  .pub-push { color:#7c5c65;font-weight:700; }
  .pub-see-more {
    display:block;text-align:center;margin-top:10px;
    font-size:11px;color:#dc2626;text-decoration:none;letter-spacing:.06em;
  }
  .pub-see-more:hover { text-decoration:underline; }

  /* ── SCROLLBAR ── */
  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }
  ::-webkit-scrollbar-thumb:hover { background: var(--muted); }

  /* ── SELECTION ── */
  ::selection { background: rgba(220,38,38,0.22); color: var(--text); }

  /* ── BOOT SEQUENCE ── */
  #boot-overlay { display:none;position:fixed;inset:0;z-index:9990;background:var(--bg);align-items:center;justify-content:center;flex-direction:column; }
  #boot-overlay.active { display:flex; }
  .boot-term { font-family:var(--mono);font-size:13px;width:460px;max-width:calc(100vw - 48px); }
  .boot-line { display:flex;align-items:center;gap:10px;padding:5px 0;opacity:0;transition:opacity 0.2s; }
  .boot-line.show { opacity:1; }
  .boot-prompt { color:var(--accent); }
  .boot-label { color:var(--muted);flex:1; }
  .boot-dots { color:rgba(124,92,101,0.5);letter-spacing:2px;flex:1; }
  .boot-status { font-weight:700; }
  .boot-ok { color:var(--green); }
  .boot-rdy { color:var(--accent); }
  @keyframes bootOut { to { opacity:0;pointer-events:none; } }
  #boot-overlay.fading { animation:bootOut 0.5s ease forwards; }
  #boot-footer { margin-top:32px;font-family:var(--mono);font-size:10px;color:rgba(124,92,101,0.4);letter-spacing:.15em;text-transform:uppercase; }

  /* ── TICKER STRIP ── */
  #ticker-strip { height:30px;overflow:hidden;background:var(--bg2);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:90;display:none;flex-direction:row;align-items:stretch; }
  #ticker-pin { display:inline-flex;align-items:center;gap:10px;padding:0 14px;font-family:var(--mono);font-size:10px;font-weight:700;border-right:2px solid var(--border);height:100%;white-space:nowrap;flex-shrink:0;background:var(--bg2);letter-spacing:.05em; }
  .ticker-pin-rec { color:var(--muted); }
  .ticker-pin-rec b { color:var(--text); }
  .ticker-scroll { flex:1;overflow:hidden;height:100%; }
  .ticker-inner { display:flex;align-items:center;white-space:nowrap;height:100%;animation:tickerScroll 60s linear infinite; }
  .ticker-inner:hover { animation-duration:20s; }
  @keyframes tickerScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
  .ticker-item { display:inline-flex;align-items:center;gap:6px;padding:0 18px;font-family:var(--mono);font-size:11px;color:var(--muted);border-right:1px solid var(--border);height:100%;cursor:pointer;transition:background .15s; }
  .ticker-item:hover { background:rgba(255,255,255,0.04); }
  .ticker-sport { font-weight:700;font-size:10px;letter-spacing:.1em; }
  .ticker-sport.s-nba { color:#3b82f6; }
  .ticker-sport.s-mlb { color:#22c55e; }
  .ticker-sport.s-nhl { color:#38bdf8; }
  .ticker-sport.s-ufc { color:#f97316; }
  .ticker-sport.s-nfl { color:#8b5cf6; }
  .ticker-edge { font-weight:700; }
  .ticker-conf-high { color:var(--green);font-weight:700; }
  .ticker-conf-med  { color:var(--yellow);font-weight:600; }
  .ticker-conf-low  { color:var(--muted); }
  .ticker-lock { font-size:9px;opacity:0.65;margin-right:2px; }
  .ticker-time { opacity:0.5;font-size:10px; }

  /* ── CONVICTION RING ── */
  .conviction-ring-wrap { position:absolute;top:12px;right:12px;width:44px;height:44px;pointer-events:none; }
  .conviction-ring-wrap svg { transform:rotate(-90deg); }
  .conviction-bg { fill:none;stroke:var(--bg3);stroke-width:3; }
  .conviction-arc { fill:none;stroke-width:3;stroke-linecap:round;transition:stroke-dashoffset 1s ease 0.1s; }
  .conviction-pct { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;font-weight:700; }

  /* ── CARD ENTRANCE + HOVER ── */
  @keyframes cardSlideIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
  .play-card-animate { animation:cardSlideIn 0.3s ease forwards;opacity:0; }
  .play-card:not(.card-started):hover { transform:translateY(-2px);box-shadow:0 6px 28px rgba(220,38,38,0.18);border-color:rgba(220,38,38,0.45); }

  /* ── WIN STREAK DOTS ── */
  .streak-dots { display:flex;gap:3px;margin-top:5px;flex-wrap:wrap; }
  .streak-dot { width:7px;height:7px;border-radius:50%;flex-shrink:0; }
  .s-w { background:var(--green); }
  .s-l { background:var(--red); }
  .s-p { background:var(--muted); }

  /* ── MODEL STATUS ── */
  .model-status { padding:8px 16px 10px;border-top:1px solid var(--border); }
  .model-status-row { display:flex;align-items:center;gap:6px;padding:2px 0;font-family:var(--mono);font-size:10px;color:var(--muted); }
  .model-dot { width:6px;height:6px;border-radius:50%;flex-shrink:0;animation:livePulse 2.5s ease-in-out infinite; }
  .model-dot.live { background:var(--green); }
  .model-dot.pending { background:var(--yellow);animation:none; }

  /* ── SUBSCRIBER BADGE ── */
  .tier-badge { display:inline-block;margin-top:4px;padding:2px 8px;border-radius:3px;font-size:9px;font-weight:700;letter-spacing:.1em; }
  .tier-sub  { background:rgba(34,197,94,0.12);color:var(--green);border:1px solid rgba(34,197,94,0.28); }
  .tier-admin { background:rgba(220,38,38,0.12);color:var(--accent);border:1px solid rgba(220,38,38,0.28); }

  /* ── VERIFIED STAMP ── */
  .verified-stamp { font-family:var(--mono);font-size:10px;color:rgba(124,92,101,0.65);margin-top:7px;display:flex;align-items:center;gap:5px; }
  .verified-stamp::before { content:'✓';color:var(--green);font-weight:700; }

  /* ── KELLY BADGE ── */
  .kelly-badge { display:inline-flex;align-items:center;gap:4px;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.25);color:var(--yellow);padding:2px 7px;border-radius:3px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.04em; }

  /* ── PLAY DETAIL MODAL ── */
  #play-modal { display:none;position:fixed;inset:0;z-index:800;background:rgba(9,6,10,0.88);backdrop-filter:blur(6px);align-items:center;justify-content:center;padding:20px; }
  #play-modal.open { display:flex; }
  .modal-box { background:var(--bg2);border:1px solid var(--border);border-radius:12px;width:500px;max-width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 70px rgba(0,0,0,0.7); }
  .modal-header { padding:16px 20px;background:var(--bg3);border-bottom:1px solid var(--border);font-family:var(--mono);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1; }
  .modal-close { background:none;border:none;color:var(--muted);font-size:22px;cursor:pointer;line-height:1;padding:0 4px; }
  .modal-close:hover { color:var(--red); }
  .modal-body { padding:20px; }
  .modal-row { display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--border);font-size:13px; }
  .modal-row:last-child { border-bottom:none; }
  .modal-lbl { color:var(--muted);font-size:11px;font-family:var(--mono);text-transform:uppercase;letter-spacing:.06em; }
  .modal-val { font-family:var(--mono);font-weight:700; }
  .sig-bar { display:flex;align-items:center;gap:8px;flex:1;margin-left:10px; }
  .sig-track { flex:1;height:4px;background:var(--bg3);border-radius:2px;overflow:hidden; }
  .sig-fill { height:100%;border-radius:2px;transition:width 0.8s ease; }

  /* ── BANKROLL TRACKER ── */
  .br-card { background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:16px;margin-bottom:14px; }
  .br-eq-svg { width:100%;height:56px; }

  /* ── DESKTOP LOGIN LANDING ── */
  @media (min-width: 900px) {
    #login-screen {
      flex-direction: row;
      align-items: stretch;
      min-height: 100vh;
    }
    #login-left {
      display: flex !important;
      flex: 1;
      flex-direction: column;
      justify-content: center;
      padding: 60px 64px;
      border-right: 1px solid var(--border);
      background: linear-gradient(160deg, var(--bg2) 0%, var(--bg) 100%);
    }
    #login-right {
      width: 440px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 48px 40px;
      overflow-y: auto;
    }
    #login-right .login-box {
      width: 100%;
      border: none;
      background: transparent;
      padding: 0;
    }
    #login-right #public-ledger {
      width: 100%;
      margin-top: 24px;
    }
  }
  @media (max-width: 899px) {
    /* Mobile: login first, scroll hint, then details below */
    #login-right { order: 1; width: 100%; padding: 28px 20px; }
    .mobile-scroll-hint {
      order: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      padding: 10px 0 6px;
      background: var(--bg2);
      border-bottom: 1px solid var(--border);
    }
    #login-left {
      order: 3;
      display: flex !important;
      flex-direction: column;
      width: 100%;
      padding: 28px 20px 20px;
      border-right: none;
      border-bottom: none;
      background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
    }

    /* Shrink the giant headline on mobile */
    #login-left .ll-s1 > div:nth-child(2) {
      font-size: 38px !important;
      letter-spacing: -0.02em !important;
      margin-bottom: 14px !important;
    }

    /* Models grid: 2 columns on mobile */
    #login-left .ll-s2 [style*="grid-template-columns:1fr 1fr 1fr"],
    #login-left .ll-s2 [style*="grid-template-columns: 1fr 1fr 1fr"] {
      grid-template-columns: 1fr 1fr !important;
    }

    /* Hide the sample pick card and 4-signal gate on mobile — keep it clean */
    #login-left .ll-s5 { display: none !important; }
    #login-left .ll-s3 { display: none !important; }

    /* Testimonials: tighten up */
    #login-testimonials { margin-top: 16px !important; }
  }

  /* ═══════════════════════════════════════════════════════════
     VISUAL ENHANCEMENT LAYER — pure CSS, zero JS changes
  ═══════════════════════════════════════════════════════════ */

  /* ── Sidebar: gradient depth + drop shadow ── */
  #sidebar {
    background: linear-gradient(180deg, #100c13 0%, #08050a 100%);
    box-shadow: 4px 0 40px rgba(0,0,0,0.55);
  }
  .sidebar-logo .brand {
    background: linear-gradient(90deg, var(--accent), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ── Nav active: gradient sweep + left glow ── */
  .nav-item.active {
    background: linear-gradient(90deg, rgba(220,38,38,0.13) 0%, rgba(220,38,38,0.01) 100%);
  }
  .nav-item:hover { background: rgba(255,255,255,0.03); }

  /* ── Cards: deeper shadow + rounded ── */
  .card {
    border-radius: var(--radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-md);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
  }

  /* ── Stat tiles: gradient top border + hover lift ── */
  .stat-tile {
    border-radius: 10px;
    padding: 16px 14px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  }
  .stat-tile::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent2));
  }
  .stat-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(220,38,38,0.3);
    box-shadow: 0 8px 36px rgba(0,0,0,0.5), 0 0 0 1px rgba(220,38,38,0.14);
  }
  .stat-tile .value { font-size: 24px; }

  /* ── Play cards: more dramatic hover ── */
  .play-card {
    box-shadow: 0 4px 24px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.025);
  }
  .play-card::before { height: 3px; }
  .play-card:not(.card-started):hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 48px rgba(220,38,38,0.26), 0 0 0 1px rgba(220,38,38,0.22);
    border-color: rgba(220,38,38,0.6);
  }

  /* ── Table: frosted header row ── */
  thead tr { background: rgba(12,9,14,0.96); }
  tr:hover td { background: rgba(255,255,255,0.028); }

  /* ── Submit button: gradient + lift ── */
  .submit-btn {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    color: #fff;
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(220,38,38,0.32);
    transition: all 0.15s ease;
  }
  .submit-btn:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 7px 28px rgba(220,38,38,0.48);
  }

  /* ── Refresh button: glow on hover ── */
  .refresh-btn { border-radius: 6px; transition: all 0.15s ease; }
  .refresh-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(220,38,38,0.07);
    box-shadow: 0 0 14px rgba(220,38,38,0.18);
    transform: translateY(-1px);
  }

  /* ── Sport switcher: gradient active ── */
  .sport-btn {
    border-radius: 5px;
    transition: all 0.15s ease;
  }
  .sport-btn:hover:not(.active) { color: var(--text); background: rgba(255,255,255,0.04); }
  .sport-btn.active {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 2px 12px rgba(220,38,38,0.35);
  }

  /* ── AI bar: glassmorphism ── */
  #ai-bar {
    background: rgba(12,9,14,0.88);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 8px 44px rgba(0,0,0,0.65), inset 0 1px 0 rgba(255,255,255,0.045);
  }
  #ai-bar:hover, #ai-bar:focus-within {
    border-color: rgba(220,38,38,0.45);
    box-shadow: 0 8px 44px rgba(0,0,0,0.65), 0 0 22px rgba(220,38,38,0.14), inset 0 1px 0 rgba(255,255,255,0.045);
  }
  #ai-send {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    color: #fff;
    box-shadow: 0 2px 10px rgba(220,38,38,0.28);
    transition: all 0.15s ease;
  }
  #ai-send:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(220,38,38,0.4); }

  /* ── FAB: gradient ── */
  #mobile-fab-btn {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    color: #fff;
    box-shadow: 0 4px 22px rgba(220,38,38,0.42);
  }

  /* ── Badges: pill shape + subtle glow ── */
  .badge { border-radius: 999px; padding: 2px 9px; }
  .badge-high { box-shadow: 0 0 8px rgba(34,197,94,0.14); }
  .badge-med  { box-shadow: 0 0 8px rgba(245,158,11,0.14); }
  .badge-low  { box-shadow: 0 0 8px rgba(239,68,68,0.14); }

  /* ── Result pill classes (WIN / LOSS / PUSH) ── */
  .result-win  { display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.05em;background:rgba(34,197,94,0.14);color:#4ade80;border:1px solid rgba(34,197,94,0.35); }
  .result-loss { display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.05em;background:rgba(239,68,68,0.14);color:#f87171;border:1px solid rgba(239,68,68,0.35); }
  .result-push { display:inline-flex;align-items:center;padding:2px 10px;border-radius:999px;font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.05em;background:rgba(124,92,101,0.18);color:#a08890;border:1px solid rgba(124,92,101,0.3); }

  /* ── Login box: glow ── */
  .login-box {
    box-shadow: 0 0 80px rgba(220,38,38,0.08), 0 8px 52px rgba(0,0,0,0.52);
  }

  /* ── Modal: deeper shadow + glass ── */
  .modal-box {
    box-shadow: 0 24px 90px rgba(0,0,0,0.82), 0 0 0 1px rgba(255,255,255,0.04);
    border-radius: 14px;
  }

  /* ── Live badge: ambient glow ── */
  .live-badge { box-shadow: 0 0 12px rgba(239,68,68,0.22); }

  /* ── Betslip toggle: subtle gradient ── */
  #slip-toggle {
    background: linear-gradient(145deg, var(--bg3) 0%, var(--bg2) 100%);
    box-shadow: 0 4px 24px rgba(0,0,0,0.55);
    transition: all 0.15s ease;
  }
  #slip-toggle:hover { border-color: var(--accent); box-shadow: 0 4px 24px rgba(220,38,38,0.2); }

  /* ── Logout btn: smooth ── */
  .logout-btn { border-radius: 6px; transition: all 0.15s ease; }
  .logout-btn:hover { border-color: var(--red); color: var(--red); background: rgba(239,68,68,0.06); }

  /* ── Pipeline btn: lift on hover ── */
  .pipeline-btn { transition: all 0.15s ease; }
  .pipeline-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.3); }

  /* ── Page content fade-in ── */
  @keyframes pageIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
  #page-content > .card,
  #page-content > div:not(.loading) { animation: pageIn 0.22s ease forwards; }

  /* ── Mobile header: shadow ── */
  #mobile-header {
    box-shadow: 0 2px 20px rgba(0,0,0,0.5);
  }

  /* ── Spinner: accent2 for contrast ── */
  .spinner { width: 20px; height: 20px; border-top-color: var(--accent2); }

  /* ═══════════════════════════════════════════════════════════
     DRAMATIC UPGRADE LAYER II
  ═══════════════════════════════════════════════════════════ */

  /* ── Page title: larger + gradient accent span ── */
  .page-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
  .page-title span {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ── Card title: left accent bar + separator ── */
  .card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 14px;
  }
  .card-title::before {
    content: '';
    width: 3px;
    height: 14px;
    background: linear-gradient(180deg, var(--accent), var(--accent2));
    border-radius: 2px;
    flex-shrink: 0;
  }

  /* ── Stat tile value: bigger ── */
  .stat-tile .value { font-size: 26px; }

  /* ── Play bet: larger, bolder ── */
  .play-bet { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

  /* ── Table: alternating rows ── */
  tbody tr:nth-child(even) td { background: rgba(255,255,255,0.013); }

  /* ── Sport-specific nav active colors ── */
  #nav-nba .nav-item.active { border-left-color:#3b82f6; color:#60a5fa; background:linear-gradient(90deg,rgba(59,130,246,0.11),transparent); }
  #nav-mlb .nav-item.active { border-left-color:#22c55e; color:#4ade80; background:linear-gradient(90deg,rgba(34,197,94,0.11),transparent); }
  #nav-ufc .nav-item.active { border-left-color:#f59e0b; color:#fbbf24; background:linear-gradient(90deg,rgba(245,158,11,0.11),transparent); }
  #nav-nfl .nav-item.active { border-left-color:#f97316; color:#fb923c; background:linear-gradient(90deg,rgba(249,115,22,0.11),transparent); }

  /* ── Sport-specific button active colors ── */
  #btn-nba.active { background:linear-gradient(135deg,#1d4ed8,#3b82f6); border-color:#2563eb; color:#fff; box-shadow:0 2px 14px rgba(59,130,246,0.4); }
  #btn-mlb.active { background:linear-gradient(135deg,#15803d,#22c55e); border-color:#16a34a; color:#fff; box-shadow:0 2px 14px rgba(34,197,94,0.4); }
  #btn-ufc.active { background:linear-gradient(135deg,#b45309,#f59e0b); border-color:#d97706; color:#000; box-shadow:0 2px 14px rgba(245,158,11,0.35); }
  #btn-nfl.active { background:linear-gradient(135deg,#c2410c,#f97316); border-color:#ea580c; color:#fff; box-shadow:0 2px 14px rgba(249,115,22,0.4); }

  /* ── Live dot: ripple pulse ── */
  @keyframes liveRipple {
    0%   { box-shadow: 0 0 0 0 rgba(34,197,94,0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
    100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
  }
  .model-dot.live { animation: liveRipple 2s ease-in-out infinite; }

  /* ── Lock badge: amber glow pulse ── */
  @keyframes lockGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
    50%       { box-shadow: 0 0 10px 3px rgba(245,158,11,0.22); }
  }
  .play-card.card-locked .lock-badge { animation: lockGlow 2.4s ease-in-out infinite; }
  .play-card.card-locked { border-left-width: 3px; }

  /* ── Signal fill: gradient ── */
  .sig-fill { background: linear-gradient(90deg, var(--accent), var(--accent2)); }

  /* ── Kelly badge: pill + glow ── */
  .kelly-badge {
    border-radius: 999px;
    font-size: 11px;
    padding: 3px 9px;
    box-shadow: 0 0 8px rgba(245,158,11,0.12);
  }

  /* ── Ticker: glowing text ── */
  .ticker-edge  { text-shadow: 0 0 8px rgba(34,197,94,0.45); }
  .ticker-sport { text-shadow: 0 0 6px rgba(220,38,38,0.35); }

  /* ── Public result colors: glowing ── */
  .pub-win  { text-shadow: 0 0 8px rgba(34,197,94,0.35); }
  .pub-loss { text-shadow: 0 0 8px rgba(239,68,68,0.35); }
  .pub-rec-num {
    font-size: 26px;
    background: linear-gradient(135deg, var(--text), var(--accent2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* ── Form input focus glow ── */
  .form-group input {
    background: rgba(20,14,22,0.8);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
  }
  .form-group input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(220,38,38,0.1), 0 0 18px rgba(220,38,38,0.08);
  }

  /* ── Bucket fill: gradient ── */
  .bucket-fill { background: linear-gradient(90deg, var(--accent), var(--accent2)); }
  .bucket-track { background: rgba(255,255,255,0.05); }

  /* ── AI panel: glassmorphism ── */
  #ai-panel {
    background: rgba(12,9,14,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.07);
  }
  .ai-msg.bot {
    background: linear-gradient(135deg, rgba(20,15,24,0.9), rgba(14,10,18,0.7));
    border: 1px solid rgba(255,255,255,0.06);
  }
  .ai-msg.user {
    background: linear-gradient(135deg, rgba(220,38,38,0.12), rgba(244,63,94,0.07));
    border: 1px solid rgba(220,38,38,0.22);
  }

  /* ── Slip panel: glassmorphism ── */
  #slip-panel {
    background: rgba(12,9,14,0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.07);
    box-shadow: 0 16px 60px rgba(0,0,0,0.7);
  }

  /* ══════════════════════════════════════════════════
     PREMIUM LAYER III — DEEP VISUAL ATMOSPHERE
     ══════════════════════════════════════════════════ */

  /* ── Multi-layer aurora atmosphere (fixed behind everything) ── */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 65% 45% at 12% 90%, rgba(220,38,38,0.09) 0%, transparent 55%),
      radial-gradient(ellipse 45% 35% at 88% 10%, rgba(0,212,170,0.06) 0%, transparent 45%),
      radial-gradient(ellipse 80% 55% at 50% 115%, rgba(139,92,246,0.06) 0%, transparent 55%);
    animation: auroraDrift 20s ease-in-out infinite alternate;
  }
  @keyframes auroraDrift {
    0%   { opacity: 0.5; transform: scale(1) translateY(0); }
    60%  { opacity: 1;   transform: scale(1.06) translateY(-18px); }
    100% { opacity: 0.65; transform: scale(1.03) translateY(-9px); }
  }

  /* ── Play card: sweeping shimmer on hover ── */
  .play-card {
    overflow: hidden;
  }
  .play-card::after {
    content: '';
    position: absolute;
    top: -80%;
    left: -120%;
    width: 55%;
    height: 260%;
    background: linear-gradient(
      108deg,
      transparent 25%,
      rgba(255,255,255,0.038) 50%,
      transparent 75%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    opacity: 0;
  }
  .play-card:not(.card-started):hover::after {
    animation: shimmerPass 0.65s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 1;
  }
  @keyframes shimmerPass {
    0%   { left: -120%; }
    100% { left: 180%; }
  }

  /* ── Play card: deeper glass with gradient ── */
  .play-card {
    background: linear-gradient(162deg, rgba(26,17,33,0.97) 0%, rgba(13,9,19,0.99) 100%);
    border: 1px solid rgba(255,255,255,0.052);
    box-shadow:
      0 4px 22px rgba(0,0,0,0.58),
      0 1px 0 rgba(255,255,255,0.042) inset,
      0 -1px 0 rgba(0,0,0,0.35) inset;
  }
  .play-card:not(.card-started):hover {
    box-shadow:
      0 10px 48px rgba(220,38,38,0.24),
      0 3px 14px rgba(220,38,38,0.1),
      0 1px 0 rgba(255,255,255,0.06) inset;
    border-color: rgba(220,38,38,0.52);
    transform: translateY(-3px);
  }

  /* ── Play card animate: more depth ── */
  @keyframes cardReveal3 {
    from { opacity: 0; transform: translateY(22px) scale(0.975); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
  }
  .play-card-animate {
    animation: cardReveal3 0.45s cubic-bezier(0.16, 1, 0.3, 1) both !important;
  }

  /* ── Section cards: depth ── */
  .section-card {
    box-shadow:
      0 2px 18px rgba(0,0,0,0.48),
      0 0 0 1px rgba(255,255,255,0.038) inset;
    transition: box-shadow 0.2s ease;
  }

  /* ── Stat tiles: premium glass tiles ── */
  .stat-tile {
    background: linear-gradient(158deg, rgba(22,14,30,0.98) 0%, rgba(13,9,20,0.98) 100%);
    border: 1px solid rgba(255,255,255,0.048);
    box-shadow: 0 2px 14px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.03);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  }
  .stat-tile:hover {
    border-color: rgba(220,38,38,0.22);
    box-shadow: 0 4px 22px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.045);
    transform: translateY(-1px);
  }

  /* ── STRONG / HIGH confidence badge: glow ring ── */
  @keyframes strongGlow {
    0%, 100% { box-shadow: 0 0 10px rgba(34,197,94,0.28), 0 0 22px rgba(34,197,94,0.1); }
    50%       { box-shadow: 0 0 18px rgba(34,197,94,0.5),  0 0 40px rgba(34,197,94,0.18); }
  }
  .grade-strong { animation: strongGlow 2.8s ease-in-out infinite; }

  /* ── Ticker bar: premium dark glass ── */
  #ticker-bar {
    background: linear-gradient(90deg, rgba(9,5,13,0.97) 0%, rgba(13,8,18,0.99) 100%);
    border-bottom: 1px solid rgba(220,38,38,0.18);
    box-shadow: 0 2px 24px rgba(0,0,0,0.5), 0 0 50px rgba(220,38,38,0.04);
  }

  /* ── Nav sidebar: deeper glass ── */
  #side-nav {
    background: linear-gradient(180deg, rgba(10,6,14,0.98) 0%, rgba(8,4,12,0.99) 100%);
    box-shadow: 2px 0 32px rgba(0,0,0,0.65);
    border-right: 1px solid rgba(255,255,255,0.042);
  }

  /* ── Sport switcher buttons: more depth ── */
  .sport-btn {
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  }
  .sport-btn:not(.active):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
  }

  /* ── Page-level fade-in when tab changes ── */
  @keyframes tabReveal {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .content-block { animation: tabReveal 0.32s ease both; }

  /* ── Confidence bar under play cards ── */
  .conf-bar-wrap {
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 999px;
    margin-top: 8px;
    overflow: hidden;
  }
  .conf-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.16,1,0.3,1);
  }
  .conf-bar-high   { background: linear-gradient(90deg, #15803d, #22c55e); box-shadow: 0 0 8px rgba(34,197,94,0.5); }
  .conf-bar-medium { background: linear-gradient(90deg, #d97706, #f59e0b); box-shadow: 0 0 8px rgba(245,158,11,0.4); }
  .conf-bar-low    { background: linear-gradient(90deg, #b91c1c, #ef4444); box-shadow: 0 0 8px rgba(239,68,68,0.35); }

  /* ── Form input: deeper focus ── */
  .form-group input:focus {
    box-shadow: 0 0 0 3px rgba(220,38,38,0.12), 0 0 24px rgba(220,38,38,0.12);
  }

  /* ── Win/loss result badges: glow ── */
  .res-win  { text-shadow: 0 0 10px rgba(34,197,94,0.55);  }
  .res-loss { text-shadow: 0 0 10px rgba(239,68,68,0.55);  }
  .res-push { text-shadow: 0 0 10px rgba(148,163,184,0.4); }

  /* ── STAT TOOLTIP ── */
  .tip {
    display:inline-flex;align-items:center;justify-content:center;
    width:13px;height:13px;border-radius:50%;
    background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);
    color:var(--muted);font-size:8px;font-weight:700;cursor:help;
    vertical-align:middle;margin-left:3px;flex-shrink:0;
    font-family:var(--mono);line-height:1;user-select:none;
    transition:background 0.12s,border-color 0.12s;
  }
  .tip:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.3);}

  /* ── Home hero: atmosphere overlay ── */
  #section-home > div:first-child {
    position: relative;
  }

  /* ═══════════════════════════════════════════════════════════
     ENHANCEMENT LAYER — H2-H7 + M1-M10 + L1-L5
     All additive. Desktop 220px sidebar + 1280px content preserved.
     Mobile 640px breakpoint preserved.
  ═══════════════════════════════════════════════════════════ */

  /* ── Tabular-number alignment on all numerics (M10) ── */
  .mono, .num, .stat-tile .value, .play-stat strong, td, th,
  .pub-rec-num, .slip-leg-odds, #slip-total-odds, #slip-payout-val {
    font-feature-settings: "tnum" 1, "lnum" 1;
    font-variant-numeric: tabular-nums lining-nums;
  }
  .page-title { line-height: 1.1; }

  /* ── Sortable tables (H5) ── */
  table th.sortable-th {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 18px;
  }
  table th.sortable-th:hover { color: var(--accent); }
  table th.sortable-th::after {
    content: '↕';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 9px;
    opacity: 0.35;
    color: var(--muted);
  }
  table th.sortable-th.sort-asc::after  { content: '▲'; opacity: 1; color: var(--accent); }
  table th.sortable-th.sort-desc::after { content: '▼'; opacity: 1; color: var(--accent); }

  /* ── Table filter input (H5) ── */
  .tbl-filter-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
  }
  .tbl-filter-wrap input {
    flex: 1;
    max-width: 280px;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 7px 11px;
    font-size: 12px;
    font-family: var(--mono);
    border-radius: 6px;
    outline: none;
  }
  .tbl-filter-wrap input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(220,38,38,0.09);
  }
  .tbl-filter-wrap .count {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--muted);
  }

  /* ── Skeleton shimmer (M1) ── */
  @keyframes skelShimmer {
    0%   { background-position: -220px 0; }
    100% { background-position: 220px 0; }
  }
  .skel {
    display: block;
    border-radius: 6px;
    background: linear-gradient(
      90deg,
      rgba(255,255,255,0.025) 0%,
      rgba(255,255,255,0.07) 50%,
      rgba(255,255,255,0.025) 100%
    );
    background-size: 440px 100%;
    animation: skelShimmer 1.3s ease-in-out infinite;
  }
  .skel-line   { height: 12px; margin: 6px 0; }
  .skel-title  { height: 16px; width: 42%; margin-bottom: 12px; }
  .skel-block  { height: 72px; border-radius: 10px; margin-bottom: 10px; }
  .skel-wrap   { padding: 16px 0; }

  /* ── Empty state v2 (M4) ── */
  .empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 16px;
  }
  .empty::before {
    content: '∅';
    font-family: var(--mono);
    font-size: 26px;
    color: rgba(124,92,101,0.45);
    line-height: 1;
  }

  /* ── Play-card copy button (M2) ── */
  .play-copy-btn {
    position: absolute;
    top: 12px;
    right: 64px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s, border-color 0.15s;
    z-index: 2;
  }
  .play-card:hover .play-copy-btn { opacity: 1; }
  .play-copy-btn:hover { color: var(--accent); border-color: var(--accent); }
  .play-copy-btn.copied { color: var(--green); border-color: rgba(34,197,94,0.5); opacity: 1; }
  @media (max-width: 640px) {
    .play-copy-btn { display: none; } /* no hover on mobile — FAB handles share */
  }

  /* ── Sidebar streak widget (M5) ── */
  .streak-widget {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 10px;
  }
  .streak-widget .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0;
    color: var(--muted);
  }
  .streak-widget .sport-tag {
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  .streak-widget .rec { color: var(--text); }
  .streak-widget .pos { color: var(--green); }
  .streak-widget .neg { color: var(--red); }

  /* ── Sidebar new-badge (M6) ── */
  .nav-new-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 6px rgba(220,38,38,0.6);
    margin-left: auto;
    flex-shrink: 0;
    animation: newPulse 2s ease-in-out infinite;
  }
  @keyframes newPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
  }

  /* ── Sidebar theme button (L4) ── */
  .theme-quick-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 9px;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.12s;
  }
  .theme-quick-btn:hover { border-color: var(--accent); color: var(--accent); }
  .theme-quick-btn .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }

  /* ── Notification bell ── */
  .notif-bell-btn {
    position: relative;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--muted);
    font-size: 16px;
    padding: 5px 10px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .06em;
  }
  .notif-bell-btn:hover { border-color: var(--accent); color: var(--accent); }
  .notif-badge {
    background: var(--red);
    color: #fff;
    border-radius: 8px;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    margin-left: auto;
  }

  /* ── Notification panel ── */
  #notif-panel {
    position: fixed;
    top: 0; bottom: 0;
    right: -360px;
    width: 340px;
    max-width: 92vw;
    background: var(--bg2);
    border-left: 1px solid var(--border);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    transition: right .25s cubic-bezier(.4,0,.2,1);
    box-shadow: -4px 0 24px rgba(0,0,0,.4);
  }
  #notif-panel.open { right: 0; }
  .notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg3);
  }
  .notif-panel-head-title {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    color: var(--text);
  }
  .notif-list { flex: 1; overflow-y: auto; padding: 8px 0; }
  .notif-item {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background .12s;
  }
  .notif-item:hover { background: var(--bg3); }
  .notif-item.unread { border-left: 3px solid var(--accent); }
  .notif-item-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
  .notif-item-body  { font-size: 12px; color: var(--muted); line-height: 1.5; }
  .notif-item-time  { font-size: 10px; color: var(--muted); margin-top: 4px; font-family: var(--mono); }

  /* ── Toast notifications ── */
  #toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 320px;
    pointer-events: none;
  }
  .toast {
    background: var(--bg2);
    border: 1px solid var(--accent);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: 12px 14px;
    box-shadow: 0 4px 20px rgba(0,0,0,.4);
    pointer-events: all;
    animation: toastIn .25s cubic-bezier(.4,0,.2,1);
    cursor: pointer;
  }
  .toast.fade-out { animation: toastOut .3s forwards; }
  .toast-title { font-size: 13px; font-weight: 700; margin-bottom: 3px; color: var(--text); }
  .toast-body  { font-size: 12px; color: var(--muted); line-height: 1.5; }
  @keyframes toastIn  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
  @keyframes toastOut { to   { opacity:0; transform:translateY(8px); } }

  /* ── Notification overlay backdrop ── */
  #notif-overlay {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1199;
  }
  #notif-overlay.open { display: block; }

  /* ── Sparkline (H6) ── */
  .spark {
    width: 100%;
    height: 28px;
    margin-top: 6px;
    display: block;
  }
  .spark-compact { height: 22px; margin-top: 4px; }
  .spark path.line   { fill: none; stroke-width: 1.5; }
  .spark path.area   { stroke: none; opacity: 0.18; }
  .spark circle.dot  { fill: currentColor; }
  .calib-svg {
    width: 100%;
    height: 120px;
    display: block;
  }

  /* ── FAQ accordion (H7) ── */
  .faq-item {
    border-bottom: 1px solid var(--border);
  }
  .faq-item:last-child { border-bottom: none; }
  .faq-q {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    padding: 13px 4px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .faq-q::after {
    content: '+';
    font-family: var(--mono);
    color: var(--accent);
    font-size: 16px;
    transition: transform 0.2s;
    flex-shrink: 0;
  }
  .faq-item.open .faq-q::after { transform: rotate(45deg); }
  .faq-a {
    display: none;
    padding: 0 4px 14px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--muted);
  }
  .faq-item.open .faq-a { display: block; }

  /* ── Who-this-is-for (H7) ── */
  .wfo-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
  }
  .wfo-col {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px;
  }
  .wfo-col h4 {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .wfo-col.good h4 { color: var(--green); }
  .wfo-col.bad  h4 { color: var(--red); }
  .wfo-col ul { list-style: none; padding: 0; margin: 0; }
  .wfo-col li {
    font-size: 12px;
    color: var(--muted);
    padding: 4px 0 4px 18px;
    position: relative;
    line-height: 1.5;
  }
  .wfo-col.good li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--green);
    font-weight: 700;
  }
  .wfo-col.bad li::before {
    content: '×';
    position: absolute;
    left: 0;
    color: var(--red);
    font-weight: 700;
  }
  @media (max-width: 640px) {
    .wfo-grid { grid-template-columns: 1fr; }
  }

  /* ── Email capture (H7) ── */
  .email-capture {
    background: linear-gradient(135deg, rgba(220,38,38,0.08), rgba(244,63,94,0.04));
    border: 1px solid rgba(220,38,38,0.28);
    border-radius: 10px;
    padding: 18px 16px;
    margin-bottom: 20px;
    text-align: center;
  }
  .email-capture h4 {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 6px;
  }
  .email-capture p {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 12px;
    line-height: 1.6;
  }
  .email-capture .row {
    display: flex;
    gap: 8px;
    max-width: 340px;
    margin: 0 auto;
  }
  .email-capture input {
    flex: 1;
    background: var(--bg3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 9px 12px;
    font-size: 13px;
    border-radius: 6px;
    outline: none;
    min-width: 0;
  }
  .email-capture input:focus { border-color: var(--accent); }
  .email-capture button {
    background: linear-gradient(135deg, var(--accent), var(--accent2));
    color: #fff;
    border: none;
    padding: 9px 16px;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
  }
  .email-capture .confirm { color: var(--green); font-size: 12px; margin-top: 8px; display: none; }
  .email-capture.done .row     { display: none; }
  .email-capture.done .confirm { display: block; }

  /* ── Sample pick on landing (H2) ── */
  .sample-pick {
    background: linear-gradient(162deg, rgba(26,17,33,0.97) 0%, rgba(13,9,19,0.99) 100%);
    border: 1px solid rgba(34,197,94,0.26);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 18px;
    position: relative;
    overflow: hidden;
  }
  .sample-pick::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--green), var(--accent));
  }
  .sample-pick .tag {
    display: inline-block;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--green);
    background: rgba(34,197,94,0.08);
    border: 1px solid rgba(34,197,94,0.3);
    padding: 2px 8px;
    border-radius: 3px;
    margin-bottom: 8px;
    text-transform: uppercase;
  }
  .live-dot { display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin-right:5px;animation:livePulse 1.4s ease-in-out infinite; }
  @keyframes livePulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(0.7)} }
  .live-badge { display:inline-flex;align-items:center;font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.12em;color:var(--green);background:rgba(34,197,94,0.1);border:1px solid rgba(34,197,94,0.3);padding:2px 8px;border-radius:3px;text-transform:uppercase; }
  .sample-pick .head { font-size: 12px; color: var(--muted); margin-bottom: 4px; font-family: var(--mono); }
  .sample-pick .line { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
  .sample-pick .stats { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 11px; color: var(--muted); }
  .sample-pick .stats strong { color: var(--text); font-family: var(--mono); }
  .sample-pick .res-line { margin-top: 8px; font-size: 11px; color: var(--muted); font-family: var(--mono); }

  /* ── Methodology deep-dive (H4 / About) ── */
  .method-meta {
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 14px;
  }
  .method-meta .row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.04);
    font-size: 12px;
  }
  .method-meta .row:last-child { border-bottom: none; }
  .method-meta .lbl { color: var(--muted); font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
  .method-meta .val { color: var(--text); font-family: var(--mono); font-weight: 700; text-align: right; }

  /* ── Keyboard shortcut modal (L3) ── */
  #kbd-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9500;
    background: rgba(9,6,10,0.88);
    backdrop-filter: blur(6px);
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  #kbd-modal.open { display: flex; }
  #kbd-modal .box {
    background: var(--bg2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
    width: 440px;
    max-width: 100%;
    box-shadow: 0 20px 70px rgba(0,0,0,0.7);
  }
  #kbd-modal h3 {
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 14px;
  }
  #kbd-modal .kbd-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    color: var(--muted);
  }
  #kbd-modal .kbd-row:last-child { border-bottom: none; }
  kbd {
    display: inline-block;
    padding: 2px 7px;
    background: var(--bg3);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text);
    font-weight: 700;
    margin: 0 2px;
  }

  /* ── Count-up animation (L1) ── */
  .countup-ready { opacity: 0.001; }
  @keyframes countupIn { to { opacity: 1; } }
  .countup-done { animation: countupIn 0.25s ease forwards; }

  /* ── Accessibility focus (L5) ── */
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  select:focus-visible,
  .nav-item:focus-visible,
  .faq-q:focus-visible,
  .sport-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* ── Mobile sticky slip handle (M8) ── */
  @media (max-width: 640px) {
    #slip-widget.minimized #slip-toggle {
      width: auto;
      min-width: 140px;
      height: 44px;
      border-radius: 22px;
      padding: 0 16px;
      font-size: 13px;
      gap: 6px;
    }
    #slip-widget.minimized #slip-toggle-label {
      display: inline;
      font-family: var(--mono);
      font-size: 11px;
      color: var(--muted);
    }
  }

  /* ── Sidebar footer: theme chip row (L4) ── */
  .sidebar-footer .theme-row {
    display: flex;
    gap: 6px;
    margin-top: 8px;
  }

  /* ══════════════════════════════════════════════════════════════
     HOLY SHIT TIER — command palette, POTD hero, arc gauge,
     win confetti, win flash
  ══════════════════════════════════════════════════════════════ */

  /* ── ⌘K Command Palette ── */
  #cmd-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,.68); backdrop-filter: blur(16px) saturate(1.4);
    display: none; align-items: flex-start; justify-content: center; padding-top: 13vh;
  }
  #cmd-overlay.open { display: flex; }
  #cmd-modal {
    width: 580px; max-width: calc(100vw - 32px);
    background: rgba(9,7,16,.98); border: 1px solid rgba(255,255,255,.13);
    border-radius: 18px;
    box-shadow: 0 40px 100px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04);
    overflow: hidden;
    animation: cmdSlideIn .17s cubic-bezier(.22,.68,0,1.2) forwards;
  }
  @keyframes cmdSlideIn {
    from { opacity:0; transform:scale(.95) translateY(-10px); }
    to   { opacity:1; transform:none; }
  }
  #cmd-input-wrap {
    display: flex; align-items: center; padding: 0 18px; gap: 12px;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }
  #cmd-search {
    flex: 1; background: none; border: none; outline: none;
    color: #fff; font-size: 15px; font-family: var(--sans);
    padding: 19px 0; caret-color: #a78bfa;
  }
  #cmd-search::placeholder { color: rgba(255,255,255,.25); }
  #cmd-results { max-height: 340px; overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent; }
  .cmd-section-label {
    font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
    color: rgba(255,255,255,.28); padding: 8px 10px 3px; text-transform: uppercase;
  }
  .cmd-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: 10px; cursor: pointer;
    font-size: 13px; color: #fff; transition: background .07s;
  }
  .cmd-item.cmd-sel { background: rgba(255,255,255,.09); outline: 1px solid rgba(255,255,255,.11); }
  .cmd-item-icon {
    width: 30px; height: 30px; border-radius: 8px;
    background: rgba(255,255,255,.07); display: flex; align-items: center;
    justify-content: center; font-size: 15px; flex-shrink: 0;
  }
  .cmd-item-label { flex: 1; font-weight: 500; }
  .cmd-item-hint { font-size: 10px; color: rgba(255,255,255,.28); font-family: var(--mono); }
  .cmd-footer {
    padding: 9px 18px; border-top: 1px solid rgba(255,255,255,.06);
    display: flex; gap: 18px;
  }
  .cmd-key {
    font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.3);
    display: flex; gap: 5px; align-items: center;
  }
  .cmd-key kbd {
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px; padding: 1px 6px; font-size: 9px; color: rgba(255,255,255,.45);
  }

  /* ── SVG Arc Gauge ── */
  @keyframes confArcIn { from { stroke-dashoffset: 100; } }

  /* ── Pick of the Day Hero ── */
  .potd-hero {
    position: relative; border-radius: 16px; overflow: hidden;
    margin-bottom: 20px; padding: 28px 28px 24px;
    background: linear-gradient(135deg, rgba(13,10,21,.99) 0%, rgba(20,13,35,.99) 100%);
    border: 1px solid rgba(251,191,36,.22);
    box-shadow: 0 0 70px rgba(251,191,36,.07), inset 0 0 80px rgba(0,0,0,.3);
  }
  .potd-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse at 20% 50%, rgba(251,191,36,.055) 0%, transparent 60%);
  }
  .potd-eyebrow {
    font-family: var(--mono); font-size: 9px; letter-spacing: .22em; color: #f59e0b;
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px; text-transform: uppercase;
  }
  .potd-eyebrow::before {
    content: ''; width: 7px; height: 7px; border-radius: 50%;
    background: #f59e0b; box-shadow: 0 0 10px #f59e0b; flex-shrink: 0;
    animation: potdPulse 2s ease-in-out infinite;
  }
  @keyframes potdPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(1.6)} }
  .potd-matchup { font-size: 21px; font-weight: 800; letter-spacing: -.025em; color: #fff; margin-bottom: 5px; }
  .potd-pick { font-family: var(--mono); font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 22px; letter-spacing: .06em; text-transform: uppercase; }
  .potd-stats { display: flex; gap: 28px; flex-wrap: wrap; align-items: flex-end; }
  .potd-stat { display: flex; flex-direction: column; gap: 3px; }
  .potd-stat-val { font-family: var(--mono); font-size: 28px; font-weight: 800; line-height: 1; }
  .potd-stat-lbl { font-family: var(--mono); font-size: 8px; letter-spacing: .16em; color: rgba(255,255,255,.32); text-transform: uppercase; }
  .potd-actions {
    position: absolute; top: 24px; right: 24px;
    display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end;
  }
  .potd-btn {
    padding: 8px 16px; border-radius: 8px; font-size: 11px; font-weight: 700;
    cursor: pointer; border: none; font-family: var(--mono); letter-spacing: .05em;
    transition: opacity .14s, transform .1s;
  }
  .potd-btn:hover { opacity: .82; transform: translateY(-1px); }
  .potd-btn.primary { background: #f59e0b; color: #000; }
  .potd-btn.secondary { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.15); }

  /* ── WIN Confetti ── */
  @keyframes cFall {
    0%   { transform: translateY(0) rotate(0deg) scaleX(1); opacity: 1; }
    85%  { opacity: 1; }
    100% { transform: translateY(108vh) rotate(580deg) scaleX(.55); opacity: 0; }
  }
  @keyframes cSway { 0%,100%{margin-left:0} 33%{margin-left:28px} 66%{margin-left:-20px} }
  .confetti-piece {
    position: fixed; width: 9px; height: 14px; border-radius: 2px;
    z-index: 9999; pointer-events: none;
    animation: cFall var(--cd,2s) ease-in var(--cdl,0s) forwards,
               cSway var(--cd,2s) ease-in-out var(--cdl,0s) infinite;
  }

  /* ── WIN Flash ── */
  @keyframes wfIn  { 0%{opacity:0;transform:scale(.4)} 60%{opacity:1;transform:scale(1.06)} 100%{transform:scale(1)} }
  @keyframes wfOut { to{opacity:0;transform:scale(1.3)} }
  #win-flash {
    position: fixed; inset: 0; z-index: 9998; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
  }
  .wf-inner {
    background: linear-gradient(135deg,#064e3b,#065f46);
    border-radius: 24px; padding: 40px 56px; text-align: center;
    box-shadow: 0 0 120px rgba(5,150,105,.55), 0 20px 60px rgba(0,0,0,.65);
    animation: wfIn .5s cubic-bezier(.34,1.56,.64,1) forwards;
  }
  .wf-letter { font-size: 72px; font-weight: 900; color: #fff; line-height: 1; text-shadow: 0 0 40px rgba(255,255,255,.35); }
  .wf-label  { font-family: var(--mono); font-size: 11px; letter-spacing: .28em; color: rgba(255,255,255,.6); margin-top: 8px; }

  /* ══════════════════════════════════════════════════════════
     WAR ROOM — Command Center (all rules additive)
  ══════════════════════════════════════════════════════════ */

  /* ── Play card hover lift (no hover existed before) ── */
  .play-card { transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease; }
  .play-card:hover { transform: translateY(-2px); box-shadow: 0 10px 44px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.05); }

  /* ── Signal strip ── */
  .wr-signal {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    background: linear-gradient(135deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
    border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 20px; margin-bottom: 20px;
  }
  .wr-signal-dot {
    width: 8px; height: 8px; border-radius: 50%; background: var(--green); flex-shrink: 0;
    animation: livePulse 1.8s ease-in-out infinite;
  }
  .wr-signal-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
  .wr-signal-count { font-family: var(--mono); font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -.03em; line-height: 1; }
  .wr-sport-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 20px; font-family: var(--mono);
    font-size: 11px; font-weight: 700; border: 1px solid var(--border);
    background: var(--bg3); color: var(--muted); white-space: nowrap; cursor: pointer;
    transition: all 0.15s;
  }
  .wr-sport-pill.active { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.1); color: var(--green); }
  .wr-sport-pill .wr-ct { background: var(--green); color: #000; border-radius: 9px; padding: 1px 6px; font-size: 9px; font-weight: 800; }
  .wr-sport-pill.empty  { opacity: 0.45; }

  /* ── Column grid ── */
  .wr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 16px; align-items: start;
  }
  .wr-col { background: var(--bg2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
  .wr-col-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: var(--bg3); border-bottom: 1px solid var(--border);
  }
  .wr-col-title { font-family: var(--mono); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
  .wr-col-rec   { font-family: var(--mono); font-size: 11px; color: var(--muted); }

  /* ── Play row ── */
  .wr-play {
    display: flex; flex-direction: column; gap: 7px;
    padding: 14px 16px; border-bottom: 1px solid rgba(255,255,255,.04);
    cursor: pointer; transition: background 0.12s;
  }
  .wr-play:last-child { border-bottom: none; }
  .wr-play:hover { background: rgba(255,255,255,.025); }
  .wr-play-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .wr-pick    { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text); }
  .wr-matchup { font-size: 11px; color: var(--muted); margin-top: 2px; }
  .wr-edge-wrap { flex-shrink: 0; text-align: right; }
  .wr-edge-num  { font-family: var(--mono); font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
  .wr-edge-lbl  { font-family: var(--mono); font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
  .wr-bar { height: 3px; border-radius: 2px; background: var(--bg3); overflow: hidden; margin-top: 2px; }
  .wr-bar-fill { height: 100%; border-radius: 2px; transition: width 0.9s cubic-bezier(.22,.68,0,1.06); }
  .wr-meta { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: var(--muted); font-family: var(--mono); }
  .wr-empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 12px; font-family: var(--mono); }
  .wr-nav-btn {
    background: none; border: none; color: var(--accent); font-family: var(--mono);
    font-size: 10px; font-weight: 700; letter-spacing: .08em; cursor: pointer;
    padding: 4px 8px; border-radius: 4px; transition: background 0.12s;
  }
  .wr-nav-btn:hover { background: rgba(220,38,38,.1); }

  /* ══════════════════════════════════════════════════════════════
     BETTOR-FACING DESIGN LAYER
     Pure CSS overrides — no layout, logic, or JS changes.
     To revert: remove this block.
  ══════════════════════════════════════════════════════════════ */

  /* ── Sans-serif for all UI chrome (mono stays for numbers only) ── */
  .card-title, .nav-label, .sidebar-logo .brand, .sidebar-logo .sub,
  .refresh-btn, .logout-btn, .sport-btn, .badge,
  .stat-tile .label, .play-stat, .play-matchup {
    font-family: var(--sans);
  }

  /* ── Sidebar brand: product name, not a widget label ── */
  .sidebar-logo .brand {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-transform: none;
  }

  /* ── Card labels: less ALL-CAPS terminal ── */
  .card-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
  }

  /* ── Sport switcher: readable ── */
  .sport-btn {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 7px 0;
  }

  /* ── THE BET is the headline — make it feel like one ── */
  .play-bet {
    font-family: var(--sans);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 10px;
  }

  /* ── Matchup is context, not the headline ── */
  .play-matchup {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
    margin-bottom: 10px;
  }

  /* ── Pick card: premium depth + more breathing room ── */
  @media (min-width: 641px) {
    .play-card {
      padding: 22px 22px 18px;
      border-radius: 14px;
    }
    .play-card::before { height: 3px; }
  }

  /* ── STRONG picks: thicker left accent, visible glow ── */
  .play-card[data-grade="STRONG"],
  .play-card[data-conf="HIGH"] {
    border-left: 3px solid rgba(251,191,36,0.7);
    box-shadow: 0 4px 32px rgba(0,0,0,0.45), -2px 0 18px rgba(251,191,36,0.08);
  }

  /* ── Stat labels: not clinical ── */
  .stat-tile .label {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
  }

  /* ── Badges: rounder, friendlier ── */
  .badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 3px 10px;
    border-radius: 6px;
  }

  /* ── Nav section labels ── */
  .nav-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
  }

  /* ── Tail or Fade / Lock of the Day ─────────────────────────────────────── */
  .cv-row{display:flex;gap:6px;align-items:center;margin-top:10px;padding-top:10px;border-top:1px solid var(--border);flex-wrap:wrap}
  .cv-btn{padding:4px 13px;border-radius:20px;border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-size:11px;font-weight:700;letter-spacing:.04em;transition:all .15s;white-space:nowrap}
  .cv-btn:hover{border-color:var(--accent);color:var(--text)}
  .cv-tail.cv-active{background:rgba(59,130,246,.15);border-color:#3b82f6;color:#60a5fa}
  .cv-fade.cv-active{background:rgba(239,68,68,.15);border-color:#ef4444;color:#f87171}
  .cv-lock.cv-locked{background:rgba(234,179,8,.15);border-color:#eab308;color:#fbbf24}
  .best-bet-badge{display:inline-block;background:linear-gradient(135deg,#f59e0b,#d97706);color:#000;padding:2px 9px;border-radius:4px;font-size:10px;font-weight:800;letter-spacing:.06em;vertical-align:middle}
  .dash-view-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:8px;border:1px solid var(--accent);background:rgba(0,212,170,.08);color:var(--accent);font-size:13px;font-weight:700;cursor:pointer;letter-spacing:.03em;transition:all .15s}
  .dash-view-btn:hover{background:rgba(0,212,170,.18)}
  .cv-total{font-size:10px;color:var(--muted)}
  .lock-page-card{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:12px}
  .lock-history-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
  .lock-result-w{color:var(--green);font-weight:700}
  .lock-result-l{color:var(--red);font-weight:700}
  .lock-result-p{color:var(--muted);font-style:italic}