/* GoalZone - style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ── DARK THEME (default) ── */
:root {
  --bg:#0A0D13;--s1:#111318;--s2:#181C24;--s3:#1E2330;--s4:#252A36;
  --green:#1DB954;--green2:#17A348;--red:#E8314A;--gold:#F5A623;--blue:#4A90E2;
  --t1:#FFFFFF;--t2:#A0A8B8;--t3:#5A6070;--t4:#363C4A;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.13);
  --font:'Inter',sans-serif;--radius:10px;--radius-lg:14px;
  --shadow:0 2px 12px rgba(0,0,0,0.4);
}
/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg:#F0F2F5;--s1:#FFFFFF;--s2:#F8F9FB;--s3:#ECEEF2;--s4:#E2E5EA;
  --t1:#0A0D13;--t2:#4A5568;--t3:#8A96A8;--t4:#C8CDD8;
  --border:rgba(0,0,0,0.08);--border2:rgba(0,0,0,0.14);
  --shadow:0 2px 12px rgba(0,0,0,0.08);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{background:var(--bg);font-family:var(--font);color:var(--t1);font-size:14px;line-height:1.5;transition:background .3s,color .3s;overflow-x:hidden;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}
button{cursor:pointer;font-family:var(--font);border:none;background:none;}
::-webkit-scrollbar{width:4px;height:4px;}
::-webkit-scrollbar-track{background:var(--s1);}
::-webkit-scrollbar-thumb{background:var(--t4);border-radius:2px;}

/* ── THEME PILL ── */
.theme-pill-track{position:relative;display:flex;align-items:center;background:var(--s3);border:1px solid var(--border2);border-radius:20px;padding:3px;cursor:pointer;}
.theme-pill-opt{position:relative;z-index:2;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:13px;border-radius:16px;cursor:pointer;color:rgba(255,255,255,.35);transition:color .2s;}
.theme-pill-thumb{position:absolute;top:3px;left:3px;width:28px;height:28px;background:#fff;border-radius:16px;transition:transform .25s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 4px rgba(0,0,0,.3);z-index:1;}
[data-theme="light"] .theme-pill-thumb{transform:translateX(30px);background:#1E2330;}
[data-theme="dark"] .theme-pill-opt[data-val="dark"]{color:#fff;}
[data-theme="light"] .theme-pill-opt[data-val="light"]{color:#fff;}

/* ── NAVBAR ── */
.navbar{position:sticky;top:0;z-index:1000;background:var(--s1);border-bottom:1px solid var(--border);}
.navbar-inner{width:100%;max-width:100%;display:flex;align-items:center;height:60px;padding:0 20px;box-sizing:border-box;}
.logo-link{display:flex;align-items:center;gap:10px;}
.logo-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;}
.logo-text{display:flex;flex-direction:column;}
.logo-name{font-size:17px;font-weight:900;letter-spacing:-.5px;line-height:1;}
.logo-name strong{color:var(--green);}
.logo-sub{font-size:8px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--t3);margin-top:1px;}
.nb-links{display:flex;height:60px;flex:1;margin-left:24px;}
.nb-link{height:100%;display:flex;align-items:center;padding:0 14px;font-size:13px;font-weight:600;color:var(--t2);border-bottom:2px solid transparent;transition:.15s;white-space:nowrap;}
.nb-link:hover{color:var(--t1);}
.nb-link.on{color:var(--green);border-bottom-color:var(--green);}
.nb-right{display:flex;align-items:center;gap:8px;margin-left:auto;}
.nb-btn{width:34px;height:34px;background:var(--s3);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--t2);transition:.15s;position:relative;}
.nb-btn:hover{background:var(--s4);color:var(--t1);}
.nb-badge{position:absolute;top:5px;right:5px;width:8px;height:8px;background:var(--red);border-radius:50%;border:1px solid var(--s1);}
.nb-hamburger{display:none;flex-direction:column;gap:4px;width:34px;height:34px;align-items:center;justify-content:center;background:var(--s3);border-radius:8px;border:1px solid var(--border);}
.nb-hamburger span{display:block;width:16px;height:2px;background:var(--t2);border-radius:1px;}
.nb-search-bar{display:none;padding:10px 16px;border-top:1px solid var(--border);background:var(--s1);}
.nb-search-bar.open{display:block;}
.nb-search-inner{max-width:600px;margin:0 auto;display:flex;align-items:center;gap:10px;background:var(--s3);border:1px solid var(--border2);border-radius:8px;padding:8px 14px;}
.nb-search-inner i{color:var(--t3);}
.nb-search-inner input{flex:1;background:none;border:none;outline:none;color:var(--t1);font-size:14px;font-family:var(--font);}
.nb-search-inner input::placeholder{color:var(--t3);}

/* ── LIVE PILL ── */
.nb-live-pill{display:flex;align-items:center;gap:5px;background:rgba(232,49,74,.12);border:1px solid rgba(232,49,74,.3);border-radius:20px;padding:5px 10px;cursor:pointer;transition:.2s;white-space:nowrap;}
.nb-live-pill:hover{background:rgba(232,49,74,.22);}
.nb-live-dot{width:7px;height:7px;border-radius:50%;background:#E8314A;box-shadow:0 0 6px rgba(232,49,74,.8);animation:blink 1s infinite;}
.nb-live-num{font-size:12px;font-weight:800;color:#E8314A;}
@media(max-width:480px){.nb-live-num{display:none;}.nb-live-pill{padding:6px 8px;}}

/* ── TICKER ── */
.ticker-bar{height:32px;background:rgba(29,185,84,.05);border-bottom:1px solid rgba(29,185,84,.12);display:flex;align-items:center;overflow:hidden;}
.ticker-label{min-width:70px;height:100%;display:flex;align-items:center;justify-content:center;gap:5px;background:rgba(29,185,84,.1);border-right:1px solid rgba(29,185,84,.2);font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--green);flex-shrink:0;}
.ticker-label i{font-size:7px;animation:blink 1s infinite;}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.2;}}
.ticker-wrap{flex:1;overflow:hidden;}
.ticker-inner{display:flex;white-space:nowrap;animation:tickerScroll 40s linear infinite;}
.ticker-inner:hover{animation-play-state:paused;}
@keyframes tickerScroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}
.ticker-item{display:inline-flex;align-items:center;gap:7px;padding:0 20px;height:32px;border-right:1px solid var(--border);font-size:11px;color:var(--t2);}
.ticker-item .ti-score{font-weight:700;color:var(--t1);}
.ticker-item .ti-min{font-size:9px;color:var(--green);font-weight:600;}
.ticker-loading{padding:0 20px;font-size:11px;color:var(--t3);}

