/* ==========================================
   CSS VARIABLES & RESET
   ========================================== */
:root {
  --bg-primary: #0d0f14;
  --bg-secondary: #141720;
  --bg-card: rgba(255,255,255,0.04);
  --bg-card-hover: rgba(255,255,255,0.07);
  --bg-glass: rgba(255,255,255,0.05);
  --border: rgba(255,255,255,0.08);
  --border-active: rgba(255,255,255,0.2);
  --text-primary: #f0f2f8;
  --text-secondary: #8890aa;
  --text-muted: #5a6278;
  --accent: #00e676;
  --accent-glow: rgba(0,230,118,0.25);
  --accent2: #ff6b35;
  --accent3: #4fc3f7;
  --gold: #ffd700;
  --silver: #c0c8d8;
  --bronze: #cd7f32;
  --win: #00e676;
  --loss: #ff5252;
  --draw: #ffb300;
  --radius: 16px;
  --radius-sm: 8px;
  --shadow: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-sm: 0 4px 16px rgba(0,0,0,0.3);
  --transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
  --nav-h: 68px;
  --font-display: 'Bebas Neue', sans-serif;
  --font-condensed: 'Barlow Condensed', sans-serif;
  --font-body: 'Barlow', sans-serif;
}
[data-theme="light"] {
  --bg-primary: #f0f4fa;
  --bg-secondary: #e4eaf5;
  --bg-card: rgba(255,255,255,0.8);
  --bg-card-hover: rgba(255,255,255,0.95);
  --bg-glass: rgba(255,255,255,0.6);
  --border: rgba(0,0,0,0.08);
  --border-active: rgba(0,0,0,0.2);
  --text-primary: #0d0f14;
  --text-secondary: #4a5568;
  --text-muted: #8892a4;
  --shadow: 0 8px 32px rgba(0,0,0,0.1);
  --shadow-sm: 0 4px 16px rgba(0,0,0,0.08);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;transition:background 0.3s,color 0.3s}
body::before{content:'';position:fixed;top:0;left:0;right:0;height:600px;background:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(0,230,118,0.08),transparent);pointer-events:none;z-index:0}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:var(--font-body);border:none;outline:none}
input,select,textarea{font-family:var(--font-body);outline:none}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg-primary)}
::-webkit-scrollbar-thumb{background:var(--border-active);border-radius:3px}

/* ==========================================
   NAVIGATION
   ========================================== */
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:var(--nav-h);background:rgba(13,15,20,0.85);backdrop-filter:blur(24px);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 24px;gap:16px}
[data-theme="light"] .nav{background:rgba(240,244,250,0.88)}
.nav-logo{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:24px;letter-spacing:1px;color:var(--accent);white-space:nowrap}
.nav-logo span{font-size:28px}
.nav-tabs{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none;padding:0 8px}
.nav-tabs::-webkit-scrollbar{display:none}
.nav-tab{padding:8px 16px;border-radius:8px;background:transparent;color:var(--text-secondary);font-family:var(--font-condensed);font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;transition:var(--transition);white-space:nowrap;border:1px solid transparent}
.nav-tab:hover{background:var(--bg-glass);color:var(--text-primary)}
.nav-tab.active{background:var(--accent);color:#000;border-color:var(--accent)}
.nav-actions{display:flex;gap:8px;align-items:center}
.theme-btn{width:38px;height:38px;border-radius:50%;background:var(--bg-glass);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--text-secondary);transition:var(--transition)}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}
.hamburger{display:none;flex-direction:column;gap:4px;padding:8px;background:var(--bg-glass);border:1px solid var(--border);border-radius:8px}
.hamburger span{width:20px;height:2px;background:var(--text-primary);border-radius:2px;transition:var(--transition)}

/* ==========================================
   MAIN LAYOUT
   ========================================== */
