/* ============================================================
   WM 2026 Media Planner — style.css  v2.0
   Broadcast-dark + Ensemble Prediction UI
   ============================================================ */

:root {
  --bg:           #0b0f14;
  --surface:      #151c27;
  --surface2:     #1c2535;
  --surface3:     #212f42;
  --border:       #1f2d42;
  --border-light: #2a3a52;

  --green:        #00d084;
  --green-dim:    rgba(0,208,132,.12);
  --green-glow:   rgba(0,208,132,.25);
  --yellow:       #f5b301;
  --yellow-dim:   rgba(245,179,1,.12);
  --red:          #ff5c5c;
  --red-dim:      rgba(255,92,92,.12);
  --orange:       #ff8c00;
  --orange-dim:   rgba(255,140,0,.15);
  --blue:         #4a9eff;
  --blue-dim:     rgba(74,158,255,.12);
  --purple:       #a78bfa;
  --purple-dim:   rgba(167,139,250,.12);

  /* Prediction source colours */
  --poly:         #00d084;
  --kal:          #4a9eff;
  --bkm:          #f5b301;

  --text:         #f0f4f8;
  --text-muted:   #7a8fa8;
  --text-dim:     #4a5568;

  --radius:       8px;
  --radius-lg:    12px;
  --radius-xl:    16px;

  --font:         'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;
  --t:            150ms ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:14px;line-height:1.5;min-height:100vh}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border-light)}

.hidden{display:none!important}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  background:var(--surface);border-bottom:1px solid var(--border);
  position:sticky;top:0;z-index:100;
}
.header-inner{
  max-width:1600px;margin:0 auto;padding:0 24px;height:64px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.header-brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.brand-icon{font-size:28px}
.brand-text{display:flex;flex-direction:column}
.brand-title{font-size:13px;font-weight:800;letter-spacing:.12em;color:var(--yellow);line-height:1}
.brand-sub{font-size:9px;letter-spacing:.2em;color:var(--text-muted);margin-top:3px}
.header-controls{display:flex;align-items:center;gap:12px}

.search-wrap{position:relative}
.search-wrap input{
  background:var(--surface2);border:1px solid var(--border);color:var(--text);
  border-radius:var(--radius);padding:8px 36px 8px 12px;font-size:13px;
  width:260px;transition:border-color var(--t),width var(--t);outline:none;
}
.search-wrap input:focus{border-color:var(--blue);width:320px}
.search-wrap input::placeholder{color:var(--text-dim)}
.search-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:16px;pointer-events:none}

.btn-reset{
  background:transparent;border:1px solid var(--border);color:var(--text-muted);
  padding:7px 14px;border-radius:var(--radius);cursor:pointer;font-size:12px;
  letter-spacing:.04em;transition:all var(--t);white-space:nowrap;
}
.btn-reset:hover{border-color:var(--red);color:var(--red)}

.header-time{font-size:11px;color:var(--text-muted);font-family:var(--font-mono);white-space:nowrap}

/* ── SEARCH RESULTS ── */
.search-results{
  position:fixed;top:72px;right:24px;width:380px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);z-index:200;overflow:hidden;
  box-shadow:0 16px 48px rgba(0,0,0,.5);
}
.search-result-item{
  padding:12px 16px;border-bottom:1px solid var(--border);
  cursor:pointer;transition:background var(--t);
  display:flex;align-items:center;gap:10px;
}
.search-result-item:last-child{border-bottom:none}
.search-result-item:hover{background:var(--surface2)}
.search-result-flag{font-size:20px}
.search-result-info{flex:1}
.search-result-name{font-weight:600;font-size:13px}
.search-result-meta{font-size:11px;color:var(--text-muted)}
.search-result-type{font-size:10px;letter-spacing:.08em;color:var(--text-dim);text-transform:uppercase}
.search-no-results{padding:20px;text-align:center;color:var(--text-muted);font-size:13px}

/* ============================================================
   TAB NAV
   ============================================================ */
.tab-nav{
  background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;padding:0 24px;position:sticky;top:64px;z-index:90;
}
.tab-btn{
  background:transparent;border:none;color:var(--text-muted);
  padding:14px 20px;cursor:pointer;font-size:13px;font-weight:600;
  letter-spacing:.04em;position:relative;transition:color var(--t);
}
.tab-btn::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--yellow);transform:scaleX(0);transition:transform var(--t);
}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--yellow)}
.tab-btn.active::after{transform:scaleX(1)}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.main-content{max-width:1600px;margin:0 auto;padding:32px 24px}
.tab-pane{display:none}
.tab-pane.active{display:block}

.section-header{
  display:flex;align-items:center;gap:16px;
  flex-wrap:wrap;margin-bottom:28px;
}
.section-header h2{font-size:20px;font-weight:800;letter-spacing:.04em;margin-right:auto}

