:root {
  --c-green:#1a7a3c;--c-green-light:#22a050;--c-green-pale:#e8f5ed;
  --c-gold:#e89c0a;--c-gold-light:#fff3cd;--c-red:#dc2626;
  --c-blue:#1657a8;--c-blue-pale:#e8f0fa;
  --bg-page:#f2f5f2;--bg-surface:#ffffff;--bg-surface-2:#f7faf7;--bg-surface-3:#eef2ef;
  --border-soft:#dce7de;--border-mid:#c4d8c9;
  --tx-primary:#0f1a12;--tx-secondary:#3a5540;--tx-muted:#7a9980;--tx-inverse:#ffffff;
  --sh-sm:0 1px 4px rgba(0,0,0,.06);--sh-md:0 4px 16px rgba(0,0,0,.09);
  --ff-head:'Barlow Condensed',sans-serif;--ff-body:'Mulish',sans-serif;--ff-mono:'JetBrains Mono',monospace;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--header-h:64px;--ticker-h:36px;--max-w:1440px;--ease:0.22s ease;
}

[data-theme="dark"] {
  --bg-page:#0c1410;--bg-surface:#182219;--bg-surface-2:#1d2e1f;--bg-surface-3:#152018;
  --border-soft:#283c2c;--border-mid:#344d38;
  --tx-primary:#e5f2e9;--tx-secondary:#90ba98;--tx-muted:#537a5c;--tx-inverse:#0c1410;
  --sh-sm:0 1px 4px rgba(0,0,0,.35);--sh-md:0 4px 16px rgba(0,0,0,.45);
  --c-green-pale:rgba(26,122,60,.16);--c-gold-light:rgba(232,156,10,.13);--c-blue-pale:rgba(22,87,168,.18);
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:15px}
body{background:var(--bg-page);color:var(--tx-primary);font-family:var(--ff-body);line-height:1.6;transition:background var(--ease),color var(--ease)}
a{color:inherit;text-decoration:none}
button{font-family:var(--ff-body);cursor:pointer}
ul{list-style:none}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg-surface-3)}
::-webkit-scrollbar-thumb{background:var(--border-mid);border-radius:3px}

