/* ═══════════════════════════════════════════════════
   TrackLab v2 — A/B Test Design System
   Fully isolated from main.css
   ═══════════════════════════════════════════════════ */

@media (min-width: 769px) {
  .v2-page { zoom: 1.33; }
}

.v2-page {
  /* Design tokens */
  --bg-deep: #0a0e17;
  --bg-card: #111827;
  --bg-card-hover: #1a2234;
  --bg-selected: #0f1d2e;
  --border: #1e293b;
  --border-active: #2563eb;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent-blue: #3b82f6;
  --accent-green: #22c55e;
  --accent-lime: #c8ff00;
  --accent-amber: #f59e0b;
  --accent-red: #ef4444;
  --accent-purple: #a78bfa;
  --score-great: #22c55e;
  --score-good: #84cc16;
  --score-mid: #f59e0b;
  --score-low: #ef4444;
  --radius: 10px;
  --radius-sm: 6px;

  /* Page layout */
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 20px;
  font-family: 'DM Sans', sans-serif;
  color: var(--text-primary);
}

/* Subtle background gradient overlay */
.v2-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(59,130,246,0.05) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(139,92,246,0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: -1;
}

/* ═══ SECTION LABELS ═══ */
.v2-page .section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-lime);
  margin-bottom: 4px;
}
.v2-page .section-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

/* ═══════════════════════════════════════════
   RACE LIST VIEW
   ═══════════════════════════════════════════ */
.v2-page .race-list { display: flex; flex-direction: column; gap: 8px; }

.v2-page .race-card {
  display: grid;
  grid-template-columns: 80px 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  color: inherit;
  min-width: 0;
}
.v2-page .race-card:hover {
  background: var(--bg-card-hover);
  border-color: rgba(200,255,0,0.2);
  transform: translateY(-1px);
}

.v2-page .race-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-lime);
  background: rgba(200,255,0,0.08);
  border: 1px solid rgba(200,255,0,0.15);
  border-radius: 6px;
  padding: 4px 8px;
  text-align: center;
  white-space: nowrap;
}

.v2-page .race-info { min-width: 0; }
.v2-page .race-info .race-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-page .race-info .race-name .race-num {
  color: var(--text-muted);
  font-weight: 500;
}
.v2-page .race-info .race-featured {
  color: var(--accent-lime);
  font-size: 13px;
  font-weight: 500;
}
.v2-page .race-countdown-mobile {
  display: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.v2-page .race-countdown-mobile .started {
  color: var(--accent-red);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.v2-page .race-countdown-mobile .dot {
  width: 5px; height: 5px;
  background: var(--accent-red);
  border-radius: 50%;
  display: inline-block;
  animation: v2pulse 1.5s ease-in-out infinite;
}
.v2-page .race-info .race-weather {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.v2-page .race-score-badge {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  border: 1px solid;
}
.v2-page .race-score-badge .num { font-size: 18px; line-height: 1; }
.v2-page .race-score-badge .lbl { font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1px; }
.v2-page .race-score-badge.high {
  background: rgba(200,255,0,0.1);
  border-color: rgba(200,255,0,0.3);
  color: var(--accent-lime);
}
.v2-page .race-score-badge.mid {
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.25);
  color: var(--accent-amber);
}

.v2-page .race-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
  text-align: right;
}
.v2-page .race-status .started {
  color: var(--accent-red);
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: flex-end;
}
.v2-page .race-status .started .dot {
  width: 6px; height: 6px;
  background: var(--accent-red);
  border-radius: 50%;
  animation: v2pulse 1.5s ease-in-out infinite;
}

@keyframes v2pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.v2-page .race-bet-btn {
  background: var(--accent-lime);
  color: #0a0e17;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.v2-page .race-bet-btn:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════
   LIVE RACE BANNER
   ═══════════════════════════════════════════ */
.v2-page .live-banner {
  background: var(--bg-card);
  border: 1px solid rgba(239,68,68,0.25);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
  scroll-margin-top: 130px;
  animation: v2fadeIn 0.35s ease;
}
.v2-page .live-banner:hover {
  border-color: rgba(239,68,68,0.4);
  transform: translateY(-1px);
  box-shadow: 0 6px 24px rgba(239,68,68,0.08);
}
.v2-page .live-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-red), var(--accent-amber), var(--accent-red));
  background-size: 200% 100%;
  animation: v2shimmer 3s ease-in-out infinite;
}
@keyframes v2shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
.v2-page .live-banner.expanded {
  border-radius: 12px 12px 0 0;
  margin-bottom: 0;
}
.v2-page .live-banner.expanded .lb-click-hint { display: none; }
.v2-page .live-banner.expanded .lb-track { display: none; }

.v2-page .lb-inner { padding: 14px 16px; }

.v2-page .lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.v2-page .lb-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.v2-page .lb-live-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  color: var(--accent-red);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 12px;
  flex-shrink: 0;
}
.v2-page .lb-live-chip .dot {
  width: 5px; height: 5px;
  background: var(--accent-red);
  border-radius: 50%;
  animation: v2pulse 1.5s ease-in-out infinite;
}

.v2-page .lb-title-block { min-width: 0; }
.v2-page .lb-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.v2-page .lb-title .race-num {
  color: var(--text-muted);
  font-weight: 500;
  font-size: 13px;
}
.v2-page .lb-time-venue {
  font-size: 12px;
  color: var(--text-muted);
}

.v2-page .lb-countdown { text-align: right; flex-shrink: 0; }
.v2-page .lb-countdown .cd-label {
  font-size: 9px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-red);
}
.v2-page .lb-countdown .cd-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 24px; font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
  animation: urgPulse 1.2s ease-in-out infinite;
}

.v2-page .lb-details {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.v2-page .lb-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 3px 8px;
}
.v2-page .lb-pill strong { color: var(--text-primary); font-weight: 600; }

.v2-page .lb-track { position: relative; padding: 0 2px; margin-top: 30px; }
.v2-page .lb-progress-bar {
  position: relative;
  height: 5px;
  background: rgba(255,255,255,0.05);
  border-radius: 3px;
  overflow: visible;
}
.v2-page .lb-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
  border-radius: 3px;
  position: relative;
  transition: width 0.5s ease;
}
.v2-page .lb-horse-marker {
  position: absolute;
  right: -11px;
  top: -9px;
  width: 22px; height: 22px;
  background: var(--accent-green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  box-shadow: 0 0 10px rgba(34,197,94,0.35);
  animation: v2bob 1.2s ease-in-out infinite;
}
.v2-page .lb-pct {
  position: absolute;
  transform: translateX(-50%);
  top: -25px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  color: var(--accent-green);
}
.v2-page .lb-track-labels {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em;
  margin-top: 5px;
}

.v2-page .lb-click-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 16px;
  background: rgba(239,68,68,0.04);
  border-top: 1px solid rgba(239,68,68,0.1);
  font-size: 11px; font-weight: 600;
  color: var(--text-muted);
  transition: color 0.15s;
}
.v2-page .live-banner:hover .lb-click-hint { color: var(--text-secondary); }
.v2-page .lb-click-hint .arrow { transition: transform 0.15s; }
.v2-page .live-banner:hover .lb-click-hint .arrow { transform: translateX(3px); }

/* Live banner inline detail connects visually */
.v2-page .live-banner + .race-inline-detail {
  border: 1px solid rgba(239,68,68,0.25);
  border-top: none;
  border-radius: 0 0 12px 12px;
  margin-top: -12px; /* close flex gap so banner + detail sit flush */
  margin-bottom: 20px;
}
.v2-page .live-banner + .race-inline-detail.open {
  background: var(--bg-card);
}