.main{margin-top:var(--nav-h);padding:32px 24px;max-width:1400px;margin-left:auto;margin-right:auto;position:relative;z-index:1}
.page{display:none}
.page.active{display:block;animation:fadeInUp 0.35s ease}
@keyframes fadeInUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.page-header{margin-bottom:32px}
.page-title{font-family:var(--font-display);font-size:48px;letter-spacing:2px;line-height:1;background:linear-gradient(135deg,var(--text-primary),var(--text-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.page-subtitle{font-size:14px;color:var(--text-secondary);margin-top:6px}

/* ==========================================
   CARDS & GRIDS
   ========================================== */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:var(--transition);backdrop-filter:blur(12px)}
.card:hover{background:var(--bg-card-hover);border-color:var(--border-active);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.card-sm{padding:16px;border-radius:var(--radius-sm)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-title{font-family:var(--font-condensed);font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary)}

/* ==========================================
   STAT CARDS
   ========================================== */
.stat-value{font-family:var(--font-display);font-size:48px;letter-spacing:1px;line-height:1}
.stat-label{font-size:12px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase;margin-top:4px}
.stat-accent{color:var(--accent)}
.stat-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:0.5px}
.chip-green{background:rgba(0,230,118,0.15);color:var(--win)}
.chip-red{background:rgba(255,82,82,0.15);color:var(--loss)}
.chip-yellow{background:rgba(255,179,0,0.15);color:var(--draw)}
.chip-blue{background:rgba(79,195,247,0.15);color:var(--accent3)}
.chip-gold{background:rgba(255,215,0,0.15);color:var(--gold)}

/* ==========================================
   DASHBOARD HERO
   ========================================== */
.hero{background:linear-gradient(135deg,rgba(0,230,118,0.08),rgba(79,195,247,0.05));border:1px solid rgba(0,230,118,0.15);border-radius:var(--radius);padding:32px;margin-bottom:28px;position:relative;overflow:hidden}
.hero::before{content:'⚽';position:absolute;right:-10px;top:-20px;font-size:160px;opacity:0.04;transform:rotate(15deg);pointer-events:none;line-height:1}
.hero-title{font-family:var(--font-display);font-size:52px;letter-spacing:2px;color:var(--accent);line-height:1}
.hero-sub{color:var(--text-secondary);margin-top:8px;font-size:15px}
.hero-stats{display:flex;gap:40px;margin-top:24px;flex-wrap:wrap}
.hero-stat{display:flex;flex-direction:column;gap:4px}
.hero-stat-val{font-family:var(--font-display);font-size:32px;color:var(--text-primary)}
.hero-stat-lbl{font-size:11px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase}

/* ==========================================
   BUTTONS
   ========================================== */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 20px;border-radius:var(--radius-sm);font-family:var(--font-condensed);font-size:14px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;transition:var(--transition);border:1px solid transparent;white-space:nowrap}
.btn:active{transform:scale(0.97)}
.btn-primary{background:var(--accent);color:#000;box-shadow:0 0 20px var(--accent-glow)}
.btn-primary:hover{background:#00ff85;box-shadow:0 0 30px rgba(0,230,118,0.4)}
.btn-secondary{background:var(--bg-glass);color:var(--text-primary);border-color:var(--border)}
.btn-secondary:hover{border-color:var(--border-active);background:var(--bg-card-hover)}
.btn-danger{background:rgba(255,82,82,0.15);color:var(--loss);border-color:rgba(255,82,82,0.3)}
.btn-danger:hover{background:rgba(255,82,82,0.25)}
.btn-warning{background:rgba(255,179,0,0.15);color:var(--draw);border-color:rgba(255,179,0,0.3)}
.btn-warning:hover{background:rgba(255,179,0,0.25)}
.btn-sm{padding:6px 14px;font-size:12px}
.btn-icon{padding:8px;border-radius:var(--radius-sm);background:var(--bg-glass);border:1px solid var(--border);color:var(--text-secondary);transition:var(--transition);font-size:16px}
.btn-icon:hover{border-color:var(--accent);color:var(--accent)}
.btn-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* ==========================================
   FORMS
   ========================================== */
.form-group{margin-bottom:16px}
.form-label{display:block;font-family:var(--font-condensed);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:6px}
.form-control{width:100%;padding:10px 14px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:14px;transition:var(--transition)}
.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238890aa' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

/* ==========================================
   TABLES
   ========================================== */
.table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;background:var(--bg-card)}
thead{background:var(--bg-secondary)}
th{padding:12px 16px;text-align:left;font-family:var(--font-condensed);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap;cursor:pointer;user-select:none}
th:hover{color:var(--text-primary)}
th.sort-asc::after{content:' ↑'}
th.sort-desc::after{content:' ↓'}
td{padding:12px 16px;border-top:1px solid var(--border);font-size:14px;vertical-align:middle}
tr:hover td{background:var(--bg-glass)}
.rank-badge{width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-condensed);font-size:13px;font-weight:700}
.rank-1{background:var(--gold);color:#000}
.rank-2{background:var(--silver);color:#000}
.rank-3{background:var(--bronze);color:#fff}
.rank-other{background:var(--bg-secondary);color:var(--text-secondary)}

/* ==========================================
   MATCH CARDS
   ========================================== */
.matches-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.match-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--transition)}
.match-card:hover{border-color:var(--border-active);box-shadow:var(--shadow-sm)}
.match-card.status-finished{border-left:3px solid var(--accent)}
.match-card.status-upcoming{border-left:3px solid var(--accent3)}
.match-header{background:var(--bg-secondary);padding:12px 16px;display:flex;justify-content:space-between;align-items:center}
.match-meta{font-family:var(--font-condensed);font-size:11px;color:var(--text-muted);letter-spacing:0.5px;text-transform:uppercase}
.match-status-badge{font-family:var(--font-condensed);font-size:11px;font-weight:600;letter-spacing:1px;padding:3px 10px;border-radius:20px}
.status-upcoming .match-status-badge{background:rgba(79,195,247,0.15);color:var(--accent3)}
.status-finished .match-status-badge{background:rgba(0,230,118,0.15);color:var(--accent)}
.match-body{padding:20px}
.match-teams{display:flex;align-items:center;justify-content:space-between;gap:12px}
.team-info{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.team-emoji{font-size:40px;line-height:1}
.team-name{font-family:var(--font-condensed);font-size:16px;font-weight:700;text-align:center;letter-spacing:0.5px}
.match-vs{font-family:var(--font-display);font-size:24px;color:var(--text-muted);flex-shrink:0}
.match-score{font-family:var(--font-display);font-size:36px;text-align:center;color:var(--accent);letter-spacing:2px;margin-top:4px}
.match-score.tbd{font-size:18px;color:var(--text-muted);letter-spacing:0}
.match-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.prediction-dist{display:flex;gap:8px;font-size:11px;font-family:var(--font-condensed);font-weight:600}
.pred-dist-item{display:flex;flex-direction:column;align-items:center;gap:2px}
.pred-dist-label{color:var(--text-muted);font-size:10px}
.pred-dist-pct{font-size:14px}
.pred-dist-home{color:var(--accent)}
.pred-dist-draw{color:var(--draw)}
.pred-dist-away{color:var(--loss)}

/* ==========================================
   PREDICTION MODAL
   ========================================== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity 0.25s;backdrop-filter:blur(4px)}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:600px;max-height:90vh;overflow-y:auto;transform:scale(0.95);transition:transform 0.25s;box-shadow:0 24px 80px rgba(0,0,0,0.6)}
.modal-overlay.open .modal{transform:scale(1)}
.modal-header{padding:24px 24px 0;display:flex;justify-content:space-between;align-items:flex-start}
.modal-title{font-family:var(--font-display);font-size:28px;letter-spacing:1px;color:var(--accent)}
.modal-close{background:var(--bg-glass);border:1px solid var(--border);color:var(--text-secondary);border-radius:8px;padding:6px 10px;font-size:18px;line-height:1;transition:var(--transition)}
.modal-close:hover{border-color:var(--loss);color:var(--loss)}
.modal-body{padding:24px}
.modal-footer{padding:0 24px 24px;display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}

/* ==========================================
   OUTCOME BUTTONS
   ========================================== */
.outcome-group{display:flex;gap:10px;margin-bottom:8px}
.outcome-btn{flex:1;padding:12px 8px;border-radius:var(--radius-sm);background:var(--bg-primary);border:2px solid var(--border);color:var(--text-secondary);font-family:var(--font-condensed);font-size:13px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;transition:var(--transition);display:flex;flex-direction:column;align-items:center;gap:6px}
.outcome-btn:hover{border-color:var(--border-active);background:var(--bg-card)}
.outcome-btn.selected-home{border-color:var(--accent);background:rgba(0,230,118,0.1);color:var(--accent)}
.outcome-btn.selected-draw{border-color:var(--draw);background:rgba(255,179,0,0.1);color:var(--draw)}
.outcome-btn.selected-away{border-color:var(--loss);background:rgba(255,82,82,0.1);color:var(--loss)}
.outcome-btn .ob-icon{font-size:20px}
.score-input-row{display:flex;align-items:center;gap:12px}
.score-input{width:60px;text-align:center;font-family:var(--font-display);font-size:28px;padding:8px;background:var(--bg-primary);border:2px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);transition:var(--transition)}
.score-input:focus{border-color:var(--accent)}
.score-dash{font-family:var(--font-display);font-size:24px;color:var(--text-muted)}
.score-team-label{font-family:var(--font-condensed);font-size:11px;color:var(--text-muted);text-align:center;display:block;margin-top:4px}

/* ==========================================
   USER CARDS
   ========================================== */
.users-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.user-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:var(--transition);cursor:pointer;position:relative;overflow:hidden}
.user-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent3));transform:scaleX(0);transform-origin:left;transition:transform 0.3s}
.user-card:hover::before{transform:scaleX(1)}
.user-card:hover{border-color:var(--border-active);box-shadow:var(--shadow-sm)}
.user-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent3));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:22px;color:#000;margin-bottom:12px;position:relative}
.user-crown{position:absolute;top:-8px;right:-4px;font-size:20px}
.user-name{font-family:var(--font-condensed);font-size:16px;font-weight:700;letter-spacing:0.5px;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.user-rank{font-size:12px;color:var(--text-muted);margin-bottom:12px}
.user-stats-mini{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary);padding-top:12px;border-top:1px solid var(--border)}
.user-stat-mini{display:flex;flex-direction:column;align-items:center;gap:2px}
.user-stat-mini-val{font-family:var(--font-condensed);font-size:15px;font-weight:700;color:var(--text-primary)}
.user-stat-mini-lbl{font-size:10px;color:var(--text-muted);letter-spacing:0.5px}
.badge-best{background:linear-gradient(135deg,var(--gold),#ffaa00);color:#000;font-size:9px;font-weight:700;padding:2px 6px;border-radius:20px;letter-spacing:1px}
.badge-worst{background:rgba(255,82,82,0.2);color:var(--loss);font-size:9px;font-weight:700;padding:2px 6px;border-radius:20px;letter-spacing:1px}
.user-edit-name{background:transparent;border:none;border-bottom:1px solid var(--accent);color:var(--text-primary);font-family:var(--font-condensed);font-size:16px;font-weight:700;width:100%;padding:2px 0;display:none}

/* ==========================================
   RANKINGS
   ========================================== */
.leaderboard{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.leaderboard-header{background:linear-gradient(135deg,rgba(0,230,118,0.1),rgba(79,195,247,0.05));padding:20px 24px;border-bottom:1px solid var(--border)}
.leaderboard-title{font-family:var(--font-display);font-size:24px;letter-spacing:1px;display:flex;align-items:center;gap:10px}
.lb-row{display:flex;align-items:center;gap:16px;padding:14px 24px;border-top:1px solid var(--border);transition:var(--transition)}
.lb-row:hover{background:var(--bg-glass)}
.lb-row:first-of-type{border-top:none}
.lb-rank{width:36px;flex-shrink:0}
.lb-user{flex:1;font-family:var(--font-condensed);font-size:15px;font-weight:600}
.lb-stat{width:60px;text-align:center;font-family:var(--font-condensed);font-size:13px}
.lb-rate{width:80px;text-align:right;font-family:var(--font-display);font-size:18px}
.lb-bar-wrap{flex:1;height:4px;background:var(--bg-primary);border-radius:2px;max-width:100px}
.lb-bar{height:4px;border-radius:2px;background:var(--accent);transition:width 0.6s ease}
.lb-bar-exact{background:var(--accent2)}

/* ==========================================
   ANALYTICS CHARTS
   ========================================== */
.chart-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.chart-wrap{position:relative;height:300px}

/* ==========================================
   SEASON BADGES
   ========================================== */
.season-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;background:var(--bg-glass);border:1px solid var(--border);font-family:var(--font-condensed);font-size:13px;font-weight:600;letter-spacing:0.5px}
.season-badge.active-season{border-color:var(--accent);color:var(--accent)}

/* ==========================================
   SEARCH BAR
   ========================================== */
.search-bar{position:relative;max-width:320px}
.search-bar input{padding-left:38px;width:100%}
.search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:16px;pointer-events:none}

/* ==========================================
   PROGRESS BARS
   ========================================== */
.progress-wrap{background:var(--bg-primary);border-radius:20px;height:6px;overflow:hidden;margin-top:6px}
.progress-fill{height:6px;border-radius:20px;transition:width 0.6s ease}
.progress-green{background:linear-gradient(90deg,var(--accent),#00b852)}
.progress-blue{background:linear-gradient(90deg,var(--accent3),#0277bd)}
.progress-orange{background:linear-gradient(90deg,var(--accent2),#e64a19)}

/* ==========================================
   TOAST NOTIFICATIONS
   ========================================== */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none}
.toast{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px 18px;display:flex;align-items:center;gap:10px;font-size:14px;box-shadow:var(--shadow);transform:translateX(120%);transition:transform 0.3s cubic-bezier(0.4,0,0.2,1);pointer-events:all;max-width:320px}
.toast.show{transform:translateX(0)}
.toast-success{border-left:3px solid var(--win)}
.toast-error{border-left:3px solid var(--loss)}
.toast-info{border-left:3px solid var(--accent3)}
.toast-warn{border-left:3px solid var(--draw)}
.toast-icon{font-size:18px;flex-shrink:0}

/* ==========================================
   POINTS BANNER
   ========================================== */
.points-banner{display:flex;align-items:center;gap:12px;padding:14px 20px;background:linear-gradient(135deg,rgba(255,215,0,0.08),rgba(255,179,0,0.04));border:1px solid rgba(255,215,0,0.2);border-radius:var(--radius);margin-bottom:24px}
.points-icon{font-size:32px}
.points-text{font-family:var(--font-condensed);font-size:14px;color:var(--text-secondary)}
.points-text strong{color:var(--gold);font-size:16px}

/* ==========================================
   HALL OF FAME
   ========================================== */
.hof-entry{display:flex;align-items:center;gap:16px;padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);transition:var(--transition)}
.hof-entry:hover{border-color:var(--gold);box-shadow:0 0 20px rgba(255,215,0,0.1)}
.hof-pos{font-family:var(--font-display);font-size:36px;color:var(--text-muted);width:48px;flex-shrink:0;text-align:center}
.hof-pos.pos-1{color:var(--gold)}
.hof-pos.pos-2{color:var(--silver)}
.hof-pos.pos-3{color:var(--bronze)}
.hof-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--gold),var(--accent2));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:16px;color:#000;flex-shrink:0}
.hof-info{flex:1}
.hof-name{font-family:var(--font-condensed);font-size:16px;font-weight:700}
.hof-desc{font-size:12px;color:var(--text-muted);margin-top:2px}
.hof-pts{font-family:var(--font-display);font-size:28px;color:var(--gold);flex-shrink:0}

/* ==========================================
   USER PROFILE PAGE
   ========================================== */
.profile-header{display:flex;align-items:center;gap:24px;padding:28px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:24px}
.profile-avatar-lg{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent3));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:36px;color:#000;flex-shrink:0;border:3px solid var(--accent)}
.profile-name{font-family:var(--font-display);font-size:40px;letter-spacing:1px;color:var(--text-primary)}
.history-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border);font-size:13px}
.history-item:last-child{border-bottom:none}
.h-match{flex:1;color:var(--text-primary);font-weight:500}
.h-pred{display:flex;gap:8px;align-items:center}
.h-outcome{padding:2px 8px;border-radius:20px;font-family:var(--font-condensed);font-size:11px;font-weight:600}
.correct-outcome{background:rgba(0,230,118,0.15);color:var(--win)}
.wrong-outcome{background:rgba(255,82,82,0.15);color:var(--loss)}
.correct-exact{background:rgba(255,215,0,0.15);color:var(--gold)}
.wrong-exact{background:rgba(255,82,82,0.1);color:var(--text-muted)}
.no-pred{background:rgba(100,100,100,0.15);color:var(--text-muted)}

