/* ============================================
   BETHICS — Global Stylesheet
   Sharp Money. Real Math. No Noise.
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Playfair+Display:wght@700;800;900&family=Oxanium:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* --- CSS Variables --- */
:root {
  --navy-dark: #0B1F3A;
  --navy-mid: #10264A;
  --navy-light: #172F5C;
  --navy-card: #1F3B70;
  --gold: #C9A24A;
  --gold-light: #D4B368;
  --gold-dark: #A88335;
  --green: #1F6E43;
  --green-dark: #164D2F;
  --green-glow: rgba(31, 110, 67, 0.3);
  --red: #E74C3C;
  --yellow: #F39C12;
  --white: #FFFFFF;
  --white-muted: rgba(255, 255, 255, 0.7);
  --white-dim: rgba(255, 255, 255, 0.4);
  --border: rgba(255, 255, 255, 0.08);
  --border-gold: rgba(201, 162, 74, 0.3);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 4px 15px rgba(0, 0, 0, 0.2);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;
  --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --max-width: 1280px;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* Keep the vertical scrollbar gutter reserved on every view so the
   hero + board outline never shift horizontally when switching tabs.
   scrollbar-gutter: stable is the modern way; overflow-y: scroll is a
   belt-and-suspenders fallback that forces the scrollbar to always be
   present. Either alone should work — both together guarantee that
   Top Edges / Sports View / Market View / Tracked all render at the
   exact same horizontal alignment. */
html { scroll-behavior: smooth; font-size: 16px; scrollbar-gutter: stable; overflow-y: scroll; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--navy-dark);
  color: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; font-family: inherit; border: none; }
ul, ol { list-style: none; }
input, select { font-family: inherit; }

/* --- Utility --- */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.section { padding: 100px 0; }
.section-sm { padding: 60px 0; }
.text-gold { color: var(--gold); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-muted { color: var(--white-muted); }
.text-dim { color: var(--white-dim); }
.text-center { text-align: center; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-8 { gap: 8px; }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }
.gap-32 { gap: 32px; }
.gap-48 { gap: 48px; }
.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --- Typography --- */
h1, h2, h3, h4, h5 {
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.5rem, 5vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 1.8rem); }
h4 { font-size: 1.2rem; }
p { color: var(--white-muted); line-height: 1.7; }

.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

/* --- Small label scale (replaces inline-styled micro-labels)
   Use these instead of hand-typing font-size + letter-spacing
   on small uppercase labels. Three sizes only:
   .label-xs  micro labels (stat captions, table sub-meta)
   .label-sm  card-internal section markers
   .label-md  card titles / minor headings
   --- */
.label-xs {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white-dim);
  line-height: 1.3;
}
.label-sm {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--white-muted);
  line-height: 1.4;
}
.label-md {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: var(--white);
  line-height: 1.3;
  margin-bottom: 10px;
}
.label-helper {
  font-size: 0.82rem;
  color: var(--white-dim);
  line-height: 1.55;
}

/* Tabular numbers — odds, edges, EV, units, percentages.
   Stops digits from jittering as values change. Per
   prompt-website-shell-v1.md typography spec. */
.num-tabular,
.edges-table td,
.archive-table td,
.dashboard-track-stat,
.dashboard-summary-stat,
.record-summary-value,
.hero-stat-value,
.stat-value,
.tier-letter {
  font-variant-numeric: tabular-nums;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  transition: var(--transition);
  border: none;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--navy-dark);
  box-shadow: 0 4px 20px rgba(201, 162, 74, 0.3);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(201, 162, 74, 0.5);
}
.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 1.5px solid var(--border);
}
.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.btn-green {
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  color: var(--navy-dark);
  box-shadow: 0 4px 20px rgba(31, 110, 67, 0.3);
}
.btn-green:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(31, 110, 67, 0.5);
}
.btn-sm { padding: 10px 20px; font-size: 0.85rem; }
.btn-lg { padding: 18px 40px; font-size: 1.05rem; }

/* --- Badge --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.badge-green { background: rgba(31, 110, 67, 0.15); color: var(--green); }
.badge-yellow { background: rgba(243, 156, 18, 0.15); color: var(--yellow); }
.badge-red { background: rgba(231, 76, 60, 0.15); color: var(--red); }
.badge-gold { background: rgba(201, 162, 74, 0.15); color: var(--gold); }

/* --- Cards ---
   Upgraded 2026-04-24 to premium b2 surface: linear-gradient navy fill,
   thin hairline border, soft depth shadow, 200ms hover border fade. Every
   legacy .card on every page inherits this automatically. */
.card {
  position: relative;
  background: linear-gradient(165deg, var(--b2-navy-card-hi) 0%, var(--b2-navy-card) 45%, #0A1B33 100%);
  border: 1px solid var(--b2-hairline);
  border-radius: 14px;
  padding: 28px;
  box-shadow:
    0 6px 28px rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.02) inset;
  transition: border-color 0.2s ease, box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(.2,.6,.2,1);
  color: var(--b2-ink-soft);
}
.card:hover {
  border-color: var(--b2-hairline-gold);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.03) inset;
}
/* Real lift reserved for cards that are clickable / actionable.
   Add .card-interactive on cards that are CTAs or link wrappers. */
.card.card-interactive { cursor: pointer; }
.card.card-interactive:hover {
  transform: translateY(-2px);
}
.card-glow {
  position: relative;
  overflow: hidden;
}
.card-glow::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 24px;
  transition: var(--transition);
  background: rgba(10, 22, 40, 0.85);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Playfair Display', serif;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 5px;
  text-transform: uppercase;
}
.nav-logo svg { width: 40px; height: 44px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}
.nav-links a {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--white-muted);
  transition: var(--transition);
  letter-spacing: 0.5px;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Small profile icon in the right cluster — replaces the
   "Profile" text link in the primary nav. Restrained, premium. */
.nav-profile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--white-muted);
  transition: var(--transition);
}
.nav-profile-icon:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.nav-profile-icon svg { width: 16px; height: 16px; }
.nav-mobile-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.5rem;
  padding: 8px;
}

/* Mobile nav */
.nav-mobile-menu {
  display: none;
  position: fixed;
  top: 72px; left: 0; right: 0; bottom: 0;
  background: var(--navy-dark);
  padding: 32px 24px;
  flex-direction: column;
  gap: 0;
  z-index: 999;
}
.nav-mobile-menu.open { display: flex; }
.nav-mobile-menu a {
  display: block;
  padding: 16px 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white-muted);
  border-bottom: 1px solid var(--border);
}
.nav-mobile-menu a:hover { color: var(--gold); }
.nav-mobile-menu .mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 24px;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px 24px 80px;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(201, 162, 74, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(31, 110, 67, 0.05) 0%, transparent 60%);
}
.hero-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
}
.hero-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}
.hero-logo svg { width: 120px; height: 132px; }
.hero-tagline {
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 4.5px;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero h1 {
  font-size: clamp(3.5rem, 8vw, 6rem);
  margin-bottom: 24px;
}
.hero h1 span { color: var(--gold); }
.hero-desc {
  font-size: 1.15rem;
  max-width: 600px;
  margin: 0 auto 40px;
  color: var(--white-muted);
}
.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-stats {
  display: flex;
  gap: 48px;
  justify-content: center;
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}
.hero-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--green);
  line-height: 1;
}
.hero-stat-label {
  font-size: 0.75rem;
  color: var(--white-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 8px;
}

/* Stadium light effect */
.stadium-lights {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 200%;
  height: 100%;
  background: radial-gradient(ellipse at center top, rgba(201, 162, 74, 0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* ============================================
   HOW IT WORKS
   ============================================ */
.how-it-works { background: var(--navy-mid); }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.step-card {
  background: var(--navy-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 28px;
  text-align: center;
  position: relative;
}
.step-number {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--navy-dark);
  font-weight: 800;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.step-card h4 { margin-bottom: 12px; }
.step-card p { font-size: 0.9rem; }

/* Connecting lines between steps */
.step-connector {
  display: none; /* visible on desktop via pseudo-elements */
}

/* ============================================
   LIVE PREVIEW / EDGES TABLE
   ============================================ */
.edges-preview { position: relative; }
.edges-wrapper {
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-top: 48px;
}
.edges-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  border-bottom: 1px solid var(--border);
}
.edges-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green-glow);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.edges-table {
  width: 100%;
  border-collapse: collapse;
}
.edges-table thead {
  background: rgba(255, 255, 255, 0.03);
}
.edges-table th {
  padding: 14px 16px;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white-dim);
  border-bottom: 1px solid var(--border);
}
.edges-table td {
  padding: 16px;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--border);
  color: var(--white-muted);
}
.edges-table tr:hover {
  background: rgba(201, 162, 74, 0.03);
}
.edges-table .sport-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201, 162, 74, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
}
.edge-strong { color: var(--green); font-weight: 700; }
.edge-weak { color: var(--yellow); font-weight: 600; }
.ev-positive { color: var(--green); }

/* ============================================
   TIER COLORS (single source of truth)
   Used on both EDGE filter chips and edge-card
   grade badges so hierarchy reads at a glance.
   ============================================ */
:root {
  --tier-S: #C9A24A;   /* Elite — brand gold */
  --tier-A: #1F6E43;   /* Strong — edge green */
  --tier-B: #4C8A6E;   /* Solid — soft sage */
  --tier-C: #8A7A4A;   /* Weak — muted tan */
  --tier-D: #6B7688;   /* Marginal — neutral slate */
}

/* ============================================
   GRADE BADGES (S / A / B / C / D)
   Clean bold Inter letter in tier color. No
   gradients, no text-shadows — color carries
   the hierarchy.
   ============================================ */
/* Legacy grade badge (older edge cards) — letter-only, no box.
   Per founder 2026-04-26. */
.grade-badge {
  display: inline-block;
  width: auto;
  height: auto;
  border-radius: 0;
  background: transparent;
  border: none;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  font-size: 1.7rem;
  letter-spacing: 0;
  line-height: 1;
  flex-shrink: 0;
}
.grade-badge.grade-S {
  color: var(--tier-S);
  background: transparent;
  border: none;
  text-shadow: 0 0 14px rgba(201, 162, 74, 0.4);
}
.grade-badge.grade-A { color: var(--tier-A); background: transparent; border: none; }
.grade-badge.grade-B { color: var(--tier-B); background: transparent; border: none; }
.grade-badge.grade-C { color: var(--tier-C); background: transparent; border: none; }
.grade-badge.grade-D { color: var(--tier-D); background: transparent; border: none; }
.grade-badge.grade-trap {
  color: var(--red);
  background: transparent;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 1.6rem;
  font-weight: 900;
}

/* ============================================
   EDGE GRADE FILTER CHIPS
   Letter in tier color carries the hierarchy.
   Description text stays white @ 70% so the
   letter pops as the primary element.
   ============================================ */
.filter-chip.filter-chip-grade {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy-mid);
  color: rgba(255, 255, 255, 0.70);
}
.filter-chip.filter-chip-grade .tier-letter {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0.6;
  transition: opacity var(--transition), color var(--transition);
}
.filter-chip.filter-chip-grade .tier-desc {
  color: rgba(255, 255, 255, 0.70);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.3px;
}

/* Tier letter colors (shared with badges via same palette) */
.tier-letter.tier-S { color: var(--tier-S); }
.tier-letter.tier-A { color: var(--tier-A); }
.tier-letter.tier-B { color: var(--tier-B); }
.tier-letter.tier-C { color: var(--tier-C); }
.tier-letter.tier-D { color: var(--tier-D); }

/* Hover — bring letter to full opacity and slightly brighten tier color */
.filter-chip.filter-chip-grade:hover { background: var(--navy-mid); }
.filter-chip.filter-chip-grade:hover .tier-letter { opacity: 1; }
.filter-chip.filter-chip-grade:hover .tier-letter.tier-S { color: #D4B368; }
.filter-chip.filter-chip-grade:hover .tier-letter.tier-A { color: #2D8A5A; }
.filter-chip.filter-chip-grade:hover .tier-letter.tier-B { color: #6FA890; }
.filter-chip.filter-chip-grade:hover .tier-letter.tier-C { color: #A08A5A; }
.filter-chip.filter-chip-grade:hover .tier-letter.tier-D { color: #808A9C; }

/* Active — navy-mid bg, tier-colored border, subtle tier-colored glow */
.filter-chip.filter-chip-grade.active { background: var(--navy-mid); color: rgba(255, 255, 255, 0.85); }
.filter-chip.filter-chip-grade.active .tier-letter { opacity: 1; }

.filter-chip.filter-chip-grade[data-filter="S"].active {
  border-color: var(--tier-S);
  box-shadow: 0 0 0 1px rgba(201, 162, 74, 0.20), 0 4px 14px rgba(201, 162, 74, 0.18);
}
.filter-chip.filter-chip-grade[data-filter="A"].active {
  border-color: var(--tier-A);
  box-shadow: 0 0 0 1px rgba(31, 110, 67, 0.20), 0 4px 14px rgba(31, 110, 67, 0.18);
}
.filter-chip.filter-chip-grade[data-filter="B"].active {
  border-color: var(--tier-B);
  box-shadow: 0 0 0 1px rgba(76, 138, 110, 0.20), 0 4px 14px rgba(76, 138, 110, 0.16);
}
.filter-chip.filter-chip-grade[data-filter="C"].active {
  border-color: var(--tier-C);
  box-shadow: 0 0 0 1px rgba(138, 122, 74, 0.22), 0 4px 14px rgba(138, 122, 74, 0.16);
}
.filter-chip.filter-chip-grade[data-filter="D"].active {
  border-color: var(--tier-D);
  box-shadow: 0 0 0 1px rgba(107, 118, 136, 0.22), 0 4px 14px rgba(107, 118, 136, 0.16);
}

/* "All" chip in the grade row — white label, gold active state */
.filter-chip.filter-chip-grade[data-filter="all"] {
  color: #FFFFFF;
  font-weight: 700;
}
.filter-chip.filter-chip-grade[data-filter="all"]:hover { color: #FFFFFF; }
.filter-chip.filter-chip-grade[data-filter="all"].active {
  color: #FFFFFF;
  border-color: var(--gold);
  box-shadow: 0 0 0 1px rgba(201, 162, 74, 0.20), 0 4px 14px rgba(201, 162, 74, 0.18);
}

/* ============================================
   SPORT / LEAGUE / BET-TYPE SECTION HEADERS
   ============================================ */
.sport-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 36px;
}
.sport-section:last-child { margin-bottom: 0; }
.sport-section-header {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: var(--white);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gold);
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.sport-section-header::after {
  content: '';
  flex: 0 0 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(201, 162, 74, 0.55);
}
.sport-section-header.trap-section-header {
  color: var(--red);
  border-bottom-color: rgba(231, 76, 60, 0.55);
}
.sport-section-header.trap-section-header::after {
  background: var(--red);
  box-shadow: 0 0 10px rgba(231, 76, 60, 0.55);
}

.league-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 10px;
}
.league-section-header {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(201, 162, 74, 0.25);
  margin: 0;
}

.bettype-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bettype-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  margin-bottom: 2px;
}
.bettype-header::before,
.bettype-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 74, 0.25), transparent);
}
.bettype-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  color: var(--white-muted);
  white-space: nowrap;
}
.bettype-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 8px;
  border-radius: 50px;
  background: rgba(201, 162, 74, 0.10);
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  border: 1px solid rgba(201, 162, 74, 0.25);
}

/* ============================================
   EDGE CARDS (unified dashboard list)
   ============================================ */
.edges-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.edges-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--white-dim);
  font-size: 0.9rem;
  background: var(--navy-mid);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
}
.edge-card {
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  transition: var(--transition);
}
.edge-card:hover {
  border-color: rgba(201, 162, 74, 0.35);
  background: rgba(201, 162, 74, 0.02);
}
.edge-card.edge-card-trap {
  border-color: rgba(231, 76, 60, 0.35);
  background: linear-gradient(135deg, rgba(231,76,60,0.06), rgba(231,76,60,0.015));
}
.edge-card.edge-card-trap:hover {
  border-color: rgba(231, 76, 60, 0.55);
}
.edge-card-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.edge-card-body { flex: 1; min-width: 0; }
.edge-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.edge-card-meta .sport-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201, 162, 74, 0.1);
  padding: 3px 8px;
  border-radius: 4px;
}
.edge-card-bettype {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white-dim);
}
.edge-card-time {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--white-dim);
  font-weight: 600;
}
.edge-card-time.time-soon { color: var(--gold); }
.edge-card-matchup {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 10px;
}
.edge-card-matchup small {
  font-weight: 500;
  color: var(--white-dim);
  font-size: 0.8rem;
  margin-left: 8px;
}
.edge-card-side {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.edge-card-side .side-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
}
.edge-card-side .side-book {
  font-size: 0.85rem;
  color: var(--white-muted);
}
.edge-card-side .side-odds {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9rem;
  color: var(--gold);
  font-weight: 700;
}
.edge-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 24px;
  font-size: 0.82rem;
}
.edge-card-stat { display: flex; flex-direction: column; gap: 2px; }
.edge-card-stat .stat-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white-dim);
}
.edge-card-stat .stat-value {
  font-family: 'JetBrains Mono', monospace;
  color: var(--white-muted);
  font-weight: 700;
}
.edge-card-stat .stat-value.stat-edge { color: var(--green); }
.edge-card-stat .stat-value.stat-edge-weak { color: var(--yellow); }
.edge-card-stat .stat-value.stat-edge-marginal { color: var(--white-dim); }
.edge-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.edge-card-expand-btn {
  background: none;
  border: none;
  color: var(--white-dim);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  padding: 4px 0;
}
.edge-card-expand-btn:hover { color: var(--gold); }
.edge-card-expand {
  display: none;
  margin-top: 14px;
  padding: 16px 18px;
  background: rgba(0, 0, 0, 0.22);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.edge-card-expand.open { display: block; }
.edge-card-trap-detail {
  font-size: 0.9rem;
  color: var(--white-muted);
  line-height: 1.55;
  margin-top: 6px;
}

/* Blur overlay for free tier */
.blur-overlay {
  position: relative;
}
.blur-overlay .blurred-row td {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
}
.blur-cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(10, 22, 40, 0.9);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 32px 48px;
  text-align: center;
  z-index: 10;
  backdrop-filter: blur(8px);
}
.blur-cta h3 { margin-bottom: 8px; font-size: 1.3rem; }
.blur-cta p { margin-bottom: 20px; font-size: 0.9rem; }

/* ============================================
   SOCIAL PROOF
   ============================================ */
.social-proof { background: var(--navy-dark); }
.social-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.social-stat-card {
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
}
.social-stat-card .stat-icon {
  font-size: 1.8rem;
  margin-bottom: 12px;
}
.social-stat-card .stat-value {
  font-size: 2.2rem;
  font-weight: 800;
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.2;
}
.social-stat-card .stat-label {
  font-size: 0.75rem;
  color: var(--white-dim);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 4px;
}

.twitter-feed-placeholder {
  margin-top: 48px;
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px;
  text-align: center;
}
.twitter-feed-placeholder p {
  color: var(--white-dim);
  font-size: 0.9rem;
}

/* ============================================
   DASHBOARD
   ============================================ */
.dashboard-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  padding-top: 96px;
}
.dashboard-main { min-width: 0; }
.dashboard-sidebar { display: flex; flex-direction: column; gap: 24px; }

/* Tabs */
.dashboard-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--navy-card);
  margin-bottom: 32px;
  overflow-x: auto;
  padding-bottom: 0;
}
.dashboard-tab {
  padding: 16px 24px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white-muted);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: var(--transition);
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.dashboard-tab:hover {
  color: var(--white);
}
.dashboard-tab.active {
  color: var(--gold);
}
.dashboard-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
}
.dashboard-tab-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 0.75rem;
  padding: 2px 6px;
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
  color: var(--white-dim);
}
.dashboard-tab.active .dashboard-tab-badge {
  background: rgba(201,162,74,0.2);
  color: var(--gold);
}

/* Tab content */
.dashboard-tab-content {
  display: none;
}
.dashboard-tab-content.active {
  display: block;
}

/* Dashboard header */
.dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}
.dashboard-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dashboard-title h2 { font-size: 1.6rem; }

/* Filters */
.filters-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  flex-wrap: wrap;
}
.filter-chip {
  padding: 8px 16px;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--navy-mid);
  border: 1px solid var(--border);
  color: var(--white-muted);
  cursor: pointer;
  transition: var(--transition);
}
.filter-chip:hover, .filter-chip.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(201, 162, 74, 0.08);
}

/* Expandable row */
.expand-btn {
  background: none;
  border: none;
  color: var(--white-dim);
  font-size: 0.9rem;
  cursor: pointer;
  transition: var(--transition);
  padding: 4px;
}
.expand-btn:hover { color: var(--gold); }
.expand-content {
  display: none;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--radius-sm);
  padding: 20px;
  margin: 8px 16px 16px;
}
.expand-content.open { display: block; }
.math-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.85rem;
}
.math-step:last-child { border-bottom: none; }
.math-step-label {
  font-weight: 700;
  color: var(--gold);
  min-width: 120px;
  font-size: 0.75rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.math-step-value { color: var(--white-muted); font-family: 'JetBrains Mono', monospace; }

/* Trap Alerts */
.trap-alerts {
  background: linear-gradient(135deg, rgba(231, 76, 60, 0.08), rgba(231, 76, 60, 0.02));
  border: 1px solid rgba(231, 76, 60, 0.3);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 32px;
}
.trap-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.trap-header h3 {
  color: var(--red);
  font-size: 1rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.trap-item {
  padding: 16px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  border-left: 3px solid var(--red);
}
.trap-item:last-child { margin-bottom: 0; }
.trap-item h4 { color: var(--red); margin-bottom: 6px; font-size: 0.95rem; }
.trap-item p { font-size: 0.85rem; }

/* Sidebar cards */
.sidebar-card {
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}
.sidebar-card h4 {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.record-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.record-row:last-child { border-bottom: none; }
.record-label { color: var(--white-dim); }
.record-value { font-weight: 700; }

/* ============================================
   PRICING
   ============================================ */
.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 40px 0;
}
.pricing-toggle span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white-dim);
}
.pricing-toggle span.active { color: var(--white); }
.toggle-switch {
  width: 56px;
  height: 28px;
  background: var(--navy-card);
  border: 1px solid var(--border);
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  transition: var(--transition);
}
.toggle-switch::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  background: var(--gold);
  border-radius: 50%;
  top: 2px;
  left: 3px;
  transition: var(--transition);
}
.toggle-switch.yearly::after { left: 29px; }
.toggle-switch.yearly { border-color: var(--gold); }
.save-badge {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--green);
  background: rgba(31, 110, 67, 0.1);
  padding: 2px 8px;
  border-radius: 4px;
}

.pricing-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  max-width: 900px;
  margin: 0 auto;
}
.pricing-card {
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  position: relative;
  transition: var(--transition);
}
.pricing-card.featured {
  border-color: var(--gold);
  box-shadow: 0 0 60px rgba(201, 162, 74, 0.1);
}
.pricing-card.featured::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--green), var(--gold));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.pricing-tier {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
.pricing-price {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 4px;
}
.pricing-price span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--white-dim);
}
.pricing-desc {
  font-size: 0.9rem;
  color: var(--white-dim);
  margin-bottom: 32px;
}
.pricing-features {
  margin-bottom: 32px;
}
.pricing-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.9rem;
  color: var(--white-muted);
}
.pricing-feature .check {
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.pricing-feature .cross {
  color: var(--white-dim);
  flex-shrink: 0;
  margin-top: 2px;
}
.pricing-feature.disabled {
  color: var(--white-dim);
}

/* ============================================
   EDUCATION / LEARN
   ============================================ */
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.article-card {
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: var(--transition);
}
.article-card:hover {
  border-color: var(--border-gold);
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.article-thumb {
  height: 180px;
  background: linear-gradient(135deg, var(--navy-card), var(--navy-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.article-thumb-icon {
  font-size: 3rem;
  opacity: 0.3;
}
.article-thumb .category-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(10, 22, 40, 0.8);
  padding: 4px 10px;
  border-radius: 4px;
}
.article-body {
  padding: 24px;
}
.article-body h4 {
  margin-bottom: 8px;
  font-size: 1.05rem;
  line-height: 1.3;
}
.article-body p {
  font-size: 0.85rem;
  margin-bottom: 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.article-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 0.75rem;
  color: var(--white-dim);
}

/* Article template page */
.article-page { padding-top: 120px; }
.article-page-header {
  max-width: 760px;
  margin: 0 auto 48px;
  text-align: center;
}
.article-page-header .category-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(201, 162, 74, 0.1);
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 20px;
}
.article-page-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: 16px;
}
.article-page-content {
  max-width: 760px;
  margin: 0 auto;
}
.article-page-content p {
  font-size: 1.05rem;
  line-height: 1.8;
  margin-bottom: 24px;
}
.article-page-content h2 {
  font-size: 1.5rem;
  margin: 48px 0 16px;
  color: var(--white);
}
.article-page-content h3 {
  font-size: 1.2rem;
  margin: 32px 0 12px;
  color: var(--gold);
}
.formula-block {
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 20px 24px;
  margin: 24px 0;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 0.9rem;
  color: var(--green);
}
.callout-box {
  background: rgba(201, 162, 74, 0.06);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 24px;
  margin: 24px 0;
}
.callout-box h4 {
  color: var(--gold);
  margin-bottom: 8px;
}

/* ============================================
   TRACK RECORD
   ============================================ */
.record-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin: 48px 0 32px;
}
.record-summary-card {
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  text-align: center;
}
.record-summary-value {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.2;
}
.record-summary-label {
  font-size: 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-top: 4px;
}

.chart-container {
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  margin-bottom: 32px;
  height: 320px;
  position: relative;
  overflow: hidden;
}
.chart-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  gap: 2px;
  padding-top: 40px;
}

/* Fake chart using CSS */
.chart-line {
  position: absolute;
  top: 40px; left: 32px; right: 32px; bottom: 32px;
}
.chart-line svg {
  width: 100%;
  height: 100%;
}

.history-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.history-table thead { background: rgba(255, 255, 255, 0.03); }
.history-table th {
  padding: 14px 16px;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white-dim);
  border-bottom: 1px solid var(--border);
}
.history-table td {
  padding: 14px 16px;
  font-size: 0.85rem;
  border-bottom: 1px solid var(--border);
  color: var(--white-muted);
}
.history-table tr:hover { background: rgba(201, 162, 74, 0.03); }
.result-win { color: var(--green); font-weight: 700; }
.result-loss { color: var(--red); font-weight: 700; }

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--navy-mid);
  border-top: 1px solid var(--border);
  padding: 64px 0 32px;
  margin-top: 100px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.footer-brand p {
  font-size: 0.85rem;
  margin-top: 12px;
  max-width: 300px;
}
.footer-col h5 {
  font-size: 0.7rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.footer-col a {
  display: block;
  padding: 6px 0;
  font-size: 0.85rem;
  color: var(--white-dim);
  transition: var(--transition);
}
.footer-col a:hover { color: var(--gold); }
/* Two-row stack: disclaimer block on top, tagline + socials below.
   Stops the long disclaimer text from wrapping into the social
   icons on narrow viewports. */
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.footer-bottom .footer-disclaimer { max-width: 100%; }
.footer-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.footer-disclaimer {
  font-size: 0.7rem;
  color: var(--white-dim);
  max-width: 100%;
  line-height: 1.6;
}
.footer-socials {
  display: flex;
  gap: 16px;
}
.footer-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: var(--transition);
}
.footer-socials a:hover {
  background: var(--gold);
  color: var(--navy-dark);
}

/* ============================================
   PAYWALL OVERLAY
   ============================================ */
.paywall-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(10, 22, 40, 0.85);
  backdrop-filter: blur(8px);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
}
.paywall-overlay.active { display: flex; }
.paywall-card {
  background: var(--navy-mid);
  border: 1px solid var(--gold);
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align: center;
  max-width: 480px;
  width: 90%;
  box-shadow: 0 0 80px rgba(201, 162, 74, 0.15);
}
.paywall-card h2 { margin-bottom: 12px; }
.paywall-card p { margin-bottom: 28px; }

/* Inline lock overlay */
.lock-overlay {
  position: relative;
}
.lock-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(10, 22, 40, 0.95);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 24px 36px;
  text-align: center;
  z-index: 5;
}
.lock-badge svg { margin-bottom: 8px; }
.lock-badge p { font-size: 0.8rem; color: var(--white-muted); margin-bottom: 12px; }

/* ============================================
   DASHBOARD FLOW POLISH
   Section rhythm, premium hierarchy, and
   responsive treatment for the restructured
   dashboard experience.
   ============================================ */
.dashboard-page .dashboard-layout {
  grid-template-columns: 1fr;
  gap: 0;
  padding-top: 0;
}
.dashboard-page .dashboard-main {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;           /* forensic — never let dashboard-main shrink */
  min-width: 0;
  box-sizing: border-box;
}
.dashboard-page .dashboard-section {
  position: relative;
  padding-top: 0 !important;
  padding-bottom: 34px !important;
}
.dashboard-page .dashboard-section + .dashboard-section {
  margin-top: 4px;
}
.dashboard-page .dashboard-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
}
.dashboard-page .dashboard-section-hero::before {
  display: none;
}
.dashboard-page .dashboard-section .section-label {
  margin-bottom: 14px;
}

.dashboard-page .dashboard-hero-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(201, 162, 74, 0.22);
  background:
    radial-gradient(circle at top right, rgba(201, 162, 74, 0.10), transparent 34%),
    radial-gradient(circle at bottom left, rgba(31, 110, 67, 0.10), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)),
    var(--navy-mid);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28);
}
.dashboard-page .dashboard-hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.05), transparent 38%);
}
.dashboard-page .dashboard-hero-grid {
  position: relative;
  z-index: 1;
}
.dashboard-page .dashboard-hero-copy h3 {
  max-width: 14ch;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.dashboard-page .dashboard-hero-copy p {
  max-width: 62ch;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.78);
}
.dashboard-page .dashboard-header {
  align-items: flex-start;
  margin-bottom: 28px;
}
.dashboard-page .dashboard-title {
  flex-wrap: wrap;
  row-gap: 10px;
}
.dashboard-page .dashboard-title h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.45rem);
  letter-spacing: -0.03em;
}
.dashboard-page .dashboard-header > span:last-child {
  max-width: 420px;
  line-height: 1.6;
}

.dashboard-page .dashboard-summary-card {
  background: rgba(7, 20, 38, 0.58);
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.dashboard-page .dashboard-summary-grid {
  gap: 12px !important;
}
.dashboard-page .dashboard-summary-stat {
  padding: 16px 16px 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.dashboard-page .dashboard-summary-stat .text-dim {
  color: rgba(255, 255, 255, 0.50);
}
.dashboard-page .dashboard-summary-stat > div:last-child {
  line-height: 1;
}

.dashboard-page .dashboard-checker-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(201, 162, 74, 0.26);
  background:
    radial-gradient(circle at top left, rgba(201, 162, 74, 0.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    var(--navy-mid);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24);
}
.dashboard-page .dashboard-checker-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 42%);
}
.dashboard-page .dashboard-checker-grid,
.dashboard-page .dashboard-checker-result {
  position: relative;
  z-index: 1;
}
.dashboard-page .dashboard-checker-grid {
  gap: 16px !important;
}
.dashboard-page .dashboard-checker-field > span {
  color: rgba(255, 255, 255, 0.56);
}
.dashboard-page .dashboard-checker-input {
  height: 54px;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.dashboard-page .dashboard-checker-input::placeholder {
  color: rgba(255, 255, 255, 0.34);
}
.dashboard-page .dashboard-checker-input:focus {
  outline: none;
  border-color: rgba(201, 162, 74, 0.55) !important;
  background: rgba(6, 18, 34, 0.94) !important;
  box-shadow: 0 0 0 4px rgba(201, 162, 74, 0.10);
}
.dashboard-page .dashboard-checker-submit {
  min-height: 54px;
  padding-inline: 26px;
  align-self: stretch;
}
.dashboard-page .dashboard-checker-result:empty {
  display: none;
}

.dashboard-page .dashboard-section-top-edges .section-label {
  color: var(--gold);
}
.dashboard-page .dashboard-board-shell {
  padding: 22px;
  width: 100%;                 /* forensic fix — force full parent width */
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    rgba(6, 17, 32, 0.52);
}
/* (Diagnostic width-outlines removed 2026-04-23 after confirming
   .b2-board + .dashboard-main width: 100% fix landed correctly.) */
.dashboard-page .dashboard-board-topbar,
.dashboard-page .dashboard-board-sport-tabs,
.dashboard-page .dashboard-market-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.dashboard-page .dashboard-board-topbar {
  justify-content: space-between;
  margin-bottom: 16px;
}
.dashboard-page .dashboard-view-tabs,
.dashboard-page .dashboard-board-sport-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dashboard-page .dashboard-view-tab,
.dashboard-page .dashboard-sport-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.09);
  background: rgba(255,255,255,0.03);
  color: var(--white-dim);
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.dashboard-page .dashboard-view-tab:hover,
.dashboard-page .dashboard-sport-tab:hover,
.dashboard-page .dashboard-view-tab.active,
.dashboard-page .dashboard-sport-tab.active {
  color: var(--white);
  border-color: rgba(201, 162, 74, 0.32);
  background: rgba(201, 162, 74, 0.10);
}
.dashboard-page .dashboard-view-tab-badge {
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(31, 110, 67, 0.18);
  color: var(--green-light);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dashboard-page .dashboard-board-mini-note {
  color: rgba(255,255,255,0.56);
  font-size: 0.78rem;
}
.dashboard-page .dashboard-board-sport-tabs {
  padding-top: 2px;
  margin-bottom: 14px;
}
.dashboard-page .dashboard-market-filters {
  padding: 14px 0 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  margin-bottom: 16px;
}
.dashboard-page .dashboard-market-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 170px;
}
.dashboard-page .dashboard-market-filter span {
  color: rgba(255,255,255,0.54);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dashboard-page .dashboard-market-filter select {
  background: rgba(10, 22, 40, 0.95);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 12px;
  padding: 10px 12px;
  min-height: 42px;
}
.dashboard-page .dashboard-board-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}
.dashboard-page.dashboard-detail-open {
  overflow: hidden;
}
.dashboard-page .dashboard-sport-stack {
  display: grid;
  gap: 16px;
}
.dashboard-page .dashboard-sport-group {
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)), var(--navy-mid);
  overflow: hidden;
}
.dashboard-page .dashboard-sport-group-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  border: 0;
  background: rgba(255,255,255,0.02);
  color: var(--white);
  text-align: left;
  cursor: pointer;
}
.dashboard-page .dashboard-sport-group-toggle:hover {
  background: rgba(255,255,255,0.04);
}
.dashboard-page .dashboard-sport-group-title {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.dashboard-page .dashboard-sport-group-meta {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white-dim);
}
.dashboard-page .dashboard-sport-group-chevron {
  color: var(--gold);
  font-size: 0.78rem;
}
.dashboard-page .dashboard-sport-group-body {
  padding: 0 18px 18px;
}
.dashboard-page .dashboard-sport-group.is-collapsed .dashboard-sport-group-body {
  display: none;
}
.dashboard-page .dashboard-market-section {
  display: grid;
  gap: 12px;
}
.dashboard-page .dashboard-market-section + .dashboard-market-section {
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.05);
}
.dashboard-page .dashboard-market-section-header,
.dashboard-page .dashboard-edge-bucket-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dashboard-page .dashboard-market-section-header h3 {
  margin: 0;
  font-size: 1rem;
  color: var(--white);
}
.dashboard-page .dashboard-market-section-header span,
.dashboard-page .dashboard-edge-bucket-header span:last-child {
  color: rgba(255,255,255,0.54);
  font-size: 0.8rem;
}
.dashboard-page .dashboard-edge-bucket {
  display: grid;
  gap: 10px;
}
.dashboard-page .dashboard-edge-bucket + .dashboard-edge-bucket {
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.dashboard-page .dashboard-edge-bucket-header {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.68);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dashboard-page .dashboard-edge-bucket-empty {
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  color: rgba(255,255,255,0.5);
  font-size: 0.84rem;
}
.dashboard-page .dashboard-edge-bucket-list,
.dashboard-page .dashboard-market-section-list {
  display: grid;
  gap: 10px;
}
.dashboard-page .dashboard-card-grid {
  display: grid;
  gap: 12px;
}
.dashboard-page .dashboard-card-grid-biggest {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.dashboard-page .dashboard-card-grid-market {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.dashboard-page .dashboard-bet-card {
  position: relative;
  min-height: 212px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.07);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0)),
    rgba(8, 22, 40, 0.94);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}