.legend{display:flex;gap:16px;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--text-muted)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot-fix{background:var(--green)}
.dot-live{background:var(--red);animation:pulse 1.5s infinite}
.dot-upcoming{background:var(--text-dim)}
.dot-review{background:var(--yellow)}

.btn-export{
  background:transparent;border:1px solid var(--border);color:var(--text-muted);
  padding:7px 14px;border-radius:var(--radius);cursor:pointer;font-size:12px;
  transition:all var(--t);white-space:nowrap;
}
.btn-export:hover{border-color:var(--green);color:var(--green)}

/* ============================================================
   MATCH STATUS BADGES
   ============================================================ */
.status-badge{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:800;letter-spacing:.1em;
  padding:2px 7px;border-radius:4px;
}
.status-fix{background:var(--green-dim);color:var(--green);border:1px solid rgba(0,208,132,.25)}
.status-live{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,92,92,.3);animation:pulse-bg 1.5s infinite}
.status-upcoming{background:var(--surface3);color:var(--text-muted)}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes pulse-bg{0%,100%{background:var(--red-dim)}50%{background:rgba(255,92,92,.3)}}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.2s infinite;display:inline-block}

/* ============================================================
   GROUPS GRID
   ============================================================ */
.groups-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(480px,1fr));
  gap:24px;
}

@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.group-card{animation:fadeIn .3s ease both;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--t)}
.group-card.review-needed{border-color:var(--yellow)}

.group-card-header{
  padding:14px 18px;display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid var(--border);background:var(--surface2);
}
.group-label{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--text-muted)}
.group-name{font-size:18px;font-weight:800;color:var(--yellow);letter-spacing:.02em}
.group-status-badge{font-size:10px;font-weight:700;letter-spacing:.1em;padding:3px 8px;border-radius:4px}
.group-status-badge.review{background:var(--yellow-dim);color:var(--yellow)}

/* ── Standings table ── */
.standings-table{width:100%;border-collapse:collapse}
.standings-table th{
  font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--text-dim);
  padding:10px 10px 10px 18px;text-align:left;border-bottom:1px solid var(--border);
}
.standings-table th:not(:nth-child(2)){text-align:center}
.standings-table td{padding:9px 10px;border-bottom:1px solid var(--border);font-size:13px}
.standings-table tbody tr:last-child td{border-bottom:none}
.standings-table tbody tr{transition:background var(--t)}
.standings-table tbody tr:hover{background:var(--surface2)}
.standings-table td:first-child{padding-left:18px;width:32px}
.standings-table td:not(:nth-child(2)){text-align:center}

.pos-indicator{width:22px;height:22px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.pos-1{background:var(--green-dim);color:var(--green)}
.pos-2{background:var(--blue-dim);color:var(--blue)}
.pos-3{background:var(--surface2);color:var(--text-muted)}
.pos-4{background:var(--red-dim);color:var(--red)}

.team-cell{display:flex;align-items:center;gap:8px;min-width:140px}
.team-flag{font-size:18px;line-height:1}
.team-name{font-weight:600;font-size:13px}
.team-host-tag{font-size:9px;padding:1px 5px;background:var(--yellow-dim);color:var(--yellow);border-radius:3px;font-weight:700;letter-spacing:.06em}
.pts-cell{font-weight:800;font-size:14px}
.gd-pos{color:var(--green)}.gd-neg{color:var(--red)}.gd-zero{color:var(--text-muted)}
.manual-review-row td{background:rgba(245,179,1,.06)!important}
.manual-review-note{font-size:10px;color:var(--yellow);display:flex;align-items:center;gap:4px;padding:7px 18px;border-bottom:1px solid var(--border)}

/* ── Qualification bar ── */
.qual-bar{display:flex;gap:8px;padding:12px 18px;border-bottom:1px solid var(--border);background:rgba(0,0,0,.18)}
.qual-slot{flex:1;padding:8px 10px;border-radius:6px;border:1px solid var(--border)}
.qual-slot.q1{border-color:rgba(0,208,132,.25)}
.qual-slot.q2{border-color:rgba(74,158,255,.25)}
.qual-label{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--text-muted);margin-bottom:4px}
.qual-team{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.qual-flag{font-size:16px}
.qual-pending{color:var(--text-dim);font-style:italic}

/* ── Match rows ── */
.matches-section{padding:12px 18px}
.matches-toggle{
  display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  letter-spacing:.1em;color:var(--text-muted);cursor:pointer;margin-bottom:12px;
  user-select:none;transition:color var(--t);
}
.matches-toggle:hover{color:var(--text)}
.toggle-arrow{transition:transform var(--t);display:inline-block}
.matches-toggle.collapsed .toggle-arrow{transform:rotate(-90deg)}
.matches-list{display:flex;flex-direction:column;gap:6px}
.matches-list.collapsed{display:none}

.match-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;gap:8px;padding:10px 10px;
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);transition:border-color var(--t);
}
.match-row.match-status-fix{border-color:rgba(0,208,132,.25);background:rgba(0,208,132,.04)}
.match-row.match-status-live{border-color:rgba(255,92,92,.4);background:rgba(255,92,92,.06);animation:pulse-border 2s infinite}
.match-row.match-status-upcoming{border-color:var(--border)}
.match-row:hover{border-color:var(--border-light)}

