.topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.brand { display:flex; align-items:center; gap:10px; min-width:0; }
.logo { width:44px; height:44px; border-radius:17px; display:grid; place-items:center; position:relative; background: radial-gradient(circle at 30% 25%, #fff 0 5%, transparent 6%), conic-gradient(from 220deg,#ff4d4d,#ffbf3c,#37e6a4,#52e8ff,#b96cff,#ff4d4d); box-shadow:0 12px 28px rgba(255,77,77,.25); animation:logoPulse 2.8s ease-in-out infinite; }
.logo::after { content:"⚽"; width:33px; height:33px; display:grid; place-items:center; border-radius:13px; background:rgba(5,7,13,.82); backdrop-filter:blur(8px); font-size:18px; }
.brand > div:last-child { min-width:0; }
.brand-logo { width:44px; height:44px; flex:0 0 auto; border-radius:14px; background:#07131f url("../assets/images/logo.png?v=20260708-gi8-logo") center/cover no-repeat; border:1px solid rgba(255,255,255,.18); box-shadow:0 12px 28px rgba(0,0,0,.22); overflow:hidden; }
.brand h1 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0; font-size:13px; line-height:1.15; max-width:178px; }
.brand p { margin:4px 0 0; font-size:11px; color:var(--muted); }
.live-pill, .small-pill { display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); font-size:11px; color:rgba(255,255,255,.84); }
.pulse-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(80,250,155,.7); animation:livePulse 1.4s infinite; }
.glass-card, .score-card, .summary-card, .chart-card, .auth-card { background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.045)); border:1px solid rgba(255,255,255,.1); border-radius:24px; box-shadow:var(--shadow); backdrop-filter:blur(12px); }
.btn { border:0; border-radius:18px; padding:12px 14px; font-weight:900; color:#061016; background:linear-gradient(135deg,var(--ai),var(--green)); }
.btn.secondary { color:white; background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.1); }
.btn.danger { color:white; background:linear-gradient(135deg,var(--danger),var(--pink)); }
.btn.disabled, .btn:disabled { color:rgba(255,255,255,.56); background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); cursor:not-allowed; }
.btn.full { width:100%; }
.input { width:100%; border:1px solid rgba(255,255,255,.11); background:rgba(255,255,255,.07); color:white; border-radius:18px; padding:13px 14px; outline:0; margin-bottom:10px; }
.input::placeholder { color:rgba(255,255,255,.42); }
.chip-row, .toggles { display:flex; gap:8px; overflow-x:auto; padding:5px 0 1px; scrollbar-width:none; }
.chip-row::-webkit-scrollbar, .toggles::-webkit-scrollbar { display:none; }
.chip { white-space:nowrap; display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.09); color:rgba(255,255,255,.84); font-size:12px; user-select:none; transition:.18s ease; }
.chip.active { color:white; background:linear-gradient(135deg, rgba(255,77,77,.34), rgba(82,232,255,.22)); border-color:rgba(255,255,255,.16); }
.dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.match-hero { position:relative; padding:17px; margin-bottom:14px; border-radius:28px; background:linear-gradient(120deg,rgba(255,77,77,.24),transparent 35%), linear-gradient(300deg,rgba(82,232,255,.22),transparent 34%), linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.12); box-shadow:0 20px 50px rgba(0,0,0,.28); overflow:hidden; }
.stadium-lines { position:absolute; inset:0; opacity:.16; background:linear-gradient(90deg,transparent 49%,rgba(255,255,255,.8) 50%,transparent 51%), radial-gradient(ellipse at center,transparent 0 18%,rgba(255,255,255,.8) 19%,transparent 20%), repeating-linear-gradient(90deg,transparent 0 38px,rgba(255,255,255,.35) 39px,transparent 40px); transform:perspective(400px) rotateX(58deg) translateY(50px) scale(1.35); transform-origin:bottom; }
.teams { position:relative; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.team { text-align:center; flex:1; }
.flag { width:58px; height:58px; margin:0 auto 8px; display:grid; place-items:center; border-radius:22px; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.13); font-size:32px; box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }
.flag-art { width:42px; height:30px; display:grid; place-items:center; border-radius:7px; overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.28), 0 6px 14px rgba(0,0,0,.2); background:#25304a; }
.flag-art span { color:rgba(255,255,255,.92); font-size:10px; font-weight:950; text-shadow:0 1px 2px rgba(0,0,0,.42); }
.mini-flag .flag-art { width:34px; height:23px; margin:0 auto; border-radius:6px; }
.team-logo { width:34px; height:34px; display:inline-grid; place-items:center; border-radius:12px; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.16); overflow:hidden; vertical-align:middle; }
.team-logo img { width:100%; height:100%; object-fit:contain; padding:4px; }
.team-logo > span { display:none; }
.team-logo.broken img { display:none; }
.team-logo.broken > span { display:grid; width:100%; height:100%; place-items:center; }
.mini-inline-team { display:inline-flex; align-items:center; gap:6px; min-width:0; }
.mini-inline-team .team-logo { width:22px; height:22px; border-radius:8px; }
.mini-inline-team .flag-art { width:22px; height:16px; border-radius:5px; }
.flag-argentina { background:linear-gradient(#75aadb 0 33%,#fff 33% 66%,#75aadb 66%); }
.flag-brazil { background:radial-gradient(circle at center,#1d4ed8 0 16%,transparent 17%), linear-gradient(135deg,transparent 31%,#f7d117 32% 68%,transparent 69%), #229e45; }
.flag-mexico { background:linear-gradient(90deg,#006847 0 33%,#fff 33% 66%,#ce1126 66%); }
.flag-canada { background:linear-gradient(90deg,#d52b1e 0 25%,#fff 25% 75%,#d52b1e 75%); }
.flag-france { background:linear-gradient(90deg,#002395 0 33%,#fff 33% 66%,#ed2939 66%); }
.flag-england { background:linear-gradient(90deg,transparent 43%,#ce1124 43% 57%,transparent 57%), linear-gradient(transparent 38%,#ce1124 38% 62%,transparent 62%), #fff; }
.flag-spain { background:linear-gradient(#aa151b 0 25%,#f1bf00 25% 75%,#aa151b 75%); }
.flag-germany { background:linear-gradient(#000 0 33%,#dd0000 33% 66%,#ffce00 66%); }
.flag-japan { background:radial-gradient(circle at center,#bc002d 0 24%,transparent 25%), #fff; }
.flag-usa { background:repeating-linear-gradient(#b22234 0 3px,#fff 3px 6px); position:relative; }
.flag-usa::before { content:""; position:absolute; left:0; top:0; width:45%; height:54%; background:#3c3b6e; }
.flag-portugal { background:linear-gradient(90deg,#006600 0 42%,#ff0000 42%); }
.flag-netherlands { background:linear-gradient(#ae1c28 0 33%,#fff 33% 66%,#21468b 66%); }
.flag-morocco { background:#c1272d; }
.flag-croatia { background:linear-gradient(#f00 0 33%,#fff 33% 66%,#171796 66%); }
.team-name { font-weight:900; font-size:14px; }
.team-meta { color:var(--muted); font-size:10px; margin-top:3px; }
.versus { width:54px; height:54px; display:grid; place-items:center; border-radius:50%; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.14); font-size:13px; font-weight:950; color:var(--gold); box-shadow:0 10px 24px rgba(0,0,0,.25); }
.match-card { padding:14px; border-radius:24px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09); margin-bottom:10px; touch-action:pan-y pinch-zoom; }
.match-card, .pred-mini, .football-mini, .football-league-section, .bracket-preview, .insight {
  content-visibility: auto;
  contain-intrinsic-size: 1px 132px;
}
.match-card-head { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:11px; margin-bottom:10px; }
.match-card-body { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
.match-card .mini-team { text-align:center; font-weight:900; font-size:13px; }
.match-card .mini-flag { font-size:28px; margin-bottom:5px; }
.match-card .mini-flag .team-logo { margin:0 auto; }
.score-pill { min-width:64px; text-align:center; padding:8px 10px; border-radius:16px; background:rgba(0,0,0,.24); border:1px solid rgba(255,255,255,.1); color:var(--gold); font-weight:950; }
.match-goal-summary { margin:10px 0 0; padding:8px 10px; border-radius:12px; background:rgba(8, 18, 34, .05); border:1px solid rgba(8, 18, 34, .08); color:var(--text); font-size:11px; line-height:1.45; font-weight:700; }
.match-actions { display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; margin-top:12px; }
.match-action-buttons { display:flex; align-items:center; gap:7px; flex:0 0 auto; }
.match-action-buttons .btn { padding:10px 11px; border-radius:15px; font-size:11px; }
.status { min-width:0; font-size:11px; color:rgba(255,255,255,.75); }
.status.live { color:var(--green); }
.status.done { color:var(--gold); }
.section-title { display:flex; align-items:center; justify-content:space-between; margin:16px 2px 10px; }
.section-title h2 { margin:0; font-size:15px; }
.section-title span { color:var(--muted); font-size:11px; }
.metric-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:14px; }
.metric-card { padding:13px; border-radius:22px; background:linear-gradient(160deg,rgba(255,255,255,.09),rgba(255,255,255,.035)); border:1px solid rgba(255,255,255,.09); position:relative; overflow:hidden; transition:.18s ease; }
.metric-card::after { content:""; position:absolute; width:70px; height:70px; right:-22px; top:-22px; background:var(--accent,var(--ai)); filter:blur(22px); opacity:.28; }
.metric-card small { color:var(--muted); font-size:11px; }
.metric-card strong { display:block; margin:7px 0 3px; font-size:21px; }
.metric-card strong i { display:inline-grid; place-items:center; width:21px; height:21px; margin-left:4px; border-radius:50%; font-style:normal; font-size:14px; background:rgba(255,255,255,.1); }
.metric-card.trend-up strong i { color:var(--green); }
.metric-card.trend-down strong i { color:var(--danger); }
.metric-card.trend-steady strong i { color:var(--gold); }
.metric-card span { color:rgba(255,255,255,.68); font-size:11px; }
.hero-score { display:grid; grid-template-columns:120px 1fr; gap:12px; align-items:stretch; margin-bottom:12px; }
.score-card { padding:14px; text-align:center; position:relative; overflow:hidden; }
.score-label { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.score-num { font-size:46px; font-weight:950; line-height:.95; margin-top:6px; }
.score-rank { margin-top:7px; color:var(--gold); font-size:11px; font-weight:900; }
.summary-card { padding:14px; }
.summary-card h2 { margin:0 0 7px; font-size:15px; }
.summary-card p { margin:0; color:rgba(255,255,255,.77); font-size:12px; line-height:1.45; }
.summary-card .tag { display:inline-block; margin-top:9px; padding:6px 8px; border-radius:999px; background:rgba(255,255,255,.07); color:rgba(255,255,255,.82); font-size:10px; font-weight:800; }
.insight-list { display:grid; gap:10px; }
.insight { display:flex; gap:10px; padding:14px; border-radius:22px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.insight .icon { width:36px; height:36px; display:grid; place-items:center; border-radius:15px; background:rgba(255,255,255,.09); flex:0 0 auto; }
.insight h3 { margin:0 0 4px; font-size:13px; }
.insight p { margin:0; color:rgba(255,255,255,.72); font-size:12px; line-height:1.42; }
button.insight { width:100%; color:white; font:inherit; text-align:left; cursor:pointer; }
.player-link-row { align-items:center; }
.chart-card { padding:12px; margin-bottom:12px; }
canvas { width:100%; height:220px; display:block; }
.toast-root { position:fixed; z-index:20; left:16px; right:16px; bottom:calc(104px + env(safe-area-inset-bottom)); pointer-events:none; }
.toast { pointer-events:none; margin-top:8px; padding:12px 14px; border-radius:18px; background:rgba(9,12,22,.94); border:1px solid rgba(255,255,255,.13); color:white; box-shadow:0 18px 40px rgba(0,0,0,.38); animation:msgIn .2s ease both; font-weight:800; font-size:12px; }
.logo::after { content:"⚽"; }