.dashboard-page .dashboard-bet-card-surface-featured {
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
}
.dashboard-page .dashboard-bet-card-surface-solid {
  box-shadow: 0 15px 34px rgba(0, 0, 0, 0.2);
}
.dashboard-page .dashboard-bet-card-surface-thin {
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.15);
}
.dashboard-page .dashboard-bet-card-surface-muted {
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
}
.dashboard-page .dashboard-bet-card-positive {
  border-color: rgba(31, 110, 67, 0.18);
  background:
    linear-gradient(180deg, rgba(31, 110, 67, 0.08), rgba(31, 110, 67, 0)),
    rgba(8, 22, 40, 0.94);
}
.dashboard-page .dashboard-bet-card-negative {
  border-color: rgba(176, 87, 87, 0.18);
  background:
    linear-gradient(180deg, rgba(176, 87, 87, 0.06), rgba(176, 87, 87, 0)),
    rgba(10, 21, 38, 0.96);
}
.dashboard-page .dashboard-bet-card-button {
  width: 100%;
  min-height: 212px;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: 14px;
  padding: 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.dashboard-page .dashboard-bet-card-button:hover,
.dashboard-page .dashboard-bet-card-button:focus-visible {
  outline: none;
  transform: translateY(-2px);
  background: rgba(255,255,255,0.02);
}
.dashboard-page .dashboard-bet-card-surface-featured .dashboard-bet-card-button:hover,
.dashboard-page .dashboard-bet-card-surface-featured .dashboard-bet-card-button:focus-visible {
  background: rgba(255,255,255,0.028);
}
.dashboard-page .dashboard-bet-card-surface-muted .dashboard-bet-card-button:hover,
.dashboard-page .dashboard-bet-card-surface-muted .dashboard-bet-card-button:focus-visible {
  background: rgba(255,255,255,0.012);
}
.dashboard-page .dashboard-bet-card-top,
.dashboard-page .dashboard-bet-card-meta,
.dashboard-page .dashboard-bet-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dashboard-page .dashboard-bet-card-grade {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 0.82rem;
  font-weight: 800;
}
.dashboard-page .dashboard-bet-card-market,
.dashboard-page .dashboard-bet-card-meta span,
.dashboard-page .dashboard-bet-card-price span,
.dashboard-page .dashboard-bet-card-hint span {
  color: rgba(255,255,255,0.52);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dashboard-page .dashboard-bet-card-identity {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}
.dashboard-page .dashboard-bet-card-avatar {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  color: var(--white);
  font-weight: 800;
  letter-spacing: 0.04em;
}
.dashboard-page .dashboard-bet-card-surface-featured .dashboard-bet-card-avatar {
  background: rgba(255,255,255,0.085);
}
.dashboard-page .dashboard-bet-card-surface-muted .dashboard-bet-card-avatar {
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.82);
}
.dashboard-page .dashboard-bet-card-copy h4 {
  margin: 0 0 4px;
  color: var(--white);
  font-size: 1rem;
  line-height: 1.25;
}
.dashboard-page .dashboard-bet-card-surface-featured .dashboard-bet-card-copy h4 {
  color: rgba(255,255,255,0.98);
  font-weight: 760;
}
.dashboard-page .dashboard-bet-card-surface-thin .dashboard-bet-card-copy h4 {
  color: rgba(255,255,255,0.9);
}
.dashboard-page .dashboard-bet-card-surface-muted .dashboard-bet-card-copy h4 {
  color: rgba(255,255,255,0.78);
  font-weight: 680;
}
.dashboard-page .dashboard-bet-card-copy p {
  margin: 0;
  color: rgba(255,255,255,0.64);
  font-size: 0.84rem;
  line-height: 1.4;
}
.dashboard-page .dashboard-bet-card-surface-featured .dashboard-bet-card-copy p {
  color: rgba(255,255,255,0.72);
}
.dashboard-page .dashboard-bet-card-surface-thin .dashboard-bet-card-copy p {
  color: rgba(255,255,255,0.58);
}
.dashboard-page .dashboard-bet-card-surface-muted .dashboard-bet-card-copy p {
  color: rgba(255,255,255,0.5);
}
.dashboard-page .dashboard-bet-card-meta {
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
}
.dashboard-page .dashboard-bet-card-surface-muted .dashboard-bet-card-market,
.dashboard-page .dashboard-bet-card-surface-muted .dashboard-bet-card-meta span,
.dashboard-page .dashboard-bet-card-surface-muted .dashboard-bet-card-price span,
.dashboard-page .dashboard-bet-card-surface-muted .dashboard-bet-card-hint span {
  color: rgba(255,255,255,0.42);
}
.dashboard-page .dashboard-bet-card-meta span:last-child {
  color: rgba(255,255,255,0.72);
  font-size: 0.84rem;
  letter-spacing: normal;
  text-transform: none;
}
.dashboard-page .dashboard-bet-card-surface-featured .dashboard-bet-card-meta span:last-child {
  color: rgba(255,255,255,0.8);
}
.dashboard-page .dashboard-bet-card-surface-thin .dashboard-bet-card-meta span:last-child {
  color: rgba(255,255,255,0.64);
}
.dashboard-page .dashboard-bet-card-surface-muted .dashboard-bet-card-meta span:last-child {
  color: rgba(255,255,255,0.56);
}
.dashboard-page .dashboard-bet-card-footer {
  align-items: end;
  margin-top: auto;
}
.dashboard-page .dashboard-bet-card-price,
.dashboard-page .dashboard-bet-card-hint {
  display: grid;
  gap: 4px;
}
.dashboard-page .dashboard-bet-card-price strong,
.dashboard-page .dashboard-bet-card-hint strong {
  color: var(--white);
  font-size: 0.92rem;
  line-height: 1.3;
}
.dashboard-page .dashboard-bet-card-surface-featured .dashboard-bet-card-price strong,
.dashboard-page .dashboard-bet-card-surface-featured .dashboard-bet-card-hint strong {
  color: rgba(255,255,255,0.98);
}
.dashboard-page .dashboard-bet-card-surface-thin .dashboard-bet-card-price strong,
.dashboard-page .dashboard-bet-card-surface-thin .dashboard-bet-card-hint strong {
  color: rgba(255,255,255,0.88);
}
.dashboard-page .dashboard-bet-card-surface-muted .dashboard-bet-card-price strong,
.dashboard-page .dashboard-bet-card-surface-muted .dashboard-bet-card-hint strong {
  color: rgba(255,255,255,0.74);
}
.dashboard-page .dashboard-bet-card-market strong {
  font-size: 0.9rem;
}
.dashboard-page .dashboard-detail-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 160ms ease-out, visibility 0s linear 160ms;
}
.dashboard-page .dashboard-detail-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 160ms ease-out;
}
.dashboard-page .dashboard-detail-modal[hidden] {
  display: none;
}
.dashboard-page .dashboard-detail-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(4, 12, 22, 0.36);
}
.dashboard-page .dashboard-detail-dialog {
  position: relative;
  z-index: 2;
  width: min(920px, 100%);
  max-height: min(86vh, 900px);
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)),
    rgba(7, 19, 34, 0.98);
  box-shadow: 0 28px 72px rgba(0, 0, 0, 0.36);
  overflow: hidden;
  animation: dashboardDetailIn 180ms ease-out;
}
.dashboard-page .dashboard-detail-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.dashboard-page .dashboard-detail-content {
  max-height: min(86vh, 900px);
  overflow: auto;
}
.dashboard-page .dashboard-detail-shell {
  display: grid;
  gap: 14px;
  padding: 24px;
}
.dashboard-page .dashboard-detail-section {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
  padding: 18px;
}
.dashboard-page .dashboard-detail-summary-head,
.dashboard-page .dashboard-detail-section-header,
.dashboard-page .dashboard-detail-actions,
.dashboard-page .dashboard-detail-gate-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.dashboard-page .dashboard-detail-summary-head {
  align-items: center;
  margin-bottom: 16px;
}
.dashboard-page .dashboard-detail-avatar {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  color: var(--white);
  font-size: 1rem;
  font-weight: 800;
}
.dashboard-page .dashboard-detail-summary-copy {
  flex: 1;
  min-width: 220px;
}
.dashboard-page .dashboard-detail-section-label,
.dashboard-page .dashboard-detail-kicker,
.dashboard-page .dashboard-detail-subhead,
.dashboard-page .dashboard-detail-summary-item span,
.dashboard-page .dashboard-detail-stat-card span,
.dashboard-page .dashboard-detail-line-move span {
  color: rgba(255,255,255,0.46);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dashboard-page .dashboard-detail-summary-copy h3 {
  margin: 6px 0 5px;
  color: var(--white);
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.dashboard-page .dashboard-detail-summary-copy p {
  margin: 0;
  color: rgba(255,255,255,0.66);
  font-size: 0.92rem;
  line-height: 1.45;
}
.dashboard-page .dashboard-detail-grade {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 0.95rem;
  font-weight: 800;
}
.dashboard-page .dashboard-detail-summary-grid,
.dashboard-page .dashboard-detail-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.dashboard-page .dashboard-detail-stats-grid-primary {
  margin-bottom: 12px;
}
.dashboard-page .dashboard-detail-summary-item,
.dashboard-page .dashboard-detail-stat-card,
.dashboard-page .dashboard-detail-best-book,
.dashboard-page .dashboard-detail-line-move,
.dashboard-page .dashboard-detail-compare-block {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  background: rgba(255,255,255,0.022);
  padding: 14px;
}
.dashboard-page .dashboard-detail-summary-item-primary {
  background: rgba(255,255,255,0.032);
  border-color: rgba(255,255,255,0.08);
}
.dashboard-page .dashboard-detail-summary-item strong,
.dashboard-page .dashboard-detail-stat-card strong,
.dashboard-page .dashboard-detail-best-book strong,
.dashboard-page .dashboard-detail-line-move strong {
  display: block;
  margin-top: 7px;
  color: var(--white);
  font-size: 1rem;
  line-height: 1.25;
}
.dashboard-page .dashboard-detail-summary-item strong {
  font-size: 1.02rem;
}
.dashboard-page .dashboard-detail-stat-card {
  display: grid;
  gap: 2px;
}
.dashboard-page .dashboard-detail-stat-card-hero {
  padding: 16px;
  border-color: rgba(255,255,255,0.09);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    rgba(255,255,255,0.02);
}
.dashboard-page .dashboard-detail-stat-card-hero strong {
  font-size: 1.18rem;
  line-height: 1.1;
}
.dashboard-page .dashboard-detail-stat-card-hero-clear strong,
.dashboard-page .dashboard-detail-stat-card-hero-playable strong {
  color: rgba(255,255,255,0.98);
}
.dashboard-page .dashboard-detail-stat-card-hero-thin strong {
  color: rgba(255,255,255,0.9);
  font-weight: 750;
}
.dashboard-page .dashboard-detail-stat-card-hero-not_playable {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.012)),
    rgba(255,255,255,0.014);
}
.dashboard-page .dashboard-detail-stat-card-hero-not_playable strong {
  color: rgba(255,255,255,0.78);
  font-weight: 700;
}
.dashboard-page .dashboard-detail-intelligence {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  background: rgba(255,255,255,0.024);
}
.dashboard-page .dashboard-detail-model-clear .dashboard-detail-intelligence,
.dashboard-page .dashboard-detail-model-playable .dashboard-detail-intelligence {
  background: rgba(255,255,255,0.028);
}
.dashboard-page .dashboard-detail-model-thin .dashboard-detail-intelligence {
  background: rgba(255,255,255,0.02);
}
.dashboard-page .dashboard-detail-model-not_playable .dashboard-detail-intelligence {
  background: rgba(255,255,255,0.018);
}
.dashboard-page .dashboard-detail-intelligence-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.dashboard-page .dashboard-detail-strength-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.78);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dashboard-page .dashboard-detail-playability {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.022);
  color: rgba(255,255,255,0.62);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.dashboard-page .dashboard-detail-playability-clear,
.dashboard-page .dashboard-detail-playability-playable {
  color: rgba(255,255,255,0.78);
  border-color: rgba(31, 110, 67, 0.16);
}
.dashboard-page .dashboard-detail-playability-not_playable {
  color: rgba(255,255,255,0.52);
  border-color: rgba(176, 87, 87, 0.12);
}
.dashboard-page .dashboard-detail-intelligence p,
.dashboard-page .dashboard-detail-best-book-note {
  margin: 0;
  color: rgba(255,255,255,0.68);
  font-size: 0.9rem;
  line-height: 1.55;
}
.dashboard-page .dashboard-detail-playability-note {
  margin-top: 10px !important;
  color: rgba(255,255,255,0.62);
  font-size: 0.84rem !important;
}
.dashboard-page .dashboard-detail-line-move.is-still {
  border-color: rgba(255,255,255,0.05);
}
.dashboard-page .dashboard-detail-line-move {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
}
.dashboard-page .dashboard-detail-line-move em {
  color: rgba(255,255,255,0.54);
  font-size: 0.8rem;
  font-style: normal;
  text-align: right;
}
.dashboard-page .dashboard-detail-best-book {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  background:
    linear-gradient(180deg, rgba(31, 110, 67, 0.08), rgba(31, 110, 67, 0.03)),
    rgba(255,255,255,0.02);
  border-color: rgba(31, 110, 67, 0.18);
}
.dashboard-page .dashboard-detail-best-book-copy {
  min-width: 0;
}
.dashboard-page .dashboard-detail-best-book em {
  display: inline-flex;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}
.dashboard-page .dashboard-detail-best-book-note {
  margin-top: 10px;
  padding-left: 2px;
}
.dashboard-page .dashboard-detail-compare-block + .dashboard-detail-compare-block {
  margin-top: 12px;
}
.dashboard-page .dashboard-detail-subhead {
  display: block;
  margin-bottom: 12px;
}
.dashboard-page .dashboard-detail-section-header {
  margin-bottom: 12px;
}
.dashboard-page .dashboard-detail-section-header h4 {
  margin-top: 4px;
}
.dashboard-page .dashboard-detail-actions {
  align-items: center;
}
.dashboard-page .dashboard-detail-gate {
  background:
    linear-gradient(180deg, rgba(201, 162, 74, 0.06), rgba(201, 162, 74, 0.015)),
    rgba(255,255,255,0.022);
  border-color: rgba(201, 162, 74, 0.12);
}
.dashboard-page .dashboard-detail-gate-badge {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(201, 162, 74, 0.10);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dashboard-page .dashboard-detail-gate h4,
.dashboard-page .dashboard-detail-section-header h4 {
  margin: 0;
  color: var(--white);
  font-size: 1.02rem;
}
.dashboard-page .dashboard-detail-gate p {
  margin: 10px 0 0;
  color: rgba(255,255,255,0.64);
  line-height: 1.6;
}
.dashboard-page .dashboard-detail-gate-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.dashboard-page .dashboard-detail-gate-list span {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.025);
  color: rgba(255,255,255,0.6);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.dashboard-page .dashboard-book-row {
  padding: 11px 12px;
  border: 1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.02);
}
.dashboard-page .dashboard-book-meta {
  min-width: 0;
}
.dashboard-page .dashboard-book-name,
.dashboard-page .dashboard-book-odds {
  line-height: 1.2;
}

@keyframes dashboardDetailIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.dashboard-page .dashboard-board-row {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  background: rgba(11, 30, 58, 0.84);
  overflow: hidden;
}
.dashboard-page .dashboard-board-row-positive {
  border-color: rgba(31, 110, 67, 0.16);
  background:
    linear-gradient(180deg, rgba(31, 110, 67, 0.08), rgba(31, 110, 67, 0)),
    rgba(11, 30, 58, 0.84);
}
.dashboard-page .dashboard-board-row-neutral {
  background: rgba(11, 30, 58, 0.84);
}
.dashboard-page .dashboard-board-row-negative {
  border-color: rgba(176, 87, 87, 0.14);
  background:
    linear-gradient(180deg, rgba(176, 87, 87, 0.06), rgba(176, 87, 87, 0)),
    rgba(16, 28, 46, 0.88);
}
.dashboard-page .dashboard-board-row.is-open {
  border-color: rgba(201, 162, 74, 0.22);
  box-shadow: 0 14px 34px rgba(0,0,0,0.20);
}
.dashboard-page .dashboard-board-row-toggle {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1.75fr) minmax(260px, 0.95fr);
  gap: 18px;
  padding: 16px 18px;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.dashboard-page .dashboard-board-row-main,
.dashboard-page .dashboard-board-row-stats {
  min-width: 0;
}
.dashboard-page .dashboard-board-row-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.dashboard-page .dashboard-board-row-grade,
.dashboard-page .dashboard-board-row-type,
.dashboard-page .dashboard-board-row-time {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dashboard-page .dashboard-board-row-grade {
  font-weight: 800;
}
.dashboard-page .dashboard-board-row-type,
.dashboard-page .dashboard-board-row-time {
  color: rgba(255,255,255,0.54);
}
.dashboard-page .dashboard-board-row-side {
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1.3;
  word-break: break-word;
}
.dashboard-page .dashboard-board-row-matchup {
  margin-top: 4px;
  color: rgba(255,255,255,0.66);
  font-size: 0.88rem;
  line-height: 1.45;
}
.dashboard-page .dashboard-board-row-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: 12px;
  align-items: center;
}
.dashboard-page .dashboard-board-row-stat {
  min-width: 0;
}
.dashboard-page .dashboard-board-row-stat-label {
  display: block;
  color: rgba(255,255,255,0.48);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dashboard-page .dashboard-board-row-stat-value {
  display: block;
  color: var(--white);
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dashboard-page .dashboard-board-row-chevron {
  color: rgba(255,255,255,0.48);
  font-size: 0.85rem;
}
.dashboard-page .dashboard-board-row-panel {
  display: none;
  padding: 0 18px 18px;
}
.dashboard-page .dashboard-board-row-panel.open {
  display: block;
}
.dashboard-page .dashboard-row-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}
.dashboard-page .dashboard-row-detail-card,
.dashboard-page .dashboard-row-books,
.dashboard-page .dashboard-row-upgrade,
.dashboard-page .dashboard-board-lock {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
}
.dashboard-page .dashboard-row-detail-card,
.dashboard-page .dashboard-row-books,
.dashboard-page .dashboard-row-upgrade,
.dashboard-page .dashboard-board-lock {
  padding: 16px;
}
.dashboard-page .dashboard-row-detail-title {
  margin-bottom: 12px;
  color: rgba(255,255,255,0.68);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.dashboard-page .dashboard-row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.dashboard-page .dashboard-books-list {
  display: grid;
  gap: 8px;
}
.dashboard-page .dashboard-book-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
.dashboard-page .dashboard-book-row.is-current {
  border: 1px solid rgba(31, 110, 67, 0.28);
  background: rgba(31, 110, 67, 0.10);
}
.dashboard-page .dashboard-book-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dashboard-page .dashboard-book-name,
.dashboard-page .dashboard-book-odds {
  font-weight: 700;
  color: var(--white);
}
.dashboard-page .dashboard-book-edge {
  font-size: 0.84rem;
}
.dashboard-page .dashboard-book-link {
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}
.dashboard-page .dashboard-book-link-disabled {
  color: rgba(255,255,255,0.42);
}
.dashboard-page .dashboard-books-empty {
  color: rgba(255,255,255,0.5);
  font-size: 0.86rem;
}
.dashboard-page .dashboard-row-upgrade,
.dashboard-page .dashboard-board-lock {
  display: grid;
  gap: 12px;
}
.dashboard-page .dashboard-row-upgrade p,
.dashboard-page .dashboard-board-lock p,
.dashboard-page .dashboard-board-lock h3 {
  margin: 0;
}
.dashboard-page .dashboard-row-upgrade-badge,
.dashboard-page .dashboard-board-lock-badge {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(201, 162, 74, 0.12);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.dashboard-page #filters-container {
  padding: 20px 22px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0));
  margin-bottom: 24px !important;
}
.dashboard-page .filters-bar {
  padding: 10px 0;
}
.dashboard-page .dashboard-featured-pick {
  margin-bottom: 20px;
}
.dashboard-page .dashboard-top-edges-list {
  gap: 14px;
}
.dashboard-page .dashboard-top-edges-list .edge-card {
  border-color: rgba(201, 162, 74, 0.22);
  background:
    linear-gradient(180deg, rgba(201, 162, 74, 0.05), rgba(201, 162, 74, 0)),
    var(--navy-mid);
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}
.dashboard-page .dashboard-top-edges-list .edge-card:hover:not(.edge-locked):not(.edge-in-play) {
  border-color: rgba(201, 162, 74, 0.45);
}

.dashboard-page .dashboard-track-card {
  border-color: rgba(255,255,255,0.08);
  background:
    radial-gradient(circle at top center, rgba(31, 110, 67, 0.08), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)),
    var(--navy-mid);
}
.dashboard-page .dashboard-track-grid {
  gap: 14px !important;
}
.dashboard-page .dashboard-track-stat {
  padding: 18px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(7, 20, 38, 0.42);
  min-height: 96px;
}
.dashboard-page .dashboard-track-stat .text-dim {
  color: rgba(255,255,255,0.48);
  margin-bottom: 10px;
}

.dashboard-page .dashboard-section-all-bets .section-label {
  color: rgba(255, 255, 255, 0.76);
}
.dashboard-page .dashboard-all-bets-list {
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0)),
    rgba(6, 17, 32, 0.45);
  gap: 14px;
}
.dashboard-page .dashboard-all-bets-list .sport-section {
  padding: 20px 20px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.05);
  background: rgba(255,255,255,0.015);
  margin-bottom: 0;
}
.dashboard-page .dashboard-all-bets-list .bettype-section {
  gap: 14px;
}
.dashboard-page .dashboard-all-bets-list .edge-card {
  background: rgba(16, 38, 74, 0.78);
}
.dashboard-page .dashboard-all-bets-list .edges-empty {
  background: rgba(255,255,255,0.015);
}

.dashboard-page .dashboard-premium-card {
  position: relative;
  overflow: hidden;
  padding: 32px 30px;
  border-width: 1px;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255,255,255,0.04);
}
.dashboard-page .dashboard-premium-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(201, 162, 74, 0.20), transparent 30%),
    radial-gradient(circle at bottom left, rgba(201, 162, 74, 0.10), transparent 28%);
  pointer-events: none;
}
.dashboard-page .dashboard-premium-card::after {
  content: 'PRO';
  position: absolute;
  top: 18px;
  right: 20px;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--navy-dark);
  background: linear-gradient(135deg, var(--gold), var(--gold-light));
  padding: 8px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(201, 162, 74, 0.24);
}
.dashboard-page .dashboard-premium-card > * {
  position: relative;
  z-index: 1;
}
.dashboard-page .dashboard-premium-card h3 {
  max-width: 14ch;
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  line-height: 1.05;
  margin-bottom: 12px !important;
}
.dashboard-page .dashboard-premium-card p {
  max-width: 54ch;
  color: rgba(255,255,255,0.78);
}
.dashboard-page .dashboard-premium-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.dashboard-page .locked-banner {
  margin-top: 6px;
  background: rgba(201, 162, 74, 0.08);
}

@media (max-width: 960px) {
  .dashboard-page .dashboard-card-grid-market {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dashboard-page .dashboard-board-row-toggle {
    grid-template-columns: 1fr;
  }
  .dashboard-page .dashboard-board-row-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .dashboard-page .dashboard-row-detail-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .dashboard-page .dashboard-card-grid-market,
  .dashboard-page .dashboard-card-grid-biggest {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-page .dashboard-board-shell {
    padding: 18px;
  }
  .dashboard-page .dashboard-board-topbar {
    align-items: flex-start;
  }
  .dashboard-page .dashboard-market-filter {
    min-width: min(100%, 220px);
    flex: 1 1 180px;
  }
  .dashboard-page .dashboard-board-row-toggle {
    padding: 14px;
  }
  .dashboard-page .dashboard-board-row-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .dashboard-page .dashboard-book-row {
    align-items: flex-start;
    flex-direction: column;
  }
  .dashboard-page .dashboard-detail-modal {
    align-items: end;
    padding: 0;
  }
  .dashboard-page .dashboard-detail-dialog {
    width: 100%;
    max-height: 84vh;
    border-radius: 24px 24px 0 0;
    animation: dashboardSheetIn 180ms ease-out;
  }
  .dashboard-page .dashboard-detail-shell {
    padding: 18px;
  }
  .dashboard-page .dashboard-detail-summary-grid,
  .dashboard-page .dashboard-detail-stats-grid {
    grid-template-columns: 1fr;
  }
  .dashboard-page .dashboard-detail-line-move,
  .dashboard-page .dashboard-detail-best-book {
    align-items: flex-start;
    flex-direction: column;
  }
  .dashboard-page .dashboard-detail-line-move em {
    text-align: left;
  }
  .dashboard-page .dashboard-detail-intelligence {
    padding: 13px;
  }
  .dashboard-page .dashboard-detail-intelligence-top {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .dashboard-page .dashboard-card-grid-market,
  .dashboard-page .dashboard-card-grid-biggest {
    grid-template-columns: 1fr;
  }
}

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

/* ============================================
   PROFILE PAGE POLISH
   App-like grouping, spacing, and hierarchy
   without changing profile functionality.
   ============================================ */
.profile-page .profile-shell {
  padding-bottom: 56px;
}
.profile-page .profile-container {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.profile-page .profile-section {
  position: relative;
  padding: 0 0 28px;
}
.profile-page .profile-section + .profile-section {
  margin-top: 2px;
}
.profile-page .profile-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
}
.profile-page .profile-section:first-child::before {
  display: none;
}
.profile-page .profile-card,
.profile-page .profile-overview-card {
  padding: 28px;
}
.profile-page .profile-overview-card {
  border-color: var(--b2-gold-faint);
  background:
    radial-gradient(circle at top right, rgba(201, 162, 74, 0.10), transparent 30%),
    linear-gradient(165deg, var(--b2-navy-card-hi) 0%, var(--b2-navy-card) 45%, #0A1B33 100%);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    0 0 20px rgba(201, 162, 74, 0.05),
    0 1px 0 rgba(255, 220, 140, 0.04) inset;
}
.profile-page .profile-overview-header,
.profile-page .profile-record-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.profile-page .profile-overview-header {
  margin-bottom: 24px;
}
.profile-page .profile-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 22px;
  align-items: start;
}
.profile-page .profile-account-block,
.profile-page .profile-stats-block {
  padding: 20px;
  border: 1px solid var(--b2-hairline);
  border-radius: 14px;
  background: rgba(6, 17, 31, 0.55);
}
.profile-page .profile-info-grid,
.profile-page .profile-stats-grid,
.profile-page .profile-form-grid,
.profile-page .profile-tracked-bets-list {
  display: grid;
  gap: 14px;
}
.profile-page .profile-info-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.profile-page .profile-info-item,
.profile-page .profile-stat-card,
.profile-page .profile-empty-state {
  border: 1px solid var(--b2-hairline);
  border-radius: 12px;
  background:
    linear-gradient(165deg, rgba(18, 45, 82, 0.45) 0%, rgba(14, 33, 64, 0.25) 100%);
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}
.profile-page .profile-stat-card:hover,
.profile-page .profile-info-item:hover {
  border-color: var(--b2-hairline-gold);
}

/* Tracked bet card — dashboard-card depth (upgraded 2026-04-24).
   Previously rendered with the same translucent treatment as the
   info-item + stat-card, which visually blended into the profile
   page gradient. Upgraded to the full navy-card-hi gradient + a
   heavier hairline + dashboard-level drop shadow so the portfolio
   of tracked bets reads as a stack of discrete, clickable cards. */
.profile-page .profile-bet-card {
  border: 1px solid rgba(240, 236, 226, 0.11);
  border-radius: 12px;
  background: linear-gradient(165deg, var(--b2-navy-card-hi) 0%, var(--b2-navy-card) 45%, #0A1B33 100%);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.02) inset;
  transition: border-color 0.2s ease, box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(.2,.6,.2,1);
}
.profile-page .profile-bet-card:hover {
  border-color: var(--b2-hairline-gold);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.42),
    0 0 18px rgba(201, 162, 74, 0.05),
    0 1px 0 rgba(255, 220, 140, 0.04) inset;
  transform: translateY(-2px);
}
.profile-page .profile-info-item,
.profile-page .profile-stat-card,
.profile-page .profile-empty-state {
  padding: 18px;
}
.profile-page .profile-stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.profile-page .profile-streak-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--b2-hairline);
}
.profile-page .profile-streak-label {
  color: var(--b2-ink-mute);
}
.profile-page .profile-streak-value {
  color: var(--b2-ink);
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
}
.profile-page .profile-streak-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.profile-page .profile-streak-label {
  font-size: 0.72rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.profile-page .profile-streak-value {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
}
.profile-page .profile-stat-card {
  min-height: 108px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.profile-page .profile-field-label {
  font-family: var(--b2-font-mono);
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b2-ink-mute);
  font-weight: 600;
  margin-bottom: 8px;
}
.profile-page .profile-field-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--b2-ink);
}
.profile-page .profile-field-value-gold,
.profile-page .profile-stat-value-gold {
  color: var(--b2-gold);
}
.profile-page .profile-stat-value {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--b2-ink);
  line-height: 1;
  letter-spacing: -0.02em;
}
.profile-page .profile-stat-value-green,
.profile-page .profile-access-value-green {
  color: var(--b2-green-on);
}
.profile-page .profile-two-column {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.profile-page .profile-access-list {
  display: grid;
  gap: 2px;
}
.profile-page .profile-access-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.profile-page .profile-access-row:last-child {
  border-bottom: 0;
}
.profile-page .profile-access-value {
  font-weight: 700;
  color: var(--white);
  text-align: right;
}
.profile-page .profile-input {
  width: 100%;
  padding: 14px 16px;
  background: rgba(6, 17, 31, 0.45);
  border: 1px solid var(--b2-hairline);
  border-radius: 10px;
  color: var(--b2-ink);
  min-height: 52px;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
.profile-page .profile-input::placeholder {
  color: var(--b2-ink-dim);
}
.profile-page .profile-input:focus {
  outline: none;
  border-color: var(--b2-gold-faint);
  box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.10);
}
.profile-page .profile-form-button {
  justify-self: start;
}
.profile-page .profile-record-card {
  background:
    linear-gradient(165deg, var(--b2-navy-card-hi) 0%, var(--b2-navy-card) 45%, #0A1B33 100%);
  border-color: var(--b2-hairline);
  box-shadow:
    0 6px 28px rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.02) inset;
}
.profile-page .profile-record-header {
  margin-bottom: 18px;
}
.profile-page .profile-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.profile-page .profile-filter-controls {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.profile-page .profile-advanced-filters {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}
.profile-page .profile-filter-select-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 110px;
}
.profile-page .profile-filter-select-label {
  font-size: 0.68rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.profile-page .profile-filter-select {
  min-height: 36px;
  padding: 8px 34px 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)),
    rgba(7, 20, 38, 0.92);
  color: var(--white);
  font-size: 0.82rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.72) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.72) 50%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  background-position:
    calc(100% - 16px) calc(50% - 2px),
    calc(100% - 11px) calc(50% - 2px),
    0 0;
  background-size:
    5px 5px,
    5px 5px,
    100% 100%;
  background-repeat: no-repeat;
}
.profile-page .profile-filter-select:hover {
  border-color: rgba(31, 110, 67, 0.36);
  background-color: rgba(8, 23, 42, 0.96);
}
.profile-page .profile-filter-select:focus {
  outline: none;
  border-color: rgba(31, 110, 67, 0.52);
  box-shadow: 0 0 0 4px rgba(31, 110, 67, 0.12);
  background-color: rgba(8, 23, 42, 0.98);
}
.profile-page .profile-filter-select option {
  background: #ffffff;
  color: #0b1f3a;
}
.profile-page .tracked-filter-btn {
  min-height: 36px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.72);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.profile-page .tracked-filter-btn:hover {
  border-color: rgba(255,255,255,0.20);
  color: var(--white);
}
.profile-page .tracked-filter-btn.active {
  border-color: rgba(201, 162, 74, 0.42);
  background: rgba(201, 162, 74, 0.10);
  color: var(--gold-light);
}
.profile-page .tracked-filter-btn:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(201, 162, 74, 0.10);
}
.profile-page .profile-record-caption {
  font-size: 0.76rem;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-top: 4px;
}
.profile-page .profile-bet-card {
  padding: 20px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.profile-page .profile-bet-main {
  min-width: 260px;
  flex: 1;
}
.profile-page .profile-bet-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.profile-page .profile-bet-title {
  font-weight: 800;
  font-size: 1rem;
  color: var(--white);
  line-height: 1.35;
}
.profile-page .profile-bet-meta-label {
  font-size: 0.68rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 6px;
}
.profile-page .profile-bet-meta {
  font-size: 0.88rem;
  line-height: 1.6;
}
.profile-page .profile-bet-submeta {
  font-size: 0.78rem;
  margin-top: 8px;
}
.profile-page .profile-bet-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.profile-page .profile-bet-side {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-left: auto;
}
.profile-page .profile-delete-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.62);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.profile-page .profile-delete-btn:hover {
  border-color: rgba(231, 76, 60, 0.45);
  color: var(--red);
  background: rgba(231, 76, 60, 0.08);
}
.profile-page .profile-delete-btn:focus {
  outline: none;
  border-color: rgba(231, 76, 60, 0.5);
  box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.10);
}