@keyframes pulse-border{0%,100%{border-color:rgba(255,92,92,.4)}50%{border-color:rgba(255,92,92,.8)}}

.match-team{display:flex;align-items:center;gap:6px;font-weight:600;font-size:12px}
.away-team{justify-content:flex-end;flex-direction:row-reverse;text-align:right}
.match-flag{font-size:16px}
.match-name{font-size:12px;font-weight:600}

.match-center{display:flex;flex-direction:column;align-items:center;gap:4px}
.match-score-wrap{display:flex;align-items:center;gap:5px}
.score-input{
  width:36px;height:32px;background:var(--bg);border:1px solid var(--border);
  color:var(--text);text-align:center;font-size:15px;font-weight:700;
  font-family:var(--font-mono);border-radius:5px;outline:none;transition:border-color var(--t);
  -moz-appearance:textfield;
}
.score-input::-webkit-inner-spin-button,.score-input::-webkit-outer-spin-button{-webkit-appearance:none}
.score-input:focus{border-color:var(--yellow)}
.score-sep{color:var(--text-dim);font-weight:700;font-size:13px}

.match-meta-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.match-time-str{font-size:10px;color:var(--text-dim);font-family:var(--font-mono)}
.match-venue-str{font-size:10px;color:var(--text-dim)}

/* ── Prediction mini-bar in match rows ── */
.pred-mini-bar{
  display:flex;width:120px;height:6px;border-radius:3px;overflow:hidden;margin-top:2px;gap:1px;
}
.pred-home{background:var(--green);border-radius:3px 0 0 3px;display:flex;align-items:center;
  justify-content:center;font-size:8px;color:rgba(0,0,0,.7);font-weight:700;overflow:hidden;min-width:0}
.pred-draw{background:var(--text-dim)}
.pred-away{background:var(--blue);border-radius:0 3px 3px 0;display:flex;align-items:center;
  justify-content:center;font-size:8px;color:rgba(0,0,0,.7);font-weight:700;overflow:hidden;min-width:0}

/* ============================================================
   PREDICTIONS TAB
   ============================================================ */

/* ── Weight Control Panel ── */
.weight-panel{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:24px;margin-bottom:32px;
}
.weight-panel-title{
  font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--text-muted);
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.weight-panel-icon{font-size:16px}
.weight-total-badge{
  margin-left:auto;font-size:11px;font-weight:800;padding:3px 10px;
  border-radius:20px;background:var(--green-dim);color:var(--green);letter-spacing:.06em;
}
.weight-panel-desc{font-size:12px;color:var(--text-muted);line-height:1.6;margin-bottom:20px}

.slider-grid{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}
.slider-row{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.slider-source-info{display:flex;align-items:center;gap:10px}
.slider-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.dot-poly{background:var(--poly)}
.dot-kal{background:var(--kal)}
.dot-bkm{background:var(--bkm)}
.slider-source-name{font-size:13px;font-weight:700;margin-bottom:2px}
.slider-source-desc{font-size:11px;color:var(--text-muted)}
.slider-control{display:flex;align-items:center;gap:12px;min-width:220px}
.slider-pct{
  font-size:14px;font-weight:800;font-family:var(--font-mono);
  min-width:42px;text-align:right;color:var(--text);
}

.weight-slider{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;border-radius:2px;outline:none;cursor:pointer;
  background:var(--border);transition:background var(--t);
}
.weight-slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  cursor:pointer;transition:transform var(--t),box-shadow var(--t);
  border:2px solid var(--bg);
}
.slider-poly::-webkit-slider-thumb{background:var(--poly)}
.slider-kal::-webkit-slider-thumb{background:var(--kal)}
.slider-bkm::-webkit-slider-thumb{background:var(--bkm)}
.weight-slider::-webkit-slider-thumb:hover{transform:scale(1.2);box-shadow:0 0 0 4px rgba(255,255,255,.1)}
.weight-slider::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;cursor:pointer;
  border:2px solid var(--bg);
}
.slider-poly::-moz-range-thumb{background:var(--poly)}
.slider-kal::-moz-range-thumb{background:var(--kal)}
.slider-bkm::-moz-range-thumb{background:var(--bkm)}

/* Visual weight bar */
.weight-visual-bar{
  display:flex;height:24px;border-radius:6px;overflow:hidden;gap:2px;
}
.weight-seg{
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:700;letter-spacing:.04em;
  transition:width .2s ease;overflow:hidden;white-space:nowrap;min-width:0;
}
.wseg-poly{background:rgba(0,208,132,.25);color:var(--poly)}
.wseg-kal{background:rgba(74,158,255,.25);color:var(--kal)}
.wseg-bkm{background:rgba(245,179,1,.25);color:var(--bkm)}