/* ── TICKER ── */
.ticker-bar{height:var(--ticker-h);background:var(--c-green);display:flex;align-items:center;overflow:hidden}
.ticker-badge{background:var(--c-gold);color:#000;font-family:var(--ff-mono);font-size:10px;font-weight:700;letter-spacing:.1em;padding:0 14px;height:100%;display:flex;align-items:center;gap:6px;flex-shrink:0;white-space:nowrap}
.ticker-dot{width:7px;height:7px;background:#000;border-radius:50%;animation:blink 1.4s ease infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.ticker-overflow{overflow:hidden;flex:1;position:relative}
.ticker-overflow::before,.ticker-overflow::after{content:'';position:absolute;top:0;bottom:0;width:40px;z-index:2;pointer-events:none}
.ticker-overflow::before{left:0;background:linear-gradient(to right,var(--c-green),transparent)}
.ticker-overflow::after{right:0;background:linear-gradient(to left,var(--c-green),transparent)}
.ticker-track{display:flex;gap:56px;animation:scroll-x 36s linear infinite;white-space:nowrap;padding-left:30px}
@keyframes scroll-x{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{font-size:12px;font-weight:600;color:rgba(255,255,255,.9);display:flex;gap:8px;align-items:center}
.ticker-item .tag{background:rgba(255,255,255,.18);color:#fff;font-size:10px;padding:2px 7px;border-radius:20px;font-weight:700}
.ticker-item .score{color:var(--c-gold);font-family:var(--ff-mono);font-size:11px}

/* ── HEADER ── */
.site-header{height:var(--header-h);background:var(--bg-surface);border-bottom:1px solid var(--border-soft);position:sticky;top:0;z-index:200;box-shadow:var(--sh-sm);transition:background var(--ease),border-color var(--ease)}
.header-inner{max-width:var(--max-w);margin:0 auto;padding:0 20px;height:100%;display:flex;align-items:center;gap:28px}
.logo-wrap{display:flex;align-items:center;gap:9px;flex-shrink:0;text-decoration:none}
.logo-icon{width:38px;height:38px;background:linear-gradient(145deg,var(--c-green),var(--c-green-light));border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:14px;font-family:var(--ff-head);font-weight:800;color:#fff;letter-spacing:-.5px;box-shadow:0 2px 8px rgba(26,122,60,.35)}
.logo-icon::after{content:'🔥'}
.logo-text{font-family:var(--ff-head);font-size:24px;font-weight:800;letter-spacing:.5px;line-height:1}
.logo-text .green{color:var(--c-green)}.logo-text .gold{color:var(--c-gold)}
.primary-nav{display:flex;align-items:center;gap:2px;flex:1}
.nav-link{font-size:13px;font-weight:600;color:var(--tx-secondary);padding:7px 13px;border-radius:7px;transition:all var(--ease);white-space:nowrap}
.nav-link:hover,.nav-link.active{color:var(--c-green);background:var(--c-green-pale)}
.header-controls{margin-left:auto;display:flex;align-items:center;gap:10px;flex-shrink:0}
.odds-select{font-family:var(--ff-body);font-size:12px;font-weight:600;background:var(--bg-surface-3);border:1px solid var(--border-soft);color:var(--tx-secondary);padding:7px 10px;border-radius:var(--radius-sm);cursor:pointer;outline:none}
.icon-btn{width:38px;height:38px;border-radius:var(--radius-sm);border:1px solid var(--border-soft);background:var(--bg-surface-3);color:var(--tx-secondary);display:flex;align-items:center;justify-content:center;font-size:16px;transition:all var(--ease);cursor:pointer}
.icon-btn:hover{border-color:var(--c-green);color:var(--c-green)}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:var(--radius-sm);font-size:13px;font-weight:700;border:none;cursor:pointer;transition:all var(--ease);letter-spacing:.02em}
.btn-green{background:var(--c-green);color:#fff;box-shadow:0 2px 10px rgba(26,122,60,.3)}
.btn-green:hover{background:var(--c-green-light);transform:translateY(-1px);box-shadow:0 4px 18px rgba(26,122,60,.4)}
.btn-gold{background:var(--c-gold);color:#000;box-shadow:0 2px 10px rgba(232,156,10,.3)}
.btn-gold:hover{background:#d4890a;transform:translateY(-1px)}
.btn-outline{background:transparent;border:1.5px solid var(--border-mid);color:var(--tx-secondary)}
.btn-outline:hover{border-color:var(--c-green);color:var(--c-green)}
.btn-ghost{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.24)}
.btn-ghost:hover{background:rgba(255,255,255,.22)}

/* ── LEAGUE NAV ── */
.league-nav-inner a.league-tab{display:inline-flex;align-items:center;gap:5px;text-decoration:none;color:inherit;white-space:nowrap;transition:color .2s ease,border-color .2s ease}
.league-nav-inner a.league-tab .league-flag{font-size:13px;line-height:1}
.league-nav-inner a.league-tab:hover{color:var(--c-gold)}
.league-nav-inner a.league-tab.active{color:var(--c-gold);border-bottom:2px solid var(--c-gold)}

/* ── CATEGORIES DROPDOWN ── */
.nav-dropdown{position:relative}
.nav-dropdown-btn{background:none;border:none;cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:4px;font:inherit}
.drop-arrow{font-size:10px;opacity:.7;transition:transform .25s ease;display:inline-block}
.nav-dropdown.open .drop-arrow{transform:rotate(180deg)}

.dropdown-menu{display:none;position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);z-index:999;background:var(--bg-surface,#1a1f2e);border:1px solid rgba(212,175,55,.18);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.45);padding:20px;min-width:540px;grid-template-columns:1fr 1fr;gap:24px}
.nav-dropdown.open .dropdown-menu{display:grid;animation:dropFadeIn .2s ease forwards}

@keyframes dropFadeIn{
  from{opacity:0;transform:translateX(-50%) translateY(-6px)}
  to{opacity:1;transform:translateX(-50%) translateY(0)}
}
@keyframes dropFadeInMobile{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

.dropdown-col{display:flex;flex-direction:column;gap:4px}
.dropdown-col:first-child{border-right:1px solid rgba(255,255,255,.06);padding-right:20px}
.dropdown-col:last-child{padding-left:4px}

.dropdown-heading{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.4;padding:0 10px 8px 10px;border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:4px;font-family:var(--ff-mono,'JetBrains Mono',monospace)}

.dropdown-item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:9px;text-decoration:none;color:inherit;transition:background .18s ease,color .18s ease}
.dropdown-item:hover{background:rgba(212,175,55,.08);color:var(--c-gold)}
.cat-icon{font-size:18px;width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.dropdown-item span:last-child{display:flex;flex-direction:column;gap:1px}
.dropdown-item strong{font-size:13px;font-weight:600;font-family:var(--ff-body,'Mulish',sans-serif);line-height:1.2}
.dropdown-item em{font-size:11px;font-style:normal;opacity:.5;font-weight:400}

/* ── HAMBURGER ── */
.hamburger-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;padding:6px;background:none;border:none;cursor:pointer}
.ham-line{display:block;width:100%;height:2px;background:currentColor;border-radius:2px;transition:transform .25s ease,opacity .25s ease}

/* ── RESPONSIVE 900px ── */
@media(max-width:900px){
  .hamburger-btn{display:flex}
  .dropdown-menu{min-width:calc(100vw - 32px);left:auto;right:0;transform:none;grid-template-columns:1fr}
  .nav-dropdown.open .dropdown-menu{animation:dropFadeInMobile .2s ease forwards}
  .dropdown-col:first-child{border-right:none;border-bottom:1px solid rgba(255,255,255,.06);padding-right:0;padding-bottom:16px}
  .dropdown-col:last-child{padding-left:0}
}

/* ── RESPONSIVE 680px ── */
@media(max-width:680px){
  .league-nav-inner a.league-tab .league-flag{display:none}
}

/* ── LEAGUE NAV ── */
.league-nav{background:var(--bg-surface-2);border-bottom:1px solid var(--border-soft);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.league-nav::-webkit-scrollbar{display:none}
.league-nav-inner{max-width:var(--max-w);margin:0 auto;padding:0 20px;display:flex;align-items:center}
.league-tab{display:flex;align-items:center;gap:7px;padding:11px 16px;font-size:13px;font-weight:600;color:var(--tx-muted);white-space:nowrap;border-bottom:2.5px solid transparent;cursor:pointer;transition:all var(--ease)}
.league-tab:hover{color:var(--c-green)}
.league-tab.active{color:var(--c-green);border-bottom-color:var(--c-green)}

/* ── LAYOUT ── */
.page-wrap{max-width:var(--max-w);margin:0 auto;padding:0 20px}
.breadcrumb{display:flex;align-items:center;gap:6px;padding:14px 0 0;font-size:12px;color:var(--tx-muted)}
.breadcrumb a{color:var(--c-green);font-weight:600}

/* ── HERO ── */
.hero-stack{display:flex;flex-direction:column;gap:20px;padding:24px 0 0}
.hero-card{background:linear-gradient(135deg,var(--c-green) 0%,#0e5c27 100%);border-radius:var(--radius-lg);padding:48px 52px;position:relative;overflow:hidden;color:#fff;animation:fadeUp .45s ease both;width:100%}
.hero-card::before{content:'⚽';position:absolute;right:-24px;top:-32px;font-size:280px;opacity:.05;line-height:1;pointer-events:none}
.hero-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(to right,var(--c-gold),transparent)}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.2);color:#fff;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 12px;border-radius:20px;margin-bottom:18px}
.hero-badge .pulse{width:7px;height:7px;background:var(--c-gold);border-radius:50%;animation:blink 1.4s ease infinite}
.hero-body{display:grid;grid-template-columns:1fr auto;align-items:center;gap:60px}
.hero-card h1{font-family:var(--ff-head);font-size:clamp(52px,5.5vw,82px);font-weight:800;line-height:.92;letter-spacing:.5px;color:#fff;margin-bottom:16px}
.hero-card h1 em{font-style:normal;color:var(--c-gold)}
.hero-card p{font-size:15px;color:rgba(255,255,255,.75);max-width:520px;line-height:1.7;margin-bottom:28px}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px;flex-shrink:0}
.hero-stat-item{text-align:center}
.hstat-val{font-family:var(--ff-head);font-size:44px;font-weight:800;color:#fff;line-height:1;display:block}
.hstat-val sup{font-size:20px;color:var(--c-gold)}
.hstat-lbl{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-top:4px;display:block}

/* ── ACCA ROW ── */
.acca-row-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}

/* ── CARD BASE ── */
.card{background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:background var(--ease),border-color var(--ease)}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border-soft);background:var(--bg-surface-2)}
.card-title{font-family:var(--ff-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-primary);display:flex;align-items:center;gap:7px}
.badge{font-size:10px;font-weight:700;padding:2px 9px;border-radius:20px;border:1px solid}
.badge-green{background:var(--c-green-pale);color:var(--c-green);border-color:rgba(26,122,60,.25)}
.badge-gold{background:var(--c-gold-light);color:#a06800;border-color:rgba(232,156,10,.3)}
.badge-red{background:#fef2f2;color:var(--c-red);border-color:rgba(220,38,38,.25)}
.badge-blue{background:var(--c-blue-pale);color:var(--c-blue);border-color:rgba(22,87,168,.2)}
[data-theme="dark"] .badge-red{background:rgba(220,38,38,.12)}

/* ── AUTHOR CARD ── */
.author-card{background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sh-sm);transition:background var(--ease),border-color var(--ease)}
.author-card .card-head{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border-soft);background:var(--bg-surface-2)}
.author-card-body{padding:16px}
.ap-inner{display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:16px}
.ap-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#1657a8,#1e80d4);display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-size:22px;font-weight:800;color:#fff;flex-shrink:0;border:2px solid rgba(22,87,168,.25);box-shadow:0 2px 10px rgba(22,87,168,.25)}
.ap-mid{flex:1;min-width:0}
.ap-role{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c-blue);margin-bottom:3px}
.ap-name{font-size:18px;font-weight:800;color:var(--tx-primary);line-height:1.2;margin-bottom:6px}
.ap-verified{display:inline-flex;align-items:center;gap:5px;background:var(--c-blue-pale);color:var(--c-blue);border:1px solid rgba(22,87,168,.15);font-size:10px;font-weight:700;padding:3px 9px;border-radius:20px}
.ap-verified::before{content:'';width:6px;height:6px;background:var(--c-blue);border-radius:50%;display:inline-block}
.ap-btts-badge{background:#e6f5ec;color:#1a7a3c;border:1px solid rgba(26,122,60,.2);border-radius:var(--radius-sm);padding:8px 14px;text-align:center;flex-shrink:0;align-self:flex-start}
[data-theme="dark"] .ap-btts-badge{background:rgba(26,122,60,.18)}
.ap-btts-pct{font-family:var(--ff-head);font-size:22px;font-weight:800;color:var(--c-green);display:block;line-height:1}
.ap-btts-lbl{font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c-green);display:block;margin-top:2px}
.ap-bio{font-size:12px;color:var(--tx-secondary);line-height:1.7;margin:10px 0 8px}
.ap-edu{display:inline-flex;align-items:center;gap:6px;background:var(--bg-surface-3);border:1px solid var(--border-soft);color:var(--tx-secondary);font-size:11px;font-weight:700;padding:5px 12px;border-radius:20px;margin-bottom:12px}
.ap-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--border-soft);margin-top:4px}
.ap-stat-cell{padding:10px 14px;border-right:1px solid var(--border-soft)}
.ap-stat-cell:last-child{border-right:none}
.ap-stat-lbl{font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--tx-muted);margin-bottom:3px}
.ap-stat-val{font-size:14px;font-weight:800;color:var(--tx-primary);line-height:1.2}

/* ── ACCA ELEMENTS ── */
.acca-row{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--border-soft);transition:background var(--ease)}
.acca-row:hover{background:var(--bg-surface-3)}
.match-name{font-size:13px;font-weight:700;color:var(--tx-primary)}
.match-meta{font-size:11px;color:var(--tx-muted);font-weight:500;margin-top:2px}
.acca-right{text-align:right;flex-shrink:0;margin-left:10px}
.tip-badge{display:inline-block;font-size:11px;font-weight:700;background:var(--c-gold-light);color:#9a6a00;border:1px solid rgba(232,156,10,.3);padding:2px 9px;border-radius:6px}
.odd-val{font-family:var(--ff-mono);font-size:15px;font-weight:700;color:var(--tx-primary);margin-top:4px;display:block}
.analysis-block{padding:12px 16px;border-bottom:1px solid var(--border-soft);background:var(--bg-surface-2)}
.analysis-toggle{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none}
.analysis-label{font-size:11px;font-weight:700;color:var(--tx-secondary);letter-spacing:.05em;text-transform:uppercase;display:flex;align-items:center;gap:5px}
.toggle-chevron{font-size:11px;color:var(--c-green);transition:transform var(--ease)}
.toggle-chevron.open{transform:rotate(180deg)}
.analysis-body{font-size:12.5px;color:var(--tx-secondary);line-height:1.75;margin-top:10px;display:none}
.analysis-body.visible{display:block}
.analysis-body strong{color:var(--tx-primary);font-weight:700}
.analysis-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.a-stat{background:var(--bg-surface-3);border:1px solid var(--border-soft);border-radius:7px;padding:4px 10px;font-size:11px;font-weight:700;color:var(--tx-secondary);display:flex;align-items:center;gap:4px}
.a-stat em{font-style:normal;color:var(--c-green)}
.acca-footer{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--c-green-pale);border-top:1px solid var(--border-soft)}
.acca-footer-lbl{font-size:12px;font-weight:700;color:var(--tx-secondary)}
.acca-total{font-family:var(--ff-head);font-size:30px;font-weight:800;color:var(--c-green)}
.acca-actions{display:flex;gap:8px;padding:12px 16px}
.acca-actions .btn{flex:1;justify-content:center;font-size:12px;padding:8px 10px}

/* ── PREDICTIONS TABLE ── */
.pred-head,.pred-row{display:grid;grid-template-columns:1fr 66px 66px 66px 90px 130px;padding:11px 16px;align-items:center}
.pred-head{background:var(--bg-surface-2);border-bottom:1px solid var(--border-soft)}
.pred-head span{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-muted)}
.pred-head span:not(:first-child){text-align:center}
.pred-row{border-bottom:1px solid var(--border-soft);transition:background var(--ease)}
.pred-row:last-child{border-bottom:none}
.pred-row:hover{background:var(--bg-surface-2)}
.pred-name{font-size:13px;font-weight:700;color:var(--tx-primary)}
.pred-sub{font-size:11px;color:var(--tx-muted);font-weight:500;margin-top:2px}
.odd-cell{font-family:var(--ff-mono);font-size:13px;text-align:center;color:var(--tx-muted);padding:4px 6px;border-radius:6px}
.odd-cell.best{background:var(--c-green-pale);color:var(--c-green);font-weight:700}
.stake-pill{display:inline-flex;align-items:center;justify-content:center;padding:3px 10px;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.stake-l{background:rgba(220,38,38,.1);color:var(--c-red)}
.stake-m{background:var(--c-gold-light);color:#9a6a00}
.stake-s{background:var(--c-green-pale);color:var(--c-green)}
[data-theme="dark"] .stake-l{background:rgba(220,38,38,.18)}
.pred-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:7px;font-size:11px;font-weight:700;border:1px solid}
.chip-hw{background:var(--c-green-pale);color:var(--c-green);border-color:rgba(26,122,60,.25)}
.chip-draw{background:var(--c-gold-light);color:#9a6a00;border-color:rgba(232,156,10,.3)}
.chip-aw{background:var(--c-blue-pale);color:var(--c-blue);border-color:rgba(22,87,168,.2)}

/* ── STATS GRID ── */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.stat-tile{background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:18px;cursor:pointer;transition:all var(--ease)}
.stat-tile:hover{border-color:var(--c-green);transform:translateY(-2px);box-shadow:var(--sh-md)}
.stat-lbl{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-muted);margin-bottom:5px}
.stat-val{font-family:var(--ff-head);font-size:30px;font-weight:800;color:var(--tx-primary);line-height:1}
.stat-val em{font-style:normal;color:var(--c-green)}
.stat-sub{font-size:11px;color:var(--tx-muted);margin-top:3px}

/* ── xG WIDGET ── */
.xg-panel{background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--sh-sm)}
.xg-tabs{display:flex;border-bottom:1px solid var(--border-soft);background:var(--bg-surface-2)}
.xg-tab{flex:1;padding:10px 14px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-muted);cursor:pointer;border-bottom:2.5px solid transparent;transition:all var(--ease);text-align:center}
.xg-tab:hover{color:var(--c-green)}
.xg-tab.active{color:var(--c-green);border-bottom-color:var(--c-green);background:var(--bg-surface)}
.xg-pane{display:none;padding:0}
.xg-pane.active{display:block}
.xg-filter-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid var(--border-soft)}
.xg-filter-row select{font-family:var(--ff-body);font-size:11px;font-weight:600;background:var(--bg-surface-3);border:1px solid var(--border-soft);color:var(--tx-secondary);padding:5px 8px;border-radius:var(--radius-sm);cursor:pointer;outline:none}
.xg-filter-row label{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tx-muted)}