@media (max-width: 768px) {
  .v2-page .lb-header { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .v2-page .lb-title { font-size: 15px; }
  .v2-page .lb-pill { font-size: 10px; padding: 2px 6px; }
  .v2-page .lb-countdown .cd-time { font-size: 20px; }
}

/* ── Live section container (stacked banners) ── */
.v2-page .v2-live-section { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }

/* ── Live placeholder (no races running) ── */
.v2-page .live-placeholder {
  text-align: center; padding: 40px 16px; color: var(--text-muted);
  border: 1px dashed rgba(255,255,255,0.08); border-radius: 12px;
}
.v2-page .live-placeholder p { font-size: 15px; margin: 0 0 8px; }
.v2-page .live-placeholder-links { font-size: 13px; font-weight: 600; }
.v2-page .live-placeholder-links a { color: var(--accent-blue); text-decoration: none; }
.v2-page .live-placeholder-links a:hover { text-decoration: underline; }
.v2-page .live-placeholder-links .sep { margin: 0 6px; color: var(--text-muted); }

/* ── Collapsed live banner (non-promoted multi-live) ── */
.v2-page .live-banner.collapsed { cursor: pointer; }
.v2-page .live-banner.collapsed .lb-details { display: none; }
.v2-page .live-banner.collapsed .lb-click-hint { display: none; }

/* ── Awaiting Results state ── */
.v2-page .live-banner.awaiting { border-color: rgba(245,158,11,0.35); }
.v2-page .live-banner.awaiting::before { background: linear-gradient(90deg, rgba(245,158,11,0.12) 0%, rgba(245,158,11,0) 50%); }
.v2-page .live-banner.awaiting .lb-live-chip { background: rgba(245,158,11,0.15); color: #f59e0b; }
.v2-page .live-banner.awaiting .lb-live-chip .dot { background: #f59e0b; }
.v2-page .live-banner.awaiting .lb-progress-fill { background: linear-gradient(90deg, #f59e0b, #d97706); }

/* ── Empty state ── */
.v2-page .v2-empty-state {
  text-align: center; padding: 48px 16px; color: var(--text-muted);
}
.v2-page .v2-empty-state p { font-size: 15px; margin-bottom: 8px; }
.v2-page .v2-empty-state a {
  color: var(--accent-blue); text-decoration: none; font-size: 13px; font-weight: 600;
}
.v2-page .v2-empty-state a:hover { text-decoration: underline; }

/* ── Connection lost indicator ── */
.v2-page .v2-conn-lost {
  background: rgba(245,158,11,0.12); color: #f59e0b;
  text-align: center; padding: 6px 12px; font-size: 12px; font-weight: 600;
  border-radius: 8px; margin-bottom: 12px;
}

/* ── Enter/leave animations for dynamic DOM mutations ── */
.v2-page .race-row.entering,
.v2-page .live-banner.entering,
.v2-page .race-inline-detail.entering {
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.4s ease;
}
.v2-page .race-row.leaving,
.v2-page .live-banner.leaving,
.v2-page .race-inline-detail.leaving {
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.4s ease;
}

/* Hidden utility */
.v2-page .hidden { display: none !important; }

/* ═══════════════════════════════════════════
   TRACK VISUALIZATION (DOTTIE ANIMATION)
   ═══════════════════════════════════════════ */
.v2-page .v2-trk {
  width: 100%;
  height: 90px;
  position: relative;
  overflow: hidden;
  background: rgba(0,0,0,0.12);
  border-top: 1px solid rgba(200,255,0,0.03);
  border-bottom: 1px solid rgba(200,255,0,0.03);
  margin-bottom: 20px;
}

.v2-page .v2-trk::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg, transparent 0px, rgba(139,105,65,0.03) 2px,
    transparent 4px, rgba(80,60,30,0.02) 8px
  );
  background-size: 40px 100%;
  z-index: 0;
  pointer-events: none;
  animation: v2TrackScroll var(--parallax-speed, 3s) linear infinite paused;
}
.v2-page .v2-trk.racing::before { animation-play-state: running; }
@keyframes v2TrackScroll { to { background-position: -40px 0; } }

/* Track rails */
.v2-page .v2-tr-r {
  position: absolute;
  width: 100%;
  height: 1px;
}
.v2-page .v2-tr-t {
  top: 20%;
  background: linear-gradient(90deg, transparent, rgba(200,255,0,0.06) 15%, rgba(200,255,0,0.06) 85%, transparent);
}
.v2-page .v2-tr-b {
  bottom: 20%;
  background: linear-gradient(90deg, transparent, rgba(200,255,0,0.06) 15%, rgba(200,255,0,0.06) 85%, transparent);
}

/* Starting gate */
.v2-page .v2-tr-g {
  position: absolute;
  left: 4%;
  top: 15%;
  height: 70%;
  width: 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v2-page .v2-gs {
  flex: 1;
  background: rgba(200,255,0,0.15);
  border-radius: 1px;
}

/* Finish post */
.v2-page .v2-tr-f {
  position: absolute;
  right: 5%;
  top: 15%;
  height: 70%;
  width: 8px;
  background: repeating-conic-gradient(rgba(255,255,255,0.2) 0% 25%, transparent 0% 50%) 0 0 / 4px 4px;
  border-radius: 1px;
  opacity: 0.4;
}

/* Horse Lottie */
.v2-page .v2-horse {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  z-index: 3;
  width: 80px;
  height: 80px;
  margin-left: -40px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3));
  overflow: hidden;
}
.v2-page .v2-horse svg { display: block; width: 100%; height: 100%; }
.v2-page .v2-horse.idle { animation: v2IdleBob 2.5s ease-in-out infinite; }
@keyframes v2IdleBob {
  0%, 100% { transform: translateY(-50%) scaleX(-1); }
  50%      { transform: translateY(calc(-50% - 2px)) scaleX(-1); }
}
.v2-page .v2-horse.go { animation: none; }

/* Dust particles */
.v2-page .v2-dust-wrap {
  position: absolute;
  top: 50%;
  left: -10px;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
.v2-page .v2-dp {
  position: absolute;
  border-radius: 50%;
  background: var(--dust-color, rgba(139, 105, 65, 0.35));
}
.v2-page .v2-dp:nth-child(1) { width: 4px; height: 4px; top: -5px; left: 0;   animation: v2Df 0.45s ease-out infinite; }
.v2-page .v2-dp:nth-child(2) { width: 6px; height: 6px; top: 1px;  left: -4px; animation: v2Df 0.45s 0.07s ease-out infinite; }
.v2-page .v2-dp:nth-child(3) { width: 4px; height: 4px; top: 7px;  left: -2px; animation: v2Df 0.45s 0.14s ease-out infinite; }
@keyframes v2Df {
  0%   { transform: translate(0,0) scale(1); opacity: 0.5; }
  100% { transform: translate(-16px,0) scale(0.15); opacity: 0; }
}

/* Ghost horses */
.v2-page .v2-ghost-horse {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) scaleX(-1);
  z-index: 2;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  opacity: 0.25;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.3s;
}
.v2-page .v2-ghost-horse svg { display: block; width: 100%; height: 100%; }

/* "They're Off!" flash */
.v2-page .v2-trk-sw {
  position: absolute;
  inset: 0;
  left: -120%;
  background: linear-gradient(90deg, transparent, rgba(200,255,0,0.06) 40%, rgba(200,255,0,0.1) 50%, rgba(200,255,0,0.06) 60%, transparent);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}
.v2-page .v2-trk-sw.on { opacity: 1; animation: v2Sw 1.2s ease-out forwards; }
@keyframes v2Sw { to { left: 120%; } }

.v2-page .v2-trk-tx {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%) scale(0.5);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--lime, #c8ff00);
  text-shadow: 0 0 30px rgba(200,255,0,0.4);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}
.v2-page .v2-trk-tx.on { animation: v2Txf 1.4s cubic-bezier(0.34,1.56,0.64,1) forwards; }
@keyframes v2Txf {
  0%  { opacity: 0; transform: translate(-50%,-50%) scale(0.5); }
  12% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); }
  25% { transform: translate(-50%,-50%) scale(1); }
  70% { opacity: 1; }
  100%{ opacity: 0; }
}

/* Walk-to-post overlay */
.v2-page .v2-trk-walk {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  color: var(--red, #ef4444);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  z-index: 10;
  pointer-events: none;
}
.v2-page .v2-trk-walk.on {
  display: flex;
}

/* ═══════════════════════════════════════════
   EXPANDED RACE VIEW
   ═══════════════════════════════════════════ */
.v2-page .race-expanded-view { display: none; }
.v2-page .race-expanded-view.active { display: block; }
.v2-page .race-list-view.hidden { display: none; }
.v2-page .hidden { display: none !important; }

.v2-page .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  margin-bottom: 16px;
  transition: color 0.2s;
  background: none;
  border: none;
  font-family: inherit;
}
.v2-page .back-link:hover { color: var(--text-primary); }

.v2-page .exp-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 12px;
}

.v2-page .live-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  color: var(--accent-red);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 20px;
  text-transform: uppercase;
}
.v2-page .live-chip .dot {
  width: 5px; height: 5px;
  background: var(--accent-red);
  border-radius: 50%;
  animation: v2pulse 1.5s ease-in-out infinite;
}

.v2-page .exp-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.v2-page .exp-sub {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.v2-page .countdown { text-align: right; }
.v2-page .countdown .cd-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-red);
}
.v2-page .countdown .cd-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.v2-page .countdown .cd-time.pulsing {
  animation: v2urgPulse 1s ease-in-out infinite;
}
@keyframes v2urgPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* Meta pills */
.v2-page .exp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.v2-page .mp {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--text-secondary);
}
.v2-page .mp strong { color: var(--text-primary); font-weight: 600; }

/* Track note bar */
.v2-page .track-note-bar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  gap: 8px;
  flex-wrap: wrap;
}
.v2-page .track-note-bar .tn-type {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
}
.v2-page .track-note-bar .tn-desc {
  color: var(--text-muted);
}
.v2-page .track-note-bar .tn-hint {
  color: var(--accent-amber);
  font-style: italic;
}

/* Progress track */
.v2-page .track-vis {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 16px 12px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.v2-page .track-vis::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
}
.v2-page .progress-wrap {
  position: relative;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  margin: 20px 0 10px;
}
.v2-page .progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
  border-radius: 3px;
  position: relative;
  transition: width 0.3s ease;
}
.v2-page .marker {
  position: absolute;
  right: -12px;
  top: -9px;
  width: 24px;
  height: 24px;
  background: var(--accent-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 0 10px rgba(34,197,94,0.4);
  animation: v2bob 1.2s ease-in-out infinite;
}
@keyframes v2bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.v2-page .pct-label {
  position: absolute;
  left: 0%;
  transform: translateX(-50%);
  top: -18px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--accent-green);
  font-weight: 600;
}
.v2-page .track-ends {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ═══ DETAIL PANEL ═══ */
.v2-page .detail-panel {
  background: var(--bg-card);
  border: 1px solid var(--accent-blue);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
  animation: v2fadeIn 0.3s ease;
}
@keyframes v2fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.v2-page .detail-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
}
.v2-page .detail-panel.empty {
  border-color: var(--border);
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 24px 18px;
}
.v2-page .detail-panel.empty::before { display: none; }

.v2-page .dp-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
  gap: 12px;
  flex-wrap: wrap;
}
.v2-page .dp-horse-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.v2-page .silk-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-family: 'Outfit';
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.v2-page .silk-badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.v2-page .dp-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
/* ── Profile links (dotted underline for linked entities) ── */
.v2-page .profile-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--text-muted);
  transition: border-color 0.15s, color 0.15s;
}
.v2-page .profile-link:hover {
  color: var(--accent-lime);
  border-bottom-color: var(--accent-lime);
  border-bottom-style: solid;
}

.v2-page .dp-link {
  color: inherit;
  text-decoration: none;
}
.v2-page .dp-link[href] {
  border-bottom: 1px dotted var(--text-muted);
  transition: border-color 0.15s, color 0.15s;
}
.v2-page .dp-link[href]:hover {
  color: var(--accent-lime);
  border-bottom-color: var(--accent-lime);
  border-bottom-style: solid;
}
.v2-page .dp-horse-link {
  color: inherit;
  text-decoration: none;
}
.v2-page .dp-horse-link[href] {
  border-bottom: 1px dotted var(--text-muted);
  transition: border-color 0.15s, color 0.15s;
}
.v2-page .dp-horse-link[href]:hover {
  color: var(--accent-lime);
  border-bottom-color: var(--accent-lime);
  border-bottom-style: solid;
}