/* ── Date groups ── */
.pred-date-group{margin-bottom:32px}
.pred-date-label{
  font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--text-muted);
  padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--border);
  text-transform:uppercase;
}

/* ── Prediction cards ── */
.pred-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;
  transition:border-color var(--t);
}
.pred-card:hover{border-color:var(--border-light)}

.pred-card-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  flex-wrap:wrap;gap:10px;margin-bottom:16px;
}
.pred-matchup{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pred-team{font-size:15px;font-weight:700}
.pred-vs{font-size:11px;color:var(--text-dim);font-weight:700;letter-spacing:.08em}
.pred-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pred-group{font-size:11px;padding:2px 8px;background:var(--yellow-dim);color:var(--yellow);border-radius:4px;font-weight:700;letter-spacing:.06em}
.pred-time{font-size:11px;color:var(--text-muted);font-family:var(--font-mono)}
.pred-conf{font-size:10px;font-weight:700;letter-spacing:.08em}
.conf-high{color:var(--green)}.conf-medium{color:var(--yellow)}.conf-low{color:var(--red)}

/* Main probability bar */
.pred-bar-wrap{margin-bottom:16px}
.pred-bar-row{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.pred-bar-label{font-size:11px;font-weight:600;color:var(--text-muted);width:90px;flex-shrink:0}
.pred-bar-label.away-lbl{text-align:right}
.pred-bar-track{
  flex:1;height:28px;display:flex;overflow:hidden;border-radius:6px;gap:2px;
}
.pred-bar-seg{
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;transition:width .25s ease;overflow:hidden;min-width:0;
}
.seg-home{background:linear-gradient(90deg,#00a86b,var(--green));color:rgba(0,0,0,.7);border-radius:5px 0 0 5px}
.seg-draw{background:var(--surface3);color:var(--text-muted)}
.seg-away{background:linear-gradient(90deg,#2276d4,var(--blue));color:rgba(0,0,0,.7);border-radius:0 5px 5px 0}
.pred-bar-pct{font-size:11px;font-weight:800;white-space:nowrap;padding:0 4px}
.pred-bar-legend{display:flex;gap:16px;flex-wrap:wrap}
.leg-home{font-size:10px;color:var(--green);font-weight:600}
.leg-draw{font-size:10px;color:var(--text-muted);font-weight:600}
.leg-away{font-size:10px;color:var(--blue);font-weight:600}

/* Source breakdown */
.pred-sources{
  background:var(--surface2);border-radius:var(--radius);
  padding:12px 14px;margin-bottom:14px;
  display:flex;flex-direction:column;gap:8px;
}
.pred-source-row{display:flex;align-items:center;gap:10px}
.pred-source-label{font-size:11px;font-weight:700;color:var(--text-muted);width:90px;flex-shrink:0}
.pred-source-bar-wrap{flex:1;height:16px;display:flex;border-radius:4px;overflow:hidden;gap:1px}
.pred-src-seg{
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;transition:width .2s ease;overflow:hidden;min-width:0;
}
.src-home{background:rgba(0,208,132,.3);color:var(--green)}
.src-draw{background:var(--surface3)}
.src-away{background:rgba(74,158,255,.3);color:var(--blue)}
.pred-src-weight{
  font-size:11px;font-weight:800;font-family:var(--font-mono);
  color:var(--text-muted);width:32px;text-align:right;flex-shrink:0;
}

.pred-verdict{font-size:12px;color:var(--text-muted);padding-top:12px;border-top:1px solid var(--border)}
.pred-verdict strong{color:var(--text)}
.pred-empty{padding:40px;text-align:center;color:var(--text-muted);font-size:14px;font-style:italic}

/* ============================================================
   BRACKET
   ============================================================ */
.bracket-legend{display:flex;gap:16px;align-items:center}
.bracket-leg-item{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)}
.blot{width:10px;height:10px;border-radius:3px}
.blot-confirmed{background:var(--green)}
.blot-predicted{background:rgba(74,158,255,.4);border:1px dashed var(--blue)}

.bracket-container{overflow-x:auto;padding-bottom:20px}
.bracket-inner{display:flex;gap:0;min-width:1100px;align-items:stretch}

.bracket-round{flex:1;display:flex;flex-direction:column}
.bracket-round-header{
  text-align:center;font-size:10px;font-weight:800;letter-spacing:.14em;color:var(--text-muted);
  padding:12px 8px;border-bottom:1px solid var(--border);margin-bottom:16px;
  background:var(--surface2);border-radius:var(--radius) var(--radius) 0 0;
}
.bracket-slots{display:flex;flex-direction:column;justify-content:space-around;flex:1;gap:8px;padding:0 6px}

.bracket-match{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);overflow:hidden;transition:border-color var(--t);
}
.bracket-match:hover{border-color:var(--border-light)}

.bracket-slot-label{
  font-size:9px;letter-spacing:.1em;color:var(--text-dim);
  font-weight:700;padding:4px 10px 0;
}
.bracket-team{
  display:flex;align-items:center;gap:7px;
  padding:8px 10px;font-size:12px;font-weight:600;
  border-bottom:1px solid var(--border);transition:background var(--t);
}
.bracket-team:last-of-type{border-bottom:none}

/* Confirmed qualifier — solid green tint */
.team-confirmed{background:var(--green-dim)}
.team-confirmed .bracket-team-name{color:var(--green)}
.bracket-confirmed-dot{color:var(--green);font-size:11px;margin-left:auto}

/* Predicted qualifier — transparent blue tint + dashed border */
.team-predicted{opacity:.8;background:rgba(74,158,255,.06)}
.team-predicted .bracket-team-name{color:var(--blue)}

.bracket-prob{
  font-size:10px;font-weight:800;color:var(--blue);
  background:var(--blue-dim);padding:1px 5px;border-radius:4px;margin-left:4px;
}
.bracket-team-name{flex:1}
.bracket-venue{
  font-size:10px;color:var(--text-dim);padding:5px 10px;
  border-top:1px solid var(--border);
}
.bracket-pending{color:var(--text-dim);font-style:italic;font-size:11px}
.bracket-review{color:var(--yellow);font-size:10px}

/* ============================================================
   VENUES
   ============================================================ */
.venues-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
.venue-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  transition:border-color var(--t),transform var(--t);
}
.venue-card:hover{border-color:var(--border-light);transform:translateY(-2px)}
.venue-image{width:100%;height:180px;object-fit:cover;display:block;background:var(--surface2)}
.venue-image-placeholder{width:100%;height:180px;background:linear-gradient(135deg,var(--surface2),var(--border));display:flex;align-items:center;justify-content:center;font-size:48px}
.venue-info{padding:16px}
.venue-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:8px}
.venue-name{font-size:15px;font-weight:800;line-height:1.2;flex:1}
.venue-country-badge{font-size:10px;font-weight:700;letter-spacing:.08em;padding:3px 8px;border-radius:4px;white-space:nowrap;margin-left:8px}
.venue-country-badge.usa{background:rgba(74,158,255,.15);color:var(--blue)}
.venue-country-badge.canada{background:rgba(255,92,92,.15);color:var(--red)}
.venue-country-badge.mexico{background:rgba(0,208,132,.15);color:var(--green)}
.venue-city{font-size:12px;color:var(--text-muted);margin-bottom:8px}
.venue-capacity{font-size:11px;color:var(--text-dim);margin-bottom:12px;font-family:var(--font-mono)}
.venue-capacity strong{color:var(--text-muted)}
.venue-matches-title{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--text-muted);margin-bottom:8px}

.venue-match-chip{
  display:flex;align-items:center;gap:6px;padding:6px 8px;
  background:var(--surface2);border-radius:5px;margin-bottom:4px;
  font-size:11px;border:1px solid var(--border);
}
.venue-chip-badge{
  font-size:9px;font-weight:800;letter-spacing:.06em;
  padding:2px 6px;border-radius:3px;white-space:nowrap;flex-shrink:0;
}
.chip-fix{background:var(--green-dim);color:var(--green)}
.chip-live{background:var(--red-dim);color:var(--red)}
.chip-upcoming{background:var(--surface3);color:var(--text-muted)}
.chip-bracket{background:var(--purple-dim);color:var(--purple)}
.venue-match-teams{flex:1;font-weight:600}
.venue-match-round{font-size:10px;color:var(--text-dim);letter-spacing:.04em;white-space:nowrap}
.venue-no-matches{font-size:12px;color:var(--text-dim);font-style:italic}

/* ============================================================
   DIALOG
   ============================================================ */
.dialog-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);
  backdrop-filter:blur(4px);z-index:300;
  display:flex;align-items:center;justify-content:center;
}
.dialog{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:32px;text-align:center;max-width:380px;width:90%;
}
.dialog-icon{font-size:36px;margin-bottom:16px;color:var(--yellow)}
.dialog h3{font-size:18px;font-weight:800;margin-bottom:10px}
.dialog p{color:var(--text-muted);font-size:13px;margin-bottom:24px;line-height:1.6}
.dialog-actions{display:flex;gap:10px;justify-content:center}
.btn-cancel,.btn-confirm{padding:10px 24px;border-radius:var(--radius);font-size:13px;font-weight:700;cursor:pointer;transition:all var(--t);border:1px solid transparent}
.btn-cancel{background:var(--surface2);border-color:var(--border);color:var(--text-muted)}
.btn-cancel:hover{color:var(--text);border-color:var(--border-light)}
.btn-confirm{background:var(--red-dim);border-color:var(--red);color:var(--red)}
.btn-confirm:hover{background:var(--red);color:#fff}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){
  .groups-grid{grid-template-columns:1fr}
  .venues-grid{grid-template-columns:1fr}
  .search-wrap input{width:180px}
  .search-wrap input:focus{width:220px}
  .header-time{display:none}
  .slider-row{grid-template-columns:1fr;gap:8px}
  .slider-control{min-width:0}
}
@media(max-width:600px){
  .header-inner{padding:0 12px}
  .main-content{padding:16px 12px}
  .tab-btn{padding:12px 10px;font-size:11px}
  .brand-sub,.btn-reset{display:none}
  .weight-panel{padding:16px}
  .pred-bar-label{width:60px;font-size:10px}
}