/* Team xG rows */
.xg-row{display:grid;grid-template-columns:18px 1fr 52px 110px;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--border-soft);transition:background var(--ease)}
.xg-row:last-child{border-bottom:none}
.xg-row:hover{background:var(--bg-surface-2)}
.xg-rank{font-family:var(--ff-mono);font-size:10px;font-weight:700;color:var(--tx-muted);text-align:right}
.xg-team-name{font-size:12px;font-weight:700;color:var(--tx-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xg-team-league{font-size:10px;color:var(--tx-muted);font-weight:500}
.xg-num{font-family:var(--ff-mono);font-size:13px;font-weight:700;text-align:right;white-space:nowrap}
.xg-num.hi{color:var(--c-green)}
.xg-num.lo{color:var(--c-red)}
.xg-bar{height:100%;border-radius:3px;transition:width .7s cubic-bezier(.4,0,.2,1)}
.xg-bar.green{background:linear-gradient(to right,var(--c-green),var(--c-green-light))}
.xg-bar.red{background:linear-gradient(to right,#dc2626,#ef4444)}
.xg-bar.gold{background:linear-gradient(to right,#b45309,var(--c-gold))}

/* Player xG rows */
.xg-player-row{display:grid;grid-template-columns:18px 36px 1fr 52px 110px;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--border-soft);transition:background var(--ease)}
.xg-player-row:last-child{border-bottom:none}
.xg-player-row:hover{background:var(--bg-surface-2)}
.xg-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-size:10px;font-weight:800;color:#fff;flex-shrink:0}
.xg-player-info .xg-team-name{font-size:12px}
.xg-badge-small{display:inline-flex;align-items:center;font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px;border:1px solid;margin-top:2px}

/* Conceded rows - same as xg-row but red accent on bar */
.conceded-section .xg-num.hi{color:var(--c-red)}
.conceded-section .xg-num.lo{color:var(--c-green)}

/* xG legend */
.xg-legend{display:flex;gap:14px;padding:8px 14px;background:var(--bg-surface-2);border-top:1px solid var(--border-soft);flex-wrap:wrap}
.xg-legend-item{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:var(--tx-muted)}
.xg-legend-dot{width:8px;height:8px;border-radius:50%}
.xg-legend-dot.green{background:var(--c-green)}
.xg-legend-dot.red{background:var(--c-red)}
.xg-legend-dot.gold{background:var(--c-gold)}

/* ── SIDEBAR ── */
.pop-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border-soft);transition:background var(--ease);cursor:pointer}
.pop-item:last-child{border-bottom:none}
.pop-item:hover{background:var(--bg-surface-2)}
.pop-num{font-family:var(--ff-mono);font-size:10px;font-weight:700;color:var(--tx-muted);width:18px;flex-shrink:0}
.pop-info{flex:1;min-width:0}
.pop-teams{font-size:12px;font-weight:700;color:var(--tx-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pop-league{font-size:10px;color:var(--tx-muted);font-weight:500}
.pop-sel{font-size:11px;font-weight:700;color:var(--c-gold);white-space:nowrap}
.pop-odd{font-family:var(--ff-mono);font-size:13px;font-weight:700;background:var(--bg-surface-3);color:var(--tx-primary);padding:4px 9px;border-radius:7px;border:1px solid var(--border-soft);white-space:nowrap}
.add-btn{width:26px;height:26px;border-radius:6px;background:var(--bg-surface-3);border:1px solid var(--border-soft);color:var(--tx-muted);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;transition:all var(--ease);flex-shrink:0;cursor:pointer}
.add-btn:hover{background:var(--c-green);color:#fff;border-color:var(--c-green)}
.link-item{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-bottom:1px solid var(--border-soft);transition:background var(--ease);cursor:pointer}
.link-item:last-child{border-bottom:none}
.link-item:hover{background:var(--bg-surface-2)}
.link-item span:first-child{font-size:13px;font-weight:600;color:var(--tx-primary)}
.link-item .arrow{color:var(--c-green);font-size:13px;font-weight:700}

/* ── SEO CONTENT ── */
.seo-block{background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--radius-lg);padding:36px 40px;margin-bottom:22px;transition:background var(--ease)}
.seo-block h2{font-family:var(--ff-head);font-size:28px;font-weight:800;color:var(--tx-primary);margin-bottom:12px;letter-spacing:.3px;margin-top:28px}
.seo-block h2:first-child{margin-top:0}
.seo-block h3{font-family:var(--ff-head);font-size:20px;font-weight:800;color:var(--tx-primary);margin-bottom:10px;margin-top:22px;letter-spacing:.2px}
.seo-block p{font-size:14px;color:var(--tx-secondary);line-height:1.85;margin-bottom:14px}
.seo-block p:last-of-type{margin-bottom:0}
.seo-block strong{color:var(--tx-primary);font-weight:700}
.trust-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px;padding-top:20px;border-top:1px solid var(--border-soft)}
.trust-badge{display:flex;align-items:center;gap:7px;background:var(--bg-surface-3);border:1px solid var(--border-soft);padding:8px 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:700;color:var(--tx-secondary)}

/* ── PROMO ── */
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0}
.promo-card{border-radius:var(--radius-md);padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid}
.promo-card.p1{background:linear-gradient(135deg,#0a3d1c,#0f5224);border-color:rgba(255,255,255,.1)}
.promo-card.p2{background:linear-gradient(135deg,#7a3d00,#a05200);border-color:rgba(255,255,255,.1)}
.promo-name{font-family:var(--ff-head);font-size:22px;font-weight:800;color:#fff}
.promo-offer{font-size:13px;color:rgba(255,255,255,.8);font-weight:600;margin-top:2px}
.promo-code{font-family:var(--ff-mono);font-size:12px;background:rgba(255,255,255,.15);color:#fff;padding:4px 10px;border-radius:6px;border:1px dashed rgba(255,255,255,.3);margin-top:6px;display:inline-block}

/* ── ANIMATIONS ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease}
.reveal.visible{opacity:1;transform:translateY(0)}

/* ── SECTION HEADINGS ── */
.section-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;margin-top:28px}
.section-row:first-child{margin-top:0}
.section-title{font-family:var(--ff-head);font-size:22px;font-weight:800;color:var(--tx-primary);letter-spacing:.3px;display:flex;align-items:center;gap:8px}
.section-title::after{content:'';display:inline-block;height:3px;width:26px;background:var(--c-green);border-radius:2px}
.see-all{font-size:12px;font-weight:700;color:var(--c-green);display:flex;align-items:center;gap:4px;transition:gap var(--ease)}
.see-all:hover{gap:8px}
.content-grid{display:grid;grid-template-columns:1fr 320px;gap:22px;padding:22px 0 60px}

/* ── FOOTER ── */
.site-footer{background:var(--bg-surface);border-top:1px solid var(--border-soft);padding:52px 20px 24px;transition:background var(--ease)}
.footer-inner{max-width:var(--max-w);margin:0 auto}
.footer-cols{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:36px;margin-bottom:40px}
.footer-brand .logo-text{font-size:22px;display:block;margin-bottom:12px}
.footer-brand p{font-size:13px;color:var(--tx-muted);line-height:1.7;max-width:230px}
.footer-social{display:flex;gap:8px;margin-top:18px}
.footer-social a{width:36px;height:36px;border-radius:var(--radius-sm);background:var(--bg-surface-3);border:1px solid var(--border-soft);display:flex;align-items:center;justify-content:center;font-size:14px;transition:all var(--ease)}
.footer-social a:hover{background:var(--c-green);border-color:var(--c-green);color:#fff}
.footer-col h3{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tx-primary);margin-bottom:14px}
.footer-col ul li{margin-bottom:8px}
.footer-col ul li a{font-size:13px;color:var(--tx-muted);transition:color var(--ease)}
.footer-col ul li a:hover{color:var(--c-green)}
.footer-bottom{padding-top:22px;border-top:1px solid var(--border-soft);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px}
.footer-bottom p{font-size:12px;color:var(--tx-muted)}
.footer-links{display:flex;gap:16px;align-items:center}
.footer-links a{font-size:12px;color:var(--tx-muted);transition:color var(--ease)}
.footer-links a:hover{color:var(--c-green)}
.age-ring{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:2px solid var(--tx-muted);border-radius:50%;font-size:10px;font-weight:800;color:var(--tx-muted);flex-shrink:0}
.disclaimer{font-size:11px;color:var(--tx-muted);line-height:1.7;text-align:center;margin-top:14px;opacity:.75}

/* ── RESPONSIVE ── */
@media(max-width:1100px){
  .hero-body{grid-template-columns:1fr;gap:32px}
  .hero-stats{grid-template-columns:repeat(4,1fr)}
  .content-grid{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:1fr 1fr}
  .ap-stats{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:768px){
  .acca-row-grid{grid-template-columns:1fr}
  .hero-card{padding:32px 24px}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .pred-head,.pred-row{grid-template-columns:1fr 60px 60px 60px}
  .pred-head span:nth-child(5),.pred-head span:nth-child(6),
  .pred-row>*:nth-child(5),.pred-row>*:nth-child(6){display:none}
  .stats-grid{grid-template-columns:1fr 1fr}
  .promo-grid{grid-template-columns:1fr}
  .primary-nav{display:none}
  .ap-inner{grid-template-columns:auto 1fr;grid-template-rows:auto auto}
  .ap-btts-badge{grid-column:2;grid-row:1;justify-self:end}
  .ap-stats{grid-template-columns:repeat(2,1fr)}
  .ap-stat-cell:nth-child(2){border-right:none}
  .ap-stat-cell:nth-child(1),.ap-stat-cell:nth-child(2){border-bottom:1px solid var(--border-soft)}
  .seo-block{padding:24px 20px}
  .content-grid{display:flex;flex-direction:column}
  .content-grid aside{order:10}
  .xg-player-row{grid-template-columns:18px 1fr 52px 90px}
  .xg-player-row .xg-avatar{display:none}
}
@media(max-width:480px){
  .footer-cols{grid-template-columns:1fr}
  .header-controls .btn-outline{display:none}
}

/* Schema badge */
.schema-note {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  opacity: 0.45;
  font-family: 'JetBrains Mono', monospace;
  margin-bottom: 16px;
}

.schema-note::before {
  content: '{}';
  font-size: 10px;
}

/* FAQ list wrapper */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

/* Individual FAQ item */
.faq-item {
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.faq-item:hover {
  border-color: rgba(212, 175, 55, 0.2);
}

.faq-item[open] {
  border-color: rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.04);
}

/* Question (summary) */
.faq-item summary.faq-question {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Mulish', sans-serif;
  line-height: 1.4;
  user-select: none;
  transition: color 0.2s ease;
}

/* Remove default browser marker */
.faq-item summary.faq-question::-webkit-details-marker { display: none; }
.faq-item summary.faq-question::marker { display: none; }

/* Gold colour when open */
.faq-item[open] summary.faq-question {
  color: #d4af37;
}

/* Plus / minus toggle icon */
.faq-question::after {
  content: '+';
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  text-align: center;
  opacity: 0.6;
  transition: transform 0.25s ease, opacity 0.25s ease, color 0.2s ease;
}

.faq-item[open] .faq-question::after {
  content: '−';
  transform: rotate(180deg);
  opacity: 1;
  color: #d4af37;
}

/* Answer body */
.faq-answer {
  padding: 14px 18px 18px 18px;
  font-size: 14px;
  line-height: 1.75;
  opacity: 0.82;
  font-family: 'Mulish', sans-serif;
  font-weight: 400;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.faq-answer a {
  color: #d4af37;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}

.faq-answer a:hover {
  opacity: 0.75;
}

/* ── HAMBURGER - MODERNIZED ── */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end; /* Right-aligns the asymmetric lines */
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: var(--bg-surface-2);
  border-radius: 10px; /* Soft app-like button */
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: all var(--ease);
}
.hamburger-btn:hover {
  background: var(--bg-surface-3);
  border-color: var(--c-green);
}
.ham-line {
  display: block;
  height: 2px;
  background: var(--tx-primary);
  border-radius: 2px;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s, width .3s;
}
/* Asymmetric lines for a modern feel */
.ham-line:nth-child(1) { width: 100%; }
.ham-line:nth-child(2) { width: 75%; } 
.ham-line:nth-child(3) { width: 100%; }

/* Hamburger → X Animation */
.hamburger-btn.is-open .ham-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  width: 100%;
}
.hamburger-btn.is-open .ham-line:nth-child(2) {
  opacity: 0;
  width: 0;
}
.hamburger-btn.is-open .ham-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  width: 100%;
}

/* ── MOBILE NAV DRAWER - MODERNIZED ── */
.mobile-nav-overlay {
  visibility: hidden;
  pointer-events: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 26, 18, 0.4); 
  backdrop-filter: blur(6px); /* Glassmorphism effect */
  -webkit-backdrop-filter: blur(6px);
  z-index: 300;
  opacity: 0;
  transition: opacity .4s ease, visibility .4s ease;
}
.mobile-nav-overlay.open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 85vw);
  background: var(--bg-surface);
  z-index: 400;
  box-shadow: -12px 0 40px rgba(0,0,0,.15);
  border-radius: 24px 0 0 24px; /* Soft floating panel look */
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .45s cubic-bezier(0.16, 1, 0.3, 1), visibility .45s; /* Smooth spring easing */
  overflow-y: auto;
  overflow-x: hidden;
}
.mobile-nav-drawer.open {
  transform: translateX(0);
  visibility: visible;
}

/* Drawer Header */
.mob-nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 24px 16px; 
  background: transparent;
  flex-shrink: 0;
}
.mob-nav-title {
  font-family: var(--ff-head);
  font-size: 22px;
  font-weight: 800;
  color: var(--tx-primary);
  letter-spacing: .5px;
}
.mob-nav-close {
  width: 36px;
  height: 36px;
  border-radius: 50%; /* Circular close button */
  border: none;
  background: var(--bg-surface-2);
  color: var(--tx-secondary);
  font-size: 16px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .2s ease;
}
.mob-nav-close:hover {
  background: var(--c-green);
  color: #fff;
  transform: rotate(90deg) scale(1.05); /* Playful hover state */
}

/* Nav Sections & Links */
.mob-nav-section {
  padding: 12px 16px; /* Inset spacing for pills */
  border-bottom: 1px dashed var(--border-soft); /* Subtle divider */
}
.mob-nav-section:last-child {
  border-bottom: none;
  padding-bottom: 30px;
}
.mob-nav-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx-muted);
  padding: 0 12px 10px;
}
.mob-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--tx-secondary);
  text-decoration: none;
  border-radius: 12px; /* Pill-shaped hover areas */
  transition: all .25s ease;
}

