/* =====================================================
   Sam Media · FIFA World Cup 2026 Poule
   Brand: #7DC242 (Sam Green) · #000 · #fff
   ===================================================== */

:root {
  --green:      #7DC242;
  --green-dim:  #5a9030;
  --green-glow: rgba(125, 194, 66, 0.15);
  --bg:         #06070e;
  --bg-card:    #0c0f1a;
  --bg-card2:   #111829;
  --bg-input:   #080b14;
  --border:     #1c2238;
  --border-hi:  #2a3354;
  --text:       #f0f0f0;
  --text-sub:   #888;
  --text-dim:   #555;
  --gold:       #f0b429;
  --silver:     #9eb3c2;
  --bronze:     #cd7f32;
  --red:        #ef4444;
  --yellow:     #eab308;
  --radius:     12px;
  --radius-sm:  8px;
  --shadow:     0 4px 24px rgba(0,0,0,0.5);
  --transition: 0.18s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:
    /* Sam Green aurora shimmer — top left, Canada nod */
    radial-gradient(ellipse at 15% 8%, rgba(125,194,66,0.07) 0%, transparent 40%),
    /* Warm desert glow — bottom right, Mexico/Southwest */
    radial-gradient(ellipse at 85% 95%, rgba(200,90,20,0.10) 0%, transparent 38%),
    /* Stadium lights green bloom — bottom centre */
    radial-gradient(ellipse at 50% 105%, rgba(125,194,66,0.06) 0%, transparent 40%),
    /* Night sky gradient — deep space to warm earth */
    linear-gradient(
      180deg,
      #03040c 0%,
      #05081a 18%,
      #07091c 35%,
      #09091a 52%,
      #0c0b14 68%,
      #10090c 84%,
      #0e0807 100%
    );
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Mountain silhouette — 3 depth layers, North American landscape */
body::before {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 42vh;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3C!-- Distant mountains (Canadian Rockies, faint blue) --%3E%3Cpath d='M0,320 L0,175 L60,158 L110,168 L165,138 L210,155 L260,118 L305,140 L350,105 L395,128 L440,95 L480,118 L525,90 L570,115 L618,88 L660,112 L705,92 L750,118 L798,96 L840,122 L885,100 L935,128 L978,108 L1025,130 L1070,112 L1115,138 L1160,118 L1210,140 L1255,122 L1305,145 L1360,130 L1440,148 L1440,320 Z' fill='%230a1428' opacity='0.7'/%3E%3C!-- Main Rockies peaks (USA, dramatic) --%3E%3Cpath d='M0,320 L0,218 L50,205 L90,215 L130,188 L165,205 L200,165 L228,185 L258,138 L285,165 L315,108 L338,140 L362,88 L385,122 L408,72 L428,105 L448,60 L465,90 L482,68 L502,98 L522,78 L545,108 L568,88 L595,118 L625,98 L658,132 L692,110 L728,145 L765,122 L808,158 L848,135 L892,168 L938,148 L985,178 L1035,158 L1082,185 L1130,165 L1180,192 L1230,175 L1285,198 L1340,182 L1440,210 L1440,320 Z' fill='%23081120' opacity='0.85'/%3E%3C!-- Foreground mesas and desert (Mexico/Southwest, darkest) --%3E%3Cpath d='M0,320 L0,262 L80,255 L140,248 L195,252 L240,238 L285,244 L340,232 L395,240 L450,228 L510,238 L565,225 L620,235 L675,228 L730,240 L790,232 L850,242 L912,235 L975,245 L1038,238 L1100,248 L1162,240 L1225,252 L1295,245 L1380,255 L1440,260 L1440,320 Z' fill='%2306090f' opacity='0.95'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 0;
}

/* Stars — scattered dots across the upper sky */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 55vh;
  background-image:
    radial-gradient(1px 1px at 8%   12%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 18%   5%, rgba(255,255,255,0.40) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 25%  18%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 33%   8%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 41%  22%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 52%   6%, rgba(255,255,255,0.55) 0%, transparent 100%),
    radial-gradient(1px 1px at 60%  15%, rgba(255,255,255,0.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 68%   9%, rgba(255,255,255,0.50) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 76%  20%, rgba(255,255,255,0.60) 0%, transparent 100%),
    radial-gradient(1px 1px at 84%   4%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 91%  14%, rgba(255,255,255,0.45) 0%, transparent 100%),
    radial-gradient(1px 1px at 12%  32%, rgba(255,255,255,0.30) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 36%  38%, rgba(255,255,255,0.40) 0%, transparent 100%),
    radial-gradient(1px 1px at 57%  29%, rgba(255,255,255,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 79%  35%, rgba(255,255,255,0.30) 0%, transparent 100%),
    /* Aurora wisps — Sam Green */
    radial-gradient(ellipse 180px 30px at 12% 20%, rgba(125,194,66,0.06) 0%, transparent 100%),
    radial-gradient(ellipse 120px 20px at 22% 30%, rgba(125,194,66,0.04) 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

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

/* ── HEADER ── */
#header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(6, 7, 14, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 0 rgba(125,194,66,0.15), 0 4px 24px rgba(0,0,0,0.6);
  padding: 0 24px;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 60px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}

.logo img {
  height: 34px;
  width: auto;
  filter: drop-shadow(0 0 8px rgba(125,194,66,0.30));
}

.logo-divider {
  width: 1px;
  height: 28px;
  background: var(--border-hi);
  flex-shrink: 0;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  gap: 3px;
}

.logo-text .brand {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text);
}

.logo-text .event {
  font-size: 11px;
  color: var(--green);
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(125,194,66,0.5);
}

.nav-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
}

.nav-tab {
  padding: 6px 14px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: var(--text-sub);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  position: relative;
}

.nav-tab:hover { color: var(--text); background: var(--bg-card2); }

.nav-tab.active {
  color: var(--green);
  background: var(--green-glow);
}

.nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--green);
  border-radius: 1px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.save-status {
  font-size: 12px;
  color: var(--text-dim);
  min-width: 70px;
  text-align: right;
}