/* ============================================================
   ERGÄNZUNGEN v3.0
   · Sync-Status · Result-Panel · 2-Source Sliders · Badges
   ============================================================ */

/* ── Sync-Status ── */
.btn-reset-wrap{display:flex;gap:8px;align-items:center}
.btn-sync{
  background:transparent;border:1px solid var(--border);color:var(--text-muted);
  padding:7px 12px;border-radius:var(--radius);cursor:pointer;font-size:12px;
  transition:all var(--t);white-space:nowrap;
}
.btn-sync:hover{border-color:var(--blue);color:var(--blue)}

.header-time-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.sync-status{
  font-size:11px;color:var(--text-muted);
  display:flex;align-items:center;gap:5px;white-space:nowrap;
  font-family:var(--font-mono);
}
.sync-dot{width:7px;height:7px;border-radius:50%;display:inline-block;flex-shrink:0}
.sync-loading{background:var(--yellow);animation:pulse 1s infinite}
.sync-live{background:var(--red);animation:pulse 1s infinite}
.sync-ok{background:var(--green)}
.sync-error{background:var(--red)}

/* ── Pred-Card Status-Varianten ── */
.pred-status-fix{border-left:3px solid var(--green)}
.pred-status-live{border-left:3px solid var(--red);animation:pulse-border 2s infinite}
.pred-status-upcoming{border-left:3px solid var(--border)}

