/* ==========================================================================
   ModricPredict — Premium Dark Theme
   Deep forest-obsidian palette tailored for elite sports betting UX.
   ========================================================================== */

:root[data-theme="dark"],
html[data-theme="dark"],
body.dark-theme,
[data-theme="dark"] {
  /* Surface & Base Tones */
  --bg: #0A130E;
  --card: #112018;
  --card-elevated: #16291F;
  --card-subtle: #0D1B14;
  --card-border: rgba(255, 255, 255, 0.08);

  /* Typography / Ink */
  --ink: #F1F5F2;
  --muted: #9BB0A5;
  --faint: #5D7568;

  /* Structural Borders */
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.05);

  /* Brand Greens */
  --green-900: #051C12;
  --green-800: #08281B;
  --green-700: #0C5C3C;
  --green-600: #159966;
  --green-100: #132D20;
  --green-50: #0D2218;

  /* Brand Lemon Accent */
  --accent: #C7F04B;
  --accent-ink: #06301F;

  /* Status Colors */
  --red: #EF4444;
  --red-50: rgba(239, 68, 68, 0.14);

  /* Shadows */
  --shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5), 0 2px 6px -1px rgba(0, 0, 0, 0.3);

  /* Apple/Bootstrap Theme overrides */
  --lt-bg: #0A130E;
  --lt-surface: #112018;
  --lt-surface-alt: #16291F;
  --lt-surface-hover: #1A3025;
  --lt-surface-mid: #14251C;
  --lt-surface-dark: #0D1A13;
  --lt-border: rgba(255, 255, 255, 0.08);
  --lt-border-light: rgba(255, 255, 255, 0.05);
  --lt-border-subtle: rgba(255, 255, 255, 0.04);
  --lt-text-900: #F1F5F2;
  --lt-text-800: #F1F5F2;
  --lt-text-700: #D2DED7;
  --lt-text-500: #9BB0A5;
  --lt-text-400: #7A9386;
  --lt-text-300: #5D7568;
  --lt-text-200: #4B6054;
  --lt-text-150: #3C4E44;
  --lt-text-100: #2E3D35;
  --lt-text-50: #16291F;
  --lt-accent: #C7F04B;
  --lt-accent-soft: rgba(199, 240, 75, 0.12);
  --lt-accent-hover: rgba(199, 240, 75, 0.2);
}

/* ── Global Body & Layout ────────────────────────────────────────── */
html[data-theme="dark"] body,
body.dark-theme,
body.dark-theme.modricpredict-theme,
body.dark-theme.light-theme {
  background-color: #0A130E !important;
  color: #F1F5F2 !important;
}