.save-status.saving { color: var(--yellow); }
.save-status.saved  { color: var(--green); }
.save-status.error  { color: var(--red); }

#user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: all var(--transition);
  color: var(--text);
  font-size: 13px;
}

#user-btn:hover { border-color: var(--border-hi); }

.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #000;
  flex-shrink: 0;
}

/* ── MAIN LAYOUT ── */
#app {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 24px 80px;
  position: relative;
  z-index: 1;
}

.view { display: none; }
.view.active { display: block; }

/* ── SECTION HEADER ── */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.section-title {
  font-size: 22px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}

.section-title .icon { font-size: 20px; }

.section-sub {
  font-size: 13px;
  color: var(--text-sub);
  margin-top: 3px;
}

/* ── CARDS ── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color var(--transition);
  backdrop-filter: blur(4px);
}

.card:hover { border-color: var(--border-hi); }

/* ── BUTTON ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: none;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-primary {
  background: var(--green);
  color: #000;
}
.btn-primary:hover { background: #8ed44a; transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--text-sub);
  border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--border-hi); color: var(--text); }

.btn-sm { padding: 6px 12px; font-size: 12.5px; }

/* ── LEADERBOARD ── */
.leaderboard-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lb-row {
  display: grid;
  grid-template-columns: 48px 1fr auto auto;
  align-items: center;
  gap: 12px 16px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
  cursor: pointer;
}

.lb-row:hover { border-color: var(--border-hi); background: var(--bg-card2); }
.lb-row.me { border-color: var(--green); background: var(--green-glow); }

.lb-rank {
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  color: var(--text-dim);
}

.lb-rank.rank-1 { color: var(--gold); font-size: 22px; }
.lb-rank.rank-2 { color: var(--silver); font-size: 20px; }
.lb-rank.rank-3 { color: var(--bronze); font-size: 19px; }