.pred-status-badge{
  font-size:10px;font-weight:800;letter-spacing:.08em;
  padding:2px 7px;border-radius:4px;
}
.pbadge-fix{background:var(--green-dim);color:var(--green)}
.pbadge-live{background:var(--red-dim);color:var(--red)}

/* ── Result Panel (Option B) ── */
.result-panel{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px 16px;margin-bottom:14px;
}
.result-panel.result-live{border-color:rgba(255,92,92,.4);background:rgba(255,92,92,.05)}
.result-panel-title{
  font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--text-dim);
  margin-bottom:8px;display:flex;align-items:center;gap:6px;
}
.result-scoreline{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;
}
.result-team{font-size:13px;font-weight:600;flex:1}
.result-team:last-child{text-align:right}
.result-score{
  font-size:22px;font-weight:900;font-family:var(--font-mono);
  color:var(--text);letter-spacing:.05em;white-space:nowrap;
}
.live-score{color:var(--red);animation:pulse 1.5s infinite}
.result-accuracy{font-size:11px;font-weight:700;margin-top:6px}
.acc-correct{color:var(--green)}
.acc-wrong{color:var(--red)}

/* ── Pred section label ── */
.pred-section-label{
  font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--text-dim);
  margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.pred-source-note{font-size:10px;font-weight:400;color:var(--text-dim);letter-spacing:0;text-transform:none}
.pred-no-data{font-size:11px;color:var(--text-dim);font-style:italic;flex:1}
.pred-source-missing{opacity:.5}
.pred-no-odds{font-size:12px;color:var(--text-dim);font-style:italic;padding:4px 0}

/* ── Result score inline (minimal card) ── */
.result-score-inline{
  font-size:13px;font-weight:800;font-family:var(--font-mono);
  color:var(--green);background:var(--green-dim);
  padding:2px 8px;border-radius:4px;
}
.pred-card-minimal{opacity:.85}

/* ── Source live badge ── */
.source-live-badge{
  font-size:9px;font-weight:800;letter-spacing:.08em;
  padding:1px 5px;border-radius:3px;
  background:var(--green-dim);color:var(--green);
  vertical-align:middle;margin-left:4px;
}

/* ============================================================
   TODAY TAB  v1.0
   ============================================================ */

/* ── Hero ── */
.today-hero {
  background: linear-gradient(135deg, #0d1520 0%, #1a2540 50%, #0d1520 100%);
  border-bottom: 1px solid var(--border);
  padding: 48px 24px 32px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: -32px -24px 0;   /* bleed to main-content edges */
}
.today-hero::before {
  content: '⚽';
  position: absolute;
  font-size: 300px;
  opacity: .03;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}
.today-greeting {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--yellow);
  margin-bottom: 10px;
}
.today-headline {
  font-size: clamp(22px, 4vw, 38px);
  font-weight: 900;
  letter-spacing: -.01em;
  line-height: 1.2;
  margin-bottom: 14px;
  color: var(--text);
}
.today-date-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 16px;
  font-size: 12px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  margin-bottom: 14px;
}
.today-match-count {
  font-size: 13px;
  color: var(--text-muted);
  min-height: 20px;
}

