* { margin:0; padding:0; box-sizing:border-box; }
:root {
  --bg:#080c14; --surface-1:#0f1520; --surface-2:#151d2e;
  --accent:#6366f1; --accent-secondary:#8b5cf6;
  --text-primary:#f1f5f9; --text-secondary:#94a3b8; --text-muted:#475569;
  --border-subtle:rgba(255,255,255,0.08);
  --live-green:#10b981; --live-red:#ef4444; --warning:#f59e0b;
}
body { background:var(--bg); color:var(--text-primary); font-family:system-ui,sans-serif; min-height:100vh; }
a { color:inherit; text-decoration:none; }

.navbar { background:var(--surface-1); border-bottom:1px solid var(--border-subtle); position:sticky; top:0; z-index:100; }
.navbar-inner { max-width:1200px; margin:0 auto; padding:0 1rem; display:flex; align-items:center; gap:1rem; height:60px; }
.logo { font-size:1.4rem; font-weight:800; color:var(--accent); margin-right:auto; }
.nav-link { color:var(--text-secondary); font-size:0.9rem; padding:0.5rem; transition:color 0.2s; }
.nav-link:hover { color:var(--text-primary); }
.nav-xp { font-weight:700; color:var(--accent); font-size:0.9rem; }
.nav-right { display:flex; align-items:center; gap:0.5rem; margin-left:auto; }