/* ==========================================
   DATA MANAGEMENT
   ========================================== */
.data-card{display:flex;align-items:center;gap:16px;padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);transition:var(--transition)}
.data-card:hover{border-color:var(--border-active)}
.data-icon{font-size:36px;flex-shrink:0}
.data-info{flex:1}
.data-title{font-family:var(--font-condensed);font-size:15px;font-weight:700;margin-bottom:4px}
.data-desc{font-size:12px;color:var(--text-muted)}

/* ==========================================
   STREAK BADGES
   ========================================== */
.streak{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-family:var(--font-condensed);font-size:12px;font-weight:600}
.streak-win{background:rgba(0,230,118,0.15);color:var(--win)}
.streak-loss{background:rgba(255,82,82,0.15);color:var(--loss)}
.streak-none{background:var(--bg-glass);color:var(--text-muted)}

/* ==========================================
   RISK BUTTONS
   ========================================== */
.risk-group{display:flex;gap:8px;margin-top:10px}
.risk-btn{flex:1;padding:9px 6px;border-radius:var(--radius-sm);background:var(--bg-primary);border:2px solid var(--border);color:var(--text-secondary);font-family:var(--font-condensed);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;transition:var(--transition);display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer}
.risk-btn:hover{border-color:var(--border-active);background:var(--bg-card)}
.risk-btn .rb-icon{font-size:18px}
.risk-btn.selected-high{border-color:#ff4444;background:rgba(255,68,68,0.13);color:#ff4444;box-shadow:0 0 12px rgba(255,68,68,0.2)}
.risk-btn.selected-mid{border-color:#ffb300;background:rgba(255,179,0,0.13);color:#ffb300;box-shadow:0 0 12px rgba(255,179,0,0.2)}
.risk-btn.selected-low{border-color:#00e676;background:rgba(0,230,118,0.13);color:#00e676;box-shadow:0 0 12px rgba(0,230,118,0.2)}
.risk-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:20px;font-family:var(--font-condensed);font-size:10px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase}
.risk-high{background:rgba(255,68,68,0.15);color:#ff4444;border:1px solid rgba(255,68,68,0.3)}
.risk-mid{background:rgba(255,179,0,0.15);color:#ffb300;border:1px solid rgba(255,179,0,0.3)}
.risk-low{background:rgba(0,230,118,0.15);color:#00e676;border:1px solid rgba(0,230,118,0.3)}
.risk-none{background:var(--bg-glass);color:var(--text-muted);border:1px solid var(--border)}

/* ==========================================
   CONFIRMATION DIALOG
   ========================================== */
.confirm-dialog{background:var(--bg-secondary);border:1px solid var(--border-active);border-radius:var(--radius);padding:32px;max-width:400px;text-align:center}
.confirm-icon{font-size:56px;margin-bottom:16px}
.confirm-title{font-family:var(--font-display);font-size:28px;letter-spacing:1px;margin-bottom:8px}
.confirm-msg{font-size:14px;color:var(--text-secondary);margin-bottom:24px;line-height:1.6}

/* ==========================================
   MONTH STATS
   ========================================== */
.month-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.month-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:16px;text-align:center}
.month-label{font-family:var(--font-condensed);font-size:12px;color:var(--text-muted);letter-spacing:1px;margin-bottom:8px;text-transform:uppercase}
.month-val{font-family:var(--font-display);font-size:32px;color:var(--accent)}

/* ==========================================
   RESPONSIVE
   ========================================== */
@media(max-width:900px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .main{padding:20px 16px}
  .nav{padding:0 16px;gap:12px}
  .nav-tabs{display:none}
  .nav-tabs.open{display:flex;flex-direction:column;position:fixed;top:var(--nav-h);left:0;right:0;background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:12px;z-index:999}
  .hamburger{display:flex}
  .grid-4,.grid-3,.grid-2{grid-template-columns:1fr}
  .hero-title{font-size:36px}
  .form-row,.form-row-3{grid-template-columns:1fr}
  .matches-grid{grid-template-columns:1fr}
  .profile-header{flex-direction:column;text-align:center}
  .page-title{font-size:36px}
}
@media(max-width:480px){
  .outcome-group{flex-direction:column}
  .lb-bar-wrap{display:none}
  .modal-footer{flex-direction:column}
  .modal-footer .btn{width:100%;justify-content:center}
}

/* ==========================================
   UTILITY
   ========================================== */
.hidden{display:none!important}
.flex{display:flex}
.flex-between{display:flex;justify-content:space-between;align-items:center}
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-wrap{flex-wrap:wrap}
.gap-8{gap:8px}
.gap-12{gap:12px}
.gap-16{gap:16px}
.gap-20{gap:20px}
.gap-24{gap:24px}
.mb-8{margin-bottom:8px}
.mb-12{margin-bottom:12px}
.mb-16{margin-bottom:16px}
.mb-20{margin-bottom:20px}
.mb-24{margin-bottom:24px}
.mb-28{margin-bottom:28px}
.mt-8{margin-top:8px}
.mt-12{margin-top:12px}
.mt-16{margin-top:16px}
.mt-20{margin-top:20px}
.mt-24{margin-top:24px}
.text-center{text-align:center}
.text-right{text-align:right}
.text-accent{color:var(--accent)}
.text-muted{color:var(--text-muted)}
.text-secondary{color:var(--text-secondary)}
.text-win{color:var(--win)}
.text-loss{color:var(--loss)}
.text-draw{color:var(--draw)}
.text-gold{color:var(--gold)}
.fw-bold{font-weight:700}
.font-display{font-family:var(--font-display)}
.font-condensed{font-family:var(--font-condensed)}
.divider{height:1px;background:var(--border);margin:20px 0}
.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
.empty-state .es-icon{font-size:64px;margin-bottom:16px;opacity:0.5}
.empty-state .es-title{font-family:var(--font-condensed);font-size:18px;font-weight:600;color:var(--text-secondary);margin-bottom:8px}
.empty-state .es-msg{font-size:13px}
.loading-spin{display:inline-block;width:20px;height:20px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.section-title{font-family:var(--font-condensed);font-size:20px;font-weight:700;letter-spacing:0.5px;margin-bottom:16px;display:flex;align-items:center;gap:8px;color:var(--text-primary)}
.section-title::after{content:'';flex:1;height:1px;background:var(--border)}
.section-title span.icon{font-size:18px}
.tab-pills{display:flex;gap:4px;background:var(--bg-secondary);padding:4px;border-radius:var(--radius-sm);width:fit-content;margin-bottom:20px}
.tab-pill{padding:7px 16px;border-radius:6px;font-family:var(--font-condensed);font-size:13px;font-weight:600;letter-spacing:0.5px;color:var(--text-secondary);transition:var(--transition);background:transparent;border:none}
.tab-pill.active{background:var(--bg-card);color:var(--text-primary);box-shadow:var(--shadow-sm)}

/* ==========================================
   WALLET STYLES
   ========================================== */
.wallet-hero{background:linear-gradient(135deg,rgba(0,230,118,0.1),rgba(79,195,247,0.06));border:1px solid rgba(0,230,118,0.2);border-radius:var(--radius);padding:28px;margin-bottom:24px;position:relative;overflow:hidden}
.wallet-hero::before{content:'💰';position:absolute;right:-8px;bottom:-12px;font-size:130px;opacity:0.05;pointer-events:none;line-height:1}
.wallet-hero-title{font-family:var(--font-display);font-size:36px;letter-spacing:2px;color:var(--accent);margin-bottom:4px}
.wallet-hero-sub{font-size:13px;color:var(--text-secondary)}
.wallet-hero-kpis{display:flex;gap:36px;margin-top:20px;flex-wrap:wrap}
.wallet-kpi{display:flex;flex-direction:column;gap:3px}
.wallet-kpi-val{font-family:var(--font-display);font-size:30px;color:var(--text-primary);line-height:1}
.wallet-kpi-lbl{font-size:10px;color:var(--text-muted);letter-spacing:1px;text-transform:uppercase}

.wallet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.wallet-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;transition:var(--transition);cursor:pointer;position:relative;overflow:hidden}
.wallet-card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent3));transform:scaleX(0);transform-origin:left;transition:transform 0.3s}
.wallet-card:hover::after{transform:scaleX(1)}
.wallet-card:hover{border-color:var(--border-active);box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.wallet-card-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.wallet-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent3));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:17px;color:#000;flex-shrink:0}
.wallet-user-name{font-family:var(--font-condensed);font-size:16px;font-weight:700;letter-spacing:0.5px}
.wallet-user-sub{font-size:11px;color:var(--text-muted);margin-top:1px}
.wallet-balances{display:flex;flex-direction:column;gap:10px}
.wallet-bal-row{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-radius:var(--radius-sm);background:var(--bg-secondary)}
.wallet-bal-label{font-family:var(--font-condensed);font-size:11px;font-weight:600;letter-spacing:0.8px;text-transform:uppercase;color:var(--text-secondary);display:flex;align-items:center;gap:6px}
.wallet-bal-value{font-family:var(--font-display);font-size:20px;letter-spacing:0.5px}
.wbal-current{color:var(--accent)}
.wbal-initial{color:var(--text-muted)}
.wbal-available{color:var(--accent3)}
.wallet-card-footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}
.wallet-progress-wrap{height:4px;background:var(--bg-secondary);border-radius:2px;margin-top:10px;overflow:hidden}
.wallet-progress-fill{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent3));transition:width 0.5s ease}
.wallet-demo-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;background:rgba(255,215,0,0.12);border:1px solid rgba(255,215,0,0.25);font-size:10px;font-weight:700;color:var(--gold);letter-spacing:0.8px;text-transform:uppercase}
.wallet-admin-note{font-size:11px;color:var(--text-muted);text-align:center;padding:10px;background:rgba(255,215,0,0.05);border:1px solid rgba(255,215,0,0.1);border-radius:var(--radius-sm)}