/* Portfolio-feel upgrade on tracked-bet cards (2026-04-24).
   The dashboard-sourced bets carry a full snapshot, so we can surface
   the tier badge, matchup, and a 3-stat row (Edge / EV / True %).
   Custom-entry bets (no snapshot) gracefully fall back to the plain
   meta row via .has-snapshot gating on the stat block. */
.profile-page .profile-bet-card.has-snapshot {
  padding: 22px 24px;
}
.profile-page .profile-bet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.profile-page .profile-bet-book {
  font-family: var(--b2-font-mono);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b2-ink-mute);
  font-weight: 600;
}
.profile-page .profile-bet-result {
  margin-left: auto;
}
.profile-page .profile-bet-matchup {
  font-size: 0.82rem;
  color: var(--b2-ink-soft);
  margin: 4px 0 10px;
  letter-spacing: 0.2px;
}
.profile-page .profile-bet-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 14px 0 12px;
  margin: 6px 0 4px;
  border-top: 1px solid var(--b2-hairline);
  border-bottom: 1px solid var(--b2-hairline);
}
.profile-page .profile-bet-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.profile-page .profile-bet-stat-label {
  font-family: var(--b2-font-mono);
  font-size: 0.58rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--b2-ink-mute);
  font-weight: 600;
}
.profile-page .profile-bet-stat-value {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--b2-ink);
  line-height: 1;
  letter-spacing: -0.01em;
}
.profile-page .profile-bet-stat-value.profile-stat-value-gold  { color: var(--b2-gold-light); }
.profile-page .profile-bet-stat-value.profile-stat-value-green { color: var(--b2-green-on); }
.profile-page .profile-bet-stat-value.profile-stat-value-red   { color: var(--b2-tier-f); }

/* Override old submeta styling to support the new multi-span meta row. */
.profile-page .profile-bet-card .profile-bet-submeta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-family: var(--b2-font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.3px;
  color: var(--b2-ink-mute);
  margin-top: 10px;
}
.profile-page .profile-bet-card .profile-bet-submeta span {
  white-space: nowrap;
}

/* Result-button active states — kept out of inline style attrs so the
   template stays declarative. */
.profile-page .tracked-result-btn.is-active {
  border-color: var(--b2-hairline-gold);
  color: var(--b2-ink);
  background: rgba(201, 162, 74, 0.06);
}
.profile-page .tracked-result-btn.is-active.is-win {
  border-color: rgba(47, 161, 104, 0.45);
  color: var(--b2-green-on);
  background: rgba(47, 161, 104, 0.08);
}
.profile-page .tracked-result-btn.is-active.is-loss {
  border-color: rgba(198, 75, 71, 0.45);
  color: var(--b2-tier-f);
  background: rgba(198, 75, 71, 0.08);
}

/* Tracked parlay card — distinct from single-bet cards.
   PARLAY pill in gold, compact leg list beneath the combined stats. */
.profile-page .profile-bet-card.is-parlay {
  border-color: var(--b2-hairline-gold);
  background:
    linear-gradient(180deg, rgba(201, 162, 74, 0.05) 0%, rgba(201, 162, 74, 0) 45%),
    linear-gradient(165deg, var(--b2-navy-card-hi) 0%, var(--b2-navy-card) 45%, #0A1B33 100%);
}
.profile-page .profile-bet-parlay-pill {
  color: var(--b2-gold);
  background: rgba(201, 162, 74, 0.08);
  border-color: var(--b2-gold-faint);
  letter-spacing: 0.14em;
}
.profile-page .profile-bet-parlay-legs {
  list-style: none;
  padding: 0;
  margin: 8px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-page .profile-bet-parlay-leg {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(6, 17, 31, 0.5);
  border: 1px solid var(--b2-hairline);
  border-radius: 8px;
  font-family: var(--b2-font-ui);
  min-width: 0;
}
.profile-page .profile-bet-parlay-leg-title {
  color: var(--b2-ink);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.profile-page .profile-bet-parlay-leg-meta {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  color: var(--b2-ink-mute);
  font-size: 0.78rem;
  letter-spacing: 0;
  flex-shrink: 0;
}

/* Compact variant — used on the tracked list where only the side_label
   matters. No per-leg background, no odds, no matchup. A tight
   side-by-side glance list capped at 4 + "+N more" overflow. */
.profile-page .profile-bet-parlay-legs-compact {
  gap: 3px;
  margin: 6px 0 2px;
}
.profile-page .profile-bet-parlay-legs-compact li {
  position: relative;
  padding: 2px 0 2px 14px;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--b2-ink);
  font-size: 0.82rem;
  letter-spacing: -0.004em;
  line-height: 1.3;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-page .profile-bet-parlay-legs-compact li::before {
  content: '';
  position: absolute;
  left: 0; top: 10px;
  width: 5px; height: 1px;
  background: var(--b2-hairline-gold);
}
.profile-page .profile-bet-parlay-legs-compact .profile-bet-parlay-leg-more {
  color: var(--b2-ink-mute);
  font-style: italic;
  font-size: 0.76rem;
}
.profile-page .profile-bet-parlay-legs-compact .profile-bet-parlay-leg-more::before {
  background: transparent;
}

/* Parlay cards are clickable — subtle pointer affordance. Single-bet
   cards stay non-interactive at the card level (their action buttons
   inside the card are the clickable targets). */
.profile-page .profile-bet-card.is-parlay {
  cursor: pointer;
}

/* =========================================================================
   Compact parlay popup modal (2026-04-24)
   Singleton on profile.html. Opened by clicking a tracked parlay card.
   Deliberately narrower and shorter than the dashboard bet-detail modal
   per spec — 440px max-width, 68vh max-height. Gold-hairline border +
   navy-card gradient + subtle rise/fade animation on open.
   ========================================================================= */
.profile-parlay-modal[hidden] { display: none; }
.profile-parlay-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: profile-parlay-modal-fade 160ms ease-out;
}
.profile-parlay-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 10, 20, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  cursor: pointer;
}
.profile-parlay-modal-shell {
  position: relative;
  max-width: 440px;
  width: 100%;
  max-height: 68vh;
  overflow-y: auto;
  padding: 22px 24px 20px;
  background:
    linear-gradient(180deg, rgba(201, 162, 74, 0.04) 0%, rgba(201, 162, 74, 0) 40%),
    linear-gradient(165deg, var(--b2-navy-card-hi) 0%, var(--b2-navy-card) 45%, #0A1B33 100%);
  border: 1px solid var(--b2-hairline-gold);
  border-radius: 14px;
  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.6),
    0 0 24px rgba(201, 162, 74, 0.06),
    0 1px 0 rgba(255, 220, 140, 0.05) inset;
  animation: profile-parlay-modal-rise 200ms cubic-bezier(.2,.6,.2,1);
  color: var(--b2-ink-soft);
}
@keyframes profile-parlay-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes profile-parlay-modal-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.profile-parlay-modal-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--b2-hairline);
  border-radius: 50%;
  color: var(--b2-ink-mute);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.profile-parlay-modal-close:hover {
  color: var(--b2-ink);
  border-color: var(--b2-hairline-gold);
  background: rgba(201, 162, 74, 0.06);
}

/* Header: pill + title + 3-stat row. */
.profile-parlay-modal-header {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  padding-right: 32px;
}
.profile-parlay-modal-header h3 {
  font-family: var(--b2-font-hero);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--b2-ink);
  letter-spacing: -0.008em;
  margin: 0;
  line-height: 1.2;
}
.profile-parlay-modal-header .parlay-tier-badge {
  align-self: flex-start;
}
.profile-parlay-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 10px 0 0;
  border-top: 1px solid var(--b2-hairline);
  margin-top: 4px;
}
.profile-parlay-modal-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.profile-parlay-modal-stats span {
  font-family: var(--b2-font-mono);
  font-size: 0.55rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--b2-ink-mute);
  font-weight: 600;
}
.profile-parlay-modal-stats strong {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--b2-ink);
  letter-spacing: -0.01em;
  line-height: 1;
}
.profile-parlay-modal-stats strong.is-gold  { color: var(--b2-gold-light); }
.profile-parlay-modal-stats strong.is-green { color: var(--b2-green-on); }
.profile-parlay-modal-stats strong.is-red   { color: var(--b2-tier-f); }

/* Legs list — tight rows, monospace odds column. */
.profile-parlay-modal-legs {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.profile-parlay-modal-leg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: rgba(6, 17, 31, 0.55);
  border: 1px solid var(--b2-hairline);
  border-radius: 8px;
  min-width: 0;
}
.profile-parlay-modal-leg-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.profile-parlay-modal-leg-title {
  color: var(--b2-ink);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-parlay-modal-leg-meta {
  color: var(--b2-ink-mute);
  font-size: 0.72rem;
  letter-spacing: 0.2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-parlay-modal-leg-odds {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--b2-ink);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.profile-parlay-modal-leg-empty {
  color: var(--b2-ink-mute);
  font-style: italic;
  font-size: 0.82rem;
  justify-content: center;
}

/* Action row — single toggle button, no visual clutter. */
.profile-parlay-modal-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 12px;
  border-top: 1px solid var(--b2-hairline);
}
.profile-parlay-modal-toggle {
  min-width: 140px;
  font-weight: 800;
  letter-spacing: 0.4px;
}
.profile-parlay-modal-toggle.is-untrack {
  color: var(--b2-tier-f);
  border-color: rgba(198, 75, 71, 0.45);
  background: rgba(198, 75, 71, 0.05);
}
.profile-parlay-modal-toggle.is-untrack:hover {
  color: var(--b2-ink);
  background: rgba(198, 75, 71, 0.15);
  border-color: var(--b2-tier-f);
}

/* Body scroll lock while modal open. */
body.profile-parlay-modal-open { overflow: hidden; }

@media (max-width: 520px) {
  .profile-parlay-modal { padding: 16px; }
  .profile-parlay-modal-shell { padding: 20px 18px 18px; max-height: 84vh; }
}

@media (max-width: 1100px) {
  .dashboard-page .dashboard-hero-grid {
    grid-template-columns: 1fr !important;
  }
  .dashboard-page .dashboard-hero-copy h3 {
    max-width: 18ch;
  }
  .dashboard-page .dashboard-track-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .profile-page .profile-overview-grid {
    grid-template-columns: 1fr;
  }
  .profile-page .profile-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .dashboard-page .dashboard-section {
    padding-bottom: 28px !important;
  }
  .dashboard-page .dashboard-checker-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .dashboard-page .dashboard-checker-submit {
    grid-column: 1 / -1;
  }
  .dashboard-page .dashboard-track-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .dashboard-page .dashboard-all-bets-list {
    padding: 16px;
  }
  .dashboard-page .dashboard-all-bets-list .sport-section {
    padding: 18px 16px;
  }
  .profile-page .profile-two-column,
  .profile-page .profile-info-grid {
    grid-template-columns: 1fr;
  }
  .profile-page .profile-form-button {
    justify-self: stretch;
  }
  .profile-page .profile-filter-controls {
    align-items: stretch;
  }
  .profile-page .profile-advanced-filters {
    width: 100%;
  }
  .profile-page .profile-filter-select-wrap {
    flex: 1 1 160px;
  }
  .profile-page .profile-streak-row {
    gap: 12px;
  }
}

@media (max-width: 640px) {
  .dashboard-page .dashboard-section-hero {
    padding-top: 88px !important;
  }
  .dashboard-page .dashboard-hero-card,
  .dashboard-page .dashboard-checker-card,
  .dashboard-page .dashboard-track-card,
  .dashboard-page .dashboard-premium-card {
    padding: 24px 20px !important;
  }
  .dashboard-page .dashboard-title {
    gap: 10px;
  }
  .dashboard-page .dashboard-title h2 {
    width: 100%;
  }
  .dashboard-page .dashboard-summary-grid,
  .dashboard-page .dashboard-track-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .dashboard-page .dashboard-checker-grid {
    grid-template-columns: 1fr !important;
  }
  .dashboard-page .dashboard-checker-submit {
    width: 100%;
  }
  .dashboard-page #filters-container {
    padding: 16px;
  }
  .dashboard-page .filters-bar {
    align-items: flex-start;
  }
  .dashboard-page .dashboard-all-bets-list {
    padding: 12px;
    border-radius: 16px;
  }
  .dashboard-page .dashboard-all-bets-list .sport-section {
    padding: 16px 14px;
    border-radius: 14px;
  }
  .dashboard-page .dashboard-premium-card::after {
    position: static;
    display: inline-flex;
    margin-bottom: 16px;
  }
  .dashboard-page .dashboard-premium-card h3 {
    max-width: none;
  }
  .profile-page .profile-card,
  .profile-page .profile-overview-card {
    padding: 24px 20px;
  }
  .profile-page .profile-section {
    padding-bottom: 24px;
  }
  .profile-page .profile-overview-header .btn,
  .profile-page .profile-bet-side,
  .profile-page .profile-bet-actions,
  .profile-page .profile-bet-actions .btn {
    width: 100%;
  }
  .profile-page .profile-delete-btn {
    margin-left: auto;
  }
  .profile-page .profile-filter-bar {
    gap: 8px;
  }
  .profile-page .profile-advanced-filters {
    gap: 10px;
  }
  .profile-page .profile-filter-select-wrap {
    min-width: 0;
    flex: 1 1 100%;
  }
  .profile-page .tracked-filter-btn {
    flex: 1 1 calc(50% - 8px);
    justify-content: center;
  }
  .profile-page .profile-stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 420px) {
  .dashboard-page .dashboard-summary-grid,
  .dashboard-page .dashboard-track-grid {
    grid-template-columns: 1fr !important;
  }
  .dashboard-page .dashboard-summary-stat,
  .dashboard-page .dashboard-track-stat {
    min-height: auto;
  }
  .profile-page .profile-stats-grid {
    grid-template-columns: 1fr;
  }
  .profile-page .profile-stat-card {
    min-height: auto;
  }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .dashboard-layout { grid-template-columns: 1fr; }
  .dashboard-sidebar { flex-direction: row; flex-wrap: wrap; }
  .dashboard-sidebar .sidebar-card { flex: 1; min-width: 280px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .record-summary { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-actions .btn-secondary { display: none; }
  .nav-mobile-toggle { display: block; }

  .hero { min-height: auto; padding: 140px 24px 80px; }
  .hero-stats { flex-direction: column; gap: 24px; align-items: center; }
  .hero h1 { font-size: 2rem; }

  .steps-grid { grid-template-columns: 1fr; }
  .articles-grid { grid-template-columns: 1fr; }
  .social-stats { grid-template-columns: repeat(2, 1fr); }
  .pricing-cards { grid-template-columns: 1fr; }
  .record-summary { grid-template-columns: repeat(2, 1fr); }

  .edges-table { font-size: 0.8rem; }
  .edges-table th, .edges-table td { padding: 10px 8px; }

  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }

  .section { padding: 60px 0; }

  .dashboard-sidebar { flex-direction: column; }
}

@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero-actions { flex-direction: column; width: 100%; }
  .hero-actions .btn { width: 100%; }
  .record-summary { grid-template-columns: 1fr 1fr; }
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-in {
  animation: fadeInUp 0.6s ease forwards;
}
.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--navy-dark); }
::-webkit-scrollbar-thumb { background: var(--navy-card); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

/* ============================================
   VIEW TIER TOGGLE (Free/Pro, top-right nav)
   ============================================ */
.view-tier-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  border: 1px solid var(--border);
  border-radius: 50px;
  background: rgba(0, 0, 0, 0.25);
  margin-right: 8px;
}
.view-tier-toggle .vtt-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white-dim);
}
.view-tier-toggle .vtt-btn {
  appearance: none;
  background: transparent;
  border: none;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  border-radius: 50px;
  cursor: pointer;
  transition: var(--transition);
}
.view-tier-toggle .vtt-btn:hover { color: var(--white); }
.view-tier-toggle .vtt-btn.active {
  background: var(--gold);
  color: var(--navy-dark);
  box-shadow: 0 0 12px rgba(201, 162, 74, 0.32);
}

/* ============================================
   LOCKED EDGE CARDS (free-tier blur)
   ============================================ */
.edge-card.edge-locked {
  position: relative;
  overflow: hidden;
}
.edge-card.edge-locked > .edge-card-top {
  filter: blur(6px) saturate(0.7);
  pointer-events: none;
  user-select: none;
  opacity: 0.65;
}
.edge-card-lock-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(10, 22, 40, 0.55), rgba(16, 30, 53, 0.78));
  backdrop-filter: blur(2px);
  z-index: 2;
}
.edge-card-lock-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px;
  text-align: center;
}
.edge-card-lock-inner .lock-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 50px;
  background: rgba(201, 162, 74, 0.15);
  border: 1px solid rgba(201, 162, 74, 0.55);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.edge-card-lock-inner .lock-pill.lock-s {
  background: rgba(201, 162, 74, 0.18);
  border-color: var(--tier-S);
  color: var(--tier-S);
}
.edge-card-lock-inner .lock-cta {
  font-size: 0.85rem;
  color: var(--white);
  font-weight: 700;
}
.edge-card-lock-inner .lock-sub {
  font-size: 0.72rem;
  color: var(--white-dim);
}
.edge-card-lock-inner .lock-upgrade {
  margin-top: 6px;
  padding: 8px 18px;
  border-radius: 50px;
  background: var(--gold);
  color: var(--navy-dark);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  transition: var(--transition);
}
.edge-card-lock-inner .lock-upgrade:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201, 162, 74, 0.4);
}

.locked-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin: 10px 0 6px;
  background: rgba(201, 162, 74, 0.06);
  border: 1px dashed rgba(201, 162, 74, 0.3);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  color: var(--white-muted);
}
.locked-banner strong { color: var(--gold); font-weight: 800; }
.locked-banner a {
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.72rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ============================================
   ARCHIVE TABLE — Pro column gating
   ============================================ */
.archive-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.archive-table thead th {
  padding: 12px 10px;
  text-align: left;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white-dim);
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}
.archive-table tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--border);
  color: var(--white-muted);
  vertical-align: middle;
}
.track-record-page .track-record-bet-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.track-record-page .track-record-bet-main {
  color: var(--white);
  font-weight: 650;
  line-height: 1.35;
}
.track-record-page .track-record-bet-meta {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white-dim);
}
.archive-table tbody tr:hover { background: rgba(201, 162, 74, 0.03); }
.archive-table .col-pro { position: relative; }
.archive-table .col-pro.locked-cell {
  filter: blur(5px);
  user-select: none;
  pointer-events: none;
  color: var(--white);
}
.track-record-page .track-record-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}
.track-record-page .track-record-filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.track-record-page .track-record-filter span {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--white-dim);
}
.track-record-page .track-record-filter select {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--white);
  font-size: 0.88rem;
  line-height: 1.2;
  transition: border-color 150ms ease-out, background 150ms ease-out, box-shadow 150ms ease-out;
}
.track-record-page .track-record-filter select:hover {
  border-color: rgba(201, 162, 74, 0.28);
  background: rgba(255, 255, 255, 0.045);
}
.track-record-page .track-record-filter select:focus {
  outline: none;
  border-color: rgba(201, 162, 74, 0.48);
  box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.08);
}
.track-record-page .track-record-filter select option {
  color: #f4f6fb;
  background: #10264a;
}
.track-record-page .track-record-context-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
}
.track-record-page .track-record-active-context {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.5;
}
.track-record-page .track-record-context-note {
  margin-top: 5px;
  font-size: 0.78rem;
  color: var(--white-dim);
  line-height: 1.55;
}
.track-record-page .track-record-empty-state {
  margin-top: 16px;
  padding: 24px 18px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  text-align: center;
  background: rgba(255, 255, 255, 0.02);
}
.track-record-page .track-record-empty-state h4 {
  margin-bottom: 8px;
  font-size: 1rem;
  color: var(--white);
}
.track-record-page .track-record-empty-state p {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.6;
  color: var(--white-dim);
}
.track-record-page .track-record-table-card {
  margin-top: -4px;
}
.track-record-page .track-record-table-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.track-record-page .track-record-visible-count {
  font-size: 0.78rem;
  color: var(--white-dim);
  line-height: 1.5;
}
.track-record-page .track-record-load-more-row {
  display: flex;
  justify-content: center;
  padding-top: 16px;
}
.track-record-page .track-record-load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  transition: border-color 150ms ease-out, background 150ms ease-out, transform 150ms ease-out;
}
.track-record-page .track-record-load-more-btn:hover {
  border-color: rgba(201, 162, 74, 0.3);
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-1px);
}
.track-record-page .track-record-load-more-btn:focus {
  outline: none;
  border-color: rgba(201, 162, 74, 0.48);
  box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.08);
}
.archive-pro-overlay {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 50px;
  background: rgba(201, 162, 74, 0.12);
  border: 1px solid rgba(201, 162, 74, 0.4);
  color: var(--gold);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
}
.result-W { color: var(--green); font-weight: 800; }
.result-L { color: #C45A5A; font-weight: 800; }
.result-P { color: var(--gold); font-weight: 800; }
.result-V { color: var(--white-dim); font-weight: 700; }

.countdown-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 50px;
  background: linear-gradient(135deg, rgba(201, 162, 74, 0.10), rgba(31, 110, 67, 0.06));
  border: 1px solid rgba(201, 162, 74, 0.35);
  font-size: 0.85rem;
  color: var(--white-muted);
}
.countdown-pill .cd-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
}
.countdown-pill .cd-value {
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: 1.5px;
}
@media (max-width: 980px) {
  .track-record-page .track-record-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .track-record-page .track-record-filters {
    grid-template-columns: 1fr;
  }
  .track-record-page .track-record-context-bar {
    padding: 12px 14px;
  }
  .track-record-page .track-record-active-context {
    font-size: 0.84rem;
  }
  .track-record-page .track-record-context-note {
    font-size: 0.75rem;
  }
  .track-record-page .track-record-table-controls {
    margin-bottom: 12px;
  }
  .track-record-page .track-record-visible-count {
    font-size: 0.75rem;
  }
}

/* ============================================
   PRICING TIER CARDS
   ============================================ */
.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; } }
.tier-card {
  position: relative;
  background: linear-gradient(165deg, var(--b2-navy-card-hi) 0%, var(--b2-navy-card) 45%, #0A1B33 100%);
  border: 1px solid var(--b2-hairline);
  border-radius: 14px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow:
    0 6px 28px rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.02) inset;
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.25s cubic-bezier(.2,.6,.2,1);
}
.tier-card:hover {
  border-color: var(--b2-hairline-gold);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.03) inset;
  transform: translateY(-2px);
}
.tier-card.tier-card-pro {
  border-color: var(--b2-gold-faint);
  background:
    linear-gradient(180deg, rgba(201, 162, 74, 0.08) 0%, transparent 40%),
    linear-gradient(165deg, var(--b2-navy-card-hi) 0%, var(--b2-navy-card) 45%, #0A1B33 100%);
}
.tier-card.tier-card-pro:hover {
  border-color: var(--b2-gold);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.4),
    0 0 28px rgba(201, 162, 74, 0.1),
    0 1px 0 rgba(255, 220, 140, 0.06) inset;
}
.tier-card.tier-card-pro::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--b2-gold);
  color: var(--b2-navy-base);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 2px;
  padding: 5px 14px;
  border-radius: 50px;
}
.tier-card.tier-card-elite {
  opacity: 0.6;
  border-style: dashed;
  border-color: var(--b2-hairline);
}
.tier-card-name {
  font-family: var(--b2-font-mono);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--b2-gold);
}
.tier-card-price {
  font-family: var(--b2-font-num);
  font-weight: 700;
  font-size: 2.8rem;
  color: var(--b2-ink);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.tier-card-price small {
  font-size: 0.78rem;
  color: var(--b2-ink-mute);
  font-weight: 500;
  margin-left: 6px;
  letter-spacing: 0.3px;
}
.tier-card-pitch {
  font-family: var(--b2-font-hero);
  font-style: italic;
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--b2-ink-soft);
  line-height: 1.5;
}
.tier-card-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tier-card-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: var(--b2-ink-soft);
  line-height: 1.5;
}
.tier-card-features li::before {
  content: '\2713';
  color: var(--b2-green-on);
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 1px;
}
.tier-card-features.tier-features-muted li {
  color: var(--b2-ink-mute);
}
.tier-card-features.tier-features-muted li::before {
  color: var(--b2-ink-dim);
  content: '\2022';
}
.tier-card .btn { margin-top: auto; }

.pricing-hero-pitch {
  max-width: 720px;
  margin: 0 auto 40px;
  font-size: 1.05rem;
  color: var(--white-muted);
  line-height: 1.7;
  text-align: center;
}

/* ============================================
   LEARN TAB — Pro gate
   ============================================ */
.learn-hero {
  min-height: auto;
  padding: 160px 24px 48px;
}
.learn-trust-line {
  margin-top: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--white-dim);
}
.learn-section-intro {
  max-width: 720px;
  margin: 14px auto 0;
  font-size: 0.98rem;
  color: var(--white-muted);
}
.learn-module-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.learn-module-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px;
}
.learn-module-tag {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
}
.learn-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0;
}
.learn-points li {
  position: relative;
  padding-left: 18px;
  font-size: 0.88rem;
  color: var(--white-muted);
  line-height: 1.55;
}
.learn-points li::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px rgba(31, 110, 67, 0.25);
}
.learn-why {
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--white-dim);
}
.learn-band {
  background: linear-gradient(180deg, rgba(16, 38, 74, 0.55), rgba(11, 31, 58, 0.2));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.learn-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 24px;
  align-items: start;
}
.learn-copy {
  padding-top: 8px;
}
.learn-method-card {
  padding: 28px;
}
.learn-method-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  counter-reset: method;
}
.learn-method-steps li {
  position: relative;
  padding-left: 54px;
  color: var(--white-muted);
  font-size: 0.92rem;
  line-height: 1.6;
}
.learn-method-steps li::before {
  counter-increment: method;
  content: counter(method);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(201, 162, 74, 0.12);
  border: 1px solid rgba(201, 162, 74, 0.35);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
}
.learn-example-card {
  padding: 32px;
}
.learn-example-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 18px;
}
.learn-example-stat {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 14px;
}
.learn-example-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--white-dim);
  margin-bottom: 8px;
}
.learn-example-value {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--white);
}
.learn-example-note {
  font-size: 0.9rem;
  color: var(--white-muted);
  line-height: 1.7;
  border-top: 1px solid var(--border);
  padding-top: 18px;
}
.learn-philosophy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.learn-philosophy-card {
  padding: 26px;
}
.learn-philosophy-card h3 {
  font-size: 1.05rem;
  margin-bottom: 10px;
}
.learn-cta-card {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  padding: 36px;
  border-color: rgba(201, 162, 74, 0.3);
  background: linear-gradient(135deg, rgba(201, 162, 74, 0.05), rgba(16, 38, 74, 0.95));
}
.learn-cta-card p {
  max-width: 620px;
  margin: 14px auto 0;
}
.learn-locked {
  max-width: 540px;
  margin: 80px auto;
  padding: 48px 40px;
  border-radius: var(--radius);
  border: 1px solid rgba(201, 162, 74, 0.4);
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.06), var(--navy-mid));
  text-align: center;
}
.learn-locked .lock-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(201, 162, 74, 0.12);
  border: 1px solid rgba(201, 162, 74, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--gold);
}
.learn-locked h2 {
  font-size: 1.4rem;
  margin-bottom: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.learn-locked p {
  color: var(--white-muted);
  margin-bottom: 24px;
  line-height: 1.6;
}
.learn-toc {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 32px;
}
.learn-toc-card {
  padding: 24px;
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: var(--transition);
}
.learn-toc-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.learn-toc-card h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
  color: var(--white);
}
.learn-toc-card p {
  font-size: 0.82rem;
  color: var(--white-dim);
  line-height: 1.5;
}
.learn-toc-card .toc-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}
@media (max-width: 900px) {
  .learn-module-grid,
  .learn-philosophy-grid,
  .learn-split,
  .learn-example-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   DASHBOARD ENHANCEMENTS (timing + alerts spec)
   Appended additions — extends existing
   .edge-card / .grade-badge patterns. Uses only
   existing design tokens.
   ============================================ */

/* S-tier gets the green glow mentioned in the spec */
.grade-badge.grade-S {
  box-shadow: 0 0 0 1px rgba(201, 162, 74, 0.25),
              0 0 18px rgba(31, 110, 67, 0.22);
}

/* Tabular numerals for math rows */
.edge-card-stats .stat-value,
.edge-card-linemove,
.featured-pick-label {
  font-variant-numeric: tabular-nums;
}

/* Hover lift */
.edge-card {
  transition: transform 150ms ease-out,
              border-color 150ms ease-out,
              box-shadow 150ms ease-out;
}
.edge-card:hover:not(.edge-in-play):not(.edge-locked) {
  transform: translateY(-2px);
  border-color: var(--border-gold);
  box-shadow: 0 6px 22px rgba(201, 162, 74, 0.10);
}

/* ----- Featured Pick bar ----- */
.featured-pick-wrap {
  margin: 0 0 24px 0;
}
.featured-pick-label {
  display: inline-block;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.featured-pick .edge-card {
  border: 1px solid rgba(201, 162, 74, 0.40);
  box-shadow: 0 4px 22px rgba(201, 162, 74, 0.06);
}
.featured-pick-blur {
  position: relative;
  border: 1px solid rgba(201, 162, 74, 0.40);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(201,162,74,0.08), var(--navy-mid));
  padding: 0;
  overflow: hidden;
}
.featured-pick-blur .edge-card {
  filter: blur(8px);
  pointer-events: none;
  margin: 0;
}
.featured-pick-blur-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 24px;
}
.featured-pick-blur-overlay .fp-head {
  color: var(--gold);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.featured-pick-blur-overlay .fp-sub {
  color: var(--white-muted);
  font-size: 0.85rem;
}

/* ----- Line movement strip ----- */
.edge-card-linemove {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.78rem;
  color: var(--white-muted);
  margin: 8px 0 4px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
}
.edge-card-linemove .lm-arrow { color: var(--white-dim); }
.edge-card-linemove .lm-sharp { color: var(--gold); margin-left: auto; font-weight: 600; }
.edge-card-linemove.no-move { color: var(--white-dim); }

/* ----- Trap siren ----- */
.edge-card-siren {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--navy-mid);
  border: 2px solid var(--green);
  cursor: pointer;
  transition: transform 150ms ease-out, box-shadow 150ms ease-out;
}
.edge-card-siren.siren-opposite { border-color: var(--red); }
.edge-card-siren:hover { transform: scale(1.08); }
.edge-card-siren.siren-same {
  box-shadow: 0 0 0 1px rgba(31, 110, 67, 0.25),
              0 0 16px rgba(31, 110, 67, 0.25);
}
.edge-card-siren.siren-opposite {
  box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.25),
              0 0 16px rgba(231, 76, 60, 0.25);
}
.edge-card-siren svg { width: 16px; height: 16px; display: block; }
.edge-card-siren.siren-same svg    { stroke: var(--green); }
.edge-card-siren.siren-opposite svg{ stroke: var(--red); }
/* If the card already positions things, make sure it's a containing block */
.edge-card { position: relative; }

/* ----- Kelly chip + CTA button ----- */
.edge-card-kelly {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--gold);
  background: rgba(201, 162, 74, 0.08);
  border: 1px solid rgba(201, 162, 74, 0.25);
  border-radius: 999px;
}
.edge-card-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.edge-card-inline-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.edge-card-track-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  min-width: 136px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--white);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: border-color 150ms ease-out, color 150ms ease-out, background 150ms ease-out, opacity 150ms ease-out;
}
.edge-card-track-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.edge-card-track-btn.is-tracked {
  color: var(--green);
  border-color: rgba(31, 110, 67, 0.4);
  background: rgba(31, 110, 67, 0.08);
}
.edge-card-track-btn[disabled] {
  cursor: default;
  opacity: 1;
}
.edge-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy-dark);
  background: var(--gold);
  border-radius: var(--radius-sm);
  transition: background 150ms ease-out, transform 150ms ease-out;
}
.edge-card-cta:hover { background: var(--gold-light); transform: translateY(-1px); }
.edge-card-cta-locked {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--white-dim);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: default;
}

