/* ── Theme variables (RGB channels — Tailwind opacity compat) ────────────── */
:root {
  --c-bg:  8 13 26;      --c-bg2: 13 21 39;     --c-bg3: 17 30 53;
  --c-sf:  15 24 41;     --c-sf2: 22 32 54;
  --c-t1:  237 242 255;  --c-t2:  136 153 187;  --c-t3:  74 90 120;
}
[data-theme="light"] {
  --c-bg:  244 246 251;  --c-bg2: 234 239 248;  --c-bg3: 221 228 245;
  --c-sf:  255 255 255;  --c-sf2: 240 244 255;
  --c-t1:  13 21 39;     --c-t2:  58 76 112;    --c-t3:  122 138 174;
}

/* ── Smooth theme transition ─────────────────────────────────────────────── */
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition:
    background-color 0.28s ease,
    color            0.22s ease,
    border-color     0.22s ease,
    box-shadow       0.22s ease !important;
}

/* ── Light mode: flip white borders to dark ──────────────────────────────── */
[data-theme="light"] [class*="border-white"] {
  border-color: rgba(0,0,0,.1) !important;
}
/* Divider lines */
[data-theme="light"] .h-px.bg-white\/\[\.07\],
[data-theme="light"] [class*="bg-white/"] {
  background-color: rgba(0,0,0,.08) !important;
}