.v2-page .dp-score {
  text-align: center;
  border-radius: var(--radius);
  padding: 8px 16px;
}
.v2-page .dp-score .big {
  font-family: 'JetBrains Mono';
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
}
.v2-page .dp-score .lbl {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.v2-page .dp-score.s-great { background: rgba(34,197,94,0.06); border: 1px solid rgba(34,197,94,0.15); }
.v2-page .dp-score.s-great .big { color: var(--score-great); }
.v2-page .dp-score.s-great .lbl { color: var(--score-great); }
.v2-page .dp-score.s-good { background: rgba(132,204,22,0.06); border: 1px solid rgba(132,204,22,0.15); }
.v2-page .dp-score.s-good .big { color: var(--score-good); }
.v2-page .dp-score.s-good .lbl { color: var(--score-good); }
.v2-page .dp-score.s-mid { background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.15); }
.v2-page .dp-score.s-mid .big { color: var(--score-mid); }
.v2-page .dp-score.s-mid .lbl { color: var(--score-mid); }
.v2-page .dp-score.s-low { background: rgba(239,68,68,0.06); border: 1px solid rgba(239,68,68,0.15); }
.v2-page .dp-score.s-low .big { color: var(--score-low); }
.v2-page .dp-score.s-low .lbl { color: var(--score-low); }
.v2-page .dp-score.pre-market { border-style: dashed; opacity: 0.75; }
.v2-page .dp-score.pre-market .lbl { font-size: 8px; }