/* ==========================================
   BETTING MARKETS & STAKES — PART 2
   ========================================== */

/* Market selector tabs */
.bet-market-tabs{display:flex;gap:3px;flex-wrap:wrap;background:var(--bg-primary);padding:4px;border-radius:var(--radius-sm);margin-bottom:14px}
.bet-mkt-tab{padding:6px 13px;border-radius:6px;font-family:var(--font-condensed);font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text-muted);background:none;border:none;cursor:pointer;transition:var(--transition);white-space:nowrap}
.bet-mkt-tab:hover{color:var(--text-primary);background:var(--bg-glass)}
.bet-mkt-tab.active{background:var(--accent);color:#000}

/* Bet option buttons (odds selections) */
.bet-options-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin-bottom:12px}
.bet-option{padding:11px 10px;border-radius:var(--radius-sm);background:var(--bg-secondary);border:2px solid var(--border);cursor:pointer;transition:var(--transition);display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.bet-option:hover{border-color:var(--border-active);background:var(--bg-card)}
.bet-option.selected{border-color:var(--accent);background:rgba(0,230,118,0.1)}
.bet-option-label{font-family:var(--font-condensed);font-size:12px;font-weight:600;letter-spacing:.4px;color:var(--text-secondary)}
.bet-option.selected .bet-option-label{color:var(--accent)}
.bet-option-odds{font-family:var(--font-display);font-size:22px;color:var(--gold);line-height:1}
.bet-option-sublabel{font-size:10px;color:var(--text-muted);letter-spacing:.3px}
.bet-option.no-odds{opacity:.45;cursor:not-allowed;pointer-events:none}

/* Exact score fields */
.exact-score-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.exact-score-input{width:60px;text-align:center;font-family:var(--font-display);font-size:24px;padding:7px 6px;background:var(--bg-secondary);border:2px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);transition:var(--transition)}
.exact-score-input:focus{border-color:var(--accent)}
.exact-score-sep{font-family:var(--font-display);font-size:22px;color:var(--text-muted)}
.exact-score-team{font-size:10px;color:var(--text-muted);text-align:center;display:block;margin-top:3px}