/* ── Light mode: hero section ────────────────────────────────────────────── */
[data-theme="light"] .section-hero {
  background-image: linear-gradient(to bottom right, #dce6f5, #e8eff8, #f0f5ff) !important;
  border-color: rgba(0,0,0,.08) !important;
}

/* ── Light mode: VIP dark sections ──────────────────────────────────────── */
[data-theme="light"] .section-vip-dark {
  background-image: linear-gradient(to bottom right, #f0fdf4, #dcfce7, #e8faf0) !important;
  border-color: rgba(0,150,60,.25) !important;
}

/* ── Light mode: shadows softer ──────────────────────────────────────────── */
[data-theme="light"] .shadow-card                 { box-shadow: 0 4px 24px rgba(0,0,0,.1) !important; }
[data-theme="light"] [class*="shadow-[0_"]        { box-shadow: 0 2px 12px rgba(0,0,0,.1) !important; }
[data-theme="light"] #site-header                 { box-shadow: 0 2px 16px rgba(0,0,0,.09) !important; }
[data-theme="light"] .shadow-green-glow           { box-shadow: 0 6px 20px rgba(0,200,83,.25) !important; }

/* ── Light mode: prose & articles ────────────────────────────────────────── */
[data-theme="light"] .prose-dark p      { color: rgb(var(--c-t2)) !important; }
[data-theme="light"] .prose-dark h2,
[data-theme="light"] .prose-dark h3,
[data-theme="light"] .prose-dark strong { color: rgb(var(--c-t1)) !important; }

/* ── Light mode: mobile nav ──────────────────────────────────────────────── */
[data-theme="light"] .mobile-nav-overlay { background: rgba(13,21,39,.4); }
[data-theme="light"] .mobile-nav-drawer  { background: #ffffff !important; border-right-color: rgba(0,0,0,.1) !important; }

/* ── Light mode: live scroll fades ──────────────────────────────────────── */
[data-theme="light"] .live-scroll-wrap::before { background: linear-gradient(to right, rgb(244 246 251), transparent) !important; }
[data-theme="light"] .live-scroll-wrap::after  { background: linear-gradient(to left,  rgb(244 246 251), transparent) !important; }

/* ── Light mode: ad footer ───────────────────────────────────────────────── */
[data-theme="light"] .ad-sticky-footer { background: rgba(244,246,251,.97) !important; border-top-color: rgba(0,0,0,.09) !important; }

/* ── Light mode: checkout modal ──────────────────────────────────────────── */
[data-theme="light"] .checkout-modal-box {
  background: #ffffff !important;
  border-color: rgba(0,0,0,.1) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,.12) !important;
}

/* ── Light mode: subscribe VIP featured card border ─────────────────────── */
[data-theme="light"] .plan-card.featured {
  border-color: rgba(180,120,0,.5) !important;
}

/* ── Light mode: pred table & tabs ──────────────────────────────────────── */
[data-theme="light"] .pred-tbl         { border-color: rgba(0,0,0,.08) !important; }
[data-theme="light"] .pred-tbl th      { background: rgb(var(--c-bg3)) !important; border-color: rgba(0,0,0,.08) !important; }
[data-theme="light"] .pred-tbl td      { border-color: rgba(0,0,0,.06) !important; }
[data-theme="light"] .pred-tbl tr:hover td { background: rgb(var(--c-sf2)) !important; }

/* ── Light mode: article hero cards (preview/recap/etc) ──────────────────── */
/* In dark mode these get a dramatic dark-coloured gradient via Tailwind from-[]
   classes. On a light page that reads as a heavy black rectangle, so we swap
   in soft tinted gradients per article type and lighten the inner text/chips. */
[data-theme="light"] .article-hero            { border-color: rgba(0,0,0,.08) !important; }
[data-theme="light"] .article-hero-preview    { background-image: linear-gradient(to bottom right, #dcfce7, #ecfdf5, #f0fdf4) !important; }
[data-theme="light"] .article-hero-recap      { background-image: linear-gradient(to bottom right, #dbeafe, #e0e7ff, #eff6ff) !important; }
[data-theme="light"] .article-hero-prediction { background-image: linear-gradient(to bottom right, #fef3c7, #fef9c3, #fffbeb) !important; }
[data-theme="light"] .article-hero-analysis   { background-image: linear-gradient(to bottom right, #ede9fe, #ddd6fe, #f5f3ff) !important; }
[data-theme="light"] .article-hero-live       { background-image: linear-gradient(to bottom right, #fee2e2, #fecaca, #fef2f2) !important; }
/* Faint pitch-lines overlay is too dark on a light card — soften it. */
[data-theme="light"] .article-hero > div:first-child { opacity: .12 !important; filter: invert(1); }
/* Inner text & chip overrides — white-on-dark becomes near-black-on-light. */
[data-theme="light"] .article-hero .ah-league-chip  { background: rgba(255,255,255,.7) !important; }
[data-theme="light"] .article-hero .ah-league-text  { color: rgba(15,23,42,.85) !important; }
[data-theme="light"] .article-hero .ah-team-name    { color: rgba(15,23,42,.9) !important; text-shadow: 0 1px 2px rgba(255,255,255,.6); }
[data-theme="light"] .article-hero .ah-vs           { color: rgba(15,23,42,.45) !important; }
[data-theme="light"] .article-hero .ah-score-pill   { background: rgba(255,255,255,.75) !important; }
[data-theme="light"] .article-hero .ah-score-text   { color: rgba(15,23,42,.95) !important; }
[data-theme="light"] .article-hero .ah-monogram     { color: rgba(15,23,42,.4) !important; }
/* Soften the heavy crest drop shadow which was tuned for dark backgrounds. */
[data-theme="light"] .article-hero img.drop-shadow-\[0_4px_12px_rgba\(0\,0\,0\,\.5\)\] {
  filter: drop-shadow(0 2px 6px rgba(15,23,42,.18)) !important;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar                             { width: 6px; }
::-webkit-scrollbar-track                       { background: rgb(var(--c-bg)); }
::-webkit-scrollbar-thumb                       { background: rgb(var(--c-bg3)); border-radius: 3px; }

/* ── Theme toggle pill ───────────────────────────────────────────────────── */
.theme-toggle {
  position: relative; width: 52px; height: 28px;
  border-radius: 14px; border: 1.5px solid rgba(255,255,255,.12);
  background: rgb(var(--c-bg3)); cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
  flex-shrink: 0; outline: none; padding: 0;
}
.theme-toggle-thumb {
  position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgb(var(--c-t3));
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: transform .35s cubic-bezier(.4,0,.2,1), background .3s ease, box-shadow .3s ease;
  pointer-events: none; user-select: none;
}
/* Stars track-fill for dark mode */
.theme-toggle::before {
  content: '⭐';
  position: absolute; right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 10px; opacity: .5; pointer-events: none;
  transition: opacity .2s;
}
[data-theme="light"] .theme-toggle {
  background: #bfdbfe;
  border-color: rgba(0,0,0,.14);
}
[data-theme="light"] .theme-toggle::before { opacity: 0; }
[data-theme="light"] .theme-toggle-thumb {
  transform: translateX(24px);
  background: #fbbf24;
  box-shadow: 0 2px 8px rgba(251,191,36,.45);
}

/* ── VIP Promo box ────────────────────────────────────────────────────────── */
.vip-promo {
  background: linear-gradient(135deg, #0A1A08 0%, #0D2810 100%);
  border: 1px solid rgba(0,200,83,.25);
  border-radius: .75rem;
  padding: .875rem;
}
[data-theme="light"] .vip-promo {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
  border-color: rgba(34,197,94,.35);
}

/* ── Keyframes ───────────────────────────────────────────────────────────── */
@keyframes livepulse  { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
@keyframes scorepulse { 0%,100%{box-shadow:0 0 0 0 rgba(255,23,68,.4)} 50%{box-shadow:0 0 0 8px rgba(255,23,68,0)} }
@keyframes ticker     { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
@keyframes heroOrb1   { from{transform:translate(0,0) scale(1)} to{transform:translate(-30px,20px) scale(1.12)} }
@keyframes heroOrb2   { from{transform:translate(0,0) scale(1)} to{transform:translate(25px,-35px) scale(1.18)} }
@keyframes fadeInUp   { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes glowPulse  { from{box-shadow:0 0 0 transparent} to{box-shadow:0 0 70px rgba(0,200,83,.12)} }
@keyframes shimmer    { 0%{background-position:-200% center} 100%{background-position:200% center} }

/* ── Animation utility classes ───────────────────────────────────────────── */
.live-dot   { width:7px;height:7px;background:#FF1744;border-radius:50%;animation:livepulse 1.2s ease-in-out infinite;display:inline-block;flex-shrink:0; }
.score-live { animation:scorepulse 2s ease-in-out infinite; }
.orb-1      { animation:heroOrb1 8s ease-in-out infinite alternate; }
.orb-2      { animation:heroOrb2 10s ease-in-out infinite alternate; }
.fade-up    { animation:fadeInUp .55s ease forwards; }
.vip-glow   { animation:glowPulse 4s ease-in-out infinite alternate; }

/* ── Score ticker ────────────────────────────────────────────────────────── */
.ticker-inner { display:flex;white-space:nowrap;animation:ticker 40s linear infinite; }
.ticker-inner:hover { animation-play-state:paused; }

/* ── Confidence bar ──────────────────────────────────────────────────────── */
.conf-bar  { height:4px;background:rgb(var(--c-bg3));border-radius:2px;overflow:hidden; }
.conf-fill { height:100%;background:linear-gradient(90deg,#00C853,#448AFF);border-radius:2px;transition:width .6s ease; }

/* ── Bookmaker buttons ───────────────────────────────────────────────────── */
/* Fallback for any partner slug without a dedicated brand colour — ensures
   admin-added partners (MozzartBet, BetLion, etc.) still render with a
   visible background even before someone adds CSS for them. */
[class*="btn-bet"], [class^="btn-"] { background:linear-gradient(135deg,#2E7D32,#1B5E20); }

.btn-betika     { background:linear-gradient(135deg,#E63012,#C0240D)!important; }
.btn-betway     { background:linear-gradient(135deg,#005E25,#008040)!important; }
.btn-22bet      { background:linear-gradient(135deg,#1D2B5B,#2E4490)!important; }
.btn-sportpesa  { background:linear-gradient(135deg,#E10000,#A00000)!important; }
.btn-mozzartbet { background:linear-gradient(135deg,#FFCC00,#E69900)!important;color:#1a1a1a!important; }
.btn-onexbet    { background:linear-gradient(135deg,#1A5AAB,#0E3771)!important; }   /* 1xBet */
.btn-bangbet    { background:linear-gradient(135deg,#E60023,#B3001B)!important; }
.btn-betlion    { background:linear-gradient(135deg,#D4AF37,#A8862C)!important;color:#1a1a1a!important; }
.btn-odibets    { background:linear-gradient(135deg,#FF6B00,#D85800)!important; }
.btn-stake      { background:linear-gradient(135deg,#1A2C38,#0D1B23)!important; }

/* ── Prose article ───────────────────────────────────────────────────────── */
.prose-dark p      { margin-bottom:.85em;line-height:1.75;color:rgb(var(--c-t2)); }
.prose-dark h2     { font-size:1.2rem;font-weight:800;color:rgb(var(--c-t1));margin:1.25em 0 .4em; }
.prose-dark h3     { font-size:1.05rem;font-weight:700;color:rgb(var(--c-t1));margin:1em 0 .35em; }
.prose-dark h4     { font-size:.95rem;font-weight:700;color:rgb(var(--c-t1));margin:.85em 0 .3em; }
.prose-dark h2:first-child, .prose-dark h3:first-child { margin-top:0; }
.prose-dark strong { color:rgb(var(--c-t1)); }
.prose-dark ul, .prose-dark ol { padding-left:1.4em;margin-bottom:.85em; }
.prose-dark li     { margin-bottom:.3em; }
.prose-dark hr     { border:none;border-top:1px solid rgba(255,255,255,.07);margin:1em 0; }

/* ── VIP blur teaser ─────────────────────────────────────────────────────── */
.tip-locked { filter:blur(5px);user-select:none;pointer-events:none; }

/* ── Mobile nav drawer ───────────────────────────────────────────────────── */
.mobile-nav { display:none;position:fixed;inset:0;z-index:300; }
.mobile-nav.open { display:block; }
.mobile-nav-overlay { position:absolute;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(4px); }
.mobile-nav-drawer { position:absolute;left:0;top:0;bottom:0;width:280px;background:rgb(var(--c-bg2));border-right:1px solid rgba(255,255,255,.07);padding:20px;overflow-y:auto;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1); }
.mobile-nav.open .mobile-nav-drawer { transform:translateX(0); }

/* ── Match detail: events / stats / lineups ─────────────────────────────── */
details > summary { outline:none; }
details > summary::-webkit-details-marker { display:none; }
[data-theme="light"] .bg-gr { background-color:#00C853 !important; }
[data-theme="light"] .bg-bl { background-color:#448AFF !important; }

/* ── Nav underline hover ─────────────────────────────────────────────────── */
.nav-link { position:relative; }
.nav-link::after { content:'';position:absolute;bottom:-2px;left:50%;right:50%;height:2px;background:#00C853;border-radius:1px;transition:left .2s,right .2s; }
.nav-link.active::after,.nav-link:hover::after { left:8px;right:8px; }

/* ── Ad units ────────────────────────────────────────────────────────────── */
.ad-unit { margin:16px 0;text-align:center;min-height:90px;transition:min-height .2s ease; }
/* Collapse the slot when AdSense reports no fill — kills the "big space" on mobile */
.ad-unit:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
  display:none !important;min-height:0 !important;margin:0 !important;
}
.ad-unit ins.adsbygoogle[data-ad-status="unfilled"] { display:none !important; }
/* Active VIP / Pro Web subscribers get an ad-free experience as part of
   their plan. The header sets html.vip-ad-free server-side (no CLS flash)
   based on the active subscription tier. AdSense itself still loads on
   the page for non-VIP cohorts; this rule purely collapses the visual slots
   for paid users. */
html.vip-ad-free .ad-unit,
html.vip-ad-free .ad-sticky-footer { display:none !important; }
/* In-article slot is fluid — keep it tight on mobile so the headline-to-body gap is small */
.ad-unit-inline { margin:8px 0 12px;min-height:0; }
@media (max-width:640px) {
  .ad-unit { margin:10px 0;min-height:60px; }
  .ad-unit-inline { margin:6px 0 10px; }
}
.ad-sticky-footer {
  position:fixed;bottom:0;left:0;right:0;z-index:99;
  background:rgba(8,13,26,.95);
  border-top:1px solid rgba(255,255,255,.07);
  text-align:center;padding:4px 0;
  max-height:60px;overflow:hidden;
}
.ad-sticky-footer ins.adsbygoogle { max-height:50px !important; }
.ad-sticky-close {
  position:absolute;top:2px;right:4px;
  width:22px;height:22px;line-height:18px;
  background:rgba(0,0,0,.55);color:#fff;
  border:1px solid rgba(255,255,255,.18);border-radius:50%;
  font-size:12px;cursor:pointer;z-index:2;padding:0;
}
@media(min-width:768px) { .ad-sticky-footer { display:none; } }
@media(max-width:767px) { body { padding-bottom:64px; } }
[data-theme="light"] .ad-sticky-close { background:rgba(0,0,0,.5);color:#fff; }

/* ── Prediction row hover accent ─────────────────────────────────────────── */
.pred-row { border-left:3px solid transparent;transition:border-color .2s,background .2s; }
.pred-row:hover { border-left-color:#00C853;background:rgba(0,200,83,.03); }

/* ── Match row live left bar ─────────────────────────────────────────────── */
.match-live-bar { position:relative; }
.match-live-bar::before { content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#FF1744;border-radius:3px 0 0 3px; }

/* ── Mobile polish (≤ 640px) — tame tile heights ─── */
@media (max-width:640px) {
  .orb-1, .orb-2 { width:220px !important; height:220px !important; opacity:.5; }
  /* Today's Top Picks tiles — equal heights so the grid isn't ragged */
  .grid.grid-cols-2 > a.bg-sf { min-height:128px; }
}

/* ── Footer legal list (separator dots that don't orphan on wrap) ────────── */
.footer-legal-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: .35rem .9rem; font-size: .78rem; color: rgb(var(--c-t3));
}
.footer-legal-list li { position: relative; padding-right: .9rem; }
.footer-legal-list li:not(:last-child)::after {
  content: '•'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  color: rgb(var(--c-bg3)); pointer-events: none;
}
.footer-legal-list a { color: inherit; text-decoration: none; transition: color .15s; }
.footer-legal-list a:hover { color: rgb(var(--c-gr)); }
@media (max-width: 480px) {
  .footer-legal-list { gap: .3rem .7rem; font-size: .82rem; }
}
/* Prevent horizontal scroll caused by absolutely-positioned hero orbs at any width */
html, body { overflow-x:hidden; }

/* ────────────────────────────────────────────────────────────────────────────
   HERO V2 — animated gradient, live stats counters, shimmer CTA
   ──────────────────────────────────────────────────────────────────────────── */
@keyframes heroGradientShift {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes heroPulseDot {
  0%, 100% { transform:scale(1);   opacity:1;   }
  50%      { transform:scale(1.3); opacity:.55; }
}
@keyframes shimmerSweep {
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(200%);  }
}
@keyframes countUpFade {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0);  }
}

.hero-v2 {
  background:
    radial-gradient(120% 80% at 0% 0%,   rgba(0,200,83,.12), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(68,138,255,.10), transparent 55%),
    linear-gradient(135deg, #050A18 0%, #0A1628 50%, #071520 100%);
}
[data-theme="light"] .hero-v2 {
  background:
    radial-gradient(120% 80% at 0% 0%,   rgba(0,200,83,.12), transparent 55%),
    radial-gradient(120% 80% at 100% 100%, rgba(68,138,255,.10), transparent 55%),
    linear-gradient(135deg, #dce6f5 0%, #e8eff8 50%, #f0f5ff 100%);
}
.hero-gradient {
  background: linear-gradient(120deg,
    rgba(0,200,83,.0)   0%,
    rgba(0,200,83,.10) 30%,
    rgba(255,179,0,.06) 50%,
    rgba(68,138,255,.08) 70%,
    rgba(0,200,83,.0) 100%);
  background-size: 200% 200%;
  animation: heroGradientShift 12s ease-in-out infinite;
}

.hero-headline { letter-spacing:-.025em; }

/* Live stats tile row — the mobile "wow" element */
.hero-stats { width:100%; }
.hero-stat {
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:.55rem .7rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .7rem;
  color: rgb(var(--c-t1));
  backdrop-filter: blur(6px);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  animation: countUpFade .55s ease both;
}
.hero-stat:nth-child(2) { animation-delay:.08s; }
.hero-stat:nth-child(3) { animation-delay:.16s; }
.hero-stat:nth-child(4) { animation-delay:.24s; }
.hero-stat:hover { transform:translateY(-1px); border-color:rgba(0,200,83,.4); background:rgba(0,200,83,.06); }
.hero-stat-num {
  font-size: 1.35rem; font-weight: 900; line-height: 1; letter-spacing:-.02em;
  color: rgb(var(--c-t1));
}
.hero-stat-lbl {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: rgb(var(--c-t3));
  margin-top: .2rem;
}
.hero-stat-live { border-color: rgba(255,23,68,.35); background: rgba(255,23,68,.06); }
.hero-stat-live .hero-stat-num { color: #FF1744; }
.hero-stat-live .live-dot { animation: heroPulseDot 1.1s ease-in-out infinite; background:#FF1744; }
.hero-stat-acc .hero-stat-num { color: #00C853; }
.hero-stat-vip { border-color: rgba(255,179,0,.35); background: rgba(255,179,0,.06); }
.hero-stat-vip .hero-stat-num { color: #FFB300; }

/* Shimmer sweep on VIP CTA */
.shimmer-btn { position:relative; overflow:hidden; }
.shimmer-btn::after {
  content:''; position:absolute; top:0; left:0; height:100%; width:40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: shimmerSweep 3.5s ease-in-out infinite;
  pointer-events:none;
}

/* Mobile-specific tightening */
@media (max-width: 640px) {
  .hero-v2 { border-radius: 1rem; padding: 1.25rem 1rem !important; }
  .hero-v2 .hero-headline { font-size: 1.65rem !important; line-height: 1.15 !important; }
  .hero-v2 p              { font-size: .92rem !important; line-height: 1.5 !important; }
  .hero-stats { gap: .5rem !important; }
  .hero-stat { padding: .6rem .55rem; border-radius: .75rem; }
  .hero-stat-num { font-size: 1.15rem; font-weight: 900; }
  .hero-stat-lbl { font-size: .68rem; letter-spacing: .02em; }
}
@media (max-width: 380px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hero-v2 .hero-headline { font-size: 1.5rem !important; }
}

/* ── Live scroll ─────────────────────────────────────────────────────────── */
@keyframes liveScroll { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.live-scroll-wrap { overflow:hidden;position:relative; }
.live-scroll-wrap::before,.live-scroll-wrap::after { content:'';position:absolute;top:0;bottom:0;width:32px;z-index:2;pointer-events:none; }
.live-scroll-wrap::before { left:0; background:linear-gradient(to right, rgb(var(--c-bg)), transparent); }
.live-scroll-wrap::after  { right:0;background:linear-gradient(to left,  rgb(var(--c-bg)), transparent); }
.live-scroll-track { display:flex;gap:10px;width:max-content;touch-action:pan-y;animation:liveScroll var(--scroll-dur,30s) linear infinite; }
.live-scroll-track:hover,.live-scroll-track.paused { animation-play-state:paused; }
.live-match-card { width:100%;background:rgba(255,23,68,.06);border:1px solid rgba(255,23,68,.25);border-radius:14px;padding:10px 12px;text-decoration:none;position:relative;transition:background .2s,border-color .2s;display:flex;flex-direction:column;gap:6px; }
.live-scroll-track .live-match-card { flex-shrink:0;width:240px; }
.live-match-card::before { content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:#FF1744;border-radius:3px 0 0 3px; }
.live-match-card:hover,.live-match-card:active { background:rgba(255,23,68,.11);border-color:rgba(255,23,68,.45);text-decoration:none; }
.live-match-card .lmc-teams { display:flex;align-items:center;gap:8px; }
.live-match-card .lmc-team  { flex:1;font-size:.82rem;font-weight:600;color:rgb(var(--c-t1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.live-match-card .lmc-team.home { text-align:right; }
.live-match-card .lmc-score { flex-shrink:0;min-width:52px;text-align:center;background:rgba(255,23,68,.18);border:1px solid rgba(255,23,68,.35);color:#FF1744;font-weight:900;font-size:1rem;padding:3px 8px;border-radius:8px;white-space:nowrap;animation:scorepulse 2s ease-in-out infinite; }
.live-match-card .lmc-meta  { display:flex;align-items:center;justify-content:space-between; }
.live-match-card .lmc-league { font-size:.67rem;color:rgb(var(--c-t3));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%; }
.live-match-card .lmc-badge  { display:inline-flex;align-items:center;gap:4px;font-size:.67rem;font-weight:800;color:#FF1744;white-space:nowrap; }

/* ── League filter tabs ──────────────────────────────────────────────────── */
.league-tabs-scroll { display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch; }
.league-tabs-scroll::-webkit-scrollbar { display:none; }
.league-tab { flex-shrink:0; }

/* ── Mobile match row tweaks ─────────────────────────────────────────────── */
@media(max-width:639px) {
  .match-row-today    { grid-template-columns:1fr 64px 1fr !important;padding-left:10px !important;padding-right:10px !important;gap:6px !important; }
  .match-row-upcoming { grid-template-columns:40px 1fr 28px 1fr !important;padding-left:8px !important;padding-right:8px !important;gap:5px !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   PREDICTION TABLE & TABS  (custom classes used in _pred_table.php & _tabs.php)
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Prediction page tab navigation ─────────────────────────────────────── */
.pred-tabs-wrap { overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-bottom:16px; }
.pred-tabs-wrap::-webkit-scrollbar { display:none; }
.pred-tabs { display:flex;gap:6px;min-width:max-content; }
.pred-tab {
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:10px;
  font-size:.78rem;font-weight:700;
  color:rgb(var(--c-t2));
  background:rgb(var(--c-bg3));
  border:1.5px solid transparent;
  text-decoration:none;white-space:nowrap;
  transition:background .18s,color .18s,border-color .18s;
}
.pred-tab:hover { color:rgb(var(--c-t1));background:rgb(var(--c-sf2)); }
.pred-tab.active { color:#00C853;background:rgba(0,200,83,.12);border-color:rgba(0,200,83,.35); }
.tab-icon  { font-size:1em; }
.tab-count { font-size:.7rem;font-weight:800;background:rgba(0,200,83,.2);color:#00C853;padding:1px 6px;border-radius:20px; }

/* ── Prediction table wrapper ────────────────────────────────────────────── */
.pred-tbl-wrap {
  width:100%;overflow-x:auto;border-radius:14px;
  border:1px solid rgba(255,255,255,.07);
  scrollbar-width:thin;scrollbar-color:rgb(var(--c-bg3)) transparent;
}
.pred-tbl-wrap::-webkit-scrollbar { height:4px; }
.pred-tbl-wrap::-webkit-scrollbar-track { background:transparent; }
.pred-tbl-wrap::-webkit-scrollbar-thumb { background:rgb(var(--c-bg3));border-radius:2px; }

/* Table */
.pred-tbl { width:100%;border-collapse:collapse;font-size:.82rem; }
.pred-tbl th {
  background:rgb(var(--c-bg3));
  color:rgb(var(--c-t3));
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:10px 12px;text-align:left;
  border-bottom:1px solid rgba(255,255,255,.07);
  white-space:nowrap;
}
.pred-tbl td {
  padding:10px 12px;
  color:rgb(var(--c-t2));
  border-bottom:1px solid rgba(255,255,255,.05);
  vertical-align:middle;
}
.pred-tbl tr:last-child td { border-bottom:0; }
.pred-tbl tr:hover td { background:rgba(0,200,83,.03); }
.pred-tbl tr.row-live td  { background:rgba(255,23,68,.04); }
.pred-tbl tr.row-finished td { opacity:.8; }

/* Time cell */
.t-time { font-weight:700;color:rgb(var(--c-t1)); }

/* League + teams cell */
.t-league { display:block;font-size:.65rem;color:rgb(var(--c-t3));margin-bottom:3px; }
.t-teams  { display:flex;align-items:center;gap:4px;text-decoration:none; }
.t-home,.t-away { font-weight:600;color:rgb(var(--c-t1));font-size:.82rem; }
.t-vs   { font-size:.68rem;color:rgb(var(--c-t3)); }
.t-teams:hover .t-home,.t-teams:hover .t-away { color:#00C853; }

/* 1X2 probability mini bars */
.prob-group { display:flex;flex-direction:column;gap:3px;min-width:80px; }
.prob-item  { display:flex;align-items:center;gap:4px; }
.prob-lbl   { font-size:.65rem;font-weight:700;color:rgb(var(--c-t3));width:10px;flex-shrink:0; }
.prob-bar   { flex:1;height:5px;background:rgb(var(--c-bg3));border-radius:3px;overflow:hidden; }
.prob-fill  { height:100%;border-radius:3px;transition:width .5s ease; }
.prob-home  { background:#00C853; }
.prob-draw  { background:#8899BB; }
.prob-away  { background:#448AFF; }
.prob-pct   { font-size:.65rem;font-weight:700;color:rgb(var(--c-t2));width:28px;flex-shrink:0;text-align:right; }

/* Tip chip + score */
.tip-chip {
  display:inline-block;font-size:.68rem;font-weight:800;
  background:rgba(255,179,0,.15);color:#FFB300;
  padding:2px 7px;border-radius:20px;white-space:nowrap;
  margin-bottom:3px;
}
.tip-score { font-size:.82rem;font-weight:900;color:#00C853;display:block; }

/* Table confidence bar */
.tbl-conf     { display:flex;flex-direction:column;gap:3px;min-width:52px; }
.tbl-conf-bar { height:4px;background:rgb(var(--c-bg3));border-radius:2px;overflow:hidden; }
.tbl-conf-fill { height:100%;border-radius:2px;transition:width .5s ease; }
.tbl-conf-fill.high   { background:linear-gradient(90deg,#00C853,#33E87A); }
.tbl-conf-fill.medium { background:linear-gradient(90deg,#FFB300,#FFCC44); }
.tbl-conf-fill.low    { background:linear-gradient(90deg,#FF1744,#FF5252); }
.tbl-conf-pct         { font-size:.68rem;font-weight:700; }
.tbl-conf-pct.high    { color:#00C853; }
.tbl-conf-pct.medium  { color:#FFB300; }
.tbl-conf-pct.low     { color:#FF1744; }

/* Form guide pills */
.form-guide { display:flex;gap:3px; }
.form-pill  { display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;font-size:.62rem;font-weight:900; }
.form-w     { background:#00C853;color:#000; }
.form-d     { background:#FFB300;color:#000; }
.form-l     { background:#FF1744;color:#fff; }

/* Outcome chip */
.outcome-chip { display:inline-block;font-size:.75rem;font-weight:800;padding:2px 8px;border-radius:6px; }
.outcome-win  { background:rgba(0,200,83,.15);color:#00C853;border:1px solid rgba(0,200,83,.3); }
.outcome-loss { background:rgba(255,23,68,.12);color:#FF1744;border:1px solid rgba(255,23,68,.25); }
.t-result     { font-weight:700;color:rgb(var(--c-t1)); }
.t-result.live { color:#FF1744;animation:livepulse 1.5s ease-in-out infinite; }
.t-na         { color:rgb(var(--c-t3)); }

/* Responsive table columns */
@media(max-width:767px) {
  .pred-tbl th.col-goals,.pred-tbl td.col-goals,
  .pred-tbl th.col-form,.pred-tbl td.col-form { display:none; }
}

/* Print-friendly styles */
@media print {
  #site-header, #mobile-bottom-nav, .ad-unit, .ad-sticky-footer,
  .sidebar, .cookie-banner, #back-to-top, .theme-toggle,
  .btn-betika, .btn-betway, .btn-22bet, .btn-sportpesa,
  .btn-mozzartbet, .btn-onexbet, .btn-bangbet, .btn-betlion,
  .btn-odibets, .btn-stake, [class*="btn-bet"],
  .poll-btn, .betting-calculator, .vip-promo { display:none !important; }
  body { background:#fff !important; color:#000 !important; }
  .bg-sf, .bg-bg, .bg-bg2, .bg-bg3 { background:#fff !important; border-color:#ddd !important; }
  .text-t1, .text-t2, .text-t3 { color:#000 !important; }
  .text-gr { color:#006400 !important; }
  .text-rd { color:#8b0000 !important; }
  a { text-decoration:none !important; color:#000 !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   FLASHSCORE-STYLE MATCH LISTING
   ════════════════════════════════════════════════════════════════════════════ */

/* Hide scrollbar for date nav and tabs */
.scrollbar-hide { -ms-overflow-style:none; scrollbar-width:none; }
.scrollbar-hide::-webkit-scrollbar { display:none; }

/* Flashscore match row */
.fs-match-row {
  display:grid;
  grid-template-columns: 52px 1fr 56px 1fr;
  gap: 6px;
  border-left: 3px solid transparent;
  border-right: 1px solid rgba(255,255,255,.07);
}
.fs-match-row.match-live-bar {
  border-left-color: #FF1744;
}
@media(min-width:640px) {
  .fs-match-row {
    grid-template-columns: 60px 1fr 64px 1fr 80px;
    gap: 10px;
  }
}

/* League header */
.league-header {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  background:rgb(var(--c-sf));
  border:1px solid rgba(255,255,255,.07);
  border-radius:12px 12px 0 0;
}

/* Toggle arrow animation */
.toggle-arrow {
  display:inline-block;
  transition: transform .2s ease;
  font-size:.65rem;
}

/* Light mode overrides for fs components */
[data-theme="light"] .fs-match-row {
  border-right-color: rgba(0,0,0,.06);
}
[data-theme="light"] .fs-match-row:hover {
  background: rgb(var(--c-sf2)) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   SIDEBAR PINNED LEAGUES & RANKINGS
   ════════════════════════════════════════════════════════════════════════════ */
.pinned-league-link {
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:8px;
  font-size:.78rem;
  font-weight:600;
  color:rgb(var(--c-t2));
  text-decoration:none;
  transition: background .15s, color .15s;
}
.pinned-league-link:hover {
  background:rgb(var(--c-sf2));
  color:rgb(var(--c-t1));
}
.country-link {
  display:block;
  padding:4px 8px;
  border-radius:6px;
  font-size:.75rem;
  color:rgb(var(--c-t2));
  text-decoration:none;
  transition: background .15s, color .15s;
}
.country-link:hover {
  background:rgb(var(--c-sf2));
  color:#00C853;
}

/* ════════════════════════════════════════════════════════════════════════════
   ADVICE / PREDICTION CARD UI IMPROVEMENTS
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Market type color chips ─────────────────────────────────────────────── */
.market-chip {
  display:inline-block;font-size:.68rem;font-weight:800;
  padding:3px 9px;border-radius:20px;white-space:nowrap;letter-spacing:.02em;
}
.market-1x2     { background:rgba(0,200,83,.15);color:#00C853; }
.market-btts    { background:rgba(0,229,255,.1);color:#00E5FF; }
.market-over25  { background:rgba(68,138,255,.15);color:#448AFF; }
.market-cs      { background:rgba(255,179,0,.15);color:#FFB300; }
.market-mustwin { background:rgba(255,87,34,.12);color:#FF5722; }
.market-other   { background:rgba(136,153,187,.12);color:#8899BB; }
[data-theme="light"] .market-btts    { background:rgba(0,188,212,.12);color:#0097A7; }
[data-theme="light"] .market-over25  { background:rgba(33,150,243,.12);color:#1565C0; }
[data-theme="light"] .market-mustwin { background:rgba(230,74,25,.1);color:#BF360C; }

/* ── Confidence badge ─────────────────────────────────────────────────────── */
.conf-badge {
  display:inline-flex;align-items:center;gap:4px;
  font-weight:800;font-size:.72rem;
  padding:3px 9px;border-radius:20px;
}
.conf-badge.high   { background:rgba(0,200,83,.12);color:#00C853;border:1px solid rgba(0,200,83,.25); }
.conf-badge.medium { background:rgba(255,179,0,.1);color:#FFB300;border:1px solid rgba(255,179,0,.25); }
.conf-badge.low    { background:rgba(255,23,68,.08);color:#FF1744;border:1px solid rgba(255,23,68,.2); }

/* ── Prediction card left accent border by confidence ────────────────────── */
.pred-row { border-left:3px solid transparent;transition:border-color .2s,background .2s; }
.pred-row-high   { border-left-color:#00C853 !important; }
.pred-row-medium { border-left-color:#FFB300 !important; }
.pred-row-low    { border-left-color:#FF5252 !important; }

/* Banker of the day — golden glow + animated halo */
@keyframes bankerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,179,0,.35), 0 6px 24px rgba(255,179,0,.18); }
  50%      { box-shadow: 0 0 0 6px rgba(255,179,0,0),  0 6px 28px rgba(255,179,0,.32); }
}
.pred-row-banker {
  border-color: rgba(255,179,0,.5) !important;
  background: linear-gradient(135deg, rgba(255,179,0,.04), rgba(0,200,83,.03)) !important;
  animation: bankerPulse 2.6s ease-in-out infinite;
}
.pred-row-banker:hover { border-color: rgba(255,179,0,.75) !important; }

/* Pred row mobile padding */
@media (max-width:640px) {
  .pred-row { padding: .9rem !important; }
}

/* ── Scoreboard layout: home — score — away ──────────────────────────────── */
.pred-scoreboard { display:flex;align-items:center;gap:10px;margin-bottom:12px; }
.pred-team-name  { flex:1;font-weight:700;font-size:.9rem;color:rgb(var(--c-t1));line-height:1.2; }
.pred-team-name.home { text-align:right; }
.pred-vs-score   { flex-shrink:0;text-align:center;min-width:64px; }
.pred-score-num  { display:block;font-weight:900;font-size:1.6rem;color:#00C853;line-height:1;letter-spacing:-.03em; }
.pred-score-lbl  { display:block;font-size:.6rem;font-weight:600;color:rgb(var(--c-t3));margin-top:3px;text-transform:uppercase;letter-spacing:.04em; }

/* ── Segmented 1X2 probability bar ───────────────────────────────────────── */
.seg-prob { display:flex;height:6px;border-radius:3px;overflow:hidden;width:100%;gap:1px; }
.seg-prob-h { background:#00C853; }
.seg-prob-d { background:#8899BB; }
.seg-prob-a { background:#448AFF; }
.seg-labels { display:flex;justify-content:space-between;font-size:.62rem;font-weight:700;margin-top:3px; }
.seg-labels .sl-h { color:#00C853; }
.seg-labels .sl-d { color:#8899BB; }
.seg-labels .sl-a { color:#448AFF; }
.seg-wrap { min-width:86px; }

/* ════════════════════════════════════════════════════════════════════════════
   MATCH PAGE — COMPETITIVE UI
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Consistent section header ───────────────────────────────────────────── */
.match-section-hdr {
  display:flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;
  color:rgb(var(--c-t2));
  padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
[data-theme="light"] .match-section-hdr { border-bottom-color:rgba(0,0,0,.07); }

/* ── Match hero: richer dark gradient + light-mode depth ─────────────────── */
.match-hero-card {
  background:linear-gradient(135deg, rgb(var(--c-bg2)) 0%, rgb(var(--c-bg3)) 100%);
  box-shadow:0 4px 32px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.04);
}
[data-theme="light"] .match-hero-card {
  background:linear-gradient(135deg,#f8faff 0%,#eef2fb 100%) !important;
  box-shadow:0 2px 20px rgba(0,0,0,.1), inset 0 1px 0 rgba(255,255,255,.9) !important;
  border-color:rgba(0,0,0,.1) !important;
}

/* ── Fan poll segmented bar ──────────────────────────────────────────────── */
.poll-seg-bar {
  display:flex;height:10px;border-radius:5px;overflow:hidden;gap:2px;
  background:rgb(var(--c-bg3));
}
.poll-seg-h { background:#00C853;transition:flex .5s cubic-bezier(.4,0,.2,1);min-width:2px; }
.poll-seg-d { background:#8899BB;transition:flex .5s cubic-bezier(.4,0,.2,1);min-width:2px; }
.poll-seg-a { background:#448AFF;transition:flex .5s cubic-bezier(.4,0,.2,1);min-width:2px; }

/* ── Fan poll vote buttons ───────────────────────────────────────────────── */
.poll-vote-btn {
  border:1.5px solid rgba(255,255,255,.1);
  background:rgb(var(--c-bg3));
  color:rgb(var(--c-t2));
  cursor:pointer;
}
.poll-vote-home:hover,.poll-vote-home.poll-voted { background:rgba(0,200,83,.15);border-color:rgba(0,200,83,.4);color:#00C853; }
.poll-vote-draw:hover,.poll-vote-draw.poll-voted { background:rgba(136,153,187,.15);border-color:rgba(136,153,187,.4);color:rgb(var(--c-t1)); }
.poll-vote-away:hover,.poll-vote-away.poll-voted { background:rgba(68,138,255,.15);border-color:rgba(68,138,255,.4);color:#448AFF; }
.poll-voted { font-weight:900 !important; }
[data-theme="light"] .poll-vote-btn { border-color:rgba(0,0,0,.12);background:rgb(var(--c-sf2)); }

/* ── Light mode: match hero card override ────────────────────────────────── */
[data-theme="light"] .bg-gradient-to-br.from-bg2.to-bg3 {
  background:linear-gradient(135deg,#f4f7fd 0%,#e8eef8 100%) !important;
  box-shadow:0 2px 20px rgba(0,0,0,.09) !important;
}

/* ── Light mode: section context strip ──────────────────────────────────── */
[data-theme="light"] .border-t.border-white\/\[\.05\] { border-color:rgba(0,0,0,.07) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   PREDICTION CATEGORY PAGES (BTTS, Over 2.5, Correct Score, Must Win, Jackpot, Stats)
   Adds styling for the views under /predictions/* that previously rendered unstyled.
   Colors pull from existing --c-* CSS vars so they auto-theme.
   ════════════════════════════════════════════════════════════════════════════ */

/* Page header */
.page-header { margin-bottom: 1.25rem; }
.page-header h1 {
  font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em;
  color: rgb(var(--c-t1)); margin-bottom: .35rem; line-height: 1.15;
}
.page-header p { font-size: .92rem; color: rgb(var(--c-t2)); line-height: 1.55; }
@media (min-width: 640px) { .page-header h1 { font-size: 1.85rem; } }

/* Category stat row */
.cat-stat-row {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .6rem; margin: 1rem 0 1.25rem;
}
@media (min-width: 640px) { .cat-stat-row { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.cat-stat {
  background: rgb(var(--c-sf)); border: 1px solid rgba(255,255,255,.07);
  border-radius: .75rem; padding: .75rem .85rem; text-align: center;
  display: flex; flex-direction: column; gap: .15rem;
}
.cat-stat strong { font-size: 1.25rem; font-weight: 900; color: #00C853; line-height: 1; }
.cat-stat span   { font-size: .72rem; color: rgb(var(--c-t3)); text-transform: uppercase; letter-spacing: .04em; }
.cat-stat-cta { justify-content: center; align-items: center; }

/* Category intro */
.cat-intro {
  background: rgb(var(--c-sf)); border: 1px solid rgba(255,255,255,.07);
  border-left: 3px solid #00C853; border-radius: .75rem; padding: .85rem 1rem;
  margin-bottom: 1.25rem; font-size: .88rem; color: rgb(var(--c-t2)); line-height: 1.6;
}
.cat-intro strong { color: rgb(var(--c-t1)); }

/* Empty state */
.empty-state {
  background: rgb(var(--c-sf)); border: 1px solid rgba(255,255,255,.07);
  border-radius: .9rem; padding: 2.5rem 1.5rem; text-align: center;
}
.empty-state .empty-icon { font-size: 2.25rem; display: block; margin-bottom: .65rem; }
.empty-state p { color: rgb(var(--c-t2)); font-size: .95rem; margin-bottom: .85rem; }

/* Buttons (prediction sub-pages) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .65rem 1.15rem; border-radius: .65rem; font-weight: 800; font-size: .88rem;
  text-decoration: none; line-height: 1; cursor: pointer; transition: all .15s;
  border: 1px solid transparent; white-space: nowrap;
}
.btn-primary, .btn-green { background: #00C853; color: #000; }
.btn-primary:hover, .btn-green:hover { background: #33E87A; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: rgb(var(--c-t2)); border-color: rgba(255,255,255,.13); }
.btn-ghost:hover { color: #00C853; border-color: #00C853; }
.btn-sm { padding: .45rem .85rem; font-size: .78rem; }
.btn-xl { padding: .9rem 1.6rem; font-size: 1rem; font-weight: 900; }
[data-theme="light"] .btn-ghost { border-color: rgba(0,0,0,.13); }

/* Upsell box */
.upsell-box {
  background: linear-gradient(135deg, rgba(255,179,0,.08), rgba(255,143,0,.04));
  border: 1px solid rgba(255,179,0,.25); border-radius: 1rem;
  padding: 1.75rem 1.5rem; text-align: center; margin-top: 2rem;
}
.upsell-box h2 { font-size: 1.25rem; font-weight: 900; color: rgb(var(--c-t1)); margin-bottom: 1rem; line-height: 1.25; }
.features-list { list-style: none; padding: 0; margin: 0 0 1.25rem; display: inline-block; text-align: left; }
.features-list li {
  font-size: .88rem; color: rgb(var(--c-t2)); padding-left: 1.5rem;
  position: relative; margin-bottom: .4rem; line-height: 1.5;
}
.features-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: #00C853; font-weight: 900; }
.upsell-price { font-size: 1.75rem; font-weight: 900; color: #FFB300; margin-bottom: 1.25rem; letter-spacing: -.02em; }
.upsell-disclaimer { font-size: .72rem; color: rgb(var(--c-t3)); margin-top: .85rem; line-height: 1.5; }

/* Prediction table (shared _pred_table.php) */
.pred-tbl-wrap { background: rgb(var(--c-sf)); border: 1px solid rgba(255,255,255,.07); border-radius: .9rem; overflow: hidden; margin-bottom: 1.5rem; }
.pred-tbl { width: 100%; border-collapse: collapse; font-size: .82rem; }
.pred-tbl thead { background: rgba(0,0,0,.18); border-bottom: 1px solid rgba(255,255,255,.05); }
.pred-tbl th {
  padding: .65rem .55rem; font-weight: 800; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .05em; color: rgb(var(--c-t3)); text-align: left;
}
.pred-tbl tbody tr { border-top: 1px solid rgba(255,255,255,.04); transition: background .15s; }
.pred-tbl tbody tr:hover { background: rgb(var(--c-sf2)); }
.pred-tbl td { padding: .65rem .55rem; color: rgb(var(--c-t1)); vertical-align: middle; }
.pred-tbl .row-live    { background: rgba(255,23,68,.04); }
.pred-tbl .row-finished{ opacity: .85; }
@media (max-width: 720px) { .pred-tbl .hide-sm { display: none; } }

.t-time { font-weight: 800; font-size: .82rem; color: rgb(var(--c-t1)); }
.t-league { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--c-t3)); margin-bottom: .15rem; }
.t-teams { display: flex; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 700; color: rgb(var(--c-t1)); text-decoration: none; }
.t-teams:hover .t-home, .t-teams:hover .t-away { color: #00C853; }
.t-vs    { color: rgb(var(--c-t3)); font-size: .7rem; font-weight: 500; }
.t-home, .t-away { transition: color .15s; }
.t-na    { color: rgb(var(--c-t3)); }
.t-result{ font-weight: 800; }
.t-result.live { color: #FF1744; }

/* 1X2 probability bar */
.seg-wrap { width: 100%; }
.seg-prob { display: flex; height: 6px; border-radius: 3px; overflow: hidden; background: rgba(255,255,255,.05); margin-bottom: .25rem; }
.seg-prob-h { background: #00C853; }
.seg-prob-d { background: #4A90E2; }
.seg-prob-a { background: #FF1744; }
.seg-labels { display: flex; justify-content: space-between; font-size: .62rem; font-weight: 700; }
.sl-h { color: #00C853; } .sl-d { color: #4A90E2; } .sl-a { color: #FF1744; }

/* Market chip + tip */
.market-chip {
  display: inline-block; padding: .25rem .5rem; border-radius: .35rem;
  font-size: .65rem; font-weight: 900; text-transform: uppercase;
  letter-spacing: .04em; margin-right: .35rem; white-space: nowrap;
}
.market-1x2     { background: rgba(0,200,83,.15);  color: #00C853; }
.market-btts    { background: rgba(255,179,0,.15); color: #FFB300; }
.market-over25  { background: rgba(255,87,34,.15); color: #FF7043; }
.market-cs      { background: rgba(120,80,255,.15);color: #A080FF; }
.market-mustwin { background: rgba(255,23,68,.15); color: #FF5C7A; }
.tip-score { display: inline-block; font-weight: 900; font-size: .92rem; color: rgb(var(--c-t1)); margin-left: .15rem; }

/* Form W/D/L pills */
.form-guide { display: flex; gap: 2px; }
.form-pill {
  width: 16px; height: 16px; border-radius: 3px; display: inline-flex;
  align-items: center; justify-content: center; font-size: .6rem; font-weight: 900; color: #000;
}
.form-w { background: #00C853; }
.form-d { background: #FFB300; }
.form-l { background: #FF1744; color: #fff; }

/* Confidence bar */
.tbl-conf { display: flex; flex-direction: column; gap: 2px; min-width: 60px; }
.tbl-conf-bar { height: 5px; background: rgba(255,255,255,.07); border-radius: 3px; overflow: hidden; }
.tbl-conf-fill { height: 100%; border-radius: 3px; transition: width .25s; }
.tbl-conf-fill.high   { background: #00C853; }
.tbl-conf-fill.medium { background: #FFB300; }
.tbl-conf-fill.low    { background: #FF7043; }
.tbl-conf-pct { font-size: .72rem; font-weight: 800; }
.tbl-conf-pct.high { color: #00C853; }
.tbl-conf-pct.medium { color: #FFB300; }
.tbl-conf-pct.low { color: #FF7043; }

/* Outcome chip */
.outcome-chip { display: inline-block; padding: .22rem .5rem; border-radius: .35rem; font-size: .72rem; font-weight: 900; }
.outcome-win  { background: rgba(0,200,83,.18); color: #00C853; }
.outcome-loss { background: rgba(255,23,68,.18); color: #FF5C7A; }

/* Jackpot page */
.jackpot-section { background: rgb(var(--c-sf)); border: 1px solid rgba(255,255,255,.07); border-radius: 1rem; margin-bottom: 1.25rem; overflow: hidden; }
.jackpot-header { display: flex; align-items: center; justify-content: space-between; padding: .9rem 1.15rem; background: linear-gradient(135deg, rgba(255,179,0,.1), transparent); border-bottom: 1px solid rgba(255,255,255,.05); gap: .75rem; flex-wrap: wrap; }
.jackpot-header-left { display: flex; align-items: center; gap: .55rem; }
.jackpot-title { font-size: 1rem; font-weight: 900; color: rgb(var(--c-t1)); line-height: 1; }
.jackpot-count { background: rgba(255,255,255,.07); color: rgb(var(--c-t2)); font-size: .68rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px; }
.jackpot-prize { text-align: right; }
.jp-prize-label { display: block; font-size: .65rem; color: rgb(var(--c-t3)); text-transform: uppercase; letter-spacing: .04em; }
.jp-prize-value { font-size: 1.1rem; font-weight: 900; color: #FFB300; }
.jp-num { width: 28px; text-align: center; font-weight: 800; color: rgb(var(--c-t3)); }
.prob-group { display: flex; gap: .25rem; font-size: .65rem; }
.prob-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.prob-lbl { font-weight: 800; color: rgb(var(--c-t3)); }

/* Stats page */
.stats-hero { background: linear-gradient(135deg, rgba(0,200,83,.08), rgba(68,138,255,.04)); border: 1px solid rgba(0,200,83,.18); border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.5rem; }
.stats-hero-main { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.sh-accuracy { text-align: center; }
.sh-value { font-size: 3rem; font-weight: 900; color: #00C853; line-height: 1; letter-spacing: -.03em; }
.sh-label { font-size: .82rem; color: rgb(var(--c-t2)); margin-top: .25rem; }
.sh-divider { width: 1px; height: 60px; background: rgba(255,255,255,.1); }
@media (max-width: 640px) { .sh-divider { display: none; } }
.sh-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; flex: 1; min-width: 200px; }
@media (min-width: 640px) { .sh-stats { grid-template-columns: repeat(4, minmax(0,1fr)); } }
.sh-stat { display: flex; flex-direction: column; gap: .15rem; }
.sh-stat strong { font-size: 1.4rem; font-weight: 900; color: rgb(var(--c-t1)); line-height: 1; }
.sh-stat span   { font-size: .72rem; color: rgb(var(--c-t3)); text-transform: uppercase; letter-spacing: .04em; }
.sh-stat.streak-win strong { color: #00C853; }
.sh-stat.streak-loss strong { color: #FF5C7A; }
.stats-hero-sub { padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.stats-hero-sub p { font-size: .85rem; color: rgb(var(--c-t2)); line-height: 1.55; flex: 1; min-width: 200px; }

.stats-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.5rem; }
@media (min-width: 980px) { .stats-grid-2 { grid-template-columns: 1fr 1fr; } }

.stats-section { background: rgb(var(--c-sf)); border: 1px solid rgba(255,255,255,.07); border-radius: 1rem; padding: 1.25rem 1.15rem; }
.section-heading { font-size: .92rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: rgb(var(--c-t1)); margin-bottom: 1rem; display: flex; align-items: center; gap: .55rem; }
.heading-count { background: rgba(255,255,255,.07); color: rgb(var(--c-t3)); font-size: .65rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; text-transform: none; letter-spacing: 0; }
.stats-empty { font-size: .88rem; color: rgb(var(--c-t3)); }

.market-bars { display: flex; flex-direction: column; gap: .65rem; }
.market-bar-row { display: grid; grid-template-columns: minmax(110px, 1.3fr) 2fr auto; align-items: center; gap: .65rem; }
.market-name { font-size: .8rem; font-weight: 700; color: rgb(var(--c-t1)); }
.market-bar-track { height: 8px; background: rgba(255,255,255,.06); border-radius: 4px; overflow: hidden; }
.market-bar-fill { height: 100%; transition: width .35s ease; border-radius: 4px; }
.market-bar-fill.high   { background: #00C853; }
.market-bar-fill.medium { background: #FFB300; }
.market-bar-fill.low    { background: #FF7043; }
.market-bar-meta { display: flex; flex-direction: column; gap: 1px; text-align: right; min-width: 80px; }
.market-pct  { font-size: .82rem; font-weight: 900; line-height: 1; }
.market-pct.high  { color: #00C853; }
.market-pct.medium{ color: #FFB300; }
.market-pct.low   { color: #FF7043; }
.market-sample { font-size: .65rem; color: rgb(var(--c-t3)); }

/* Light-theme tweaks for prediction sub-pages */
[data-theme="light"] .pred-tbl tbody tr { border-color: rgba(0,0,0,.06); }
[data-theme="light"] .pred-tbl thead    { background: rgba(0,0,0,.04); }
[data-theme="light"] .seg-prob          { background: rgba(0,0,0,.06); }
[data-theme="light"] .tbl-conf-bar      { background: rgba(0,0,0,.06); }
[data-theme="light"] .market-bar-track  { background: rgba(0,0,0,.06); }
[data-theme="light"] .empty-state,
[data-theme="light"] .cat-stat,
[data-theme="light"] .cat-intro,
[data-theme="light"] .jackpot-section,
[data-theme="light"] .stats-section,
[data-theme="light"] .pred-tbl-wrap     { border-color: rgba(0,0,0,.08); }