.btn { padding:0.5rem 1rem; border-radius:8px; border:none; cursor:pointer; font-weight:600; font-size:0.875rem; transition:all 0.2s; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { opacity:0.85; }
.btn-ghost { background:transparent; color:var(--text-secondary); border:1px solid var(--border-subtle); }
.btn-ghost:hover { color:var(--text-primary); }
.btn-full { width:100%; margin-top:0.5rem; }
.btn-lg { padding:0.75rem 2rem; font-size:1rem; }

.hero { text-align:center; padding:4rem 1rem 2rem; }
.hero h1 { font-size:3rem; font-weight:800; margin-bottom:0.5rem; }
.hero p { color:var(--text-secondary); margin-bottom:1.5rem; }

.main-container { max-width:1200px; margin:0 auto; padding:1rem; }
.sport-tabs { display:flex; gap:0.5rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.sport-tab { padding:0.5rem 1rem; border-radius:20px; background:var(--surface-2); color:var(--text-secondary); font-size:0.875rem; font-weight:600; transition:all 0.2s; }
.sport-tab.active, .sport-tab:hover { background:var(--accent); color:#fff; }

.matches-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
.match-card { background:var(--surface-1); border:1px solid var(--border-subtle); border-radius:16px; padding:1.25rem; transition:all 0.2s; display:block; }
.match-card:hover { border-color:var(--accent); transform:translateY(-2px); }
.match-live { border-color:rgba(239,68,68,0.3) !important; }
.match-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.match-league { font-size:0.75rem; color:var(--text-muted); font-weight:600; text-transform:uppercase; }
.badge-live { background:rgba(239,68,68,0.15); color:var(--live-red); padding:0.2rem 0.6rem; border-radius:20px; font-size:0.75rem; font-weight:700; }
.badge-finished { background:var(--surface-2); color:var(--text-muted); padding:0.2rem 0.6rem; border-radius:20px; font-size:0.75rem; }
.badge-upcoming { color:var(--text-muted); font-size:0.75rem; }
.match-teams { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }
.team { flex:1; }
.team-away { text-align:right; }
.team-name { font-weight:700; font-size:0.95rem; display:block; }
.team-score { font-size:1.5rem; font-weight:800; color:var(--accent); display:block; }
.match-vs { color:var(--text-muted); font-size:0.75rem; font-weight:700; }
.match-footer { display:flex; justify-content:space-between; font-size:0.75rem; color:var(--text-muted); }
.predict-cta { color:var(--accent); font-weight:700; }

.match-hero { background:linear-gradient(135deg,var(--surface-1),var(--surface-2)); border-bottom:1px solid var(--border-subtle); padding:3rem 1rem; text-align:center; }
.match-hero-league { font-size:0.85rem; color:var(--text-muted); margin-bottom:1rem; text-transform:uppercase; letter-spacing:0.1em; }
.match-hero-teams { display:flex; align-items:center; justify-content:center; gap:2rem; margin-bottom:1rem; }
.hero-team { font-size:1.3rem; font-weight:800; }
.hero-score { font-size:2.5rem; font-weight:800; color:var(--accent); }
.match-hero-status { color:var(--text-muted); font-size:0.9rem; }

.match-container { max-width:800px; margin:2rem auto; padding:0 1rem; display:flex; flex-direction:column; gap:1.5rem; }
.predict-box, .analysis-box, .chat-box { background:var(--surface-1); border:1px solid var(--border-subtle); border-radius:16px; padding:1.5rem; }
.predict-box h3, .analysis-box h3, .chat-box h3 { margin-bottom:1rem; font-size:1rem; }
.predict-options { display:flex; gap:0.75rem; margin-bottom:1rem; flex-wrap:wrap; }
.pred-btn { flex:1; min-width:120px; padding:1rem; background:var(--surface-2); border:1px solid var(--border-subtle); border-radius:12px; color:var(--text-primary); cursor:pointer; text-align:center; font-weight:700; transition:all 0.2s; }
.pred-btn:hover { border-color:var(--accent); color:var(--accent); }
.exact-score { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border-subtle); }
.score-inputs { display:flex; gap:0.5rem; align-items:center; margin-top:0.5rem; }
.score-input { width:60px; padding:0.5rem; background:var(--surface-2); border:1px solid var(--border-subtle); border-radius:8px; color:var(--text-primary); text-align:center; font-size:1.1rem; }
.already-predicted { background:rgba(99,102,241,0.1); border:1px solid rgba(99,102,241,0.3); border-radius:10px; padding:1rem; text-align:center; color:var(--accent); font-weight:700; }
.login-prompt { text-align:center; padding:1rem; }
.login-prompt p { margin-bottom:1rem; color:var(--text-muted); }

.chat-messages { height:250px; overflow-y:auto; margin-bottom:1rem; display:flex; flex-direction:column; gap:0.5rem; }
.chat-msg { font-size:0.875rem; padding:0.4rem 0; border-bottom:1px solid var(--border-subtle); }
.chat-msg b { color:var(--accent); margin-right:0.5rem; }
.chat-input-wrap { display:flex; gap:0.5rem; }

.lb-page { max-width:900px; margin:0 auto; padding:2rem 1rem; }
.lb-hero { text-align:center; padding:2rem 0; }
.lb-hero h1 { font-size:2rem; font-weight:800; margin-bottom:0.5rem; }
.lb-tabs { display:inline-flex; gap:0.25rem; background:var(--surface-2); border-radius:12px; padding:4px; margin-top:1rem; }
.lb-tab { padding:0.4rem 1rem; border-radius:9px; color:var(--text-muted); font-size:0.875rem; font-weight:600; transition:all 0.2s; }
.lb-tab.active { background:var(--accent); color:#fff; }
.lb-table-wrap { background:var(--surface-1); border:1px solid var(--border-subtle); border-radius:16px; overflow:hidden; margin-top:2rem; }
.lb-row { display:grid; grid-template-columns:60px 1fr 100px 100px; padding:0.85rem 1.25rem; border-bottom:1px solid var(--border-subtle); align-items:center; text-decoration:none; transition:background 0.15s; }
.lb-row:hover { background:var(--surface-2); }
.lb-row:last-child { border-bottom:none; }
.lb-row.is-me { background:rgba(99,102,241,0.08); border-left:3px solid var(--accent); }
.lb-avatar { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-secondary)); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; }
.lb-col-user { display:flex; align-items:center; gap:0.75rem; }

.profile-page { max-width:800px; margin:0 auto; padding:2rem 1rem; }
.profile-hero { background:var(--surface-1); border:1px solid var(--border-subtle); border-radius:20px; padding:2rem; margin-bottom:1.5rem; }
.profile-avatar { width:80px; height:80px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-secondary)); display:flex; align-items:center; justify-content:center; font-size:2rem; font-weight:800; color:#fff; }
.profile-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1rem; margin-bottom:1.5rem; }
.stat-card { background:var(--surface-1); border:1px solid var(--border-subtle); border-radius:14px; padding:1.25rem; text-align:center; }
.stat-value { font-size:1.8rem; font-weight:800; color:var(--accent); }
.stat-label { font-size:0.75rem; color:var(--text-muted); text-transform:uppercase; }
.pred-list { background:var(--surface-1); border:1px solid var(--border-subtle); border-radius:16px; overflow:hidden; }
.pred-row { display:grid; grid-template-columns:1fr auto auto; gap:1rem; padding:1rem 1.25rem; border-bottom:1px solid var(--border-subtle); align-items:center; }
.pred-row:last-child { border-bottom:none; }
.pred-correct { color:var(--live-green); font-weight:700; }
.pred-wrong { color:var(--live-red); font-weight:700; }

.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:200; }
.modal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--surface-1); border:1px solid var(--border-subtle); border-radius:20px; padding:2rem; width:90%; max-width:400px; z-index:201; }
.modal h2 { margin-bottom:1.5rem; }
.form-input { width:100%; padding:0.75rem; background:var(--surface-2); border:1px solid var(--border-subtle); border-radius:8px; color:var(--text-primary); font-size:0.95rem; margin-bottom:0.75rem; }
.form-input:focus { outline:none; border-color:var(--accent); }
.toast { position:fixed; bottom:2rem; right:2rem; padding:0.75rem 1.5rem; border-radius:10px; font-weight:600; z-index:999; background:var(--live-green); color:#fff; }
.toast-error { background:var(--live-red) !important; }

@media(max-width:600px) {
  .hero h1 { font-size:2rem; }
  .match-hero-teams { gap:1rem; }
  .hero-team { font-size:1rem; }
  .predict-options { flex-direction:column; }
  .lb-row { grid-template-columns:50px 1fr 80px; }
}