.v2-page .str-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.v2-page .str-item {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.v2-page .str-item .sl { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: 2px; }
.v2-page .str-item .sv { font-size: 12px; font-weight: 600; color: var(--accent-green); }
.v2-page .str-item .sv.neutral { color: var(--text-secondary); }

.v2-page .insight-box {
  background: rgba(59,130,246,0.04);
  border-left: 3px solid var(--accent-blue);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 14px;
  margin-bottom: 12px;
  position: relative;
}
.v2-page .insight-box .ib-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent-blue);
  margin-bottom: 3px;
}
.v2-page .insight-box p {
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.5;
  font-style: italic;
}
.v2-page .insight-box .ib-markers {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.v2-page .insight-box .ib-markers li {
  font-size: 10px;
  font-weight: 600;
  color: var(--accent-blue);
  background: rgba(59,130,246,0.08);
  padding: 2px 8px;
  border-radius: 10px;
}

.v2-page .dp-bet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
/* Unified odds block */
.v2-page .odds-block {
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  flex: 1;
  min-width: 0;
}
.v2-page .odds-block .ob-signal {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.v2-page .odds-block .ob-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.v2-page .odds-block .ob-frac {
  font-family: 'JetBrains Mono';
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}
.v2-page .odds-block .ob-bookmaker {
  font-size: 12px;
  color: var(--text-secondary);
}
.v2-page .odds-block .ob-detail {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
/* Value states */
.v2-page .odds-block.value { border-color: var(--accent-green); }
.v2-page .odds-block.value .ob-signal { color: var(--accent-green); }
.v2-page .odds-block.super-value { border-color: var(--accent-lime); background: rgba(163,230,53,0.05); }
.v2-page .odds-block.super-value .ob-signal { color: var(--accent-lime); }
.v2-page .odds-block.super-value .ob-frac { color: var(--accent-lime); }
.v2-page .odds-block.neutral { opacity: 0.7; }
.v2-page .odds-block.neutral .ob-frac { color: var(--text-muted); }

/* Bet button — default green */
.v2-page .cta-btn {
  background: var(--accent-green);
  color: #000;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  border: none;
  border-radius: var(--radius);
  padding: 10px 22px;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.v2-page .cta-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
/* Bookmaker button colours */
.v2-page .cta-btn.bookie-bet365 { background: #127B3D; color: #fff; }
.v2-page .cta-btn.bookie-betfair-exchange { background: #FFB80C; color: #000; }
.v2-page .cta-btn.bookie-william-hill { background: #2D3E50; color: #fff; }
.v2-page .cta-btn.bookie-coral { background: #FFD700; color: #000; }
.v2-page .cta-btn.bookie-betfred { background: #0A4FA3; color: #fff; }
.v2-page .cta-btn.bookie-hollywood-bets { background: #7B2D8B; color: #fff; }
.v2-page .cta-btn.bookie-betmgm { background: #C4A43C; color: #000; }
.v2-page .cta-btn.bookie-bet-victor { background: #CC0000; color: #fff; }
.v2-page .cta-btn.bookie-quinn-bet { background: #1A1A2E; color: #fff; }
.v2-page .cta-btn.bookie-dragon-bet { background: #B22222; color: #fff; }
.v2-page .cta-btn.bookie-talksport-bet { background: #FF6600; color: #fff; }
.v2-page .cta-btn.bookie-midnite { background: #1A1A2E; color: #fff; }

/* ═══ RUNNERS LIST ═══ */
.v2-page .runners-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.v2-page .runners-header h3 {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.v2-page .runners-header .sort-by {
  font-size: 10px;
  color: var(--text-muted);
}

.v2-page .runners-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 0;
}
/* Remove bottom radius on last runner when show-more button follows */
.v2-page .runners-list:has(+ .runners-overflow) .runner:last-child {
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  margin-bottom: 0;
}

.v2-page .runner {
  display: grid;
  grid-template-columns: 36px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.15s;
  animation: v2rFadeIn 0.3s ease backwards;
}
.v2-page .runner:hover {
  background: var(--bg-card-hover);
  border-color: rgba(59,130,246,0.25);
}
.v2-page .runner.sel {
  background: var(--bg-selected);
  border-color: var(--accent-blue);
}
.v2-page .runner:nth-child(1) { animation-delay: 0.02s; }
.v2-page .runner:nth-child(2) { animation-delay: 0.05s; }
.v2-page .runner:nth-child(3) { animation-delay: 0.08s; }
.v2-page .runner:nth-child(4) { animation-delay: 0.11s; }
.v2-page .runner:nth-child(5) { animation-delay: 0.14s; }

@keyframes v2rFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.v2-page .r-num {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit';
  font-weight: 800;
  font-size: 13px;
  color: #fff;
  overflow: hidden;
}
.v2-page .r-cloth-num {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: var(--text-secondary, #94a3b8);
  min-width: 16px;
  text-align: right;
  margin-right: 6px;
}
.v2-page .r-num img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.v2-page .r-info .r-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
}
.v2-page .r-info .r-meta {
  font-size: 11px;
  color: var(--text-muted);
}

.v2-page .r-tags {
  display: flex;
  gap: 3px;
}
.v2-page .tag-dot {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.v2-page .tag-dot.green { background: rgba(34,197,94,0.15); color: var(--accent-green); }
.v2-page .tag-dot.amber { background: rgba(245,158,11,0.15); color: var(--accent-amber); }
.v2-page .tag-dot.blue { background: rgba(59,130,246,0.15); color: var(--accent-blue); }

.v2-page .r-score {
  text-align: right;
  min-width: 36px;
}
.v2-page .r-score .num {
  font-family: 'JetBrains Mono';
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
}
.v2-page .r-score .num.c-great { color: var(--score-great); }
.v2-page .r-score .num.c-good { color: var(--score-good); }
.v2-page .r-score .num.c-mid { color: var(--score-mid); }
.v2-page .r-score .num.c-low { color: var(--score-low); }

.v2-page .r-score .bar {
  width: 36px;
  height: 2px;
  background: var(--border);
  border-radius: 1px;
  margin-top: 3px;
  overflow: hidden;
}
.v2-page .r-score .bar-fill {
  height: 100%;
  border-radius: 1px;
}

/* Show more button */
.v2-page .show-more-btn {
  display: block;
  width: auto;
  max-width: 200px;
  margin: 0 auto;
  padding: 6px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
  color: var(--text-muted);
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.2s;
}
.v2-page .show-more-btn:hover {
  background: var(--bg-selected);
  color: var(--text-secondary);
}

/* Collapsed runners */
.v2-page .runners-overflow {
  display: none;
  flex-direction: column;
  gap: 4px;
  margin-top: 0;
}
.v2-page .runners-overflow.open {
  display: flex;
}
/* First runner in overflow connects to list above */
.v2-page .runners-overflow .runner:first-child {
  border-radius: 0;
  border-top: none;
}
/* When overflow is open, hide the show-more bottom radius connector */
.v2-page .runners-overflow.open + .show-more-btn {
  margin-top: 0;
}

/* ═══════════════════════════════════════════
   SHARED NAV BAR
   ═══════════════════════════════════════════ */
.v2-page .v2-nav {
  position: sticky;
  top: var(--nav-h, 60px);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 8px;
}
.v2-page .v2-event-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-lime);
  letter-spacing: 0.05em;
  padding: 4px 10px;
  background: rgba(200,255,0,0.06);
  border: 1px solid rgba(200,255,0,0.12);
  border-radius: var(--radius-sm);
}
.v2-page .nav-tabs { display: flex; gap: 4px; }
.v2-page .nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  background: none;
  border: none;
  text-decoration: none;
}
.v2-page .nav-tab:hover { color: var(--text-secondary); background: rgba(255,255,255,0.03); }
.v2-page .nav-tab.active { color: var(--text-primary); background: rgba(255,255,255,0.06); }
.v2-page .nav-tab-help {
  margin-left: auto;
  color: var(--accent-lime);
  font-size: 12px;
  opacity: 0.8;
}
.v2-page .nav-tab-help:hover { opacity: 1; background: rgba(255,255,255,0.03); }
.v2-page .nav-tab .count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  background: rgba(200,255,0,0.15);
  color: var(--accent-lime);
  padding: 1px 6px;
  border-radius: 4px;
}
.v2-page .nav-tab .count.live-count {
  background: rgba(239,68,68,0.15);
  color: var(--accent-red);
}
.v2-page .nav-tab .live-dot {
  width: 6px; height: 6px;
  background: var(--accent-red);
  border-radius: 50%;
  animation: v2pulse 1.5s ease-in-out infinite;
}
.v2-page .date-nav { display: flex; align-items: center; gap: 8px; }
.v2-page .date-nav .date-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}
.v2-page .date-arrow {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.15s;
  text-decoration: none;
}
.v2-page .date-arrow:hover { color: var(--text-primary); border-color: var(--text-muted); }

/* ═══════════════════════════════════════════
   STATS TOGGLE + COLLAPSIBLE
   ═══════════════════════════════════════════ */
.v2-page .stats-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.2s;
}
.v2-page .stats-toggle:hover {
  border-color: rgba(255,255,255,0.12);
  background: var(--bg-card-hover);
}
.v2-page .stats-toggle.open {
  border-radius: var(--radius) var(--radius) 0 0;
  margin-bottom: 0;
  border-bottom-color: transparent;
}
.v2-page .stats-toggle-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.v2-page .stats-toggle-label {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
}
.v2-page .stats-toggle-summary {
  display: flex;
  gap: 6px;
}
.v2-page .stats-toggle-chevron {
  font-size: 10px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.v2-page .stats-toggle.open .stats-toggle-chevron {
  transform: rotate(180deg);
}
.v2-page .stats-collapsible {
  display: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 16px;
  margin-bottom: 24px;
}
.v2-page .stats-collapsible.open {
  display: block;
}

/* ═══════════════════════════════════════════
   HERO STATS — ring gauges + summary
   ═══════════════════════════════════════════ */
.v2-page .hero-stats {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
}
.v2-page .stat-rings {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
}
.v2-page .ring-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.v2-page .ring-pct {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.v2-page .ring-wrap {
  position: relative;
  width: 72px;
  height: 72px;
}
.v2-page .ring-wrap svg {
  transform: rotate(-90deg);
  width: 72px;
  height: 72px;
}
.v2-page .ring-bg {
  fill: none;
  stroke: var(--border);
  stroke-width: 5;
}
.v2-page .ring-fill {
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s ease;
  animation: v2ringIn 1.2s ease forwards;
}
@keyframes v2ringIn {
  from { stroke-dashoffset: 188; }
}
.v2-page .ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 16px;
}
.v2-page .ring-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.2;
}
.v2-page .ring-label-mobile { display: none; }
.v2-page .today-summary {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.v2-page .ts-headline {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 6px;
}
.v2-page .ts-headline .green { color: var(--accent-lime); }
.v2-page .ts-sub {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: 14px;
}
.v2-page .ts-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.v2-page .ts-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid;
}
.v2-page .ts-tag.won { background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.2); color: var(--accent-green); }
.v2-page .ts-tag.placed { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.2); color: var(--accent-amber); }
.v2-page .ts-tag.missed { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.15); color: var(--accent-red); }

/* ═══════════════════════════════════════════
   RESULTS LIST
   ═══════════════════════════════════════════ */
.v2-page .results-section-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.v2-page .results-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.v2-page .results-list { display: flex; flex-direction: column; gap: 8px; }

.v2-page .result-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.2s;
  overflow: hidden;
  scroll-margin-top: 130px;
  animation: v2cardIn 0.35s ease backwards;
}
.v2-page .result-row { cursor: pointer; }
.v2-page .result-card:nth-child(1) { animation-delay: 0.05s; }
.v2-page .result-card:nth-child(2) { animation-delay: 0.12s; }
.v2-page .result-card:nth-child(3) { animation-delay: 0.19s; }
@keyframes v2cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.v2-page .result-card:hover { border-color: rgba(200,255,0,0.2); }
.v2-page .result-card.expanded { border-color: var(--accent-lime); }

.v2-page .result-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
}

.v2-page .result-info .ri-venue {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15px;
}
.v2-page .result-info .ri-venue .ri-num {
  color: var(--text-muted);
  font-weight: 500;
}
.v2-page .result-info .ri-location {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 1px;
}

.v2-page .result-score-badge {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  border: 1px solid;
}
.v2-page .result-score-badge .num { font-size: 18px; line-height: 1; }
.v2-page .result-score-badge .lbl { font-size: 8px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1px; }
.v2-page .result-score-badge.high {
  background: rgba(200,255,0,0.1);
  border-color: rgba(200,255,0,0.3);
  color: var(--accent-lime);
}
.v2-page .result-score-badge.mid {
  background: rgba(245,158,11,0.1);
  border-color: rgba(245,158,11,0.25);
  color: var(--accent-amber);
}

.v2-page .result-podium { display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
.v2-page .podium-row { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.v2-page .pos-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  min-width: 26px;
  text-align: center;
}
.v2-page .pos-chip.gold { background: rgba(245,158,11,0.2); color: var(--accent-amber); }
.v2-page .pos-chip.silver { background: rgba(148,163,184,0.15); color: var(--text-secondary); }
.v2-page .pos-chip.bronze { background: rgba(180,120,60,0.15); color: #c8956c; }
.v2-page .podium-row .p-name { font-weight: 500; }
.v2-page .podium-row .p-name.winner { font-weight: 700; color: var(--accent-amber); }

/* ── Expanded detail ── */
.v2-page .result-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}
.v2-page .result-card.expanded .result-detail {
  max-height: 2000px;
  opacity: 1;
  padding: 0 16px 16px;
  overflow: visible;
  transition: max-height 0.4s ease, opacity 0.3s ease 0.05s, padding 0.35s ease;
}
/* Expanded result card sits above the dim overlay */
.v2-page .result-card.expanded {
  position: relative;
  z-index: 51;
}

.v2-page .detail-divider {
  height: 1px;
  background: var(--border);
  margin-bottom: 14px;
}
.v2-page .race-info-row { margin-bottom: 10px; }
.v2-page .race-info-row .rir-type {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
}
.v2-page .race-info-row .rir-desc { font-size: 12px; color: var(--text-muted); }
.v2-page .race-info-row .rir-track-note {
  font-size: 12px;
  color: var(--accent-amber);
  font-style: italic;
  margin-top: 3px;
}

.v2-page .detail-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }

/* Outcome banner */
.v2-page .outcome-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
}
.v2-page .outcome-banner .ob-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.v2-page .outcome-banner .ob-text span { opacity: 0.7; font-weight: 400; }
.v2-page .outcome-banner.won {
  background: rgba(34,197,94,0.08);
  border: 1px solid rgba(34,197,94,0.2);
  color: var(--accent-green);
}
.v2-page .outcome-banner.won .ob-icon { background: rgba(34,197,94,0.2); }
.v2-page .outcome-banner.placed {
  background: rgba(245,158,11,0.08);
  border: 1px solid rgba(245,158,11,0.2);
  color: var(--accent-amber);
}
.v2-page .outcome-banner.placed .ob-icon { background: rgba(245,158,11,0.2); }
.v2-page .outcome-banner.missed {
  background: rgba(239,68,68,0.06);
  border: 1px solid rgba(239,68,68,0.15);
  color: var(--accent-red);
}
.v2-page .outcome-banner.missed .ob-icon { background: rgba(239,68,68,0.15); }

/* Winner + finishing order layout */
.v2-page .result-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Winner spotlight card */
.v2-page .winner-card {
  background: rgba(245,158,11,0.04);
  border: 1px solid rgba(245,158,11,0.15);
  border-radius: var(--radius);
  padding: 14px;
  position: relative;
  overflow: hidden;
}
.v2-page .winner-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-amber), #f97316);
}
.v2-page .wc-pos {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent-amber);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.v2-page .wc-name-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.v2-page .wc-horse-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.v2-page .wc-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.v2-page .wc-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.v2-page .wc-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.v2-page .wc-stat .ws-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.v2-page .wc-stat .ws-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
}
.v2-page .wc-stat .ws-value.amber { color: var(--accent-amber); }
.v2-page .wc-stat .ws-value.muted { color: var(--text-secondary); }

/* Finishing order */
.v2-page .finishing-order { display: flex; flex-direction: column; }
.v2-page .fo-header {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.v2-page .fo-list { display: flex; flex-direction: column; gap: 3px; flex: 1; max-height: 252px; overflow-y: auto; }
.v2-page .fo-row {
  display: grid;
  grid-template-columns: 30px 26px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.015);
  border: 1px solid transparent;
  transition: background 0.15s;
}
.v2-page .fo-row { cursor: pointer; }
.v2-page .fo-row:hover { background: rgba(255,255,255,0.03); }
.v2-page .fo-row.sel {
  background: rgba(59,130,246,0.08);
  border-color: rgba(59,130,246,0.25);
}
.v2-page .fo-row.highlight {
  background: rgba(59,130,246,0.06);
  border-color: rgba(59,130,246,0.15);
}
.v2-page .fo-row.winner-row {
  background: rgba(245,158,11,0.05);
  border-color: rgba(245,158,11,0.15);
}
.v2-page .fo-pos {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
.v2-page .fo-pos.p1 { color: var(--accent-amber); }
.v2-page .fo-pos.p2 { color: var(--text-secondary); }
.v2-page .fo-pos.p3 { color: #c8956c; }
.v2-page .fo-pos.dnf { color: var(--accent-red); font-size: 9px; }
.v2-page .fo-silk {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit';
  font-weight: 800;
  font-size: 10px;
  color: #fff;
  overflow: hidden;
}
.v2-page .fo-silk img { width: 100%; height: 100%; object-fit: contain; }
.v2-page .fo-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 600;
  font-size: 13px;
}
.v2-page .fo-name.top-pick { color: var(--accent-blue); }
.v2-page .fo-score {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 14px;
  text-align: right;
}
.v2-page .fo-score.c-great { color: var(--score-great); }
.v2-page .fo-score.c-good { color: var(--score-good); }
.v2-page .fo-score.c-mid { color: var(--score-mid); }
.v2-page .fo-score.c-low { color: var(--score-low); }
.v2-page .fo-tp-badge {
  font-size: 8px;
  font-weight: 700;
  background: rgba(59,130,246,0.12);
  color: var(--accent-blue);
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.04em;
  margin-left: 4px;
}

.v2-page .stats-footer {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 12px;
  font-style: italic;
}

/* ═══ RESPONSIVE ═══ */
@media (max-width: 640px) {
  /* Races page */
  .v2-page .race-card { grid-template-columns: auto 1fr auto; gap: 10px; padding: 10px 12px; }
  .v2-page .race-time { font-size: 11px; padding: 4px 6px; }
  .v2-page .race-status { display: none; }
  .v2-page .race-countdown-mobile { display: block; }
  .v2-page .race-bet-btn { display: none; }
  .v2-page .exp-top { flex-direction: column; }
  .v2-page .countdown { text-align: left; }
  .v2-page .runner { grid-template-columns: 30px 1fr auto auto; gap: 6px; }
  .v2-page .r-tags { display: none; }
  .v2-page .str-grid { grid-template-columns: 1fr 1fr; }

  /* Live banner — space between venue and race number */
  .v2-page .lb-title .race-num { margin-left: 6px; }

  /* Detail panel — score inline with horse name */
  .v2-page .dp-top { align-items: center; }
  .v2-page .dp-horse-name { font-size: 18px; }
  .v2-page .dp-score .big { font-size: 20px; }
  .v2-page .dp-score .lbl { display: none; }

  /* Bet row — stack odds and CTA */
  .v2-page .dp-bet-row { flex-direction: column; }
  .v2-page .odds-block { width: 100%; }
  .v2-page .cta-btn { width: 100%; justify-content: center; }

  /* Spacing */
  .v2-page .dp-top { margin-bottom: 20px; }
  .v2-page .score-legend { margin-bottom: 10px; }

  /* Nav */
  .v2-page .v2-nav { flex-direction: column; align-items: stretch; }
  .v2-page .nav-tabs { justify-content: space-evenly; width: 100%; }
  .v2-page .nav-tab { flex: 1; justify-content: center; }
  .v2-page .date-nav { justify-content: space-between; width: 100%; }
  .v2-page .date-nav .date-text { flex: 1; text-align: center; }


  /* Results page */
  .v2-page .result-score-badge .lbl { display: none; }
  .v2-page .hero-stats { grid-template-columns: 1fr; }
  .v2-page .stat-rings { padding: 8px 0; gap: 14px; justify-content: space-evenly; }
  .v2-page .ring-stat-extra { display: flex; }
  .v2-page .ring-label-full { display: none; }
  .v2-page .ring-label-mobile { display: inline; }
  .v2-page .ts-tag-detail { display: none; }
  .v2-page .ring-wrap { width: 60px; height: 60px; }
  .v2-page .ring-wrap svg { width: 60px; height: 60px; }
  .v2-page .ring-center { font-size: 13px; }
  .v2-page .ts-headline { font-size: 20px; }
  .v2-page .result-row { grid-template-columns: 60px 1fr auto; gap: 10px; }
  .v2-page .result-podium { display: none; }
  .v2-page .result-body { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   V2 VENUE FILTERS + MEETING GROUPS
   ═══════════════════════════════════════════════════ */

.v2-venue-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 20px;
  scrollbar-width: none;
}
.v2-venue-filters::-webkit-scrollbar { display: none; }
.v2-vf-tab {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  flex-shrink: 0;
}
.v2-vf-tab:hover {
  border-color: var(--accent-blue);
  color: var(--text-primary);
}
.v2-vf-tab.on {
  background: var(--accent-blue);
  border-color: var(--accent-blue);
  color: #fff;
  font-weight: 600;
}
.v2-vf-tab .vf-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.6;
  margin-left: 2px;
}
.v2-vf-tab.on .vf-meta { opacity: 0.8; }
.v2-vf-tab .vf-sep { margin: 0 1px; }

.v2-meeting-group {
  margin-bottom: 24px;
}
.v2-meeting-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.v2-meeting-venue {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.v2-meeting-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════
   MEETING BLOCKS — rich meeting headers + race rows
   ═══════════════════════════════════════════════════ */

.meeting {
  margin-bottom: 28px;
  scroll-margin-top: 24px;
  animation: v2fadeIn 0.4s ease backwards;
}
.meeting:nth-child(2) { animation-delay: 0.08s; }
.meeting:nth-child(3) { animation-delay: 0.16s; }
.meeting:nth-child(4) { animation-delay: 0.24s; }

/* ── Meeting header (banner style) ── */
.meeting-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 16px 20px;
  position: relative;
  overflow: hidden;
}
.meeting-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
}
.meeting.jumps .meeting-header::before {
  background: linear-gradient(90deg, var(--accent-green), var(--accent-lime));
}
.meeting.flat .meeting-header::before {
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-purple));
}