/* ----- IN PLAY state ----- */
.inplay-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(231, 76, 60, 0.10);
  border: 1px solid rgba(231, 76, 60, 0.40);
  border-radius: 6px;
  padding: 3px 8px;
}
.inplay-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: inplay-pulse 1.6s infinite;
}
@keyframes inplay-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
.edge-in-play {
  border-color: rgba(155, 59, 59, 0.30) !important;
}
.edge-in-play-free {
  position: relative;
  filter: blur(6px);
  pointer-events: none;
}
.edge-in-play-free-wrap {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 12px;
}
.edge-in-play-free-wrap .inplay-free-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
}
.edge-in-play-free-wrap .inplay-free-overlay .line {
  color: var(--white-muted);
  font-size: 0.85rem;
}

/* ----- Trap modal ----- */
.bethics-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 22, 40, 0.72);
  z-index: 1000;
}
.bethics-modal.open { display: flex; }
.bethics-modal-card {
  width: min(440px, 92vw);
  background: var(--navy-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  position: relative;
  box-shadow: var(--shadow-lg);
}
.bethics-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  color: var(--white-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.bethics-modal-card h3 {
  font-size: 1.05rem;
  margin-bottom: 12px;
}
.bethics-modal-card .modal-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.85rem;
  padding: 6px 0;
  border-bottom: 1px dashed var(--border);
}
.bethics-modal-card .modal-row:last-of-type { border-bottom: none; }
.bethics-modal-card .modal-row .k { color: var(--white-dim); }
.bethics-modal-card .modal-disclaimer {
  margin-top: 12px;
  font-size: 0.72rem;
  color: var(--white-dim);
  line-height: 1.5;
}

/* ----- Free-tier empty state ----- */
.edges-empty-upgrade {
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--border-gold);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(201,162,74,0.06), transparent);
}
.edges-empty-upgrade h3 {
  color: var(--gold);
  font-size: 1.25rem;
  margin-bottom: 8px;
}
.edges-empty-upgrade p {
  color: var(--white-muted);
  font-size: 0.9rem;
  margin-bottom: 18px;
}

/* Mobile tightening */
@media (max-width: 480px) {
  .edge-card-cta-row { flex-direction: column; align-items: stretch; }
  .edge-card-inline-actions { width: 100%; }
  .edge-card-linemove { flex-wrap: wrap; }
  .edge-card-linemove .lm-sharp { margin-left: 0; }
  .edge-card-siren { top: 8px; right: 8px; }
  .bethics-modal-card { padding: 18px; }
}

/* ============================================
   CROSS-PAGE FLOW CTA HELPERS
   ============================================ */
.flow-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 28px;
}
.flow-cta-copy {
  flex: 1;
  min-width: 0;
}
.flow-cta-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.flow-helper {
  font-size: 0.82rem;
  color: var(--white-dim);
  line-height: 1.6;
}
.flow-link-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.flow-link-row a {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
}
.flow-link-row a:hover {
  color: var(--gold-light);
}
@media (max-width: 900px) {
  .flow-cta-card {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Pick'em (PP) badge — small, subtle gold pill, top-right of card.
   Refreshed 2026-04-24 to b2 gold tokens so the badge reads as a
   Bethics-native indicator rather than a generic gray pill. */
.dashboard-page .dashboard-bet-card-pp-badge {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  font-family: var(--b2-font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--b2-gold);
  background: rgba(201, 162, 74, 0.08);
  border: 1px solid var(--b2-gold-faint);
  border-radius: 100px;
  padding: 2px 7px;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}

/* Pick'em Pricing section in popup — visually separated from sportsbook data */
.dashboard-page .dashboard-detail-pickem {
  border-left: 2px solid rgba(201, 162, 74, 0.35);
}

/* Bottom-row primary Track action in popup */
.dashboard-page .dashboard-detail-track-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}
.dashboard-page .dashboard-detail-track-btn {
  min-width: 160px;
  padding: 10px 18px;
}

/* ============================================================
   DASHBOARD CARD VISUAL REFINEMENT (2026-04-23)
   Goal: edge strength = visual hierarchy. Instant scannability,
         premium feel, brand tokens only. No flashy effects.
   Composes with existing .dashboard-bet-card-surface-* and
   .dashboard-bet-card-{positive,negative,neutral} rules above.
   ============================================================ */

/* Card base — refined corners, deeper plate, smoother transition */
.dashboard-page .dashboard-bet-card {
  border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.06);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(11, 31, 58, 0.97), rgba(8, 22, 42, 1));
  transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 220ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 220ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Edge-strength glow ladder — driven by grade pill on the article */
.dashboard-page .dashboard-bet-card.dashboard-bet-card-grade-S {
  border-color: rgba(201, 162, 74, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(201, 162, 74, 0.10),
    0 14px 32px rgba(0, 0, 0, 0.30),
    0 0 22px rgba(201, 162, 74, 0.10);
}
.dashboard-page .dashboard-bet-card.dashboard-bet-card-grade-A {
  border-color: rgba(31, 110, 67, 0.32);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.26),
    0 0 16px rgba(31, 110, 67, 0.09);
}
.dashboard-page .dashboard-bet-card.dashboard-bet-card-grade-B {
  border-color: rgba(76, 138, 110, 0.22);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.20);
}
.dashboard-page .dashboard-bet-card.dashboard-bet-card-grade-C {
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}
.dashboard-page .dashboard-bet-card.dashboard-bet-card-grade-D {
  border-color: rgba(255, 255, 255, 0.04);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
  opacity: 0.78;
}

/* Hover micro-interaction — lift + glow intensifies in proportion to tier */
.dashboard-page .dashboard-bet-card:hover {
  transform: translateY(-3px);
}
.dashboard-page .dashboard-bet-card.dashboard-bet-card-grade-S:hover {
  border-color: rgba(201, 162, 74, 0.50);
  box-shadow:
    inset 0 0 0 1px rgba(201, 162, 74, 0.18),
    0 18px 38px rgba(0, 0, 0, 0.34),
    0 0 30px rgba(201, 162, 74, 0.16);
}
.dashboard-page .dashboard-bet-card.dashboard-bet-card-grade-A:hover {
  border-color: rgba(31, 110, 67, 0.44);
  box-shadow:
    0 16px 32px rgba(0, 0, 0, 0.30),
    0 0 22px rgba(31, 110, 67, 0.14);
}
.dashboard-page .dashboard-bet-card.dashboard-bet-card-grade-B:hover {
  border-color: rgba(76, 138, 110, 0.34);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}
.dashboard-page .dashboard-bet-card.dashboard-bet-card-grade-C:hover {
  border-color: rgba(255, 255, 255, 0.10);
}
.dashboard-page .dashboard-bet-card.dashboard-bet-card-grade-D:hover {
  border-color: rgba(255, 255, 255, 0.08);
  opacity: 0.92;
}

/* Inner button keeps no transform/bg flicker — lift is on the article now */
.dashboard-page .dashboard-bet-card-button:hover,
.dashboard-page .dashboard-bet-card-button:focus-visible {
  transform: none;
  background: transparent;
}

/* Grade pill — tier-coded color, slightly tighter, premium weight */
.dashboard-page .dashboard-bet-card-grade {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  font-size: 0.78rem;
  font-weight: 800;
  border: 1px solid transparent;
  letter-spacing: 0.02em;
}
.dashboard-page .dashboard-bet-card-grade.grade-S {
  color: var(--tier-S);
  background: rgba(201, 162, 74, 0.14);
  border-color: rgba(201, 162, 74, 0.42);
}
.dashboard-page .dashboard-bet-card-grade.grade-A {
  color: var(--tier-A);
  background: rgba(31, 110, 67, 0.14);
  border-color: rgba(31, 110, 67, 0.40);
}
.dashboard-page .dashboard-bet-card-grade.grade-B {
  color: var(--tier-B);
  background: rgba(76, 138, 110, 0.10);
  border-color: rgba(76, 138, 110, 0.32);
}
.dashboard-page .dashboard-bet-card-grade.grade-C {
  color: var(--tier-C);
  background: rgba(138, 122, 74, 0.10);
  border-color: rgba(138, 122, 74, 0.30);
}
.dashboard-page .dashboard-bet-card-grade.grade-D {
  color: var(--tier-D);
  background: rgba(107, 118, 136, 0.10);
  border-color: rgba(107, 118, 136, 0.28);
}

/* Noise reduction — secondary hint dimmed so the card breathes */
.dashboard-page .dashboard-bet-card-hint span {
  color: rgba(255, 255, 255, 0.36);
  font-size: 0.68rem;
}
.dashboard-page .dashboard-bet-card-hint strong {
  color: rgba(255, 255, 255, 0.62);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}

/* Sportsbook + odds — primary footer info, tabular for instant scan */
.dashboard-page .dashboard-bet-card-price strong {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

/* PP badge positioning override (restrained corner placement — the base
   .dashboard-bet-card-pp-badge rule above provides color + border now). */
.dashboard-page .dashboard-bet-card-pp-badge {
  top: 12px;
  right: 14px;
}

/* Track button (popup, bottom row) — premium, primary-but-restrained */
.dashboard-page .dashboard-detail-track-btn {
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.14), rgba(201, 162, 74, 0.05));
  border: 1px solid rgba(201, 162, 74, 0.40);
  color: var(--gold-light);
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
}
.dashboard-page .dashboard-detail-track-btn:hover {
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.20), rgba(201, 162, 74, 0.09));
  border-color: rgba(201, 162, 74, 0.58);
  color: var(--gold);
}
.dashboard-page .dashboard-detail-track-btn.is-tracked {
  background: linear-gradient(180deg, rgba(31, 110, 67, 0.16), rgba(31, 110, 67, 0.06));
  border-color: rgba(31, 110, 67, 0.45);
  color: rgba(255, 255, 255, 0.92);
}
.dashboard-page .dashboard-detail-track-btn.is-tracked:hover {
  background: linear-gradient(180deg, rgba(31, 110, 67, 0.22), rgba(31, 110, 67, 0.10));
  border-color: rgba(31, 110, 67, 0.62);
}

/* ============================================================
   DASHBOARD 3-LAYER RESTRUCTURE (2026-04-23)
   - Compact summary panel (replaces hero copy)
   - Top Edges view (hero + supporting)
   - Elite tab badge polish
   - S-tier slight emphasis bump
   ============================================================ */

/* --- Hero summary panel (LEFT stats / RIGHT breakdown) --- */
.dashboard-page .dashboard-hero-panel {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 28px;
  align-items: stretch;
}
.dashboard-page .dashboard-hero-panel-left {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 20px;
  align-items: end;
}
.dashboard-page .dashboard-hero-panel-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.06);
}
.dashboard-page .dashboard-hero-stat .label-xs {
  margin-bottom: 6px;
}
.dashboard-page .dashboard-hero-stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--white);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.dashboard-page .dashboard-hero-stat-primary .dashboard-hero-stat-value {
  font-size: 2.6rem;
}
.dashboard-page .dashboard-hero-stat-value.tier-S { color: var(--tier-S); }
.dashboard-page .dashboard-hero-stat-value.tier-A { color: var(--tier-A); }

.dashboard-page .dashboard-hero-panel-right {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.dashboard-page .dashboard-hero-breakdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.dashboard-page .dashboard-hero-breakdown-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}
.dashboard-page .dashboard-hero-breakdown-label {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
}
.dashboard-page .dashboard-hero-breakdown-count {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.dashboard-page .dashboard-hero-breakdown-row.tier-S {
  border-color: rgba(201, 162, 74, 0.32);
  background: rgba(201, 162, 74, 0.06);
}
.dashboard-page .dashboard-hero-breakdown-row.tier-S .dashboard-hero-breakdown-label,
.dashboard-page .dashboard-hero-breakdown-row.tier-S .dashboard-hero-breakdown-count {
  color: var(--tier-S);
}
.dashboard-page .dashboard-hero-breakdown-row.tier-A {
  border-color: rgba(31, 110, 67, 0.30);
  background: rgba(31, 110, 67, 0.05);
}
.dashboard-page .dashboard-hero-breakdown-row.tier-A .dashboard-hero-breakdown-label,
.dashboard-page .dashboard-hero-breakdown-row.tier-A .dashboard-hero-breakdown-count {
  color: var(--tier-A);
}
.dashboard-page .dashboard-hero-breakdown-row.tier-B .dashboard-hero-breakdown-label,
.dashboard-page .dashboard-hero-breakdown-row.tier-B .dashboard-hero-breakdown-count {
  color: var(--tier-B);
}
.dashboard-page .dashboard-hero-breakdown-row.tier-C .dashboard-hero-breakdown-label,
.dashboard-page .dashboard-hero-breakdown-row.tier-C .dashboard-hero-breakdown-count {
  color: var(--tier-C);
}

@media (max-width: 860px) {
  .dashboard-page .dashboard-hero-panel {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .dashboard-page .dashboard-hero-panel-divider { display: none; }
  .dashboard-page .dashboard-hero-panel-left { grid-template-columns: 1fr 1fr; }
  .dashboard-page .dashboard-hero-stat-primary { grid-column: span 2; }
}

/* --- Top Edges view: hero card + supporting grid --- */
.dashboard-page .dashboard-top-edges-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.dashboard-page .dashboard-top-edges-hero {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 28px 32px;
  cursor: pointer;
  min-height: 0;
}
.dashboard-page .dashboard-top-edges-hero:focus-visible {
  outline: 2px solid rgba(201, 162, 74, 0.55);
  outline-offset: 3px;
}
.dashboard-page .dashboard-top-edges-hero-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dashboard-page .dashboard-top-edges-hero-market {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.dashboard-page .dashboard-top-edges-hero-body {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 28px;
  align-items: center;
}
.dashboard-page .dashboard-top-edges-hero-kicker {
  display: inline-block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
}
.dashboard-page .dashboard-top-edges-hero-title {
  margin: 0 0 6px;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--white);
  font-weight: 700;
}
.dashboard-page .dashboard-top-edges-hero-subtitle {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.96rem;
}
.dashboard-page .dashboard-top-edges-hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.82rem;
}
.dashboard-page .dashboard-top-edges-hero-edge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 16px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.dashboard-page .dashboard-top-edges-hero-edge-label {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 700;
}
.dashboard-page .dashboard-top-edges-hero-edge-value {
  font-size: 3.4rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.dashboard-page .dashboard-top-edges-hero-edge-sub {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}
.dashboard-page .dashboard-top-edges-hero-footer {
  display: flex;
  justify-content: flex-end;
}
.dashboard-page .dashboard-top-edges-hero-cta {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.7);
  transition: color 180ms ease-out;
}
.dashboard-page .dashboard-top-edges-hero:hover .dashboard-top-edges-hero-cta {
  color: var(--gold-light);
}

.dashboard-page .dashboard-top-edges-supporting-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.dashboard-page .dashboard-top-edges-supporting-header h4 {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 700;
}
.dashboard-page .dashboard-top-edges-supporting-header span {
  color: rgba(255, 255, 255, 0.45);
  font-variant-numeric: tabular-nums;
  font-size: 0.86rem;
}

@media (max-width: 760px) {
  .dashboard-page .dashboard-top-edges-hero { padding: 22px 20px; }
  .dashboard-page .dashboard-top-edges-hero-body { grid-template-columns: 1fr; }
  .dashboard-page .dashboard-top-edges-hero-edge-value { font-size: 2.8rem; }
}

/* --- S-tier: slight emphasis bump (Part 4) --- */
.dashboard-page .dashboard-bet-card.dashboard-bet-card-grade-S {
  box-shadow:
    inset 0 0 0 1px rgba(201, 162, 74, 0.12),
    0 16px 36px rgba(0, 0, 0, 0.32),
    0 0 28px rgba(201, 162, 74, 0.13);
}
.dashboard-page .dashboard-bet-card.dashboard-bet-card-grade-S .dashboard-bet-card-button {
  padding: 18px 18px 16px;
}

/* --- Elite tab badge: gated/premium feel --- */
.dashboard-page .dashboard-view-tab-elite .dashboard-view-tab-badge {
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.22), rgba(201, 162, 74, 0.10));
  border: 1px solid rgba(201, 162, 74, 0.40);
  color: var(--gold-light);
  font-weight: 700;
  letter-spacing: 0.12em;
}
.dashboard-page .dashboard-view-tab-elite.active .dashboard-view-tab-badge,
.dashboard-page .dashboard-view-tab-elite:hover .dashboard-view-tab-badge {
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.32), rgba(201, 162, 74, 0.15));
  border-color: rgba(201, 162, 74, 0.55);
  color: var(--gold);
}

/* ============================================================
   TOP EDGES HERO — premium color pop (2026-04-23)
   Subtle gold ambient near edge value, faint green undertone,
   stronger contrast vs page background. No flash, no neon.
   ============================================================ */

/* Hero: layered ambient wash — gold right (where edge sits), green hint left */
.dashboard-page .dashboard-top-edges-hero {
  background:
    radial-gradient(ellipse 60% 70% at 88% 55%, rgba(201, 162, 74, 0.10), transparent 60%),
    radial-gradient(ellipse 50% 70% at 10% 30%, rgba(31, 110, 67, 0.045), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(13, 33, 60, 1), rgba(7, 19, 38, 1));
  border-color: rgba(201, 162, 74, 0.22);
}
.dashboard-page .dashboard-top-edges-hero.dashboard-bet-card-grade-S {
  border-color: rgba(201, 162, 74, 0.42);
  box-shadow:
    inset 0 0 0 1px rgba(201, 162, 74, 0.14),
    0 22px 50px rgba(0, 0, 0, 0.40),
    0 0 36px rgba(201, 162, 74, 0.16);
}
.dashboard-page .dashboard-top-edges-hero.dashboard-bet-card-grade-A {
  border-color: rgba(31, 110, 67, 0.34);
  box-shadow:
    0 20px 44px rgba(0, 0, 0, 0.36),
    0 0 22px rgba(31, 110, 67, 0.12);
}

/* Hero edge well — a more "premium" pedestal for the number */
.dashboard-page .dashboard-top-edges-hero-edge {
  background:
    radial-gradient(circle at 50% 0%, rgba(201, 162, 74, 0.10), transparent 70%),
    rgba(0, 0, 0, 0.22);
  border-color: rgba(201, 162, 74, 0.18);
  padding: 22px 18px;
}

/* Hero edge value — gold sheen for S, green for A/B, subtle text shadow */
.dashboard-page .dashboard-top-edges-hero-edge-value {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}
.dashboard-page .dashboard-top-edges-hero.dashboard-bet-card-grade-S .dashboard-top-edges-hero-edge-value {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 60%, var(--gold-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 10px rgba(201, 162, 74, 0.18));
}
.dashboard-page .dashboard-top-edges-hero.dashboard-bet-card-grade-A .dashboard-top-edges-hero-edge-value,
.dashboard-page .dashboard-top-edges-hero.dashboard-bet-card-grade-B .dashboard-top-edges-hero-edge-value {
  color: var(--tier-A);
  filter: drop-shadow(0 0 6px rgba(31, 110, 67, 0.22));
}

.dashboard-page .dashboard-top-edges-hero-kicker {
  color: var(--gold-light);
}
.dashboard-page .dashboard-top-edges-hero-edge-label {
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
}
.dashboard-page .dashboard-top-edges-hero-title {
  font-size: 1.7rem;
  font-weight: 750;
}

/* Hover: tighten the gold ambient slightly */
.dashboard-page .dashboard-top-edges-hero:hover {
  transform: translateY(-3px);
  border-color: rgba(201, 162, 74, 0.34);
}
.dashboard-page .dashboard-top-edges-hero.dashboard-bet-card-grade-S:hover {
  border-color: rgba(201, 162, 74, 0.55);
  box-shadow:
    inset 0 0 0 1px rgba(201, 162, 74, 0.20),
    0 26px 56px rgba(0, 0, 0, 0.44),
    0 0 44px rgba(201, 162, 74, 0.20);
}

/* ============================================================
   SUPPORTING CARDS — clearly secondary to the hero (scoped)
   Only inside the Top Edges supporting grid; other views unchanged.
   ============================================================ */
.dashboard-page .dashboard-top-edges-supporting-grid .dashboard-bet-card {
  min-height: 184px;
}
.dashboard-page .dashboard-top-edges-supporting-grid .dashboard-bet-card-button {
  min-height: 184px;
  padding: 14px;
  gap: 12px;
}
.dashboard-page .dashboard-top-edges-supporting-grid .dashboard-bet-card-avatar {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}
.dashboard-page .dashboard-top-edges-supporting-grid .dashboard-bet-card-copy h4 {
  font-size: 0.94rem;
}
.dashboard-page .dashboard-top-edges-supporting-grid .dashboard-bet-card-copy p {
  font-size: 0.8rem;
}
.dashboard-page .dashboard-top-edges-supporting-grid .dashboard-bet-card-grade {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  font-size: 0.72rem;
}
/* Supporting cards: keep tier glow but reduce overall presence so hero stays dominant */
.dashboard-page .dashboard-top-edges-supporting-grid .dashboard-bet-card.dashboard-bet-card-grade-S {
  box-shadow:
    inset 0 0 0 1px rgba(201, 162, 74, 0.08),
    0 10px 22px rgba(0, 0, 0, 0.22),
    0 0 14px rgba(201, 162, 74, 0.07);
}
.dashboard-page .dashboard-top-edges-supporting-grid .dashboard-bet-card.dashboard-bet-card-grade-A {
  box-shadow:
    0 9px 18px rgba(0, 0, 0, 0.20),
    0 0 10px rgba(31, 110, 67, 0.05);
}

/* ============================================================
   LEARN PAGE — TIERED EDUCATION (2026-04-23)
   Free / Pro / Elite section headers + locked module variant.
   Concepts only, no proprietary math reveal.
   ============================================================ */

.learn-tier-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
  max-width: 920px;
}
.learn-tier-header-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  border: 1px solid transparent;
  margin-top: 6px;
}
.learn-tier-header-tag-free {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.learn-tier-header-tag-pro {
  color: var(--gold-light);
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.20), rgba(201, 162, 74, 0.08));
  border-color: rgba(201, 162, 74, 0.45);
}
.learn-tier-header-tag-elite {
  color: var(--gold);
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.32), rgba(201, 162, 74, 0.14));
  border-color: rgba(201, 162, 74, 0.65);
  box-shadow: 0 0 14px rgba(201, 162, 74, 0.18);
}
.learn-tier-header h2 {
  font-family: var(--b2-font-hero);
  font-weight: 800;
  font-size: 1.55rem;
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--b2-ink);
  margin-bottom: 8px;
}
.learn-tier-header h2 em {
  font-style: italic;
  font-weight: 600;
  color: var(--b2-gold);
}

/* Locked module — overlay sits on top of card content */
.learn-module-locked {
  position: relative;
  overflow: hidden;
}
.learn-module-locked > .learn-module-tag,
.learn-module-locked > h3,
.learn-module-locked > p,
.learn-module-locked > ul {
  filter: blur(2.5px) saturate(0.7);
  opacity: 0.55;
  user-select: none;
  pointer-events: none;
}
.learn-module-locked-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  z-index: 2;
  padding: 20px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(11, 31, 58, 0.78), rgba(11, 31, 58, 0.92));
}
.learn-module-lock-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(201, 162, 74, 0.10);
  border: 1px solid rgba(201, 162, 74, 0.32);
  color: var(--gold-light);
}
.learn-module-lock-icon svg {
  width: 22px;
  height: 22px;
}
.learn-module-locked-tier {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--gold-light);
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(201, 162, 74, 0.10);
  border: 1px solid rgba(201, 162, 74, 0.40);
}
.learn-module-locked-tier-elite {
  color: var(--gold);
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.28), rgba(201, 162, 74, 0.10));
  border-color: rgba(201, 162, 74, 0.60);
}

/* Pro locked: gold-rim card hint */
.learn-module-locked {
  border-color: rgba(201, 162, 74, 0.18);
}
.learn-module-locked:hover {
  border-color: rgba(201, 162, 74, 0.32);
}
/* Elite locked: stronger gold rim + subtle ambient */
.learn-module-elite {
  border-color: rgba(201, 162, 74, 0.34);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(201, 162, 74, 0.06), transparent 70%),
    var(--navy-mid, #10264A);
  box-shadow: 0 0 24px rgba(201, 162, 74, 0.10);
}
.learn-module-elite:hover {
  border-color: rgba(201, 162, 74, 0.48);
  box-shadow: 0 0 32px rgba(201, 162, 74, 0.16);
}

@media (max-width: 720px) {
  .learn-tier-header { flex-direction: column; gap: 10px; }
  .learn-tier-header-tag { margin-top: 0; }
}

/* ============================================================
   MVP NEAR-FINAL POLISH (2026-04-23)
   - Premium glass top panel
   - Free-locked teaser overlay
   - Team-color avatar tint (very subtle, low-alpha only)
   - Typography refinement
   - Learn locked module: lighter blur
   ============================================================ */

/* --- Hero card: premium control-panel surround --- */
.dashboard-page .dashboard-hero-card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(ellipse 60% 70% at 88% 20%, rgba(201, 162, 74, 0.07), transparent 65%),
    radial-gradient(ellipse 50% 60% at 8% 90%, rgba(31, 110, 67, 0.05), transparent 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(13, 33, 60, 0.96), rgba(8, 22, 42, 0.98));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 0 1px rgba(255, 255, 255, 0.02),
    0 24px 60px rgba(0, 0, 0, 0.32);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* --- Hero panel layout polish --- */
.dashboard-page .dashboard-hero-panel {
  gap: 32px;
  align-items: center;
}
.dashboard-page .dashboard-hero-panel-divider {
  width: 1px;
  height: 100%;
  min-height: 80px;
  background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.10), transparent);
}
.dashboard-page .dashboard-hero-panel-left {
  gap: 24px;
}

/* --- Stats: premium typography for numbers --- */
.dashboard-page .dashboard-hero-stat .label-xs {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}
.dashboard-page .dashboard-hero-stat-value {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.dashboard-page .dashboard-hero-stat-primary .dashboard-hero-stat-value {
  font-size: 2.8rem;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.78) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
}
.dashboard-page .dashboard-hero-stat-value.tier-S {
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 70%, var(--gold-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 0 8px rgba(201, 162, 74, 0.16));
}
.dashboard-page .dashboard-hero-stat-value.tier-A {
  color: var(--tier-A);
  filter: drop-shadow(0 0 6px rgba(31, 110, 67, 0.20));
}

/* --- Breakdown: less stiff, glassy chips --- */
.dashboard-page .dashboard-hero-panel-right .label-xs {
  letter-spacing: 0.18em;
  font-size: 0.66rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 12px;
}
.dashboard-page .dashboard-hero-breakdown {
  gap: 8px;
}
.dashboard-page .dashboard-hero-breakdown-row {
  position: relative;
  padding: 12px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  transition: border-color 200ms ease, background 200ms ease;
}
.dashboard-page .dashboard-hero-breakdown-row:hover {
  border-color: rgba(255, 255, 255, 0.10);
}
.dashboard-page .dashboard-hero-breakdown-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  font-weight: 700;
}
.dashboard-page .dashboard-hero-breakdown-count {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.dashboard-page .dashboard-hero-breakdown-row.tier-S {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(201, 162, 74, 0.12), transparent 80%),
    linear-gradient(180deg, rgba(201, 162, 74, 0.06), rgba(201, 162, 74, 0.02));
  border-color: rgba(201, 162, 74, 0.34);
}
.dashboard-page .dashboard-hero-breakdown-row.tier-A {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(31, 110, 67, 0.10), transparent 80%),
    linear-gradient(180deg, rgba(31, 110, 67, 0.05), rgba(31, 110, 67, 0.02));
  border-color: rgba(31, 110, 67, 0.30);
}

/* --- Live Board / date / count badges in hero header: a touch more premium --- */
.dashboard-page .dashboard-header .badge {
  letter-spacing: 0.10em;
  font-size: 0.7rem;
  font-weight: 700;
}

/* --- Free-locked teaser card: visible structure, blocked content ---
   Legacy rule targeted .dashboard-bet-card-button which no longer
   exists under the v1.1 b2 markup. Updated selectors to blur the
   actual inner elements of .b2-pick, .b2-featured, and .b2-row,
   with a HARDER blur so locked content is truly unreadable (old
   2px let you read the numbers right through it). */
.dashboard-page .dashboard-bet-card-free-locked {
  position: relative;
  cursor: default;
}
.dashboard-page .b2-pick.dashboard-bet-card-free-locked > button,
.dashboard-page .b2-pick.dashboard-bet-card-free-locked > :not(.dashboard-bet-card-free-lock):not(.dashboard-bet-card-pp-badge),
.dashboard-page .b2-featured.dashboard-bet-card-free-locked > :not(.dashboard-bet-card-free-lock),
.dashboard-page .b2-row.dashboard-bet-card-free-locked > :not(.dashboard-bet-card-free-lock) {
  filter: blur(9px) saturate(0.35) brightness(0.85);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.dashboard-page .dashboard-bet-card-free-locked .dashboard-bet-card-pp-badge {
  display: none;
}
.dashboard-page .dashboard-bet-card-free-lock {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  /* Extra backdrop-blur on the overlay itself so even if the child
     filter somehow fails, this layer still obscures the content. */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(11, 31, 58, 0.82), rgba(8, 22, 42, 0.94));
}
.dashboard-page .dashboard-bet-card-free-lock-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(201, 162, 74, 0.10);
  border: 1px solid rgba(201, 162, 74, 0.32);
  color: var(--gold-light);
}
.dashboard-page .dashboard-bet-card-free-lock-icon svg {
  width: 18px;
  height: 18px;
}
.dashboard-page .dashboard-bet-card-free-lock-tier {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--gold-light);
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(201, 162, 74, 0.10);
  border: 1px solid rgba(201, 162, 74, 0.34);
}
.dashboard-page .dashboard-bet-card-free-lock .btn {
  pointer-events: auto;
}

/* --- Team-color avatar (subtle low-alpha tint, fallback handled by `transparent`) --- */
.dashboard-page .dashboard-bet-card-avatar {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--team-color, transparent) 16%, rgba(255, 255, 255, 0.06)),
    color-mix(in srgb, var(--team-color, transparent) 8%,  rgba(255, 255, 255, 0.02))
  );
  border: 1px solid color-mix(in srgb, var(--team-color, transparent) 26%, rgba(255, 255, 255, 0.06));
  letter-spacing: 0.04em;
}
.dashboard-page .dashboard-bet-card-surface-muted .dashboard-bet-card-avatar {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--team-color, transparent) 8%, rgba(255, 255, 255, 0.04)),
    color-mix(in srgb, var(--team-color, transparent) 4%, rgba(255, 255, 255, 0.02))
  );
  border-color: color-mix(in srgb, var(--team-color, transparent) 14%, rgba(255, 255, 255, 0.05));
}

/* --- Typography refinement: small text feels intentional, not default --- */
.dashboard-page .label-xs,
.dashboard-page .section-label,
.dashboard-page .dashboard-bet-card-market,
.dashboard-page .dashboard-bet-card-meta span,
.dashboard-page .dashboard-bet-card-price span,
.dashboard-page .dashboard-bet-card-hint span {
  font-feature-settings: "ss01", "cv11";
}
.dashboard-page .dashboard-bet-card-copy h4 {
  letter-spacing: -0.005em;
  font-feature-settings: "ss01";
}
.dashboard-page .dashboard-bet-card-copy p {
  font-size: 0.83rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.66);
}
.dashboard-page .dashboard-bet-card-meta span {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.dashboard-page .dashboard-bet-card-meta span:last-child {
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.74);
}
.dashboard-page .dashboard-bet-card-price span,
.dashboard-page .dashboard-bet-card-hint span {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  font-weight: 600;
}
.dashboard-page .dashboard-bet-card-price strong {
  font-size: 0.94rem;
  font-feature-settings: "tnum", "ss01";
  letter-spacing: -0.005em;
}
.dashboard-page .section-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  font-weight: 700;
}

/* Learn page small-text refinement (matches dashboard treatment) */
.learn-module-tag {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  text-transform: uppercase;
  font-feature-settings: "ss01";
}
.learn-module-card h3 {
  letter-spacing: -0.005em;
}
.learn-module-card p {
  font-size: 0.92rem;
  line-height: 1.55;
}
.learn-points li {
  font-size: 0.88rem;
  line-height: 1.55;
}
.learn-why {
  font-size: 0.82rem;
  letter-spacing: 0.005em;
}

/* --- Learn locked modules: lighter blur, more readable as a teaser --- */
.learn-module-locked > .learn-module-tag,
.learn-module-locked > h3,
.learn-module-locked > p,
.learn-module-locked > ul {
  filter: blur(1.4px) saturate(0.78);
  opacity: 0.62;
}
.learn-module-locked-overlay {
  background:
    radial-gradient(ellipse 75% 55% at 50% 50%, rgba(11, 31, 58, 0.62), rgba(11, 31, 58, 0.84));
}

/* Hide divider on collapsed mobile already handled in earlier @media; nothing new there */

/* ============================================================
   DASHBOARD FINAL STRUCTURE PASS (2026-04-23)
   - Brand-first hero header (left)
   - Right-side control panel with legend
   - Stronger team-color avatar fills (muted, white initials)
   - Market View collapsible bet-type + prop-stat subgroups
   ============================================================ */

/* --- Hero v2: 2-column brand + control panel --- */
.dashboard-page .dashboard-hero-card-v2 {
  padding: 36px 40px;
}
.dashboard-page .dashboard-hero-v2-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 40px;
  align-items: start;
}