.lb-user {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.lb-name {
  font-weight: 600;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lb-bar-wrap {
  width: 140px;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.lb-bar {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  transition: width 0.6s ease;
}

.lb-pts {
  font-size: 16px;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
}

.lb-sub {
  font-size: 11px;
  color: var(--text-dim);
}

.lb-progress {
  font-size: 12px;
  color: var(--text-sub);
  white-space: nowrap;
}

.lb-prizes {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.prize-card {
  flex: 1;
  min-width: 160px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.prize-medal { font-size: 32px; margin-bottom: 6px; }
.prize-place { font-size: 12px; color: var(--text-sub); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.prize-value { font-size: 18px; font-weight: 700; margin-top: 4px; }

/* ── SUB-TABS (within predictions) ── */
.sub-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}

.sub-tab {
  padding: 10px 18px;
  border: none;
  background: transparent;
  color: var(--text-sub);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition);
}

.sub-tab:hover { color: var(--text); }
.sub-tab.active { color: var(--green); border-bottom-color: var(--green); }

.sub-view { display: none; }
.sub-view.active { display: block; }

/* ── GROUP SELECTOR ── */
.group-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 20px;
}

.group-btn {
  padding: 6px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
}

.group-btn:hover { border-color: var(--border-hi); color: var(--text); }

.group-btn.active {
  background: var(--green-glow);
  border-color: var(--green);
  color: var(--green);
}

/* ── MATCH CARD ── */
.match-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 10px;
  transition: border-color var(--transition);
}

.match-card:hover { border-color: var(--border-hi); }
.match-card.locked { opacity: 0.6; pointer-events: none; }
.match-card.has-result { border-color: #2a3a1a; }

.match-label {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.match-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
}

.team-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.team-flag { font-size: 28px; line-height: 1; }

.team-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.team-name.winning { color: var(--green); }

.score-block {
  display: flex;
  align-items: center;
  gap: 6px;
}

.score-ctrl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.score-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card2);
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  line-height: 1;
  font-weight: 400;
}

.score-btn:hover { background: var(--green); border-color: var(--green); color: #000; }

.score-num {
  font-size: 28px;
  font-weight: 800;
  min-width: 36px;
  text-align: center;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.score-sep {
  font-size: 22px;
  font-weight: 300;
  color: var(--text-dim);
}

.match-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-dim);
}

.result-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}

.result-badge.home-win { background: rgba(125,194,66,0.15); color: var(--green); }
.result-badge.draw     { background: rgba(234,179,8,0.15);  color: var(--yellow); }
.result-badge.away-win { background: rgba(125,194,66,0.15); color: var(--green); }

.actual-result {
  font-size: 12px;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 6px;
}

.actual-result .correct   { color: var(--green); }
.actual-result .incorrect { color: var(--red); }

/* ── GROUP STANDINGS TABLE ── */
.standings-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 32px;
}

.standings-title {
  padding: 12px 18px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-sub);
  border-bottom: 1px solid var(--border);
  background: var(--bg-card2);
}

.standings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.standings-table th {
  padding: 8px 14px;
  text-align: center;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
}

.standings-table th:first-child { text-align: left; }

.standings-table td {
  padding: 10px 14px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}

.standings-table td:first-child { text-align: left; }

.standings-table tr:last-child td { border-bottom: none; }

.standings-table tr.qualifies td { border-left: 2px solid var(--green); }
.standings-table tr.qualifies-3rd td { border-left: 2px solid var(--yellow); }

.std-team {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.std-pts { font-weight: 700; color: var(--green); }

/* ── KNOCKOUT BRACKET ── */
.ko-intro {
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  font-size: 13.5px;
  color: var(--text-sub);
  display: flex;
  align-items: center;
  gap: 10px;
}

.ko-round-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.ko-round-btn {
  padding: 7px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-sub);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}

.ko-round-btn:hover { border-color: var(--border-hi); color: var(--text); }
.ko-round-btn.active { background: var(--green-glow); border-color: var(--green); color: var(--green); }
.ko-round-btn .pts-badge {
  font-size: 10px;
  background: var(--border);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--text-dim);
}
.ko-round-btn.active .pts-badge { background: var(--green); color: #000; }

.ko-match-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
}

.ko-match-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  transition: border-color var(--transition);
}

.ko-match-card:hover { border-color: var(--border-hi); }

.ko-match-num {
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 12px;
}

.ko-team-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
  cursor: pointer;
  transition: all var(--transition);
}

.ko-team-row:hover { border-color: var(--border-hi); }
.ko-team-row.selected { border-color: var(--green); background: var(--green-glow); }

.ko-team-row select {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  appearance: none;
}