html[data-theme="dark"] a {
  color: inherit;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 {
  color: #F1F5F2;
}

/* ── Topbar & Mobile Nav ─────────────────────────────────────────── */
html[data-theme="dark"] .topbar {
  background: #051A11 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

html[data-theme="dark"] .nav-drop {
  background: #092015 !important;
  border: 1px solid rgba(199, 240, 75, 0.18) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme="dark"] .nav-drop a {
  color: #D1DDD6 !important;
}

html[data-theme="dark"] .nav-drop a:hover {
  background: rgba(199, 240, 75, 0.1) !important;
  color: #C7F04B !important;
}

html[data-theme="dark"] .mobile-nav {
  background: #071E14 !important;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .mobile-nav-link {
  color: #F1F5F2 !important;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .mobile-accordion-trigger {
  color: #F1F5F2 !important;
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .mobile-accordion-content a {
  color: #9BB0A5 !important;
}

html[data-theme="dark"] .mobile-accordion-content a:hover {
  color: #C7F04B !important;
}

/* ── Cards & Surfaces ────────────────────────────────────────────── */
html[data-theme="dark"] .board-card,
html[data-theme="dark"] .pick-card,
html[data-theme="dark"] .stat,
html[data-theme="dark"] .ledger-card,
html[data-theme="dark"] .standings-card,
html[data-theme="dark"] .article-card,
html[data-theme="dark"] .about-card,
html[data-theme="dark"] .about-stat-card,
html[data-theme="dark"] .about-pillar-card,
html[data-theme="dark"] .about-step-item,
html[data-theme="dark"] .card,
html[data-theme="dark"] .vip-card,
html[data-theme="dark"] .fixture-card,
html[data-theme="dark"] .bm-card,
html[data-theme="dark"] .newvp_card {
  background: #112018 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.5), 0 2px 6px -1px rgba(0, 0, 0, 0.3) !important;
  color: #F1F5F2 !important;
}

/* Hover elevations */
html[data-theme="dark"] .stat:hover,
html[data-theme="dark"] .article-card:hover,
html[data-theme="dark"] .about-stat-card:hover,
html[data-theme="dark"] .about-pillar-card:hover {
  border-color: rgba(199, 240, 75, 0.25) !important;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6) !important;
}

/* ── Match Board & Filter Controls ───────────────────────────────── */
html[data-theme="dark"] .board-card {
  background: #0B1711 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .board-head h2 {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .board-sub {
  color: #9BB0A5 !important;
}

html[data-theme="dark"] .board-head-link {
  color: #C7F04B !important;
}

/* Dates */
html[data-theme="dark"] .date {
  background: #112018 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #D2DED7 !important;
}

html[data-theme="dark"] .date span {
  color: #7A9386 !important;
}

html[data-theme="dark"] .date b {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .date:hover {
  background: #193325 !important;
  border-color: rgba(199, 240, 75, 0.3) !important;
}

html[data-theme="dark"] .date[aria-current="page"],
html[data-theme="dark"] .date.active {
  background: #C7F04B !important;
  border-color: #C7F04B !important;
  color: #06301F !important;
}

html[data-theme="dark"] .date[aria-current="page"] span,
html[data-theme="dark"] .date[aria-current="page"] b,
html[data-theme="dark"] .date.active span,
html[data-theme="dark"] .date.active b {
  color: #06301F !important;
}

html[data-theme="dark"] .date-cal,
html[data-theme="dark"] .date-cal-btn {
  background: #112018 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #C7F04B !important;
}

html[data-theme="dark"] .date-cal:hover,
html[data-theme="dark"] .date-cal-btn:hover {
  background: #193325 !important;
  border-color: rgba(199, 240, 75, 0.4) !important;
}

/* Market & Competition Pills */
html[data-theme="dark"] .markets {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .market {
  background: #112018 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #9BB0A5 !important;
}

html[data-theme="dark"] .market:hover {
  background: #193325 !important;
  border-color: rgba(199, 240, 75, 0.3) !important;
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .market[aria-selected="true"],
html[data-theme="dark"] .market.active {
  background: #C7F04B !important;
  border-color: #C7F04B !important;
  color: #06301F !important;
  font-weight: 700 !important;
}

html[data-theme="dark"] .leagues {
  border-bottom: none !important;
  gap: 8px !important;
}

html[data-theme="dark"] .league {
  background: #112018 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #9BB0A5 !important;
  border-radius: 9999px !important;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .league:hover {
  background: #193325 !important;
  border-color: rgba(199, 240, 75, 0.3) !important;
  color: #F1F5F2 !important;
  text-decoration: none !important;
}

html[data-theme="dark"] .league[aria-pressed="true"],
html[data-theme="dark"] .league.active {
  background: #C7F04B !important;
  border-color: #C7F04B !important;
  color: #06301F !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* ── Match Cards & Rows (Board Table) ────────────────────────────── */
html[data-theme="dark"] .table-wrap {
  background: transparent !important;
}

html[data-theme="dark"] .table-head {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: #7A9386 !important;
}

html[data-theme="dark"] .match,
html[data-theme="dark"] .match:nth-child(odd),
html[data-theme="dark"] .match:nth-child(even),
html[data-theme="dark"] .row-match {
  background: #112018 !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  margin: 4px 0 !important;
  color: #F1F5F2 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25) !important;
  transition: all 140ms ease !important;
}

html[data-theme="dark"] .match:hover,
html[data-theme="dark"] .match:nth-child(odd):hover,
html[data-theme="dark"] .match:nth-child(even):hover,
html[data-theme="dark"] .row-match:hover {
  background: #193325 !important;
  border-color: rgba(199, 240, 75, 0.35) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .match .m-time,
html[data-theme="dark"] .row-time,
html[data-theme="dark"] .match-time {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .match .m-date {
  color: #8DA497 !important;
}

html[data-theme="dark"] .match .m-league,
html[data-theme="dark"] .row-league,
html[data-theme="dark"] .match-league {
  color: #8DA497 !important;
}

html[data-theme="dark"] .match .m-team,
html[data-theme="dark"] .match .m-team.home,
html[data-theme="dark"] .match .m-team.away,
html[data-theme="dark"] .row-team,
html[data-theme="dark"] .match-team,
html[data-theme="dark"] .team-name,
html[data-theme="dark"] .pick-team {
  color: #F1F5F2 !important;
  transition: color 140ms ease !important;
}

html[data-theme="dark"] .match:hover .m-team,
html[data-theme="dark"] .match:hover .m-team.home,
html[data-theme="dark"] .match:hover .m-team.away,
html[data-theme="dark"] .row-match:hover .row-team {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .match .m-vs,
html[data-theme="dark"] .match-vs {
  color: #5D7568 !important;
}

html[data-theme="dark"] .match .m-tip {
  color: #F1F5F2 !important;
  font-weight: 700 !important;
}

html[data-theme="dark"] .match .m-odds {
  color: #C7F04B !important;
  font-weight: 700 !important;
}

html[data-theme="dark"] .match .confidence-badge,
html[data-theme="dark"] .match .prob-badge {
  background: rgba(199, 240, 75, 0.16) !important;
  color: #C7F04B !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  transition: all 140ms ease !important;
}

html[data-theme="dark"] .match:hover .confidence-badge,
html[data-theme="dark"] .match:hover .prob-badge {
  background: #C7F04B !important;
  color: #06301F !important;
}

/* Tip & Odds Chips */
html[data-theme="dark"] .tip-pill,
html[data-theme="dark"] .badge-tip {
  background: rgba(199, 240, 75, 0.12) !important;
  border: 1px solid rgba(199, 240, 75, 0.28) !important;
  color: #C7F04B !important;
}

html[data-theme="dark"] .btn-odd,
html[data-theme="dark"] .odds-btn {
  background: #112018 !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .btn-odd:hover,
html[data-theme="dark"] .odds-btn:hover {
  background: #193325 !important;
  border-color: rgba(199, 240, 75, 0.35) !important;
  color: #C7F04B !important;
}

html[data-theme="dark"] .btn-board-view-all,
html[data-theme="dark"] .btn-board-all,
html[data-theme="dark"] .btn-board-banker {
  background: #112018 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .btn-board-view-all:hover,
html[data-theme="dark"] .btn-board-all:hover,
html[data-theme="dark"] .btn-board-banker:hover {
  background: #193325 !important;
  border-color: #C7F04B !important;
  color: #C7F04B !important;
}

/* ── Upcoming Picks Section ──────────────────────────────────────── */
html[data-theme="dark"] .upcoming-card {
  background: #0B1711 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] .upcoming-title {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .upcoming-item {
  background: #112018 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .upcoming-item:hover {
  background: #193325 !important;
  border-color: rgba(199, 240, 75, 0.35) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
}

html[data-theme="dark"] .upcoming-team-name {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .upcoming-time {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .upcoming-date {
  color: #8DA497 !important;
}

html[data-theme="dark"] .upcoming-tip-badge {
  background: #16291F !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .upcoming-conf-badge {
  background: rgba(199, 240, 75, 0.16) !important;
  color: #C7F04B !important;
  font-weight: 700 !important;
}

/* ── Confidence Meters & Status Badges ───────────────────────────── */
html[data-theme="dark"] .prob-track,
html[data-theme="dark"] .conf-track {
  background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .prob-fill,
html[data-theme="dark"] .conf-fill {
  background: #C7F04B !important;
}

html[data-theme="dark"] .badge-won,
html[data-theme="dark"] .status-won,
html[data-theme="dark"] .dash-status.won {
  background: rgba(16, 185, 129, 0.16) !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  color: #34D399 !important;
}

html[data-theme="dark"] .badge-lost,
html[data-theme="dark"] .status-lost,
html[data-theme="dark"] .dash-status.lost {
  background: rgba(239, 68, 68, 0.16) !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
  color: #F87171 !important;
}

html[data-theme="dark"] .badge-pending,
html[data-theme="dark"] .status-pending,
html[data-theme="dark"] .dash-status.pending {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #9BB0A5 !important;
}

html[data-theme="dark"] .form-pill.w,
html[data-theme="dark"] .form-dot.w {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34D399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
}

html[data-theme="dark"] .form-pill.d,
html[data-theme="dark"] .form-dot.d {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #9BB0A5 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] .form-pill.l,
html[data-theme="dark"] .form-dot.l {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #F87171 !important;
  border: 1px solid rgba(239, 68, 68, 0.35) !important;
}

/* ── League Standings & Tables (Fix dark text on dark background) ── */
html[data-theme="dark"] .league-hero-details .league-title-main {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .league-hero-details .league-country-tag {
  color: #8DA497 !important;
}

html[data-theme="dark"] .league-logo-badge {
  background: #112018 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .league-table-clean {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .league-table-clean th {
  background: #0D1C14 !important;
  color: #8DA497 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .league-table-clean td {
  color: #D1DDD6 !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .league-table-clean tbody tr:hover {
  background: #16291F !important;
}

html[data-theme="dark"] .league-table-team-name {
  color: #F1F5F2 !important;
  font-weight: 700 !important;
}

html[data-theme="dark"] .league-table-pts {
  color: #C7F04B !important;
  font-weight: 800 !important;
  font-size: 14px !important;
}

html[data-theme="dark"] .league-rank-badge {
  background: #16291F !important;
  color: #8DA497 !important;
}

html[data-theme="dark"] .league-rank-badge.rank-cl {
  background: rgba(16, 185, 129, 0.2) !important;
  color: #34D399 !important;
}

html[data-theme="dark"] .league-rank-badge.rank-el {
  background: rgba(59, 130, 246, 0.2) !important;
  color: #60A5FA !important;
}

html[data-theme="dark"] .league-rank-badge.rank-rel {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #F87171 !important;
}

html[data-theme="dark"] .btn-standings-toggle,
html[data-theme="dark"] .league-toggle-btn,
html[data-theme="dark"] .view-all-btn {
  background: #112018 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .btn-standings-toggle:hover,
html[data-theme="dark"] .league-toggle-btn:hover,
html[data-theme="dark"] .view-all-btn:hover {
  background: #193325 !important;
  border-color: #C7F04B !important;
  color: #C7F04B !important;
}

html[data-theme="dark"] .league-standings-legend {
  color: #8DA497 !important;
}

html[data-theme="dark"] .standings,
html[data-theme="dark"] .standings-league {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .standings th,
html[data-theme="dark"] .standings-league th {
  color: #7A9386 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .standings td,
html[data-theme="dark"] .standings-league td {
  color: #D1DDD6 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .standings-team {
  color: #F1F5F2 !important;
  font-weight: 600 !important;
}

html[data-theme="dark"] .standings .strong {
  color: #C7F04B !important;
  font-weight: 700 !important;
}

html[data-theme="dark"] .league-row:hover {
  background: #15261D !important;
}

html[data-theme="dark"] .league-name {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .league-country {
  color: #8DA497 !important;
}

/* ── General Tables (Ledger, Performance) ────────────────────────── */
html[data-theme="dark"] .ledger-table,
html[data-theme="dark"] .bm-table,
html[data-theme="dark"] table.table {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .ledger-table th,
html[data-theme="dark"] table.table th {
  background: #0D1C15 !important;
  color: #8DA497 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .ledger-table td,
html[data-theme="dark"] table.table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .ledger-table tr:hover td,
html[data-theme="dark"] table.table tr:hover td {
  background: #16291F !important;
}

/* ── About Page Elements ─────────────────────────────────────────── */
html[data-theme="dark"] .about-stat-number {
  color: #C7F04B !important;
}

html[data-theme="dark"] .about-stat-label {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .about-stat-desc {
  color: #9BB0A5 !important;
}

html[data-theme="dark"] .about-card-badge {
  background: rgba(199, 240, 75, 0.12) !important;
  border: 1px solid rgba(199, 240, 75, 0.25) !important;
  color: #C7F04B !important;
}

html[data-theme="dark"] .about-card-title,
html[data-theme="dark"] .about-section-title,
html[data-theme="dark"] .about-pillar-title,
html[data-theme="dark"] .about-step-title {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .about-card-text p,
html[data-theme="dark"] .about-pillar-desc,
html[data-theme="dark"] .about-step-desc,
html[data-theme="dark"] .about-section-desc {
  color: #9BB0A5 !important;
}

html[data-theme="dark"] .about-card-text strong {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .about-pillar-icon {
  background: rgba(199, 240, 75, 0.12) !important;
  border: 1px solid rgba(199, 240, 75, 0.25) !important;
  color: #C7F04B !important;
}

html[data-theme="dark"] .about-step-num {
  color: #C7F04B !important;
}

html[data-theme="dark"] .about-responsible-box {
  background: #15261D !important;
  border: 1px solid rgba(199, 240, 75, 0.2) !important;
}

html[data-theme="dark"] .about-responsible-text h4 {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .about-responsible-text p {
  color: #9BB0A5 !important;
}

html[data-theme="dark"] .about-cta-banner {
  background: linear-gradient(135deg, #072518 0%, #0C4D31 100%) !important;
  border: 1px solid rgba(199, 240, 75, 0.25) !important;
}

html[data-theme="dark"] .about-btn-outline {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
}

html[data-theme="dark"] .about-btn-outline:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
}

/* ── Blog / Articles ─────────────────────────────────────────────── */
html[data-theme="dark"] .blog-show-wrap,
html[data-theme="dark"] .article-content,
html[data-theme="dark"] .blog-card {
  background: #112018 !important;
  color: #D1DDD6 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .blog-header h1,
html[data-theme="dark"] .article-content h2,
html[data-theme="dark"] .article-content h3 {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .article-content blockquote {
  background: #16291F !important;
  border-left-color: #C7F04B !important;
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .author-box,
html[data-theme="dark"] .sources-box,
html[data-theme="dark"] .sources-card {
  background: #16291F !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── VIP Plans & Dropdowns ───────────────────────────────────────── */
html[data-theme="dark"] .vip-plan-card,
html[data-theme="dark"] .vip-card-box {
  background: #112018 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .vip-plan-name {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .vip-price-val {
  color: #C7F04B !important;
}

html[data-theme="dark"] .vip-feature-item {
  color: #D1DDD6 !important;
}

html[data-theme="dark"] .vip-feature-item i,
html[data-theme="dark"] .vip-feature-item svg {
  color: #C7F04B !important;
}

html[data-theme="dark"] .vip-country-select,
html[data-theme="dark"] select.form-control,
html[data-theme="dark"] input.form-control {
  background-color: #16291F !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .vip-country-select:focus,
html[data-theme="dark"] .form-control:focus {
  border-color: #0C5C3C !important;
  box-shadow: 0 0 0 3px rgba(199, 240, 75, 0.25) !important;
}

/* ── Fixture Details ─────────────────────────────────────────────── */
html[data-theme="dark"] .fixture-meta-box,
html[data-theme="dark"] .fixture-h2h-box,
html[data-theme="dark"] .fixture-stats-box,
html[data-theme="dark"] .odds-card,
html[data-theme="dark"] .form-guide-card,
html[data-theme="dark"] .vp-card,
html[data-theme="dark"] .vp-table-wrap {
  background: #112018 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .vp-sec-title {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .vp-table,
html[data-theme="dark"] .vp-league-table {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .vp-table th,
html[data-theme="dark"] .vp-league-table th {
  background: #0D1C15 !important;
  color: #8DA497 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .vp-table td,
html[data-theme="dark"] .vp-league-table td {
  color: #D1DDD6 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .vp-league-table tr[style*="background"] {
  background: rgba(199, 240, 75, 0.12) !important;
}

html[data-theme="dark"] .vp-league-table tr:hover {
  background: #16291F !important;
}

html[data-theme="dark"] .h2h-bar-bg {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* ── Modals & Overlays ───────────────────────────────────────────── */
html[data-theme="dark"] .bm-settings-panel,
html[data-theme="dark"] .bm-login-modal-card,
html[data-theme="dark"] .bm-modal-content,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .share-modal-card {
  background: #112018 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #F1F5F2 !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.75) !important;
}

html[data-theme="dark"] .bm-login-header h3,
html[data-theme="dark"] .bm-settings-title,
html[data-theme="dark"] .share-modal-title {
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .bm-login-header p,
html[data-theme="dark"] .bm-settings-item-desc {
  color: #9BB0A5 !important;
}

html[data-theme="dark"] .bm-login-input,
html[data-theme="dark"] .bm-settings-input,
html[data-theme="dark"] .share-copy-input {
  background: #16291F !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #F1F5F2 !important;
}

html[data-theme="dark"] .bm-login-input:focus,
html[data-theme="dark"] .share-copy-input:focus {
  border-color: #C7F04B !important;
  box-shadow: 0 0 0 3px rgba(199, 240, 75, 0.2) !important;
}

html[data-theme="dark"] .bm-settings-close,
html[data-theme="dark"] .modal-close-btn {
  color: #9BB0A5 !important;
}

html[data-theme="dark"] .bm-settings-close:hover,
html[data-theme="dark"] .modal-close-btn:hover {
  color: #F1F5F2 !important;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
html[data-theme="dark"] .btn-board-banker,
html[data-theme="dark"] .btn-board-all,
html[data-theme="dark"] .btn-board-view-all {
  background: #16291F !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #D2DED7 !important;
}

html[data-theme="dark"] .btn-board-banker:hover,
html[data-theme="dark"] .btn-board-all:hover,
html[data-theme="dark"] .btn-board-view-all:hover {
  background: #1C3328 !important;
  color: #C7F04B !important;
  border-color: rgba(199, 240, 75, 0.3) !important;
}

/* ── Footer Elements ─────────────────────────────────────────────── */
html[data-theme="dark"] .foot {
  background: #05140D !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

html[data-theme="dark"] .foot-about p {
  color: #8DA497 !important;
}

html[data-theme="dark"] .foot-col h4,
html[data-theme="dark"] .foot-about h4 {
  color: #C7F04B !important;
}

html[data-theme="dark"] .foot-col a,
html[data-theme="dark"] .foot-inline a {
  color: #9BB0A5 !important;
}

html[data-theme="dark"] .foot-col a:hover,
html[data-theme="dark"] .foot-inline a:hover {
  color: #FFFFFF !important;
}

html[data-theme="dark"] .foot-middle {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .foot-bottom {
  border-top-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .foot-copy,
html[data-theme="dark"] .foot-legal a {
  color: #60756A !important;
}

html[data-theme="dark"] .foot-legal a:hover {
  color: #D2DED7 !important;
}

/* ── Match Details (Fixture Show) ─────────────────────────────────── */
html[data-theme="dark"] {
  --vp-brand: #F1F5F2;
  --vp-brand-dark: #FFFFFF;
  --vp-green: #C7F04B;
  --vp-green-dark: #C7F04B;
  --vp-green-bg: rgba(199, 240, 75, 0.16);
  --vp-text: #F1F5F2;
  --vp-muted: #9BB0A5;
  --vp-faint: #7D9588;
  --vp-border: rgba(255, 255, 255, 0.08);
  --vp-bg-subtle: #16291F;
  --vp-card: #112018;
}

/* Hero Header Banner */
html[data-theme="dark"] .vp-match-hero {
  background: linear-gradient(180deg, #112018 0%, #0A130E 100%) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .vp-hero-title {
  color: #F1F5F2 !important;
}
html[data-theme="dark"] .vp-hero-sub {
  color: #9BB0A5 !important;
}

/* Cards & Topbar */
html[data-theme="dark"] .vp-card {
  background: #112018 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="dark"] .vp-back-btn {
  background: #16291F !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: #F1F5F2 !important;
}
html[data-theme="dark"] .vp-back-btn:hover {
  background: #1E3729 !important;
  color: #C7F04B !important;
  border-color: rgba(199, 240, 75, 0.35) !important;
}
html[data-theme="dark"] .vp-league-name {
  color: #F1F5F2 !important;
}
html[data-theme="dark"] .vp-team-name {
  color: #F1F5F2 !important;
}
html[data-theme="dark"] .vp-logo-box {
  background: #16291F !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .vp-logo-fallback {
  color: #C7F04B !important;
}
html[data-theme="dark"] .vp-time-score {
  color: #F1F5F2 !important;
}
html[data-theme="dark"] .vp-time-score.live {
  color: #F97066 !important;
}
html[data-theme="dark"] .vp-match-date {
  color: #9BB0A5 !important;
}
html[data-theme="dark"] .vp-status-tag.ft {
  background: rgba(199, 240, 75, 0.16) !important;
  color: #C7F04B !important;
}
html[data-theme="dark"] .vp-status-tag.live {
  background: rgba(240, 68, 56, 0.2) !important;
  color: #F97066 !important;
}

/* Prediction Strip */
html[data-theme="dark"] .vp-prediction-strip {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .vp-strip-head {
  background: #0B1711 !important;
  color: #7D9588 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .vp-strip-body {
  background: #112018 !important;
}
html[data-theme="dark"] .vp-strip-tip {
  color: #F1F5F2 !important;
}
html[data-theme="dark"] .vp-strip-odds {
  color: #C7F04B !important;
}
html[data-theme="dark"] .vp-confidence-badge {
  background: rgba(199, 240, 75, 0.16) !important;
  color: #C7F04B !important;
}

/* Form row & meta footer */
html[data-theme="dark"] .vp-form-strip {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .vp-form-label {
  color: #9BB0A5 !important;
}
html[data-theme="dark"] .vp-form-b.w {
  background: rgba(18, 183, 106, 0.22) !important;
  color: #32D583 !important;
}
html[data-theme="dark"] .vp-form-b.d {
  background: rgba(247, 144, 9, 0.22) !important;
  color: #FDB022 !important;
}
html[data-theme="dark"] .vp-form-b.l {
  background: rgba(240, 68, 56, 0.22) !important;
  color: #F97066 !important;
}
html[data-theme="dark"] .vp-match-meta-footer {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
  color: #7D9588 !important;
}
html[data-theme="dark"] .vp-match-meta-footer i {
  color: #C7F04B !important;
}

/* Prediction Result Box */
html[data-theme="dark"] #prediction-result {
  background: #112018 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .vp-summary-prose {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

/* Section headers, prose & factors */
html[data-theme="dark"] .vp-sec-icon {
  background: rgba(199, 240, 75, 0.12) !important;
  color: #C7F04B !important;
}
html[data-theme="dark"] .vp-sec-title {
  color: #F1F5F2 !important;
}
html[data-theme="dark"] .vp-prose {
  color: #D1DDD6 !important;
}
html[data-theme="dark"] .vp-factor-list li {
  color: #D1DDD6 !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .vp-factor-list li::before {
  color: #C7F04B !important;
}

/* Head-to-Head Table */
html[data-theme="dark"] .vp-table-wrap {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .vp-table th {
  background: #0B1711 !important;
  color: #7D9588 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .vp-table td {
  color: #D1DDD6 !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .vp-table tr:hover td {
  background: #182F22 !important;
  color: #FFFFFF !important;
}

/* Season Statistics Comparison Table */
html[data-theme="dark"] .vp-stats-team-name {
  color: #F1F5F2 !important;
}
html[data-theme="dark"] .vp-stats-table th {
  color: #7D9588 !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .vp-stats-table td {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .vp-stat-name {
  color: #D1DDD6 !important;
}
html[data-theme="dark"] .vp-stat-val {
  color: #F1F5F2 !important;
}
html[data-theme="dark"] .vp-stat-labels .val-home {
  color: #C7F04B !important;
}
html[data-theme="dark"] .vp-stat-labels .val-away {
  color: #F97066 !important;
}
html[data-theme="dark"] .vp-stat-label-center {
  color: #7D9588 !important;
}
html[data-theme="dark"] .vp-stat-track,
html[data-theme="dark"] .vp-stat-micro-track {
  background: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .vp-stat-bar-home {
  background: #C7F04B !important;
}
html[data-theme="dark"] .vp-stat-bar-away {
  background: #F04438 !important;
}
html[data-theme="dark"] .vp-stat-track-td {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .vp-stats-table tr:hover td {
  background: #16291F;
}

/* Side-by-side Recent Matches Cards */
html[data-theme="dark"] .vp-recent-card {
  background: #112018 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}
html[data-theme="dark"] .vp-recent-head {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .vp-recent-head-title {
  color: #F1F5F2 !important;
}
html[data-theme="dark"] .vp-recent-item {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .vp-recent-item:hover {
  background: #182F22 !important;
}
html[data-theme="dark"] .vp-recent-meta {
  color: #7D9588 !important;
}
html[data-theme="dark"] .vp-recent-team {
  color: #D1DDD6 !important;
}
html[data-theme="dark"] .vp-recent-item:hover .vp-recent-name {
  color: #FFFFFF !important;
}
html[data-theme="dark"] .vp-recent-score {
  color: #F1F5F2 !important;
}

/* Bottom Row: Related Predictions, FAQs, Comment Form */
html[data-theme="dark"] .vp-cat-btn {
  background: #16291F !important;
  color: #C7F04B !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .vp-cat-btn:hover {
  background: #1E3729 !important;
  color: #FFFFFF !important;
  border-color: rgba(199, 240, 75, 0.35) !important;
}
html[data-theme="dark"] .vp-related-item {
  background: #16291F !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: inherit !important;
}
html[data-theme="dark"] .vp-related-item:hover {
  background: #1E3729 !important;
  border-color: rgba(199, 240, 75, 0.35) !important;
}
html[data-theme="dark"] .vp-related-teams {
  color: #F1F5F2 !important;
}
html[data-theme="dark"] .vp-related-tip {
  background: rgba(199, 240, 75, 0.16) !important;
  color: #C7F04B !important;
}
html[data-theme="dark"] .vp-faq-item {
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .vp-faq-q {
  color: #F1F5F2 !important;
}
html[data-theme="dark"] .vp-faq-a {
  color: #9BB0A5 !important;
}
html[data-theme="dark"] .vp-input {
  background: #16291F !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #F1F5F2 !important;
}
html[data-theme="dark"] .vp-input:focus {
  border-color: #C7F04B !important;
  box-shadow: 0 0 0 3px rgba(199, 240, 75, 0.18) !important;
  background: #193325 !important;
}
html[data-theme="dark"] .vp-input::placeholder {
  color: #7D9588 !important;
}
html[data-theme="dark"] .vp-btn {
  background: #C7F04B !important;
  color: #06301F !important;
  font-weight: 800 !important;
}
html[data-theme="dark"] .vp-btn:hover {
  background: #D6F86A !important;
  color: #06301F !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(199, 240, 75, 0.3) !important;
}
html[data-theme="dark"] .vp-comment-bubble {
  background: #16291F !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
html[data-theme="dark"] .vp-comment-author {
  color: #C7F04B !important;
}
html[data-theme="dark"] .vp-comment-time {
  color: #7D9588 !important;
}
html[data-theme="dark"] .vp-comment-body {
  color: #D1DDD6 !important;
}

/* League Standings Table (bottom) */
html[data-theme="dark"] .vp-league-card {
  background: #112018 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html[data-theme="dark"] .vp-league-table th {
  color: #7D9588 !important;
}
html[data-theme="dark"] .vp-league-table tr.vp-row-highlight td {
  background: rgba(199, 240, 75, 0.12) !important;
  color: #F1F5F2 !important;
}
html[data-theme="dark"] .vp-league-table tr.vp-row-highlight .team-cell span {
  color: #C7F04B !important;
  font-weight: 800 !important;
}
html[data-theme="dark"] .vp-league-table tr.vp-row-highlight td:last-child {
  color: #C7F04B !important;
}
html[data-theme="dark"] .vp-league-table tr:hover td {
  background: #182F22 !important;
}
html[data-theme="dark"] .vp-league-table tr:hover td .team-cell span {
  color: #FFFFFF !important;
}
html[data-theme="dark"] .vp-league-toggle-btn {
  background: #16291F !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #F1F5F2 !important;
}
html[data-theme="dark"] .vp-league-toggle-btn:hover {
  background: #1E3729 !important;
  border-color: rgba(199, 240, 75, 0.35) !important;
  color: #C7F04B !important;
}
html[data-theme="dark"] .vp-table .rank-pill.top {
  background: rgba(18, 183, 106, 0.22) !important;
  color: #32D583 !important;
}
html[data-theme="dark"] .vp-table .rank-pill.mid {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #9BB0A5 !important;
}
html[data-theme="dark"] .vp-table .rank-pill.bottom {
  background: rgba(240, 68, 56, 0.22) !important;
  color: #F97066 !important;
}

/* ── Smooth Theme Transitions ────────────────────────────────────── */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *:before,
html.theme-transitioning *:after {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease !important;
  transition-delay: 0s !important;
}