/* --- Brand block (LEFT) --- */
.dashboard-page .dashboard-hero-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 16px;
}
.dashboard-page .dashboard-brand-title {
  font-family: 'Inter', sans-serif;
  font-size: 3.6rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 0.95;
  margin: 0;
  color: var(--white);
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.72) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
}
.dashboard-page .dashboard-brand-tagline {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin-top: -2px;
}
.dashboard-page .dashboard-brand-support {
  margin: 2px 0 14px;
  color: rgba(255, 255, 255, 0.64);
  font-size: 0.98rem;
  line-height: 1.4;
  max-width: 420px;
}
.dashboard-page .dashboard-brand-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.dashboard-page .dashboard-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dashboard-page .dashboard-live-badge .live-dot {
  width: 7px;
  height: 7px;
}
.dashboard-page .dashboard-brand-update {
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.78rem;
  margin-top: 6px;
  letter-spacing: 0.02em;
}

/* --- Control panel (RIGHT) --- */
.dashboard-page .dashboard-control-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)),
    linear-gradient(180deg, rgba(9, 24, 46, 0.92), rgba(6, 17, 34, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 36px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.dashboard-page .dashboard-control-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
}
.dashboard-page .dashboard-control-section-label {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 10px;
}
.dashboard-page .dashboard-control-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 14px;
  align-items: end;
}
.dashboard-page .dashboard-control-stat-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.48);
  margin-bottom: 6px;
}
.dashboard-page .dashboard-control-stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.dashboard-page .dashboard-control-stat-primary .dashboard-control-stat-value {
  font-size: 2.2rem;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.78) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dashboard-page .dashboard-control-stat-value.tier-S {
  background: linear-gradient(180deg, var(--gold-light), var(--gold) 70%, var(--gold-dark));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.dashboard-page .dashboard-control-stat-value.tier-A { color: var(--tier-A); }

/* --- Grade breakdown chips --- */
.dashboard-page .dashboard-control-breakdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.dashboard-page .dashboard-control-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  background: rgba(255, 255, 255, 0.02);
}
.dashboard-page .dashboard-control-chip-label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.6);
}
.dashboard-page .dashboard-control-chip-count {
  font-size: 1.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--white);
}
.dashboard-page .dashboard-control-chip.tier-S {
  border-color: rgba(201, 162, 74, 0.30);
  background: rgba(201, 162, 74, 0.06);
}
.dashboard-page .dashboard-control-chip.tier-S .dashboard-control-chip-label,
.dashboard-page .dashboard-control-chip.tier-S .dashboard-control-chip-count { color: var(--tier-S); }
.dashboard-page .dashboard-control-chip.tier-A {
  border-color: rgba(31, 110, 67, 0.28);
  background: rgba(31, 110, 67, 0.05);
}
.dashboard-page .dashboard-control-chip.tier-A .dashboard-control-chip-label,
.dashboard-page .dashboard-control-chip.tier-A .dashboard-control-chip-count { color: var(--tier-A); }
.dashboard-page .dashboard-control-chip.tier-B .dashboard-control-chip-label,
.dashboard-page .dashboard-control-chip.tier-B .dashboard-control-chip-count { color: var(--tier-B); }
.dashboard-page .dashboard-control-chip.tier-C .dashboard-control-chip-label,
.dashboard-page .dashboard-control-chip.tier-C .dashboard-control-chip-count { color: var(--tier-C); }

/* --- Legend rows --- */
.dashboard-page .dashboard-control-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dashboard-page .dashboard-control-legend li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.68);
  line-height: 1.3;
}
.dashboard-page .dashboard-control-legend-mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 800;
  border: 1px solid transparent;
}
.dashboard-page .dashboard-control-legend-mark.tier-S { color: var(--tier-S); background: rgba(201, 162, 74, 0.12); border-color: rgba(201, 162, 74, 0.38); }
.dashboard-page .dashboard-control-legend-mark.tier-A { color: var(--tier-A); background: rgba(31, 110, 67, 0.12); border-color: rgba(31, 110, 67, 0.38); }
.dashboard-page .dashboard-control-legend-mark.tier-B { color: var(--tier-B); background: rgba(76, 138, 110, 0.10); border-color: rgba(76, 138, 110, 0.30); }
.dashboard-page .dashboard-control-legend-mark.tier-C { color: var(--tier-C); background: rgba(138, 122, 74, 0.10); border-color: rgba(138, 122, 74, 0.30); }
.dashboard-page .dashboard-control-legend-mark.tier-D { color: var(--tier-D); background: rgba(107, 118, 136, 0.10); border-color: rgba(107, 118, 136, 0.28); }

@media (max-width: 1080px) {
  .dashboard-page .dashboard-hero-v2-grid { grid-template-columns: 1fr; gap: 28px; }
  .dashboard-page .dashboard-hero-brand { padding-right: 0; }
  .dashboard-page .dashboard-brand-title { font-size: 2.8rem; }
}
@media (max-width: 600px) {
  .dashboard-page .dashboard-hero-card-v2 { padding: 24px; }
  .dashboard-page .dashboard-control-breakdown { grid-template-columns: repeat(4, 1fr); }
  .dashboard-page .dashboard-control-row { grid-template-columns: 1fr 1fr; }
  .dashboard-page .dashboard-control-stat-primary { grid-column: span 2; }
}

/* --- Stronger team-color avatar fills (muted; readable white initials) --- */
.dashboard-page .dashboard-bet-card-avatar {
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.22)),
    linear-gradient(180deg,
      color-mix(in srgb, var(--team-color, #2A3548) 58%, #0A1628),
      color-mix(in srgb, var(--team-color, #1F2B40) 42%, #060F1F)
    );
  border: 1px solid color-mix(in srgb, var(--team-color, transparent) 30%, rgba(255, 255, 255, 0.06));
}
.dashboard-page .dashboard-bet-card-surface-muted .dashboard-bet-card-avatar {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.24)),
    linear-gradient(180deg,
      color-mix(in srgb, var(--team-color, #2A3548) 32%, #0A1628),
      color-mix(in srgb, var(--team-color, #1F2B40) 22%, #060F1F)
    );
  border-color: color-mix(in srgb, var(--team-color, transparent) 18%, rgba(255, 255, 255, 0.05));
  color: rgba(255, 255, 255, 0.85);
}

/* --- Market View collapsible sections --- */
.dashboard-page .dashboard-market-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    rgba(11, 31, 58, 0.62);
  color: var(--white);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 180ms ease, background 180ms ease;
}
.dashboard-page .dashboard-market-section-toggle:hover {
  border-color: rgba(255, 255, 255, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0)),
    rgba(11, 31, 58, 0.76);
}
.dashboard-page .dashboard-market-section-title {
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.92);
}
.dashboard-page .dashboard-market-section-count {
  margin-left: auto;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.dashboard-page .dashboard-market-section-chevron {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.72rem;
  width: 14px;
  text-align: center;
}
.dashboard-page .dashboard-market-section-body {
  margin-top: 14px;
}
.dashboard-page .dashboard-market-section.is-collapsed .dashboard-market-section-toggle {
  background: rgba(11, 31, 58, 0.48);
}

/* Prop-stat subgroup toggles (nested, more subtle) */
.dashboard-page .dashboard-market-propstat {
  margin-bottom: 10px;
}
.dashboard-page .dashboard-market-propstat:last-child {
  margin-bottom: 0;
}
.dashboard-page .dashboard-market-subtoggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.015);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}
.dashboard-page .dashboard-market-subtoggle:hover {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: var(--white);
}
.dashboard-page .dashboard-market-subtoggle-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dashboard-page .dashboard-market-subtoggle-count {
  margin-left: auto;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.52);
  font-variant-numeric: tabular-nums;
}
.dashboard-page .dashboard-market-subtoggle-chevron {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.7rem;
  width: 12px;
  text-align: center;
}
.dashboard-page .dashboard-market-propstat-body {
  margin-top: 10px;
  padding-left: 4px;
}
.dashboard-page .dashboard-market-empty {
  padding: 12px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.85rem;
}

/* ============================================================
   DASHBOARD MASTHEAD + CARD POLISH (2026-04-23)
   - Drop the giant boxed hero — replace with a bare masthead
   - Keep the right-side control panel as its own framed aside
   - Reliable team-color avatar fill (no color-mix dependency)
   - Edge % on card footer (bottom-right)
   ============================================================ */

/* --- Masthead (left, no card chrome) --- */
.dashboard-page .dashboard-section-hero-v3 { padding-bottom: 20px; }
/* Mobile: fixed nav is a bit shorter; give the masthead its own top buffer
   so the title (with drop-shadow) is never clipped under the nav. */
@media (max-width: 720px) {
  .dashboard-page .dashboard-masthead { margin-top: 8px; }
}
.dashboard-page .dashboard-hero-v3-grid {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 360px);
  gap: 32px;
  align-items: start;
}
.dashboard-page .dashboard-masthead {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.dashboard-page .dashboard-masthead-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(3.4rem, 6vw, 5.2rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0.01em;
  margin: 0;
  color: #FFFFFF;
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0.74) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.4));
}
.dashboard-page .dashboard-masthead-tagline {
  font-size: clamp(1.25rem, 1.9vw, 1.6rem);
  font-weight: 700;
  color: var(--gold);
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin-top: 4px;
}
.dashboard-page .dashboard-masthead-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}
.dashboard-page .dashboard-masthead-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(31, 110, 67, 0.40);
  background: rgba(31, 110, 67, 0.12);
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.dashboard-page .dashboard-masthead-live .live-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--green, #1F6E43);
  box-shadow: 0 0 0 3px rgba(31, 110, 67, 0.25);
}
.dashboard-page .dashboard-masthead-dot {
  color: rgba(255, 255, 255, 0.22);
}

/* --- Right-side control panel sits naturally (keeps its own chrome) --- */
@media (min-width: 1180px) {
  .dashboard-page .dashboard-control-panel {
    position: sticky;
    top: 88px;
  }
}
@media (max-width: 1080px) {
  .dashboard-page .dashboard-hero-v3-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* --- Bet card avatar: reliable team-color fill with dark overlay --- */
/* Overrides all earlier avatar rules for a consistent, broadly-compatible fill. */
.dashboard-page .dashboard-bet-card-avatar {
  background-color: var(--team-color, #2A3548);
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.44) 100%);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.10);
  letter-spacing: 0.04em;
}
.dashboard-page .dashboard-bet-card-surface-muted .dashboard-bet-card-avatar {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.60) 100%);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.06);
}

/* --- Card footer: edge % prominent on right, meta smaller below --- */
.dashboard-page .dashboard-bet-card-hint {
  gap: 2px;
  align-items: flex-end;
  text-align: right;
}
.dashboard-page .dashboard-bet-card-edge-pct {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  display: inline-block;
}
.dashboard-page .dashboard-bet-card-edge-pct.stat-edge { color: var(--green); }
.dashboard-page .dashboard-bet-card-edge-pct.stat-edge-weak { color: rgba(255, 255, 255, 0.82); }
.dashboard-page .dashboard-bet-card-edge-pct.stat-edge-marginal { color: rgba(255, 255, 255, 0.55); }
/* Grade-driven accents: S-tier edge-% picks up gold, D gets muted red for negative */
.dashboard-page .dashboard-bet-card-grade-S .dashboard-bet-card-edge-pct { color: var(--tier-S); }
.dashboard-page .dashboard-bet-card-grade-A .dashboard-bet-card-edge-pct { color: var(--tier-A); }
.dashboard-page .dashboard-bet-card-negative .dashboard-bet-card-edge-pct { color: var(--red, #B83A3A); }
.dashboard-page .dashboard-bet-card-hint-meta {
  font-size: 0.66rem;
  letter-spacing: 0.10em;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
}

/* Top Edges hero already has its own big edge well — keep its treatment;
   only tighten the supporting cards' edge % size a notch */
.dashboard-page .dashboard-top-edges-supporting-grid .dashboard-bet-card-edge-pct {
  font-size: 1rem;
}

/* =========================================================================
   BETHICS v1.1 — Dashboard redesign (additive)
   -------------------------------------------------------------------------
   Added 2026-04-23. Pure additive — nothing above this banner has been
   modified. All new classes are `.b2-*` prefixed so they cannot collide
   with existing dashboard styles. Safe to remove this entire block and
   the extra font families in the top @import to revert.

   Reference mockups:
     site/mockups/dashboard-evolution-v3.html   (Top Edges)
     site/mockups/dashboard-sports-view.html    (Sports View)
     site/mockups/dashboard-market-view.html    (Market View)

   Tier thresholds: Docs/Prompts/prompt-model-v1.md § Edge Tiers (v1.1)
   ========================================================================= */

:root {
  /* Navy depth scale (darker than legacy --navy-* for the redesign). */
  --b2-navy-base:    #06111F;
  --b2-navy-deep:    #08172A;
  --b2-navy-card:    #0E2140;
  --b2-navy-card-hi: #122D52;

  /* Ink — warmer text color than pure white, reads editorial on dark. */
  --b2-ink:       #F0ECE2;
  --b2-ink-soft:  rgba(240, 236, 226, 0.74);
  --b2-ink-mute:  rgba(240, 236, 226, 0.46);
  --b2-ink-dim:   rgba(240, 236, 226, 0.22);

  /* Hairlines — thin dividers. */
  --b2-hairline:      rgba(240, 236, 226, 0.07);
  --b2-hairline-gold: rgba(201, 162, 74, 0.16);

  /* Gold — kept as separate tokens so legacy --gold can evolve independently. */
  --b2-gold:       #C9A24A;
  --b2-gold-light: #E8C46A;
  --b2-gold-faint: rgba(201, 162, 74, 0.22);

  /* Tier color system — per binder v1.1. */
  --b2-tier-s:      #E8C46A;
  --b2-tier-s-soft: rgba(232, 196, 106, 0.14);
  --b2-tier-s-edge: rgba(232, 196, 106, 0.48);

  --b2-tier-a:      #34C57A;
  --b2-tier-a-soft: rgba(52, 197, 122, 0.14);
  --b2-tier-a-edge: rgba(52, 197, 122, 0.42);

  --b2-tier-b:      #7EAC94;
  --b2-tier-b-soft: rgba(126, 172, 148, 0.14);
  --b2-tier-b-edge: rgba(126, 172, 148, 0.38);

  --b2-tier-c:      #8B95A5;
  --b2-tier-c-soft: rgba(139, 149, 165, 0.14);
  --b2-tier-c-edge: rgba(139, 149, 165, 0.36);

  --b2-tier-d:      #E89B3A;
  --b2-tier-d-soft: rgba(232, 155, 58, 0.14);
  --b2-tier-d-edge: rgba(232, 155, 58, 0.45);

  --b2-tier-f:      #C64B47;
  --b2-tier-f-soft: rgba(198, 75, 71, 0.14);
  --b2-tier-f-edge: rgba(198, 75, 71, 0.45);

  /* Semantic accents. */
  --b2-green-on: #2FA168;
  /* --b2-green-soft: muted/lighter green token defined 2026-04-24 for the
     B-tier band of the parlay edge stat per prompt-parlay-calculator-v1.md
     § Edge-color coordination. Sits between the saturated --b2-green-on
     (A tier) and the neutral --b2-ink-soft (C tier) so the gradient reads
     S → A → B → C → F at a glance. */
  --b2-green-soft: #6BAA8A;

  /* Typography. */
  --b2-font-ui:   'Inter', system-ui, sans-serif;
  --b2-font-hero: 'Playfair Display', serif;
  --b2-font-num:  'Oxanium', 'Inter', system-ui, sans-serif;
  --b2-font-mono: 'JetBrains Mono', 'SF Mono', monospace;
}

/* ---------- page background --------------------------------------------- */
.b2-page {
  background:
    radial-gradient(1200px 700px at 50% -200px, rgba(201,162,74,0.06), transparent 60%),
    radial-gradient(900px 600px at 15% 10%, rgba(26,56,99,0.45), transparent 60%),
    linear-gradient(180deg, var(--b2-navy-base) 0%, var(--b2-navy-deep) 100%);
  color: var(--b2-ink);
  font-feature-settings: 'tnum' 1, 'ss01' 1, 'cv11' 1;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ---------- utilities --------------------------------------------------- */
.b2-num {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
  font-weight: 600;
}
.b2-mono { font-family: var(--b2-font-mono); letter-spacing: 1.5px; }
.b2-italic { font-family: var(--b2-font-hero); font-style: italic; font-weight: 500; }
.b2-sep-dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--b2-ink-dim); }
.b2-book { color: var(--b2-gold); font-weight: 600; letter-spacing: 0.3px; }
.b2-green { color: var(--b2-green-on); }
.b2-red { color: var(--b2-tier-f); }

/* ---------- S-tier gold shimmer ---------------------------------------- */
/* Apply `.b2-shimmer-gold` to any element holding an S-tier edge number.
   Polished metallic gradient — deep amber shadow → champagne gold mid
   → PURE WHITE specular peak. The white highlight is what reads as
   "shiny/premium/bright" instead of the flat yellow we had before. A
   secondary warm halo (drop-shadow) gives the number a luminous glow
   like it's catching light. A tight specular stripe moves across a
   wider background canvas so the highlight feels like a reflection
   traveling over polished metal, not a color wash. */
@keyframes b2-goldShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}
@keyframes b2-goldPulse {
  0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 225, 150, 0.38))
                     drop-shadow(0 0 22px rgba(232, 196, 106, 0.22))
                     drop-shadow(0 2px 3px rgba(60, 40, 8, 0.5)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255, 235, 180, 0.55))
                     drop-shadow(0 0 30px rgba(232, 196, 106, 0.32))
                     drop-shadow(0 2px 3px rgba(60, 40, 8, 0.5)); }
}
.b2-shimmer-gold {
  /* !important is used deliberately: .b2-featured-hero .b2-pick-edge
     has higher specificity than .b2-shimmer-gold and sets a solid
     color, which was suppressing the gradient. The shimmer is the
     whole point of applying this class — the solid fallback color
     must not win. */
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  background-image: linear-gradient(
    100deg,
    #6E4A0E 0%,
    #8E6518 8%,
    #B88628 18%,
    #DAA84A 28%,
    #F1CE73 38%,
    #FBE7A8 45%,
    #FFF6D6 48%,
    #FFFFFF 50%,   /* pure white specular peak — this is the "shine" */
    #FFF6D6 52%,
    #FBE7A8 55%,
    #F1CE73 62%,
    #DAA84A 72%,
    #B88628 82%,
    #8E6518 92%,
    #6E4A0E 100%
  ) !important;
  background-size: 260% 100% !important;
  background-repeat: no-repeat !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation:
    b2-goldShimmer 4.5s linear infinite,
    b2-goldPulse   3s   ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .b2-shimmer-gold {
    animation: none;
    background-position: 50% 50%;
    filter: drop-shadow(0 0 12px rgba(255, 225, 150, 0.42));
  }
}

/* ---------- sticky nav -------------------------------------------------- */
.b2-nav {
  position: sticky; top: 0; z-index: 10;
  padding: 18px 40px;
  background: rgba(6, 17, 31, 0.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--b2-hairline);
}
.b2-nav-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 32px; }

.b2-wordmark {
  font-family: var(--b2-font-hero);
  font-weight: 900; font-size: 1.5rem;
  letter-spacing: 0.08em;
  color: var(--b2-ink); text-decoration: none;
  padding-right: 28px; border-right: 1px solid var(--b2-hairline);
}
.b2-wordmark-accent { color: var(--b2-gold); }

.b2-nav-links { display: flex; gap: 28px; font-size: 0.78rem; letter-spacing: 1.8px; text-transform: uppercase; font-weight: 600; }
.b2-nav-links a { color: var(--b2-ink-mute); text-decoration: none; padding: 6px 0; border-bottom: 1px solid transparent; transition: color 0.15s, border-color 0.15s; }
.b2-nav-links a:hover { color: var(--b2-ink-soft); }
.b2-nav-links a.b2-active { color: var(--b2-gold); border-bottom-color: var(--b2-gold); }

.b2-nav-right { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.b2-nav-badge { font-size: 0.68rem; letter-spacing: 2px; text-transform: uppercase; color: var(--b2-gold); padding: 5px 10px; border: 1px solid var(--b2-gold-faint); border-radius: 100px; font-weight: 600; }
.b2-nav-btn { padding: 8px 16px; font-size: 0.76rem; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700; color: var(--b2-navy-base); background: var(--b2-gold); border-radius: 100px; text-decoration: none; transition: background 0.15s; }
.b2-nav-btn:hover { background: var(--b2-gold-light); }

/* ---------- view-tabs (Top Edges / Sports View / Market View) ---------- */
.b2-view-tabs { max-width: 1240px; margin: 24px auto 0; padding: 0 40px; display: flex; gap: 4px; border-bottom: 1px solid var(--b2-hairline); }
.b2-view-tab { padding: 12px 20px; font-size: 0.74rem; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; color: var(--b2-ink-mute); border-bottom: 2px solid transparent; text-decoration: none; margin-bottom: -1px; background: transparent; border-left: none; border-right: none; border-top: none; cursor: pointer; }
.b2-view-tab:hover { color: var(--b2-ink-soft); }
.b2-view-tab.b2-active { color: var(--b2-gold); border-bottom-color: var(--b2-gold); }
.b2-view-tab-count {
  display: inline-block;
  font-family: var(--b2-font-num);
  font-size: 0.72rem;
  padding: 2px 7px;
  background: rgba(240, 236, 226, 0.06);
  border-radius: 100px;
  margin-left: 6px;
  color: var(--b2-ink-mute);
  letter-spacing: 0; font-weight: 500;
}
.b2-view-tab.b2-active .b2-view-tab-count { background: var(--b2-gold-faint); color: var(--b2-gold); }

/* ---------- hero -------------------------------------------------------- */
.b2-hero { max-width: 1240px; margin: 0 auto; padding: 56px 40px 32px; position: relative; }
.b2-hero::before { content: ''; position: absolute; top: 68px; left: 40px; width: 56px; height: 1px; background: var(--b2-gold); }
.b2-hero-kicker {
  margin-left: 72px;
  font-size: 0.72rem; letter-spacing: 4px;
  text-transform: uppercase; color: var(--b2-gold);
  font-weight: 700; margin-bottom: 20px;
}
.b2-hero-headline {
  font-family: var(--b2-font-hero);
  font-weight: 900;
  font-size: clamp(3.2rem, 7.5vw, 5.6rem);
  line-height: 0.95; letter-spacing: -0.028em;
  color: var(--b2-ink); margin: 0 0 10px;
}
.b2-hero-headline em { font-style: italic; font-weight: 600; color: var(--b2-gold); }
.b2-hero-sub {
  font-family: var(--b2-font-hero);
  font-style: italic; font-weight: 500;
  font-size: 1.1rem; color: var(--b2-ink-soft);
  margin: 0 0 22px;
}
.b2-hero-meta {
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  font-size: 0.78rem; letter-spacing: 1px; color: var(--b2-ink-mute);
  /* Lock the meta row to a single line so the hero's total height is
     identical on every tab — otherwise the board section below jumps
     down whenever the text gets long enough to wrap. */
  min-height: 28px;
}
.b2-hero-meta .b2-num { font-weight: 600; color: var(--b2-ink); letter-spacing: 0; }
.b2-hero-meta .b2-sep { color: var(--b2-ink-dim); }

.b2-live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--b2-green-on);
  box-shadow: 0 0 12px rgba(47, 161, 104, 0.55), 0 0 0 3px rgba(47, 161, 104, 0.15);
  vertical-align: middle; margin-right: 8px;
  animation: b2-livePulse 2.4s ease-in-out infinite;
}
@keyframes b2-livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ---------- stats strip ------------------------------------------------- */
/* v1.1: condensed 8-cell strip. First 4 cells are the tier decomposition
   (Total + S/A/B). Last 4 are the bet-type decomposition
   (Moneyline/Spread/Totals/Props). Same total, two orthogonal breakouts.
   Padding and font-size were both pulled in so 8 cells fit in the
   1240px max-width without feeling crowded. */
.b2-stats { max-width: 1240px; margin: 20px auto 36px; padding: 0 40px; }
.b2-stats-inner {
  display: grid; grid-template-columns: repeat(8, 1fr);
  border: 1px solid var(--b2-hairline);
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(18, 45, 82, 0.55) 0%, rgba(14, 33, 64, 0.32) 100%);
  overflow: hidden;
}
.b2-stat { padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 5px; border-right: 1px solid var(--b2-hairline); min-width: 0; }
.b2-stat:last-child { border-right: none; }
.b2-stat-label {
  font-family: var(--b2-font-mono);
  font-size: 0.56rem; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b2-ink-dim);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.b2-stat-value {
  font-family: var(--b2-font-num);
  font-weight: 600;
  font-size: 1.55rem; line-height: 1;
  letter-spacing: -0.02em;
  color: var(--b2-ink);
  font-variant-numeric: tabular-nums;
}
.b2-stat-value.b2-t-s { color: var(--b2-tier-s); }
.b2-stat-value.b2-t-a { color: var(--b2-tier-a); }
.b2-stat-value.b2-t-b { color: var(--b2-tier-b); }
.b2-stat-sub { font-size: 0.62rem; color: var(--b2-ink-mute); letter-spacing: 0.3px; line-height: 1.2; }
.b2-stat-sub .b2-up { color: var(--b2-green-on); }
@media (max-width: 1100px) {
  .b2-stats-inner { grid-template-columns: repeat(4, 1fr); }
  .b2-stat { border-bottom: 1px solid var(--b2-hairline); }
  .b2-stat:nth-child(4n) { border-right: none; }
  .b2-stat:nth-last-child(-n+4) { border-bottom: none; }
}
@media (max-width: 620px) {
  .b2-stats-inner { grid-template-columns: repeat(2, 1fr); }
  .b2-stat { border-bottom: 1px solid var(--b2-hairline); border-right: 1px solid var(--b2-hairline); }
  .b2-stat:nth-child(2n) { border-right: none; }
  .b2-stat:nth-last-child(-n+2) { border-bottom: none; }
}

/* ---------- board header ------------------------------------------------ */
/* Forensic fix 2026-04-23: diagnostic screenshots showed .b2-board
   rendering at 840px on Sports View vs 1180px on Top Edges. The
   container is the same HTML element on every tab and shares the
   same CSS, so the shrinking had to be intrinsic-sizing of a child
   bleeding up through the flex column parent. Adding width: 100%
   + display: block explicitly forces the section to always span the
   full .dashboard-main flex row, independent of what's inside. */
.b2-board {
  display: block;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px 80px;
  box-sizing: border-box;
}
/* min-height locks the board header height so switching between
   view titles of different lengths (or meta text that wraps
   differently) doesn't cause the gold hairline to bounce up and
   down. Any baseline shift inside is absorbed by the reserved
   space, not pushed into the shell below. */
.b2-board-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 18px; margin-bottom: 24px;
  min-height: 62px;
  border-bottom: 1px solid var(--b2-hairline);
  position: relative;
}
.b2-board-head::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 72px; height: 1px; background: var(--b2-gold); }
.b2-board-head h2 {
  font-family: var(--b2-font-hero);
  font-weight: 800; font-size: 1.9rem;
  margin: 0; letter-spacing: -0.015em;
  color: var(--b2-ink);
}
.b2-board-meta { display: flex; gap: 18px; font-size: 0.72rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--b2-ink-mute); font-weight: 500; }
.b2-board-meta .b2-num { color: var(--b2-ink-soft); letter-spacing: 0; font-weight: 500; }

/* ---------- view-switch stabilization --------------------------------- */
/* Horizontal jump between tabs is fully handled by scrollbar-gutter:
   stable on html (see top of file). Title + gold hairline stability
   is handled by .b2-board-head { min-height: 62px }. We deliberately
   do NOT reserve space for the sport-tabs row, the market-filters
   row, or a container min-height — doing so stacked ~570px of empty
   space above content on Top Edges and Tracked. The board outline
   shifting vertically as content changes is acceptable; what matters
   is that the title above the shell doesn't bounce. */

/* ---------- featured pick (Today's Model Highlight) ------------------- */
.b2-featured {
  position: relative;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #1C3558 0%, #0F2446 50%, #081630 100%);
  border: 1px solid var(--b2-tier-s-edge);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(201, 162, 74, 0.1),
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 12px 40px rgba(201, 162, 74, 0.1),
    0 1px 0 rgba(255, 220, 140, 0.1) inset;
  transition: transform 0.25s cubic-bezier(.2,.6,.2,1), box-shadow 0.3s;
}
.b2-featured:hover {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px rgba(201, 162, 74, 0.2),
    0 28px 70px rgba(0, 0, 0, 0.6),
    0 16px 50px rgba(201, 162, 74, 0.18),
    0 1px 0 rgba(255, 220, 140, 0.14) inset;
}
.b2-featured::before {
  content: ''; position: absolute; left: 0; top: 28px; bottom: 28px; width: 3px;
  background: linear-gradient(180deg, transparent 0%, var(--b2-tier-s) 20%, var(--b2-gold-light) 50%, var(--b2-tier-s) 80%, transparent 100%);
  box-shadow: 0 0 18px rgba(201, 162, 74, 0.5);
}
.b2-featured-ribbon {
  position: absolute; top: 0; left: 36px;
  font-size: 0.64rem; letter-spacing: 2.8px; text-transform: uppercase;
  font-weight: 700; color: var(--b2-navy-base);
  background: var(--b2-gold);
  padding: 5px 14px 6px;
  border-radius: 0 0 6px 6px;
}
.b2-featured-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; padding: 40px 40px 32px; }
.b2-featured-left { padding-right: 36px; border-right: 1px solid var(--b2-hairline-gold); }
.b2-featured-right { padding-left: 40px; display: flex; flex-direction: column; justify-content: center; gap: 20px; }

.b2-featured-left .b2-pick-head { margin-bottom: 20px; }
.b2-featured-left .b2-pick-player {
  font-family: var(--b2-font-ui);
  font-weight: 700;
  font-size: 2rem; line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--b2-ink); margin: 0 0 6px;
}
.b2-featured-left .b2-pick-select { font-size: 1.1rem; color: var(--b2-ink-soft); margin-bottom: 20px; }
.b2-featured-left .b2-pick-select .b2-accent {
  color: var(--b2-ink); font-weight: 600;
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.b2-featured-reason {
  font-family: var(--b2-font-hero);
  font-style: italic; font-weight: 500;
  font-size: 0.98rem; line-height: 1.55;
  color: var(--b2-ink-soft);
  margin-bottom: 22px; max-width: 460px;
}
.b2-featured-reason .b2-num {
  font-family: var(--b2-font-num);
  font-weight: 600; font-style: normal;
  color: var(--b2-ink); letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

.b2-featured-foot {
  font-size: 0.78rem; color: var(--b2-ink-mute);
  letter-spacing: 0.4px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.b2-featured-foot .b2-num { font-family: var(--b2-font-num); font-variant-numeric: tabular-nums; color: var(--b2-ink-soft); letter-spacing: 0; font-weight: 500; }

.b2-featured-hero { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.b2-featured-hero .b2-pick-edge {
  font-family: var(--b2-font-num);
  font-weight: 700;
  font-size: clamp(4rem, 7vw, 5.6rem);
  line-height: 0.92; letter-spacing: -0.045em;
  color: var(--b2-tier-s);
  font-variant-numeric: tabular-nums;
}
.b2-featured-hero .b2-pick-edge-unit {
  font-family: var(--b2-font-ui);
  font-size: 0.72rem; letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--b2-gold); font-weight: 700;
}

.b2-featured-data {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding: 16px;
  background: rgba(4, 12, 24, 0.4);
  border: 1px solid rgba(240, 236, 226, 0.05);
  border-radius: 10px;
}
.b2-featured-data .b2-pick-data-cell { display: flex; flex-direction: column; gap: 4px; }
.b2-featured-data .b2-pick-data-label { font-family: var(--b2-font-mono); font-size: 0.6rem; letter-spacing: 1.3px; text-transform: uppercase; color: var(--b2-ink-dim); font-weight: 500; }
.b2-featured-data .b2-pick-data-value {
  font-family: var(--b2-font-num);
  font-size: 1.15rem; font-weight: 600;
  color: var(--b2-ink);
  font-variant-numeric: tabular-nums; letter-spacing: -0.015em;
}
.b2-featured-data .b2-pick-data-value.b2-green { color: var(--b2-green-on); }

/* ---------- supporting grid + pick card -------------------------------- */
.b2-grid-label { font-size: 0.62rem; letter-spacing: 2.2px; text-transform: uppercase; color: var(--b2-ink-dim); font-weight: 600; margin-bottom: 8px; margin-top: 2px; }
/* v1.1: Tracked + other supporting grids = 3 per row. Step down to 2
   on tablet, 1 on mobile. */
.b2-board-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 960px) {
  .b2-board-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .b2-board-grid { grid-template-columns: 1fr; }
}

/* Top Edges supporting row — exactly 4 cards next to the featured
   banner. Cards are tighter than the default .b2-pick to keep the
   4-cell data panel legible at narrower card widths. */
.b2-top-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.b2-top-row .b2-pick              { padding: 18px 18px 14px; }
.b2-top-row .b2-pick-head         { margin-bottom: 14px; }
.b2-top-row .b2-pick-subject      { margin-bottom: 12px; }
.b2-top-row .b2-pick-player       { font-size: 1.15rem; line-height: 1.1; }
.b2-top-row .b2-pick-select       { font-size: 0.86rem; }
.b2-top-row .b2-pick-edge         { font-size: 2rem; }
.b2-top-row .b2-pick-data         { padding: 10px 10px; gap: 4px; margin-bottom: 12px; }
.b2-top-row .b2-pick-data-value   { font-size: 0.86rem; white-space: nowrap; }
.b2-top-row .b2-pick-data-label   { font-size: 0.56rem; letter-spacing: 1.1px; }
.b2-top-row .b2-pick-foot         { font-size: 0.66rem; gap: 6px; flex-wrap: wrap; }
@media (max-width: 1100px) {
  .b2-top-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .b2-top-row { grid-template-columns: 1fr; }
}

.b2-pick {
  position: relative;
  background: linear-gradient(165deg, var(--b2-navy-card-hi) 0%, var(--b2-navy-card) 45%, #0A1B33 100%);
  border: 1px solid var(--b2-hairline);
  border-radius: 14px;
  padding: 22px 24px 18px;
  box-shadow:
    0 6px 28px rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.02) inset,
    0 -20px 40px -20px rgba(0, 0, 0, 0.4) inset;
  transition: transform 0.25s cubic-bezier(.2,.6,.2,1), border-color 0.2s, box-shadow 0.25s;
}
.b2-pick:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 -20px 40px -20px rgba(0, 0, 0, 0.5) inset;
}

.b2-pick-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.b2-pick-market {
  font-family: var(--b2-font-mono);
  font-size: 0.72rem; font-weight: 500;
  letter-spacing: 1.5px; color: var(--b2-gold);
  padding: 3px 8px;
  border: 1px solid var(--b2-gold-faint);
  border-radius: 3px;
  background: rgba(201, 162, 74, 0.06);
}

/* Grade tier — letter-only, no circle/box (per founder 2026-04-26).
   Just colored, bold, uppercase letter. The color carries the tier
   meaning; no chrome around it. */
.b2-pick-tier {
  font-family: var(--b2-font-ui);
  font-size: 1.4rem; font-weight: 900;
  letter-spacing: 0.5px; text-transform: uppercase;
  padding: 0; border: none; border-radius: 0;
  background: transparent;
  color: var(--b2-tier-c);
  display: inline-block; line-height: 1;
}
/* S gets a touch bigger + a soft gold text-glow so it still reads as
   the headline tier — but no pill, no border, no background. */
.b2-pick-tier.b2-t-s {
  color: var(--b2-tier-s);
  background: transparent; border: none; box-shadow: none;
  font-size: 1.7rem; font-weight: 900;
  letter-spacing: 0;
  text-shadow: 0 0 14px rgba(201, 162, 74, 0.4);
}
.b2-pick-tier.b2-t-a { color: var(--b2-tier-a); background: transparent; border: none; }
.b2-pick-tier.b2-t-b { color: var(--b2-tier-b); background: transparent; border: none; }
.b2-pick-tier.b2-t-c { color: var(--b2-tier-c); background: transparent; border: none; }
.b2-pick-tier.b2-t-d { color: var(--b2-tier-d); background: transparent; border: none; }
.b2-pick-tier.b2-t-f { color: var(--b2-tier-f); background: transparent; border: none; }

.b2-pick-subject { margin-bottom: 16px; }
.b2-pick-player {
  font-family: var(--b2-font-ui);
  font-weight: 700; font-size: 1.2rem;
  line-height: 1.2; color: var(--b2-ink);
  letter-spacing: -0.005em; margin-bottom: 3px;
}
.b2-pick-select { font-size: 0.92rem; color: var(--b2-ink-soft); letter-spacing: 0.1px; }
.b2-pick-select .b2-accent {
  color: var(--b2-ink); font-weight: 600;
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

.b2-pick-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--b2-hairline-gold) 14%, var(--b2-hairline-gold) 86%, transparent 100%);
  margin: 14px 0 16px; opacity: 0.7;
}