/* ── Sync bar ── */
.today-sync-bar {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  padding: 7px 0;
  font-size: 11px;
  color: var(--text-muted);
  font-family: var(--font-mono);
  text-align: center;
  margin: 0 -24px 28px;
}

/* ── Body wrapper ── */
.today-body {
  max-width: 820px;
  margin: 0 auto;
}

/* ── Empty state ── */
.today-empty {
  text-align: center;
  padding: 72px 24px;
  color: var(--text-muted);
}
.today-empty .empty-icon { font-size: 52px; margin-bottom: 16px; display: block; }
.today-empty h3 { font-size: 18px; color: var(--text); margin-bottom: 8px; }
.today-empty p  { font-size: 14px; line-height: 1.6; }

/* ── Match card ── */
.tmc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  margin-bottom: 20px;
  overflow: hidden;
  transition: border-color var(--t), transform var(--t);
}
.tmc:hover { border-color: var(--border-light); transform: translateY(-1px); }
.tmc.card-fix      { border-left: 4px solid var(--green); }
.tmc.card-live     { border-left: 4px solid var(--red); animation: pulse-border 2s infinite; }
.tmc.card-upcoming { border-left: 4px solid var(--border-light); }

/* Card header row */
.tmc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 20px;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 8px;
}
.tmc-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tmc-group {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--yellow);
  background: var(--yellow-dim);
  padding: 3px 8px;
  border-radius: 4px;
}
.tmc-time-str { font-size: 12px; font-family: var(--font-mono); color: var(--text-muted); }
.tmc-venue-str { font-size: 12px; color: var(--text-muted); }
.tmc-venue-str::before { content: '📍 '; }

.tmc-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  padding: 3px 9px;
  border-radius: 4px;
  white-space: nowrap;
}
.tmc-status.s-fix      { background: var(--green-dim); color: var(--green); }
.tmc-status.s-live     { background: var(--red-dim);   color: var(--red);   }
.tmc-status.s-upcoming { background: var(--surface3);  color: var(--text-muted); }

/* Matchup grid */
.tmc-matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 28px 24px 20px;
  gap: 12px;
}
.tmc-team { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tmc-flag { font-size: 50px; line-height: 1; filter: drop-shadow(0 2px 8px rgba(0,0,0,.35)); }
.tmc-team-name { font-size: 15px; font-weight: 800; text-align: center; }
.tmc-team-conf { font-size: 10px; color: var(--text-dim); letter-spacing: .08em; font-weight: 600; }

.tmc-center { text-align: center; }
.tmc-score-big {
  font-size: 40px;
  font-weight: 900;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  line-height: 1;
}
.tmc-score-big.s-fix  { color: var(--green); }
.tmc-score-big.s-live { color: var(--red); }
.tmc-score-label { font-size: 9px; letter-spacing: .16em; color: var(--text-dim); margin-top: 4px; font-weight: 700; }
.tmc-vs          { font-size: 22px; font-weight: 900; color: var(--text-dim); }
.tmc-kickoff     { font-size: 13px; font-weight: 700; color: var(--text-muted); font-family: var(--font-mono); margin-top: 6px; }

/* Prediction section */
.tmc-pred { padding: 0 24px 20px; }
.tmc-pred-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--text-dim);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.tmc-pred-title::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.tmc-pred-conf { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; }

/* Three-way outcome boxes */
.tmc-three-way {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.tmc-outcome {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 8px;
  text-align: center;
  transition: border-color var(--t);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tmc-outcome.leader { border-color: var(--blue); background: var(--blue-dim); }
.tmc-outcome-pct {
  font-size: 22px;
  font-weight: 900;
  font-family: var(--font-mono);
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}
.tmc-outcome.leader .tmc-outcome-pct { color: var(--blue); }
.tmc-outcome-lbl { font-size: 10px; color: var(--text-muted); font-weight: 600; letter-spacing: .04em; }

/* Score prediction chip */
.tmc-score-pred {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--surface2);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.tmc-score-pred-lbl   { font-size: 10px; font-weight: 700; letter-spacing: .1em; color: var(--text-dim); }
.tmc-score-pred-val   { font-size: 18px; font-weight: 900; font-family: var(--font-mono); color: var(--blue); letter-spacing: .06em; }
.tmc-score-pred-teams { font-size: 11px; color: var(--text-muted); }

/* Accuracy bar for finished matches */
.tmc-accuracy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 700;
}
.tmc-accuracy.correct { color: var(--green); background: var(--green-dim); }
.tmc-accuracy.wrong   { color: var(--red);   background: var(--red-dim);   }

.tmc-no-pred {
  padding: 10px 20px;
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
  border-top: 1px solid var(--border);
}

/* ── Sponsor block ── */
.sponsor-section { margin-top: 48px; border-top: 1px solid var(--border); padding-top: 36px; }
.sponsor-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .2em;
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 20px;
}
.sponsor-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 260px;
  transition: border-color var(--t);
}
.sponsor-card:hover { border-color: var(--yellow); }