/* ── MOBILE MENU ── */
.mobile-menu{display:none;position:fixed;inset:0;z-index:999;background:rgba(0,0,0,.8);}
.mobile-menu.open{display:flex;}
.mm-inner{width:260px;height:100%;background:var(--s1);border-right:1px solid var(--border);padding:60px 0 20px;overflow-y:auto;}
.mm-item{display:flex;align-items:center;gap:12px;padding:13px 20px;font-size:14px;font-weight:600;color:var(--t2);border-left:3px solid transparent;transition:.15s;}
.mm-item:hover{color:var(--t1);}
.mm-item i{width:18px;text-align:center;}

/* ── PAGE LAYOUT ── */
.page-layout{display:grid;grid-template-columns:210px 1fr;width:100%;min-height:calc(100vh - 92px);}

/* ── SIDEBAR ── */
.sidebar{background:var(--s1);border-right:1px solid var(--border);padding:14px 0;position:sticky;top:92px;width:210px;height:calc(100vh - 92px);overflow-y:auto;flex-shrink:0;}
.sb-live-pill{margin:0 12px 14px;background:var(--green);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:8px;cursor:pointer;}
.sb-live-txt{font-size:13px;font-weight:800;color:#000;flex:1;}
.sb-live-count{background:rgba(0,0,0,.25);border-radius:20px;padding:1px 8px;font-size:11px;font-weight:900;color:#000;}
.sb-section-label{font-size:9px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--t3);padding:0 14px 6px;margin-top:4px;}
.sb-item{display:flex;align-items:center;gap:9px;padding:9px 14px;color:var(--t2);font-size:12px;font-weight:600;cursor:pointer;border-left:2px solid transparent;transition:.15s;text-decoration:none;}
.sb-item:hover{background:rgba(0,0,0,.03);color:var(--t1);}
.sb-item.on{color:var(--green);border-left-color:var(--green);background:rgba(29,185,84,.06);}
.sb-item i{width:16px;text-align:center;font-size:13px;}
.sb-item-name{flex:1;}
.sb-item-arr{font-size:10px;color:var(--t3);}
.sb-item-badge{font-size:9px;background:var(--red);border-radius:10px;padding:1px 5px;font-weight:700;color:#fff;}
.sb-item img{flex-shrink:0;}
.sb-sep{height:1px;background:var(--border);margin:8px 12px;}
.sb-promo{margin:10px 12px;background:linear-gradient(135deg,#0d1f3d,#0a3520);border:1px solid rgba(29,185,84,.25);border-radius:10px;padding:14px;}
.sb-promo-badge{font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--green);}
.sb-promo-big{font-size:24px;font-weight:900;color:var(--green);line-height:1.1;margin:4px 0;}
.sb-promo-txt{font-size:11px;color:var(--t2);margin-bottom:10px;line-height:1.4;}
.sb-promo-btn{background:var(--green);border-radius:6px;padding:8px;text-align:center;font-size:11px;font-weight:800;color:#000;cursor:pointer;}
.sb-download{margin:10px 12px 0;padding:10px;border:1px solid var(--border);border-radius:8px;}
.sb-dl-label{font-size:9px;color:var(--t3);margin-bottom:7px;display:flex;align-items:center;gap:4px;}
.sb-dl-btns{display:flex;gap:6px;}
.sb-dl-btn{flex:1;background:var(--s3);border:1px solid var(--border2);border-radius:5px;padding:5px 6px;font-size:9px;font-weight:600;color:var(--t2);text-align:center;cursor:pointer;}

/* ── MAIN CONTENT ── */
.main-content{padding:16px;min-height:600px;overflow-x:hidden;box-sizing:border-box;}

/* ── LEAGUE STRIP ── */
.league-strip{display:flex;background:var(--s1);border:1px solid var(--border);border-radius:var(--radius);overflow-x:auto;margin-bottom:16px;scrollbar-width:none;}
.league-strip::-webkit-scrollbar{display:none;}
.ls-item{flex-shrink:0;flex:1;min-width:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 8px;border-right:1px solid var(--border);cursor:pointer;transition:.15s;gap:4px;}
.ls-item:last-child{border-right:none;}
.ls-item:hover{background:rgba(29,185,84,.06);}
.ls-item.on{background:rgba(29,185,84,.1);}
.ls-logo{width:28px;height:28px;display:flex;align-items:center;justify-content:center;}
.ls-logo img{width:26px;height:26px;object-fit:contain;}
.ls-name{font-size:8px;font-weight:700;color:var(--t3);text-align:center;}
.ls-item.on .ls-name{color:var(--green);}
.ls-live-count{font-size:7px;color:var(--green);font-weight:700;}

/* ── HERO ── */
.hero{position:relative;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:16px;height:220px;min-height:220px;max-height:220px;border:1px solid var(--border2);background:linear-gradient(135deg,#0a1628,#0d2b12,#0a1230);display:block;width:100%;}
.hero-bg-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,rgba(0,15,50,.6) 0%,rgba(0,0,0,.1) 40%,rgba(0,0,0,.1) 60%,rgba(0,20,8,.6) 100%);z-index:0;}
.hero-grass{position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,rgba(5,40,15,.4),transparent);z-index:1;}
.hero-content{position:absolute !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;z-index:3 !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;text-align:center !important;padding:12px 20px !important;box-sizing:border-box !important;}
.hero-eyebrow{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:3px;}
.hero-featured-tag{font-size:9px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.hero-comp-badge{display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:8px;}
.hero-comp-img{width:16px;height:16px;object-fit:contain;}
.hero-comp-name{font-size:10px;font-weight:700;color:var(--t2);letter-spacing:.04em;text-transform:uppercase;}
.hero-scoreline{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:6px;width:100%;max-width:600px;}
.hero-team{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:150px;min-width:0;}
.hero-team-logo{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:3px;}
.hero-team-logo img{width:34px;height:34px;object-fit:contain;}
.hero-team-name{font-size:13px;font-weight:800;text-align:center;}
.hero-score-center{min-width:140px;max-width:160px;text-align:center;flex-shrink:0;display:flex;flex-direction:column;align-items:center;}
.hero-live-tag{display:inline-flex;align-items:center;gap:5px;background:var(--red);border-radius:4px;padding:2px 8px;font-size:9px;font-weight:900;margin-bottom:4px;}
.hero-live-dot{width:5px;height:5px;border-radius:50%;background:#fff;animation:blink 1s infinite;}
.hero-score{font-size:42px;font-weight:900;letter-spacing:-2px;line-height:1;color:#fff;}
.hero-minute{font-size:13px;font-weight:700;color:var(--green);}
.hero-venue{font-size:9px;color:var(--t2);display:flex;align-items:center;gap:4px;justify-content:center;margin-top:2px;}
.hero-btns{display:flex;gap:8px;margin-top:10px;justify-content:center;}
.hero-btn-primary{display:flex;align-items:center;gap:6px;background:var(--green);border-radius:7px;padding:7px 14px;font-size:12px;font-weight:700;color:#000;}
.hero-btn-primary:hover{background:var(--green2);}
.hero-btn-secondary{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:7px;padding:7px 14px;font-size:12px;font-weight:600;color:#fff;}

/* ── SECTION HEADER ── */
.section-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.section-title{font-size:13px;font-weight:800;}
.section-more{font-size:12px;font-weight:600;color:var(--green);}

/* ── LIVE MATCH CARDS ── */
.live-cards-row{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px;scrollbar-width:thin;max-width:100%;}
.live-cards-row::-webkit-scrollbar{height:3px;}
.match-card{min-width:180px;flex-shrink:0;background:var(--s2);border:1px solid var(--border);border-radius:var(--radius);padding:11px;cursor:pointer;transition:.15s;}
.match-card:hover{border-color:rgba(29,185,84,.35);background:var(--s3);}
.mc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;}
.mc-live-badge{display:flex;align-items:center;gap:3px;background:var(--red);border-radius:4px;padding:2px 5px;font-size:8px;font-weight:800;color:#fff;}
.mc-live-dot{width:4px;height:4px;border-radius:50%;background:#fff;animation:blink 1s infinite;}
.mc-min{font-size:9px;font-weight:700;color:rgba(255,255,255,.8);margin-left:2px;}
.mc-comp{font-size:9px;color:var(--t2);font-weight:600;display:flex;align-items:center;gap:4px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mc-body{display:flex;align-items:center;gap:10px;}
.mc-teams{flex:1;}
.mc-team{display:flex;align-items:center;gap:7px;padding:3px 0;}
.mc-team-logo{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.mc-team-logo img{width:16px;height:16px;object-fit:contain;}
.mc-team-name{font-size:12px;font-weight:600;color:var(--t2);}
.mc-team.winning .mc-team-name{color:var(--t1);font-weight:700;}
.mc-scores{display:flex;flex-direction:column;gap:4px;align-items:flex-end;justify-content:center;}
.mc-score{font-size:16px;font-weight:900;color:var(--t2);}
.mc-score.winning{color:var(--t1);}

/* ── 3-COLUMN GRID ── */
.grid-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px;}

/* ── PANEL ── */
.panel{background:var(--s2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;overflow:hidden;}
.panel-title{font-size:13px;font-weight:800;margin-bottom:12px;display:flex;align-items:center;gap:6px;}
.panel-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:12px;overflow-x:auto;scrollbar-width:none;}
.panel-tabs::-webkit-scrollbar{display:none;}
.ptab{padding:5px 10px;font-size:11px;font-weight:600;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s;white-space:nowrap;}
.ptab:hover{color:var(--t2);}
.ptab.on{color:var(--green);border-bottom-color:var(--green);}

/* ── STANDINGS ── */
.standings-table{width:100%;border-collapse:collapse;}
.standings-table th{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--t3);padding:0 4px 8px;text-align:right;}
.standings-table th:nth-child(1),.standings-table th:nth-child(2){text-align:left;}
.standings-table td{padding:6px 4px;font-size:11px;color:var(--t2);text-align:right;vertical-align:middle;}
.standings-table td:nth-child(1){text-align:left;font-size:10px;font-weight:700;width:18px;}
.standings-table td:nth-child(2){text-align:left;font-size:12px;font-weight:700;color:var(--t1);}
.standings-table tr:hover td{background:rgba(0,0,0,.03);}
.standings-table .pts{color:var(--t1);font-weight:800;}
.pos-ucl{color:var(--green);}
.pos-uel{color:var(--gold);}
.pos-rel{color:var(--red);}
.team-cell{display:flex;align-items:center;gap:7px;}
.team-cell img{width:18px;height:18px;object-fit:contain;}
.standings-more{text-align:center;margin-top:10px;}
.standings-more button{font-size:11px;font-weight:600;color:var(--green);background:none;border:none;cursor:pointer;}

/* ── TOP SCORERS ── */
.scorers-header{display:flex;justify-content:flex-end;margin-bottom:8px;}
.scorers-header span{font-size:9px;color:var(--t3);font-weight:700;letter-spacing:.05em;text-transform:uppercase;}
.scorer-row{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--border);}
.scorer-row:last-child{border-bottom:none;}
.scorer-rank{font-size:11px;font-weight:700;color:var(--t3);min-width:16px;}
.scorer-photo{width:32px;height:32px;border-radius:50%;overflow:hidden;flex-shrink:0;background:rgba(255,255,255,.06);}
.scorer-photo img{width:32px;height:32px;object-fit:cover;border-radius:50%;}
.scorer-info{flex:1;}
.scorer-name{font-size:12px;font-weight:700;}
.scorer-club{font-size:10px;color:var(--t3);display:flex;align-items:center;gap:4px;}
.scorer-club img{width:12px;height:12px;object-fit:contain;}
.scorer-goals{text-align:right;}
.scorer-goals-num{font-size:16px;font-weight:900;color:var(--t1);line-height:1;}
.scorer-goals-lbl{font-size:9px;color:var(--t3);}

/* ── NEWS ── */
.news-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;}
.news-card{background:var(--s2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:.15s;}
.news-card:hover{border-color:var(--border2);transform:translateY(-2px);}
.news-thumb{height:95px;position:relative;overflow:hidden;}
.news-thumb img{width:100%;height:100%;object-fit:cover;}
.news-thumb-gradient{position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);}
.news-category{position:absolute;top:7px;left:7px;border-radius:4px;padding:2px 7px;font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
.nc-ucl{background:#1a3a6b;color:#7eb3ff;}
.nc-epl{background:#3D0B6B;color:#c084fc;}
.nc-transfer{background:#1a3a1a;color:var(--green);}
.nc-interview{background:#1a2a3d;color:var(--blue);}
.news-play-btn{position:absolute;bottom:7px;right:7px;width:24px;height:24px;background:rgba(255,255,255,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;color:#000;}
.news-body{padding:9px;}
.news-title{font-size:12px;font-weight:600;line-height:1.35;margin-bottom:5px;}
.news-meta{display:flex;align-items:center;gap:6px;font-size:10px;color:var(--t3);}

/* ── TAB BTN (match.php, team.php) ── */
.tab-btn{padding:10px 14px;font-size:12px;font-weight:600;color:var(--t3);border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.15s;font-family:inherit;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;}
.tab-btn:hover{color:var(--t2);}
.tab-btn.on{color:var(--green);border-bottom-color:var(--green);}

/* ── WIDGET ── */
.widget-wrap{background:var(--s2);border:1px solid var(--border);border-radius:var(--radius);padding:14px;overflow:hidden;margin-bottom:16px;}

/* ── FOOTER ── */
.footer{background:var(--s1);border-top:1px solid var(--border);margin-top:40px;}
.footer-inner{width:100%;padding:40px 24px 20px;}
.footer-top{display:grid;grid-template-columns:280px 1fr;gap:40px;margin-bottom:30px;}
.footer-brand p{font-size:13px;color:var(--t3);margin:12px 0 16px;line-height:1.6;}
.footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.footer-logo-text{font-size:20px;font-weight:900;letter-spacing:-.5px;}
.footer-logo-text strong{color:var(--green);}
.footer-social{display:flex;gap:10px;}
.footer-social a{width:34px;height:34px;background:var(--s3);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:14px;transition:.15s;}
.footer-links{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.fl-col h4{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);margin-bottom:12px;}
.fl-col a{display:block;font-size:13px;color:var(--t2);margin-bottom:8px;transition:color .15s;}
.fl-col a:hover{color:var(--t1);}
.footer-bottom{border-top:1px solid var(--border);padding-top:16px;display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--t3);}
.footer-bottom a{color:var(--green);}

/* ── BOTTOM NAV (Mobile) ── */
.bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;height:56px;background:var(--s1);border-top:1px solid var(--border);z-index:998;align-items:center;justify-content:space-around;padding:0 4px;}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:3px;flex:1;padding:8px 4px;color:var(--t3);text-decoration:none;font-size:10px;font-weight:600;border-radius:8px;transition:color .15s;}
.bottom-nav a:hover,.bottom-nav a.on{color:var(--green);}
.bottom-nav a i{font-size:18px;}
.bnav-live{position:relative;}
.bnav-live::after{content:'';position:absolute;top:4px;right:calc(50% - 14px);width:7px;height:7px;background:var(--red);border-radius:50%;border:1.5px solid var(--s1);animation:blink 1.2s infinite;}

/* ── SCROLL TOP ── */
.scroll-top{position:fixed;bottom:24px;right:24px;width:40px;height:40px;background:var(--green);border-radius:10px;display:none;align-items:center;justify-content:center;color:#000;font-size:14px;z-index:100;}
.scroll-top.show{display:flex;}

/* ── UTILS ── */
.mb-16{margin-bottom:16px;}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  /* Sidebar hilang, konten full width */
  .page-layout{display:block;width:100%;}
  .sidebar{display:none;}
  .main-content{padding:12px;}
  /* Navbar */
  .nb-links{display:none;}
  .nb-hamburger{display:flex;}
  /* Grid */
  .grid-3col{grid-template-columns:repeat(2,1fr);gap:10px;}
  .news-grid{grid-template-columns:repeat(2,1fr);}
  /* Footer */
  .footer-top{grid-template-columns:1fr;}
  .footer-links{grid-template-columns:repeat(2,1fr);}
  /* Bottom nav */
  .bottom-nav{display:flex;}
  body{padding-bottom:64px;}
}
/* ══ MOBILE (max 768px) ══ */
@media(max-width:768px){
  /* Layout */
  .main-content{padding:10px;min-height:400px;overflow-x:hidden;box-sizing:border-box;}
  body{padding-bottom:64px;}
  .scroll-top{bottom:72px;right:12px;}

  /* Hero */
  .hero{height:185px;min-height:185px;max-height:185px;}
  .hero-score{font-size:32px;}
  .hero-venue{display:none;}
  .hero-team-name{font-size:12px;}
  .hero-team-logo{width:38px;height:38px;}
  .hero-team-logo img{width:26px;height:26px;}
  .hero-btns{gap:6px;margin-top:8px;}
  .hero-btn-primary,.hero-btn-secondary{padding:6px 12px;font-size:11px;}

  /* Grid - 1 kolom di mobile */
  .grid-3col{grid-template-columns:1fr!important;gap:10px;}
  .news-grid{grid-template-columns:1fr 1fr;}

  /* Cards scroll horizontal */
  .match-card{min-width:150px;padding:9px;}
  .mc-team-name{font-size:11px;}
  .mc-score{font-size:14px;}

  /* Panel */
  .panel{padding:12px;}
  .panel-title{font-size:12px;}

  /* Standings table */
  .standings-table th,.standings-table td{padding:5px 3px;font-size:10px;}

  /* Live/Fixtures row - sembunyikan kolom odds */
  .odds-col{display:none!important;}

  /* Bottom nav */
  .bottom-nav a{font-size:9px;}
  .bottom-nav a i{font-size:20px;}

  /* Footer */
  .footer-bottom{flex-direction:column;gap:6px;text-align:center;}

  /* Notif popup */
  #goalNotifContainer{top:70px;right:8px;max-width:calc(100vw - 16px);}
  .goal-notif{padding:12px 14px;}

  /* Pagination */
  .page-btn{min-width:32px;height:32px;font-size:12px;padding:0 8px;}
  .page-btn.nav{padding:0 10px;}

  /* Date picker fixtures */
  #datePills button{min-width:52px;padding:5px 8px;}
}

/* ══ MOBILE (max 480px) ══ */
@media(max-width:480px){
  /* Navbar */
  .navbar-inner{padding:0 10px;}
  .logo-sub{display:none;}

  /* Hero */
  .hero{height:170px;min-height:170px;max-height:170px;}
  .hero-score{font-size:30px;}
  .hero-team-name{font-size:11px;}
  .hero-comp-name{font-size:9px;}
  .hero-eyebrow{display:none;}

  /* Grid */
  .news-grid{grid-template-columns:1fr;}

  /* Match cards row - horizontal scroll */
  .live-cards-row{gap:8px;}
  .match-card{min-width:140px;padding:8px;}

  /* Live row - hide favorit star & odds columns */
  .live-fav-btn{display:none!important;}
  .live-odds-col{display:none!important;}

  /* Fixtures live row compact */
  [style*="grid-template-columns:80px 1fr auto 1fr 80px"]{
    grid-template-columns:60px 1fr auto 1fr !important;
  }
  .fixture-venue-col{display:none!important;}

  /* Standings - hide GD column */
  .standings-table th:nth-child(4),
  .standings-table td:nth-child(4){display:none;}

  /* Stats panels side by side → stack */
  [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns:1fr!important;
  }

  /* Panel padding reduce */
  .panel{padding:10px;}

  /* Font sizes */
  .section-title{font-size:12px;}
  .panel-title{font-size:11px;}

  /* Pagination compact */
  .page-btn.dots{display:none;}
  .page-btn{min-width:28px;height:28px;font-size:11px;padding:0 6px;}

  /* Bottom nav */
  .bottom-nav{height:54px;padding:0 2px;}
  .bottom-nav a{font-size:8px;gap:2px;}
  .bottom-nav a i{font-size:18px;}
}

/* ── PAGINATION ── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 20px 0;
  flex-wrap: wrap;
}
.page-btn {
  min-width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border2);
  background: var(--s2);
  color: var(--t2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}
.page-btn:hover { background: var(--s3); color: var(--t1); border-color: var(--green); }
.page-btn.active { background: var(--green); color: #000; border-color: var(--green); font-weight: 800; }
.page-btn.nav { background: var(--red); color: #fff; border-color: var(--red); gap: 4px; }
.page-btn.nav:hover { background: #c0283d; border-color: #c0283d; }
.page-btn.nav:disabled { background: var(--s3); color: var(--t3); border-color: var(--border); cursor: not-allowed; }
.page-btn.dots { border: none; background: none; cursor: default; color: var(--t3); }
.page-btn.dots:hover { background: none; border: none; color: var(--t3); }

/* ── GOAL NOTIFICATION ── */
#goalNotifContainer {
  position: fixed;
  top: 100px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: 340px;
}

.goal-notif {
  background: linear-gradient(135deg, #0a1628, #0d2b12);
  border: 1px solid rgba(29,185,84,.4);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.5), 0 0 0 1px rgba(29,185,84,.2);
  pointer-events: all;
  cursor: pointer;
  transform: translateX(120%);
  opacity: 0;
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), opacity .3s;
  overflow: hidden;
  position: relative;
}
.goal-notif.show {
  transform: translateX(0);
  opacity: 1;
}
.goal-notif.hide {
  transform: translateX(120%);
  opacity: 0;
}
.goal-notif-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 40%, rgba(29,185,84,.08) 50%, transparent 60%);
  animation: goalShine 1.5s ease-in-out;
}
@keyframes goalShine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.goal-notif-icon {
  width: 44px;
  height: 44px;
  background: var(--green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  animation: goalBounce .6s cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 0 20px rgba(29,185,84,.5);
}
@keyframes goalBounce {
  0%   { transform: scale(0) rotate(-180deg); }
  60%  { transform: scale(1.2) rotate(10deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.goal-notif-body { flex: 1; min-width: 0; }
.goal-notif-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 2px;
}
.goal-notif-scorer {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.goal-notif-match {
  font-size: 11px;
  color: rgba(255,255,255,.6);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.goal-notif-score {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: -1px;
  text-shadow: 0 0 20px rgba(29,185,84,.8);
}
.goal-notif-min {
  font-size: 9px;
  color: var(--green);
  font-weight: 700;
  text-align: center;
  display: block;
}
.goal-notif-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--green);
  border-radius: 0 0 0 14px;
  animation: goalProgress 5s linear forwards;
  box-shadow: 0 0 8px rgba(29,185,84,.6);
}
@keyframes goalProgress {
  from { width: 100%; }
  to   { width: 0%; }
}

/* ── GOAL FLASH OVERLAY ── */
#goalFlash {
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, rgba(29,185,84,.15), transparent 70%);
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s;
}
#goalFlash.flash {
  animation: goalFlashAnim .6s ease-out;
}
@keyframes goalFlashAnim {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* ── GOAL SOUND BUTTON - hidden, replaced by bell icon ── */
#goalSoundBtn { display: none !important; }