/* Goals line selector */
.goals-line-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.goals-line-btn{padding:5px 12px;border-radius:20px;font-family:var(--font-condensed);font-size:12px;font-weight:600;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;transition:var(--transition)}
.goals-line-btn:hover{border-color:var(--border-active);color:var(--text-primary)}
.goals-line-btn.active{background:var(--accent);border-color:var(--accent);color:#000}

/* Stake input row */
.stake-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;margin-top:4px}
.stake-input-wrap{position:relative}
.stake-currency{position:absolute;left:11px;top:50%;transform:translateY(-50%);font-family:var(--font-display);font-size:18px;color:var(--text-muted);pointer-events:none}
.stake-input{padding-left:30px;font-family:var(--font-display);font-size:20px;letter-spacing:.5px}
.stake-quick{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.stake-quick-btn{padding:3px 9px;border-radius:20px;font-family:var(--font-condensed);font-size:11px;font-weight:700;background:var(--bg-secondary);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;transition:var(--transition)}
.stake-quick-btn:hover{border-color:var(--accent);color:var(--accent)}
.stake-error{font-size:11px;color:var(--loss);margin-top:4px;min-height:16px;font-family:var(--font-condensed);font-weight:600;letter-spacing:.3px}

/* Bet slip summary (before confirm) */
.bet-slip{background:var(--bg-primary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;margin-top:10px}
.bet-slip-title{font-family:var(--font-condensed);font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.bet-slip-row{display:flex;justify-content:space-between;align-items:center;padding:5px 0;border-bottom:1px solid var(--border);font-size:13px}
.bet-slip-row:last-child{border-bottom:none}
.bet-slip-label{color:var(--text-muted);font-family:var(--font-condensed);font-size:11px;letter-spacing:.5px;text-transform:uppercase}
.bet-slip-value{font-weight:600;color:var(--text-primary)}
.bet-slip-value.v-market{color:var(--accent3)}
.bet-slip-value.v-selection{color:var(--accent)}
.bet-slip-value.v-stake{color:var(--gold);font-family:var(--font-display);font-size:16px}
.bet-slip-empty{font-size:12px;color:var(--text-muted);text-align:center;padding:12px 0}

/* Bet button on match card */
.bet-match-btn{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:var(--radius-sm);background:rgba(255,215,0,0.12);border:1px solid rgba(255,215,0,0.25);color:var(--gold);font-family:var(--font-condensed);font-size:11px;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:var(--transition)}
.bet-match-btn:hover{background:rgba(255,215,0,0.22);border-color:rgba(255,215,0,0.45)}

/* Odds not set notice */
.odds-not-set{font-size:11px;color:var(--text-muted);padding:10px;background:var(--bg-primary);border-radius:var(--radius-sm);text-align:center;border:1px dashed var(--border)}

/* User bet block inside modal */
.bet-user-block{background:var(--bg-primary);border-radius:var(--radius-sm);padding:14px;margin-bottom:10px;border:1px solid var(--border)}
.bet-user-block.has-bet{border-color:rgba(0,230,118,0.3)}
.bet-user-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;flex-wrap:wrap;gap:6px}
.bet-user-name{font-family:var(--font-condensed);font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px}
.bet-user-balance{font-size:12px;color:var(--text-muted)}
.bet-user-balance strong{color:var(--accent);font-family:var(--font-display);font-size:15px}

/* ── wallet profile strip ── */
.wallet-profile-strip{background:linear-gradient(135deg,rgba(0,230,118,0.08),rgba(79,195,247,0.05));border:1px solid rgba(0,230,118,0.18);border-radius:var(--radius);padding:20px;margin-bottom:20px}
.wps-title{font-family:var(--font-condensed);font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:14px;display:flex;align-items:center;gap:8px}
.wps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.wps-item{text-align:center;padding:12px 8px;background:var(--bg-secondary);border-radius:var(--radius-sm)}
.wps-val{font-family:var(--font-display);font-size:26px;letter-spacing:0.5px;line-height:1}
.wps-lbl{font-size:10px;color:var(--text-muted);letter-spacing:0.8px;text-transform:uppercase;margin-top:3px}

/* ==========================================
   PART 3 — ODDS DISPLAY & SETTLEMENT
   ========================================== */

/* Odds pill row on match card */
.odds-row{display:flex;gap:5px;flex-wrap:wrap;padding:10px 14px 0;justify-content:center}
.odds-pill{display:inline-flex;flex-direction:column;align-items:center;gap:1px;
  padding:5px 10px;border-radius:var(--radius-sm);
  background:rgba(255,215,0,0.08);border:1px solid rgba(255,215,0,0.18);min-width:52px}
.odds-pill-val{font-family:var(--font-display);font-size:16px;color:var(--gold);line-height:1}
.odds-pill-lbl{font-size:9px;color:var(--text-muted);letter-spacing:0.5px;text-transform:uppercase}

/* Settlement status chips */
.settle-won {background:rgba(0,230,118,0.15);color:var(--win);border:1px solid rgba(0,230,118,0.3);
  font-family:var(--font-condensed);font-size:10px;font-weight:700;letter-spacing:0.8px;
  padding:2px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:3px}
.settle-lost{background:rgba(255,82,82,0.15);color:var(--loss);border:1px solid rgba(255,82,82,0.3);
  font-family:var(--font-condensed);font-size:10px;font-weight:700;letter-spacing:0.8px;
  padding:2px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:3px}
.settle-pending{background:rgba(79,195,247,0.12);color:var(--accent3);border:1px solid rgba(79,195,247,0.25);
  font-family:var(--font-condensed);font-size:10px;font-weight:700;letter-spacing:0.8px;
  padding:2px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:3px}
.settle-void{background:var(--bg-glass);color:var(--text-muted);border:1px solid var(--border);
  font-family:var(--font-condensed);font-size:10px;font-weight:700;letter-spacing:0.8px;
  padding:2px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:3px}

/* Settlement panel inside modal */
.settle-panel{background:var(--bg-primary);border-radius:var(--radius-sm);padding:16px;margin-top:16px}
.settle-panel-title{font-family:var(--font-condensed);font-size:12px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--text-secondary);
  margin-bottom:12px;display:flex;align-items:center;gap:8px}
.settle-row{display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--border);font-size:12px;flex-wrap:wrap}
.settle-row:last-child{border-bottom:none}
.settle-user{font-family:var(--font-condensed);font-size:13px;font-weight:700;flex:1;min-width:80px}
.settle-detail{color:var(--text-muted);font-size:11px;flex:1}
.settle-profit-pos{color:var(--win);font-family:var(--font-display);font-size:16px;text-align:right}
.settle-profit-neg{color:var(--loss);font-family:var(--font-display);font-size:16px;text-align:right}
.settle-profit-zero{color:var(--text-muted);font-family:var(--font-display);font-size:16px;text-align:right}