.sponsor-image-block {
  background: linear-gradient(135deg, #1a2540, #0d1c30);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  min-height: 220px;
}
.sponsor-image-placeholder { text-align: center; color: var(--text-dim); }
.sip-icon { font-size: 52px; margin-bottom: 10px; display: block; }
.sponsor-image-placeholder p { font-size: 11px; color: var(--text-dim); line-height: 1.5; }
.sponsor-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sponsor-content {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
.sponsor-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--yellow-dim);
  border: 1px solid rgba(245,179,1,.25);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--yellow);
  width: fit-content;
}
.sponsor-logo { font-size: 24px; font-weight: 900; letter-spacing: -.02em; color: var(--text); }
.sponsor-logo span { color: var(--yellow); }
.sponsor-slogan { font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--text); }
.sponsor-slogan em { font-style: normal; color: var(--yellow); }
.sponsor-desc { font-size: 13px; color: var(--text-muted); line-height: 1.65; }
.sponsor-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--yellow);
  color: #0b0f14;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 11px 22px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: all var(--t);
  width: fit-content;
}
.sponsor-cta:hover { background: #ffc61a; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(245,179,1,.28); }
.sponsor-cta-arrow { font-size: 15px; }

/* ── Responsive: Today ── */
@media(max-width:640px){
  .today-hero  { padding: 28px 16px 20px; margin: -16px -12px 0; }
  .today-sync-bar { margin: 0 -12px 20px; }
  .tmc-matchup { padding: 18px 14px 14px; }
  .tmc-flag    { font-size: 36px; }
  .tmc-team-name { font-size: 12px; }
  .tmc-score-big { font-size: 30px; }
  .tmc-three-way { gap: 5px; }
  .tmc-outcome-pct { font-size: 17px; }
  .tmc-pred    { padding: 0 14px 14px; }
  .sponsor-card { grid-template-columns: 1fr; }
  .sponsor-image-block { min-height: 160px; }
  .sponsor-content { padding: 22px 18px; }
  .sponsor-slogan { font-size: 17px; }
}

/* ============================================================
   MONTE CARLO BRACKET CONFIDENCE  +  FOOTER  +  METHODOLOGY
   ============================================================ */

/* ── Monte Carlo bracket team colours ── */
.bracket-mc-prob {
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: auto;
  font-family: var(--font-mono);
}

/* Red: <33% real data */
.mc-low  { background: rgba(255,92,92,.08); }
.mc-low  .bracket-team-name { color: var(--red); }
.mc-low  .bracket-mc-prob   { background: var(--red-dim); color: var(--red); }

/* Yellow: 33–66% real data */
.mc-medium { background: rgba(245,179,1,.08); }
.mc-medium .bracket-team-name { color: var(--yellow); }
.mc-medium .bracket-mc-prob   { background: var(--yellow-dim); color: var(--yellow); }

/* Green: >66% real data */
.mc-high { background: rgba(0,208,132,.08); }
.mc-high .bracket-team-name { color: var(--green); }
.mc-high .bracket-mc-prob   { background: var(--green-dim); color: var(--green); }

/* ── Methodology block ── */
.methodology-block {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 14px 24px;
}
.methodology-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.6;
}
.methodology-title {
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}
.methodology-sep { color: var(--border-light); }
.methodology-inner strong { color: var(--text-muted); }

.mc-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
}
.mc-badge.mc-low    { background: var(--red-dim);    color: var(--red);    }
.mc-badge.mc-medium { background: var(--yellow-dim); color: var(--yellow); }
.mc-badge.mc-high   { background: var(--green-dim);  color: var(--green);  }

/* ── Site footer ── */
.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 14px 24px;
}
.site-footer-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--text-dim);
}
.site-footer-inner a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color var(--t);
}
.site-footer-inner a:hover { color: var(--yellow); }

.footer-link {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 11px;
  cursor: pointer;
  padding: 0;
  transition: color var(--t);
  font-family: var(--font);
}
.footer-link:hover { color: var(--yellow); }

/* ── Legal modal ── */
.dialog-legal {
  max-width: 560px;
  width: 92%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
}
.dialog-legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dialog-legal-header h3 { font-size: 16px; font-weight: 800; }
.dialog-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius);
  transition: all var(--t);
}
.dialog-close:hover { background: var(--surface2); color: var(--text); }

.dialog-legal-body {
  overflow-y: auto;
  padding: 20px 24px 24px;
  flex: 1;
}
.legal-heading {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  color: var(--yellow);
  margin: 18px 0 6px;
  text-transform: uppercase;
}
.legal-heading:first-child { margin-top: 0; }
.legal-text {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 4px;
}