.b2-pick-hero { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.b2-pick-edge {
  font-family: var(--b2-font-num);
  font-weight: 700;
  font-size: 2.4rem; line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--b2-ink);
}
.b2-pick.b2-t-s .b2-pick-edge { color: var(--b2-tier-s); }
.b2-pick.b2-t-a .b2-pick-edge { color: var(--b2-tier-a); }
.b2-pick.b2-t-b .b2-pick-edge { color: var(--b2-tier-b); }
.b2-pick.b2-t-c .b2-pick-edge { color: var(--b2-tier-c); }
.b2-pick.b2-t-d .b2-pick-edge { color: var(--b2-tier-d); }
.b2-pick.b2-t-f .b2-pick-edge { color: var(--b2-tier-f); }

.b2-pick-edge-unit {
  font-family: var(--b2-font-ui);
  font-size: 0.7rem; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b2-gold); font-weight: 700;
  padding-bottom: 5px;
}
.b2-pick.b2-t-f .b2-pick-edge-unit { color: var(--b2-tier-f); }

.b2-pick-line {
  font-size: 0.78rem;
  color: var(--b2-ink-mute);
  font-style: italic;
  font-family: var(--b2-font-hero);
  font-weight: 500;
  margin: 4px 0 16px;
}
.b2-pick-line .b2-num {
  font-family: var(--b2-font-num);
  font-weight: 600; font-style: normal;
  color: var(--b2-ink-soft);
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
}

.b2-pick-data {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  padding: 12px 14px;
  background: rgba(4, 12, 24, 0.38);
  border: 1px solid rgba(240, 236, 226, 0.035);
  border-radius: 8px;
  margin-bottom: 14px;
}
.b2-pick-data-cell { display: flex; flex-direction: column; gap: 4px; }
.b2-pick-data-label {
  font-family: var(--b2-font-mono);
  font-size: 0.6rem; letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--b2-ink-dim); font-weight: 500;
}
.b2-pick-data-value {
  font-family: var(--b2-font-num);
  font-size: 0.98rem; font-weight: 600;
  color: var(--b2-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}
.b2-pick-data-value.b2-green { color: var(--b2-green-on); }
.b2-pick-data-value.b2-red { color: var(--b2-tier-f); }

.b2-pick-foot {
  font-size: 0.72rem;
  color: var(--b2-ink-mute);
  letter-spacing: 0.3px;
  display: flex; align-items: center; gap: 8px;
}
.b2-pick-foot .b2-num { font-family: var(--b2-font-num); font-variant-numeric: tabular-nums; color: var(--b2-ink-mute); letter-spacing: 0; font-weight: 500; }

/* Tier border tints + colored hover glow */
.b2-pick.b2-t-s { border-color: rgba(232, 196, 106, 0.18); }
.b2-pick.b2-t-a { border-color: rgba(52, 197, 122, 0.14); }
.b2-pick.b2-t-b { border-color: rgba(126, 172, 148, 0.12); }
.b2-pick.b2-t-s:hover { box-shadow: 0 14px 40px rgba(0,0,0,0.4), 0 0 32px rgba(232,196,106,0.12), 0 1px 0 rgba(255,255,255,0.04) inset; }
.b2-pick.b2-t-a:hover { box-shadow: 0 14px 40px rgba(0,0,0,0.4), 0 0 32px rgba(52,197,122,0.1), 0 1px 0 rgba(255,255,255,0.04) inset; }
.b2-pick.b2-t-b:hover { box-shadow: 0 14px 40px rgba(0,0,0,0.4), 0 0 28px rgba(126,172,148,0.08), 0 1px 0 rgba(255,255,255,0.04) inset; }

/* ---------- Sports View: grouped rows ---------------------------------- */
.b2-groups { max-width: 1240px; margin: 32px auto 0; padding: 0 40px 80px; display: flex; flex-direction: column; gap: 32px; }

.b2-group {
  border: 1px solid var(--b2-hairline);
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(18, 45, 82, 0.35) 0%, rgba(14, 33, 64, 0.22) 100%);
  overflow: hidden;
}
.b2-group-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 22px 28px 16px;
  border-bottom: 1px solid var(--b2-hairline);
  position: relative;
}
.b2-group-head::after { content: ''; position: absolute; bottom: -1px; left: 28px; width: 52px; height: 1px; background: var(--b2-gold); }
.b2-group-title { display: flex; align-items: baseline; gap: 14px; }
.b2-group-sport { font-family: var(--b2-font-hero); font-weight: 800; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--b2-ink); }
.b2-group-market {
  font-family: var(--b2-font-mono);
  font-size: 0.74rem; letter-spacing: 1.5px;
  color: var(--b2-gold);
  padding: 3px 8px;
  border: 1px solid var(--b2-gold-faint);
  border-radius: 3px;
  background: rgba(201, 162, 74, 0.06);
  text-transform: uppercase;
}
.b2-group-meta { font-size: 0.72rem; letter-spacing: 1.6px; text-transform: uppercase; color: var(--b2-ink-mute); font-weight: 500; display: flex; gap: 14px; }
.b2-group-meta .b2-num { font-family: var(--b2-font-num); font-variant-numeric: tabular-nums; color: var(--b2-ink-soft); letter-spacing: 0; font-weight: 500; }

.b2-group-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.b2-col { padding: 20px 28px 22px; }
.b2-col-left { border-right: 1px solid var(--b2-hairline); }
.b2-col-head {
  font-size: 0.66rem; letter-spacing: 2.6px; text-transform: uppercase;
  font-weight: 700; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.b2-col-left .b2-col-head { color: var(--b2-tier-a); }
.b2-col-right .b2-col-head { color: var(--b2-tier-f); }
.b2-col-head .b2-marker { width: 6px; height: 6px; border-radius: 50%; }
.b2-col-left .b2-col-head .b2-marker { background: var(--b2-tier-a); box-shadow: 0 0 10px rgba(52, 197, 122, 0.5); }
.b2-col-right .b2-col-head .b2-marker { background: var(--b2-tier-f); box-shadow: 0 0 10px rgba(198, 75, 71, 0.5); }

.b2-rows { display: flex; flex-direction: column; gap: 8px; }
/* Sports View rows now share the same navy-gradient + hairline +
   box-shadow treatment as the Top Edges / Tracked .b2-pick cards, so
   all three views feel like the same material. Per-row the padding
   stays tighter (it's still a row layout, not a full card) but the
   surface properties match 1:1. */
.b2-row {
  position: relative;       /* so the free-lock overlay (inset: 0) anchors to the row */
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 16px;
  background: linear-gradient(165deg, var(--b2-navy-card-hi) 0%, var(--b2-navy-card) 45%, #0A1B33 100%);
  border: 1px solid var(--b2-hairline);
  border-radius: 10px;
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.02) inset,
    0 -14px 28px -14px rgba(0, 0, 0, 0.35) inset;
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.25s;
}
.b2-row:hover {
  transform: translateX(2px);
  border-color: var(--b2-hairline-gold);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.36),
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 -14px 28px -14px rgba(0, 0, 0, 0.4) inset;
}

.b2-row-tier {
  font-family: var(--b2-font-ui);
  width: 32px; height: 32px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.8rem; letter-spacing: 1px;
}
.b2-row-tier.b2-t-s {
  background: var(--b2-tier-s-soft);
  border: 1px solid var(--b2-tier-s-edge);
  color: var(--b2-tier-s);
  box-shadow: 0 0 12px rgba(201, 162, 74, 0.2);
  width: 36px; height: 36px;
  font-size: 0.92rem; font-weight: 900;
}
.b2-row-tier.b2-t-a { background: var(--b2-tier-a-soft); border: 1px solid var(--b2-tier-a-edge); color: var(--b2-tier-a); }
.b2-row-tier.b2-t-b { background: var(--b2-tier-b-soft); border: 1px solid var(--b2-tier-b-edge); color: var(--b2-tier-b); }
.b2-row-tier.b2-t-c { background: var(--b2-tier-c-soft); border: 1px solid var(--b2-tier-c-edge); color: var(--b2-tier-c); }
.b2-row-tier.b2-t-d { background: var(--b2-tier-d-soft); border: 1px solid var(--b2-tier-d-edge); color: var(--b2-tier-d); }
.b2-row-tier.b2-t-f { background: var(--b2-tier-f-soft); border: 1px solid var(--b2-tier-f-edge); color: var(--b2-tier-f); }

.b2-row-main { min-width: 0; }
.b2-row-title {
  font-family: var(--b2-font-hero);
  font-weight: 700; font-size: 1.02rem;
  color: var(--b2-ink); line-height: 1.15;
  margin-bottom: 3px;
}
.b2-row-select { font-size: 0.8rem; color: var(--b2-ink-soft); margin-bottom: 4px; }
.b2-row-select .b2-accent {
  color: var(--b2-ink); font-weight: 600;
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}
.b2-row-foot { font-size: 0.68rem; color: var(--b2-ink-dim); display: flex; gap: 8px; align-items: center; letter-spacing: 0.3px; }
.b2-row-foot .b2-num { font-family: var(--b2-font-num); font-variant-numeric: tabular-nums; letter-spacing: 0; font-weight: 500; color: var(--b2-ink-mute); }

.b2-row-edge {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  min-width: 110px;
}
.b2-row-edge-value {
  font-family: var(--b2-font-num);
  font-weight: 700;
  font-size: 1.6rem; line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.b2-row-edge-value.b2-t-s { color: var(--b2-tier-s); }
.b2-row-edge-value.b2-t-a { color: var(--b2-tier-a); }
.b2-row-edge-value.b2-t-b { color: var(--b2-tier-b); }
.b2-row-edge-value.b2-t-c { color: var(--b2-tier-c); }
.b2-row-edge-value.b2-t-d { color: var(--b2-tier-d); }
.b2-row-edge-value.b2-t-f { color: var(--b2-tier-f); }
.b2-row-edge-label {
  font-family: var(--b2-font-mono); font-size: 0.56rem;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--b2-ink-dim); font-weight: 500;
}
.b2-row-edge-sub {
  font-family: var(--b2-font-num);
  font-size: 0.72rem; color: var(--b2-ink-mute);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em; font-weight: 500;
}

/* ---------- Market View: dense table ----------------------------------- */
/* Matches .b2-board width so the dashboard doesn't visibly jump width
   when switching between Top Edges / Sports View / Market View tabs.
   Padding removed because the parent section already sets it.
   overflow-x: auto keeps the 12-column table's content from spilling
   outside the card background when the viewport is narrower than the
   table's natural width. */
.b2-market-wrap {
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: auto;
}
.b2-market-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--b2-font-ui);
}
/* Market table header — used to be position: sticky; top: 73px to
   stick below the nav, but that combined with the page's own scroll
   container caused the thead to float detached from tbody (mid-viewport
   gap, first data row overlapping the header). Switched to a flat,
   non-sticky header. If we want sticky behavior back later, it must
   scroll against .b2-market-wrap, not the viewport. */
.b2-market-table thead th {
  position: relative;
  background: rgba(8, 22, 42, 0.92);
  text-align: left;
  padding: 14px 14px 12px;
  font-family: var(--b2-font-mono);
  font-size: 0.62rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--b2-ink-dim);
  font-weight: 500;
  border-bottom: 1px solid var(--b2-hairline-gold);
  white-space: nowrap;
}
.b2-market-table thead th.b2-right { text-align: right; }
.b2-market-table thead th.b2-sortable { cursor: pointer; }
.b2-market-table thead th.b2-sortable:hover { color: var(--b2-gold); }
.b2-market-table thead th.b2-sorted { color: var(--b2-gold); }
.b2-market-table thead th.b2-sorted::after { content: ' ↓'; font-family: var(--b2-font-ui); letter-spacing: 0; }

.b2-market-table tbody td {
  padding: 13px 14px;
  font-size: 0.82rem;
  border-bottom: 1px solid rgba(240, 236, 226, 0.04);
  vertical-align: middle;
  white-space: nowrap;
}
.b2-market-table tbody tr:hover td { background: rgba(18, 45, 82, 0.3); }
.b2-market-table tbody tr:nth-child(even) td { background: rgba(8, 22, 42, 0.22); }
.b2-market-table tbody tr:nth-child(even):hover td { background: rgba(18, 45, 82, 0.35); }
.b2-market-table tbody td.b2-right { text-align: right; }

/* Market View tier badge — letter-only, matching .b2-pick-tier
   treatment (per founder 2026-04-26). No circle, no box, just the
   tier letter colored. */
.b2-tier-chip {
  display: inline-block;
  width: auto; height: auto;
  padding: 0; border: none; border-radius: 0;
  background: transparent;
  font-family: var(--b2-font-ui);
  font-size: 1rem; font-weight: 900; letter-spacing: 0;
  line-height: 1;
}
.b2-tier-chip.b2-t-s {
  background: transparent; border: none; box-shadow: none;
  color: var(--b2-tier-s);
  font-size: 1.15rem; font-weight: 900;
  text-shadow: 0 0 8px rgba(201, 162, 74, 0.3);
  width: auto; height: auto;
}
.b2-tier-chip.b2-t-a { color: var(--b2-tier-a); background: transparent; border: none; }
.b2-tier-chip.b2-t-b { color: var(--b2-tier-b); background: transparent; border: none; }
.b2-tier-chip.b2-t-c { color: var(--b2-tier-c); background: transparent; border: none; }
.b2-tier-chip.b2-t-d { color: var(--b2-tier-d); background: transparent; border: none; }
.b2-tier-chip.b2-t-f { color: var(--b2-tier-f); background: transparent; border: none; }

.b2-mkt-tag {
  font-family: var(--b2-font-mono);
  font-size: 0.68rem; font-weight: 500;
  letter-spacing: 1.3px;
  color: var(--b2-gold);
  padding: 3px 7px;
  border: 1px solid var(--b2-gold-faint);
  border-radius: 3px;
  background: rgba(201, 162, 74, 0.06);
}

/* Market View — per-column cell styling. Scoped to .b2-market-table so
   these rules don't leak to any other table in the app. */
.b2-market-table .b2-cell-tier {
  width: 54px;
  padding-left: 18px !important;
  padding-right: 8px !important;
}
.b2-market-table .b2-cell-market { width: 72px; }
.b2-market-table .b2-cell-subject { min-width: 180px; }
.b2-market-table .b2-subject-name {
  font-family: var(--b2-font-hero);
  font-weight: 700; font-size: 0.96rem;
  color: var(--b2-ink);
  letter-spacing: -0.005em; line-height: 1.15;
}
.b2-market-table .b2-subject-meta {
  font-size: 0.7rem;
  color: var(--b2-ink-dim);
  margin-top: 2px; letter-spacing: 0.3px;
}
.b2-market-table .b2-cell-selection {
  min-width: 150px;
  color: var(--b2-ink-soft);
  font-size: 0.84rem;
}
.b2-market-table .b2-cell-book {
  color: var(--b2-gold); font-weight: 600;
  font-size: 0.78rem; letter-spacing: 0.4px;
}
.b2-market-table .b2-num-cell {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--b2-ink);
}
.b2-market-table .b2-cell-edge { font-size: 0.96rem; }
.b2-market-table .b2-cell-edge.b2-t-s { color: var(--b2-tier-s); }
.b2-market-table .b2-cell-edge.b2-t-a { color: var(--b2-tier-a); }
.b2-market-table .b2-cell-edge.b2-t-b { color: var(--b2-tier-b); }
.b2-market-table .b2-cell-edge.b2-t-c { color: var(--b2-tier-c); }
.b2-market-table .b2-cell-edge.b2-t-d { color: var(--b2-tier-d); }
.b2-market-table .b2-cell-edge.b2-t-f { color: var(--b2-tier-f); }
.b2-market-table .b2-cell-ev {
  font-size: 0.86rem;
  color: var(--b2-green-on);
}
.b2-market-table .b2-cell-ev.b2-negative { color: var(--b2-tier-f); }
.b2-market-table .b2-cell-time,
.b2-market-table .b2-cell-game {
  font-size: 0.74rem;
  letter-spacing: 0.3px;
}
.b2-market-table .b2-cell-game { color: var(--b2-ink-soft); }
.b2-market-table .b2-cell-time { color: var(--b2-ink-mute); }
.b2-market-table tbody tr[data-open-detail] { cursor: pointer; }

/* Result / legend bar shown above the market table */
.b2-market-meta {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--b2-hairline);
  border-bottom: 1px solid var(--b2-hairline);
  font-size: 0.74rem; color: var(--b2-ink-mute);
  flex-wrap: wrap; gap: 14px;
}
.b2-market-meta .b2-meta-left { display: flex; gap: 14px; align-items: center; }
.b2-market-meta .b2-meta-left .b2-num { color: var(--b2-ink); letter-spacing: 0; font-weight: 600; }
.b2-market-meta .b2-sep { color: var(--b2-ink-dim); }
.b2-market-legend { display: flex; gap: 12px; align-items: center; }
.b2-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.66rem; letter-spacing: 1.4px;
  font-weight: 600; text-transform: uppercase;
}
.b2-legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.b2-legend-dot.b2-t-s { background: var(--b2-tier-s); box-shadow: 0 0 8px rgba(201,162,74,0.5); }
.b2-legend-dot.b2-t-a { background: var(--b2-tier-a); }
.b2-legend-dot.b2-t-b { background: var(--b2-tier-b); }
.b2-legend-dot.b2-t-c { background: var(--b2-tier-c); }
.b2-legend-dot.b2-t-d { background: var(--b2-tier-d); }
.b2-legend-dot.b2-t-f { background: var(--b2-tier-f); }

/* ---------- filter chips (Sports View + Market View) ------------------- */
.b2-filter-bar {
  max-width: 1240px; margin: 28px auto 0; padding: 0 40px;
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
}
.b2-filter-label {
  font-size: 0.68rem; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--b2-ink-dim);
  font-weight: 600; margin-right: 6px;
}
.b2-chip {
  padding: 6px 14px;
  font-size: 0.74rem; letter-spacing: 1.2px;
  font-weight: 600; color: var(--b2-ink-mute);
  background: rgba(240, 236, 226, 0.04);
  border: 1px solid var(--b2-hairline);
  border-radius: 100px;
  cursor: pointer;
}
.b2-chip:hover { color: var(--b2-ink-soft); }
.b2-chip.b2-active {
  color: var(--b2-gold);
  background: rgba(201, 162, 74, 0.08);
  border-color: var(--b2-gold-faint);
}

/* ---------- page footer ------------------------------------------------ */
.b2-page-foot {
  max-width: 1240px; margin: 0 auto;
  padding: 40px 40px 64px;
  border-top: 1px solid var(--b2-hairline);
  display: flex; justify-content: space-between; gap: 24px;
  align-items: center; flex-wrap: wrap;
}
.b2-page-foot .b2-brand {
  font-family: var(--b2-font-hero);
  font-style: italic; font-weight: 500;
  color: var(--b2-gold); font-size: 0.95rem;
}
.b2-page-foot .b2-small {
  font-size: 0.72rem; letter-spacing: 0.3px;
  color: var(--b2-ink-mute);
  max-width: 640px; line-height: 1.5;
}

/* ---------- sport tabs + market filters (v1.1 premium) ---------------- */
/* Sport pills — replaces the old .dashboard-sport-tab chip look. Uses
   the mono-label/navy-well/gold-active pattern from the rest of the b2
   system so the filters don't look grafted on. */
.b2-sport-tabs {
  display: flex; flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 22px;
  margin: 0;
}
.b2-sport-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px;
  font-family: var(--b2-font-ui);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--b2-ink-mute);
  background: rgba(8, 22, 44, 0.5);
  border: 1px solid var(--b2-hairline);
  border-radius: 999px;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.b2-sport-tab:hover {
  color: var(--b2-ink-soft);
  border-color: rgba(201, 162, 74, 0.28);
  background: rgba(201, 162, 74, 0.05);
}
.b2-sport-tab.b2-active {
  color: var(--b2-gold);
  border-color: var(--b2-gold);
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.14) 0%, rgba(201, 162, 74, 0.06) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 232, 170, 0.18),
    0 8px 22px -10px rgba(201, 162, 74, 0.55);
}
.b2-sport-tab-count {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--b2-font-num);
  font-weight: 600;
  font-size: 0.68rem;
  letter-spacing: 0;
  color: var(--b2-ink-soft);
}
.b2-sport-tab.b2-active .b2-sport-tab-count {
  background: rgba(201, 162, 74, 0.22);
  color: var(--b2-gold);
}

/* Market filters — custom select with gold chevron, mono uppercase
   label, focus ring. Replaces the legacy .dashboard-market-filter look. */
.b2-market-filters {
  display: flex; flex-wrap: wrap;
  gap: 18px;
  padding: 18px 0 20px;
  margin-bottom: 18px;
  border-top: 1px solid var(--b2-hairline);
  border-bottom: 1px solid var(--b2-hairline);
}
/* The [hidden] attribute gets overridden by .b2-market-filters { display:
   flex } above because both are specificity 0,1,0 and our rule comes
   later. Explicitly collapse the filter row on views that set it hidden
   (Top Edges / Tracked / Sports View). */
.b2-market-filters[hidden] {
  display: none;
}
.b2-filter-field {
  display: flex; flex-direction: column;
  gap: 8px;
  min-width: 200px;
  flex: 0 1 220px;
}
.b2-filter-label {
  font-family: var(--b2-font-mono);
  font-size: 0.62rem; font-weight: 600;
  letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--b2-gold);
}
.b2-filter-select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-family: var(--b2-font-ui);
  font-size: 0.92rem; font-weight: 500;
  color: var(--b2-ink);
  padding: 12px 42px 12px 16px;
  border: 1px solid var(--b2-hairline);
  border-radius: 10px;
  background-color: rgba(8, 22, 44, 0.65);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23C9A24A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>"),
    linear-gradient(165deg, rgba(18, 45, 82, 0.55) 0%, rgba(8, 22, 44, 0.55) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: right 16px center, 0 0;
  background-size: 11px 7px, auto;
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.b2-filter-select:hover {
  border-color: rgba(201, 162, 74, 0.4);
  background-color: rgba(10, 26, 50, 0.75);
}
.b2-filter-select:focus {
  outline: none;
  border-color: var(--b2-gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 74, 0.14);
}
.b2-filter-select option {
  background: var(--b2-navy-deep);
  color: var(--b2-ink);
}

/* ---------- responsive ------------------------------------------------- */
@media (max-width: 900px) {
  .b2-nav { padding: 14px 24px; }
  .b2-view-tabs, .b2-filter-bar { padding: 0 24px; }
  .b2-hero { padding: 40px 24px 24px; }
  .b2-hero::before { left: 24px; top: 52px; width: 36px; }
  .b2-hero-kicker { margin-left: 48px; }
  .b2-stats { padding: 0 24px; margin-bottom: 32px; }
  .b2-stats-inner { grid-template-columns: repeat(2, 1fr); }
  .b2-stat { border-right: 1px solid var(--b2-hairline); border-bottom: 1px solid var(--b2-hairline); }
  .b2-stat:nth-child(even) { border-right: none; }
  .b2-stat:nth-last-child(-n+2) { border-bottom: none; }
  .b2-board { padding: 0 24px 48px; }
  .b2-featured-grid { grid-template-columns: 1fr; padding: 36px 24px 28px; }
  .b2-featured-left { padding-right: 0; padding-bottom: 24px; border-right: none; border-bottom: 1px solid var(--b2-hairline-gold); margin-bottom: 24px; }
  .b2-featured-right { padding-left: 0; }
  .b2-featured-data { grid-template-columns: repeat(2, 1fr); }
  .b2-groups { padding: 0 24px 48px; }
  .b2-group-body { grid-template-columns: 1fr; }
  .b2-col-left { border-right: none; border-bottom: 1px solid var(--b2-hairline); }
  .b2-nav-links, .b2-nav-right { display: none; }
}
@media (max-width: 1100px) {
  .b2-market-wrap { overflow-x: auto; padding-left: 24px; padding-right: 24px; }
  .b2-market-table { min-width: 1000px; }
}

/* ========== Bet Checker (below-board section) =========================== */
.b2-bet-check {
  position: relative;
  background: linear-gradient(165deg, rgba(18,45,82,0.6) 0%, rgba(14,33,64,0.35) 100%);
  border: 1px solid var(--b2-hairline);
  border-radius: 14px;
  padding: 22px 24px;
  overflow: hidden;
}
.b2-bet-check-inner { position: relative; }
/* Lock overlay — hidden by default; shown only when
   .b2-bet-check.is-locked (toggled by JS for free users). Mirrors the
   .dashboard-bet-card-free-lock look so the Bet Checker lock matches
   the card/featured/row locks elsewhere on the dashboard. */
.b2-bet-check-lock {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 5;
  flex-direction: row;       /* horizontal so everything fits on one line */
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 24px;
  border-radius: 14px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(11, 31, 58, 0.85), rgba(8, 22, 42, 0.95));
  flex-wrap: wrap;
}
.b2-bet-check-lock .dashboard-bet-card-free-lock-icon {
  width: 34px; height: 34px;
  flex-shrink: 0;
}
.b2-bet-check-lock .dashboard-bet-card-free-lock-icon svg {
  width: 16px; height: 16px;
}
.b2-bet-check-lock .dashboard-bet-card-free-lock-tier {
  flex-shrink: 0;
}
.b2-bet-check-lock-copy {
  font-family: var(--b2-font-ui);
  font-size: 0.88rem; line-height: 1.35;
  color: var(--b2-ink-soft);
  text-align: left;
  flex: 1 1 260px;
  min-width: 0;
}
.b2-bet-check-lock .btn {
  flex-shrink: 0;
  pointer-events: auto;
}
.b2-bet-check.is-locked { cursor: default; }
.b2-bet-check.is-locked .b2-bet-check-inner {
  filter: blur(9px) saturate(0.35) brightness(0.85);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.b2-bet-check.is-locked .b2-bet-check-lock { display: flex; }
.b2-bet-check-grid {
  display: grid;
  grid-template-columns: 2fr 1fr auto;
  gap: 14px;
  align-items: end;
}
.b2-bet-check-field { display: flex; flex-direction: column; gap: 8px; }
.b2-bet-check-label {
  font-size: 0.66rem; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--b2-ink-dim);
  font-weight: 600;
}
.b2-bet-check-input {
  width: 100%;
  padding: 13px 16px;
  border-radius: 10px;
  border: 1px solid var(--b2-hairline);
  background: rgba(4,12,24,0.4);
  color: var(--b2-ink);
  font-family: var(--b2-font-ui);
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.b2-bet-check-input::placeholder { color: var(--b2-ink-dim); }
.b2-bet-check-input:focus {
  border-color: var(--b2-gold-faint);
  background: rgba(4,12,24,0.55);
}
.b2-bet-check-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.b2-bet-check-submit {
  padding: 13px 26px;
  font-size: 0.78rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--b2-navy-base);
  background: var(--b2-gold);
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.b2-bet-check-submit:hover { background: var(--b2-gold-light); }
.b2-bet-check-clear {
  padding: 9px 26px;
  font-size: 0.7rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--b2-ink-soft);
  background: transparent;
  border: 1px solid var(--b2-hairline);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.b2-bet-check-clear:hover {
  color: var(--b2-ink);
  border-color: var(--b2-hairline-gold);
  background: rgba(201, 162, 74, 0.05);
}
.b2-bet-check-result {
  margin-top: 18px;
  color: var(--b2-ink-soft);
  font-size: 0.9rem;
  line-height: 1.5;
}
.b2-bet-check-result:empty { margin-top: 0; }
.b2-bet-check-empty {
  padding: 14px 16px;
  border: 1px dashed var(--b2-hairline);
  border-radius: 10px;
  color: var(--b2-ink-mute);
  font-size: 0.86rem;
  background: rgba(4, 12, 24, 0.28);
}

/* Result card — b2-styled replacement for the old inline "closest board
   match" card. Mirrors the card typography + stats layout used elsewhere
   on the dashboard so the Bet Checker result doesn't look grafted on. */
.b2-bet-check-card {
  position: relative;
  padding: 20px 22px;
  border: 1px solid var(--b2-hairline-gold);
  border-radius: 14px;
  background:
    radial-gradient(700px 240px at 0% 0%, rgba(201, 162, 74, 0.06), transparent 60%),
    linear-gradient(165deg, rgba(18, 45, 82, 0.55) 0%, rgba(8, 22, 42, 0.55) 100%);
  display: flex; flex-direction: column;
  gap: 16px;
}
.b2-bet-check-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.b2-bet-check-card-identity { min-width: 0; flex: 1 1 280px; }
.b2-bet-check-card-kicker {
  font-family: var(--b2-font-mono);
  font-size: 0.58rem; letter-spacing: 2.2px;
  text-transform: uppercase; color: var(--b2-gold);
  font-weight: 600;
  margin-bottom: 6px;
}
.b2-bet-check-card-title {
  font-family: var(--b2-font-hero);
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  color: var(--b2-ink);
  line-height: 1.15;
  margin-bottom: 4px;
}
.b2-bet-check-card-sub {
  font-family: var(--b2-font-ui);
  font-size: 0.82rem;
  color: var(--b2-ink-soft);
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.b2-bet-check-verdict {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--b2-font-ui);
  font-size: 0.68rem; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase;
  flex-shrink: 0;
}
.b2-bet-check-verdict-pos {
  color: var(--b2-green-on);
  background: rgba(47, 161, 104, 0.12);
  border: 1px solid rgba(47, 161, 104, 0.45);
}
.b2-bet-check-verdict-neg {
  color: #E87171;
  background: rgba(184, 58, 58, 0.12);
  border: 1px solid rgba(184, 58, 58, 0.45);
}
.b2-bet-check-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.b2-bet-check-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 11px 13px;
  border: 1px solid var(--b2-hairline);
  border-radius: 10px;
  background: rgba(4, 14, 28, 0.5);
  min-width: 0;
}
.b2-bet-check-stat-label {
  font-family: var(--b2-font-mono);
  font-size: 0.56rem; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b2-ink-dim);
  font-weight: 600;
}
.b2-bet-check-stat-value {
  font-family: var(--b2-font-num);
  font-size: 1.05rem; font-weight: 600;
  color: var(--b2-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.b2-bet-check-card-note {
  font-family: var(--b2-font-ui);
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--b2-ink-soft);
  margin: 0;
  padding: 12px 14px;
  border-left: 2px solid var(--b2-hairline-gold);
  background: rgba(201, 162, 74, 0.04);
  border-radius: 0 8px 8px 0;
}

@media (max-width: 700px) {
  .b2-bet-check-grid { grid-template-columns: 1fr; }
  .b2-bet-check-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .b2-bet-check-actions { flex-direction: row; }
}

/* ========== Track Record block =========================================== */
.b2-track-note {
  font-family: var(--b2-font-hero);
  font-style: italic;
  font-weight: 500;
  color: var(--b2-ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 16px 0 10px;
  max-width: 720px;
}
.b2-track-link {
  display: inline-block;
  color: var(--b2-gold);
  font-size: 0.74rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  padding: 10px 0 4px;
  border-bottom: 1px solid var(--b2-gold-faint);
  transition: color 0.15s, border-color 0.15s;
}
.b2-track-link:hover {
  color: var(--b2-gold-light);
  border-bottom-color: var(--b2-gold);
}

/* ========== Anchor breakdown card =======================================
   Per docs/Prompts/prompt-model-v1.md § Anchor Policy § Track-record
   display rule (added 2026-04-26). Sits beneath the track-record
   headline strip on dashboard.html and track-record.html. Three rows:
   Pinnacle (sharp) / FanDuel (coverage) / Combined. Reuses the
   existing parlay-anchor-chip pill styling for the row labels so the
   anchor visual language stays consistent across surfaces. */
.b2-track-anchor-breakdown {
  border: 1px solid var(--b2-hairline);
  border-radius: 10px;
  background: rgba(6, 17, 31, 0.35);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.b2-track-anchor-breakdown-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.b2-track-anchor-breakdown-note {
  font-size: 0.74rem;
  color: var(--b2-ink-mute);
  letter-spacing: 0.2px;
}
.b2-track-anchor-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.b2-track-anchor-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(240, 236, 226, 0.06);
}
.b2-track-anchor-row:last-child {
  border-bottom: none;
}
.b2-track-anchor-row-combined {
  border-top: 1px solid rgba(201, 162, 74, 0.18);
  padding-top: 10px;
  margin-top: 4px;
}
.b2-track-anchor-row-combined .b2-track-anchor-label {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--b2-ink-soft);
}
.b2-track-anchor-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--b2-ink-soft);
}
.b2-track-anchor-stat {
  font-family: var(--b2-font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--b2-ink);
  text-align: right;
}