/* Match card — settled overlay badge */
.match-settled-badge{position:absolute;top:10px;right:10px;
  background:rgba(0,230,118,0.15);border:1px solid rgba(0,230,118,0.3);
  color:var(--win);font-family:var(--font-condensed);font-size:9px;font-weight:700;
  letter-spacing:1px;padding:2px 7px;border-radius:20px;pointer-events:none}

/* Quick-edit odds button on card */
.odds-edit-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;
  border-radius:20px;background:rgba(245,158,11,0.1);border:1px solid rgba(245,158,11,0.25);
  color:var(--draw);font-family:var(--font-condensed);font-size:10px;font-weight:700;
  letter-spacing:0.5px;cursor:pointer;transition:var(--transition)}
.odds-edit-btn:hover{background:rgba(245,158,11,0.2);border-color:rgba(245,158,11,0.45)}

/* Settle result header strip */
.result-strip{display:flex;align-items:center;justify-content:center;gap:18px;
  padding:14px;background:var(--bg-primary);border-radius:var(--radius-sm);margin-bottom:14px}
.result-strip-score{font-family:var(--font-display);font-size:36px;color:var(--accent);letter-spacing:3px}
.result-strip-team{font-family:var(--font-condensed);font-size:13px;font-weight:700;text-align:center}
.result-strip-vs{font-family:var(--font-display);font-size:18px;color:var(--text-muted)}

/* Summary totals row at bottom of settlement */
.settle-totals{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.settle-total-item{text-align:center;padding:10px 8px;background:var(--bg-secondary);border-radius:var(--radius-sm)}
.settle-total-val{font-family:var(--font-display);font-size:22px;line-height:1}
.settle-total-lbl{font-size:10px;color:var(--text-muted);letter-spacing:0.8px;text-transform:uppercase;margin-top:3px}
/* ==========================================
   PART 4 — BET HISTORY & STATISTICS
   ========================================== */

/* History page layout */
.history-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:20px}

/* Stat summary cards row */
.stat-summary-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;margin-bottom:24px}
.stat-summary-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;text-align:center;transition:var(--transition)}
.stat-summary-card:hover{border-color:var(--border-active)}
.ss-icon{font-size:22px;margin-bottom:6px}
.ss-val{font-family:var(--font-display);font-size:28px;letter-spacing:1px;line-height:1}
.ss-lbl{font-size:10px;color:var(--text-muted);letter-spacing:0.9px;text-transform:uppercase;margin-top:4px}