.mob-nav-link:hover,
.mob-nav-link.active {
  background: var(--c-green-pale);
  color: var(--c-green);
  transform: translateX(4px); /* Slight interactive nudge */
}

/* Prevent body scroll when drawer is open */
body.nav-open {
  overflow: hidden;
}

/* Re-apply hamburger display logic for mobile breakpoints */
@media(max-width:900px){
  .hamburger-btn{display:flex}
}

/* Nav Sections & Links (2-Column Grid) */
.mob-nav-section {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Creates exactly 2 equal columns */
  gap: 10px; /* Space between the tiles */
  padding: 20px; 
  border-bottom: 1px dashed var(--border-soft);
}

.mob-nav-section:last-child {
  border-bottom: none;
  padding-bottom: 30px;
}

/* Make the heading span all the way across both columns */
.mob-nav-label {
  grid-column: 1 / -1; 
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tx-muted);
  padding: 0 0 6px 0; 
}

/* Style the links as modern touch-friendly tiles */
.mob-nav-link {
  display: flex;
  align-items: center;
  justify-content: center; /* Centers the text */
  text-align: center;
  padding: 12px 8px;
  font-size: 13px; /* Slightly smaller to fit side-by-side cleanly */
  font-weight: 700;
  color: var(--tx-secondary);
  text-decoration: none;
  background: var(--bg-surface-2); /* Soft resting background */
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  transition: all .2s ease;
  line-height: 1.2;
}