/* Sidebar variant — narrower layout for dashboard-free.html. Compact
   single-line breakdown (chip + stat) instead of the four-column grid
   used on the wider dashboards. */
.record-anchor-breakdown {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--b2-hairline);
}
.record-anchor-breakdown-head {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--b2-ink-mute);
  font-weight: 600;
  margin-bottom: 8px;
}
.record-anchor-breakdown-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.record-anchor-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--b2-ink-soft);
}
.record-anchor-row-combined {
  border-top: 1px dashed rgba(240, 236, 226, 0.12);
  padding-top: 6px;
  margin-top: 2px;
  font-weight: 700;
  color: var(--b2-ink);
}
.record-anchor-tag {
  display: inline-flex;
  align-items: center;
}

/* ========== Keep Going CTA block ========================================= */
.b2-keep-going {
  padding: 34px;
  background:
    linear-gradient(135deg, rgba(201,162,74,0.10) 0%, rgba(31,110,67,0.04) 55%, rgba(18,45,82,0.55) 100%);
  border: 1px solid var(--b2-gold-faint);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35), 0 1px 0 rgba(255,220,140,0.05) inset;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.b2-keep-going-copy { flex: 1; min-width: 280px; }
.b2-keep-going-kicker {
  font-size: 0.72rem; letter-spacing: 4px;
  text-transform: uppercase; color: var(--b2-gold);
  font-weight: 700; margin-bottom: 10px;
}
.b2-keep-going-title {
  font-family: var(--b2-font-hero);
  font-weight: 800;
  font-size: 1.7rem;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--b2-ink);
  margin: 0 0 10px;
  max-width: 640px;
}
.b2-keep-going-title em { font-style: italic; font-weight: 600; color: var(--b2-gold); }
.b2-keep-going-sub {
  color: var(--b2-ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  max-width: 560px;
}
.b2-keep-going-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.b2-keep-going-btn {
  padding: 12px 22px;
  font-size: 0.76rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.b2-keep-going-btn-ghost {
  color: var(--b2-ink-soft);
  background: transparent;
  border: 1px solid var(--b2-hairline);
}
.b2-keep-going-btn-ghost:hover {
  color: var(--b2-ink);
  border-color: var(--b2-hairline-gold);
}
.b2-keep-going-btn-primary {
  color: var(--b2-navy-base);
  background: var(--b2-gold);
  border: 1px solid transparent;
}
.b2-keep-going-btn-primary:hover { background: var(--b2-gold-light); }

/* ============================================================
   SPORTS VIEW — v1.1 nested collapsible groups
   Outer <details>.b2-sport-block = Sport (NBA, MLB, ...)
   Inner <details>.b2-bettype-block = Moneyline / Spread / ...
   Edges render as flat .b2-row list sorted by edge desc.
   ============================================================ */
/* .b2-sports-stack is now a MODIFIER that's applied to the shared
   .dashboard-top-edges-section wrapper — so Sports View and Top Edges
   use the same outer container. Only override properties that differ
   from the base (tighter gap between sport sections). */
/* v1.2 sport divider (2026-04-24): stronger separation between sport
   sections while keeping body rows flush to the Top Edges / Market View
   width. Strategy — premium "banner" on the sport-head (gold top accent
   bar, soft navy wash, gold dot marker) + real vertical gap between
   sport blocks. Body stays transparent + edge-to-edge. */
.b2-sports-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.b2-sport-block {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  position: relative;
}
.b2-sport-head {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 16px 14px;
  cursor: pointer;
  list-style: none;
  position: relative;
  background:
    linear-gradient(180deg, rgba(18, 45, 82, 0.48) 0%, rgba(18, 45, 82, 0.14) 100%);
  border-top: 1px solid var(--b2-hairline-gold);
  border-bottom: 1px solid var(--b2-hairline);
  transition: background 0.2s ease, border-color 0.2s ease;
}
.b2-sport-head::-webkit-details-marker { display: none; }
.b2-sport-head::before {
  /* Gold accent bar anchored top-left of the banner — dashboard-native
     marker that matches the b2-hero / b2-section-head::after hairlines. */
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 56px; height: 2px;
  background: var(--b2-gold);
}
.b2-sport-head:hover {
  background:
    linear-gradient(180deg, rgba(201, 162, 74, 0.07) 0%, rgba(18, 45, 82, 0.18) 100%);
}
.b2-sport-block[open] > .b2-sport-head {
  border-bottom-color: var(--b2-hairline-gold);
}
.b2-sport-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--b2-gold);
  font-size: 0.9rem;
  transition: transform .18s ease;
  transform: rotate(-90deg);
}
.b2-sport-block[open] > .b2-sport-head > .b2-sport-chev { transform: rotate(0deg); }
.b2-sport-name {
  font-family: var(--b2-font-hero);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.015em;
  color: var(--b2-ink);
  flex: 1;
  min-width: 0;
  position: relative;
  padding-left: 18px;
}
.b2-sport-name::before {
  /* Soft gold dot marker beside the sport title. */
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--b2-gold);
  box-shadow: 0 0 10px rgba(201, 162, 74, 0.55);
}
.b2-sport-meta {
  font-family: var(--b2-font-mono);
  font-size: 0.62rem; letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--b2-ink-mute);
  font-weight: 500;
  display: flex; gap: 8px; align-items: center;
}
.b2-sport-meta .b2-num {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--b2-ink);
  font-weight: 600;
}
.b2-sport-body {
  display: flex; flex-direction: column;
  gap: 10px;
  /* No horizontal padding — the bet-type blocks inside already
     have their own dividers, and dropping padding here lets the
     Sports View content span the full dashboard-board-shell
     width (same as Top Edges and Market View). Top padding gives
     visual breathing room below the new banner header. */
  padding: 14px 0 8px;
}

.b2-bettype-block {
  width: 100%;
  box-sizing: border-box;
  /* Flattened to match the sport-block pattern: no outer card, just a
     labeled section with a soft divider so rows extend to the full
     Sports View width, matching Top Edges and Market View. */
  border: 0;
  border-radius: 0;
  background: transparent;
}
.b2-bettype-head {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 4px;
  cursor: pointer;
  list-style: none;
  border-top: 1px solid rgba(240, 236, 226, 0.04);
}
.b2-bettype-head::-webkit-details-marker { display: none; }
.b2-bettype-head:hover { background: rgba(201, 162, 74, 0.04); }
.b2-bettype-chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--b2-gold);
  font-size: 0.8rem;
  transition: transform .18s ease;
  transform: rotate(-90deg);
}
.b2-bettype-block[open] > .b2-bettype-head > .b2-bettype-chev { transform: rotate(0deg); }
.b2-bettype-name {
  font-family: var(--b2-font-ui);
  font-weight: 600;
  font-size: 0.84rem; letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--b2-ink);
  flex: 1;
}
.b2-bettype-meta {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--b2-font-mono);
  font-size: 0.6rem; letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--b2-ink-mute);
  font-weight: 500;
}
.b2-bettype-meta .b2-num {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: var(--b2-ink);
  font-weight: 600;
}
.b2-bettype-meta .b2-bettype-pos { color: var(--b2-green-on); }
.b2-bettype-meta .b2-bettype-neg { color: #E87171; }
/* Bet-type body — side-by-side 2-col layout:
     LEFT column = Top edges (positives)
     RIGHT column = Biggest traps (negatives)
   The columns hold up to 3 rows each. At narrower widths they stack.
   Horizontal padding pulled to 0 so rows fill the full bet-type card
   width; vertical/gap spacing handles visual breathing room. */
.b2-bettype-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 2px 2px 10px;
}
@media (max-width: 900px) {
  .b2-bettype-body { grid-template-columns: 1fr; }
}

/* Top edges / Biggest traps columns inside a bet-type block. */
.b2-bucket {
  display: flex; flex-direction: column;
  min-width: 0; /* allow flex children to shrink below content width */
}
.b2-bucket-head {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 4px 8px;
  font-family: var(--b2-font-mono);
  font-size: 0.56rem; letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--b2-ink-mute);
  font-weight: 600;
}
.b2-bucket-head .b2-marker {
  width: 6px; height: 6px;
  border-radius: 50%;
  display: inline-block;
}
.b2-bucket-head .b2-marker-pos { background: var(--b2-green-on); box-shadow: 0 0 6px rgba(47, 161, 104, 0.55); }
.b2-bucket-head .b2-marker-neg { background: #E87171; box-shadow: 0 0 6px rgba(184, 58, 58, 0.55); }
.b2-bucket-list { display: flex; flex-direction: column; gap: 6px; }

/* Rows inside the Sports View 2-col buckets are narrower than the
   original stacked rows, so pull in padding/font sizes so the tier
   chip + title + edge % + EV all still fit on one line without the
   column feeling cramped. */
.b2-bettype-body .b2-row {
  padding: 10px 12px;
  gap: 10px;
  grid-template-columns: 32px 1fr auto;
}
.b2-bettype-body .b2-row-tier {
  width: 28px; height: 28px;
  font-size: 0.72rem;
  border-radius: 8px;
}
.b2-bettype-body .b2-row-tier.b2-t-s { width: 32px; height: 32px; font-size: 0.8rem; }
.b2-bettype-body .b2-row-edge { min-width: 76px; gap: 1px; }
.b2-bettype-body .b2-row-edge-value { font-size: 1.25rem; }
.b2-bettype-body .b2-row-edge-sub { font-size: 0.66rem; }
.b2-bettype-body .b2-row-edge-label { font-size: 0.5rem; letter-spacing: 1.1px; }
.b2-bettype-body .b2-row-title { font-size: 0.88rem; }
.b2-bettype-body .b2-row-select { font-size: 0.72rem; margin-bottom: 3px; }
.b2-bettype-body .b2-row-foot { font-size: 0.62rem; gap: 6px; flex-wrap: wrap; }

/* Row-shaped lock overlay — the card version uses vertical stacking
   (icon/badge/button) but rows are short and horizontal, so pack the
   same three elements into a single centered row. */
.dashboard-page .b2-row-lock {
  flex-direction: row;
  gap: 14px;
  padding: 10px 16px;
  border-radius: 12px;
}
.dashboard-page .b2-row-lock .dashboard-bet-card-free-lock-icon {
  width: 28px; height: 28px;
}
.dashboard-page .b2-row-lock .dashboard-bet-card-free-lock-icon svg {
  width: 14px; height: 14px;
}

/* Featured-banner lock overlay — large headline + descriptive copy
   beside the icon, so the free user knows specifically that it's the
   featured highlight they're missing. */
.dashboard-page .b2-featured-lock {
  border-radius: 16px;
  padding: 24px;
  gap: 14px;
}
.dashboard-page .b2-featured-lock .dashboard-bet-card-free-lock-icon {
  width: 44px; height: 44px;
}
.dashboard-page .b2-featured-lock .dashboard-bet-card-free-lock-icon svg {
  width: 22px; height: 22px;
}
.b2-featured-lock-copy {
  font-family: var(--b2-font-hero);
  font-style: italic;
  font-weight: 500;
  font-size: 1rem;
  color: var(--b2-ink-soft);
  text-align: center;
  max-width: 320px;
  line-height: 1.35;
}

/* ============================================================
   LOAD-MORE BUTTON (Market View pagination)
   ============================================================ */
.b2-load-more-wrap {
  display: flex; justify-content: center;
  padding: 22px 0 8px;
}
.b2-load-more {
  font-family: var(--b2-font-ui);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 1.6px; text-transform: uppercase;
  padding: 12px 28px;
  border: 1px solid var(--b2-hairline-gold);
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.08) 0%, rgba(8, 22, 42, 0.5) 100%);
  color: var(--b2-gold);
  border-radius: 999px;
  cursor: pointer;
  transition: all .18s ease;
}
.b2-load-more:hover {
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.18) 0%, rgba(8, 22, 42, 0.5) 100%);
  border-color: var(--b2-gold);
  color: var(--b2-gold-light);
}

/* ============================================================
   DETAIL MODAL — v1.1 b2 restyle
   Overrides legacy .dashboard-detail-dialog container to shrink
   it and give it the b2 navy+gold treatment. New inner markup
   (.b2-modal-*) is produced by renderDetailBodyB2().
   ============================================================ */
.dashboard-page .dashboard-detail-dialog {
  width: min(680px, 100%);
  max-height: min(82vh, 820px);
  border-radius: 18px;
  border: 1px solid var(--b2-hairline);
  background:
    radial-gradient(800px 480px at 50% -40%, rgba(201,162,74,0.08), transparent 60%),
    linear-gradient(180deg, rgba(18, 40, 72, 0.92) 0%, rgba(8, 22, 42, 0.98) 100%);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(201, 162, 74, 0.06);
}
.dashboard-page .dashboard-detail-content {
  max-height: min(82vh, 820px);
  padding: 0;
}
.dashboard-page .dashboard-detail-close {
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  border: 1px solid var(--b2-hairline);
  background: rgba(8, 22, 42, 0.8);
  color: var(--b2-ink-soft);
  font-size: 1.25rem;
  transition: all .18s ease;
}
.dashboard-page .dashboard-detail-close:hover {
  color: var(--b2-gold);
  border-color: var(--b2-hairline-gold);
  background: rgba(12, 30, 56, 0.9);
}

.b2-modal-shell {
  padding: 24px 26px 26px;
  display: flex; flex-direction: column;
  gap: 16px;
}

/* ---- HEADER ---- */
.b2-modal-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
  padding-right: 46px; /* leave room for the close X at top-right */
  padding-bottom: 16px;
  border-bottom: 1px solid var(--b2-hairline);
  position: relative;
}
.b2-modal-head::after {
  content: ''; position: absolute; bottom: -1px; left: 0;
  width: 56px; height: 1px; background: var(--b2-gold);
}
.b2-modal-identity { min-width: 0; flex: 1; }
.b2-modal-kicker {
  font-family: var(--b2-font-mono);
  font-size: 0.58rem; letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--b2-gold);
  font-weight: 600;
  margin-bottom: 6px;
}
.b2-modal-title {
  font-family: var(--b2-font-hero);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.4vw, 1.65rem);
  line-height: 1.05; letter-spacing: -0.02em;
  color: var(--b2-ink);
  margin: 0 0 4px;
}
.b2-modal-sub {
  font-family: var(--b2-font-ui);
  font-size: 0.86rem;
  color: var(--b2-ink-soft);
}
.b2-modal-head-right {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.b2-modal-tier {
  width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--b2-font-hero);
  font-weight: 800; font-size: 1rem;
  letter-spacing: 0;
}
.b2-modal-track {
  font-family: var(--b2-font-ui);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 1.4px; text-transform: uppercase;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--b2-hairline-gold);
  background: rgba(201, 162, 74, 0.08);
  color: var(--b2-gold);
  cursor: pointer;
  transition: all .18s ease;
}
.b2-modal-track:hover {
  background: rgba(201, 162, 74, 0.16);
  border-color: var(--b2-gold);
  color: var(--b2-gold-light);
}
.b2-modal-track.is-tracked {
  background: rgba(47, 161, 104, 0.12);
  border-color: rgba(47, 161, 104, 0.45);
  color: var(--b2-green-on);
}

/* ---- CONTEXT STRIP ---- */
.b2-modal-context {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.b2-modal-ctx-cell {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--b2-hairline);
  border-radius: 10px;
  background: rgba(8, 22, 42, 0.5);
  min-width: 0;
}
.b2-modal-ctx-label {
  font-family: var(--b2-font-mono);
  font-size: 0.56rem; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b2-ink-dim);
  font-weight: 600;
}
.b2-modal-ctx-value {
  font-family: var(--b2-font-ui);
  font-size: 0.9rem; font-weight: 600;
  color: var(--b2-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- SECTIONS ---- */
.b2-modal-section {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 18px 18px;
  border: 1px solid var(--b2-hairline);
  border-radius: 12px;
  background: rgba(8, 22, 42, 0.4);
}
.b2-modal-section-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
}
.b2-modal-section-label {
  font-family: var(--b2-font-mono);
  font-size: 0.58rem; letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--b2-gold);
  font-weight: 600;
}

/* ---- MODEL READ PILLS + BODY ---- */
.b2-modal-read-pills {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.b2-modal-pill {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-family: var(--b2-font-ui);
  font-size: 0.68rem; letter-spacing: 1.2px;
  text-transform: uppercase; font-weight: 600;
  border: 1px solid var(--b2-hairline);
  background: rgba(255, 255, 255, 0.03);
  color: var(--b2-ink-soft);
}
.b2-modal-pill-strength {
  border-color: rgba(201, 162, 74, 0.3);
  background: rgba(201, 162, 74, 0.08);
  color: var(--b2-gold);
}
.b2-modal-pill-play-playable,
.b2-modal-pill-play-strong,
.b2-modal-pill-play-solid {
  border-color: rgba(47, 161, 104, 0.45);
  background: rgba(47, 161, 104, 0.1);
  color: var(--b2-green-on);
}
.b2-modal-pill-play-not_playable {
  border-color: rgba(184, 58, 58, 0.45);
  background: rgba(184, 58, 58, 0.1);
  color: #E87171;
}
.b2-modal-read-body {
  font-family: var(--b2-font-ui);
  font-size: 0.88rem; line-height: 1.5;
  color: var(--b2-ink-soft);
  margin: 0;
}
.b2-modal-read-foot {
  font-family: var(--b2-font-ui);
  font-size: 0.78rem; line-height: 1.5;
  color: var(--b2-ink-mute);
  margin: 0;
}

/* ---- STATS GRID ---- */
.b2-modal-stats {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.b2-modal-stat {
  display: flex; flex-direction: column; gap: 4px;
  padding: 11px 13px;
  border: 1px solid var(--b2-hairline);
  border-radius: 10px;
  background: rgba(4, 14, 28, 0.5);
}
.b2-modal-stat-hero {
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.1) 0%, rgba(8, 22, 42, 0.5) 100%);
  border-color: var(--b2-hairline-gold);
}
.b2-modal-stat-label {
  font-family: var(--b2-font-mono);
  font-size: 0.56rem; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b2-ink-dim);
  font-weight: 600;
}
.b2-modal-stat-value {
  font-family: var(--b2-font-num);
  font-size: 1.1rem; font-weight: 600;
  color: var(--b2-ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.b2-modal-stat-hero .b2-modal-stat-value { font-size: 1.35rem; }
/* Line Move cell shows "+120 → +125" which is longer than a bare
   number; ease the font size so it doesn't overflow the narrow cell. */
.b2-modal-stat-value-move { font-size: 0.9rem !important; letter-spacing: 0; }

/* ---- MARKET CHECK ---- */
.b2-modal-open-book {
  font-family: var(--b2-font-ui);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--b2-gold);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--b2-hairline-gold);
  transition: all .18s ease;
}
.b2-modal-open-book:hover {
  background: rgba(201, 162, 74, 0.1);
  border-color: var(--b2-gold);
}
.b2-modal-best {
  display: flex; justify-content: space-between; align-items: center;
  gap: 14px;
  padding: 13px 16px;
  border: 1px solid var(--b2-hairline-gold);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.08) 0%, rgba(8, 22, 42, 0.4) 100%);
}
.b2-modal-best-copy { display: flex; flex-direction: column; gap: 4px; }
.b2-modal-best-label {
  font-family: var(--b2-font-mono);
  font-size: 0.56rem; letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b2-ink-mute);
  font-weight: 600;
}
.b2-modal-best-value {
  font-family: var(--b2-font-ui);
  font-size: 0.96rem; font-weight: 600;
  color: var(--b2-ink);
}
.b2-modal-best-edge {
  font-family: var(--b2-font-num);
  font-size: 1.2rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.b2-modal-books {
  display: flex; flex-direction: column;
  gap: 6px;
}
/* Inherit book row styling from existing dashboard-book-row but retint. */
.b2-modal-books .dashboard-book-row {
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid var(--b2-hairline);
  background: rgba(4, 14, 28, 0.4);
}
.b2-modal-books .dashboard-book-row.is-current {
  border-color: var(--b2-hairline-gold);
  background: rgba(201, 162, 74, 0.06);
}
.b2-modal-books .dashboard-book-name {
  font-family: var(--b2-font-ui); font-weight: 600;
  color: var(--b2-ink); font-size: 0.9rem;
}
.b2-modal-books .dashboard-book-odds {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  color: var(--b2-ink); font-weight: 600;
}
.b2-modal-books .dashboard-book-edge {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.b2-modal-books .dashboard-book-link {
  font-family: var(--b2-font-ui);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase;
  color: var(--b2-gold);
}
.b2-modal-books .dashboard-books-empty {
  padding: 12px;
  font-size: 0.82rem;
  color: var(--b2-ink-mute);
  text-align: center;
  border: 1px dashed var(--b2-hairline);
  border-radius: 8px;
  background: rgba(4, 14, 28, 0.3);
}

/* ---- FREE GATE ---- */
.b2-modal-gate {
  border-color: var(--b2-hairline-gold);
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.08) 0%, rgba(8, 22, 42, 0.4) 100%);
}
.b2-modal-gate-body {
  font-family: var(--b2-font-ui);
  font-size: 0.88rem; line-height: 1.5;
  color: var(--b2-ink-soft);
  margin: 0;
}
.b2-modal-gate-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.b2-modal-gate-list span {
  padding: 5px 11px;
  font-family: var(--b2-font-ui);
  font-size: 0.72rem; font-weight: 500;
  border: 1px solid var(--b2-hairline);
  border-radius: 999px;
  color: var(--b2-ink-soft);
  background: rgba(255, 255, 255, 0.02);
}
.b2-modal-gate-actions { display: flex; gap: 10px; }
.b2-modal-gate-btn {
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--b2-gold);
  color: var(--b2-navy-base);
  font-family: var(--b2-font-ui);
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .18s ease;
}
.b2-modal-gate-btn:hover { background: var(--b2-gold-light); }

/* ---- Responsive ---- */
@media (max-width: 620px) {
  .b2-modal-shell { padding: 20px 18px 22px; gap: 14px; }
  .b2-modal-head {
    flex-direction: column; align-items: flex-start;
    padding-right: 40px;
  }
  .b2-modal-head-right { width: 100%; }
  .b2-modal-context { grid-template-columns: 1fr; }
  .b2-modal-stats { grid-template-columns: 1fr; }
  .b2-modal-best { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   END — Bethics v1.1 additive block
   ========================================================================= */

/* =========================================================================
   Parlay Calculator — shared styles
   Lifted from profile.html's inline <style> block on 2026-04-24 so profile
   and any future parlay surface render from one source. parlay.html still
   has its own inline duplicate today; dedupe in a follow-up pass.
   ========================================================================= */
.parlay-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.parlay-tab {
  background: transparent;
  color: var(--white-muted);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  font-size: 0.85rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.parlay-tab:hover { color: var(--white); }
.parlay-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* Outer tab row for the Profile section (Tracked Bets | Parlay Calculator). */
.profile-section-tabs { margin-bottom: 16px; }

/* Intro block above the in-profile calculator. */
.profile-parlay-intro {
  padding: 4px 2px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}

/* Parlay meta container — houses the single-book lock banner (when set)
   and the meta row (book / legs / reset). Stacks them so the banner sits
   above the row for obvious single-book-slip messaging. */
.parlay-meta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
  font-family: var(--b2-font-ui);
  color: var(--b2-ink-soft);
}
.parlay-meta:empty { display: none; }

.parlay-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 860px) {
  .parlay-grid { grid-template-columns: 1fr; }
}

.parlay-picker { padding: 20px; }
.parlay-slip { padding: 20px; }

/* Onboarding hints — subtle, premium, no clutter. */
.parlay-hero-hint {
  margin-top: 10px;
  color: var(--white-dim);
  font-size: 0.92rem;
  letter-spacing: 0.3px;
}
.parlay-picker-hint {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: var(--white-muted);
  letter-spacing: 0.3px;
}

/* Add button: slightly heavier weight so the primary action reads. */
.parlay-picker-row-action .btn {
  min-width: 72px;
  font-weight: 800;
  letter-spacing: 0.6px;
}

/* Slip empty state — two-line headline + helper. */
.parlay-slip-empty {
  padding: 28px 12px;
  text-align: center;
  line-height: 1.5;
}
.parlay-slip-empty-title {
  color: var(--white-muted);
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 6px;
}
.parlay-slip-empty-help {
  color: var(--white-dim);
  font-size: 0.82rem;
}

.parlay-picker-list,
.parlay-slip-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 4px;
  margin-top: 14px;
}

/* --- Parlay rows: premium b2-card treatment (upgraded 2026-04-24;
   compacted 2026-04-24 so more legs fit above the fold without scroll) ---
   Left side (eligible legs) is interactive: hover lift + hairline-gold.
   Right side (your slip) is stronger: gold accent bar + soft gold wash,
   reads "locked in". Both sides share the same navy-gradient surface
   and the same stat grid so the visual system stays coherent. */
.parlay-picker-row,
.parlay-slip-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 12px;
  background: linear-gradient(165deg, var(--b2-navy-card-hi) 0%, var(--b2-navy-card) 45%, #0A1B33 100%);
  border: 1px solid var(--b2-hairline);
  border-radius: 12px;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.02) inset;
  transition: border-color 0.18s ease, box-shadow 0.22s ease,
    transform 0.22s cubic-bezier(.2,.6,.2,1);
  font-family: var(--b2-font-ui);
  color: var(--b2-ink-soft);
  box-sizing: border-box;
}
.parlay-picker-row:hover {
  border-color: var(--b2-hairline-gold);
  box-shadow:
    0 12px 28px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.03) inset;
  transform: translateY(-1px);
}
.parlay-picker-row-head,
.parlay-slip-row-head {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 18px;
}
/* Picker head now carries title + odds inline with the tier + book —
   flex:1 on the title claims the middle, odds sits before book on the
   right cluster. No wrap: ellipsis on the title if it overflows. */
.parlay-picker-row-head {
  justify-content: flex-start;
  flex-wrap: nowrap;
}
.parlay-picker-row-head .parlay-picker-row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--b2-ink);
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.2;
  letter-spacing: -0.008em;
  margin: 0;
}
.parlay-picker-row-head .parlay-picker-row-odds {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--b2-ink);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.parlay-picker-row-head .parlay-picker-row-book {
  margin-left: 0;
  flex-shrink: 0;
}
.parlay-slip-row-head   { justify-content: flex-start; }

.parlay-tier-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 26px;
  height: 22px;
  padding: 0 9px;
  border-radius: 100px;
  font-family: var(--b2-font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid transparent;
  background: rgba(240, 236, 226, 0.04);
  color: var(--b2-ink-mute);
}
.parlay-tier-badge.parlay-tier-S {
  color: var(--b2-tier-s);
  background: var(--b2-tier-s-soft);
  border-color: var(--b2-tier-s-edge);
}
.parlay-tier-badge.parlay-tier-A {
  color: var(--b2-tier-a);
  background: var(--b2-tier-a-soft);
  border-color: var(--b2-tier-a-edge);
}
.parlay-tier-badge.parlay-tier-B {
  color: var(--b2-tier-b);
  background: var(--b2-tier-b-soft);
  border-color: var(--b2-tier-b-edge);
}
.parlay-tier-badge.parlay-tier-C {
  color: var(--b2-tier-c);
  background: var(--b2-tier-c-soft);
  border-color: var(--b2-tier-c-edge);
}
.parlay-tier-badge.parlay-tier-D {
  color: var(--b2-tier-d);
  background: var(--b2-tier-d-soft);
  border-color: var(--b2-tier-d-edge);
}
.parlay-tier-badge.parlay-tier-F {
  color: var(--b2-tier-f);
  background: var(--b2-tier-f-soft);
  border-color: var(--b2-tier-f-edge);
}
/* Pick'em sport-filter chip row above the picker (binder § Sport
   filter, added 2026-04-25). Visible only when Pick'em mode renders
   2+ sports; chip set is derived from the live eligible legs so a
   clickable chip never produces zero results. */
.parlay-sport-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 12px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--b2-hairline);
}
.parlay-sport-chip {
  font-family: var(--b2-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--b2-hairline);
  background: transparent;
  color: var(--b2-ink-soft);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.parlay-sport-chip:hover {
  border-color: var(--b2-gold-faint);
  color: var(--b2-ink);
}
.parlay-sport-chip.is-active {
  border-color: var(--b2-gold);
  color: var(--b2-gold);
  background: rgba(201, 162, 74, 0.08);
}

/* Pick'em-mode-specific disclaimer (binder § Pick'em-mode-specific
   disclaimer, added 2026-04-25). Sits directly beneath the parlay-
   variance line — same muted treatment so it reads as a stacked
   secondary note, not a fresh primary statement. */
.parlay-pickem-disclaimer {
  font-size: 0.74rem;
  line-height: 1.4;
  color: var(--b2-ink-mute);
  margin: 8px 0 0 0;
  padding: 0;
  font-style: italic;
}

/* --------------------------------------------------------------
   Generic PP (PrizePicks) eligibility pill — inline variant.
   Used in:
     - Sports View row titles (dashboard.html:renderSportsViewRow)
     - Bet detail modal Current Line cell (dashboard.html:renderDetailBodyB2)
     - Parlay picker row head (parlay-controller.js:pickerRowHtml)
   Top Edges cards use the absolute-positioned
   .dashboard-bet-card-pp-badge variant (corner placement).
   -------------------------------------------------------------- */
.b2-pp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 16px;
  padding: 0 7px;
  font-family: var(--b2-font-mono);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--b2-gold);
  background: rgba(201, 162, 74, 0.08);
  border: 1px solid var(--b2-gold-faint);
  border-radius: 100px;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ----------------------------------------------------------------
   Pick'em section inside the bet-detail modal (2026-04-24).
   Rendered only when the pick has exact_match + app === prizepicks.
   Distinct from the Sportsbook Model Read / Market Check sections
   via a gold-wash surface + "Exact line match" tag.
   ---------------------------------------------------------------- */
.b2-modal-pickem-section {
  position: relative;
  border: 1px solid var(--b2-gold-faint);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(201, 162, 74, 0.05) 0%, rgba(201, 162, 74, 0) 60%),
    rgba(6, 17, 31, 0.35);
  padding: 14px 16px;
}
.b2-modal-pickem-section .b2-modal-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.b2-modal-pickem-badge {
  margin-left: 0;
}
.b2-modal-title-badge {
  margin-left: 8px;
  vertical-align: middle;
}
.b2-modal-pickem-tag {
  font-family: var(--b2-font-mono);
  font-size: 0.58rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--b2-gold-light);
  font-weight: 600;
  margin: 0 0 10px;
}
.b2-modal-stat-value-muted {
  color: var(--b2-ink-mute) !important;
  font-style: italic;
  font-weight: 500 !important;
}

.parlay-picker-row-book {
  font-family: var(--b2-font-mono);
  color: var(--b2-ink-mute);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  margin-left: auto;
}

.parlay-slip-row-title {
  color: var(--b2-ink);
  font-weight: 700;
  letter-spacing: -0.008em;
  margin: 0;
}

.parlay-picker-row-matchup,
.parlay-slip-row-matchup {
  font-size: 0.74rem;
  color: var(--b2-ink-soft);
  letter-spacing: 0.2px;
  line-height: 1.25;
}
.parlay-slip-row-matchup { font-size: 0.8rem; line-height: 1.3; }
.parlay-row-odds {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  color: var(--b2-ink);
  font-weight: 600;
  letter-spacing: 0;
}

.parlay-slip-row-odds {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--b2-ink);
  letter-spacing: -0.01em;
}

/* Compact circular × remove control. Sits in the slip-row head inline
   with tier + odds, pushed to the far right by margin-left:auto.
   Replaces the full-width "Remove" button that used to occupy its own
   row under the matchup line — saves ~28px of vertical space per leg. */
