:root {
  --bg: #07090f;
  --s1: #0e1320;
  --s2: #141b2d;
  --s3: #1c2640;
  --border: #1e2d45;
  --acc: #3b82f6;
  --acc2: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;
  --text: #f1f5f9;
  --muted: #64748b;
  --c-win: #10b981;
  --c-loss: #ef4444;
  --c-draw: #f59e0b;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;font-size:13px;line-height:1.5;min-height:100vh}

/* HEADER */
.header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:var(--s1);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.logo{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;letter-spacing:-.3px}
.logo-dot{width:8px;height:8px;border-radius:50%;background:var(--acc);box-shadow:0 0 10px var(--acc);animation:blink 2s infinite}
.logo-sub{font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.3px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.header-meta{display:flex;align-items:center;gap:14px;color:var(--muted);font-size:12px}
.live-badge{display:flex;align-items:center;gap:5px;background:rgba(16,185,129,.12);color:var(--acc2);border:1px solid rgba(16,185,129,.3);padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.4px}
.live-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--acc2);animation:blink 1s infinite}

/* TABS */
.tab-nav{display:flex;gap:2px;padding:10px 24px 0;background:var(--s1);border-bottom:1px solid var(--border)}
.tab-btn{background:transparent;border:none;color:var(--muted);padding:8px 18px;font-size:13px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;border-radius:4px 4px 0 0}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--acc);border-bottom-color:var(--acc);background:rgba(59,130,246,.06)}
.tab-content{display:none}
.tab-content.active{display:block}

/* MAIN */
.main{max-width:1280px;margin:0 auto;padding:20px 24px;display:grid;gap:20px}

/* STAT STRIP */
.stat-strip{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.stat-card{background:var(--s1);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.stat-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:4px}
.stat-value{font-size:28px;font-weight:800;letter-spacing:-1px}
.c-win{color:var(--c-win)} .c-loss{color:var(--c-loss)} .c-acc{color:var(--acc)}

/* SECTION TITLE */
.section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);display:flex;align-items:center;gap:8px}
.section-title::after{content:'';flex:1;height:1px;background:var(--border)}

/* GROUP GRID */
.group-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.group-card{background:var(--s1);border:1px solid var(--border);border-radius:10px;overflow:hidden}
.group-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--s2);border-bottom:1px solid var(--border)}
.group-name{font-size:11px;font-weight:800;letter-spacing:.8px;color:var(--acc)}
.group-status{font-size:10px;color:var(--muted)}
.group-table{width:100%;border-collapse:collapse}
.group-table th{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:6px 10px;text-align:center;border-bottom:1px solid var(--border)}
.group-table th:first-child{text-align:left}
.group-table td{padding:8px 10px;text-align:center;border-bottom:1px solid rgba(30,45,69,.5);font-size:12px;font-weight:600}
.group-table td:first-child{text-align:left;font-weight:700}
.group-table tr:last-child td{border-bottom:none}
.group-table tr.qualified{background:rgba(16,185,129,.05)}
.group-table tr.eliminated{opacity:.45}
.group-table tr:hover{background:var(--s3)}
.rank-badge{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:3px;font-size:9px;font-weight:800;margin-right:6px;background:var(--s3);color:var(--muted)}
.rank-1{background:rgba(59,130,246,.2);color:var(--acc)}
.rank-2{background:rgba(16,185,129,.15);color:var(--c-win)}
.flag{margin-right:5px;font-size:14px}
.pts-high{color:var(--acc);font-weight:800}

/* RESULTS */
.results-group{margin-bottom:18px}
.results-group-title{font-size:11px;font-weight:800;color:var(--acc);text-transform:uppercase;letter-spacing:.6px;margin-bottom:8px;padding:6px 0;border-bottom:1px solid var(--border)}
.match-row{display:flex;align-items:center;background:var(--s1);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:6px;gap:8px}
.match-row:hover{border-color:var(--acc);background:var(--s2)}
.team-name-r{flex:1;font-weight:700;font-size:13px}
.team-name-r.right{text-align:right}
.score-block{display:flex;align-items:center;gap:8px;min-width:80px;justify-content:center}
.score{font-size:18px;font-weight:800;letter-spacing:-1px}
.score-sep{color:var(--muted);font-size:12px}
.match-meta{font-size:10px;color:var(--muted);margin-left:auto}