/* Active & Hover states */
.mob-nav-link:hover,
.mob-nav-link.active {
  background: var(--c-green-pale);
  color: var(--c-green);
  border-color: rgba(26, 122, 60, 0.25);
  transform: translateY(-2px); /* Slight lift effect */
  box-shadow: 0 4px 12px rgba(26, 122, 60, 0.1);
}

/* nav links inside drawer */
.mob-nav-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-soft);
}
.mob-nav-section:last-child {
  border-bottom: none;
}
.mob-nav-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tx-muted);
  padding: 6px 20px 10px;
}
.mob-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  color: var(--tx-secondary);
  text-decoration: none;
  transition: background var(--ease), color var(--ease);
  border-left: 3px solid transparent;
}
.mob-nav-link:hover,
.mob-nav-link.active {
  background: var(--c-green-pale);
  color: var(--c-green);
  border-left-color: var(--c-green);
}
.mob-nav-link .mob-icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}

/* hamburger → X animation */
.hamburger-btn.is-open .ham-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.is-open .ham-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger-btn.is-open .ham-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* prevent body scroll when drawer is open */
body.nav-open {
  overflow: hidden;
}

   /* ── xG Table ── */
.xg-table { width:100%; border-collapse:collapse; font-size:13px; }
.xg-table thead th { padding:10px 12px; text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.6px; opacity:.55; font-weight:700; border-bottom:2px solid rgba(0,0,0,.07); white-space:nowrap; }
.xg-table thead th.right { text-align:right; }
.xg-table tbody tr { border-bottom:1px solid rgba(0,0,0,.05); transition:background .15s; }
.xg-table tbody tr:hover { background:rgba(0,0,0,.025); }
.xg-table tbody td { padding:10px 12px; vertical-align:middle; }
.xg-table .pos { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; opacity:.5; width:28px; }
.xg-table .team-name { font-weight:600; font-size:13px; }
.xg-table .team-sub  { font-size:11px; opacity:.55; margin-top:1px; }
.xg-table .num { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; text-align:right; }
.xg-table .num-pos { color:#16a34a; }
.xg-table .num-neg { color:#dc2626; }
.xg-table .num-gold { color:#b07c00; }

/* ── xG bar ── */
.xg-bar-wrap { display:flex; align-items:center; gap:8px; min-width:120px; }
.xg-bar-track { flex:1; height:6px; background:rgba(0,0,0,.08); border-radius:4px; overflow:hidden; min-width:70px; }
.xg-bar-fill  { height:100%; border-radius:4px; transition:width .4s ease; }
/* KEY FIX: width must be set inline via JS — e.g. style="width:75%" */
.xg-bar-for     { background:linear-gradient(90deg,#e5a100,#f5c842); }
.xg-bar-against { background:linear-gradient(90deg,#dc2626,#f87171); }
.xg-bar-label { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; white-space:nowrap; min-width:36px; text-align:right; }

/* ── League tab nav ── */
.tab-nav { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
.tab-btn { padding:7px 14px; border-radius:20px; font-size:12px; font-weight:700; cursor:pointer; border:2px solid rgba(0,0,0,.1); background:transparent; transition:all .2s; font-family:'Mulish',sans-serif; }
.tab-btn.active, .tab-btn:hover { background:var(--accent,#e5a100); color:#fff; border-color:var(--accent,#e5a100); }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ── Match xG card ── */
.xg-match-head { display:flex; justify-content:space-between; align-items:center; padding:12px 16px 8px; border-bottom:1px solid rgba(0,0,0,.06); flex-wrap:wrap; gap:6px; }
.xg-match-teams { font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:700; letter-spacing:.5px; }
.xg-match-meta  { font-size:11px; opacity:.55; }
.xg-vs-row { display:grid; grid-template-columns:1fr auto 1fr; gap:12px; align-items:center; padding:14px 16px; }
.xg-team-col { display:flex; flex-direction:column; gap:6px; }
.xg-team-col.right { align-items:flex-end; text-align:right; }
.xg-team-name { font-weight:700; font-size:13px; }
.xg-figure    { font-family:'Barlow Condensed',sans-serif; font-size:28px; font-weight:800; line-height:1; }
.xg-figure.high { color:#16a34a; }
.xg-figure.med  { color:#b07c00; }
.xg-figure.low  { color:#dc2626; }
.xg-vs-divider { font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:700; opacity:.3; text-align:center; }

/* ── Dual bar (match split) ── */
.xg-bar-dual { display:flex; align-items:center; padding:0 16px 14px; }
.xg-dual-home { height:8px; border-radius:4px 0 0 4px; background:linear-gradient(90deg,#e5a100,#f5c842); }
.xg-dual-away { height:8px; border-radius:0 4px 4px 0; background:linear-gradient(90deg,#3b82f6,#60a5fa); }
/* KEY FIX: set width inline via JS using xG split percentage */
/* e.g. home: style="width:62%" away: style="width:38%" */

.xg-legend    { display:flex; gap:16px; padding:0 16px 12px; flex-wrap:wrap; }
.xg-legend-item { display:flex; align-items:center; gap:6px; font-size:11px; opacity:.7; }
.xg-legend-dot  { width:10px; height:10px; border-radius:2px; flex-shrink:0; }

/* ── Diff badge ── */
.diff-badge { display:inline-flex; align-items:center; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:700; font-family:'JetBrains Mono',monospace; }
.diff-pos { background:rgba(34,197,94,.12); color:#16a34a; }
.diff-neg { background:rgba(239,68,68,.10); color:#dc2626; }
.diff-neu { background:rgba(156,163,175,.15); color:#6b7280; }

/* ── Section label pill ── */
.section-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
.pill-blue  { background:rgba(59,130,246,.12); color:#1d4ed8; }
.pill-green { background:rgba(34,197,94,.12); color:#15803d; }
.pill-red   { background:rgba(239,68,68,.10); color:#b91c1c; }
.pill-gold  { background:rgba(229,161,0,.14); color:#92400e; }


    /* ── Stats Hub Card ── */
    .hub-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-bottom:4px; }
    .hub-card { border-radius:14px; overflow:hidden; border:1px solid rgba(0,0,0,.08); background:var(--card-bg,#fff); transition:transform .2s, box-shadow .2s; cursor:pointer; text-decoration:none; display:block; }
    .hub-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.10); }
    .hub-card-banner { height:6px; width:100%; }
    .hub-card-body { padding:18px 18px 14px; }
    .hub-card-icon { font-size:28px; line-height:1; margin-bottom:8px; }
    .hub-card-title { font-family:'Barlow Condensed',sans-serif; font-size:20px; font-weight:700; letter-spacing:.4px; margin-bottom:4px; color:var(--text-primary,#111); }
    .hub-card-desc { font-size:12px; opacity:.65; line-height:1.5; margin-bottom:12px; }
    .hub-card-stats { display:flex; gap:10px; flex-wrap:wrap; }
    .hub-stat { display:flex; flex-direction:column; align-items:center; padding:6px 10px; border-radius:8px; background:rgba(0,0,0,.04); min-width:50px; }
    .hub-stat-val { font-family:'JetBrains Mono',monospace; font-size:16px; font-weight:700; line-height:1; }
    .hub-stat-lbl { font-size:9px; text-transform:uppercase; letter-spacing:.4px; opacity:.55; margin-top:2px; white-space:nowrap; }
    .hub-card-link { display:flex; align-items:center; gap:4px; font-size:12px; font-weight:700; opacity:.6; padding-top:12px; border-top:1px solid rgba(0,0,0,.06); margin-top:2px; }
    /* Banner colours */
    .banner-gold  { background:linear-gradient(90deg,#e5a100,#fcd34d); }
    .banner-green { background:linear-gradient(90deg,#16a34a,#4ade80); }
    .banner-blue  { background:linear-gradient(90deg,#2563eb,#60a5fa); }
    .banner-red   { background:linear-gradient(90deg,#dc2626,#f87171); }
    .banner-purple{ background:linear-gradient(90deg,#7c3aed,#a78bfa); }
    .banner-teal  { background:linear-gradient(90deg,#0d9488,#2dd4bf); }
    /* ── League snapshot row ── */
    .league-snap-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
    .league-snap { border-radius:10px; padding:12px 10px; border:1px solid rgba(0,0,0,.07); background:var(--card-bg,#fff); text-align:center; }
    .ls-flag { font-size:20px; line-height:1; margin-bottom:4px; }
    .ls-name { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; opacity:.55; margin-bottom:8px; }
    .ls-row  { display:flex; justify-content:space-between; font-size:11px; padding:2px 0; border-bottom:1px solid rgba(0,0,0,.05); }
    .ls-row:last-child { border-bottom:none; }
    .ls-key  { opacity:.6; }
    .ls-val  { font-family:'JetBrains Mono',monospace; font-weight:700; }
    .ls-val-hi  { color:#16a34a; }
    .ls-val-mid { color:#b07c00; }
    .ls-val-lo  { color:#dc2626; }
    /* ── Team spotlight ── */
    .spotlight-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
    .spotlight-cell { border-radius:10px; border:1px solid rgba(0,0,0,.07); background:var(--card-bg,#fff); padding:14px; }
    .sc-label  { font-size:10px; text-transform:uppercase; letter-spacing:.5px; opacity:.55; font-weight:700; margin-bottom:6px; }
    .sc-team   { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:700; letter-spacing:.3px; }
    .sc-league { font-size:11px; opacity:.55; margin-bottom:8px; }
    .sc-val    { font-family:'JetBrains Mono',monospace; font-size:28px; font-weight:800; line-height:1; margin-bottom:2px; }
    .sc-sub    { font-size:11px; opacity:.6; }
    /* ── Comparison table ── */
    .comp-table { width:100%; border-collapse:collapse; font-size:13px; }
    .comp-table thead th { padding:9px 12px; text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.6px; opacity:.5; font-weight:700; border-bottom:2px solid rgba(0,0,0,.07); white-space:nowrap; }
    .comp-table tbody tr { border-bottom:1px solid rgba(0,0,0,.04); }
    .comp-table tbody tr:hover { background:rgba(0,0,0,.02); }
    .comp-table tbody td { padding:9px 12px; vertical-align:middle; }
    .comp-table .num { font-family:'JetBrains Mono',monospace; font-weight:700; text-align:right; }
    .rate-bar-sm { display:inline-block; height:6px; border-radius:3px; vertical-align:middle; margin-left:6px; }
    /* ── Section divider ── */
    .sec-divider { display:flex; align-items:center; gap:12px; margin:28px 0 16px; }
    .sec-divider-line { flex:1; height:1px; background:rgba(0,0,0,.08); }
    .sec-divider-label { font-family:'Barlow Condensed',sans-serif; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.8px; opacity:.45; white-space:nowrap; }
    /* ── Record table ── */
    .record-table { width:100%; border-collapse:collapse; font-size:12px; }
    .record-table th { padding:8px 10px; text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.5px; opacity:.5; font-weight:700; border-bottom:1px solid rgba(0,0,0,.07); }
    .record-table td { padding:8px 10px; border-bottom:1px solid rgba(0,0,0,.04); vertical-align:middle; }
    .record-table .medal { font-size:14px; }
    .record-table .big-num { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; }
  
  
    /* ── Home Win Table ── */
    .hw-table { width:100%; border-collapse:collapse; font-size:13px; }
    .hw-table thead th { padding:10px 12px; text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.6px; opacity:.55; font-weight:700; border-bottom:2px solid rgba(0,0,0,.07); white-space:nowrap; }
    .hw-table tbody tr { border-bottom:1px solid rgba(0,0,0,.05); transition:background .15s; }
    .hw-table tbody tr:hover { background:rgba(0,0,0,.025); }
    .hw-table tbody td { padding:10px 12px; vertical-align:middle; }
    .hw-table .pos { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; opacity:.5; width:28px; }
    .hw-table .team-name { font-weight:600; font-size:13px; }
    .hw-table .team-sub  { font-size:11px; opacity:.55; margin-top:1px; }
    .hw-table .num { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; text-align:right; }
    /* Thresholds for Home Win (High > 70%, Mid 50-69%, Low < 50%) */
    .hw-table .num-hi  { color:#16a34a; }
    .hw-table .num-mid { color:#b07c00; }
    .hw-table .num-lo  { color:#dc2626; }
    /* Home Win rate bar */
    .hw-bar-wrap { display:flex; align-items:center; gap:8px; min-width:110px; }
    .hw-bar-track { flex:1; height:7px; background:rgba(0,0,0,.08); border-radius:4px; overflow:hidden; min-width:60px; }
    .hw-bar-fill  { height:100%; border-radius:4px; }
    .hw-bar-green { background:linear-gradient(90deg,#16a34a,#4ade80); }
    .hw-bar-gold  { background:linear-gradient(90deg,#e5a100,#fcd34d); }
    .hw-bar-red   { background:linear-gradient(90deg,#dc2626,#f87171); }
    .hw-bar-label { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; min-width:36px; text-align:right; }
    /* ── Tab nav ── */
    .tab-nav { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px; }
    .tab-btn { padding:7px 14px; border-radius:20px; font-size:12px; font-weight:700; cursor:pointer; border:2px solid rgba(0,0,0,.1); background:transparent; transition:all .2s; font-family:'Mulish',sans-serif; }
    .tab-btn.active, .tab-btn:hover { background:var(--accent,#e5a100); color:#fff; border-color:var(--accent,#e5a100); }
    .tab-panel { display:none; }
    .tab-panel.active { display:block; }
    /* ── Rate badge ── */
    .rate-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700; font-family:'JetBrains Mono',monospace; }
    .rate-hi  { background:rgba(34,197,94,.13); color:#15803d; }
    .rate-mid { background:rgba(229,161,0,.14); color:#92400e; }
    .rate-lo  { background:rgba(239,68,68,.10); color:#b91c1c; }
    /* ── Section pill ── */
    .section-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:10px; }
    .pill-green { background:rgba(34,197,94,.12); color:#15803d; }
    .pill-red   { background:rgba(239,68,68,.10); color:#b91c1c; }
    .pill-gold  { background:rgba(229,161,0,.14); color:#92400e; }
    .pill-blue  { background:rgba(59,130,246,.12); color:#1d4ed8; }
    /* ── League summary card ── */
    .league-rate-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; padding:14px 16px; }
    .league-rate-cell { display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 10px; border-radius:10px; background:rgba(0,0,0,.03); border:1px solid rgba(0,0,0,.06); text-align:center; }
    .lrc-flag  { font-size:22px; line-height:1; }
    .lrc-name  { font-size:11px; font-weight:700; opacity:.6; text-transform:uppercase; letter-spacing:.4px; }
    .lrc-rate  { font-family:'Barlow Condensed',sans-serif; font-size:30px; font-weight:800; line-height:1; }
    .lrc-games { font-size:10px; opacity:.5; }
    .lrc-hi    { color:#16a34a; }
    .lrc-mid   { color:#b07c00; }
    .lrc-lo    { color:#dc2626; }
    /* ── H2H record row ── */
    .h2h-row { display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid rgba(0,0,0,.05); flex-wrap:wrap; }
    .h2h-teams { font-weight:600; font-size:13px; flex:1; min-width:180px; }
    .h2h-league { font-size:11px; opacity:.55; }
    .h2h-record { display:flex; gap:6px; align-items:center; }
    .h2h-pip-wrap { display:flex; gap:3px; }
    .h2h-pip { width:12px; height:12px; border-radius:3px; }
    .h2h-pip-yes { background:#16a34a; }
    .h2h-pip-no  { background:#dc2626; }
    .h2h-streak { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; }
    /* ── Match preview head ── */
    .hw-match-head { display:flex; justify-content:space-between; align-items:center; padding:12px 16px 8px; border-bottom:1px solid rgba(0,0,0,.06); flex-wrap:wrap; gap:6px; }
    .hw-match-teams { font-family:'Barlow Condensed',sans-serif; font-size:17px; font-weight:700; letter-spacing:.5px; }
    .hw-match-meta  { font-size:11px; opacity:.55; }
    /* ── Scoring/conceding pill ── */
    .sc-pill { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:700; }
    .sc-scored    { background:rgba(34,197,94,.12); color:#15803d; }
    .sc-conceded  { background:rgba(239,68,68,.10); color:#b91c1c; }
    /* ── Streak tracker ── */
    .streak-row { display:flex; gap:4px; flex-wrap:wrap; padding:8px 16px 12px; }
    .streak-box { width:28px; height:28px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; color:#fff; flex-shrink:0; }
    .streak-y { background:#16a34a; }
    .streak-n { background:#dc2626; }
    .streak-label { font-size:11px; opacity:.6; padding:0 16px 8px; }