/* ============================================================
   SuperLiga AI — style.css
   Temă Light Premium · Design curat și profesionist
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap');

/* ── Variabile ─────────────────────────────────────────── */
:root {
  --bg:        #f0f2f8;
  --bg2:       #e8ebf4;
  --bg3:       #ffffff;
  --surface:   #ffffff;
  --surface2:  #f7f8fc;

  --border:    rgba(0,0,0,0.08);
  --border2:   rgba(0,0,0,0.05);

  --text:      #0f1117;
  --text2:     #4a5068;
  --text3:     #9099b5;

  --blue:      #1a56db;
  --blue-light:#e8effe;
  --blue-mid:  #3b82f6;
  --green:     #059669;
  --green-light:#d1fae5;
  --red:       #dc2626;
  --red-light: #fee2e2;
  --amber:     #d97706;
  --amber-light:#fef3c7;
  --purple:    #7c3aed;
  --purple-light:#ede9fe;

  --grad:      linear-gradient(135deg, #1a56db, #7c3aed);
  --grad-green:linear-gradient(135deg, #059669, #0891b2);
  --grad-warm: linear-gradient(135deg, #d97706, #dc2626);

  --font:      'Outfit', sans-serif;
  --mono:      'JetBrains Mono', monospace;

  --safe-top:    env(safe-area-inset-top, 44px);
  --safe-bottom: env(safe-area-inset-bottom, 34px);
  --header-h:    110px;
  --nav-h:       76px;

  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;

  --shadow-sm: 0 1px 4px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);

  --ease:   cubic-bezier(0.16,1,0.3,1);
  --spring: cubic-bezier(0.34,1.56,0.64,1);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html { font-size:16px; -webkit-text-size-adjust:100%; }
body { font-family:var(--font); background:var(--bg); color:var(--text); min-height:100dvh; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
button { cursor:pointer; font-family:var(--font); background:none; border:none; }
select { font-family:var(--font); }
::-webkit-scrollbar { display:none; }

/* ── App Shell ─────────────────────────────────────────── */
#app { display:flex; flex-direction:column; min-height:100dvh; position:relative; }

/* ── Header ────────────────────────────────────────────── */
.app-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  box-shadow:var(--shadow-sm);
  padding-top:var(--safe-top);
}
.header-inner {
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 18px 8px;
}
.header-logo { display:flex; align-items:center; gap:10px; }
.logo-icon {
  width:38px; height:38px; border-radius:10px;
  background:var(--grad); display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 10px rgba(26,86,219,0.3);
}
.logo-icon svg { width:22px; height:22px; }
.logo-texts { display:flex; flex-direction:column; gap:1px; }
.logo-title { font-size:18px; font-weight:900; color:var(--text); letter-spacing:-0.3px; line-height:1; }
.logo-sub   { font-size:10px; font-weight:600; color:var(--text3); letter-spacing:0.5px; text-transform:uppercase; }

.header-actions { display:flex; align-items:center; gap:8px; }
.live-pill {
  display:flex; align-items:center; gap:5px;
  padding:5px 12px; border-radius:20px;
  background:var(--red-light); border:1px solid rgba(220,38,38,0.2);
  font-size:11px; font-weight:800; letter-spacing:1px; color:var(--red);
  opacity:0; transition:opacity 300ms;
}
.live-pill.visible { opacity:1; }
.live-pill-dot {
  width:6px; height:6px; border-radius:50%; background:var(--red);
  animation:blink 1.2s ease-in-out infinite;
}
@keyframes blink { 0%,100%{opacity:1}50%{opacity:0.3} }

.icon-btn {
  width:38px; height:38px; border-radius:10px;
  background:var(--surface2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text2); transition:all 150ms;
  box-shadow:var(--shadow-sm);
}
.icon-btn:active { transform:scale(0.90); background:var(--bg2); }
.icon-btn.spinning svg { animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* Stats strip */
.hero-strip {
  display:flex; align-items:center;
  padding:0 18px 12px;
}
.hero-stat { flex:1; text-align:center; }
.hero-num  { display:block; font-size:18px; font-weight:900; font-family:var(--mono); color:var(--blue); line-height:1; }
.hero-num.amber { color:var(--amber); }
.hero-lbl  { display:block; font-size:9px; font-weight:600; color:var(--text3); text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }
.hero-div  { width:1px; height:26px; background:var(--border); flex-shrink:0; }

/* ── Main ──────────────────────────────────────────────── */
.app-main {
  flex:1;
  padding-top:calc(var(--safe-top) + var(--header-h));
  padding-bottom:calc(var(--safe-bottom) + var(--nav-h) + 16px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}

/* ── Tab Pages ─────────────────────────────────────────── */
.tab-page { display:none; padding:20px 16px 0; animation:fadeUp 250ms var(--ease) both; }
.tab-page.active { display:block; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.page-title { font-size:28px; font-weight:900; color:var(--text); letter-spacing:-0.5px; margin-bottom:4px; }
.page-sub   { font-size:13px; color:var(--text3); font-weight:500; margin-bottom:18px; }

/* ── Bottom Nav ────────────────────────────────────────── */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:100;
  background:var(--surface); border-top:1px solid var(--border);
  box-shadow:0 -4px 20px rgba(0,0,0,0.06);
  display:flex; align-items:center;
  padding:8px 0 calc(var(--safe-bottom) + 4px);
}
.nav-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px 8px; transition:transform 150ms var(--spring);
}
.nav-btn:active { transform:scale(0.85); }
.nav-icon-wrap { position:relative; color:var(--text3); transition:color 200ms; }
.nav-btn.active .nav-icon-wrap { color:var(--blue); }
.nav-lbl { font-size:10px; font-weight:600; color:var(--text3); transition:color 200ms; letter-spacing:0.1px; }
.nav-btn.active .nav-lbl { color:var(--blue); }
.live-nav-dot {
  position:absolute; top:-3px; right:-5px;
  width:8px; height:8px; border-radius:50%;
  background:var(--red); border:2px solid var(--surface);
  display:none; animation:blink 1.2s ease-in-out infinite;
}
.live-nav-dot.show { display:block; }

/* ══════════════════════════════════════════════════════════
   CLASAMENT
══════════════════════════════════════════════════════════ */
.zone-legend {
  display:flex; gap:14px; flex-wrap:wrap;
  padding:10px 14px; background:var(--surface);
  border-radius:var(--r-md); border:1px solid var(--border);
  margin-bottom:14px; box-shadow:var(--shadow-sm);
}
.zone-item { display:flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--text2); }
.zdot { width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.zdot.champion { background:#f59e0b; }
.zdot.ucl      { background:#1a56db; }
.zdot.uel      { background:#7c3aed; }
.zdot.rel      { background:#dc2626; }

.standings-shell {
  background:var(--surface); border-radius:var(--r-lg);
  border:1px solid var(--border); box-shadow:var(--shadow-md);
  overflow:hidden; margin-bottom:24px;
}
.standings-head {
  display:flex; align-items:center; padding:10px 16px;
  background:var(--bg2); border-bottom:1px solid var(--border);
  font-size:10px; font-weight:700; color:var(--text3);
  text-transform:uppercase; letter-spacing:0.6px;
}
.sh-pos   { width:28px; flex-shrink:0; }
.sh-team  { flex:1; }
.sh-num   { width:26px; text-align:center; flex-shrink:0; }
.sh-gd    { width:32px; text-align:center; flex-shrink:0; }
.sh-pts   { width:34px; text-align:center; flex-shrink:0; font-weight:800; }

.standing-row {
  display:flex; align-items:center; padding:11px 16px;
  border-bottom:1px solid var(--border2);
  cursor:pointer; transition:background 120ms;
  position:relative;
}
.standing-row:last-child { border-bottom:none; }
.standing-row:active { background:var(--bg2); }

.standing-row.is-champion { border-left:3px solid #f59e0b; }
.standing-row.is-ucl      { border-left:3px solid #1a56db; }
.standing-row.is-uel      { border-left:3px solid #7c3aed; }
.standing-row.is-rel      { border-left:3px solid #dc2626; }

.sr-pos {
  width:28px; font-size:13px; font-weight:800; color:var(--text3);
  font-family:var(--mono); flex-shrink:0;
}
.sr-pos.gold   { color:#f59e0b; }
.sr-pos.silver { color:#6b7280; }
.sr-pos.bronze { color:#d97706; }

.sr-team { flex:1; display:flex; align-items:center; gap:10px; min-width:0; }
.sr-logo-wrap {
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  background:var(--bg2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sr-logo-img { width:22px; height:22px; object-fit:contain; }
.sr-team-info { display:flex; flex-direction:column; gap:3px; min-width:0; }
.sr-name { font-size:13px; font-weight:700; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sr-form { display:flex; gap:2px; }
.fd {
  width:14px; height:14px; border-radius:3px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:8px; font-weight:800;
}
.fd.W { background:var(--green-light); color:var(--green); }
.fd.D { background:var(--amber-light); color:var(--amber); }
.fd.L { background:var(--red-light);   color:var(--red); }

.sr-num { width:26px; text-align:center; font-size:12px; color:var(--text2); font-family:var(--mono); flex-shrink:0; }
.sr-gd  { width:32px; text-align:center; font-size:11px; font-family:var(--mono); flex-shrink:0; font-weight:600; }
.sr-gd.pos { color:var(--green); }
.sr-gd.neg { color:var(--red); }
.sr-pts { width:34px; text-align:center; font-size:15px; font-weight:900; font-family:var(--mono); color:var(--text); flex-shrink:0; }

/* Elo */
.elo-list { display:flex; flex-direction:column; gap:8px; }
.elo-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:12px 16px;
  display:flex; align-items:center; gap:12px;
  box-shadow:var(--shadow-sm);
  animation:fadeUp 350ms var(--ease) both;
  animation-delay:calc(var(--i)*40ms);
}
.elo-rank  { width:22px; font-size:12px; font-weight:700; color:var(--text3); font-family:var(--mono); flex-shrink:0; }
.elo-name  { flex:1; font-size:13px; font-weight:700; color:var(--text); }
.elo-bar-wrap { width:80px; height:6px; background:var(--bg2); border-radius:3px; overflow:hidden; flex-shrink:0; }
.elo-bar-fill { height:100%; border-radius:3px; background:var(--grad); transition:width 0.8s var(--ease); }
.elo-val   { width:40px; text-align:right; font-size:12px; font-weight:700; font-family:var(--mono); color:var(--blue); flex-shrink:0; }

/* ══════════════════════════════════════════════════════════
   MECIURI
══════════════════════════════════════════════════════════ */
.chip-scroll { overflow-x:auto; margin:0 -16px 16px; padding:0 16px; scrollbar-width:none; }
.chip-track  { display:flex; gap:8px; width:max-content; padding-bottom:2px; }
.date-chip {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:10px 16px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--border);
  min-width:68px; cursor:pointer; transition:all 150ms var(--ease);
  box-shadow:var(--shadow-sm);
}
.date-chip.active {
  background:var(--blue); border-color:var(--blue);
  box-shadow:0 4px 12px rgba(26,86,219,0.3);
}
.chip-day  { font-size:12px; font-weight:700; color:var(--text2); transition:color 150ms; }
.chip-date { font-size:10px; font-weight:500; color:var(--text3); transition:color 150ms; font-family:var(--mono); }
.date-chip.active .chip-day  { color:#fff; }
.date-chip.active .chip-date { color:rgba(255,255,255,0.75); }

.matches-feed { display:flex; flex-direction:column; gap:12px; margin-bottom:24px; }

/* Match Card */
.match-card {
  background:var(--surface); border-radius:var(--r-lg);
  border:1px solid var(--border); box-shadow:var(--shadow-md);
  padding:16px; cursor:pointer;
  transition:transform 150ms var(--spring), box-shadow 150ms;
  overflow:hidden; position:relative;
}
.match-card:active { transform:scale(0.98); box-shadow:var(--shadow-sm); }
.match-card.live-card { border-color:rgba(220,38,38,0.3); border-left:4px solid var(--red); }

.mc-top {
  display:flex; align-items:center; gap:8px; margin-bottom:14px;
}
.mc-badge {
  font-size:10px; font-weight:800; padding:3px 10px;
  border-radius:20px; letter-spacing:0.5px; flex-shrink:0;
}
.mc-badge.upcoming { background:var(--blue-light); color:var(--blue); }
.mc-badge.live     { background:var(--red-light); color:var(--red); display:flex; align-items:center; gap:4px; }
.mc-badge.finished { background:var(--bg2); color:var(--text3); }
.mc-badge-dot      { width:5px; height:5px; border-radius:50%; background:var(--red); animation:blink 1.2s ease-in-out infinite; }
.mc-time  { font-size:11px; color:var(--text3); font-family:var(--mono); font-weight:500; }
.mc-round { font-size:10px; color:var(--text3); font-weight:600; margin-left:auto; }

/* Teams row */
.mc-teams {
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:12px; margin-bottom:14px;
}
.mc-team { display:flex; flex-direction:column; align-items:center; gap:8px; }
.mc-team.away { }
.mc-logo-box {
  width:48px; height:48px; border-radius:14px;
  background:var(--bg2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.mc-logo-box img { width:36px; height:36px; object-fit:contain; }
.mc-logo-emoji { font-size:26px; }
.mc-team-name { font-size:13px; font-weight:700; color:var(--text); text-align:center; line-height:1.2; }

.mc-score-center { display:flex; flex-direction:column; align-items:center; gap:2px; }
.mc-vs    { font-size:13px; font-weight:700; color:var(--text3); }
.mc-score { font-size:32px; font-weight:900; font-family:var(--mono); color:var(--text); letter-spacing:-1px; line-height:1; }
.mc-min   { font-size:11px; font-weight:700; color:var(--red); font-family:var(--mono); }

/* Prediction bar */
.mc-pred { border-top:1px solid var(--border2); padding-top:12px; }
.pred-bar {
  display:flex; height:8px; border-radius:4px; overflow:hidden; gap:2px; margin-bottom:8px;
}
.pb-seg { border-radius:3px; transition:flex 0.6s var(--ease); }
.pb-seg.w { background:linear-gradient(90deg,#059669,#0891b2); }
.pb-seg.d { background:linear-gradient(90deg,#f59e0b,#d97706); }
.pb-seg.l { background:linear-gradient(90deg,#dc2626,#be123c); }
.pred-labels {
  display:flex; justify-content:space-between;
}
.pl-item { display:flex; flex-direction:column; align-items:center; gap:1px; }
.pl-pct  { font-size:13px; font-weight:800; font-family:var(--mono); color:var(--text); }
.pl-name { font-size:10px; font-weight:600; color:var(--text3); }

/* Live stats */
.live-poss-row { display:flex; align-items:center; gap:8px; margin:10px 0 8px; }
.live-poss-val { font-size:11px; font-weight:700; color:var(--text2); font-family:var(--mono); width:32px; flex-shrink:0; }
.live-poss-val.right { text-align:right; }
.live-poss-bar { flex:1; height:6px; background:var(--bg2); border-radius:3px; overflow:hidden; }
.live-poss-fill{ height:100%; background:var(--grad); border-radius:3px; }
.live-stats-row {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--border); border-radius:var(--r-sm); overflow:hidden; margin-bottom:10px;
}
.ls-cell {
  background:var(--surface2); padding:8px 4px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:4px; text-align:center;
  font-size:14px; font-weight:800; font-family:var(--mono); color:var(--text);
}
.ls-lbl { font-size:8px; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:0.3px; }
.live-pred-bar { display:flex; height:8px; gap:2px; border-radius:4px; overflow:hidden; margin-bottom:5px; }
.lpb { border-radius:3px; transition:flex 0.8s var(--ease); min-width:2px; position:relative; display:flex; align-items:center; justify-content:center; }
.lpb.w { background:linear-gradient(90deg,#059669,#0891b2); }
.lpb.d { background:linear-gradient(90deg,#f59e0b,#d97706); }
.lpb.l { background:linear-gradient(90deg,#dc2626,#be123c); }
.lpb-lbl { font-size:9px; font-weight:800; color:#fff; position:absolute; font-family:var(--mono); text-shadow:0 1px 3px rgba(0,0,0,0.4); }
.lpb-names { display:flex; justify-content:space-between; font-size:10px; color:var(--text3); font-weight:600; }
.live-events { display:flex; flex-direction:column; gap:4px; margin-top:10px; padding-top:10px; border-top:1px solid var(--border2); }
.lev { display:flex; align-items:center; gap:8px; padding:6px 10px; background:var(--surface2); border:1px solid var(--border2); border-radius:8px; font-size:11px; }
.lev-min { font-family:var(--mono); font-weight:700; color:var(--blue); width:24px; flex-shrink:0; }
.lev-ico { font-size:13px; }
.lev-txt { flex:1; font-weight:600; color:var(--text); }
.lev-team{ color:var(--text3); font-size:10px; }

/* ══════════════════════════════════════════════════════════
   LIVE TAB
══════════════════════════════════════════════════════════ */
.live-header-row { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.live-status-pill {
  display:flex; align-items:center; gap:6px;
  padding:6px 14px; border-radius:20px;
  background:var(--red-light); border:1px solid rgba(220,38,38,0.2);
  font-size:12px; font-weight:800; color:var(--red); letter-spacing:0.5px;
}

.refresh-track {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); height:36px;
  display:flex; align-items:center; padding:0 14px; gap:10px;
  overflow:hidden; position:relative; margin-bottom:16px;
  box-shadow:var(--shadow-sm);
}
.refresh-fill {
  position:absolute; left:0; top:0; bottom:0;
  background:linear-gradient(90deg, rgba(26,86,219,0.08), rgba(26,86,219,0.04));
  transition:width 1s linear;
}
.refresh-lbl { position:relative; font-size:11px; font-weight:600; color:var(--text3); font-family:var(--mono); }

.live-empty {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-xl); padding:40px 24px;
  text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:12px; margin-bottom:24px;
  box-shadow:var(--shadow-sm);
}
.live-empty-icon { font-size:48px; }
.live-empty-title{ font-size:17px; font-weight:700; color:var(--text); }
.live-empty-sub  { font-size:13px; color:var(--text3); }
.watching-teams  { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:8px; }
.watching-chip   {
  font-size:11px; font-weight:600; color:var(--text2);
  padding:5px 12px; background:var(--bg2); border:1px solid var(--border);
  border-radius:20px;
}

/* ══════════════════════════════════════════════════════════
   PREDICTII
══════════════════════════════════════════════════════════ */
.model-accuracy-row {
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:16px;
}
.mac-chip {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); padding:12px 8px;
  display:flex; flex-direction:column; align-items:center; gap:5px;
  box-shadow:var(--shadow-sm); cursor:pointer; transition:transform 150ms var(--spring);
}
.mac-chip:active { transform:scale(0.94); }
.mac-icon { font-size:20px; }
.mac-name { font-size:9px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:0.4px; text-align:center; }
.mac-ring { position:relative; width:42px; height:42px; }
.mac-ring svg { width:100%; height:100%; }
.mac-pct  { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; font-family:var(--mono); color:var(--text); }

.filter-pills {
  display:flex; gap:6px; padding:5px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-md); margin-bottom:16px;
  box-shadow:var(--shadow-sm); overflow-x:auto; scrollbar-width:none;
}
.fpill {
  flex-shrink:0; padding:7px 16px; border-radius:var(--r-sm);
  font-size:12px; font-weight:700; color:var(--text2);
  transition:all 150ms var(--ease); white-space:nowrap; cursor:pointer;
}
.fpill.active { background:var(--blue); color:#fff; box-shadow:0 2px 8px rgba(26,86,219,0.25); }

.pred-feed { display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }

/* Prediction Card */
.pred-card {
  background:var(--surface); border-radius:var(--r-lg);
  border:1px solid var(--border); box-shadow:var(--shadow-md);
  padding:18px; cursor:pointer; position:relative; overflow:hidden;
  transition:transform 150ms var(--spring), box-shadow 150ms;
}
.pred-card:active { transform:scale(0.98); box-shadow:var(--shadow-sm); }
.pred-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--grad);
}

.pc-header { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; margin-bottom:14px; }
.pc-title  { font-size:15px; font-weight:800; color:var(--text); line-height:1.3; }
.pc-sub    { font-size:11px; color:var(--text3); margin-top:3px; font-family:var(--mono); }

.conf-badge {
  flex-shrink:0; font-size:12px; font-weight:800;
  padding:4px 12px; border-radius:20px; font-family:var(--mono);
}
.conf-badge.high { background:var(--green-light); color:var(--green); }
.conf-badge.mid  { background:var(--amber-light); color:var(--amber); }
.conf-badge.low  { background:var(--red-light);   color:var(--red); }

.pc-outcomes { display:flex; gap:8px; margin-bottom:14px; }
.pc-outcome {
  flex:1; text-align:center; padding:12px 6px;
  background:var(--surface2); border:1.5px solid var(--border);
  border-radius:var(--r-md); transition:all 150ms;
}
.pc-outcome.best.win  { background:var(--green-light); border-color:rgba(5,150,105,0.3); }
.pc-outcome.best.draw { background:var(--amber-light); border-color:rgba(217,119,6,0.3); }
.pc-outcome.best.loss { background:var(--red-light);   border-color:rgba(220,38,38,0.3); }

.pco-pct { display:block; font-size:22px; font-weight:900; font-family:var(--mono); line-height:1; color:var(--text); }
.pc-outcome.best.win  .pco-pct { color:var(--green); }
.pc-outcome.best.draw .pco-pct { color:var(--amber); }
.pc-outcome.best.loss .pco-pct { color:var(--red);   }
.pco-lbl { display:block; font-size:10px; color:var(--text3); font-weight:700; text-transform:uppercase; letter-spacing:0.4px; margin-top:4px; }

.pc-bottom { display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--border2); }
.pc-score-block { display:flex; flex-direction:column; gap:2px; }
.pc-score-lbl { font-size:10px; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }
.pc-score-val { font-size:24px; font-weight:900; font-family:var(--mono); letter-spacing:-1px; color:var(--blue); }
.pc-tags { display:flex; gap:6px; }
.pc-tag {
  font-size:10px; font-weight:700; padding:4px 10px;
  border-radius:20px; background:var(--bg2); border:1px solid var(--border); color:var(--text2);
}

/* H2H Tool */
.section-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:18px; margin-bottom:24px;
  box-shadow:var(--shadow-md);
}
.section-card-title { font-size:14px; font-weight:800; color:var(--text); margin-bottom:14px; display:flex; align-items:center; gap:8px; }
.h2h-selects { display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.glass-select {
  flex:1; padding:11px 12px; border-radius:var(--r-sm);
  background:var(--surface2); border:1.5px solid var(--border);
  color:var(--text); font-size:13px; font-weight:600;
  -webkit-appearance:none; outline:none; cursor:pointer;
}
.glass-select:focus { border-color:var(--blue); }
.glass-select option { background:#fff; color:var(--text); }
.h2h-vs {
  width:36px; height:36px; border-radius:50%;
  background:var(--bg2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:900; color:var(--text3); flex-shrink:0;
}

.btn-primary {
  width:100%; padding:14px; border-radius:var(--r-md);
  background:var(--grad); color:#fff; font-size:14px; font-weight:800;
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 4px 16px rgba(26,86,219,0.3);
  transition:transform 150ms var(--spring), opacity 150ms;
}
.btn-primary:active { transform:scale(0.97); opacity:0.9; }

/* ══════════════════════════════════════════════════════════
   MODAL
══════════════════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.5); display:flex; align-items:flex-end;
  opacity:0; pointer-events:none; transition:opacity 250ms var(--ease);
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-sheet {
  width:100%; max-height:92dvh; background:var(--surface);
  border-radius:28px 28px 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,0.15);
  transform:translateY(100%); transition:transform 350ms var(--ease);
  padding-bottom:var(--safe-bottom); overflow:hidden;
}
.modal-overlay.open .modal-sheet { transform:translateY(0); }
.modal-puller { width:40px; height:4px; background:var(--border); border-radius:2px; margin:14px auto 0; }
.modal-close {
  position:absolute; top:14px; right:16px;
  width:32px; height:32px; border-radius:50%;
  background:var(--bg2); border:1px solid var(--border);
  color:var(--text2); display:flex; align-items:center; justify-content:center;
  transition:transform 150ms var(--spring);
}
.modal-close:active { transform:scale(0.85); }
.modal-body { padding:16px 18px 24px; overflow-y:auto; max-height:calc(92dvh - 58px); }

/* Modal content */
.modal-match-header { text-align:center; padding-bottom:18px; border-bottom:1px solid var(--border2); margin-bottom:18px; }
.modal-match-meta   { font-size:11px; color:var(--text3); font-weight:600; text-transform:uppercase; letter-spacing:0.8px; margin-bottom:12px; }
.modal-teams-row    { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:8px; }
.modal-team-n       { font-size:16px; font-weight:800; color:var(--text); flex:1; }
.modal-team-n.right { text-align:right; }
.modal-score-lg     { font-size:42px; font-weight:900; font-family:var(--mono); letter-spacing:-2px; color:var(--blue); padding:0 8px; }
.modal-venue        { font-size:11px; color:var(--text3); }

.modal-section       { margin-bottom:18px; }
.modal-section-title { font-size:11px; font-weight:800; color:var(--text3); text-transform:uppercase; letter-spacing:0.9px; margin-bottom:10px; }

.modal-prob-row     { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.modal-prob-lbl     { width:32px; font-size:12px; font-weight:700; color:var(--text2); }
.modal-prob-bar     { flex:1; height:10px; background:var(--bg2); border-radius:5px; overflow:hidden; }
.modal-prob-fill    { height:100%; border-radius:5px; transition:width 0.8s var(--ease); }
.modal-prob-fill.w  { background:linear-gradient(90deg,#059669,#0891b2); }
.modal-prob-fill.d  { background:linear-gradient(90deg,#f59e0b,#d97706); }
.modal-prob-fill.l  { background:linear-gradient(90deg,#dc2626,#be123c); }
.modal-prob-pct     { width:38px; text-align:right; font-size:13px; font-weight:800; font-family:var(--mono); color:var(--text); }

.modal-models-grid  { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.modal-model-cell   {
  padding:12px 14px; border-radius:var(--r-md);
  background:var(--surface2); border:1px solid var(--border);
}
.modal-model-name   { font-size:10px; color:var(--text3); font-weight:700; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:5px; }
.modal-model-score  { font-size:20px; font-weight:900; font-family:var(--mono); color:var(--blue); }

.modal-score-display {
  text-align:center; padding:20px;
  background:var(--blue-light); border-radius:var(--r-lg);
  border:1px solid rgba(26,86,219,0.15);
}
.modal-big-score    { font-size:52px; font-weight:900; font-family:var(--mono); letter-spacing:-3px; color:var(--blue); display:block; }
.modal-score-sub    { font-size:12px; color:var(--blue); font-weight:600; margin-top:4px; }

.modal-extras-row   { display:flex; gap:8px; }
.modal-extra-box    {
  flex:1; padding:12px; background:var(--surface2); border:1px solid var(--border);
  border-radius:var(--r-md); text-align:center;
}
.modal-extra-lbl    { font-size:10px; color:var(--text3); font-weight:700; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:5px; }
.modal-extra-val    { font-size:18px; font-weight:900; font-family:var(--mono); color:var(--text); }

.modal-top-scores   { display:flex; gap:6px; flex-wrap:wrap; }
.modal-score-pill   {
  padding:6px 14px; background:var(--blue-light); border:1px solid rgba(26,86,219,0.15);
  border-radius:20px; text-align:center;
}
.modal-score-pill-s { display:block; font-size:15px; font-weight:900; font-family:var(--mono); color:var(--blue); }
.modal-score-pill-p { display:block; font-size:10px; color:var(--blue); font-weight:600; margin-top:1px; }

.modal-summary {
  background:var(--blue-light); border:1px solid rgba(26,86,219,0.15);
  border-radius:var(--r-md); padding:14px 16px;
}
.modal-summary p { font-size:13px; line-height:1.7; color:var(--text2); font-weight:400; }

/* ══════════════════════════════════════════════════════════
   TOAST & OFFLINE
══════════════════════════════════════════════════════════ */
.toast-stack {
  position:fixed; top:calc(var(--safe-top) + var(--header-h) + 8px);
  left:14px; right:14px; z-index:300;
  display:flex; flex-direction:column; gap:8px; pointer-events:none;
}
.toast {
  padding:12px 16px; border-radius:var(--r-md);
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow-lg); font-size:13px; font-weight:600; color:var(--text);
  display:flex; align-items:center; gap:10px; pointer-events:all;
  animation:slideIn 250ms var(--spring) both;
}
@keyframes slideIn { from{opacity:0;transform:translateY(-8px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }
.toast.success { border-left:3px solid var(--green); }
.toast.error   { border-left:3px solid var(--red);   }
.toast.info    { border-left:3px solid var(--blue);   }

.offline-bar {
  position:fixed; bottom:calc(var(--safe-bottom) + var(--nav-h) + 10px);
  left:14px; right:14px; z-index:150;
  background:var(--amber-light); border:1px solid rgba(217,119,6,0.3);
  border-radius:var(--r-md); padding:10px 16px;
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; color:var(--amber);
  box-shadow:var(--shadow-md);
}

.api-status-bar {
  position:fixed; bottom:calc(var(--safe-bottom) + var(--nav-h) + 10px);
  left:14px; right:14px; z-index:149;
  border-radius:var(--r-md); padding:10px 16px;
  display:flex; align-items:center; gap:8px;
  font-size:12px; font-weight:600;
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow-md); transition:all 300ms;
}
.api-status-bar.info    { border-left:3px solid var(--blue);  color:var(--blue); }
.api-status-bar.success { border-left:3px solid var(--green); color:var(--green); }
.api-status-bar.warn    { border-left:3px solid var(--amber); color:var(--amber); }

/* ══════════════════════════════════════════════════════════
   LOADING & EMPTY
══════════════════════════════════════════════════════════ */
.loading-block {
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:40px 20px; color:var(--text3); font-size:13px; font-weight:500;
}
.spinner {
  width:32px; height:32px; border-radius:50%;
  border:3px solid var(--bg2); border-top-color:var(--blue);
  animation:spin 0.8s linear infinite;
}
.empty-state {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:36px 20px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;
  box-shadow:var(--shadow-sm);
}
.empty-icon  { font-size:40px; }
.empty-title { font-size:15px; font-weight:700; color:var(--text2); }
.empty-sub   { font-size:12px; color:var(--text3); }

/* ══════════════════════════════════════════════════════════
   SECTION HELPERS
══════════════════════════════════════════════════════════ */
.section-block { margin-bottom:28px; }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.section-h2 { font-size:16px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:7px; }
.sec-tag { font-size:11px; color:var(--text3); font-weight:500; }

/* ══════════════════════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════════════════════ */
.anim-in { animation:fadeUp 350ms var(--ease) both; animation-delay:calc(var(--i,0)*50ms); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (min-width:768px) {
  #app, .app-header, .bottom-nav, .toast-stack, .offline-bar, .api-status-bar {
    max-width:430px; margin-left:auto; margin-right:auto;
    left:50%; right:auto; transform:translateX(-50%);
  }
  .app-header { left:50%; }
  .bottom-nav { left:50%; }
}