/* Banner main row: venue name left, countdown right */
.mh-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mh-name-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.mh-venue {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 26px;
  letter-spacing: -0.04em;
  line-height: 1;
}
.mh-race-count {
  font-size: 12px;
  color: var(--text-muted);
}
.venue-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
}
.venue-badge .badge-sub {
  display: none;
}
.meeting.jumps .venue-badge { background: rgba(34,197,94,0.1); color: var(--accent-green); }
.meeting.flat .venue-badge { background: rgba(59,130,246,0.1); color: var(--accent-blue); }

/* Countdown block */
.mh-countdown {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}
.mh-cd-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.mh-cd-value {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 28px;
  color: var(--accent-lime);
  line-height: 1;
}
.mh-countdown.soon .mh-cd-value { color: var(--accent-amber); }
.mh-countdown.imminent .mh-cd-value {
  color: var(--accent-red);
  animation: urgPulse 1.2s ease-in-out infinite;
}
@keyframes urgPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Metadata row */
.mh-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.mh-meta-item {
  font-size: 12px;
  color: var(--text-muted);
}
.mh-meta-item.mh-mono {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.mh-meta-sep {
  color: rgba(255,255,255,0.1);
  font-size: 12px;
}

/* Venue character line */
.mh-venue-char {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* Mobile adjustments */
@media (max-width: 640px) {
  .mh-venue { font-size: 20px; }
  .mh-cd-value { font-size: 22px; }
  .mh-name-row { gap: 8px; }
}

/* ── Race rows within meeting ── */
.meeting-races {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}

.race-row {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: all 0.15s;
  cursor: pointer;
}
.race-row { scroll-margin-top: 130px; }
.race-row:last-child { border-bottom: none; }
.race-row:hover { background: var(--bg-card-hover); }
.race-row.featured-race { background: rgba(245,158,11,0.02); }

.rr-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-lime);
  background: rgba(200,255,0,0.06);
  border: 1px solid rgba(200,255,0,0.1);
  border-radius: 6px;
  padding: 4px 6px;
  text-align: center;
}

.rr-info { min-width: 0; }
.rr-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rr-featured {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(245,158,11,0.12);
  color: var(--accent-amber);
}
.rr-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(34,197,94,0.12);
  color: var(--accent-green);
}
.rr-value.super {
  background: rgba(163,230,53,0.15);
  color: var(--accent-lime);
}
.rr-details {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.rr-details .sep::before { content: '·'; margin: 0 2px; }

/* Pick preview */
.rr-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 10px;
  transition: border-color 0.15s;
}
.race-row:hover .rr-pick { border-color: rgba(200,255,0,0.15); }

.rr-pick .pick-silk {
  width: 22px; height: 22px; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 9px; color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.rr-pick .pick-name {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 12px;
  line-height: 1.1;
}
.rr-pick .pick-label {
  font-size: 9px; color: var(--text-muted);
}
.rr-pick .pick-score {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 18px;
  color: var(--accent-lime); margin-left: 4px;
}
.rr-pick .pick-value {
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  margin-top: 1px;
  display: inline-block;
}
.pick-value.great { background: rgba(34,197,94,0.12); color: var(--accent-green); }
.pick-value.good { background: rgba(132,204,22,0.12); color: #84cc16; }
/* Status / countdown per race */
.rr-status {
  text-align: right;
  min-width: 80px;
}
.rr-status .rs-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
}
.rr-status .rs-time.soon { color: var(--accent-amber); }
.rr-status .rs-runners {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}

/* Race row — live / finished in-place badges (upcoming page) */
.race-row-live { border-left: 3px solid var(--accent-lime); }
.race-row-finished { opacity: 0.5; }

.rs-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-lime);
}
.rs-live-badge .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent-lime);
  animation: v2pulse 1.5s ease-in-out infinite;
}
.rs-live-link {
  display: block;
  font-size: 10px;
  color: var(--accent-lime);
  text-decoration: none;
  margin-top: 2px;
  opacity: 0.8;
}
.rs-live-link:hover { opacity: 1; text-decoration: underline; }

.rs-finished-badge {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════
   BEST OF THE DAY — highlight strip
   ═══════════════════════════════════════════════════ */

.best-strip {
  background: var(--bg-card);
  border: 1px solid rgba(200,255,0,0.12);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.bs-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-lime);
  background: rgba(200,255,0,0.08);
  border: 1px solid rgba(200,255,0,0.15);
  padding: 4px 10px;
  border-radius: 6px;
  flex-shrink: 0;
}

.bs-picks {
  display: flex;
  gap: 12px;
  flex: 1;
  flex-wrap: wrap;
}