/* ROI / win-rate progress bar */
.stat-bar-wrap{height:5px;background:var(--bg-secondary);border-radius:3px;margin-top:8px;overflow:hidden}
.stat-bar-fill{height:5px;border-radius:3px}
.bar-green{background:linear-gradient(90deg,var(--win),#00b852)}
.bar-blue{background:linear-gradient(90deg,var(--accent3),#0277bd)}
.bar-gold{background:linear-gradient(90deg,var(--gold),var(--accent2))}
.bar-red{background:linear-gradient(90deg,var(--loss),#b71c1c)}

/* Per-player history accordion */
.player-history-block{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;transition:var(--transition)}
.player-history-block:hover{border-color:var(--border-active)}
.phb-header{display:flex;align-items:center;gap:12px;padding:14px 18px;cursor:pointer;user-select:none}
.phb-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent3));display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:14px;color:#000;flex-shrink:0}
.phb-name{font-family:var(--font-condensed);font-size:15px;font-weight:700;flex:1}
.phb-quick-stats{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.phb-qs{font-family:var(--font-condensed);font-size:12px;display:flex;flex-direction:column;align-items:center;gap:1px}
.phb-qs-val{font-family:var(--font-display);font-size:17px;line-height:1}
.phb-qs-lbl{font-size:9px;color:var(--text-muted);letter-spacing:0.7px;text-transform:uppercase}
.phb-chevron{font-size:12px;color:var(--text-muted);transition:transform 0.2s;margin-left:6px}
.phb-chevron.open{transform:rotate(180deg)}
.phb-body{display:none;border-top:1px solid var(--border)}
.phb-body.open{display:block}

/* History table rows */
.hist-table-wrap{overflow-x:auto}
.hist-table{width:100%;border-collapse:collapse;font-size:12px}
.hist-table th{padding:9px 12px;text-align:left;font-family:var(--font-condensed);font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);background:var(--bg-secondary);white-space:nowrap}
.hist-table td{padding:9px 12px;border-top:1px solid var(--border);vertical-align:middle}
.hist-table tr:hover td{background:var(--bg-glass)}
.hist-table .td-match{font-weight:600;color:var(--text-primary);max-width:160px;word-break:break-word}
.hist-table .td-market{font-family:var(--font-condensed);font-size:10px;font-weight:700;letter-spacing:0.5px;text-transform:uppercase;color:var(--text-secondary)}
.hist-table .td-sel{color:var(--text-primary)}
.hist-table .td-odds{font-family:var(--font-display);font-size:15px;color:var(--gold)}
.hist-table .td-stake{font-family:var(--font-condensed);font-weight:700}
.hist-table .td-result span{font-family:var(--font-condensed);font-size:10px;font-weight:700;letter-spacing:0.7px;padding:2px 8px;border-radius:20px}
.res-won{background:rgba(0,230,118,0.15);color:var(--win);border:1px solid rgba(0,230,118,0.3)}
.res-lost{background:rgba(255,82,82,0.15);color:var(--loss);border:1px solid rgba(255,82,82,0.3)}
.res-pending{background:rgba(79,195,247,0.12);color:var(--accent3);border:1px solid rgba(79,195,247,0.25)}
.res-void{background:var(--bg-glass);color:var(--text-muted);border:1px solid var(--border)}
.td-profit-pos{color:var(--win);font-family:var(--font-display);font-size:14px}
.td-profit-neg{color:var(--loss);font-family:var(--font-display);font-size:14px}
.td-profit-zero{color:var(--text-muted);font-family:var(--font-display);font-size:14px}
.td-bal-after{font-family:var(--font-condensed);font-size:12px;color:var(--accent);font-weight:700}

/* Empty history state */
.hist-empty{padding:32px;text-align:center;color:var(--text-muted);font-size:13px}
.hist-empty-ico{font-size:36px;margin-bottom:8px;opacity:0.4}

/* Overall stats header bar */
.stats-overview{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:24px;padding:20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius)}
.so-item{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.so-val{font-family:var(--font-display);font-size:30px;letter-spacing:1px;line-height:1}
.so-lbl{font-size:10px;color:var(--text-muted);letter-spacing:0.9px;text-transform:uppercase}
.so-divider{width:1px;background:var(--border);margin:0 4px}

/* ==========================================
   PART 5 — LEADERBOARDS, CHARTS & ADVANCED
   ========================================== */

/* Profit leaderboard table */
.profit-lb-wrap .table-wrap table th{cursor:pointer;user-select:none}
.profit-lb-wrap .table-wrap table th:hover{color:var(--text-primary)}
.th-sort-asc::after{content:' ▲';font-size:10px;color:var(--accent)}
.th-sort-desc::after{content:' ▼';font-size:10px;color:var(--accent)}
.plb-rank{font-family:var(--font-display);font-size:18px;width:38px;text-align:center;display:inline-flex;align-items:center;justify-content:center}
.plb-rank-1{color:var(--gold)}
.plb-rank-2{color:var(--silver)}
.plb-rank-3{color:var(--bronze,#cd7f32)}
.plb-rank-n{color:var(--text-muted)}
.val-pos{color:var(--win);font-weight:600}
.val-neg{color:var(--loss);font-weight:600}
.val-zero{color:var(--text-muted)}
.champion-badge{background:linear-gradient(135deg,rgba(255,215,0,0.2),rgba(245,158,11,0.1));border:1px solid rgba(255,215,0,0.35);border-radius:var(--radius-sm)}
.roi-champion-badge{background:linear-gradient(135deg,rgba(79,195,247,0.12),rgba(79,195,247,0.06));border:1px solid rgba(79,195,247,0.28);border-radius:var(--radius-sm)}
/* Part 6 — leaderboard row highlights */
.lb-top-row>td{background:rgba(255,215,0,0.07);border-top:1px solid rgba(255,215,0,0.22);border-bottom:1px solid rgba(255,215,0,0.22)}
.lb-podium-row>td{background:rgba(255,255,255,0.025)}

/* Bet lock indicator */
.bet-locked-banner{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(255,82,82,0.08);border:1px solid rgba(255,82,82,0.22);border-radius:var(--radius-sm);margin-bottom:14px;font-size:13px;color:var(--loss)}

/* Chart area */
.chart-tall{height:320px}
.chart-section-hd{font-family:var(--font-condensed);font-size:14px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:12px}

/* HOF betting additions */
.hof-betting-section{margin-top:28px}
.hof-highlight-card{background:linear-gradient(135deg,rgba(255,215,0,0.08),rgba(245,158,11,0.04));border:1px solid rgba(255,215,0,0.22);border-radius:var(--radius);padding:20px;position:relative;overflow:hidden}
.hof-highlight-card::before{content:'🏆';position:absolute;right:-4px;top:-8px;font-size:80px;opacity:0.06;pointer-events:none}
.hof-highlight-card.roi-card{background:linear-gradient(135deg,rgba(79,195,247,0.08),rgba(79,195,247,0.03));border-color:rgba(79,195,247,0.22)}
.hof-highlight-card.roi-card::before{content:'📈'}
.hof-crown{font-family:var(--font-display);font-size:11px;letter-spacing:1.5px;color:var(--gold);margin-bottom:6px;display:flex;align-items:center;gap:6px}
.hof-crown.roi-crown{color:var(--accent3)}
.hof-winner-name{font-family:var(--font-display);font-size:32px;color:var(--text-primary);letter-spacing:1px;line-height:1;margin-bottom:4px}
.hof-winner-val{font-family:var(--font-display);font-size:44px;letter-spacing:1px;line-height:1}
.hof-winner-sub{font-size:12px;color:var(--text-muted);margin-top:6px}

/* Monthly/seasonal stats table */
.monthly-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:16px}
.monthly-stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:14px;transition:var(--transition)}
.monthly-stat-card:hover{border-color:var(--border-active)}
.msc-month{font-family:var(--font-condensed);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text-secondary);margin-bottom:8px}
.msc-row{display:flex;justify-content:space-between;font-size:11px;padding:2px 0;color:var(--text-secondary)}
.msc-row strong{font-family:var(--font-condensed);font-size:13px;font-weight:700}

/* User profile tabs */
.profile-tabs{display:flex;gap:3px;background:var(--bg-secondary);padding:3px;border-radius:var(--radius-sm);margin-bottom:18px;flex-wrap:wrap}
.ptab{padding:7px 14px;border-radius:6px;font-family:var(--font-condensed);font-size:12px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:var(--text-muted);background:transparent;border:none;cursor:pointer;transition:var(--transition)}
.ptab:hover{color:var(--text-primary)}
.ptab.active{background:var(--bg-card);color:var(--text-primary);box-shadow:var(--shadow-sm)}

/* Favorite market chip */
.fav-market-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;background:rgba(0,230,118,0.1);border:1px solid rgba(0,230,118,0.22);font-family:var(--font-condensed);font-size:12px;font-weight:700;letter-spacing:0.5px;color:var(--accent)}

/* CSV export button in data page */
.data-card .btn-csv{background:rgba(245,158,11,0.12);color:var(--draw);border:1px solid rgba(245,158,11,0.28)}
.data-card .btn-csv:hover{background:rgba(245,158,11,0.22)}

/* ==========================================
   MULTI-PREDICTION SYSTEM
   ========================================== */
.mpred-cell{display:flex;flex-direction:column;gap:3px;align-items:center}
.mpred-slot{display:inline-flex;align-items:center;gap:3px;padding:2px 6px;border-radius:5px;font-family:var(--font-condensed);font-size:10px;font-weight:700;letter-spacing:0.4px}
.mpred-slot-num{font-size:9px;color:var(--text-muted);font-weight:400;margin-right:1px}
.mpred-correct{background:rgba(0,230,118,0.16);color:var(--win);border:1px solid rgba(0,230,118,0.3)}
.mpred-wrong{background:rgba(255,82,82,0.12);color:var(--loss);border:1px solid rgba(255,82,82,0.25)}
.mpred-pending{background:rgba(79,195,247,0.1);color:var(--accent3);border:1px solid rgba(79,195,247,0.2)}
.mpred-add{background:var(--bg-glass);border:1px dashed var(--border);color:var(--text-muted);font-size:10px;padding:1px 6px;border-radius:5px;cursor:pointer;transition:var(--transition)}
.mpred-add:hover{border-color:var(--accent);color:var(--accent)}
.mpm-match-header{display:flex;align-items:center;justify-content:center;gap:14px;padding:14px;background:var(--bg-primary);border-radius:var(--radius-sm);margin-bottom:16px}
.mpm-user-block{background:var(--bg-primary);border-radius:var(--radius-sm);padding:14px;margin-bottom:10px}
.mpm-user-title{font-family:var(--font-condensed);font-size:13px;font-weight:700;color:var(--text-secondary);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}
.mpm-slots-list{display:flex;flex-direction:column;gap:8px}
.mpm-slot{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;transition:var(--transition)}
.mpm-slot:hover{border-color:var(--border-active)}
.mpm-slot-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mpm-slot-label{font-family:var(--font-condensed);font-size:11px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;color:var(--text-muted)}
.mpm-slot-type-tabs{display:flex;gap:3px;background:var(--bg-primary);padding:2px;border-radius:6px;flex-wrap:wrap}
.mpm-type-btn{padding:4px 9px;border-radius:5px;font-family:var(--font-condensed);font-size:10px;font-weight:700;letter-spacing:0.5px;color:var(--text-muted);background:none;border:none;cursor:pointer;transition:var(--transition)}
.mpm-type-btn:hover{color:var(--text-primary)}
.mpm-type-btn.active{background:var(--accent);color:#000}
.mpm-slot-inputs{margin-top:6px}
.mpm-outcome-btns{display:flex;gap:5px;flex-wrap:wrap}
.mpm-ob{padding:5px 10px;border-radius:6px;background:var(--bg-primary);border:1.5px solid var(--border);color:var(--text-muted);font-family:var(--font-condensed);font-size:11px;font-weight:700;cursor:pointer;transition:var(--transition)}
.mpm-ob:hover{border-color:var(--border-active)}
.mpm-ob.sel-home{border-color:var(--accent);background:rgba(0,230,118,0.1);color:var(--accent)}
.mpm-ob.sel-draw{border-color:var(--draw);background:rgba(255,179,0,0.1);color:var(--draw)}
.mpm-ob.sel-away{border-color:var(--loss);background:rgba(255,82,82,0.1);color:var(--loss)}
.mpm-ob.sel-yes{border-color:var(--win);background:rgba(0,230,118,0.1);color:var(--win)}
.mpm-ob.sel-no{border-color:var(--loss);background:rgba(255,82,82,0.1);color:var(--loss)}
.mpm-ob.sel-over{border-color:var(--accent3);background:rgba(79,195,247,0.1);color:var(--accent3)}
.mpm-ob.sel-under{border-color:var(--draw);background:rgba(255,179,0,0.1);color:var(--draw)}
.mpm-score-row{display:flex;align-items:center;gap:8px;margin-top:6px}
.mpm-score-in{width:46px;text-align:center;font-family:var(--font-display);font-size:20px;padding:4px;background:var(--bg-primary);border:2px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary)}
.mpm-score-in:focus{border-color:var(--accent);outline:none}
.mpm-dash{font-family:var(--font-display);font-size:16px;color:var(--text-muted)}
.mpm-add-slot{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;border-radius:20px;background:rgba(0,230,118,0.08);border:1px dashed rgba(0,230,118,0.3);color:var(--accent);font-family:var(--font-condensed);font-size:11px;font-weight:700;cursor:pointer;transition:var(--transition);margin-top:8px}
.mpm-add-slot:hover{background:rgba(0,230,118,0.15)}
.mpm-del-slot{padding:2px 7px;border-radius:5px;background:rgba(255,82,82,0.1);border:1px solid rgba(255,82,82,0.2);color:var(--loss);font-size:11px;cursor:pointer;transition:var(--transition)}
.mpm-del-slot:hover{background:rgba(255,82,82,0.2)}
.mpm-locked{background:rgba(255,82,82,0.06);border:1px solid rgba(255,82,82,0.18);border-radius:var(--radius-sm);padding:8px 12px;font-size:12px;color:var(--loss);margin-bottom:10px;display:flex;align-items:center;gap:7px}
.smart-lb-card{background:linear-gradient(135deg,rgba(0,230,118,0.06),rgba(79,195,247,0.04));border:1px solid rgba(0,230,118,0.18);border-radius:var(--radius);padding:20px;margin-bottom:16px}
.smart-lb-title{font-family:var(--font-display);font-size:22px;letter-spacing:1px;color:var(--accent);margin-bottom:4px}
.smart-lb-sub{font-size:12px;color:var(--text-muted);margin-bottom:16px}
.smart-score-bar{height:5px;background:var(--bg-secondary);border-radius:3px;margin-top:4px;overflow:hidden}
.smart-score-fill{height:5px;background:linear-gradient(90deg,var(--accent),var(--accent3));border-radius:3px;transition:width 0.5s ease}
.users-stats-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:16px}
.users-stats-bar-info{display:flex;gap:16px;flex-wrap:wrap}
.users-stat-chip{font-size:13px;color:var(--text-secondary)}
.users-stat-chip strong{color:var(--text-primary)}
.user-card-actions{display:flex;gap:6px;justify-content:flex-end;margin-top:8px;padding-top:8px;border-top:1px solid var(--border)}
.btn-user-edit{padding:4px 12px;border-radius:6px;background:rgba(79,195,247,0.1);border:1px solid rgba(79,195,247,0.25);color:var(--accent3);font-size:12px;cursor:pointer;transition:var(--transition);font-family:var(--font-body)}
.btn-user-edit:hover{background:rgba(79,195,247,0.2)}
.btn-user-delete{padding:4px 12px;border-radius:6px;background:rgba(255,82,82,0.08);border:1px solid rgba(255,82,82,0.2);color:var(--loss);font-size:12px;cursor:pointer;transition:var(--transition);font-family:var(--font-body)}
.btn-user-delete:hover{background:rgba(255,82,82,0.18)}