:root {
    --bg: #07070f; --bg2: #0c0c1a; --card: rgba(16,16,40,0.6);
    --border: rgba(255,255,255,0.05); --border-hover: rgba(255,255,255,0.12);
    --gold: #f0b90b; --gold2: #e8a400; --gold3: #fcd34d;
    --accent: #dc2626; --accent2: #ef4444; --accent-glow: rgba(220,38,38,0.25);
    --green: #10b981; --green2: #34d399;
    --cyan: #06b6d4; --cyan2: #22d3ee;
    --purple: #8b5cf6;
    --text: #f1f5f9; --text2: #94a3b8; --text3: #64748b;
    --radius: 14px;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
    font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text);
    min-height: 100vh; overflow-x: hidden;
  }

  /* ─── Animated Background ─── */
  canvas#particle-canvas {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    width: 100vw; height: 100vh;
  }

  .bg-orbs {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    overflow: hidden;
  }
  .bg-orbs .orb {
    position: absolute; border-radius: 50%; filter: blur(80px);
    animation: orbFloat 25s ease-in-out infinite;
    mix-blend-mode: screen;
  }
  .bg-orbs .orb:nth-child(1) {
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(220,38,38,0.35) 0%, rgba(220,38,38,0.1) 50%, transparent 100%);
    top: -15%; left: -10%; animation-delay: 0s;
  }
  .bg-orbs .orb:nth-child(2) {
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(240,185,11,0.25) 0%, rgba(240,185,11,0.08) 50%, transparent 100%);
    bottom: -15%; right: -10%; animation-delay: -8s;
  }
  .bg-orbs .orb:nth-child(3) {
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(6,182,212,0.2) 0%, rgba(6,182,212,0.06) 50%, transparent 100%);
    top: 45%; left: 55%; animation-delay: -16s;
  }
  @keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(80px, -100px) scale(1.15); }
    50% { transform: translate(-60px, 80px) scale(0.85); }
    75% { transform: translate(40px, 60px) scale(1.05); }
  }

  /* grid overlay */
  .bg-grid {
    position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image:
      linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
  }

  .container { max-width: 1120px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
  /* The prediction card carries 17 columns (1100px of columns + 24px padding).
     The standard 1120px container leaves only 1072px, which forced a horizontal
     scroll. Let any container holding a card run wider so the whole table fits. */
  .container:has(.sop-card) { max-width: 1240px; }

  /* ─── Scroll Reveal ─── */
  .reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
  .reveal.visible { opacity: 1; transform: translateY(0); }

  /* ─── NAV ─── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    padding: 16px 24px; display: flex; justify-content: space-between; align-items: center;
    background: rgba(7,7,15,0.6); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border);
    transition: all 0.3s;
  }
  nav.scrolled { background: rgba(7,7,15,0.9); box-shadow: 0 4px 30px rgba(0,0,0,0.3); }
  .nav-logo { font-size: 15px; font-weight: 800; letter-spacing: .2px; color: var(--accent2); }
  /* two-colour brand kept, but as ONE word (Boss, 2026-09-26): tight spacing, no space, mixed case */
  .nav-logo span { color: var(--text); }
  .nav-links { display: flex; gap: 28px; align-items: center; }
  .nav-links a { color: var(--text2); text-decoration: none; font-size: 13px; font-weight: 500; transition: color 0.2s; }
  .nav-links a:hover { color: var(--text); }

  /* ─── CURRENCY TOGGLE (Boss, 2026-10-01): SGD (Singapore Pools) / HKD (the official source) ─── */
  .cur-toggle { display: inline-flex; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.04); }
  .cur-toggle button { appearance: none; border: 0; background: transparent; color: var(--text2); font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; padding: 5px 11px; cursor: pointer; }
  .cur-toggle button:hover { color: var(--text); }
  .cur-toggle button.on { background: var(--gold); color: #10131a; }
  /* Weight separator header group (Boss, 2026-10-01): when the master switch is OFF the
     break buttons read dimmed — they cannot do anything while the line is suppressed. */
  .cur-toggle.sep-off button[data-sepb] { opacity: 0.45; }
  /* ── Condition-win column display menu (Boss, 2026-10-03) ──
     A per-column menu for CLS / DST / CRS / LOC WIN: enable/disable, bold, italic, colour, size.
     Styling/visibility only — the card's columns and their order never change. The rules are
     injected at runtime as #mk-condwin (shared with the app) so this stylesheet only carries the
     menu chrome. */
  .cw-panel { position: fixed; top: 64px; right: 12px; z-index: 1200;
    width: min(430px, calc(100vw - 24px)); max-height: min(72vh, 580px); overflow: auto;
    background: #10131a; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0,0,0,0.55); padding: 14px 14px 12px; }
  .cw-panel[hidden] { display: none; }
  .cw-phead { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
  .cw-psub { font-size: 11px; color: var(--text3); line-height: 1.45; margin: 3px 0 10px; }
  .cw-row { border-top: 1px solid rgba(255,255,255,0.06); padding: 9px 0 5px; }
  .cw-row:first-child { border-top: 0; }
  .cw-lab { font-size: 12.5px; font-weight: 700; color: var(--text); }
  .cw-labsub { display: block; font-size: 10.5px; font-weight: 400; color: var(--text3); margin-top: 1px; }
  /* Boss 2026-10-03: the size buttons must sit on the SAME line as the colour swatches, AFTER
     them — one continuous control line. nowrap keeps the row single-line; overflow-x lets a
     narrow window scroll the controls rather than wrapping them. */
  .cw-ctrls { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 7px; margin-top: 8px; overflow-x: auto; }
  .cw-ctrls button { appearance: none; font: inherit; cursor: pointer; flex: 0 0 auto; }
  .cw-on { border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04); color: var(--text2);
    border-radius: 999px; font-size: 11px; font-weight: 700; padding: 3px 12px; }
  .cw-on.on { background: var(--gold); color: #10131a; border-color: var(--gold); }
  .cw-b { width: 30px; height: 26px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.04); color: var(--text2); font-size: 12px; }
  .cw-b.on { background: var(--gold); color: #10131a; border-color: var(--gold); }
  .cw-swset, .cw-sizeset { display: inline-flex; gap: 4px; align-items: center; flex: 0 0 auto; }
  .cw-sw { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); padding: 0; background: transparent; }
  .cw-sw[data-cwhex=""] { background: linear-gradient(135deg, transparent 44%, #ff6b6b 44%, #ff6b6b 56%, transparent 56%); }
  .cw-sw.on { outline: 2px solid var(--gold); outline-offset: 1px; }
  .cw-sizeset button { min-width: 26px; height: 26px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.04); color: var(--text2); font-size: 11px; font-weight: 700; }
  .cw-sizeset button.on { background: var(--gold); color: #10131a; border-color: var(--gold); }
  .cur-missing { color: var(--text3); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; }
  .res-div-head { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent2); margin-bottom: 4px; }
  .res-div-none { font-size: 12px; color: var(--text3); font-style: italic; }

  /* ─── HERO ─── */
  .hero {
    min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
    padding: 100px 0 60px; text-align: center;
  }
  .hero-tag {
    display: inline-block; padding: 6px 18px; border-radius: 100px;
    font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
    border: 1px solid var(--accent); color: var(--accent2); margin-bottom: 20px;
    background: rgba(220,38,38,0.08);
  }
  .hero h1 {
    font-size: 64px; font-weight: 900; letter-spacing: -2px; line-height: 1.1;
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold3) 30%, var(--accent2) 70%, var(--cyan) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    margin-bottom: 16px; max-width: 900px; margin-inline: auto;
  }
  .hero p {
    font-size: 18px; color: var(--text2); max-width: 680px; margin: 0 auto 32px;
    line-height: 1.7;
  }
  .hero-badges { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 40px; }
  .hero-badge {
    padding: 8px 20px; border-radius: 100px; font-size: 12px; font-weight: 600;
    border: 1px solid var(--border); background: var(--card);
    backdrop-filter: blur(12px); transition: all 0.3s;
  }
  .hero-badge:hover { transform: translateY(-2px); border-color: var(--gold); }
  .hero-badge.gold { border-color: var(--gold); color: var(--gold); }
  .hero-badge.green { border-color: var(--green); color: var(--green); }
  .hero-badge.cyan { border-color: var(--cyan); color: var(--cyan); }
  .hero-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 36px; border-radius: 100px; font-size: 15px; font-weight: 600;
    background: linear-gradient(135deg, var(--accent), #b91c1c);
    color: white; border: none; cursor: pointer; text-decoration: none;
    transition: all 0.3s; box-shadow: 0 4px 24px var(--accent-glow);
  }
  .hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 40px var(--accent-glow); }
  .hero-cta-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: 100px; font-size: 14px; font-weight: 500;
    background: var(--card); color: var(--text2); border: 1px solid var(--border); cursor: pointer;
    text-decoration: none; transition: all 0.3s;
  }
  .hero-cta-secondary:hover { border-color: var(--text2); color: var(--text); }

  /* ─── Stats Bar ─── */
  .stats-bar {
    display: flex; gap: 12px; flex-wrap: wrap; margin-top: 60px;
    justify-content: center;
  }
  .stat-pill {
    padding: 12px 24px; border-radius: var(--radius);
    background: var(--card); border: 1px solid var(--border);
    backdrop-filter: blur(12px); text-align: center; min-width: 130px;
    transition: all 0.3s;
  }
  .stat-pill:hover { border-color: var(--gold); transform: translateY(-2px); }
  .stat-pill .num { font-size: 22px; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
  .stat-pill .num.gold { color: var(--gold); }
  .stat-pill .num.green { color: var(--green); }
  .stat-pill .num.red { color: var(--accent2); }
  .stat-pill .num.cyan { color: var(--cyan); }
  .stat-pill .label { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 1.5px; margin-top: 4px; }

  /* ─── Section ─── */
  section { padding: 80px 0; }
  .section-tag {
    display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--accent2); margin-bottom: 8px;
  }
  .section-title {
    font-size: 38px; font-weight: 800; letter-spacing: -1px; line-height: 1.2;
    margin-bottom: 12px;
  }
  .section-title .gold { background: linear-gradient(135deg, var(--gold), var(--gold3)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
  .section-title .cyan { background: linear-gradient(135deg, var(--cyan), var(--cyan2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
  .section-sub { font-size: 16px; color: var(--text2); max-width: 600px; line-height: 1.7; }

  /* ─── How It Works ─── */
  .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
  .step-card {
    padding: 32px; border-radius: var(--radius); background: var(--card);
    border: 1px solid var(--border); backdrop-filter: blur(12px);
    transition: all 0.4s; text-align: center;
  }
  .step-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 12px 48px rgba(240,185,11,0.06); }
  .step-num {
    width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800; margin: 0 auto 16px;
    background: linear-gradient(135deg, var(--accent), #b91c1c); color: white;
  }
  .step-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
  .step-card p { font-size: 13px; color: var(--text2); line-height: 1.7; }

  /* ─── Features ─── */
  .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 48px; }
  .feature-card {
    padding: 28px; border-radius: var(--radius); background: var(--card);
    border: 1px solid var(--border); backdrop-filter: blur(12px);
    transition: all 0.3s;
  }
  .feature-card:hover { border-color: var(--border-hover); transform: translateY(-3px); }
  .feature-card .icon { font-size: 28px; margin-bottom: 12px; }
  .feature-card h4 { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
  .feature-card p { font-size: 13px; color: var(--text2); line-height: 1.6; }

  /* ─── Model Details ─── */
  .model-showcase {
    display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 48px;
    align-items: center;
  }
  .model-left h2 { font-size: 36px; font-weight: 800; letter-spacing: -1px; margin-bottom: 16px; }
  .model-left p { color: var(--text2); line-height: 1.7; margin-bottom: 20px; font-size: 15px; }
  .model-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .model-stat {
    padding: 16px; border-radius: 10px; background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
  }
  .model-stat .val { font-size: 20px; font-weight: 700; font-family: 'JetBrains Mono', monospace; }
  .model-stat .val.gold { color: var(--gold); }
  .model-stat .val.green { color: var(--green); }
  .model-stat .val.cyan { color: var(--cyan); }
  .model-stat .lbl { font-size: 11px; color: var(--text3); margin-top: 2px; }
  .model-right {
    padding: 32px; border-radius: var(--radius); background: var(--card);
    border: 1px solid var(--border); backdrop-filter: blur(12px);
  }
  .model-right h4 { font-size: 14px; font-weight: 600; margin-bottom: 16px; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; }
  .arch-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .arch-item:last-child { border-bottom: none; }
  .arch-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .arch-dot.red { background: var(--accent2); }
  .arch-dot.gold { background: var(--gold); }
  .arch-dot.green { background: var(--green); }
  .arch-dot.cyan { background: var(--cyan); }
  .arch-dot.purple { background: var(--purple); }
  .arch-item .name { font-size: 13px; font-weight: 500; }
  .arch-item .desc { font-size: 12px; color: var(--text3); }

  /* ─── Live Predictions ─── */
  .race-grid { display: grid; gap: 12px; margin-top: 32px; }
  .race-card {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
    backdrop-filter: blur(12px); transition: all 0.3s; cursor: pointer;
  }
  .race-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(220,38,38,0.08); }
  .race-header {
    padding: 14px 20px; display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid var(--border);
  }
  .race-header-left { display: flex; align-items: center; gap: 12px; }
  .race-num {
    width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), #b91c1c);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; color: white;
  }
  .race-name { font-weight: 600; font-size: 15px; }
  .race-info { color: var(--text2); font-size: 12px; }
  .top-tip { font-size: 11px; color: var(--gold); }
  .chevron { color: var(--text3); transition: transform 0.4s; font-size: 12px; }
  .race-card.open .chevron { transform: rotate(180deg); }
  .horse-list { max-height: 0; overflow: hidden; transition: max-height 0.45s ease, opacity 0.3s ease; opacity: 0; }
  .race-card.open .horse-list { max-height: 3000px; opacity: 1; }

  .horse-row {
    display: grid;     grid-template-columns: 24px 1fr 34px 74px 58px 56px 78px 78px 46px;
    padding: 10px 20px; border-bottom: 1px solid rgba(255,255,255,0.03);
    align-items: center; font-size: 13px; transition: background 0.2s;
  }
  .horse-row:hover { background: rgba(220,38,38,0.04); }
  .horse-row:last-child { border-bottom: none; }
  .horse-row.th {
    font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px;
    font-weight: 600; padding: 8px 20px; border-bottom: 1px solid var(--border);
    grid-template-columns: 24px 1fr 34px 74px 58px 56px 78px 78px 46px;
  }
  .horse-row.th span { display: block; text-align: center; }
  .horse-row > span { text-align: center; }
  .horse-row > span:nth-child(2) { text-align: left; }
  .horse-jockey { font-size: 10px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .horse-trainer { font-size: 10px; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .form-pos { display: inline-block; width: 14px; height: 14px; line-height: 14px; text-align: center; border-radius: 3px; font-size: 9px; font-weight: 600; margin: 0 1px; }
  .form-pos.win { background: rgba(16,185,129,0.15); color: var(--green); }
  .form-pos.place { background: rgba(240,185,11,0.12); color: var(--gold); }
  .form-pos.show { background: rgba(148,163,184,0.08); color: var(--text2); }
  .form-pos.miss { background: rgba(239,68,68,0.08); color: var(--accent2); }
  .horse-age { font-size: 11px; color: var(--text3); font-family: 'JetBrains Mono', monospace; }
  .horse-age-cell { text-align: center; }
  .uncerty-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-left: 4px; flex-shrink: 0; }
  .uncerty-dot.low { background: var(--green); }
  .uncerty-dot.mid { background: var(--gold); }
  .uncerty-dot.high { background: var(--accent2); }
  .horse-rank { font-weight: 700; color: var(--gold); font-family: 'JetBrains Mono', monospace; }
  .horse-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .horse-prob { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
  .horse-prob.high { color: var(--green); }
  .horse-prob.mid { color: var(--gold); }
  .horse-prob.low { color: var(--text2); }
  .edge { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 12px; }
  .edge.pos { color: var(--green); }
  .edge.neg { color: var(--red); }
  .top-pick { background: linear-gradient(90deg, rgba(240,185,11,0.06) 0%, transparent 60%); }
  .rank-1 { background: linear-gradient(90deg, rgba(240,185,11,0.08) 0%, rgba(240,185,11,0.02) 60%, transparent 100%); }
  .rank-2 { background: linear-gradient(90deg, rgba(148,163,184,0.04) 0%, transparent 60%); }
  .rank-3 { background: linear-gradient(90deg, rgba(205,92,92,0.03) 0%, transparent 60%); }

  .horse-prob-bar {
    display: inline-flex; align-items: center; gap: 6px;
  }
  .horse-prob-bar { gap: 4px; }
  .horse-prob-bar .bar {
    width: 32px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.06);
    overflow: hidden; flex-shrink: 0;
  }
  .horse-prob-bar { gap: 6px; }
  .horse-prob-bar .bar .fill {
    height: 100%; border-radius: 2px; transition: width 0.6s ease;
  }
  .horse-prob-bar .bar .fill.high { background: linear-gradient(90deg, var(--green), var(--green2)); }
  .horse-prob-bar .bar .fill.mid { background: linear-gradient(90deg, var(--gold), var(--gold3)); }
  .horse-prob-bar .bar .fill.low { background: linear-gradient(90deg, var(--text3), var(--text2)); }

  .best-bet-card {
    padding: 20px 24px; border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(240,185,11,0.08), rgba(220,38,38,0.04));
    border: 1px solid rgba(240,185,11,0.2);
    backdrop-filter: blur(12px); margin: 20px 0; display: flex;
    justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
    transition: all 0.3s;
  }
  .best-bet-card:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(240,185,11,0.06); }
  .best-bet-label {
    font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: var(--gold); margin-bottom: 4px;
  }
  .best-bet-name { font-size: 20px; font-weight: 800; color: var(--text); }
  .best-bet-meta { font-size: 12px; color: var(--text2); }
  .best-bet-right { text-align: right; }
  .best-bet-prob { font-size: 28px; font-weight: 800; font-family: 'JetBrains Mono', monospace; color: var(--green); }
  .best-bet-edge { font-size: 14px; font-weight: 600; color: var(--gold); }

  /* ─── AI Analysis ─── */
  .analysis-grid { display: grid; gap: 14px; margin-top: 32px; }
  .analysis-card {
    padding: 20px; border-radius: var(--radius); background: var(--card);
    border: 1px solid var(--border); backdrop-filter: blur(12px);
    border-left: 3px solid var(--accent); transition: all 0.3s;
  }
  .analysis-card:hover { border-color: var(--border-hover); transform: translateX(3px); }
  .analysis-card.one_sided { border-left-color: var(--green); }
  .analysis-card.competitive { border-left-color: var(--gold); }
  .analysis-card.open { border-left-color: var(--cyan); }
  .analysis-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .analysis-race { font-weight: 700; font-size: 15px; }
  .analysis-badge {
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
    padding: 3px 10px; border-radius: 100px;
  }
  .analysis-badge.one_sided { background: rgba(16,185,129,0.1); color: var(--green); border: 1px solid rgba(16,185,129,0.2); }
  .analysis-badge.competitive { background: rgba(240,185,11,0.1); color: var(--gold); border: 1px solid rgba(240,185,11,0.2); }
  .analysis-badge.open { background: rgba(6,182,212,0.1); color: var(--cyan); border: 1px solid rgba(6,182,212,0.2); }
  .analysis-summary { font-size: 14px; color: var(--text2); line-height: 1.7; margin-bottom: 8px; }
  .analysis-rationale { font-size: 13px; color: var(--text); line-height: 1.6; padding: 10px 14px; border-radius: 8px; background: rgba(255,255,255,0.02); border: 1px solid var(--border); margin-bottom: 8px; }
  .analysis-rationale strong { color: var(--gold); }
  .analysis-value { font-size: 13px; color: var(--green); line-height: 1.6; padding: 8px 14px; border-radius: 8px; background: rgba(16,185,129,0.04); border: 1px solid rgba(16,185,129,0.1); }

  /* ─── Per-Race Key Picks ─── */
  .race-picks-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 16px; background: rgba(255,255,255,0.01); border-bottom: 1px solid var(--border); }
  .race-pick-col .col-label { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); margin-bottom: 4px; }
  .race-pick-col .col-label.gold { color: var(--gold); }
  .race-pick-col .col-label.green { color: var(--green); }
  .race-pick-col .col-label.cyan { color: var(--cyan); }
  .race-pick-entry { font-size: 11px; color: var(--text2); line-height: 1.6; }
  .race-pick-entry strong { color: var(--text); font-weight: 600; }
  .race-pick-entry .val { font-family: 'JetBrains Mono', monospace; font-size: 10px; }
  .race-pick-entry .val.gold { color: var(--gold); }
  .race-pick-entry .val.green { color: var(--green); }
  .race-pick-entry .val.cyan { color: var(--cyan); }

  /* ─── Key Picks Summary ─── */
  .key-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 20px 0; }
  .key-pick-card {
    padding: 16px 20px; border-radius: var(--radius); background: var(--card);
    border: 1px solid var(--border); backdrop-filter: blur(12px);
    transition: all 0.3s;
  }
  .key-pick-card:hover { transform: translateY(-2px); }
  .key-pick-card.gold:hover { border-color: var(--gold); }
  .key-pick-card.green:hover { border-color: var(--green); }
  .key-pick-card.cyan:hover { border-color: var(--cyan); }
  .key-pick-card .label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
  .key-pick-card.gold .label { color: var(--gold); }
  .key-pick-card.green .label { color: var(--green); }
  .key-pick-card.cyan .label { color: var(--cyan); }
  .key-pick-item { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; font-size: 13px; }
  .key-pick-item .name { font-weight: 500; }
  .key-pick-item .name .race-tag { font-size: 10px; color: var(--text3); font-weight: 400; }
  .key-pick-item .stat { font-weight: 700; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
  .key-pick-item .stat.gold { color: var(--gold); }
  .key-pick-item .stat.green { color: var(--green); }
  .key-pick-item .stat.cyan { color: var(--cyan); }
  .key-pick-divider { height: 1px; background: var(--border); margin: 4px 0; }

  /* ─── Skeleton Loading ─── */
  @keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
  .skeleton-card {
    padding: 16px 20px; border-radius: var(--radius); background: var(--card);
    border: 1px solid var(--border); margin-bottom: 12px;
  }
  .skeleton-line {
    height: 14px; border-radius: 4px; margin-bottom: 10px;
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 200px 100%; animation: shimmer 1.5s ease-in-out infinite;
  }
  .skeleton-line:last-child { margin-bottom: 0; }
  .skeleton-line.w60 { width: 60%; }
  .skeleton-line.w40 { width: 40%; }
  .skeleton-line.w80 { width: 80%; }
  .skeleton-line.h20 { height: 20px; }

  /* ─── Section Dividers ─── */
  .section-divider {
    height: 1px; border: none; margin: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
  }

  /* ─── Active Nav ─── */
  .nav-links a.active { color: var(--text); }

  .backtest-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .backtest-stat {
    padding: 24px; border-radius: var(--radius); background: var(--card);
    border: 1px solid var(--border); text-align: center; backdrop-filter: blur(12px);
    transition: all 0.3s;
  }
  .backtest-stat:hover { transform: translateY(-3px); border-color: var(--accent); }
  .backtest-stat .val { font-size: 32px; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
  .backtest-stat .val.gold { color: var(--gold); }
  .backtest-stat .val.green { color: var(--green); }
  .backtest-stat .val.red { color: var(--accent2); }
  .backtest-stat .val.cyan { color: var(--cyan); }
  .backtest-stat .lbl { font-size: 12px; color: var(--text3); margin-top: 6px; }

  /* ─── CTA ─── */
  .cta-section {
    text-align: center; padding: 80px 0;
    background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(220,38,38,0.06), transparent);
  }
  .cta-section h2 { font-size: 40px; font-weight: 800; margin-bottom: 12px; }
  .cta-section p { color: var(--text2); font-size: 16px; max-width: 540px; margin: 0 auto 32px; line-height: 1.7; }
  .cta-btns { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
  .cta-pulse {
    animation: ctaPulse 2s ease-in-out infinite;
  }
  @keyframes ctaPulse {
    0%, 100% { box-shadow: 0 4px 24px var(--accent-glow); }
    50% { box-shadow: 0 4px 40px var(--accent-glow), 0 0 60px rgba(220,38,38,0.15); }
  }

  /* ─── Alert ─── */
  .alert-box {
    padding: 14px 20px; border-radius: 10px; margin: 20px 0 30px;
    font-size: 13px; display: flex; align-items: center; gap: 12px;
  }
  .alert-info { background: rgba(6,182,212,0.08); border: 1px solid rgba(6,182,212,0.15); color: var(--cyan); }

  /* ─── Loader ─── */
  .loader { text-align: center; padding: 60px 20px; color: var(--text3); }
  .spinner {
    width: 36px; height: 36px; border: 3px solid var(--border);
    border-top-color: var(--accent); border-radius: 50%;
    animation: spin 0.8s linear infinite; margin: 0 auto 12px;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* ─── Footer ─── */
  footer {
    text-align: center; padding: 48px 24px;
    border-top: 1px solid var(--border); color: var(--text3); font-size: 12px;
  }
  footer a { color: var(--accent2); text-decoration: none; }
  footer .footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-bottom: 16px; }
  footer .footer-links a { color: var(--text2); font-size: 13px; }
  footer .footer-links a:hover { color: var(--text); }

  /* ─── Responsive ─── */
  @media (max-width: 900px) {
    .steps-grid { grid-template-columns: 1fr; }
    .features-grid { grid-template-columns: 1fr; }
    .model-showcase { grid-template-columns: 1fr; }
    .backtest-grid { grid-template-columns: repeat(2, 1fr); }
    .hero h1 { font-size: 40px; }
    .section-title { font-size: 28px; }
    .horse-row { grid-template-columns: 22px 1fr 58px; font-size: 12px; }
    .horse-row .edge, .horse-row .horse-odds, .horse-row .horse-jockey, .horse-row .horse-trainer, .horse-row .horse-draw, .horse-row .horse-age-cell { display: none; }
    .horse-row.th { display: none; }
    .nav-links { display: none; }
  }
  @media (max-width: 480px) {
    .hero h1 { font-size: 30px; }
    .backtest-grid { grid-template-columns: 1fr 1fr; }
    .stat-pill { min-width: 100px; }
  }

  /* ═══════════════ v2 additions (2026-09-22) ═══════════════ */

  /* Accessibility: visible focus for keyboard users */
  a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
    outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 6px;
  }
  .skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--gold); color: #1a1400; padding: 10px 16px; font-weight: 700;
    border-radius: 0 0 8px 0; text-decoration: none;
  }
  .skip-link:focus { left: 0; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .bg-orbs .orb, .cta-pulse { animation: none !important; }
    canvas#particle-canvas { display: none; }
  }

  /* Nav: active link + login button + mobile menu */
  .nav-links a.active { color: var(--gold); }
  .nav-login {
    padding: 7px 16px; border-radius: 100px; border: 1px solid var(--gold);
    color: var(--gold) !important; font-weight: 600 !important;
  }
  .nav-login:hover { background: rgba(240,185,11,0.12); color: var(--gold3) !important; }
  .nav-toggle {
    display: none; background: none; border: 1px solid var(--border); color: var(--text);
    border-radius: 8px; padding: 6px 10px; font-size: 18px; line-height: 1; cursor: pointer;
  }
  @media (max-width: 900px) {
    .nav-toggle { display: block; }
    nav.open .nav-links {
      display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
      position: absolute; top: 100%; left: 0; right: 0;
      background: rgba(9,9,20,0.98); border-bottom: 1px solid var(--border);
      padding: 18px 24px 22px;
    }
  }

  /* Teaser / locked block */
  .teaser-note {
    display: flex; align-items: flex-start; gap: 12px; margin: 22px 0 6px;
    padding: 16px 20px; border-radius: 12px;
    background: rgba(240,185,11,0.05); border: 1px solid rgba(240,185,11,0.18);
    font-size: 13.5px; color: var(--text2); line-height: 1.7;
  }
  .teaser-note strong { color: var(--gold3); }
  .locked-races {
    margin-top: 20px; border: 1px dashed rgba(240,185,11,0.25); border-radius: var(--radius);
    background: rgba(255,255,255,0.015); padding: 30px 24px; text-align: center;
  }
  .locked-races .lock-ico { font-size: 34px; margin-bottom: 10px; }
  .locked-races h4 { font-size: 17px; margin-bottom: 8px; }
  .locked-races p { color: var(--text2); font-size: 13.5px; line-height: 1.7; max-width: 520px; margin: 0 auto 18px; }
  .locked-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
  .locked-chip {
    font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text2);
    border: 1px solid var(--border); background: var(--card); border-radius: 100px; padding: 6px 14px;
  }
  .free-badge {
    display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
    letter-spacing: 0.8px; text-transform: uppercase; color: #0b0b12;
    background: linear-gradient(135deg, var(--gold3), var(--gold2));
    padding: 4px 12px; border-radius: 100px;
  }

  /* Pricing */
  .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 44px; }
  .price-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 30px 26px; display: flex; flex-direction: column; backdrop-filter: blur(10px);
    transition: border-color 0.25s, transform 0.25s;
  }
  .price-card:hover { border-color: var(--border-hover); transform: translateY(-3px); }
  .price-card.featured { border-color: rgba(240,185,11,0.45); box-shadow: 0 12px 40px rgba(240,185,11,0.10); }
  .price-card .plan { font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
  .price-card .amount { font-family: 'JetBrains Mono', monospace; font-size: 40px; font-weight: 700; line-height: 1; }
  .price-card .amount span { font-size: 14px; color: var(--text2); font-weight: 500; }
  .price-card ul { list-style: none; margin: 20px 0 24px; display: grid; gap: 10px; }
  .price-card li { font-size: 13.5px; color: var(--text2); line-height: 1.6; padding-left: 24px; position: relative; }
  .price-card li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }
  .price-card li.off { color: var(--text3); }
  .price-card li.off::before { content: '–'; color: var(--text3); }
  .price-card .plan-cta { margin-top: auto; }

  /* FAQ */
  .faq-list { margin-top: 40px; display: grid; gap: 12px; }
  .faq-item { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0 20px; }
  .faq-item summary {
    cursor: pointer; list-style: none; padding: 18px 0; font-weight: 600; font-size: 15px;
    display: flex; justify-content: space-between; gap: 16px; align-items: center;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary::after { content: '+'; color: var(--gold); font-size: 20px; line-height: 1; }
  .faq-item[open] summary::after { content: '–'; }
  .faq-item .faq-body { color: var(--text2); font-size: 14px; line-height: 1.8; padding: 0 0 20px; max-width: 780px; }

  /* Forms (login) */
  .auth-wrap { max-width: 430px; margin: 0 auto; }
  .auth-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    padding: 36px 32px; backdrop-filter: blur(12px);
  }
  .auth-card h1 { font-size: 26px; font-weight: 800; margin-bottom: 8px; }
  .auth-card .auth-sub { color: var(--text2); font-size: 14px; line-height: 1.7; margin-bottom: 26px; }
  .field { margin-bottom: 18px; }
  .field label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text2); margin-bottom: 8px; }
  .field input {
    width: 100%; padding: 13px 15px; border-radius: 10px; font-size: 15px;
    background: rgba(0,0,0,0.35); border: 1px solid var(--border); color: var(--text);
    font-family: 'Inter', sans-serif; transition: border-color 0.2s;
  }
  .field input:focus { border-color: var(--gold); outline: none; }
  .btn-primary {
    width: 100%; padding: 14px 18px; border-radius: 10px; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--gold3), var(--gold2)); color: #14100a;
    font-weight: 800; font-size: 15px; font-family: 'Inter', sans-serif; transition: transform 0.15s, filter 0.2s;
  }
  .btn-primary:hover { filter: brightness(1.07); }
  .btn-primary:active { transform: translateY(1px); }
  .btn-secondary {
    display: inline-block; padding: 12px 20px; border-radius: 10px; text-decoration: none;
    border: 1px solid var(--border-hover); color: var(--text); font-weight: 600; font-size: 14px;
  }
  .btn-secondary:hover { border-color: var(--gold); color: var(--gold3); }
  /* Continue with Google (Boss, 2026-09-29): the primary path for paid subscribers.
     The username/password form stays below it for admins / legacy accounts. */
  .btn-google {
    display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
    padding: 13px 18px; border-radius: 10px; text-decoration: none;
    background: #ffffff; color: #1f1f1f; font-weight: 700; font-size: 15px;
    font-family: 'Inter', sans-serif; border: 1px solid #dadce0;
    transition: transform 0.15s, filter 0.2s;
  }
  .btn-google:hover { filter: brightness(0.97); }
  .btn-google:active { transform: translateY(1px); }
  .btn-google .gicon { flex: 0 0 auto; display: block; }
  .auth-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 18px; color: var(--text3); font-size: 12px; }
  .auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
  .auth-or span { white-space: nowrap; }
  .auth-msg { padding: 12px 16px; border-radius: 10px; font-size: 13.5px; margin-bottom: 18px; line-height: 1.6; }
  .auth-msg.error { background: rgba(220,38,38,0.10); border: 1px solid rgba(220,38,38,0.30); color: #fca5a5; }
  .auth-msg.ok { background: rgba(16,185,129,0.10); border: 1px solid rgba(16,185,129,0.28); color: var(--green2); }
  .form-msg { margin: 10px 0 0; font-size: 13px; line-height: 1.5; min-height: 18px; }
  .form-msg.ok { color: var(--green2); }
  .form-msg.error { color: #fca5a5; }
  .auth-foot { margin-top: 20px; font-size: 12.5px; color: var(--text3); line-height: 1.7; text-align: center; }
  .auth-foot a { color: var(--accent2); }

  /* Results */
  .result-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 14px; }
  .result-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
  .result-race { font-weight: 700; font-size: 16px; }
  .result-meta { color: var(--text2); font-size: 12.5px; }
  .result-winner { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--gold3); margin-bottom: 12px; }
  .result-rows { display: grid; gap: 6px; }
  .result-row {
    display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center;
    font-size: 13px; color: var(--text2); padding: 7px 10px; border-radius: 8px; background: rgba(255,255,255,0.02);
  }
  .result-row .pos { font-family: 'JetBrains Mono', monospace; color: var(--gold); font-weight: 700; }
  .result-row .nm { color: var(--text); font-weight: 500; }
  .result-row.win { background: rgba(240,185,11,0.07); }
  .meeting-head { display: flex; align-items: baseline; gap: 12px; margin: 40px 0 16px; flex-wrap: wrap; }
  .meeting-head h3 { font-size: 18px; font-weight: 700; }
  .meeting-head .tag { font-size: 12px; color: var(--text2); border: 1px solid var(--border); border-radius: 100px; padding: 4px 12px; }

  /* Honest-metrics strip */
  .metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 36px; }
  .metric-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 22px 20px;
  }
  .metric-card .m-val { font-family: 'JetBrains Mono', monospace; font-size: 26px; font-weight: 700; }
  .metric-card .m-lbl { font-size: 12.5px; color: var(--text2); margin-top: 6px; line-height: 1.5; }
  .metric-card .m-note { font-size: 11.5px; color: var(--text3); margin-top: 8px; line-height: 1.5; }

  .prose { max-width: 760px; }
  .prose h2 { font-size: 26px; font-weight: 800; margin: 34px 0 12px; }
  .prose h3 { font-size: 18px; font-weight: 700; margin: 24px 0 8px; }
  .prose p { color: var(--text2); font-size: 14.5px; line-height: 1.85; margin-bottom: 14px; }
  .prose ul { margin: 0 0 16px 20px; display: grid; gap: 8px; }
  .prose li { color: var(--text2); font-size: 14px; line-height: 1.75; }
  .prose a { color: var(--accent2); }

  /* ─── Legal pages (terms / privacy) ─── */
  .legal-meta { color: var(--text3); font-size: 13px; letter-spacing: .2px; margin-top: 10px; }
  .legal-meta strong { color: var(--accent2); }
  .legal-ph { color: var(--gold); border-bottom: 1px dashed rgba(240,185,11,.45); }
  .prose .legal-ph { font-family: var(--mono, monospace); font-size: 13px; }
  /* Subscribe acceptance gate (Boss, 2026-09-29) — the same look on the pricing page. */
  .plan-accept { padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
  .plan-accept label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; line-height: 1.5; color: var(--text2); }
  .plan-accept input[type=checkbox] { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #f0b90b; }
  .plan-accept a { color: var(--accent2); }
  .plan-accept .pa-msg { color: var(--bad, #f87171); font-size: 12.5px; margin-top: 8px; line-height: 1.45; }

  .page-head { padding: 130px 0 20px; }
  .page-head h1 { font-size: 42px; font-weight: 900; letter-spacing: -1.2px; margin-bottom: 12px; }
  .page-head p { color: var(--text2); font-size: 16px; max-width: 660px; line-height: 1.75; }
  @media (max-width: 700px) { .page-head h1 { font-size: 30px; } }

  .disclaimer {
    margin-top: 30px; padding: 16px 20px; border-radius: 12px; font-size: 12.5px; line-height: 1.7;
    background: rgba(255,255,255,0.02); border: 1px solid var(--border); color: var(--text3);
  }

  /* ═══════════════ v3 additions (2026-09-22) — SOP card format, next-meeting
     stats, admin page, Whop checkout state ═══════════════ */

  /* Stat cards: sub-detail line carrying the next meeting's date / time / turf */
  .stat-pill .sub {
    font-size: 10.5px; color: var(--text2); margin-top: 6px; line-height: 1.35;
    font-family: 'JetBrains Mono', monospace; letter-spacing: 0.2px;
  }
  .stat-pill.next-meeting { min-width: 150px; }

  /* Next-meeting strip (consolidated date · time · turf) */
  .next-meeting-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px;
    justify-content: center; margin-top: 16px; padding: 12px 20px;
    border-radius: 12px; background: var(--card); border: 1px solid var(--border);
    font-size: 13px; color: var(--text2);
  }
  .next-meeting-strip .nm-label {
    font-size: 10px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--gold); border-right: 1px solid var(--border); padding-right: 16px;
  }
  .next-meeting-strip .nm-item strong { color: var(--text); font-weight: 600; }
  .next-meeting-strip .nm-tbc { color: var(--text3); }

  /* ─── SOP image-card mirror ─── */
  /* A grid item defaults to min-width:auto, so the card grew to the table's 2330px min-width
     instead of letting .sop-scroll scroll — the right side was clipped and unreachable.
     min-width:0 lets it shrink to its track (Boss, 2026-09-26). */
  .race-grid > *, .sop-card { min-width: 0; }
  .sop-card {
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; backdrop-filter: blur(12px); transition: border-color 0.25s;
  }
  .sop-card:hover { border-color: var(--border-hover); }
  .sop-head {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 14px 18px; background: rgba(12,13,20,0.85); cursor: pointer;
    border-bottom: 1px solid var(--border);
  }
  .sop-headlines { min-width: 0; }
  /* Course/track diagram riding in the card header (Boss, 2026-09-27): the source's own
     per-course diagram, republished on the MeowKuda subscriber site. Compact thumbnail
     on the RIGHT of the header, between the headline block and the chevron; always
     visible. A race with no cached code renders nothing (no element is emitted). */
  .sop-head .sop-track {
    width: 132px; height: auto; flex: 0 0 auto; display: block;
    border-radius: 5px; border: 1px solid var(--border); background: #f4f1e8;
  }
  @media (max-width: 640px) { .sop-head .sop-track { width: 92px; } }
  .sop-l1 {
    font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: 0.2px;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  }
  .sop-l2 { font-size: 11.5px; color: var(--text2); margin-top: 4px; font-family: 'JetBrains Mono', monospace; }
  .sop-card .chevron { color: var(--text3); transition: transform 0.35s; font-size: 12px; flex-shrink: 0; }
  .sop-card.open .chevron { transform: rotate(180deg); }
  /* '▶ Simulate' / '▶ Replay' strip (Boss, 2026-09-27). Sits between the toggle header and the
     collapsible body so it is always visible and never part of the header click target. Kept
     compact so the header layout (headline block, track thumbnail, chevron) is untouched. */
  .sop-sim { display: flex; justify-content: flex-end; padding: 8px 18px 0; }
  .sop-sim-link {
    display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.3px;
    color: var(--gold); text-decoration: none; border: 1px solid var(--border);
    border-radius: 999px; padding: 3px 11px; background: rgba(240,185,11,0.06);
    transition: border-color 0.2s, background 0.2s; white-space: nowrap;
  }
  .sop-sim-link:hover { border-color: var(--gold); background: rgba(240,185,11,0.12); }
  .sop-body { display: none; }
  .sop-card.open .sop-body { display: block; }
  .sop-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  /* 2452px = the 28 grid columns (2428px) + the row's 24px horizontal padding (Boss,
     2026-10-10). At 2386px the last column (PLACE tote) overflowed the row's own box, so the
     top-3 rank tint stopped at the WIN tote column instead of covering the whole row. */
  .sop-table { min-width: 2528px; }

  /* Frozen SILK/POS/HORSE columns — an OPT-IN switch (Boss, 2026-10-01). Technique recovered from
     commit 125f269 (2026-09-27): sticky the first three grid columns so they stay put while the
     other 23 scroll horizontally. The fill MUST be opaque — --card is translucent here, so a
     transparent frozen block lets the scrolling cells show straight through. The row carries a
     12px horizontal padding, so the block is pinned at 12 / 52 / 96 and a 12px pseudo-element
     extends the first cell left over that gutter (otherwise a scrolling column peeks through it).
     OFF (default) = the whole table scrolls exactly as before. */
  body.mk-freeze .sop-c-silk, body.mk-freeze .sop-c-pos, body.mk-freeze .sop-c-horse { position: sticky; z-index: 3; background: #0c0c1c; }
  body.mk-freeze .sop-c-silk  { left: 12px; overflow: visible; }
  body.mk-freeze .sop-c-silk::before { content: ''; position: absolute; top: 0; bottom: 0; left: -12px; width: 12px; background: inherit; }
  body.mk-freeze .sop-c-pos   { left: 52px; }
  body.mk-freeze .sop-c-horse { left: 96px; box-shadow: 10px 0 12px -10px rgba(0,0,0,0.85); }
  /* the top-3 tints must cover the frozen block too, or the tint stops at the horse name */
  body.mk-freeze .sop-row.sop-top1 > .sop-c-silk, body.mk-freeze .sop-row.sop-top1 > .sop-c-pos, body.mk-freeze .sop-row.sop-top1 > .sop-c-horse { background: #3E3414; }
  body.mk-freeze .sop-row.sop-top2 > .sop-c-silk, body.mk-freeze .sop-row.sop-top2 > .sop-c-pos, body.mk-freeze .sop-row.sop-top2 > .sop-c-horse { background: #2E3642; }
  body.mk-freeze .sop-row.sop-top3 > .sop-c-silk, body.mk-freeze .sop-row.sop-top3 > .sop-c-pos, body.mk-freeze .sop-row.sop-top3 > .sop-c-horse { background: #402A1C; }
  /* the header row is translucent, so its frozen cells need a solid fill of their own */
  body.mk-freeze .sop-row.sop-th > .sop-c-silk, body.mk-freeze .sop-row.sop-th > .sop-c-pos, body.mk-freeze .sop-row.sop-th > .sop-c-horse { background: #0c0d14; }

  .sop-row {
    display: grid;
    /* 26 cols (2026-09-25): HORSE +40 and OWNER widened for long names, plus SIRE / DAM / GEAR
       + 2 cols (2026-10-07): horse SEX after AGE, jockey J SEX after JOCKEY */
    grid-template-columns: 40px 44px minmax(180px,1.4fr) 34px 40px 150px 36px 36px 36px 128px 44px 128px 110px 210px 170px 170px 70px 90px 90px 90px 90px 56px 56px 48px 82px 76px 48px 76px 76px;
    align-items: center; padding: 7px 12px; font-size: 12.5px;
    border-bottom: 1px solid rgba(255,255,255,0.03);
  }
  .sop-row > span { text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sop-row .sop-c-horse { text-align: left; }
  .sop-row.sop-th {
    background: rgba(12,13,20,0.85); border-bottom: 1px solid var(--border);
    font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--text3); padding: 8px 12px;
  }
  /* Top-3 row tints — the exact card colours (#3E3414 gold / #2E3642 silver / #402A1C bronze) */
  .sop-row.sop-top1 { background: #3E3414; }
  .sop-row.sop-top2 { background: #2E3642; }
  .sop-row.sop-top3 { background: #402A1C; }
  .sop-row:not(.sop-th):not(.sop-top1):not(.sop-top2):not(.sop-top3):hover { background: rgba(240,185,11,0.04); }

  .sop-silk { width: 30px; height: 30px; object-fit: contain; display: block; margin: 0 auto; border-radius: 4px; }
  .sop-silk-none { display: block; width: 30px; height: 30px; margin: 0 auto; border-radius: 4px; background: rgba(255,255,255,0.05); }
  .sop-pos { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
  .sop-medal { font-size: 13px; line-height: 1; }
  .sop-ranknum { font-family: 'JetBrains Mono', monospace; font-weight: 700; color: var(--gold); }
  .sop-horse { font-weight: 500; }
  .sop-no { color: #0c0d14; background: var(--gold); border-radius: 4px; padding: 1px 5px; font-weight: 800; font-family: 'JetBrains Mono', monospace; }
  .sop-c-sire, .sop-c-dam { font-size: 11.5px; color: var(--text2); }
  .sop-c-gear { font-size: 11px; color: var(--text2); font-family: 'JetBrains Mono', monospace; }
  /* J/T WIN = this jockey+trainer pair's win rate together (2026-09-25) */
  .sop-row:not(.sop-th) .sop-c-jt { font-size: 11px; color: var(--gold); font-family: 'JetBrains Mono', monospace; font-weight: 700; }
  /* thicker coloured separator every 1/3 of the field */
  .sop-row.sop-sep { border-bottom: 3px solid var(--gold); }
  /* SCRATCHED runner (Boss, 2026-09-30): a late scratching stays VISIBLE on the card —
     struck through, badged, and with NO odds (WIN/PLA/MKT%/EDGE/FAIR read '-'). Never
     silently deleted. The badge is inline-block, so the row's line-through does not strike
     it (text decorations do not propagate into atomic inline-level boxes). */
  .sop-row.sop-scratched > span { text-decoration: line-through; color: var(--text3); }
  .sop-row.sop-scratched .sop-c-horse { text-decoration: none; }
  .sop-row.sop-scratched .sop-scr-name { text-decoration: line-through; color: var(--text3); }
  .sop-row.sop-scratched .sop-no { background: #4b5563; color: #e5e7eb; }
  .sop-scratch-badge {
    display: inline-block; background: var(--accent); color: #fff; border-radius: 4px;
    padding: 1px 6px; font-size: 9.5px; font-weight: 800; letter-spacing: .6px;
    text-decoration: none; vertical-align: middle;
  }
  /* race-card header line 2 (date/time/going): bigger, bolder, coloured */
  .sop-l2 { font-size: 15px; font-weight: 700; color: var(--gold); }
  /* legend for the prior-win columns (2026-09-25) */
  .sop-legend { font-size: 10.5px; color: var(--text3); padding: 6px 12px 0; line-height: 1.5; }
  /* prior-win dates (2026-09-25): last win in this class / distance / course+turf / location */
  /* Wrapped in :where() so this carries ZERO specificity — the row's tier rule
     (.sop-row.tN > span) must win, so these cells take the same size/colour as their row.
     The old 3-class selector outranked the tier rule and left them 11px grey, while the app's
     single-class rule did not (Boss, 2026-09-26). */
  :where(.sop-row:not(.sop-th)) :where(.sop-c-cls, .sop-c-dst, .sop-c-crs, .sop-c-loc)
    { font-size: 11px; color: var(--text2); font-family: 'JetBrains Mono', monospace; }
  .sop-trophy { font-size: 12px; }
  .sop-form { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text2); }
  .sop-c-age, .sop-c-wt, .sop-c-rtg, .sop-c-drw { font-family: 'JetBrains Mono', monospace; color: var(--text2); }
  .sop-c-jockey, .sop-c-trainer { font-size: 11.5px; color: var(--text2); }
  /* horse SEX + jockey gender (Boss, 2026-10-07): compact mono letters; a female jockey is tinted */
  .sop-c-sex, .sop-c-jsex { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--text2); }
  .sop-c-jsex.is-f { color: #FF8FD1; }
  /* rating suffix: the person's 2026-season win rate, from the rebuilt rating files */
  .sop-rate { color: var(--gold); font-weight: 700; font-family: 'JetBrains Mono', monospace; }
  .sop-c-owner { font-size: 11.5px; color: var(--text2); }
  /* HEADER UNIFORMITY (Boss, 25 Sep 2026): the header cells also carry the `sop-c-*` column
     classes, so per-column font/colour rules were overriding the header's own style and the
     headers read at different sizes/colours. This rule outranks them all. */
  .sop-row.sop-th > span {
    font-family: inherit; font-size: 10px; font-weight: 700; letter-spacing: 1.1px;
    color: var(--text3); text-transform: uppercase;
  }
  .sop-c-rank { font-family: 'JetBrains Mono', monospace; font-weight: 600; }
  .sop-c-rank.sop-rank-green { color: var(--green); }
  .sop-c-prob { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text); }
  .sop-c-mkt { font-family: 'JetBrains Mono', monospace; color: var(--text2); }
  .sop-c-edge { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: var(--text3); }
  .sop-c-edge.pos { color: var(--green); }
  .sop-c-edge.neg { color: var(--accent2); }
  /* VALUE (overlay) column (Boss, 2026-10-11): the expected return at the live tote price,
     (decimal odds x WIN%) - 1, as a signed percent. Green #4ADE80 to read distinctly from EDGE. */
  .sop-c-value { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: #4ADE80; }
  .sop-c-fair { font-family: 'JetBrains Mono', monospace; color: var(--text2); }
  .sop-c-win { font-family: 'JetBrains Mono', monospace; color: #ffb43c; font-weight: 600; }
  .sop-c-pla { font-family: 'JetBrains Mono', monospace; color: #78dcff; font-weight: 600; }
  /* WIN / PLA price-change arrows (Boss, 2026-10-01): ▲ bright green when the price
     INCREASED since the last update, ▼ bright red when it DECREASED, nothing at all when
     unchanged. Riz: 'i want the arrows pulsing blinking' — a CLEAR, continuous pulse/blink
     (opacity 1 -> .15, scale 1 -> 1.3, breathing glow) on a readable ~1s rhythm, not a
     strobe. Static (no animation) under prefers-reduced-motion; the arrow is still shown. */
  .sop-dir { display: inline-block; font-size: 9.5px; line-height: 1; margin-left: 2px;
             vertical-align: middle; font-weight: 700; will-change: opacity, transform; }
  .sop-dir-up { color: #22e06a; text-shadow: 0 0 8px rgba(34,224,106,1);
                animation: sopDirUp 1s ease-in-out infinite; }
  .sop-dir-down { color: #ff3b3b; text-shadow: 0 0 8px rgba(255,59,59,1);
                  animation: sopDirDown 1s ease-in-out infinite; }
  @keyframes sopDirUp {
    0%,100% { opacity: 1;   transform: scale(1);   text-shadow: 0 0 9px rgba(34,224,106,1); }
    50%     { opacity: .15; transform: scale(1.3); text-shadow: 0 0 3px rgba(34,224,106,.45); } }
  @keyframes sopDirDown {
    0%,100% { opacity: 1;   transform: scale(1);   text-shadow: 0 0 9px rgba(255,59,59,1); }
    50%     { opacity: .15; transform: scale(1.3); text-shadow: 0 0 3px rgba(255,59,59,.45); } }
  @media (prefers-reduced-motion: reduce) {
    .sop-dir-up, .sop-dir-down { animation: none !important; opacity: 1; transform: none;
                                 text-shadow: none; }
  }
  /* FAVOURITE HIGHLIGHT (Boss, 2026-10-01): the LOWEST quoted price in the race, per column
     (WIN / PLA) and per ACTIVE currency, pulses BLUE so the favourite reads at a glance. It
     shares the 76px cell with the price and the price-change arrow and adds NO width
     (background + inset glow only), so the track is untouched. Joint-lowest runners all take
     it; scratched / no-price cells never do. Reduced motion KEEPS the highlight and drops
     only the animation — the information survives, the motion does not. */
  .sop-c-win.sop-fav, .sop-c-pla.sop-fav {
    border-radius: 4px; color: #eaf3ff;
    animation: sopFavBlink .9s ease-in-out infinite;
  }
  @keyframes sopFavBlink {
    0%,100% { background: rgba(37,99,235,.22); box-shadow: inset 0 0 0 1px rgba(96,165,250,.55);
              text-shadow: none; }
    50%     { background: rgba(37,99,235,.95); box-shadow: inset 0 0 9px 2px rgba(191,219,254,.95);
              text-shadow: 0 0 8px rgba(191,219,254,.95); }
  }
  @media (prefers-reduced-motion: reduce) {
    .sop-c-win.sop-fav, .sop-c-pla.sop-fav {
      animation: none !important; color: #eaf3ff;
      background: rgba(37,99,235,.55); box-shadow: inset 0 0 0 1px rgba(147,197,253,.9);
      text-shadow: none;
    }
  }
  /* FAVOURITE NAME + NUMBER (Riz, 2026-10-01): the WIN favourite's and the PLA favourite's
     HORSE name (HORSE column) and saddle number (POS column) carry the SAME blue pulse as the
     price cell — same keyframes, same colour family, same rhythm. WIN and PLA are computed
     independently and may be DIFFERENT runners; either flag marks that runner, and a horse
     that is both is marked once.

     THE FREEZE TRAP: with the freeze toggle ON those two cells are `position: sticky` with an
     OPAQUE fill (#0c0c1c, plus the top-1/2/3 tints). Painting a semi-transparent animated
     background straight on the cell would let a scrolling column show THROUGH it at the low
     point of the pulse. So the pulse is drawn as a `::after` overlay at `z-index:-1` inside a
     stacking context the cell creates (`z-index:0` here, `z-index:3` under mk-freeze) — it
     paints ABOVE the cell's own (opaque) fill and BELOW the text, so nothing bleeds through in
     EITHER state, the cell's own box-shadow (the freeze drop shadow) is preserved, and the
     text stays readable. Adds NO width. Reduced motion keeps the mark, drops the animation. */
  .sop-c-pos, .sop-c-horse { position: relative; z-index: 0; }
  .sop-c-pos.sop-fav, .sop-c-horse.sop-fav {
    color: #eaf3ff; animation: sopFavTextBlink .9s ease-in-out infinite;
  }
  .sop-c-pos.sop-fav::after, .sop-c-horse.sop-fav::after {
    content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 4px;
    pointer-events: none; animation: sopFavBlink .9s ease-in-out infinite;
  }
  @keyframes sopFavTextBlink {
    0%,100% { text-shadow: none; }
    50%     { text-shadow: 0 0 8px rgba(191,219,254,.95); }
  }
  @media (prefers-reduced-motion: reduce) {
    .sop-c-pos.sop-fav, .sop-c-horse.sop-fav {
      animation: none !important; color: #eaf3ff; text-shadow: none;
    }
    .sop-c-pos.sop-fav::after, .sop-c-horse.sop-fav::after {
      animation: none !important; background: rgba(37,99,235,.55);
      box-shadow: inset 0 0 0 1px rgba(147,197,253,.9);
    }
  }
  .sop-foot {
    padding: 10px 18px; font-size: 11.5px; color: var(--text2);
    background: rgba(12,13,20,0.6); border-top: 1px solid var(--border);
    font-family: 'JetBrains Mono', monospace;
  }
  .sop-foot.sop-divergence { color: #fca5a5; }
  /* FORM clearance: some form strings are long — give the column room before WT */
  .sop-row .sop-c-form { padding-right: 10px; }
  /* PULL-TO-REFRESH (Riz, 2026-10-01) — pure web, so it works in the existing Android WebView
     with NO APK rebuild. The indicator slides down from the top of the viewport; the gesture is
     armed only at scrollTop 0 and only for a downward pull (logic in site.js / m.html).
     pointer-events:none so it can never swallow a tap. Reduced motion keeps the indicator and
     drops its transition + spin (same rule as the other animations). */
  .ptr { position: fixed; top: 0; left: 0; right: 0; display: flex; justify-content: center;
         pointer-events: none; z-index: 60; opacity: 0; transform: translateY(-64px);
         transition: transform .18s ease, opacity .18s ease; }
  .ptr.on { opacity: 1; }
  .ptr-box { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 7px 14px;
             border-radius: 999px; background: rgba(12,13,20,.92);
             border: 1px solid rgba(255,255,255,.14); box-shadow: 0 8px 24px rgba(0,0,0,.5);
             color: var(--text2); font-size: 12px; font-weight: 700; letter-spacing: .4px; }
  .ptr.ready .ptr-box { border-color: var(--gold); color: var(--gold3); }
  .ptr-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25);
              border-top-color: var(--gold); display: none; }
  .ptr.work .ptr-spin { display: block; animation: ptrspin .8s linear infinite; }
  @keyframes ptrspin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .ptr { transition: none; }
    .ptr.work .ptr-spin { animation: none; }
  }
  .sop-ell { text-overflow: ellipsis; }

  /* ─── Settled result strip (under each card on /tips) ─── */
  .race-cell { display: flex; flex-direction: column; position: relative; }

  /* ─── Settled-race film + motion stop (Boss, 2026-10-01) ─────────────────────────────
     A race is settled when it carries a result. Its cell gets [data-settled="1"], which does
     two things: (1) a dim film covers the whole race (card + result strip) until the reader
     taps it — the wording reads as a CLOSED MARKET, not an error and not the paywall lock; and
     (2) every blink/pulse inside that race's card stops. The values stay VISIBLE and readable;
     only the motion stops (a settled race has no live prices, so a blinking arrow or pulsing
     favourite would be misleading). This is the SAME technique as the prefers-reduced-motion
     block — force animation:none and keep the element — scoped to settled races only, so live
     races animate exactly as before. The film reuses the result strip's own green. */
  .sop-settled-wrap { position: absolute; inset: 0; z-index: 20; pointer-events: none; }
  .sop-settled-wrap > * { pointer-events: auto; }
  .sop-film {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    text-align: center; cursor: pointer; border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(6,10,14,.80), rgba(6,13,10,.90));
    -webkit-backdrop-filter: blur(3px) saturate(.7); backdrop-filter: blur(3px) saturate(.7);
    border: 1px solid rgba(34,197,94,.38); color: #e8fff2;
  }
  .sop-film-in { padding: 14px 18px; }
  .sop-film-ico { font-size: 30px; line-height: 1; margin-bottom: 8px; }
  .sop-film-title { font-size: 15px; font-weight: 800; letter-spacing: 1.6px; color: #7ff0b0; }
  .sop-film-sub { font-size: 12px; color: #cfe9dc; margin-top: 6px; }
  .sop-settled-chip {
    align-self: center; margin-right: 8px; cursor: pointer; white-space: nowrap;
    font-size: 10.5px; font-weight: 800; letter-spacing: .5px; color: #7ff0b0;
    background: rgba(6,14,10,.85); border: 1px solid rgba(34,197,94,.45);
    border-radius: 999px; padding: 3px 10px;
  }
  .sop-settled-chip:hover { border-color: #7ff0b0; background: rgba(6,20,13,.95); }
  /* Motion stop — the settled race's card. Mirrors the prefers-reduced-motion rules above. */
  [data-settled="1"] .sop-dir-up, [data-settled="1"] .sop-dir-down {
    animation: none !important; opacity: 1; transform: none;
  }
  [data-settled="1"] .sop-c-win.sop-fav, [data-settled="1"] .sop-c-pla.sop-fav {
    animation: none !important; color: #eaf3ff;
    background: rgba(37,99,235,.55); box-shadow: inset 0 0 0 1px rgba(147,197,253,.9);
    text-shadow: none;
  }
  [data-settled="1"] .sop-c-pos.sop-fav, [data-settled="1"] .sop-c-horse.sop-fav {
    animation: none !important; color: #eaf3ff; text-shadow: none;
  }
  [data-settled="1"] .sop-c-pos.sop-fav::after, [data-settled="1"] .sop-c-horse.sop-fav::after {
    animation: none !important; background: rgba(37,99,235,.55);
    box-shadow: inset 0 0 0 1px rgba(147,197,253,.9);
  }
  [data-settled="1"] .f-ticker-in { animation: none !important; }
  .race-result {
    background: rgba(34,197,94,0.07);
    border: 1px solid rgba(34,197,94,0.35); border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 10px 18px 12px; backdrop-filter: blur(12px);
  }
  .res-head {
    font-size: 12.5px; font-weight: 700; color: var(--green); letter-spacing: 0.3px;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  }
  .res-head strong { color: var(--text); font-weight: 800; }
  .res-rows { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
  .res-fin {
    display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
    font-family: 'JetBrains Mono', monospace; color: var(--text2);
  }
  .res-fin.win { color: var(--text); font-weight: 600; }
  .res-pos { color: var(--gold); font-weight: 700; }
  .res-no { color: var(--accent2); font-weight: 700; }
  .res-jk { color: var(--text3); font-size: 11px; }
  .res-sep { color: var(--text3); opacity: .6; font-size: 11px; }
  /* closed dividends + win margin (Singapore Pools record, 2026-09-27) */
  .res-divs { margin-top: 9px; border-top: 1px dashed rgba(34,197,94,0.28); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
  .res-pool { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; font-size: 11.5px; }
  .res-pool-name { color: var(--gold); font-weight: 800; font-size: 10.5px; letter-spacing: 0.5px; min-width: 46px; font-family: 'JetBrains Mono', monospace; }
  .res-combo { color: var(--text2); font-family: 'JetBrains Mono', monospace; }
  .res-combo b { color: var(--accent2); font-weight: 700; }
  .res-margin { margin-top: 8px; font-size: 12px; color: var(--text2); }
  .res-margin b { color: var(--text); font-weight: 800; }
  .res-margin-src { color: var(--text3); font-size: 10.5px; }
  /* Per-horse beaten margin as its OWN column beside the NAME (Riz, 2026-10-01): sits between
     the name and the jockey, aligned like the other cells; 2nd-4th show their distance, the
     winner reads 'won', a finisher with no sourced margin shows nothing. */
  .res-mg { color: var(--text3); font-size: 11px; min-width: 3.2em; text-align: left;
            font-variant-numeric: tabular-nums; }
  .res-mg.won { color: var(--green); font-weight: 700; }
  /* Race STATUS notice (Boss, 2026-10-04): a published result that is NOT final
     (INQUIRY AND OBJECTION,HOLD ALL TICKETS). A warning band ABOVE the finishers, never part of
     the finishing list. No notice -> no band. */
  .res-status {
    margin-top: 8px; padding: 7px 10px; border-radius: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: 0.3px; line-height: 1.35;
    display: flex; align-items: flex-start; gap: 7px;
    background: rgba(240,185,11,0.10); border: 1px solid rgba(240,185,11,0.45); color: #f0c674;
  }
  .res-status-ico { flex: 0 0 auto; }
  .res-status-tx { flex: 1 1 auto; }
  .res-status.hold { background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.55); color: #fca5a5; }
  .res-status.final { background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.45); color: #86efac; }

  /* ─── Admin page ─── */
  .admin-section { padding: 34px 0 10px; }
  .admin-h2 { font-size: 22px; font-weight: 800; margin-bottom: 6px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .admin-h3 { font-size: 16px; font-weight: 700; margin: 26px 0 10px; color: var(--gold); }
  .admin-h4 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text2); margin: 20px 0 8px; }
  .admin-note { font-size: 12.5px; color: var(--text3); margin: 6px 0 14px; line-height: 1.6; }
  .admin-warn { color: var(--accent2) !important; }
  .admin-nowrap { white-space: nowrap; font-size: 11.5px; color: var(--text3); }
  .admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 14px 0; }
  .admin-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
  .admin-card .k { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text3); }
  .admin-card .v { font-size: 20px; font-weight: 800; font-family: 'JetBrains Mono', monospace; margin-top: 4px; }
  .admin-card .s { font-size: 11.5px; color: var(--text2); margin-top: 4px; line-height: 1.5; }
  .admin-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 20px; margin: 10px 0 4px; }
  .admin-kv > div { display: flex; justify-content: space-between; gap: 14px; font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--border); }
  .admin-kv span { color: var(--text3); }
  .admin-kv b { color: var(--text); font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 12px; text-align: right; }
  .admin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .admin-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
  .admin-table { border-collapse: collapse; width: 100%; font-size: 12.5px; }
  .admin-table th {
    text-align: left; padding: 10px 12px; font-size: 10px; letter-spacing: 1.1px; text-transform: uppercase;
    color: var(--text3); border-bottom: 1px solid var(--border); white-space: nowrap;
  }
  .admin-table td { padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,0.03); color: var(--text2); vertical-align: middle; }
  .admin-table tr:last-child td { border-bottom: none; }
  .admin-table code { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text); }
  .admin-actions { display: flex; gap: 6px; flex-wrap: wrap; }
  .admin-mini {
    background: rgba(255,255,255,0.04); border: 1px solid var(--border); color: var(--text2);
    border-radius: 7px; padding: 4px 9px; font-size: 11px; cursor: pointer; font-family: 'Inter', sans-serif;
  }
  .admin-mini:hover { border-color: var(--gold); color: var(--gold3); }
  .admin-mini.danger:hover { border-color: var(--accent2); color: #fca5a5; }
  .admin-form { margin: 10px 0 18px; }
  .admin-form-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
  .admin-form-row label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text3); }
  .admin-form-row input, .admin-form-row select {
    padding: 10px 12px; border-radius: 9px; font-size: 13.5px; background: rgba(0,0,0,0.35);
    border: 1px solid var(--border); color: var(--text); font-family: 'Inter', sans-serif; min-width: 160px;
  }
  .admin-form-row input:focus, .admin-form-row select:focus { border-color: var(--gold); outline: none; }
  .admin-btn { width: auto; padding: 11px 22px; }
  .admin-recs { list-style: none; display: grid; gap: 8px; }
  .admin-recs li {
    font-size: 13px; color: var(--text2); line-height: 1.65; padding: 10px 14px;
    border-radius: 10px; background: rgba(255,255,255,0.02); border: 1px solid var(--border);
  }
  .tag-pill {
    display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase;
    padding: 3px 10px; border-radius: 100px; border: 1px solid var(--border); color: var(--text2);
  }
  .tag-pill.gold { border-color: var(--gold); color: var(--gold); }
  .tag-pill.green { border-color: var(--green); color: var(--green); }
  .tag-pill.red { border-color: var(--accent2); color: var(--accent2); }
  .tag-pill.cyan { border-color: var(--cyan); color: var(--cyan); }

  /* ─── Whop checkout state (pricing page) ─── */
  .whop-note {
    margin: 18px auto 0; max-width: 720px; padding: 14px 18px; border-radius: 12px;
    font-size: 13px; line-height: 1.7; text-align: center;
    background: rgba(6,182,212,0.06); border: 1px solid rgba(6,182,212,0.2); color: var(--text2);
  }
  .whop-note-off { background: rgba(240,185,11,0.06); border-color: rgba(240,185,11,0.25); }
  .whop-note strong { color: var(--gold3); }
  .plan-cta a.disabled, .plan-cta a[aria-disabled="true"] {
    opacity: 0.55; cursor: not-allowed; pointer-events: none; text-decoration: line-through;
  }

  @media (max-width: 900px) {
    .admin-cols { grid-template-columns: 1fr; }
    .next-meeting-strip { justify-content: flex-start; }
    .next-meeting-strip .nm-label { border-right: none; padding-right: 0; }
  }

  /* "What the columns mean" dropdown — page level, above the cards (2026-09-25) */
  .cols-key { margin: 14px 0 0; }
  .cols-key > summary { cursor: pointer; font-size: 12.5px; color: var(--accent2); }
  .cols-key-body { font-size: 12px; line-height: 1.65; color: var(--text3); margin-top: 8px; max-width: 980px; }

  /* ── Row tiers by prior-win conditions (Boss, 2026-09-25) ─────────────────────────────
     4/4 = biggest/boldest/gold, then 3/4, 2/4, 1/4 each a step lower and a distinct colour,
     so the tiers are distinguishable at a glance. 0/4 keeps the normal row. */
  .sop-row.t4 > span { font-size: 14.5px; font-weight: 800; color: #FFD24A; }
  .sop-row.t3 > span { font-size: 13.5px; font-weight: 700; color: #5EE0C0; }
  .sop-row.t2 > span { font-size: 12.5px; font-weight: 600; color: #7FB3FF; }
  .sop-row.t1 > span { font-size: 12px;   font-weight: 500; color: #9AA6B8; }

  /* top-3 RANK% — bolder/thicker, one colour */
  .sop-row .sop-c-rank.top3 { font-weight: 800; color: #4ADE80; text-shadow: 0 0 6px rgba(74,222,128,.45); }
  /* top-3 WIN% — bolder/thicker, a DIFFERENT colour to RANK% */
  .sop-row .sop-c-prob.top3 { font-weight: 800; color: #FFD24A; text-shadow: 0 0 6px rgba(255,210,74,.45); }
  /* top-3 J/T% — bolder/thicker, its own colour */
  .sop-row .sop-c-jt.top3 { font-weight: 800; color: #FF8FD1; text-shadow: 0 0 6px rgba(255,143,209,.45); }
  /* top-3 FAIR — the three HIGHEST fair values (Boss, 2026-09-26), its own colour */
  .sop-row .sop-c-fair.top3 { font-weight: 800; color: #22D3EE; text-shadow: 0 0 6px rgba(34,211,238,.45); }
  /* top-3 EDGE — the three HIGHEST edge values (Boss, 2026-09-26), its own colour */
  .sop-row .sop-c-edge.top3 { font-weight: 800; color: #FF8C42; text-shadow: 0 0 6px rgba(255,140,66,.45); }
  /* top-3 MKT% — the three HIGHEST market% in the ACTIVE currency (Boss, 2026-10-01). Its own
     colour: the SAME violet the footer's MKT column already uses (#BE8CFF), so the column mark
     and the footer list read as one thing. Distinct from the other five top-3 colours
     (green/gold/pink/cyan/orange) and from the favourite blue. Static, like the other five. */
  .sop-row .sop-c-mkt.top3 { font-weight: 800; color: #BE8CFF; text-shadow: 0 0 6px rgba(190,140,255,.45); }

  /* Footer lines (Boss, 2026-09-25): bigger, bolder, coloured. */
  .sop-foot { font-size: 12.5px; line-height: 1.75; }
  .sop-foot .f-rank { display: block; font-size: 13.5px; font-weight: 800; color: var(--green); }
  .sop-foot .f-win  { display: block; font-size: 13.5px; font-weight: 800; color: var(--gold); }
  .sop-foot .f-mkt  { display: block; font-size: 13.5px; font-weight: 800; color: #BE8CFF; }
  .sop-foot .f-edge { display: block; font-size: 13.5px; font-weight: 800; color: #FF8C42; }
  .sop-foot .f-val  { display: block; font-size: 13.5px; font-weight: 800; color: #FF8C42; }
  .sop-foot .f-note { display: block; font-size: 12.5px; font-weight: 700; color: #FFB450; }
  /* Live Top-3 explainer under the PREDICTIONS wordmark (Boss, 2026-10-01): the SAME .f-note
     treatment, only spaced off the column grid below it. */
  .sop-foot .f-note.f-live { margin: 0 0 6px; }

/* 1st/2nd/3rd/4th as rounded COINS (Boss, 2026-09-29). Gold / silver / bronze / slate,
   a circular metallic badge so the placing reads at a glance. Falls back to slate for 5th+. */
.res-pos,.result-row .pos{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:26px;height:26px;border-radius:50%;
  font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:800;letter-spacing:0;
  background:linear-gradient(160deg,#6b7484,#4a5162 60%,#2c313c);color:#e8ecf3;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22), 0 1px 3px rgba(0,0,0,.5);
}
.res-pos.p1,.result-row .pos.p1{background:linear-gradient(160deg,#ffe08a,#f0b90b 58%,#a9780a);color:#241a00}
.res-pos.p2,.result-row .pos.p2{background:linear-gradient(160deg,#f2f5fa,#c3c9d4 58%,#848c9a);color:#191d24}
.res-pos.p3,.result-row .pos.p3{background:linear-gradient(160deg,#f2bd8d,#cd7f32 58%,#7d4a1c);color:#241000}
.res-pos.p4,.result-row .pos.p4{background:linear-gradient(160deg,#79828f,#4a5162 58%,#262b34);color:#eef1f6}

/* Course-map lightbox (Boss, 2026-09-29): tap any map to maximise, tap anywhere to minimise. */
.sop-track{cursor:zoom-in}
.tracklb{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  background:rgba(6,8,12,.93);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  padding:14px;cursor:zoom-out}
.tracklb.on{display:flex}
.tracklb img{max-width:94vw;max-height:82vh;width:auto;height:auto;border-radius:14px;
  border:1px solid rgba(255,255,255,.18);box-shadow:0 20px 60px rgba(0,0,0,.72);background:#0b0d12}
.tracklb .tracklb-hint{position:absolute;bottom:22px;left:0;right:0;text-align:center;
  color:#94a3b8;font-size:12px;font-weight:600;letter-spacing:.4px}

/* PREDICTIONS heading above the rank top-3 (Boss, 2026-09-29): a gradient wordmark with a
   fading rule, so each race card announces its picks as a section rather than a bare line. */
.sop-foot .f-preds{display:flex;align-items:center;gap:10px;margin:0 0 8px}
.sop-foot .f-preds span{font-size:10.5px;font-weight:900;letter-spacing:2.4px;text-transform:uppercase;
  background:linear-gradient(90deg,#f0b90b 0%,#22d3ee 48%,#be8cff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 18px rgba(34,211,238,.14)}
.sop-foot .f-preds:after{content:"";flex:1;height:1px;border-radius:1px;
  background:linear-gradient(90deg,rgba(240,185,11,.5),rgba(34,211,238,.2),transparent)}

/* Predictions as TWO VERTICAL COLUMNS (Boss, 2026-10-11): Top3 Rank then Top3 Value, each a
   column with its own heading and the three picks stacked under it. */
.sop-foot .f-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 8px}
.sop-foot .f-col{min-width:0}
.sop-foot .f-col b{display:block;font-size:9px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase;
  margin:0 0 5px}
.sop-foot .f-col b.f-rank{color:var(--green)}
.sop-foot .f-col b.f-win{color:var(--accent2)}
.sop-foot .f-col b.f-mkt{color:#BE8CFF}
.sop-foot .f-col b.f-edge{color:#FF8C42}
.sop-foot .f-col b.f-val{color:#FF8C42}
.sop-foot .f-e{display:block;font-size:10px;line-height:1.35;color:var(--text2);overflow-wrap:anywhere}
.sop-foot .f-e i{font-style:normal;color:#ef4444;font-weight:800;margin-right:2px}
.sop-foot .f-e .f-ov{display:inline;color:#FF8C42;font-weight:800;font-size:inherit;letter-spacing:0;text-transform:none}
.sop-foot .f-e .cp-at{display:inline;color:var(--text3);font-weight:600}
/* Top-3 change mark (Riz, 2026-10-01): a horse that ENTERS or MOVES inside a column blinks so
   the change reads at a glance. BOUNDED motion (3 pulses, ~2.4s) then a low-key steady tint
   that survives until the next refresh (<=60s) — a bounded signal, never a permanent strobe.
   Reduced motion KEEPS the tint and drops the animation (same rule as the arrows); a settled
   race never gets it (the class is not emitted, and this guard stops it regardless). */
.sop-foot .f-e-chg{border-radius:3px;background:rgba(34,211,238,.14);
  box-shadow:inset 0 0 0 1px rgba(34,211,238,.45);
  animation:sopTop3Chg 1s ease-in-out infinite}
@keyframes sopTop3Chg{
  0%,100%{background:rgba(34,211,238,.14);box-shadow:inset 0 0 0 1px rgba(34,211,238,.45)}
  50%{background:rgba(34,211,238,.72);box-shadow:inset 0 0 8px 1px rgba(191,244,255,.9)}}
@media (prefers-reduced-motion: reduce){
  .sop-foot .f-e-chg{animation:none !important}}
[data-settled="1"] .sop-foot .f-e-chg{animation:none !important}

/* Market divergence as a NEWS TICKER (Boss, 2026-09-30): the divergence line scrolls
   left -> right and pulses bright while it is live. It only pulses when there IS a
   divergence — "No market divergence" stays calm. Animation off for reduced-motion. */
.f-ticker{position:relative;overflow:hidden;margin:3px 0 0;padding:6px 0;
  border-top:1px solid rgba(239,68,68,.22);border-bottom:1px solid rgba(239,68,68,.22);
  background:linear-gradient(90deg,rgba(239,68,68,.03),rgba(239,68,68,.08),rgba(239,68,68,.03))}
.f-ticker-in{display:inline-flex;gap:56px;white-space:nowrap;will-change:transform;
  animation:tickLR 16s linear infinite}
.f-ticker .div{font-size:12.5px;font-weight:800;color:#ff8a7a;letter-spacing:.3px}
.f-ticker.hot .f-ticker-in{animation:tickLR 16s linear infinite, divblink 1.15s ease-in-out infinite}
@keyframes tickLR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@keyframes divblink{0%,100%{opacity:1;text-shadow:0 0 12px rgba(255,110,70,.9)}
  50%{opacity:.55;text-shadow:0 0 3px rgba(255,110,70,.25)}}
@media (prefers-reduced-motion: reduce){.f-ticker-in{animation:none !important}}
/* Late SCRATCHING ticker (Boss, 2026-09-30): the SAME motion/pulse/loop as the divergence
   ticker above, amber-tinted to read as a distinct event. Rendered ONLY when the race has a
   scratched runner — an empty ticker is noise. Off under prefers-reduced-motion (inherited). */
.f-ticker.scr{border-top-color:rgba(251,191,36,.30);border-bottom-color:rgba(251,191,36,.30);
  background:linear-gradient(90deg,rgba(251,191,36,.03),rgba(251,191,36,.09),rgba(251,191,36,.03))}
.f-ticker.scr .div{color:#fcd34d}
/* LONG SHOT / outsider ticker (Boss, 2026-09-30): the SAME motion/pulse/seamless loop as the
   divergence and scratching tickers, in a THIRD colour — violet — that reads cleanly on the
   dark card and cannot be confused with the divergence red/orange or the scratching amber.
   Rendered ONLY when a runner's trainer is genuinely overdue at this venue. Off under
   prefers-reduced-motion (inherited from the .f-ticker-in rule above). */
.f-ticker.ls{border-top-color:rgba(167,139,250,.32);border-bottom-color:rgba(167,139,250,.32);
  background:linear-gradient(90deg,rgba(167,139,250,.03),rgba(167,139,250,.10),rgba(167,139,250,.03))}
.f-ticker.ls .div{color:#c4b5fd}
.f-ticker.ls.hot .f-ticker-in{animation:tickLR 16s linear infinite, lsblink 1.15s ease-in-out infinite}
@keyframes lsblink{0%,100%{opacity:1;text-shadow:0 0 12px rgba(167,139,250,.9)}
  50%{opacity:.6;text-shadow:0 0 3px rgba(167,139,250,.25)}}

/* ── Whole-meeting BEST BETS on /tips (Boss, 2026-10-03) ──────────────────────────
   The same three-group card the app shows below its calendar, here below the race
   board. A .sop-card-like panel in the existing card language: card fill + border +
   radius, monospace figures, gold race chips, accent2 values. Subscriber-only (the
   page is); values are printed verbatim from the payload's `meeting_picks`. Reads at
   1280px and 390px — the value grid keeps a fixed race/no pair and lets the name
   ellipsis; long-shot rows wrap their plain-words qualifier onto its own line. */
/* Race calendar control card on the predictions page (Boss, 2026-10-03): a compact link
   that opens /calendar, so the web page reads in the SAME order as the app — calendar
   control → Best bets → the race cards. Public; it is only a schedule. */
.meet-tool { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  cursor: pointer; text-decoration: none; color: var(--text);
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(240,185,11,.28); border-radius: var(--radius);
  padding: 14px 18px; backdrop-filter: blur(12px); }
.meet-tool:hover { border-color: rgba(240,185,11,.6); }
.meet-tool .mt-ico { font-size: 20px; flex: 0 0 auto; filter: drop-shadow(0 0 8px rgba(240,185,11,.4)); }
.meet-tool .mt-body { flex: 1 1 auto; min-width: 0; }
.meet-tool .mt-txt { display: block; font-size: 15px; font-weight: 800; letter-spacing: .01em; }
.meet-tool .mt-sub { display: block; font-size: 12px; font-weight: 600; color: var(--text3);
  letter-spacing: .02em; margin-top: 2px; }
.meet-tool .mt-chev { color: var(--gold); font-size: 20px; flex: 0 0 auto; }

.tips-picks { margin-top: 16px; }
.tips-picks:empty { display: none; }
.tips-picks .tp-in {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0; backdrop-filter: blur(12px);
}
/* Collapsible Best-bets card (Boss, 2026-10-03): the SAME toggle language as a race card
   (.sop-card / .sop-head / .sop-body, chevron rotate, .open), collapsed by default, state kept
   in _openPicks across every loadTips() re-render. */
.tips-picks .tp-in .sop-headlines { flex: 1 1 auto; }
.tips-picks .cp-body { padding: 14px 20px 18px; }
.tips-picks .cp-title { font-size: 15px; font-weight: 900; letter-spacing: .01em; }
.tips-picks .cp-title .cp-star { margin-right: 3px; }
.tips-picks .cp-sub { color: var(--text3); font-size: 11.5px; margin-top: 3px; line-height: 1.45; }
/* Recalc note (Boss, 2026-10-03): picks move with the going + live totes, with the payload's
   own refresh time. Time omitted entirely when `updated` is absent. */
.tips-picks .cp-note { color: var(--text3); font-size: 11px; margin-top: 4px; line-height: 1.45; }
/* Sort control for the whole-meeting picks (Boss, 2026-10-06): ONE segmented control beside the
   groups — Race no. · % · pts. It re-orders the SAME picks the payload sends (never a different
   selection, never an invented metric), starts UNSET so a first load keeps today's ordering, and
   the choice is kept in _picksSort across the 60s refresh, exactly like _openPicks. Reuses the
   page's existing .cur-toggle segmented language. */
.tips-picks .cp-sort { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; flex-wrap: wrap; }
.tips-picks .cp-sort-lab { color: var(--text3); font-size: 10px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; }
.tips-picks .cp-sort .cur-toggle button { padding: 4px 12px; }
.tips-picks .cp-group { margin-top: 15px; }
.tips-picks .cp-gh { display: flex; align-items: baseline; gap: 8px; margin: 0 0 7px; flex-wrap: wrap; }
.tips-picks .cp-gh b { font-size: 12.5px; font-weight: 900; letter-spacing: .02em; }
.tips-picks .cp-gh span { color: var(--text3); font-size: 10px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; }
.tips-picks .cp-gh .cp-cur { color: var(--accent2); }
.tips-picks .cp-row {
  display: grid; grid-template-columns: 40px 34px minmax(0, 1fr) auto; align-items: center;
  gap: 8px; padding: 7px 11px; border-radius: 10px; background: rgba(255,255,255,.03);
  border: 1px solid var(--border); margin-bottom: 6px;
}
.tips-picks .cp-race { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 900;
  color: var(--gold); background: rgba(240,185,11,.12); border-radius: 6px; padding: 2px 0;
  text-align: center; }
.tips-picks .cp-no { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 800;
  color: var(--text3); text-align: right; }
.tips-picks .cp-name { font-size: 13.5px; font-weight: 700; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.tips-picks .cp-val { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 800;
  color: var(--accent2); white-space: nowrap; text-align: right; }
.tips-picks .cp-val .cp-at { color: var(--text3); font-weight: 600; }
.tips-picks .cp-row.cp-ls { display: block; padding: 8px 11px; }
.tips-picks .cp-ls .cp-ls-top { display: flex; align-items: center; gap: 8px; }
.tips-picks .cp-ls .cp-ls-top .cp-race, .tips-picks .cp-ls .cp-ls-top .cp-no { flex: 0 0 auto; }
.tips-picks .cp-ls .cp-ls-top .cp-name { flex: 1 1 auto; }
.tips-picks .cp-ls-lab { color: var(--text2); font-size: 11.5px; margin-top: 5px; line-height: 1.4; }
.tips-picks .cp-empty { color: var(--text3); font-size: 12px; padding: 6px 2px; line-height: 1.45; }
.tips-picks .cp-locked { color: var(--text2); font-size: 13px; line-height: 1.5; }
.tips-picks .cp-locked a { color: var(--accent2); font-weight: 700; }
/* Best-Predictions change mark (Boss, 2026-10-03): the SAME bounded blink + holding tint as
   the race card's Top3 columns (reuses the sopTop3Chg keyframes) — a pick that ENTERS, LEAVES,
   MOVES or whose displayed value (WIN% / EDGE pts) changed since the previous render blinks
   ~3 cycles then holds a low-key cyan tint until the next change. Reduced motion keeps the
   tint, drops the animation. */
.tips-picks .cp-row.cp-chg { border-radius: 10px; background: rgba(34,211,238,.14);
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.45);
  animation:sopTop3Chg 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .tips-picks .cp-row.cp-chg { animation: none !important; } }

/* ── Race calendar page (/calendar, Boss, 2026-10-03) ──────────────────────────────
   A PUBLIC port of the app's fixture calendar to the website: the same 7-column month
   grid, month paging, Sha Tin (gold) / Happy Valley (emerald) dots + legend, today/next
   markers and a tap-to-open day detail. Fed by the PUBLIC /api/fixtures and rendered by
   site.js (initCalendar). Not an overlay here — a normal page panel. ── */
.cal-panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 20px 16px;backdrop-filter:blur(12px);position:relative}
.cal-panel:before{content:'';position:absolute;top:0;left:10%;right:10%;height:3px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--green2),transparent);opacity:.95}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.cal-title{font-size:17px;font-weight:800}
.cal-sub{color:var(--text3);font-size:12.5px;margin:4px 0 12px;line-height:1.5}
.cal-nav{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 12px}
.cal-month{font-size:16px;font-weight:900;letter-spacing:.02em}
.cal-pg{background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text);
  border-radius:10px;width:44px;height:38px;font-size:18px;line-height:1;cursor:pointer;flex:0 0 auto}
.cal-pg:disabled{opacity:.32;cursor:default}
.cal-pg:not(:disabled):hover{border-color:var(--gold)}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:0 0 6px}
.cal-dow span{text-align:center;color:var(--text3);font-size:9.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-cell{position:relative;min-height:52px;border-radius:11px;border:1px solid transparent;
  padding:6px 4px 5px;text-align:center;background:rgba(255,255,255,.015)}
.cal-cell .cal-d{font-size:12px;color:var(--text3);font-family:'JetBrains Mono',monospace;display:block}
.cal-cell.race{background:linear-gradient(160deg,rgba(240,185,11,.14),rgba(240,185,11,.04));
  border-color:rgba(240,185,11,.42);cursor:pointer}
.cal-cell.race.v-hv{background:linear-gradient(160deg,rgba(52,211,153,.16),rgba(52,211,153,.04));
  border-color:rgba(52,211,153,.42)}
.cal-cell.race .cal-d{color:var(--text);font-weight:800}
.cal-cell.race:hover{border-color:var(--gold)}
.cal-cell .cal-v{display:block;font-size:8.5px;font-weight:900;letter-spacing:.08em;margin-top:3px}
.cal-v.st{color:var(--gold)}
.cal-v.hv{color:var(--green2)}
.cal-cell .cal-n{display:block;font-size:8.5px;font-weight:700;color:var(--text3);margin-top:1px}
.cal-cell.today{box-shadow:0 0 0 2px var(--gold) inset}
.cal-cell.today .cal-d:after{content:'';position:absolute;top:6px;right:6px;width:5px;height:5px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 7px var(--gold)}
.cal-cell.next{background:linear-gradient(160deg,rgba(240,185,11,.26),rgba(240,185,11,.07));
  border-color:rgba(240,185,11,.7)}
.cal-cell.next .cal-n{color:var(--gold);font-weight:900}
.cal-cell.sel{outline:2px solid var(--green2);outline-offset:-2px}
.cal-none{color:var(--text3);font-size:12.5px;padding:14px 4px;line-height:1.5;text-align:center}
.cal-detail{margin-top:14px;background:rgba(255,255,255,.03);border:1px solid var(--border);
  border-radius:14px;padding:13px 14px}
.cal-detail.v-hv{border-color:rgba(52,211,153,.45)}
.cal-detail.v-st{border-color:rgba(240,185,11,.45)}
.cal-detail .cd-h{font-size:15px;font-weight:900;letter-spacing:.01em}
.cal-detail .cd-l{color:var(--text2);font-size:12px;margin-top:5px;line-height:1.6}
.cal-detail .cd-venue{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.06em;
  border-radius:6px;padding:2px 8px;margin-top:8px}
.cd-venue.st{background:rgba(240,185,11,.16);color:var(--gold)}
.cd-venue.hv{background:rgba(52,211,153,.16);color:var(--green2)}
.cal-detail .cd-badge{display:inline-block;font-size:10.5px;font-weight:800;border-radius:6px;
  padding:3px 9px;margin:9px 0 0 6px;background:rgba(52,211,153,.16);color:var(--green2)}
.cal-detail .cd-badge.warn{background:rgba(240,185,11,.16);color:var(--gold)}
.cal-detail .cd-badge.mute{background:rgba(140,150,168,.16);color:var(--text3)}
.cal-open{margin-top:12px;display:inline-block}
button.cal-open{background:transparent;cursor:pointer;font-family:inherit}
.cal-note{color:var(--text3);font-size:11px;line-height:1.5;margin-top:9px}
.cal-legend{display:flex;gap:18px;justify-content:center;color:var(--text3);font-size:11px;margin-top:14px}
.cal-legend .cal-dot{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:6px;vertical-align:middle}
.cal-dot.st{background:var(--gold);box-shadow:0 0 7px rgba(240,185,11,.5)}
.cal-dot.hv{background:var(--green2);box-shadow:0 0 7px rgba(52,211,153,.5)}
/* Past-meeting card / results opened from a tapped past date (Boss, 2026-10-03). A compact
   list inside the day-detail panel — the same markup on the app sheet, so the two agree. */
.cal-past{margin-top:12px}
.cal-past .pm-head{margin-bottom:8px}
.cal-past .pm-title{font-size:13.5px;font-weight:900}
.cal-past .pm-sub{color:var(--text3);font-size:11px;margin-top:3px}
.cal-past .pm-lock,.cal-past .pm-locked{color:var(--text3);font-size:11px;line-height:1.5;
  background:rgba(255,255,255,.03);border:1px dashed var(--border);border-radius:8px;
  padding:7px 9px;margin:8px 0}
.cal-past .pm-lock a{color:var(--gold)}
.cal-past .pm-note{color:var(--text3);font-size:11px;line-height:1.5;margin:6px 0}
.cal-past .pm-race{border:1px solid var(--border);border-radius:10px;padding:8px 9px;margin-top:8px;
  background:rgba(255,255,255,.02)}
.cal-past .pm-race-h{font-size:12px;font-weight:800;margin-bottom:5px}
.cal-past .pm-race-h .pm-meta{color:var(--text3);font-weight:600;font-size:10.5px}
.cal-past .pm-rows{display:flex;flex-direction:column;gap:2px}
.cal-past .pm-row{display:grid;grid-template-columns:18px 34px 1fr auto auto auto;gap:6px;
  align-items:center;font-size:11px;color:var(--text2);padding:3px 4px;border-radius:6px}
.cal-past .pm-row.top1{background:rgba(240,185,11,.12)}
.cal-past .pm-row.top2,.cal-past .pm-row.top3{background:rgba(255,255,255,.03)}
.cal-past .pm-row.win{background:rgba(52,211,153,.14)}
.cal-past .pm-pos{color:var(--text3);font-weight:800;font-size:10px}
.cal-past .pm-no{font-weight:800;color:var(--text3);font-size:10px}
.cal-past .pm-nm{color:var(--text);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-past .pm-jk,.cal-past .pm-drw,.cal-past .pm-margin{color:var(--text3);font-size:10px;white-space:nowrap}
.cal-past .pm-pct{font-weight:800;color:var(--green2);white-space:nowrap}
.cal-past .pm-divs{color:var(--text3);font-size:10px;margin-top:5px;line-height:1.5}
.cal-past .pm-divs-est{color:#f0c674}
.res-divs-est .res-div-head{color:#f0c674}
.cal-past .pm-none{color:var(--text3);font-size:11.5px;line-height:1.5}
@media (max-width:520px){
  .cal-panel{padding:16px 12px 14px}
  .cal-cell{min-height:46px}
}

/* ── Words of wisdom (Boss, 2026-10-11): a rotating horse-racing quote card at the BOTTOM of the
   tips/home content. Additive only — it never touches an existing card, the header lines, the
   model or the serve path. The rotation index lives in site.js (module scope) so it survives the
   60s re-render; the timer changes the quote with a soft fade, no tap needed. */
.wisdom-card {
  margin-top: 26px; background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; backdrop-filter: blur(12px);
  transition: border-color .25s;
}
.wisdom-card:hover { border-color: var(--border-hover); }
.wisdom-card:empty { display: none; }
.wisdom-card .wc-head {
  display: flex; align-items: center; gap: 8px; padding: 13px 18px;
  background: rgba(12,13,20,.85); border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold);
}
.wisdom-card .wc-head .wc-star { font-size: 15px; }
.wisdom-card .wc-body {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px 18px;
  transition: opacity .35s ease;
}
.wisdom-card.wc-fade .wc-body { opacity: 0; }
.wisdom-card .wc-photo {
  width: 92px; height: 92px; flex: 0 0 auto; border-radius: 12px; object-fit: cover;
  border: 1px solid var(--border); background: #0c0c1a; display: block;
}
.wisdom-card .wc-text { min-width: 0; }
.wisdom-card .wc-quote {
  font-size: 15px; line-height: 1.5; color: var(--text); font-weight: 500; font-style: italic;
}
.wisdom-card .wc-attr {
  margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--gold); letter-spacing: .02em;
}
@media (max-width: 520px) {
  .wisdom-card .wc-photo { width: 74px; height: 74px; }
  .wisdom-card .wc-quote { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .wisdom-card .wc-body { transition: none; }
}

/* "What the columns mean" — rebuilt (Boss, 2026-10-11): grouped, emoji, colour-coded. */
  /* "What the columns mean" — rebuilt (Boss, 2026-10-11): EVERY race-card column, grouped, each
     with an emoji, a colour-coded label and a plain-words explanation. Larger type than the old
     wall of text so it reads on a phone. */
  .cols-key{margin-top:16px;border-top:1px solid rgba(255,255,255,.07);padding-top:12px}
  .cols-key summary{cursor:pointer;font-size:14px;font-weight:800;letter-spacing:.02em;color:#7FB3FF}
  .wl-h{font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#FFD24A;margin:16px 0 6px;display:flex;align-items:center;gap:7px}
  .wl-h span{font-size:14px}
  .wl-row{display:flex;gap:10px;align-items:flex-start;padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.07)}
  .wl-row:last-child{border-bottom:none}
  .wl-ico{flex:0 0 auto;width:26px;text-align:center;font-size:16px;line-height:1.3}
  .wl-b{flex:1 1 auto;min-width:0}
  .wl-k{font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:800;letter-spacing:.02em}
  .wl-d{font-size:12.5px;line-height:1.55;color:#9AA6B8;margin-top:2px}
  .wl-k.k-id{color:#E6EAF2}.wl-k.k-mod{color:#FFD24A}.wl-k.k-mkt{color:#BE8CFF}
  .wl-k.k-cond{color:#4ADE80}.wl-k.k-tote{color:#FFB43C}.wl-k.k-jt{color:#FF8FD1}
  .wl-k.k-brd{color:#22D3EE}.wl-k.k-neg{color:#FF8C42}
  .wl-k.k-step{font-family:inherit;font-size:13.5px;font-weight:800;letter-spacing:0;line-height:1.4}

/* ─── Racing People (jockey + trainer directory + profiles) — Boss, 2026-10-11 ───────────────
   Additive only: a new page's styles. Reuses the site's colour tokens; touches no card rule. */
.ppl-sec{margin-top:30px}
.ppl-sec-h{font-size:13px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.ppl-sec-n{font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--text3)}
.ppl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ppl-card{display:flex;align-items:center;gap:12px;text-align:left;width:100%;cursor:pointer;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;
  color:var(--text);font-family:inherit;transition:border-color .2s,transform .15s,background .2s}
.ppl-card:hover{border-color:var(--border-hover);transform:translateY(-2px);background:rgba(22,22,52,.7)}
.ppl-cbody{flex:1 1 auto;min-width:0}
.ppl-name{display:block;font-weight:700;font-size:14.5px;line-height:1.2}
.ppl-meta{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:5px;align-items:baseline}
.ppl-k{font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text3)}
.ppl-meta b{font-family:'JetBrains Mono',monospace;font-size:12.5px;color:var(--gold3);margin-left:-6px}
.ppl-chev{color:var(--text3);font-size:20px;flex:0 0 auto}
.ppl-photo{flex:0 0 auto;width:64px;height:64px;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1b1b3a,#101024);border:1px solid var(--border)}
.ppl-photo img{width:100%;height:100%;object-fit:cover;display:block}
.ppl-photo.sm{width:46px;height:46px;border-radius:10px}
.ppl-avatar{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:20px;letter-spacing:.02em;color:var(--gold);background:linear-gradient(135deg,#241d05,#0f0f22)}
.ppl-photo.sm.ppl-avatar{font-size:15px}
.ppl-loading{color:var(--text2);padding:18px 0;font-size:14px}
.ppl-range{margin:0 0 16px;padding:10px 14px;border-radius:12px;background:rgba(240,185,11,.08);border:1px solid rgba(240,185,11,.22);color:var(--text2);font-size:12.5px;line-height:1.5}

.ppl-back{margin-top:22px}
.ppl-back-btn{cursor:pointer;background:none;border:1px solid var(--border);border-radius:999px;color:var(--text2);
  font-family:inherit;font-size:12.5px;font-weight:600;padding:7px 14px;transition:color .2s,border-color .2s}
.ppl-back-btn:hover{color:var(--text);border-color:var(--border-hover)}
.ppl-phead{display:flex;gap:18px;align-items:center;margin:20px 0 8px}
.ppl-ptitle h2{font-size:26px;font-weight:800;margin:0}
.ppl-ptype{color:var(--text2);font-size:13.5px;margin-top:4px}
.ppl-credit{color:var(--text3);font-size:11px;margin-top:6px}
.ppl-credit a{color:var(--cyan2);text-decoration:none}
.ppl-live{margin:12px 0;padding:11px 14px;border-radius:12px;background:rgba(240,185,11,.08);border:1px solid rgba(240,185,11,.22);font-size:13.5px;color:var(--text)}
.ppl-live b{color:var(--gold3);font-family:'JetBrains Mono',monospace}
.ppl-stats{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 6px}
.ppl-stat{flex:1 1 90px;min-width:84px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:11px 10px;text-align:center}
.ppl-stat b{display:block;font-family:'JetBrains Mono',monospace;font-size:18px;color:var(--gold3)}
.ppl-stat span{display:block;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-top:4px}
.ppl-h{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text2);margin:22px 0 8px;display:flex;gap:10px;align-items:baseline}
.ppl-cap{font-size:10.5px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--text3)}
.ppl-tbl{width:100%;border-collapse:collapse;font-size:13px}
.ppl-tbl th{text-align:left;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);padding:6px 8px;border-bottom:1px solid var(--border);font-weight:700}
.ppl-tbl td{padding:6px 8px;border-bottom:1px solid rgba(255,255,255,.04)}
.ppl-tbl td.n{text-align:right;font-family:'JetBrains Mono',monospace;font-size:12px}
.ppl-bio,.ppl-para{font-size:13.5px;line-height:1.65;color:var(--text)}
.ppl-facts{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:12px}
.ppl-fact{font-size:13px;color:var(--text2)}
.ppl-fact b{color:var(--text);margin-left:6px}
.ppl-hphoto{margin:0 0 12px}
.ppl-hphoto img{width:64px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--border);display:block;background:rgba(255,255,255,.03);cursor:zoom-in}
.ppl-hphoto img:active{outline:2px solid rgba(255,179,71,.6)}
.ppl-ach{margin:10px 0 0 18px;font-size:13.5px;line-height:1.6}
.ppl-ach li{margin-bottom:4px}
.ppl-src{margin-top:12px;font-size:11.5px;color:var(--text3)}
.ppl-src a{color:var(--cyan2);text-decoration:none}
.ppl-rel{display:flex;flex-wrap:wrap;gap:8px}
.ppl-rel-i{font-size:12.5px;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text)}
button.ppl-rel-i{cursor:pointer;font-family:inherit;transition:border-color .2s}
button.ppl-rel-i:hover{border-color:var(--border-hover)}
.ppl-rel-m{color:var(--text3);font-size:11px}
.ppl-notable-i{font-size:12.5px;padding:5px 0;border-bottom:1px dashed rgba(255,255,255,.06);color:var(--text2)}
.ppl-notable-i b{color:var(--gold3)}
.ppl-links{display:flex;flex-direction:column;gap:8px}
.ppl-link{display:block;text-decoration:none;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:11px 14px;transition:border-color .2s}
.ppl-link:hover{border-color:var(--border-hover)}
.ppl-link-t{display:block;color:var(--text);font-size:13.5px;font-weight:600}
.ppl-link-m{display:block;color:var(--text3);font-size:11px;margin-top:3px}
.ppl-none{color:var(--text2);font-size:13.5px;padding:14px 0}
.ppl-note{margin-top:26px;padding-top:14px;border-top:1px solid var(--border);color:var(--text3);font-size:11.5px;line-height:1.6}
/* Tabs inside Racing people (Boss, 2026-10-12): Jockeys | Trainers, default Jockeys. The chosen
   tab survives a re-render and a refresh (localStorage). */
.ppl-tabs{display:flex;gap:10px;margin:2px 0 18px}
.ppl-tab{flex:1 1 0;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:800;letter-spacing:.03em;
  padding:11px 12px;border-radius:12px;background:var(--card);border:1px solid var(--border);color:var(--text2);transition:border-color .2s,color .2s}
.ppl-tab:hover{border-color:var(--border-hover)}
.ppl-tab.on{background:rgba(240,185,11,.12);border-color:rgba(240,185,11,.55);color:var(--gold3)}
.ppl-tab .ppl-tab-n{font-family:'JetBrains Mono',monospace;font-weight:700;opacity:.8;margin-left:7px}
/* Horses directory (Boss, 2026-10-12): a SEARCH box above the grid (several hundred horses),
   reusing the .ppl-* card/grid so the page matches the People directory exactly. */
.ppl-search{margin:2px 0 18px}
.ppl-search input{width:100%;box-sizing:border-box;font-family:inherit;font-size:14px;color:var(--text);
  background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;outline:none}
.ppl-search input::placeholder{color:var(--text3)}
.ppl-search input:focus{border-color:var(--border-hover)}
/* A meta value that is TEXT (a name), not a mono figure — never rendered in the mono face. */
.hs-txt{font-family:inherit;font-weight:600;color:var(--text)}
/* Clickable photos + full-screen lightbox (Boss, 2026-10-12). */
.ppl-photo{cursor:zoom-in}
#pplphoto{position:fixed;inset:0;z-index:120;display:none;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;background:rgba(6,8,12,.95);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:20px;cursor:zoom-out}
#pplphoto.on{display:flex}
#pplphoto img{max-width:92vw;max-height:74vh;width:auto;height:auto;border-radius:16px;border:1px solid var(--border);box-shadow:0 18px 60px rgba(0,0,0,.6)}
#pplphoto .ppl-photo-name{font-size:18px;font-weight:800;color:var(--text);text-align:center}
#pplphoto .ppl-photo-hint{font-size:12px;color:var(--text3)}
#pplphoto .ppl-photo-av{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:64px;color:var(--gold);
  width:180px;height:180px;border-radius:22px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#241d05,#0f0f22);border:1px solid var(--border)}
@media (max-width:560px){.ppl-phead{flex-direction:row}.ppl-ptitle h2{font-size:22px}}
/* Season leaderboard (Boss, 2026-10-12): a one-tap standings table (rank · name · wins ·
   places · rides · win% · place%). Tapping a row opens the existing People profile. */
.lb-tabs{display:flex;gap:10px;margin:2px 0 18px}
.lb-tab{flex:1 1 0;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:800;letter-spacing:.03em;
  padding:11px 12px;border-radius:12px;background:var(--card);border:1px solid var(--border);color:var(--text2);transition:border-color .2s,color .2s}
.lb-tab:hover{border-color:var(--border-hover)}
.lb-tab.on{background:rgba(240,185,11,.12);border-color:rgba(240,185,11,.55);color:var(--gold3)}
.lb-tab .lb-tab-n{font-family:'JetBrains Mono',monospace;font-weight:700;opacity:.8;margin-left:7px}
.lb-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.lb-scroll .lb-tbl{min-width:460px}
.lb-tbl{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:14px}
.lb-tbl th{text-align:right;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--text3);
  padding:8px;border-bottom:1px solid var(--border);font-weight:700;white-space:nowrap}
.lb-tbl th.lb-rank,.lb-tbl th.lb-name{text-align:left}
.lb-tbl td{padding:9px 8px;border-bottom:1px solid rgba(255,255,255,.04);text-align:right}
.lb-tbl th.lb-rank,.lb-tbl td.lb-rank{width:48px}
.lb-tbl td.lb-rank{text-align:left;font-family:'JetBrains Mono',monospace;color:var(--text3);font-weight:700}
.lb-tbl th.lb-name,.lb-tbl td.lb-name{width:150px;min-width:150px}
.lb-tbl td.lb-name{text-align:left;font-weight:700;white-space:nowrap}
.lb-tbl td.n{font-family:'JetBrains Mono',monospace;font-size:12.5px}
/* The WINS column (3rd) needs a left margin: the frozen Rank+Name block ends at the column's
   left edge and its right-edge shadow would otherwise sit on the "W" (Boss, 2026-10-12). */
.lb-tbl th.lb-wins,.lb-tbl td.lb-wins{padding-left:14px}
/* Frozen first two columns (Boss, 2026-10-12): Rank + Name stay locked to the left while
   the remaining columns scroll sideways. position:sticky on cells needs
   border-collapse:separate (a collapsed table ignores sticky in several browsers); the
   per-cell bottom borders above are kept so the rows still read. The header cell sits
   above the body cell (z-index 3 vs 2) and the frozen Name cell carries a right edge
   shadow so the locked block reads as frozen.
   table-layout:fixed (added 2026-10-12) makes the Rank (48px) and Name (150px) widths
   DETERMINISTIC: in auto layout a long horse name grew the Name column past its 150px min,
   which shrank the Rank column below the 48px that the Name cell's sticky left:48px assumes
   — so the frozen Name cell slid ~7px right and clipped the WINS column's left edge. A long
   name is now truncated with an ellipsis (the full name rides in a title=). */
.lb-tbl th.lb-rank,.lb-tbl td.lb-rank{position:sticky;left:0;z-index:3;background:var(--bg)}
.lb-tbl th.lb-name,.lb-tbl td.lb-name{position:sticky;left:48px;z-index:3;background:var(--bg);
  border-right:1px solid var(--border);box-shadow:10px 0 10px -10px rgba(0,0,0,.75)}
.lb-tbl tbody td.lb-rank,.lb-tbl tbody td.lb-name{z-index:2}
.lb-row:hover td.lb-rank,.lb-row:hover td.lb-name{background-image:linear-gradient(rgba(240,185,11,.06),rgba(240,185,11,.06))}
.lb-row:focus td.lb-rank,.lb-row:focus td.lb-name{background-image:linear-gradient(rgba(240,185,11,.06),rgba(240,185,11,.06))}
.lb-row{cursor:pointer;transition:background .12s}
.lb-row:hover{background:rgba(240,185,11,.06)}
.lb-row:focus{outline:2px solid rgba(240,185,11,.5);outline-offset:-2px}
.lb-photo{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;
  overflow:hidden;background:linear-gradient(135deg,#1b1b3a,#101024);border:1px solid var(--border);vertical-align:middle;margin-right:10px}
.lb-photo img{width:100%;height:100%;object-fit:cover;display:block}
.lb-avatar{font-family:'JetBrains Mono',monospace;font-weight:800;font-size:11px;color:var(--gold)}
.lb-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-nm{vertical-align:middle}
/* Horses standings: the trainer rides as a muted second line under the horse name (Boss, 2026-10-12). */
.lb-sub{display:block;font-size:10.5px;font-weight:600;color:var(--text3);margin:1px 0 0 40px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:560px){.lb-tbl{font-size:12.5px}.lb-tbl th,.lb-tbl td{padding:7px 5px}.lb-photo{width:26px;height:26px;margin-right:7px}}