.bs-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  flex: 1;
  min-width: 180px;
}
.bs-pick:hover {
  border-color: rgba(200,255,0,0.2);
  background: var(--bg-card-hover);
}
.bs-pick .bsp-silk {
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 10px; color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.bs-pick .bsp-info { flex: 1; min-width: 0; }
.bs-pick .bsp-name {
  font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-pick .bsp-detail {
  font-size: 10px; color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bs-pick .bsp-score {
  font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 20px;
  color: var(--accent-lime); flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   TOP BOOKMAKERS STRIP
   ═══════════════════════════════════════════════════ */
.tb-strip { flex-wrap: wrap; }
.tb-strip .bs-picks { gap: 10px; }
.tb-pick {
  text-decoration: none;
  color: #fff;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.15s;
}
.tb-pick:hover {
  transform: translateY(-2px);
  filter: brightness(1.15);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.tb-pick .bsp-name { font-weight: 700; font-size: 14px; }
.tb-hint {
  width: 100%;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
/* Bookmaker brand colours */
.tb-pick.bookie-bet365 { background: #127B3D; color: #FFD700; }
.tb-pick.bookie-betfair-exchange { background: #FFB80C; color: #000; }
.tb-pick.bookie-william-hill { background: #2D3E50; color: #fff; }
.tb-pick.bookie-coral { background: #FFD700; color: #000; }
.tb-pick.bookie-betfred { background: #0A4FA3; color: #fff; }
.tb-pick.bookie-hollywood-bets { background: #7B2D8B; color: #fff; }
.tb-pick.bookie-betmgm { background: #C4A43C; color: #000; }
.tb-pick.bookie-bet-victor { background: #CC0000; color: #fff; }
.tb-pick.bookie-quinn-bet { background: #1A1A2E; color: #fff; }
.tb-pick.bookie-dragon-bet { background: #B22222; color: #fff; }
.tb-pick.bookie-talksport-bet { background: #FF6600; color: #fff; }
.tb-pick.bookie-midnite { background: #1A1A2E; color: #fff; }
.tb-pick.bookie-paddy-power { background: #004833; color: #fff; }
.tb-pick.bookie-ladbrokes { background: #D32F2F; color: #fff; }
.tb-pick.bookie-sky-bet { background: #1E3A5F; color: #fff; }
.tb-pick.bookie-boylesports,
.tb-pick.bookie-boyle-sports { background: #2E7D32; color: #fff; }
.tb-pick.bookie-betway { background: #00A826; color: #fff; }
.tb-pick.bookie-unibet { background: #147B45; color: #fff; }
.tb-pick.bookie-virgin-bet { background: #E10A0A; color: #fff; }
.tb-pick.bookie-bettom { background: #1A1A2E; color: #fff; }
.tb-pick.bookie-spreadex { background: #1B365D; color: #fff; }

/* ═══════════════════════════════════════════════════
   QUICK JUMP — meeting pills
   ═══════════════════════════════════════════════════ */

.meeting-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 24px;
}
.mj-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}
.mj-pill:hover {
  border-color: rgba(200,255,0,0.2);
  color: var(--text-primary);
  background: var(--bg-card-hover);
}
.mj-pill .mj-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
}
.mj-pill .mj-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  background: rgba(255,255,255,0.06);
  color: var(--text-muted);
  padding: 1px 5px;
  border-radius: 3px;
}
.mj-pill .mj-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
}
.mj-pill .mj-type {
  font-size: 11px;
}

/* ── Expanded race row state ── */
.race-row.expanded {
  background: var(--bg-selected);
  border-bottom-color: var(--accent-blue);
}

/* Full-screen dim overlay when a race is expanded */
.v2-page .race-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 50;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.v2-page .race-detail-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
/* Expanded detail + its row sit above the overlay */
.race-row.expanded,
.live-banner.expanded,
.race-inline-detail.open {
  position: relative;
  z-index: 51;
}

/* ── Inline race detail (upcoming page) ── */
.race-inline-detail {
  background: var(--bg-deep);
  border-bottom: 1px solid rgba(255,255,255,0.03);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 16px;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.35s ease;
}
.race-inline-detail.open {
  max-height: 2000px;
  opacity: 1;
  padding: 16px;
  padding-left: 19px;
  border-left: 3px solid var(--accent-lime);
  overflow: visible;
  transition: max-height 0.4s ease, opacity 0.3s ease 0.05s, padding 0.35s ease;
}
/* Live banner detail already has its own red border container */
.v2-page .live-banner + .race-inline-detail.open {
  border-left: none;
  padding-left: 16px;
}

/* Collapse bar at bottom of expanded detail */
.race-inline-detail .rid-collapse-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  transition: color 0.15s;
}
.race-inline-detail .rid-collapse-bar:hover {
  color: var(--text-secondary);
}
.rid-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.rid-header .tl-feedback { margin-left: auto; }
.rid-title {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}
.rid-title a {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--text-muted);
}
.rid-title a:hover {
  color: var(--accent-lime);
}
@media (max-width: 640px) {
  .rid-header { margin-bottom: 16px; }
  .rid-title { font-size: 14px; }
}
.race-inline-detail .rid-meta,
.result-detail .rid-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}
/* ── Meeting block responsive ── */
@media (max-width: 768px) {
  .race-row { grid-template-columns: 52px 1fr auto; gap: 8px; padding: 10px 12px; }
  .race-row, .v2-page .live-banner, .v2-page .result-card { scroll-margin-top: 180px; }
  .rr-pick { display: none; }
  .bs-picks { flex-direction: column; }
  .bs-pick { min-width: 0; }
}

@media (max-width: 480px) {
  .meeting-jump { gap: 4px; }
  .mj-pill { padding: 5px 10px; font-size: 12px; }
  .mj-pill .mj-time { display: none; }
  .race-row { grid-template-columns: 48px 1fr; }
  .rr-status { display: none; }
}

.v2-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(200,255,0,0.12);
}
.v2-day-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--accent-lime);
}
.v2-day-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════
   V2 BET PANEL
   ═══════════════════════════════════════════════════ */

.v2-bet-panel {
  position: fixed;
  bottom: -100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-top: 2px solid var(--accent-lime);
  padding: 20px 24px 28px;
  z-index: 200;
  transition: bottom 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
}
.v2-bet-panel.open { bottom: 0; }

.v2bp-inner { max-width: 720px; margin: 0 auto; }

.v2bp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.v2bp-title {
  font-size: 13px;
  color: var(--text-muted);
}
.v2bp-horse {
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
}
.v2bp-score-wrap { text-align: right; }
.v2bp-score {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-lime);
  font-weight: 700;
  font-size: 14px;
}
.v2bp-tier {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}
.v2bp-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  transition: color 0.2s;
}
.v2bp-close:hover { color: var(--text-primary); }

.v2bp-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.v2bp-si { display: flex; flex-direction: column; gap: 2px; }
.v2bp-sl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.v2bp-sv {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.v2bp-money-first {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-lime);
}
.v2bp-odds-frac {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}
.v2bp-sd {
  width: 1px;
  height: 30px;
  background: var(--border);
}

.v2bp-amount-label {
  font-size: 13px;
  color: var(--text-primary);
  margin-bottom: 8px;
  font-weight: 500;
}
.v2bp-amounts {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.v2bp-amt {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
}
.v2bp-amt:hover {
  border-color: rgba(200,255,0,0.2);
  background: rgba(200,255,0,0.05);
}
.v2bp-amt.sel {
  border-color: var(--accent-lime);
  background: rgba(200,255,0,0.08);
  color: var(--accent-lime);
}

.v2bp-breakdown {
  background: rgba(200,255,0,0.04);
  border: 1px solid rgba(200,255,0,0.08);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin-bottom: 6px;
}
.v2bp-bk-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
}
.v2bp-bk-label {
  font-size: 13px;
  color: var(--text-secondary);
}
.v2bp-bk-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}
.v2bp-bk-profit { color: var(--accent-lime); }
.v2bp-bk-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}
.v2bp-bk-total-row .v2bp-bk-label {
  font-weight: 600;
  color: var(--text-primary);
}
.v2bp-bk-total {
  font-size: 18px;
  color: var(--accent-lime);
}

.v2bp-odds-help {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.v2bp-odds-help-title {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.v2bp-odds-help-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

.v2bp-return-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 16px;
  padding-left: 4px;
}

.v2bp-place-bet {
  display: block;
  width: 100%;
  padding: 16px 24px;
  background: #127b3b;
  color: #ffdf1b;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 16px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  text-decoration: none;
  box-sizing: border-box;
}
.v2bp-place-bet:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
/* Bookmaker colours for bet panel button */
.v2bp-place-bet.bookie-bet365 { background: #127B3D; color: #FFD700; }
.v2bp-place-bet.bookie-betfair-exchange { background: #FFB80C; color: #000; }
.v2bp-place-bet.bookie-william-hill { background: #2D3E50; color: #fff; }
.v2bp-place-bet.bookie-coral { background: #FFD700; color: #000; }
.v2bp-place-bet.bookie-betfred { background: #0A4FA3; color: #fff; }
.v2bp-place-bet.bookie-hollywood-bets { background: #7B2D8B; color: #fff; }
.v2bp-place-bet.bookie-betmgm { background: #C4A43C; color: #000; }
.v2bp-place-bet.bookie-bet-victor { background: #CC0000; color: #fff; }
.v2bp-place-bet.bookie-quinn-bet { background: #1A1A2E; color: #fff; }
.v2bp-place-bet.bookie-dragon-bet { background: #B22222; color: #fff; }
.v2bp-place-bet.bookie-talksport-bet { background: #FF6600; color: #fff; }
.v2bp-place-bet.bookie-midnite { background: #1A1A2E; color: #fff; }

/* ═══════════════════════════════════════════════════
   V2 HANDOFF MODAL
   ═══════════════════════════════════════════════════ */

.v2-handoff-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 9000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.v2-handoff-overlay.show {
  display: flex;
  animation: v2hoFadeIn 0.25s ease-out forwards;
}
@keyframes v2hoFadeIn { to { opacity: 1; } }

.v2-handoff-modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  max-width: 520px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: 28px 24px;
}

.v2ho-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}
.v2ho-title {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.v2ho-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.2s;
}
.v2ho-close:hover { color: var(--text-primary); }

.v2ho-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.v2ho-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.v2ho-label {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-family: 'JetBrains Mono', monospace;
}
.v2ho-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.v2ho-val-highlight {
  color: var(--accent-lime);
  font-weight: 700;
}

.v2ho-guide {
  margin-bottom: 20px;
}
.v2ho-guide-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.v2ho-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v2ho-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.v2ho-step strong { color: var(--text-primary); }
.v2ho-step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(200,255,0,0.1);
  color: var(--accent-lime);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
}

.v2ho-account-note {
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 20px;
  line-height: 1.5;
}

.v2ho-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}
.v2ho-continue {
  width: 100%;
  padding: 14px;
  border-radius: var(--radius);
  border: none;
  background: #127b3b;
  color: #ffd700;
  font-size: 16px;
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  text-align: center;
  display: block;
}
.v2ho-continue:hover { background: #15923f; }
.v2ho-cancel {
  width: 100%;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 14px;
  font-weight: 500;
  font-family: 'DM Sans', sans-serif;
  cursor: pointer;
  transition: all 0.2s;
}
.v2ho-cancel:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
}
.v2ho-guide-link {
  font-size: 13px;
  color: var(--accent-lime);
  text-decoration: none;
}
.v2ho-guide-link:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════
   FESTIVAL THEME SYSTEM
   All event components use --fest-* tokens.
   Theme classes override these per festival.
   ═══════════════════════════════════════════════════ */

/* Default theme tokens (Cheltenham) */
.v2-page {
  --fest-accent: #fbbf24;
  --fest-accent-secondary: #c8ff00;
  --fest-accent-glow: rgba(251,191,36,0.12);
  --fest-accent-border: rgba(251,191,36,0.25);
  --fest-accent-subtle: rgba(251,191,36,0.06);
  --fest-secondary-glow: rgba(200,255,0,0.08);
  --fest-secondary-border: rgba(200,255,0,0.15);
  --fest-gradient: linear-gradient(90deg, #fbbf24, #c8ff00);
  --fest-gradient-wide: linear-gradient(90deg, #fbbf24, #e4d84a, #c8ff00);
  --fest-bg-radial-1: rgba(251,191,36,0.07);
  --fest-bg-radial-2: rgba(200,255,0,0.04);
  --fest-pattern-opacity: 0.015;
}

/* Theme tokens are now injected inline via the fest_style template filter.
   The defaults above (on .v2-page) serve as fallback. */

/* ═══════════════════════════════════════════════════
   FESTIVAL HERO BANNER
   ═══════════════════════════════════════════════════ */

/* Hero sits outside .v2-page (not zoomed) so it can be truly full-width */
.fest-hero {
  position: relative;
  width: 100%;
  padding: 48px 0 36px;
  overflow: hidden;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
}
.fest-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Pattern injected via template <style> block per festival */
}
.fest-hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--fest-gradient-wide);
}

.fest-hero-content {
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 769px) {
  .fest-hero-content { max-width: 900px; padding: 0 20px; zoom: 1.33; }
}
.fest-hero .hero-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fest-accent);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fest-hero .hero-eyebrow .accent-line {
  width: 24px;
  height: 2px;
  background: var(--fest-accent);
  border-radius: 1px;
}
.fest-hero .hero-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 42px;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 6px;
}
.fest-hero .hero-title .fest-highlight { color: var(--fest-accent); }
.fest-hero .hero-title .fest-highlight-2 { color: var(--fest-accent-secondary); }
.fest-hero .hero-sub {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 18px;
  max-width: 540px;
  line-height: 1.5;
}
.fest-hero .hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fest-hero .hm-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  color: var(--text-secondary);
}
.fest-hero .hm-pill strong { color: var(--text-primary); font-weight: 600; }

.fest-hero .fest-status {
  position: absolute;
  top: 0;
  right: 0;
  text-align: right;
}
.fest-status .fs-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 8px;
  letter-spacing: 0.04em;
}
.fs-badge.live {
  background: rgba(239,68,68,0.12);
  border: 1px solid rgba(239,68,68,0.25);
  color: var(--accent-red);
}
.fs-badge.live .dot {
  width: 6px; height: 6px;
  background: var(--accent-red);
  border-radius: 50%;
  animation: v2pulse 1.5s ease-in-out infinite;
}
.fs-badge.upcoming-badge {
  background: var(--fest-accent-glow);
  border: 1px solid var(--fest-accent-border);
  color: var(--fest-accent);
}
.fest-status .fs-countdown {
  font-family: 'JetBrains Mono', monospace;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 4px;
}
.fest-status .fs-countdown-label {
  font-size: 11px;
  color: var(--text-muted);
}
@keyframes v2pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

/* ═══════════════════════════════════════════════════
   FESTIVAL STATS BAR
   ═══════════════════════════════════════════════════ */

.v2-page .fest-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 28px;
}
.fest-stat {
  background: var(--bg-card);
  padding: 16px 12px;
  text-align: center;
}
.fest-stat .fs-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  margin-bottom: 4px;
}
.fest-stat .fs-label {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.3;
}
.fest-stat .fs-num.theme { color: var(--fest-accent); }
.fest-stat .fs-num.theme-2 { color: var(--fest-accent-secondary); }
.fest-stat .fs-num.lime { color: var(--accent-lime); }
.fest-stat .fs-num.green { color: var(--accent-green); }
.fest-stat .fs-num.white { color: var(--text-primary); }

/* ═══════════════════════════════════════════════════
   FESTIVAL SECTION TITLES
   ═══════════════════════════════════════════════════ */

.v2-page .fest-section-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.v2-page .fest-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ═══════════════════════════════════════════════════
   BEST PICKS ROW
   ═══════════════════════════════════════════════════ */

.v2-page .picks-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 32px;
}
.pick-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  position: relative;
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
}
.pick-card:hover {
  border-color: rgba(200,255,0,0.25);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.pick-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--fest-gradient);
}
.pick-rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fest-accent);
  margin-bottom: 10px;
}
.pick-horse {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.pick-silk {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 12px;
  color: #fff;
  flex-shrink: 0;
}
.pick-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.pick-race {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 10px;
  line-height: 1.35;
}
.pick-race strong { color: var(--text-secondary); font-weight: 600; }
.pick-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pick-score {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 24px;
  color: var(--accent-lime);
  line-height: 1;
}
.pick-odds .po-frac {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 16px;
}
.pick-odds .po-return {
  font-size: 10px;
  color: var(--accent-green);
}
.pick-tag {
  display: inline-flex;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.pick-tag.great { background: rgba(34,197,94,0.12); color: var(--accent-green); }
.pick-tag.good { background: rgba(132,204,22,0.12); color: var(--score-good); }

/* ═══════════════════════════════════════════════════
   FESTIVAL DAY TABS
   ═══════════════════════════════════════════════════ */

.v2-page .day-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
}
.v2-page .day-tabs::-webkit-scrollbar { display: none; }
.day-tab {
  flex-shrink: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 16px;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
  min-width: 120px;
  font-family: inherit;
  color: inherit;
  -webkit-appearance: none;
}
.day-tab:hover {
  border-color: var(--text-muted);
  background: var(--bg-card-hover);
}
.day-tab.active {
  border-color: var(--fest-accent);
  background: var(--fest-accent-subtle);
}
.day-tab .dt-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 2px;
}
.day-tab.active .dt-name { color: var(--fest-accent); }
.day-tab .dt-date {
  font-size: 11px;
  color: var(--text-muted);
}
.day-tab .dt-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 4px;
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
}
.dt-tag.today { background: rgba(239,68,68,0.12); color: var(--accent-red); }
.dt-tag.complete { background: rgba(34,197,94,0.12); color: var(--accent-green); }
.dt-tag.upcoming-tag { background: rgba(200,255,0,0.1); color: var(--accent-lime); }

/* ═══════════════════════════════════════════════════
   FESTIVAL DAY PANELS
   ═══════════════════════════════════════════════════ */

.v2-page .day-panel { display: none; }
.v2-page .day-panel.active { display: block; }

.day-header {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.dh-info .dh-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dh-info .dh-name .fest-highlight { color: var(--fest-accent); }
.dh-info .dh-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}
.dh-stats {
  display: flex;
  gap: 16px;
}
.dh-stat { text-align: center; }
.dh-stat .ds-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 18px;
}
.dh-stat .ds-label {
  font-size: 9px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════
   EVENT RACE CARDS (within day panels)
   ═══════════════════════════════════════════════════ */

.v2-page .fest-race-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: all 0.2s;
  cursor: pointer;
  margin-bottom: 8px;
  position: relative;
}
.v2-page .fest-race-card:hover {
  border-color: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
.v2-page .fest-race-card.featured {
  border-color: var(--fest-accent-border);
}
.fest-race-card .rc-stripe { height: 0; }
.fest-race-card.featured .rc-stripe {
  height: 2px;
  background: var(--fest-gradient);
}
.fest-race-card.live-card {
  border-color: rgba(239,68,68,0.25);
}
.fest-race-card.live-card .rc-stripe {
  height: 2px;
  background: linear-gradient(90deg, var(--accent-red), var(--accent-amber));
}

.fest-race-card .rc-inner {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  align-items: center;
}

.fest-race-card .rc-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-lime);
  background: rgba(200,255,0,0.06);
  border: 1px solid rgba(200,255,0,0.12);
  border-radius: 6px;
  padding: 4px 6px;
  text-align: center;
}
.fest-race-card.live-card .rc-time {
  color: var(--accent-red);
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.2);
}

.rc-race-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.rc-featured-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--fest-accent-glow);
  color: var(--fest-accent);
}
.rc-race-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

.rc-right {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Pick preview chip */
.rc-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}
.rc-pick .rcp-silk {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 800;
  font-size: 10px;
  color: #fff;
}
.rc-pick .rcp-name {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 12px;
}
.rc-pick .rcp-label {
  font-size: 9px;
  color: var(--text-muted);
}
.rc-pick .rcp-score {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 18px;
  color: var(--accent-lime);
  margin-left: 4px;
}

.rc-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  min-width: 65px;
}
.rc-status .live-text {
  color: var(--accent-red);
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}
.rc-status .live-text .dot {
  width: 5px; height: 5px;
  background: var(--accent-red);
  border-radius: 50%;
  animation: v2pulse 1.5s ease-in-out infinite;
}

/* Result status */
.rc-result {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rc-result .rr-pos {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
}
.rr-pos.won { background: rgba(34,197,94,0.12); color: var(--accent-green); }
.rr-pos.placed { background: rgba(245,158,11,0.1); color: var(--accent-amber); }
.rr-pos.missed { background: rgba(239,68,68,0.08); color: var(--accent-red); }
.rc-result .rr-name {
  font-size: 12px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════
   FESTIVAL GUIDE (collapsible)
   ═══════════════════════════════════════════════════ */

.v2-page .fest-guide {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 32px;
  position: relative;
}
.fg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  width: 100%;
  background: none;
  border-left: none;
  border-right: none;
  border-top: none;
  font-family: inherit;
  color: inherit;
  -webkit-appearance: none;
}
.fg-header .fg-title {
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.fg-header .fg-toggle {
  font-size: 18px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.fest-guide.open .fg-toggle { transform: rotate(180deg); }
.fg-body {
  display: none;
  padding: 20px;
}
.fest-guide.open .fg-body { display: block; }
.fg-body p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.fg-body p:last-child { margin-bottom: 0; }
.fg-body p strong { color: var(--text-primary); font-weight: 600; }

/* ═══════════════════════════════════════════════════
   FESTIVAL RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .fest-hero { padding: 32px 0 28px; }
  .fest-hero .hero-title { font-size: 28px; }
  .fest-hero .hero-sub { font-size: 14px; }
  .fest-hero .fest-status { position: static; text-align: left; margin-top: 12px; }
  .v2-page .fest-stats { grid-template-columns: repeat(2, 1fr); }
  .v2-page .picks-row { grid-template-columns: 1fr; }
  .v2-page .day-tabs { gap: 6px; }
  .day-tab { min-width: 100px; padding: 8px 12px; }
  .fest-race-card .rc-inner { grid-template-columns: 56px 1fr auto; gap: 10px; }
  .rc-pick { display: none; }
  .dh-stats { gap: 10px; }
}

@media (max-width: 480px) {
  .fest-hero .hero-title { font-size: 24px; }
  .v2-page .fest-stats { grid-template-columns: 1fr 1fr; }
  .fest-race-card .rc-inner { grid-template-columns: 50px 1fr; }
  .rc-status { display: none; }
}

/* Festival animations */
.fest-hero { animation: v2fadeSlide 0.4s ease; }
.v2-page .fest-stats { animation: v2fadeSlide 0.4s ease 0.05s backwards; }
.v2-page .picks-row { animation: v2fadeSlide 0.4s ease 0.1s backwards; }
.v2-page .day-tabs { animation: v2fadeSlide 0.35s ease 0.12s backwards; }

/* ═══ Breadcrumbs ═══ */
.breadcrumb { max-width: 1200px; margin: 0 auto 18px; padding: 0; }
.breadcrumb-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; font-size: 13px; font-family: var(--ff-sans); }
.breadcrumb-item a { color: var(--text-muted, rgba(255,255,255,0.35)); text-decoration: none; transition: color 0.15s; }
.breadcrumb-item a:hover { color: var(--text-primary, #fff); }
.breadcrumb-item.active span { color: var(--text-secondary, rgba(255,255,255,0.55)); }
.breadcrumb-sep { color: var(--border, rgba(255,255,255,0.12)); }

/* ═══════════════════════════════════════════════════
   TOOLTIP SYSTEM
   ═══════════════════════════════════════════════════ */

/* Inline trigger — small [?] icon */
.tl-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  font-size: 10px; font-weight: 600;
  color: var(--text-muted);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  cursor: pointer;
  vertical-align: middle;
  margin-left: 4px;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.tl-tip:hover { color: var(--white); border-color: var(--accent-lime); }

/* Desktop positioned bubble */
.tl-tip-bubble {
  position: absolute;
  z-index: 9000;
  background: var(--navy-mid);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 12px 14px;
  max-width: 280px;
  min-width: 180px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity 0.15s;
  font-family: 'Outfit', sans-serif;
}
.tl-tip-title {
  font-size: 13px; font-weight: 600;
  color: var(--white);
  margin-bottom: 4px;
}
.tl-tip-body {
  font-size: 12px; line-height: 1.55;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════
   SCORE LEGEND — inline key
   ═══════════════════════════════════════════════════ */
.score-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: var(--text-muted);
  padding: 6px 0;
}
.score-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
}
.score-legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.score-legend-dot.great { background: var(--score-great); }
.score-legend-dot.good { background: var(--score-good); }
.score-legend-dot.mid { background: var(--score-mid); }
.score-legend-dot.low { background: var(--score-low); }

/* ── Exceptional score shimmer (45+) ── */
.score-shine {
  position: relative;
  overflow: hidden;
}
.score-shine::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255,255,255,0.15) 45%,
    rgba(255,255,255,0.25) 50%,
    rgba(255,255,255,0.15) 55%,
    transparent 70%
  );
  animation: scoreShimmer 3s ease-in-out infinite;
}
@keyframes scoreShimmer {
  0%   { left: -100%; }
  50%  { left: 150%; }
  100% { left: 150%; }
}
.score-legend-link {
  font-size: 11px;
  color: var(--accent-lime);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.score-legend-link:hover { opacity: 1; }
.dp-odds-help {
  display: block;
  font-size: 10px;
  color: var(--accent-lime);
  text-decoration: none;
  opacity: 0.6;
  margin-top: 2px;
  transition: opacity 0.15s;
}
.dp-odds-help:hover { opacity: 1; }

/* ═══════════════════════════════════════════════════
   FIRST-VISIT BANNER
   ═══════════════════════════════════════════════════ */
.first-visit-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 12px;
  background: rgba(163,230,53,0.08);
  border: 1px solid rgba(163,230,53,0.2);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-secondary);
  animation: fadeUp 0.3s ease-out;
}
.first-visit-banner a {
  color: var(--accent-lime);
  text-decoration: none;
  font-weight: 600;
}
.first-visit-banner a:hover { text-decoration: underline; }
.fvb-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
  line-height: 1;
  flex-shrink: 0;
}
.fvb-close:hover { color: var(--white); }