/* PREDICT */
.predict-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
.predict-card{background:var(--s1);border:1px solid var(--border);border-radius:10px;padding:16px 18px}
.predict-card:hover{border-color:var(--acc)}
.predict-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.predict-league{font-size:10px;font-weight:800;color:var(--acc);background:rgba(59,130,246,.1);padding:3px 8px;border-radius:4px;text-transform:uppercase}
.predict-time{font-size:11px;color:var(--muted)}
.predict-teams{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.pt{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.pt-flag{font-size:26px}
.pt-name{font-size:13px;font-weight:700;text-align:center}
.pt-rank{font-size:10px;color:var(--muted)}
.vs-badge{font-size:11px;font-weight:800;color:var(--muted);padding:0 8px}
.win-bar-wrap{margin-bottom:10px}
.win-bar-labels{display:flex;justify-content:space-between;font-size:11px;font-weight:800;margin-bottom:4px}
.wl-a{color:var(--acc)} .wl-d{color:var(--warn)} .wl-b{color:var(--danger)}
.win-bar{display:flex;height:7px;border-radius:4px;overflow:hidden;background:var(--s3)}
.wb-a{background:linear-gradient(90deg,var(--acc),#60a5fa);transition:width .8s}
.wb-d{background:var(--warn);transition:width .8s}
.wb-b{background:linear-gradient(90deg,#f87171,var(--danger));transition:width .8s}
.conf-row{display:flex;align-items:center;justify-content:space-between}
.conf-badge{font-size:9px;font-weight:800;padding:2px 7px;border-radius:3px;text-transform:uppercase;letter-spacing:.4px}
.conf-h{background:rgba(16,185,129,.15);color:var(--c-win);border:1px solid rgba(16,185,129,.3)}
.conf-m{background:rgba(245,158,11,.15);color:var(--warn);border:1px solid rgba(245,158,11,.3)}
.conf-l{background:rgba(100,116,139,.15);color:var(--muted);border:1px solid rgba(100,116,139,.3)}
.predict-note{font-size:10px;color:var(--muted);margin-top:8px;line-height:1.5}

/* ADVANCE */
.advance-card{background:var(--s1);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.adv-header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.adv-flag{font-size:22px}
.adv-team{font-weight:800;font-size:14px}
.adv-group{font-size:10px;color:var(--muted)}
.adv-bar-wrap{display:flex;align-items:center;gap:8px}
.adv-pct{font-size:13px;font-weight:800;color:var(--acc2);min-width:36px}
.adv-bar{flex:1;height:5px;border-radius:3px;background:var(--s3);overflow:hidden}
.adv-fill{height:100%;background:linear-gradient(90deg,var(--acc2),#34d399);border-radius:3px;transition:width .8s}

/* HISTORY */
.history-champs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.champ-chip{display:flex;align-items:center;gap:6px;background:var(--s1);border:1px solid var(--border);border-radius:8px;padding:8px 12px}
.champ-chip.gold{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.06)}
.champ-year{font-size:10px;color:var(--muted)}
.champ-team{font-size:13px;font-weight:800}
.champ-flag{font-size:18px}
.history-records{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}
.hr-card{background:var(--s1);border:1px solid var(--border);border-radius:10px;padding:14px 16px}
.hr-team{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.hr-flag{font-size:22px}
.hr-name{font-weight:800;font-size:15px}
.hr-stat-row{display:flex;justify-content:space-between;margin-bottom:8px}
.hr-stat{text-align:center}
.hr-stat-val{font-size:18px;font-weight:800}
.hr-stat-lbl{font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.hr-bar{display:flex;height:5px;border-radius:3px;overflow:hidden;background:var(--s3);margin-bottom:8px}
.hr-w{background:var(--c-win)} .hr-d{background:var(--warn)} .hr-l{background:var(--danger)}
.hr-note{font-size:10px;color:var(--muted)}

@media(max-width:768px){
  .stat-strip{grid-template-columns:repeat(3,1fr)}
  .main{padding:14px}
  .tab-nav{padding:8px 14px 0;gap:0}
  .tab-btn{padding:7px 12px;font-size:12px}
}