.parlay-slip-row-remove {
  margin-left: auto;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--b2-hairline);
  border-radius: 50%;
  color: var(--b2-ink-mute);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.15s ease, border-color 0.15s ease,
    background 0.15s ease, box-shadow 0.2s ease;
}
.parlay-slip-row-remove:hover {
  color: var(--b2-tier-f);
  border-color: rgba(198, 75, 71, 0.5);
  background: rgba(198, 75, 71, 0.08);
  box-shadow: 0 0 12px rgba(198, 75, 71, 0.18);
}
.parlay-slip-row-remove:focus-visible {
  outline: none;
  border-color: rgba(198, 75, 71, 0.6);
  box-shadow: 0 0 0 3px rgba(198, 75, 71, 0.14);
}
.parlay-slip-row-remove:active {
  transform: scale(0.94);
}

/* Stats + Add button share the same row — stats on the left take the
   remaining width, button pins to the right. A hairline separates the
   bottom row from the matchup / title content above. */
.parlay-picker-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 5px;
  margin-top: 2px;
  border-top: 1px solid var(--b2-hairline);
}
.parlay-picker-row-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.parlay-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.parlay-stat-label {
  font-family: var(--b2-font-mono);
  font-size: 0.54rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--b2-ink-mute);
  font-weight: 600;
}
.parlay-stat-value {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--b2-ink);
  line-height: 1;
  letter-spacing: -0.01em;
}
.parlay-stat-value.parlay-stat-edge     { color: var(--b2-gold-light); }
.parlay-stat-value.parlay-stat-negative { color: var(--b2-tier-f); }

/* Tier-band edge color per prompt-parlay-calculator-v1.md
   § Edge-color coordination (2026-04-24). The combined-output edge stat
   uses the same scale based on the slip's combined edge percentage; the
   classes are reused on .parlay-combined-grid > div > strong. True /
   Implied stats are deliberately tier-neutral — only Edge gets color.

   2026-04-25: S band uses --b2-tier-s (#E8C46A) — the same brighter gold
   the S-tier badge uses — instead of the general --b2-gold (#C9A24A)
   which reads orange-y on dark surfaces. A subtle drop-shadow glow gives
   the number visual weight matching the badge's emphasis without going
   full b2-shimmer-gold animation. Scope: parlay edge stat only — does
   NOT change --b2-gold globally (logos, headers, etc unaffected). */
.parlay-stat-value.parlay-stat-edge-s,
.parlay-combined-grid strong.parlay-stat-edge-s {
  color: var(--b2-tier-s);
  text-shadow: 0 0 10px rgba(232, 196, 106, 0.32);
}
.parlay-stat-value.parlay-stat-edge-a,
.parlay-combined-grid strong.parlay-stat-edge-a { color: var(--b2-green-on); }
.parlay-stat-value.parlay-stat-edge-b,
.parlay-combined-grid strong.parlay-stat-edge-b { color: var(--b2-green-soft); }
.parlay-stat-value.parlay-stat-edge-c,
.parlay-combined-grid strong.parlay-stat-edge-c { color: var(--b2-ink-soft); }
.parlay-stat-value.parlay-stat-edge-f,
.parlay-combined-grid strong.parlay-stat-edge-f { color: var(--b2-tier-f); }

/* Picker rows are clickable per § Per-leg detail interaction (2026-04-24). */
.parlay-picker-row { cursor: pointer; }
.parlay-picker-row:hover {
  border-color: var(--b2-gold-faint);
  background:
    linear-gradient(180deg, rgba(201, 162, 74, 0.04) 0%, rgba(201, 162, 74, 0) 80%),
    var(--b2-navy-card);
}

/* Per-leg book selector inside the detail modal (binder § Per-leg detail
   interaction). Renders as a labeled grid of book buttons with the
   currently-selected book visually marked. Padding is inset so the
   selector sits flush with the b2-modal-shell card's gutters when both
   are children of #dashboard-detail-content (which has padding: 0). */
.parlay-leg-book-row {
  margin: 0;
  padding: 14px 22px 18px 22px;
  border-top: 1px solid var(--b2-hairline);
}
.parlay-leg-book-row-label {
  font-family: var(--b2-font-mono);
  font-size: 0.6rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--b2-ink-mute);
  margin-bottom: 8px;
}
.parlay-leg-book-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.parlay-leg-book-btn {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid var(--b2-hairline);
  background: transparent;
  color: var(--b2-ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.parlay-leg-book-btn:hover { border-color: var(--b2-gold-faint); color: var(--b2-ink); }
.parlay-leg-book-btn.is-selected {
  border-color: var(--b2-gold);
  color: var(--b2-gold);
  background: rgba(201, 162, 74, 0.08);
}
.parlay-leg-book-btn-name { font-weight: 600; }
.parlay-leg-book-btn-odds { color: var(--b2-ink-mute); font-weight: 500; }
.parlay-leg-book-btn.is-selected .parlay-leg-book-btn-odds { color: var(--b2-gold); }
.parlay-leg-book-empty {
  font-size: 0.78rem;
  color: var(--b2-ink-mute);
  font-style: italic;
}

.parlay-picker-row-action {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Slip side — gold accent bar + subtle wash, reads "locked in".
   Compacted 2026-04-24 to match picker density; still preserves the
   gold border + wash so hierarchy (scan vs commit) stays obvious. */
.parlay-slip-row {
  position: relative;
  border-color: var(--b2-hairline-gold);
  background:
    linear-gradient(180deg, rgba(201, 162, 74, 0.06) 0%, rgba(201, 162, 74, 0) 48%),
    linear-gradient(165deg, var(--b2-navy-card-hi) 0%, var(--b2-navy-card) 45%, #0A1B33 100%);
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.34),
    0 0 20px rgba(201, 162, 74, 0.06),
    0 1px 0 rgba(255, 220, 140, 0.04) inset;
  gap: 5px;
  padding: 9px 14px 9px 18px;
}
.parlay-slip-row .parlay-slip-row-head { min-height: 18px; }
.parlay-slip-row-title { font-size: 0.95rem; line-height: 1.2; }
.parlay-slip-row-matchup { font-size: 0.76rem; line-height: 1.25; }
.parlay-slip-row::before {
  content: '';
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 3px;
  background: linear-gradient(180deg, transparent 0%, var(--b2-gold) 35%, var(--b2-gold) 65%, transparent 100%);
  border-radius: 0 3px 3px 0;
}
/* .parlay-slip-row-action removed 2026-04-24 — the Remove button moved
   into the head row as a compact icon (.parlay-slip-row-remove above). */

/* Legacy status badge (kept for "Past start" indicator in picker rows). */
.parlay-picker-row-status {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 8px;
  font-family: var(--b2-font-mono);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--b2-ink-mute);
  border: 1px solid var(--b2-hairline);
  border-radius: 100px;
  vertical-align: middle;
}

/* --- Single-book lock banner + disabled picker rows --- */
/* When the slip has ≥1 leg, picker rows whose book doesn't match the slip
   book get `.is-book-locked` from the controller and their Add button
   flips to "Different book" disabled. Dim + grayscale signals unavailable
   without hiding them (user still sees the option exists on that book). */
.parlay-picker-row.is-book-locked {
  opacity: 0.42;
  filter: grayscale(0.45);
  cursor: default;
}
.parlay-picker-row.is-book-locked:hover {
  transform: none;
  border-color: var(--b2-hairline);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.02) inset;
}
.parlay-picker-row.is-book-locked .parlay-picker-row-action .btn {
  pointer-events: none;
}

.parlay-book-lock {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(201, 162, 74, 0.12) 0%, rgba(201, 162, 74, 0.04) 100%);
  border: 1px solid var(--b2-hairline-gold);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--b2-font-mono);
  font-size: 0.66rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--b2-gold-light);
  font-weight: 600;
}
.parlay-book-lock strong {
  font-family: var(--b2-font-hero);
  font-style: italic;
  font-weight: 600;
  color: var(--b2-ink);
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.95rem;
}
.parlay-book-lock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--b2-gold);
  box-shadow: 0 0 10px rgba(201, 162, 74, 0.5);
}

/* Meta row layout. */
.parlay-meta-row {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.parlay-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.parlay-meta-label {
  font-family: var(--b2-font-mono);
  font-size: 0.58rem;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--b2-ink-mute);
  font-weight: 600;
}
.parlay-meta-value {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  color: var(--b2-ink);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.parlay-meta-value-sub {
  color: var(--b2-ink-mute);
  font-weight: 500;
  font-size: 0.82rem;
}
.parlay-meta-row .btn { margin-left: auto; }

/* Combined-math block (2026-04-24 compacted) — tightens the space
   above, around, and below the EV hero so the right side's visual
   density matches the left-side picker. EV size + prominence kept;
   only spacing reduced. */
.parlay-combined {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--b2-hairline);
}
.parlay-combined-headline {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 4px;
  letter-spacing: 0.2px;
}
.parlay-combined-headline.positive { color: var(--b2-green-on); }
.parlay-combined-headline.negative { color: var(--b2-ink-mute); }

.parlay-combined-ev {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -0.02em;
  line-height: 1;
  margin: 0 0 10px;
}
.parlay-combined-ev.positive { color: var(--b2-green-on); }
.parlay-combined-ev.negative { color: var(--b2-tier-f); opacity: 0.9; }

.parlay-combined-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
}
.parlay-combined-grid > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 7px 10px;
  background: rgba(6, 17, 31, 0.55);
  border: 1px solid var(--b2-hairline);
  border-radius: 8px;
}
.parlay-combined-grid span {
  font-family: var(--b2-font-mono);
  font-size: 0.56rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--b2-ink-mute);
  font-weight: 600;
}
.parlay-combined-grid strong {
  font-family: var(--b2-font-num);
  font-variant-numeric: tabular-nums;
  font-size: 0.96rem;
  color: var(--b2-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Track-this-parlay button. Only renders when the slip has >= MIN_LEGS.
   On click, controller writes the slip to tracked bets and flashes
   "Tracked ✓" for 2.5s. */
.parlay-track-row {
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--b2-hairline);
  display: flex;
  justify-content: flex-start;
}
.parlay-track-btn {
  min-width: 180px;
  letter-spacing: 0.4px;
  font-weight: 800;
}
.parlay-track-btn.is-confirmed {
  color: var(--b2-green-on);
  border-color: rgba(47, 161, 104, 0.45);
  background: rgba(47, 161, 104, 0.08);
  cursor: default;
}
/* =========================================================================
   Pick'em mode — Power / Flex sub-toggle + locked state
   Lives inside the combined panel; picker + slip styles are shared with
   Sportsbook mode (legs look the same, "book" reads "PrizePicks" via
   controller normalization).
   ========================================================================= */
.parlay-pickem-submode {
  display: inline-flex;
  gap: 0;
  padding: 3px;
  margin: 0 0 12px;
  background: rgba(6, 17, 31, 0.55);
  border: 1px solid var(--b2-hairline);
  border-radius: 10px;
}
.parlay-pickem-submode-btn {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  padding: 6px 14px;
  font-family: var(--b2-font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--b2-ink-mute);
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.parlay-pickem-submode-btn:hover {
  color: var(--b2-ink-soft);
}
.parlay-pickem-submode-btn.is-active {
  color: var(--b2-gold);
  background: rgba(201, 162, 74, 0.10);
  border-color: var(--b2-gold-faint);
}

/* Locked state — shown when pickem_payouts.json is _verified:false or
   failed to load. No math runs behind this screen. */
.parlay-pickem-locked {
  padding: 22px 20px;
  border: 1px dashed var(--b2-hairline);
  border-radius: 10px;
  background: rgba(6, 17, 31, 0.4);
  text-align: center;
}
.parlay-pickem-locked-headline {
  font-family: var(--b2-font-hero);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--b2-ink);
  letter-spacing: -0.008em;
  margin-bottom: 6px;
}
.parlay-pickem-locked-body {
  color: var(--b2-ink-soft);
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 0;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* Flex-specific grid variant — Flex shows k-hit rows instead of the
   standard 5-cell Sportsbook panel, so allow denser wrapping. */
.parlay-combined-grid.parlay-combined-grid-flex {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

/* Flex Play "deferred to v1.1" placeholder. Same chrome shape as the
   locked-state card so the user gets a familiar on-brand surface; copy
   explains why Flex isn't available yet. Per binder § Pick'em math —
   Flex Play (status: deferred to v1.1) and § Entry type selector. */
.parlay-pickem-flex-placeholder {
  padding: 22px 20px;
  border: 1px dashed var(--b2-hairline);
  border-radius: 10px;
  background: rgba(6, 17, 31, 0.4);
  text-align: left;
}
.parlay-pickem-flex-placeholder-headline {
  font-family: var(--b2-font-hero);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--b2-ink);
  letter-spacing: -0.008em;
  margin-bottom: 8px;
}
.parlay-pickem-flex-placeholder-body {
  color: var(--b2-ink-soft);
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0 0 8px 0;
}
.parlay-pickem-flex-placeholder-body:last-child {
  margin-bottom: 0;
}

/* Per-leg multiplier display + variant chip per binder § Per-leg
   display (revised 2026-04-25 — Path 2 Round 3). The picker and slip
   render these directly under the leg's matchup line for Pick'em-mode
   legs; Sportsbook-mode legs render unchanged.

   .parlay-leg-multiplier — small monospace tag, brand-neutral. The
     numeric value (e.g. "1.73x", "2.00x") is the API-sourced per-leg
     PrizePicks decimal-odds price.

   .parlay-variant-chip — small inline pill with a wash that matches
     the variant's economic shape:
       standard → most muted (same payout shape as the base line)
       goblin   → muted-green wash (easier line, lower target)
       demon    → gold-amber wash (harder line, higher payout)
       unknown  → neutral grey (no standard reference for this leg)
*/
.parlay-picker-row-pickem,
.parlay-slip-row-pickem {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 12px 0;
  margin: 0;
}
.parlay-leg-multiplier {
  font-family: var(--b2-font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--b2-ink);
  background: rgba(240, 236, 226, 0.06);
  border: 1px solid rgba(240, 236, 226, 0.14);
  border-radius: 4px;
  padding: 2px 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.parlay-variant-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--b2-font-base, system-ui, sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 6px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.parlay-variant-chip.is-standard {
  color: var(--b2-ink-soft);
  background: rgba(240, 236, 226, 0.06);
  border-color: rgba(240, 236, 226, 0.18);
}
.parlay-variant-chip.is-goblin {
  color: var(--b2-green-on);
  background: rgba(47, 161, 104, 0.12);
  border-color: rgba(47, 161, 104, 0.32);
}
.parlay-variant-chip.is-demon {
  color: var(--b2-gold-light);
  background: var(--b2-gold-faint);
  border-color: rgba(201, 162, 74, 0.42);
}
.parlay-variant-chip.is-unknown {
  color: var(--b2-ink-mute);
  background: rgba(240, 236, 226, 0.04);
  border-color: rgba(240, 236, 226, 0.12);
}

/* Anchor chip per binder § Per-leg display § Anchor chip (added
   2026-04-26 for the Anchor Policy round). Same pill shape as the
   variant chip so the per-leg "Pick'em decoration" row reads as a
   coherent pair of metadata, but with asymmetric labels — "Anchor:
   Pinnacle" reads as a sharp credential while "Coverage anchor:
   FanDuel" reads as a hedged disclosure, so a user who skims can't
   misread the confidence class.

   Pinnacle → brand-gold wash matching S-tier badge styling.
   FanDuel  → neutral grey, deliberately distinct from sharp gold so
              coverage anchors are visually separable at a glance.
*/
.parlay-anchor-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--b2-font-base, system-ui, sans-serif);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 4px;
  padding: 2px 6px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.parlay-anchor-chip.is-pinnacle {
  color: var(--b2-gold-light);
  background: var(--b2-gold-faint);
  border-color: rgba(201, 162, 74, 0.55);
}
.parlay-anchor-chip.is-fanduel {
  color: var(--b2-ink-soft);
  background: rgba(240, 236, 226, 0.06);
  border-color: rgba(240, 236, 226, 0.22);
}

.parlay-disclaimer,
.parlay-variance-note {
  font-size: 0.78rem;
  color: var(--white-muted);
  line-height: 1.5;
  margin-top: 12px;
}
.parlay-variance-note {
  color: var(--white-dim);
  border-top: 1px dashed var(--border);
  padding-top: 10px;
}

.parlay-empty-state {
  color: var(--white-dim);
  font-size: 0.9rem;
  padding: 28px 12px;
  text-align: center;
  line-height: 1.5;
}

.parlay-upsell {
  margin-top: 14px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(201,162,74,0.08), rgba(31,110,67,0.04));
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  font-size: 0.85rem;
  color: var(--white-muted);
}
.parlay-upsell a { color: var(--gold); font-weight: 700; }

/* Switch-book modal */
.parlay-modal[hidden] { display: none; }
.parlay-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.parlay-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}
.parlay-modal-body {
  position: relative;
  max-width: 440px;
  padding: 24px;
}
.parlay-modal-body h3 {
  margin: 0 0 12px;
  font-size: 1.2rem;
  color: var(--white);
}
.parlay-modal-body p {
  color: var(--white-muted);
  margin-bottom: 20px;
  line-height: 1.5;
}
.parlay-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

/* =========================================================================
   Shared b2 premium utilities
   Added 2026-04-24 so non-dashboard pages can adopt the same card surfaces,
   stat strips, section headers, and grids as dashboard without inventing
   per-page styles. Pure additive — no legacy class renames.
   ========================================================================= */

/* ---------- b2-section: content-column wrapper ------------------------- */
.b2-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 56px 40px;
  box-sizing: border-box;
}
.b2-section-sm { padding: 40px 40px; }
.b2-section-tight { padding: 24px 40px; }
@media (max-width: 780px) {
  .b2-section { padding: 40px 24px; }
  .b2-section-sm { padding: 32px 24px; }
  .b2-section-tight { padding: 20px 24px; }
}

/* ---------- b2-section-head: lightweight marketing-scale header ------- */
.b2-section-head {
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--b2-hairline);
  position: relative;
}
.b2-section-head::after {
  content: ''; position: absolute;
  bottom: -1px; left: 0;
  width: 56px; height: 1px;
  background: var(--b2-gold);
}
.b2-section-kicker {
  font-size: 0.68rem; letter-spacing: 3.5px;
  text-transform: uppercase; color: var(--b2-gold);
  font-weight: 700; margin: 0 0 12px;
  display: block;
}
.b2-section-title {
  font-family: var(--b2-font-hero);
  font-weight: 800; font-size: 1.7rem;
  line-height: 1.18; letter-spacing: -0.015em;
  color: var(--b2-ink);
  margin: 0 0 8px;
}
.b2-section-title em,
.b2-section-head h2 em {
  font-style: italic; font-weight: 600; color: var(--b2-gold);
}
.b2-section-head h2 {
  font-family: var(--b2-font-hero);
  font-weight: 800; font-size: 1.7rem;
  line-height: 1.18; letter-spacing: -0.015em;
  color: var(--b2-ink);
  margin: 0 0 8px;
}
.b2-section-sub {
  color: var(--b2-ink-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
  max-width: 720px;
}

.b2-section-head-center {
  text-align: center;
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 36px;
}
.b2-section-head-center::after {
  left: 50%; transform: translateX(-50%);
}
.b2-section-head-center .b2-section-sub { margin: 0 auto; }

/* ---------- b2-card: premium generic content surface ------------------ */
.b2-card {
  position: relative;
  background: linear-gradient(165deg, var(--b2-navy-card-hi) 0%, var(--b2-navy-card) 45%, #0A1B33 100%);
  border: 1px solid var(--b2-hairline);
  border-radius: 14px;
  padding: 28px;
  box-shadow:
    0 6px 28px rgba(0, 0, 0, 0.32),
    0 1px 0 rgba(255, 255, 255, 0.02) inset;
  transition: border-color 0.2s ease, box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(.2,.6,.2,1);
  color: var(--b2-ink-soft);
  box-sizing: border-box;
}
.b2-card:hover {
  border-color: var(--b2-hairline-gold);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, 0.38),
    0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

/* Interactive variant — adds upward lift for clickable cards. */
.b2-card-interactive { cursor: pointer; }
.b2-card-interactive:hover { transform: translateY(-2px); }

/* Gold accent variant — for the canonical "Go Pro" / primary upsell card. */
.b2-card-gold { border-color: var(--b2-gold-faint); }
.b2-card-gold:hover { border-color: var(--b2-gold); }

/* Padding variants. */
.b2-card-sm  { padding: 20px 22px; }
.b2-card-lg  { padding: 36px 40px; }

/* Left-accent bar variants — for best/worst, status panels, callouts. */
.b2-card-accent { overflow: hidden; }
.b2-card-accent::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--b2-hairline-gold);
}
.b2-card-accent-green::before { background: var(--b2-green-on); }
.b2-card-accent-red::before   { background: var(--b2-tier-f); }
.b2-card-accent-gold::before  { background: var(--b2-gold); }

/* ---------- b2-card-label / title / sub content atoms ----------------- */
/* Drop-in replacements for the legacy .section-label + <h3> + <p> trio
   inside a .b2-card when you want full b2 typography (gold mono kicker,
   serif title, soft ink body). Use independently — legacy inline h3/p
   inside .b2-card keep working because these are classes, not tag rules. */
.b2-card-label {
  font-family: var(--b2-font-mono);
  font-size: 0.62rem; letter-spacing: 2px;
  text-transform: uppercase; color: var(--b2-gold);
  font-weight: 600; margin: 0 0 12px;
  display: block;
}
.b2-card-title {
  font-family: var(--b2-font-hero);
  font-weight: 700; font-size: 1.25rem;
  line-height: 1.22; letter-spacing: -0.008em;
  color: var(--b2-ink);
  margin: 0 0 10px;
}
.b2-card-title em { font-style: italic; font-weight: 600; color: var(--b2-gold); }
.b2-card-sub {
  color: var(--b2-ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0 0 10px;
}
.b2-card-sub:last-child { margin-bottom: 0; }

/* ---------- b2-stats column modifiers (4, 5 cells) -------------------- */
/* Base .b2-stats-inner is hard-coded to 8 columns for the dashboard.
   These modifiers let non-dashboard pages reuse the same chrome for 4- or
   5-cell stat strips without forking. Responsive falls back to 2-up at
   mobile, matching dashboard behavior. */
.b2-stats-inner.b2-stats-5 { grid-template-columns: repeat(5, 1fr); }
.b2-stats-inner.b2-stats-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
  .b2-stats-inner.b2-stats-5 { grid-template-columns: repeat(5, 1fr); }
  .b2-stats-inner.b2-stats-4 { grid-template-columns: repeat(4, 1fr); }
  .b2-stats-inner.b2-stats-5 .b2-stat { border-bottom: none; }
  .b2-stats-inner.b2-stats-4 .b2-stat { border-bottom: none; }
  .b2-stats-inner.b2-stats-5 .b2-stat:nth-child(4n) { border-right: 1px solid var(--b2-hairline); }
  .b2-stats-inner.b2-stats-4 .b2-stat:nth-child(4n) { border-right: none; }
  .b2-stats-inner.b2-stats-5 .b2-stat:nth-child(5n) { border-right: none; }
  .b2-stats-inner.b2-stats-5 .b2-stat:nth-last-child(-n+4) { border-bottom: none; }
}
@media (max-width: 780px) {
  .b2-stats-inner.b2-stats-5,
  .b2-stats-inner.b2-stats-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .b2-stats-inner.b2-stats-5 .b2-stat,
  .b2-stats-inner.b2-stats-4 .b2-stat {
    border-right: 1px solid var(--b2-hairline);
    border-bottom: 1px solid var(--b2-hairline);
  }
  .b2-stats-inner.b2-stats-5 .b2-stat:nth-child(2n),
  .b2-stats-inner.b2-stats-4 .b2-stat:nth-child(2n) { border-right: none; }
  .b2-stats-inner.b2-stats-5 .b2-stat:nth-last-child(-n+2),
  .b2-stats-inner.b2-stats-4 .b2-stat:nth-last-child(-n+2) { border-bottom: none; }
  .b2-stats-inner.b2-stats-5 .b2-stat:last-child:nth-child(odd),
  .b2-stats-inner.b2-stats-4 .b2-stat:last-child:nth-child(odd) { grid-column: span 2; }
}

/* ---------- b2-grid utility grid --------------------------------------- */
.b2-grid { display: grid; gap: 20px; align-items: stretch; }
.b2-grid-tight { gap: 14px; }
.b2-grid-loose { gap: 28px; }
.b2-grid-2 { grid-template-columns: repeat(2, 1fr); }
.b2-grid-3 { grid-template-columns: repeat(3, 1fr); }
.b2-grid-4 { grid-template-columns: repeat(4, 1fr); }
.b2-grid-auto { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.b2-grid-asym-12 { grid-template-columns: 1.2fr 1fr; }
.b2-grid-asym-21 { grid-template-columns: 2fr 1fr; }
@media (max-width: 980px) {
  .b2-grid-3, .b2-grid-4, .b2-grid-asym-12, .b2-grid-asym-21 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 620px) {
  .b2-grid-2, .b2-grid-3, .b2-grid-4,
  .b2-grid-asym-12, .b2-grid-asym-21 {
    grid-template-columns: 1fr;
  }
}

/* ---------- b2-tag: uppercase pill for Free/Pro/Elite labels ---------- */
.b2-tag {
  display: inline-block;
  padding: 5px 10px;
  font-size: 0.65rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--b2-ink-soft);
  background: rgba(240, 236, 226, 0.04);
  border: 1px solid var(--b2-hairline);
  border-radius: 100px;
}
.b2-tag-free { color: var(--b2-ink-mute); }
.b2-tag-pro  { color: var(--b2-gold); border-color: var(--b2-gold-faint); background: rgba(201,162,74,0.06); }
.b2-tag-elite { color: var(--b2-tier-s); border-color: var(--b2-tier-s-edge); background: rgba(232,196,106,0.06); }

/* ---------- profile-page typography upgrade --------------------------- */
/* Scoped refresh so every section-label on profile.html reads as a b2-style
   mono gold kicker, and every h3 reads as a serif product-title. No markup
   changes required. */
.profile-page .section-label {
  font-family: var(--b2-font-mono);
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b2-gold);
  font-weight: 600;
}
.profile-page .profile-overview-card h3,
.profile-page .profile-record-card h3,
.profile-page .profile-card h3 {
  font-family: var(--b2-font-hero);
  font-weight: 700;
  font-size: 1.28rem;
  line-height: 1.22;
  letter-spacing: -0.008em;
  color: var(--b2-ink);
}
.profile-page h3 em {
  font-style: italic;
  font-weight: 600;
  color: var(--b2-gold);
}
.profile-page .profile-overview-card p,
.profile-page .profile-record-card p,
.profile-page .profile-card p {
  color: var(--b2-ink-soft);
  line-height: 1.55;
}
.profile-page .profile-parlay-intro h3 {
  font-family: var(--b2-font-hero);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--b2-ink);
  line-height: 1.25;
}
.profile-page .profile-parlay-intro p {
  color: var(--b2-ink-soft);
}

/* =========================================================================
   Learn module cards — interactive polish + modal
   Added 2026-04-24. Cards become clickable with premium hover lift; each
   opens a singleton learn-modal with full body (free) or teaser + upgrade
   CTA (pro / elite locked).
   ========================================================================= */

/* Card polish on top of the globally-upgraded .card surface. */
.learn-module-card {
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.25s ease,
    transform 0.25s cubic-bezier(.2,.6,.2,1);
  overflow: hidden;
}
.learn-module-card:hover {
  transform: translateY(-3px);
  border-color: var(--b2-hairline-gold);
  box-shadow:
    0 16px 42px rgba(0, 0, 0, 0.45),
    0 1px 0 rgba(255, 255, 255, 0.04) inset;
}

/* Stronger serif + italic accent on module titles. */
.learn-module-card h3 {
  font-family: var(--b2-font-hero);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--b2-ink);
}
.learn-module-card h3 em {
  font-style: italic;
  font-weight: 600;
  color: var(--b2-gold);
}

/* "Read the full module →" hint — only on free, unlocked cards. Locked
   variants carry their own overlay affordance. */
.learn-module-readmore {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--b2-gold);
  font-family: var(--b2-font-mono);
  font-size: 0.6rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
  border-top: 1px solid var(--b2-hairline);
  transition: color 0.15s ease;
}
.learn-module-card:hover .learn-module-readmore {
  color: var(--b2-gold-light);
}

/* ---- learn-modal -------------------------------------------------- */
.learn-modal[hidden] { display: none; }
.learn-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.learn-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 10, 20, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  cursor: pointer;
}
.learn-modal-shell {
  position: relative;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  background: linear-gradient(165deg, var(--b2-navy-card-hi) 0%, var(--b2-navy-card) 45%, #0A1B33 100%);
  border: 1px solid var(--b2-hairline-gold);
  border-radius: 16px;
  padding: 40px 44px;
  box-shadow:
    0 32px 96px rgba(0, 0, 0, 0.65),
    0 0 32px rgba(201, 162, 74, 0.05),
    0 1px 0 rgba(255, 220, 140, 0.06) inset;
}
.learn-modal-shell::before {
  /* Gold accent bar top-left, matching the sport-banner + b2-hero pattern. */
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 72px; height: 2px;
  background: var(--b2-gold);
  border-top-left-radius: 16px;
}
.learn-modal-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  background: transparent;
  border: 1px solid var(--b2-hairline);
  border-radius: 50%;
  color: var(--b2-ink-mute);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.learn-modal-close:hover {
  color: var(--b2-ink);
  border-color: var(--b2-hairline-gold);
  background: rgba(201, 162, 74, 0.06);
}
.learn-modal-kicker {
  font-family: var(--b2-font-mono);
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--b2-gold);
  font-weight: 600;
  margin: 0 0 14px;
}
.learn-modal h2 {
  font-family: var(--b2-font-hero);
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--b2-ink);
  margin: 0 0 22px;
}
.learn-modal h2 em {
  font-style: italic;
  font-weight: 600;
  color: var(--b2-gold);
}
.learn-modal-body {
  color: var(--b2-ink-soft);
  font-size: 0.98rem;
  line-height: 1.7;
}
.learn-modal-body p {
  margin: 0 0 16px;
}
.learn-modal-body p:last-child { margin-bottom: 0; }
.learn-modal-body strong { color: var(--b2-ink); font-weight: 700; }
.learn-modal-body ul {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.learn-modal-body ul li {
  position: relative;
  padding-left: 18px;
  color: var(--b2-ink-soft);
  font-size: 0.94rem;
  line-height: 1.55;
}
.learn-modal-body ul li::before {
  content: '';
  position: absolute;
  top: 9px; left: 0;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--b2-gold);
  box-shadow: 0 0 8px rgba(201, 162, 74, 0.45);
}
.learn-modal-upgrade {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--b2-hairline-gold);
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.learn-modal-upgrade-note {
  font-family: var(--b2-font-hero);
  font-style: italic;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--b2-ink-mute);
  margin: 0;
}

/* Body scroll lock while modal is open. */
body.learn-modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .learn-modal { padding: 16px; }
  .learn-modal-shell { padding: 32px 24px; max-height: 88vh; }
  .learn-modal h2 { font-size: 1.55rem; }
}

/* =========================================================================
   Dashboard Parlay Calculator tab — wraps the shared .parlay-* atoms in a
   dashboard-scoped panel. The outer root sits beside dashboard-board-
   container and is toggled visible only when the Parlay Calculator tab
   is active (see render() in dashboard.html).
   ========================================================================= */
.dashboard-parlay-root {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}
@media (max-width: 780px) {
  .dashboard-parlay-root { padding: 0 24px; }
}
.dashboard-parlay-intro {
  padding: 4px 2px 18px;
  border-bottom: 1px solid var(--b2-hairline);
  margin-bottom: 22px;
}
.dashboard-parlay-title {
  font-family: var(--b2-font-hero);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--b2-ink);
  margin: 0 0 8px;
}
.dashboard-parlay-title em {
  font-style: italic;
  font-weight: 600;
  color: var(--b2-gold);
}
.dashboard-parlay-sub {
  color: var(--b2-ink-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
  max-width: 680px;
}

/* Free-tier locked state — centered upsell card, no calculator chrome. */
.dashboard-parlay-lock {
  display: flex;
  justify-content: center;
  padding: 24px 0 48px;
}
/* The render path sets `parlayLock.hidden = true` for Pro/Elite viewers,
   but `display: flex` above overrides the UA `[hidden] { display: none }`
   rule because author CSS beats UA. Restore the hidden behavior with a
   matching-specificity selector so Pro users actually see the calculator
   instead of the lock overlay (2026-04-24). */
.dashboard-parlay-lock[hidden] {
  display: none;
  /* Defense-in-depth: even if a future author rule re-enables display
     (e.g., debug `display: block !important`), a hidden lock must never
     intercept pointer events on the calculator beneath it. */
  pointer-events: none;
}

/* ---- Dev / runtime diagnostics (?debugParlay=1) ---- */
.dashboard-parlay-debug { padding: 0 0 16px; }
.dashboard-parlay-debug[hidden] { display: none; }
.dashboard-parlay-debug-card {
  border: 1px solid var(--b2-gold-faint);
  background: rgba(201, 162, 74, 0.05);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--b2-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.78rem;
  color: var(--b2-ink, inherit);
  overflow-x: auto;
}
.dashboard-parlay-debug-card pre {
  margin: 8px 0 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.74rem;
}
.dashboard-parlay-bridge-fail { padding: 0 0 12px; }
.dashboard-parlay-bridge-fail[hidden] { display: none; }
.dashboard-parlay-bridge-fail-card {
  border: 1px solid #B83A3A;
  background: rgba(184, 58, 58, 0.08);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.85rem;
}
.dashboard-parlay-lock-card {
  max-width: 520px;
  width: 100%;
  text-align: center;
  padding: 48px 40px;
}
.dashboard-parlay-lock-card .b2-card-label {
  margin-bottom: 16px;
}
.dashboard-parlay-lock-card .b2-card-title {
  font-size: 1.6rem;
  margin-bottom: 14px;
}
.dashboard-parlay-lock-card .b2-card-sub {
  margin: 0 auto 28px;
  max-width: 380px;
}