.ko-team-row select option { background: #1c1c1c; }

.ko-vs { text-align: center; font-size: 11px; color: var(--text-dim); font-weight: 600; margin: 4px 0 8px; }

.ko-winner-label {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 6px;
  margin-top: 10px;
}

.ko-winner-select {
  width: 100%;
  padding: 8px 12px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 13px;
  cursor: pointer;
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23888'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  transition: border-color var(--transition);
}

.ko-winner-select:focus { border-color: var(--green); }
.ko-winner-select option { background: #1c1c1c; }

/* ── BONUS QUESTIONS ── */
.bonus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.bonus-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  transition: border-color var(--transition);
}

.bonus-card:hover { border-color: var(--border-hi); }

.bonus-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.bonus-emoji { font-size: 26px; flex-shrink: 0; }

.bonus-question {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  flex: 1;
}

.bonus-pts {
  font-size: 12px;
  font-weight: 700;
  color: var(--green);
  white-space: nowrap;
  background: var(--green-glow);
  padding: 3px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.bonus-tip {
  font-size: 12px;
  color: var(--text-sub);
  background: var(--bg-card2);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 14px;
  border-left: 3px solid var(--green);
  line-height: 1.5;
}

.bonus-input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
  appearance: none;
}

.bonus-input:focus { border-color: var(--green); }
.bonus-input option { background: #1c1c1c; }

.bool-toggle {
  display: flex;
  gap: 8px;
}

.bool-btn {
  flex: 1;
  padding: 10px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-sub);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: all var(--transition);
}

.bool-btn:hover { border-color: var(--border-hi); color: var(--text); }
.bool-btn.selected-yes { background: var(--green-glow); border-color: var(--green); color: var(--green); }
.bool-btn.selected-no  { background: rgba(239,68,68,0.1); border-color: var(--red); color: var(--red); }

.bonus-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.odds-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--text-sub);
  text-decoration: none;
  padding: 4px 10px;
  background: var(--bg-card2);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: all var(--transition);
}

.odds-link:hover { border-color: var(--green); color: var(--green); }
.odds-link::before { content: '↗'; font-size: 10px; }

/* ── BROWSE ── */
.browse-search-wrap {
  margin-bottom: 20px;
  position: relative;
}

.browse-search {
  width: 100%;
  padding: 12px 18px 12px 44px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition);
}

.browse-search:focus { border-color: var(--green); }
.browse-search::placeholder { color: var(--text-dim); }

.browse-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-dim);
  font-size: 16px;
}

.browse-user-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}

.browse-user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition);
}

.browse-user-card:hover { border-color: var(--green); }
.browse-user-card.me   { border-color: var(--green); background: var(--green-glow); }

.browse-user-info { flex: 1; min-width: 0; }
.browse-user-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browse-user-pts  { font-size: 12px; color: var(--green); font-weight: 700; }

/* ── COMPARISON TABLE ── */
.compare-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.compare-table th {
  padding: 10px 14px;
  background: var(--bg-card2);
  color: var(--text-sub);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.compare-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

.compare-table tr:last-child td { border-bottom: none; }
.compare-table tr:nth-child(even) td { background: rgba(255,255,255,0.01); }

.pred-score {
  font-weight: 700;
  font-family: monospace;
  font-size: 14px;
}

.pred-correct   { color: var(--green); }
.pred-partial   { color: var(--yellow); }
.pred-incorrect { color: var(--text-dim); }
.pred-empty     { color: var(--text-dim); font-style: italic; }

/* ── ADMIN PANEL ── */
.admin-section {
  margin-bottom: 28px;
}

.admin-section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-sub);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.lock-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.lock-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}

.lock-label { flex: 1; font-weight: 600; }

.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
}

.toggle-switch input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: var(--border-hi);
  border-radius: 24px;
  transition: all 0.3s;
}

.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: white;
  border-radius: 50%;
  transition: all 0.3s;
}

.toggle-switch input:checked + .toggle-slider { background: var(--green); }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }

.result-entry-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 10px;
}

.result-entry-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px;
}

.result-entry-label {
  font-size: 12px;
  color: var(--text-sub);
  margin-bottom: 8px;
}

.result-entry-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}

.result-entry-row input {
  width: 44px;
  padding: 6px;
  text-align: center;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  outline: none;
}

.result-entry-row input:focus { border-color: var(--green); }

/* ── MODAL ── */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.25s;
  pointer-events: none;
}

#modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: 16px;
  padding: 32px;
  max-width: 440px;
  width: 100%;
  box-shadow: var(--shadow);
  transform: translateY(20px);
  transition: transform 0.25s;
}

#modal-overlay.open .modal { transform: translateY(0); }