/* ── Badge subtitle (Flat/Jumps explanation) ── */
.badge-sub {
  display: block;
  font-size: 10px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ── Results pending label ── */
.ri-pending {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.ri-pending.ri-delayed { color: #f59e0b; }

/* ═══════════════════════════════════════════════════
   DETAIL MODE — content density toggle
   ═══════════════════════════════════════════════════ */

/* Core mode: hide standard + deep elements */
.detail-core [data-detail="standard"],
.detail-core [data-detail="deep"] { display: none !important; }

/* Standard mode (default): hide deep elements only */
.detail-standard [data-detail="deep"] { display: none !important; }

/* Deep mode: everything visible — no rules needed */

/* Compact: push bet/odds row to bottom of container */
.detail-core .detail-panel,
.detail-core .winner-card {
  display: flex;
  flex-direction: column;
  min-height: 140px;
}
.detail-core .detail-panel .dp-bet-row,
.detail-core .winner-card .dp-bet-row { margin-top: auto; }

/* Compact: today-summary fills width when stat-rings hidden */
.detail-core .hero-stats { grid-template-columns: 1fr; }

/* Compact: hide 2nd and 3rd place in podium */
.detail-core .podium-row:nth-child(n+2) { display: none !important; }

/* Compact: swap race title for race number */
.rr-compact-name { display: none; }
.detail-core .rr-compact-name { display: inline; }

/* ── Toggle pill group in nav ── */
.detail-toggle {
  display: inline-flex;
  gap: 2px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px;
  margin-left: auto;
}
.detail-toggle .dt-btn {
  padding: 4px 10px;
  border: none;
  background: none;
  border-radius: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.detail-toggle .dt-btn:hover { color: var(--text-secondary); }
.detail-toggle .dt-btn.active {
  color: var(--text-primary);
  background: rgba(255,255,255,0.08);
}

/* Mobile: full-width toggle */
@media (max-width: 640px) {
  .detail-toggle { order: 10; width: 100%; justify-content: center; }
  .detail-toggle .dt-btn { flex: 1; text-align: center; font-size: 12px; padding: 5px 6px; }
  .bs-label { display: none; }
}

/* ═══ Feedback Widget ═══ */
.tl-feedback {
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Inside a card: pin to top-right corner */
.tl-fb-card {
  position: absolute;
  top: 8px;
  right: 8px;
}
/* Cards with headers: bottom-right to avoid overlaying badges/labels */
.analysis-block .tl-fb-card,
.insight-box .tl-fb-card,
.top-pick-callout .tl-fb-card {
  top: auto;
  bottom: 8px;
  right: 10px;
}
/* Bet panel: centred below the CTA */
.v2bp-feedback { justify-content: center; padding-top: 10px; }
/* Inside a heading: push to far right */
.sec-heading .tl-feedback,
.section-heading .tl-feedback,
.fest-section-title .tl-feedback { margin-left: auto; }
.tl-fb-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 5px 7px;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  line-height: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tl-fb-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tl-fb-btn:hover:not(:disabled) { color: var(--text-secondary); border-color: var(--text-muted); }
.tl-fb-btn:disabled { cursor: default; }
.tl-fb-btn.active.tl-fb-up { color: var(--accent-green); border-color: var(--accent-green); background: rgba(34,197,94,0.1); }
.tl-fb-btn.active.tl-fb-up svg { fill: var(--accent-green); }
.tl-fb-btn.active.tl-fb-down { color: var(--accent-red); border-color: var(--accent-red); background: rgba(239,68,68,0.1); }
.tl-fb-btn.active.tl-fb-down svg { fill: var(--accent-red); }
.tl-fb-done .tl-fb-btn:not(.active) { display: none; }
.tl-fb-thanks {
  font-size: 12px;
  color: var(--text-muted);
  transition: opacity 0.4s ease;
}
.tl-fb-thanks-out { opacity: 0; }
.tl-feedback:not(.tl-fb-card) { position: relative; }
.tl-fb-form {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  width: 280px;
  margin-top: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.tl-fb-comment {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
  padding: 8px;
  resize: vertical;
  min-height: 48px;
  max-height: 120px;
}
.tl-fb-comment:focus { outline: none; border-color: var(--border-active); }
.tl-fb-counter {
  font-size: 11px;
  color: var(--text-muted);
  text-align: right;
  margin-top: 4px;
}
.tl-fb-counter-low { color: var(--accent-red); }
.tl-fb-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.tl-fb-submit {
  background: var(--border-active);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.tl-fb-submit:hover { opacity: 0.9; }
.tl-fb-skip {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 5px 8px;
}
.tl-fb-skip:hover, .tl-fb-cancel:hover { color: var(--text-secondary); }
.tl-fb-cancel {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 12px;
  cursor: pointer;
  padding: 5px 8px;
  margin-left: auto;
}
/* Mobile bottom-sheet feedback form */
.mob-fb-sheet .tl-fb-comment {
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--text-primary, #f1f5f9);
  font-family: inherit;
  font-size: 15px;
  padding: 12px;
  resize: none;
  min-height: 80px;
}
.mob-fb-sheet .tl-fb-comment:focus { outline: none; border-color: var(--accent-blue, #3b82f6); }
.mob-fb-sheet .tl-fb-actions { display: flex; gap: 10px; margin-top: 12px; }
.mob-fb-sheet .tl-fb-submit {
  flex: 1;
  background: var(--accent-blue, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.mob-fb-sheet .tl-fb-skip,
.mob-fb-sheet .tl-fb-cancel {
  background: none;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: var(--text-muted, #64748b);
  padding: 10px 16px;
  font-size: 14px;
  cursor: pointer;
}
.mob-fb-sheet .tl-fb-cancel { margin-left: auto; }