.modal-logo { text-align: center; margin-bottom: 24px; }
.modal-logo img { height: 32px; }
.modal-logo .modal-logo-text {
  font-size: 18px;
  font-weight: 800;
  margin-top: 8px;
  letter-spacing: -0.01em;
}
.modal-logo .modal-logo-sub {
  font-size: 13px;
  color: var(--text-sub);
  margin-top: 2px;
}

.modal h2 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.modal p  { font-size: 13.5px; color: var(--text-sub); margin-bottom: 24px; }

.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }

.form-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 15px;
  outline: none;
  transition: border-color var(--transition);
}

.form-input:focus { border-color: var(--green); }

.color-picker {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.color-dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all var(--transition);
}

.color-dot.selected { border-color: white; transform: scale(1.1); }

/* ── TOAST ── */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  padding: 12px 18px;
  background: var(--bg-card2);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  box-shadow: var(--shadow);
  animation: toastIn 0.3s ease forwards;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 320px;
}

.toast.success { border-left: 3px solid var(--green); }
.toast.error   { border-left: 3px solid var(--red); }
.toast.info    { border-left: 3px solid var(--yellow); }

@keyframes toastIn {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── PROGRESS RING ── */
.progress-ring-wrap {
  text-align: center;
  padding: 8px 0;
}

.progress-mini {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-sub);
}

.progress-track {
  width: 80px;
  height: 5px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 3px;
  transition: width 0.4s ease;
}

/* ── EMPTY STATE ── */
.empty-state {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-sub);
}

.empty-state .emoji { font-size: 48px; margin-bottom: 16px; }
.empty-state h3 { font-size: 18px; color: var(--text); margin-bottom: 8px; }
.empty-state p  { font-size: 14px; max-width: 340px; margin: 0 auto 20px; }

/* ── ADMIN GATE ── */
.admin-gate {
  max-width: 400px;
  margin: 60px auto;
  text-align: center;
}

.admin-gate h2 { font-size: 20px; margin-bottom: 8px; }
.admin-gate p  { color: var(--text-sub); margin-bottom: 24px; }

/* ── STAT PILLS ── */
.stat-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.stat-pill {
  flex: 1;
  min-width: 130px;
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align: center;
}

.stat-pill .val { font-size: 26px; font-weight: 800; color: var(--green); }
.stat-pill .lbl { font-size: 12px; color: var(--text-sub); margin-top: 2px; }

/* ── TROPHY ANIMATION ── */
@keyframes pulse-glow {
  0%,100% { box-shadow: 0 0 0 0 var(--green-glow); }
  50%      { box-shadow: 0 0 20px 8px var(--green-glow); }
}

.lb-row.me { animation: pulse-glow 3s ease-in-out infinite; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  #app { padding: 16px 12px 80px; }
  #header { padding: 0 12px; }
  .header-inner { height: 52px; gap: 12px; }
  .nav-tabs { gap: 0; }
  .nav-tab { padding: 6px 10px; font-size: 12px; }
  .logo-text .event { display: none; }

  .match-row { grid-template-columns: 1fr auto 1fr; gap: 8px; }
  .team-flag { font-size: 24px; }
  .score-num { font-size: 24px; }
  .team-name { font-size: 11px; max-width: 80px; }

  .lb-bar-wrap { width: 80px; }
  .lb-row { grid-template-columns: 36px 1fr auto; }
  .lb-progress { display: none; }

  .bonus-grid { grid-template-columns: 1fr; }
  .ko-match-grid { grid-template-columns: 1fr; }
  .browse-user-grid { grid-template-columns: 1fr 1fr; }

  .modal { padding: 24px 20px; }
}

@media (max-width: 480px) {
  .browse-user-grid { grid-template-columns: 1fr; }
  .stat-row { flex-direction: column; }
}

/* ── LOADING SKELETON ── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card2) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 6px;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── MISC ── */
.divider {
  height: 1px;
  background: var(--border);
  margin: 24px 0;
}

.text-green { color: var(--green); }
.text-sub   { color: var(--text-sub); }
.text-dim   { color: var(--text-dim); }
.bold       { font-weight: 700; }

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gap-8  { gap: 8px; }
.gap-12 { gap: 12px; }
.mt-8   { margin-top: 8px; }
.mt-16  { margin-top: 16px; }
.mb-16  { margin-bottom: 16px; }