/* =========================
   AFTR UI — CLEAN THEME
   (sin combos)
========================= */

:root{
  --bg:#070a10;
  --bg-deep:#05070c;
  --panel: rgba(255,255,255,.04);
  --card: rgba(255,255,255,.04);
  --text:#eaf2ff;
  --muted:rgba(234,242,255,.72);
  --line:rgba(255,255,255,.12);
  --glow:rgba(120,180,255,.18);
  --radius:16px;

  --blue:#38bdf8;
  --green:#22c55e;
  --red:#ef4444;
  --yellow:#eab308;
  --gold:#e8c547;
  --gold-deep:#b8860b;
  --purple-glow: rgba(139, 92, 246, 0.14);
  --blue-glow: rgba(56, 189, 248, 0.12);
  --shadow-soft: 0 8px 32px rgba(0,0,0,.45);
  --shadow-lift: 0 16px 48px rgba(0,0,0,.55);
  --glass: rgba(255,255,255,.045);
  --glass-border: rgba(255,255,255,.1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Single authoritative block: page width and overflow */
html{
  background: var(--bg-deep);
}
html, body{
  margin:0;
  padding:0;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  box-sizing:border-box;
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body{
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 100% 70% at 50% -15%, rgba(88, 28, 135, 0.2), transparent 55%),
    radial-gradient(ellipse 80% 50% at 95% 35%, rgba(30, 64, 175, 0.16), transparent 50%),
    radial-gradient(ellipse 60% 45% at 5% 75%, rgba(56, 189, 248, 0.08), transparent 42%),
    linear-gradient(180deg, #0a0e16 0%, var(--bg) 38%, #080c12 100%);
}
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}
.page,
.card{
  position: relative;
  z-index: 1;
}

a{ color: rgba(180,220,255,.95); text-decoration:none; }
a:hover{ filter: brightness(1.1); text-decoration: underline; }

.muted{ color: var(--muted); }

.coming-soon{
  padding: 24px 16px;
  text-align: center;
  font-size: 15px;
}

.cache-status{
  display:flex;align-items:center;gap:7px;
  font-size:.78rem;font-weight:600;letter-spacing:.03em;
  padding:6px 16px;margin:0;
  color:#a0ffa0;
  text-shadow:0 0 8px rgba(0,255,100,.45);
}
.cache-status-updating{
  color:#60c0ff;
  text-shadow:0 0 8px rgba(60,160,255,.5);
}
/* glowing status dot */
.cs-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
}
.cs-dot--ok{
  background:#00e676;
  box-shadow:0 0 6px 2px rgba(0,230,118,.7);
  animation:csDotPulse 2.4s ease-in-out infinite;
}
.cs-dot--stale{background:#666;}
.cs-dot--updating{
  background:#40a0ff;
  box-shadow:0 0 6px 2px rgba(64,160,255,.7);
  animation:csDotPulse 1s ease-in-out infinite;
}
@keyframes csDotPulse{
  0%,100%{opacity:1;}
  50%{opacity:.35;}
}

/* =========================
   LAYOUT
========================= */
.page{
  max-width: 1140px;
  margin: 0 auto;
  padding: 20px 28px 40px;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 640px){
  .page{ padding: 16px 14px 32px; }
}

h2{
  margin: 14px 0 10px;
  display:flex;
  align-items:center;
  gap:10px;
}
h2::after{
  content:"";
  flex:1;
  height:1px;
  background: rgba(255,255,255,.08);
}

.day-title{
  margin: 18px 0 10px;
  font-size: 16px;
  color: rgba(234,242,255,.9);
  display:flex;
  align-items:center;
  gap:10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(255,255,255,.10);
}
.day-title::after{
  content:"";
  flex:1;
  height:1px;
  background: rgba(255,255,255,.06);
}

/* =========================
   HEADER (sticky pro)
========================= */
.top.top-pro{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(12,16,24,.88), rgba(8,11,18,.78));
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.05);
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-weight:900;
  font-size: 18px;
  letter-spacing:.2px;
}

.links{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
  font-size: 13px;
}

/* =========================
   Pills bar (ligas)
========================= */
.leaguebar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin: 12px 0 16px;
  overflow:auto;
  padding-bottom: 6px;
}

.pill{
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02));
  color: var(--text);
  cursor:pointer;
  transition: transform .18s var(--ease-out), border-color .18s ease, background .18s ease, filter .18s ease, box-shadow .18s ease;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.06);
}
.pill:hover{
  transform: translateY(-2px);
  border-color: rgba(170,210,255,.32);
  filter: brightness(1.08);
  box-shadow: 0 6px 20px rgba(0,0,0,.3), 0 0 20px rgba(56,189,248,.08), inset 0 1px 0 rgba(255,255,255,.1);
}
.pill.active{
  background: rgba(120,180,255,.10);
  border-color: rgba(170,210,255,.32);
  box-shadow: 0 0 0 6px var(--glow);
}
.pill--disabled{
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* =========================
   SUMMARY KPIs
========================= */
.summary-bar{ margin: 14px 0 16px; }
.home-summary-bar{ margin: 10px 0 18px; }
.home-section{
  margin-bottom: 28px;
}
.home-section:last-of-type{ margin-bottom: 20px; }
.home-h2{
  margin: 20px 0 12px;
  font-size: 18px;
  font-weight: 800;
}
.home-h2:first-child{ margin-top: 0; }
.home-card{ padding: 14px 16px; }
.home-spark-wrap{ margin-top: 4px; }
.home-grid{ gap: 14px; }
.home-cta-section{ margin-top: 8px; }
.home-cta-card{ padding: 24px !important; }

.kpi-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  min-width: 0;
}
.kpi-card{
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.kpi-label{ font-size: 12px; color: var(--muted); font-weight: 800; }
.kpi-value{ margin-top: 4px; font-size: 21px; font-weight: 900; }
.kpi-card.pos .kpi-value{ color: var(--green); }
.kpi-card.neg .kpi-value{ color: #f87171; }

/* =========================
   GRID + CARDS
========================= */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 640px){
  .grid{ grid-template-columns: 1fr; }
}

.card{
  background: linear-gradient(165deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,.02) 42%, rgba(0,0,0,.12) 100%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.06);
  padding: 12px 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s ease, filter .22s ease;
}
.aftr-pick-card.card{ padding: 16px; }
.card:hover{
  transform: translateY(-3px) scale(1.008);
  border-color: rgba(170,210,255,.28);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(56,189,248,.08), inset 0 1px 0 rgba(255,255,255,.09);
  filter: brightness(1.03);
}

/* WIN/LOSS/PUSH */
.card.pick-win  { border-left: 4px solid var(--green); background-color: rgba(34,197,94,0.08); }
.card.pick-loss { border-left: 4px solid var(--red);   background-color: rgba(239,68,68,0.08); }
.card.pick-push { border-left: 4px solid var(--yellow);background-color: rgba(234,179,8,0.08); }

.row{
  font-size: 14px;
  font-weight: 900;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap: 8px;
}
.team-row{ display:flex; align-items:flex-start; gap: 8px; min-width:0; }
.crest{ width: 28px; height: 28px; object-fit: contain; flex-shrink:0; }
.team-name{ font-weight: 900; }
.vs{ color: rgba(234,242,255,.55); font-weight: 700; font-size: 12px; }

.meta{
  color: var(--muted);
  font-size: 11px;
  margin-top: 4px;
}

/* =========================
   PICK LINE + BADGE
========================= */
.pick{
  margin-top: 6px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}

.pick.pick-best{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 6px;
}

.pick-main{ font-weight: 900; color: rgba(180,220,255,.95); }
.pick-prob{ font-weight: 800; color: rgba(234,242,255,.85); }
.pick-odds{ font-size: 11px; margin-top: 4px; }
.pick-odds .pick-bookmaker{ margin-left: 4px; }

/* ── Result badge ──────────────────────────────────────────── */
.pick-badge{
  display:inline-block;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 900;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  color: var(--text);
}
.pick-win .pick-badge  { background: rgba(34,197,94,.22); border-color: rgba(34,197,94,.35); color:#baffd2; }
.pick-loss .pick-badge { background: rgba(239,68,68,.20); border-color: rgba(239,68,68,.35); color:#ffd0d0; }
.pick-push .pick-badge { background: rgba(234,179,8,.18); border-color: rgba(234,179,8,.35); color:#fff1b8; }

/* WIN: pop + green glow */
@keyframes badge-win-pop{
  0%   { transform: scale(0.4); opacity:0; }
  55%  { transform: scale(1.22); }
  75%  { transform: scale(0.95); }
  100% { transform: scale(1); opacity:1; }
}
.pick-badge--win{
  background: linear-gradient(135deg,rgba(34,197,94,.35),rgba(16,185,129,.25));
  border-color: rgba(34,197,94,.55);
  color: #baffd2;
  box-shadow: 0 0 14px rgba(34,197,94,.4), 0 0 32px rgba(34,197,94,.15);
  animation: badge-win-pop 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* LOSS: quick fade in + red */
@keyframes badge-loss-in{
  0%  { transform: scale(0.7); opacity:0; }
  100%{ transform: scale(1);   opacity:1; }
}
.pick-badge--loss{
  background: linear-gradient(135deg,rgba(239,68,68,.32),rgba(185,28,28,.2));
  border-color: rgba(239,68,68,.5);
  color: #ffd0d0;
  box-shadow: 0 0 12px rgba(239,68,68,.3);
  animation: badge-loss-in 0.35s ease both;
}

/* ── AFTR Score block ──────────────────────────────────────── */
.aftr-score-block{
  margin-top: 0px;
  margin-bottom: 6px;
  padding: 10px 12px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(170,210,255,.06);
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ── Gauge SVG ─────────────────────────────────────────────── */
.aftr-gauge-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
.aftr-gauge-svg{ display: block; overflow: visible; }
.aftr-gauge-bg{
  fill: none;
  stroke: rgba(255,255,255,.08);
  stroke-width: 5;
}
.aftr-gauge-arc{
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
  /* Start at 12-o'clock (top) */
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  /* JS will set transition + stroke-dashoffset on load */
}
.aftr-gauge-num{
  font-size: 15px;
  font-weight: 900;
  fill: rgba(234,242,255,.95);
  text-anchor: middle;
  dominant-baseline: middle;
  font-family: inherit;
}

.aftr-score-label{
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: rgba(234,242,255,.55);
  margin-top: 2px;
}
.aftr-badges{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.aftr-badge{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .4px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid rgba(170,210,255,.2);
  background: rgba(255,255,255,.06);
  color: rgba(234,242,255,.9);
}
.aftr-badge-tier{ background: rgba(255,255,255,.05); }
.aftr-badge-edge{ color: rgba(134,239,172,.95); border-color: rgba(34,197,94,.25); }
.aftr-badge-conf{ color: rgba(180,220,255,.9); }

/* =========================
   Premium AFTR Pick Front
========================= */
.aftr-pick-card{ height:100%; display:flex; flex-direction:column; }
.aftr-topmeta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.aftr-meta-league{
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--muted);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.aftr-meta-time{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .35px;
  color: rgba(234,242,255,.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 45%;
}
.aftr-meta-tier-pill{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(170,210,255,.20);
  background: rgba(255,255,255,.05);
  white-space: nowrap;
}

/* ── Live fixture — flip pick cards ───────────────────────── */
@keyframes live-card-breathe{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(239,68,68,.35),
      0 0 24px rgba(239,68,68,.14),
      0 0 44px rgba(239,68,68,.05);
  }
  50%{
    box-shadow:
      0 0 0 1.5px rgba(239,68,68,.6),
      0 0 40px rgba(239,68,68,.28),
      0 0 70px rgba(239,68,68,.1);
  }
}
.aftr-pick-card--live{
  border-radius: var(--radius);
  background: linear-gradient(165deg, rgba(239,68,68,.055), transparent 46%);
  animation: live-card-breathe 2.4s ease-in-out infinite;
}

/* Pulsing live dot before the time text */
@keyframes live-dot-pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%     { opacity:0.35; transform:scale(0.65); }
}
.aftr-meta-live{
  color: #fca5a5;
  font-weight: 900;
  max-width: 55%;
  text-shadow: 0 0 10px rgba(239,68,68,.3);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.aftr-meta-live::before{
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #ef4444;
  flex-shrink: 0;
  animation: live-dot-pulse 1.2s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(239,68,68,.75);
}
.aftr-teams-live .aftr-score-inline-live{
  color: rgba(254,226,226,.96);
  text-shadow: 0 0 14px rgba(239,68,68,.22);
}

.aftr-teams{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}
.aftr-team{ min-width:0; }
.aftr-team-left{ justify-self:start; }
.aftr-team-right{ justify-self:end; }
.aftr-team .crest{ width: 26px; height: 26px; }

/* AFTR premium team display: clamp to 2 lines, avoid layout break on long names. */
.aftr-teams .team-name{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  line-height: 1.15;
  text-overflow: ellipsis;
  max-height: 2.3em;
}
.aftr-teams .team-name--small{ font-size: 12px; }
.aftr-vs{
  font-size: 12px;
  font-weight: 900;
  color: rgba(234,242,255,.55);
  letter-spacing: .3px;
  text-transform: uppercase;
  white-space: nowrap;
}

.aftr-score-inline{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 64px;
  padding: 2px 6px;
  font-size: 14px;
  font-weight: 1000;
  color: rgba(234,242,255,.92);
  letter-spacing: .2px;
  white-space: nowrap;
  text-align: center;
  justify-self: center;
}
.aftr-score-home,
.aftr-score-away{
  min-width: 10px;
  text-align: center;
}
.aftr-score-sep{
  opacity: 0.9;
}
.aftr-teams-finished{
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}
.aftr-teams-finished .aftr-team-left{
  justify-self: start;
}
.aftr-teams-finished .aftr-team-right{
  justify-self: end;
}

.aftr-mainpick{
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.pick-main-highlight{
  margin-top: 6px;
  margin-bottom: 2px;
  padding: 16px 14px;
  border-radius: 16px;
  text-align: center;
  border: 1px solid rgba(120,180,255,.22);
  background: linear-gradient(135deg, rgba(56,189,248,0.18) 0%, rgba(255,255,255,0.03) 100%);
  box-shadow: 0 0 0 1px rgba(120,180,255,.10), 0 14px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
}
.pick-main-highlight .aftr-market{
  font-size: 18px;
  color: rgba(200,235,255,.98);
}
.pick-main-highlight .aftr-prob{
  font-size: 26px;
  font-weight: 1000;
  letter-spacing: -0.2px;
}
.pick-main-highlight .aftr-prob-odds{
  margin-top: 6px;
  justify-content: center;
}
.pick-main-highlight .aftr-dot,
.pick-main-highlight .aftr-odds{
  font-size: 11px;
  opacity: .75;
}
.pick-main-highlight .pick-finished-prob{
  font-size: 22px;
}
.pick-main-highlight .pick-finished-market{
  font-size: 16px;
}
.pick-main-highlight.pick-finished-status{
  padding-top: 14px;
  padding-bottom: 12px;
}
.pick-main-highlight.pick-finished-status .pick-finished-badge-row{
  justify-content: center;
  margin-top: 6px;
}
/* Market tooltip */
.mkt-tip{
  position: relative;
  cursor: help;
  border-bottom: 1px dotted rgba(234,242,255,.35);
  display: inline-block;
}
.mkt-tip::after{
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: #1b2130;
  color: var(--text);
  font-size: 11px;
  font-weight: 400;
  padding: 5px 9px;
  border-radius: 7px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  z-index: 20;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.mkt-tip:hover::after,
.mkt-tip:focus::after{
  opacity: 1;
}

.aftr-market{
  font-size: 16px;
  font-weight: 900;
  color: rgba(180,220,255,.95);
}
.aftr-prob-odds{
  margin-top: 6px;
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 12px;
  font-weight: 900;
  color: rgba(234,242,255,.85);
}
.aftr-prob{
  font-size: 18px;
  font-weight: 1000;
  color: rgba(234,242,255,.95);
}
.aftr-dot{ color: rgba(234,242,255,.35); }
.aftr-odds{ color: rgba(180,220,255,.95); }

.aftr-actions{
  display:flex;
  gap: 10px;
  margin-top: auto;
}
.pick-actions{ display:flex; gap: 10px; }
.aftr-actions .pick-action-btn{
  flex:1;
  text-align:center;
  padding: 10px 12px;
  font-size: 13px;
}
.btn-follow-pick.pick-action-follow{
  background: rgba(56,189,248,.14);
  border-color: rgba(56,189,248,.35);
}
.btn-favorite-pick{ background: rgba(255,255,255,.03); }
.btn-add-tracker{ background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.3); color: rgba(34,197,94,.9); }
.pick-action-tracker{ width: 100%; text-align: center; }
.pick-action-bookie{
  width: 100%; text-align: center; display: block; text-decoration: none;
  background: rgba(255,165,0,.12); border-color: rgba(255,165,0,.35); color: rgba(255,200,80,1);
  font-weight: 700;
}
.pick-action-bookie:hover{ background: rgba(255,165,0,.22); }
.pick-action-btn:disabled{
  opacity: .65;
  cursor: not-allowed;
}
.pick-actions-wrap{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pick-detail-link{
  width: 100%;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 8px;
  color: rgba(203,213,225,.9);
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  padding: 8px 12px;
  letter-spacing: .02em;
  transition: background .15s, border-color .15s;
}
.pick-detail-link:hover{
  background: rgba(255,255,255,.11);
  border-color: rgba(255,255,255,.25);
}

/* =========================
   FINISHED PICK STATUS
========================= */
.pick-finished-status{
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.pick-finished-top{
  display:flex;
  flex-direction: column;
  gap: 4px;
}
.pick-finished-market{
  font-size: 12px;
  font-weight: 900;
  color: rgba(180,220,255,.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pick-finished-prob{
  font-size: 16px;
  font-weight: 900;
  color: rgba(234,242,255,.9);
}
.pick-finished-badge-row{
  display:flex;
  align-items:center;
  gap: 10px;
}
.pick-finished-final{
  font-size: 12px;
  font-weight: 900;
  color: rgba(180,220,255,.95);
}

/* =========================
   CONF BAR
========================= */
.conf-wrap{ width:100%; margin-top:6px; }
.conf-label{
  display:flex; align-items:center; gap:8px;
  font-size: 11px; font-weight: 900; letter-spacing:.4px;
  color: var(--muted);
  text-transform: uppercase;
}
.conf-label b{ color: var(--text); }

.conf-track{
  margin-top: 4px;
  display:grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid rgba(170,210,255,.18);
  background: rgba(255,255,255,.02);
}

.conf-tick{
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .35s ease, transform .25s ease;
}
.conf-tick.on{ transform: scaleY(1.15); }

.conf-wrap.conf-low  .conf-tick.on{ background: linear-gradient(90deg,#ef4444,#f87171); }
.conf-wrap.conf-mid  .conf-tick.on{ background: linear-gradient(90deg,#eab308,#facc15); }
.conf-wrap.conf-high .conf-tick.on{ background: linear-gradient(90deg,#38bdf8,#22c55e); }

.conf-wrap.conf-low  .conf-track{ border-color: rgba(239,68,68,0.35); }
.conf-wrap.conf-mid  .conf-track{ border-color: rgba(234,179,8,0.35); }
.conf-wrap.conf-high .conf-track{ border-color: rgba(34,197,94,0.35); }

/* =========================
   CANDIDATES
========================= */
.candidates{
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.cand-row{ margin-top: 6px; }
.cand-head{
  display:flex;
  justify-content:space-between;
  font-size: 11px;
  font-weight: 900;
  color: rgba(234,242,255,.9);
}
.cand-pct{ color: var(--muted); }

.cand-track{
  margin-top: 4px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  overflow:hidden;
  border: 1px solid rgba(170,210,255,.12);
}
.cand-fill{
  height:100%;
  width:0;
  border-radius: 999px;
  transition: width 650ms ease, background 350ms ease;
}

/* palette */
.fill-high { background: linear-gradient(90deg, #22c55e, #86efac); }
.fill-mid  { background: linear-gradient(90deg, #eab308, #fde68a); }
.fill-low  { background: linear-gradient(90deg, #ef4444, #fecaca); }

/* =========================
   FILTERBAR (dropdown)
========================= */
.filterbar{
  display:flex;
  align-items:center;
  gap: 10px;
  margin: 6px 0 14px;
  flex-wrap:wrap;
}
.filter-label{
  font-size: 11px;
  font-weight: 900;
  letter-spacing:.5px;
  color: var(--muted);
  text-transform: uppercase;
}

.day-select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  padding: 8px 36px 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 900;
  font-size: 12px;
  cursor:pointer;
  transition: all .18s ease;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(234,242,255,.55) 50%),
    linear-gradient(135deg, rgba(234,242,255,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 3px),
    calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.day-select:hover{ border-color: rgba(170,210,255,.22); }
.day-select:focus{
  outline:none;
  border-color: rgba(120,180,255,.40);
  box-shadow: 0 0 0 6px var(--glow);
}

/* =========================
   LOCKED PREMIUM (teaser)
========================= */
.locked-card{ position: relative; overflow: hidden; }
.locked-content{
  filter: blur(3px);
  opacity: .55;
  pointer-events:none;
  user-select:none;
}
.locked-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding: 18px;
  background: radial-gradient(circle at 30% 20%, rgba(120,180,255,.18), rgba(11,15,20,.88));
  border: 1px solid rgba(170,210,255,.14);
}
.locked-title{ font-weight: 900; font-size: 14px; margin-bottom: 6px; }
.locked-sub{ font-size: 12px; color: rgba(234,242,255,.8); margin-bottom: 10px; }
.locked-btn{ margin-top: 10px; }

.premium-unlock-card{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  cursor: pointer;
}
.premium-unlock-inner{
  text-align: center;
  padding: 16px;
  max-width: 280px;
}
.premium-unlock-title{ font-weight: 900; font-size: 15px; margin-bottom: 10px; color: rgba(180,220,255,.95); }
.premium-unlock-sub{ font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.premium-unlock-list{
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
  font-size: 12px;
  color: rgba(234,242,255,.85);
  text-align: left;
}
.premium-unlock-list li{ padding: 4px 0; padding-left: 16px; position: relative; }
.premium-unlock-list li::before{ content: "•"; position: absolute; left: 0; color: var(--muted); }
.premium-unlock-btn{ margin-top: 4px; }

/* =========================
   MODAL PREMIUM
========================= */
.modal-backdrop{
  position: fixed; inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 9999;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.modal{
  width: min(520px, 100%);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(18,22,34,.92);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  overflow:hidden;
  transform: translateY(12px) scale(.98);
  opacity:0;
  animation: modalIn .18s ease-out forwards;
}
@keyframes modalIn{ to{ transform: translateY(0) scale(1); opacity:1; } }

.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.modal-title{ font-weight: 900; }
.modal-x{
  border:0;
  background: rgba(255,255,255,.08);
  color: inherit;
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
}
.modal-x:active{ transform: scale(.98); }
.modal-body{ padding: 14px 16px 16px; }
.modal-subtitle{
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 14px 0;
}
.modal-section{
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: rgba(234,242,255,.9);
  margin-bottom: 8px;
}
.modal-list{
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
  font-size: 13px;
  color: rgba(234,242,255,.9);
}
.modal-list li{ padding: 5px 0; padding-left: 18px; position: relative; }
.modal-list li::before{ content: "•"; position: absolute; left: 0; color: rgba(180,220,255,.8); }
.modal-line{ padding: 8px 0; opacity: .95; }
.modal-cancel{
  font-size: 11px;
  color: var(--muted);
  margin: 0 0 12px 0;
}

.modal-cta{
  width:100%;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 999px;
  font-weight: 900;
  border: 1px solid rgba(170,210,255,.22);
  background: rgba(120,180,255,.10);
  color: var(--text);
  cursor:pointer;
  transition: all .15s ease;
}
.modal-cta:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(120,180,255,.18);
}
.modal-cta:active{ transform: scale(.98); }

.modal-price{ margin: 14px 0 2px; font-size: 18px; font-weight: 900; }
.price-main{ font-size: 22px; }
.price-sub{ opacity:.7; font-weight: 500; margin-left: 4px; }

.plan-badge{
  display:inline-flex; align-items:center;
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
}
.premium-badge{
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(255,200,100,.35);
  background: rgba(255,200,100,.12);
  color: rgba(255,220,150,.98);
}
.plan-logout{ margin-left: 10px; font-size: 12px; opacity:.8; }
.plan-logout:hover{ opacity: 1; }

.welcome-banner{
  width: 100%;
  padding: 10px 16px;
  margin: 0 0 8px 0;
  font-size: 13px;
  background: rgba(40, 167, 69, 0.15);
  border: 1px solid rgba(40, 167, 69, 0.35);
  border-radius: 8px;
  color: rgba(255,255,255,.95);
}

/* Premium activation success */
.premium-success-backdrop{ align-items: center; justify-content: center; }
.premium-success-modal{
  position: relative;
  max-width: 360px;
  background: linear-gradient(145deg, rgba(30,40,55,.98) 0%, rgba(15,20,28,.98) 100%);
  border: 1px solid rgba(120,180,255,.2);
  box-shadow: 0 12px 40px rgba(0,0,0,.4);
}
.premium-success-content{ padding: 28px 24px 24px; text-align: center; }
.premium-success-icon{ font-size: 36px; margin-bottom: 12px; opacity: .95; }
.premium-success-title{
  font-size: 18px; font-weight: 800; margin: 0 0 6px;
  color: rgba(234,242,255,.98);
}
.premium-success-sub{
  font-size: 15px; margin: 0 0 4px;
  color: rgba(180,220,255,.9);
}
.premium-success-detail{
  font-size: 13px; margin: 0 0 20px;
  color: var(--muted);
}
.premium-success-x{
  position: absolute; top: 10px; right: 10px;
  background: transparent; border: none; color: var(--muted);
  font-size: 18px; cursor: pointer; padding: 4px;
}
.premium-success-x:hover{ color: var(--text); }

/* Combo card (Combo of the Day and value combos) */
.combo-card{ padding: 14px 16px; }
.combo-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.combo-title{ font-weight: 800; font-size: 15px; }
.combo-tier{ padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; border: 1px solid rgba(255,255,255,.2); }
.combo-sub{ font-size: 13px; margin-bottom: 12px; color: var(--muted); }
.combo-legs{ display: flex; flex-direction: column; gap: 10px; }
.combo-leg{ padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); }
.combo-leg:first-of-type{ border-top: none; padding-top: 0; }
.combo-leg-top{ display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.combo-match{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.combo-match .crest{ width: 18px; height: 18px; object-fit: contain; }
.combo-pct{ font-weight: 700; font-size: 13px; }
.combo-market{ font-size: 12px; color: var(--muted); margin-top: 4px; }
.combo-of-the-day .combo-tier.safe{ background: rgba(34,197,94,.2); border-color: rgba(34,197,94,.4); }
.combo-of-the-day .combo-tier.medium{ background: rgba(234,179,8,.15); border-color: rgba(234,179,8,.35); }
.combo-of-the-day .combo-tier.aggressive{ background: rgba(239,68,68,.15); border-color: rgba(239,68,68,.35); }

/* =========================
   FLIP
========================= */
/* card-stagger: fade-in de entrada para las pick cards */
.card-stagger{
  opacity: 0;
  transform: translateY(10px);
  animation: cardFadeIn .35s ease forwards;
}
@keyframes cardFadeIn{
  to{ opacity:1; transform:translateY(0); }
}

/* Score layout */
.score-teams{
  margin-bottom: 6px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.score-line{
  display:grid;
  grid-template-columns: 1fr 34px;
  gap: 10px;
  align-items:center;
}
.score-num{
  text-align:right;
  font-weight: 900;
  font-size: 14px;
  color: var(--text);
}

/* BACK CARD */
.back-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}

.back-topline{
  font-weight: 900;
  font-size: 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.back-sub{ margin-top: 4px; font-size: 11px; color: var(--muted); }
.back-divider{ margin: 10px 0; height: 1px; background: rgba(255,255,255,.08); }

.back-card.back-compact{ padding: 14px; }
.back-card.back-compact .back-divider{ margin: 8px 0; }
.back-card.back-compact .back-sub{ margin-top: 3px; font-size: 11px; }

.back-form-compact{
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.back-form-head{
  display:flex;
  align-items:baseline;
  gap: 6px;
}
.back-form-title{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(234,242,255,.9);
}
.back-form-sub{ font-size: 10px; }
.back-form-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items:center;
}
.back-form-team.right{ text-align:right; }
.back-form-chips{ display:flex; flex-wrap:wrap; gap: 6px; }
.back-form-team.right .back-form-chips{ justify-content:flex-end; }
.back-card.back-compact .chip{
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 999px;
}

.back-form-legend{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .45px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.back-gg-compact{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.back-gg-col{
  padding: 9px;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(170,210,255,.10);
}
.back-gg-label{
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.back-gg-values{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
}
.back-gg-num{
  font-weight: 900;
  font-size: 16px;
  color: var(--text);
}
.back-gg-num.right{ text-align:right; }
.back-gg-vs{
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
}

.back-insight{
  margin-top: 10px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.back-metrics{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.back-metrics-2x2{ margin-top: 0; }
.metric{
  padding: 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(170,210,255,.10);
}
.back-card.back-compact .metric{ padding: 9px; }
.metric-label{
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  letter-spacing:.35px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.back-card.back-compact .metric-label{ margin-bottom: 5px; }
.metric-comp{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items:center;
}
.metric-num{ font-weight: 900; font-size: 16px; }
.metric-num.right{ text-align:right; }
.metric-vs{ font-size: 11px; font-weight: 900; color: var(--muted); }

.back-bars{ margin-top: 8px; display:flex; flex-direction:column; gap: 10px; }
.back-bars-compact{ margin-top: 0; gap: 8px; }
.bar-row{ margin-top: 12px; display:flex; flex-direction:column; gap: 6px; }
.back-bars-compact .bar-row{ margin-top: 0; }
.bar-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size: 12px;
  font-weight: 900;
  color: rgba(234,242,255,.9);
  margin-bottom: 6px;
}
.back-bars-compact .bar-head{ font-size: 11px; margin-bottom: 5px; }
.back-bars-compact .bar-row{ gap: 4px; }
.bar-track{
  height: 10px;
  border-radius: 999px;
  overflow:hidden;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(170,210,255,.12);
}
.back-bars-compact .bar-track{ height: 9px; }
.bar-fill{
  height:100%;
  width:0%;
  transition: width 650ms ease, background 350ms ease;
}
.bar-fill.left{ border-right: 1px solid rgba(11,15,20,.35); }

.back-form{
  display:flex;
  justify-content:space-between;
  gap: 10px;
}
.form-col{ flex:1; min-width:0; }
.form-label{
  font-size: 11px;
  font-weight: 900;
  color: var(--muted);
  letter-spacing:.35px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.form-chips{ display:flex; flex-wrap:wrap; gap: 6px; }
.chip{
  font-size: 11px;
  font-weight: 900;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
}
.chip.w{ background: rgba(34,197,94,0.15); border-color: rgba(34,197,94,0.35); color:#86efac; }
.chip.d{ background: rgba(234,179,8,0.15); border-color: rgba(234,179,8,0.35); color:#fde68a; }
.chip.l{ background: rgba(239,68,68,0.15); border-color: rgba(239,68,68,0.35); color:#fecaca; }

body{
  display:block;
  margin:0;
  padding:0;
}

/* ===============================
   TOP HEADER PRO STYLE
=================================*/

.top-pro{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:22px 28px;
  border-radius:14px;
  margin-bottom:18px;
  background: linear-gradient(145deg, #0f1116, #161a22);
  border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 0 40px rgba(0,0,0,0.4);
}

.brand-left{
  display:flex;
  flex-direction:column;
}

.brand-logo{
  font-size:28px;
  font-weight:800;
  letter-spacing:3px;
  background: linear-gradient(90deg, #7f5af0, #2cb67d);
  background-clip: text;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.brand-beta{
  font-size:12px;
  letter-spacing:2px;
  color:#888;
  margin-top:4px;
}

.league-select select{
  background:#11151c;
  border:1px solid rgba(255,255,255,0.08);
  padding:8px 12px;
  border-radius:8px;
  color:#fff;
  font-weight:500;
}
.league-select option:disabled{
  color: var(--muted);
}

.links a{
  margin-left:12px;
  text-decoration:none;
  color:#7f8ea3;
  font-size:14px;
  transition:0.2s;
}

.links a:hover{
  color:#2cb67d;
}

/* =========================
   HOME — HEADER (unified: logo, nav, auth)
========================= */
.home-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 12px 0 16px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
}
.home-header .brand{ margin-right: 12px; }
.home-header-inicio{ margin-right: auto; }
.home-header-nav{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.home-header-auth{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.home-nav-item{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.home-nav-item:hover{
  border-color: rgba(170,210,255,.28);
  background: rgba(255,255,255,.06);
  text-decoration: none;
  transform: translateY(-1px);
}
.home-nav-item[aria-current="page"]{
  background: rgba(120,180,255,.08);
  border-color: rgba(170,210,255,.25);
}
.league-nav-logo{
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
}
.league-nav-fallback{
  width: 22px;
  height: 22px;
  min-width: 22px;
  min-height: 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(120,180,255,.28), rgba(120,180,255,.14));
  border: 1px solid rgba(170,210,255,.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: rgba(255,255,255,.95);
}
.league-nav-name{ font-weight: 700; }
.home-nav-home .league-nav-fallback{ font-size: 13px; line-height: 1; }

/* =========================
   HOME — HERO (2-column: copy left, art right, embedded illustration)
========================= */
.home-hero{
  margin: 0 0 44px;
}
.hero{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 32px;
  padding: 36px 48px;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(
      90deg,
      #0b1220 0%,
      #0b1220 45%,
      rgba(11,18,32,0.9) 60%,
      rgba(11,18,32,0.6) 100%
    );
}
/* animated gradient orbs */
.hero::before{
  content:"";
  position:absolute;inset:-60%;
  background:
    radial-gradient(ellipse 55% 45% at 18% 55%, rgba(88,28,135,.28), transparent),
    radial-gradient(ellipse 45% 55% at 82% 40%, rgba(30,64,175,.22), transparent),
    radial-gradient(ellipse 35% 35% at 50% 90%, rgba(56,189,248,.12), transparent);
  animation:heroAmbient 10s ease-in-out infinite alternate;
  pointer-events:none;z-index:0;
}
.hero-copy,.hero-art{position:relative;z-index:1;}
@keyframes heroAmbient{
  0%  {transform:translate(0,0)   scale(1);}
  30% {transform:translate(3%,-2%) scale(1.04);}
  70% {transform:translate(-3%,3%) scale(1.02);}
  100%{transform:translate(2%,-1%) scale(1.05);}
}
.hero::after{
  content: "";
  position: absolute;
  right: 120px;
  top: 80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(
    circle,
    rgba(56,189,248,0.13),
    transparent 70%
  );
  filter: blur(90px);
  pointer-events: none;
  animation:heroGlow 7s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes heroGlow{
  0%  {opacity:.7;transform:scale(1);}
  50% {opacity:1; transform:scale(1.15) translate(3%,-4%);}
  100%{opacity:.8;transform:scale(1.05) translate(-2%,2%);}
}
.hero-copy{
  min-width: 0;
  z-index: 1;
}
.hero-copy h1{
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.2;
  max-width: 520px;
}
.hero-copy p{
  margin: 0;
  font-size: 15px;
  color: var(--muted);
  max-width: 480px;
  line-height: 1.45;
}
.hero-stats{
  display: flex;
  gap: 40px;
  margin-top: 25px;
}
.hero-stats span{
  font-size: 12px;
  opacity: .6;
}
.hero-stats strong{
  display: block;
  font-size: 22px;
  margin-top: 4px;
}
.hero-buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}
.btn-primary{
  background: linear-gradient(135deg, #22d3ee, #38bdf8);
  color: white;
  border: none;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.btn-secondary{
  background: transparent;
  border: 1px solid rgba(255,255,255,.2);
  color: white;
  padding: 12px 22px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
}
/* ── Hero art — imagen 3D flotante ─────────────────────────── */
.hero-art{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 420px;
}
/* Glow vía pseudo-element: nunca dentro del frame para evitar conflictos de stacking context */
.hero-art::before{
  content: "";
  position: absolute;
  inset: 8% 0;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 55% 50%,
    rgba(56,189,248,0.42) 0%,
    rgba(139,92,246,0.16) 52%,
    transparent 72%
  );
  filter: blur(60px);
  animation: hero-glow-pulse 4s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero-art__frame{
  position: relative;
  z-index: 1;
  width: 380px;
  height: 380px;
  animation: hero-float 6s ease-in-out infinite;
}
.hero-art__img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 0 40px rgba(56,189,248,0.65))
    drop-shadow(0 0 80px rgba(139,92,246,0.40))
    drop-shadow(0 22px 48px rgba(0,0,0,0.70));
}
@keyframes hero-float{
  0%,100%{ transform: perspective(900px) rotateY(-18deg) rotateX(6deg) translateY(0px); }
  50%     { transform: perspective(900px) rotateY(-12deg) rotateX(3deg) translateY(-14px); }
}
@keyframes hero-glow-pulse{
  0%  { opacity: 0.58; }
  100%{ opacity: 0.95; }
}
@media (max-width: 900px){
  .hero{
    grid-template-columns: 1fr;
    padding: 40px 24px;
    gap: 40px;
  }
  .hero-art{
    order: 1;
    height: 300px;
  }
  .hero-art__frame{
    width: 270px;
    height: 270px;
    animation: hero-float-sm 6s ease-in-out infinite;
  }
  @keyframes hero-float-sm{
    0%,100%{ transform: perspective(800px) rotateY(-10deg) rotateX(4deg) translateY(0px); }
    50%     { transform: perspective(800px) rotateY(-6deg) rotateX(2deg) translateY(-10px); }
  }
  .hero-copy{ order: 0; }
  .hero::after{
    right: 50%;
    top: 60%;
    transform: translate(50%, -50%);
    width: 280px;
    height: 280px;
  }
}
@media (max-width: 640px){
  .hero-stats{ flex-wrap: wrap; gap: 24px; }
}

/* =========================
   HOME — TOP PICKS (premium cards)
========================= */
.home-picks-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}
@media (max-width: 640px){
  .home-picks-grid{ grid-template-columns: 1fr; }
}
.home-pick-card{
  padding: 18px;
}

/* Home — En vivo ahora */
.home-live-section{
  margin-top: -4px;
  margin-bottom: 44px;
}
.home-live-title{
  color: rgba(254,226,226,.92);
}
.home-pick-card--live{
  box-shadow:
    0 0 0 1px rgba(239,68,68,.36),
    0 0 22px rgba(239,68,68,.14),
    0 10px 28px rgba(0,0,0,.22);
  background: linear-gradient(180deg, rgba(239,68,68,.05), transparent 52%);
}
.home-pick-live-status{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  color: #fca5a5;
  margin: -2px 0 8px;
  text-shadow: 0 0 10px rgba(239,68,68,.28);
}
@media (prefers-reduced-motion: no-preference){
  .home-pick-live-status{
    animation: aftr-live-softpulse 2.8s ease-in-out infinite;
  }
}
@keyframes aftr-live-softpulse{
  0%, 100%{ opacity: 1; filter: brightness(1); }
  50%{ opacity: .88; filter: brightness(1.06); }
}
.home-pick-match-live{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: nowrap;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 10px;
}
.home-pick-live-team{
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.home-pick-live-team:last-child{
  justify-content: flex-end;
}
.home-pick-live-score{
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  font-size: 17px;
  font-weight: 1000;
  color: rgba(254,226,226,.98);
  padding: 4px 12px;
  border-radius: 10px;
  background: rgba(239,68,68,.11);
  border: 1px solid rgba(239,68,68,.26);
  box-shadow: 0 0 14px rgba(239,68,68,.12);
}

/* =========================
   LIVE MATCH CARDS — shared between home + dashboard
========================= */
.live-section{
  margin-bottom: 36px;
}
.live-section-title{
  display: flex;
  align-items: center;
  gap: 8px;
}
.live-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
/* Pulsing dot */
.live-dot{
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239,68,68,.6);
  flex-shrink: 0;
}
.live-dot--title{
  width: 10px;
  height: 10px;
}
@media (prefers-reduced-motion: no-preference){
  .live-dot{
    animation: live-dot-pulse 1.6s ease-in-out infinite;
  }
}
@keyframes live-dot-pulse{
  0%  { box-shadow: 0 0 0 0 rgba(239,68,68,.65); }
  60% { box-shadow: 0 0 0 7px rgba(239,68,68,0); }
  100%{ box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
/* Card */
.live-card{
  padding: 14px 16px;
  border-radius: 16px !important;
  border-color: rgba(239,68,68,.25) !important;
  background: linear-gradient(160deg, rgba(239,68,68,.07) 0%, var(--card-bg,#0f1520) 50%);
  box-shadow: 0 0 0 1px rgba(239,68,68,.2), 0 8px 24px rgba(0,0,0,.22);
}
.live-card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.live-dot-badge{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #fca5a5;
}
.live-card-status{
  font-size: 12px;
  font-weight: 700;
  color: rgba(254,226,226,.8);
  background: rgba(239,68,68,.12);
  border: 1px solid rgba(239,68,68,.22);
  padding: 2px 8px;
  border-radius: 6px;
}
/* Scoreboard */
.live-card-scoreboard{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.live-card-team{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  min-width: 0;
}
.live-card-team--away{
  align-items: center;
}
.live-card-crest{
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.live-card-team-name{
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}
.live-card-score{
  font-size: 28px;
  font-weight: 900;
  color: rgba(254,226,226,.98);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  flex-shrink: 0;
  text-align: center;
}
.live-score-sep{
  color: rgba(254,226,226,.4);
  font-weight: 400;
  margin: 0 2px;
}
/* Pick info row */
.live-card-pick{
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.07);
  margin-bottom: 8px;
}
.live-card-market{
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 5px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(234,242,255,.8);
  white-space: nowrap;
}
.live-card-aftr{
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.28);
  color: #38bdf8;
}
.live-card-edge{
  font-size: 11px;
  font-weight: 700;
}
.live-card-edge--pos{ color: #4ade80; }
.live-card-edge--neg{ color: #f87171; }
/* Actions (home only) */
.live-card-league{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted,rgba(148,163,184,.65));
  margin-bottom: 8px;
}
.live-card-btn-row{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.live-card-btn-row .pill{
  font-size: 11px;
  padding: 5px 10px;
}

.home-pick-league{
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 8px;
}
.home-pick-match{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.home-pick-team-logo{
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
}
.home-pick-teams{
  flex: 1;
  min-width: 0;
}
.home-pick-market{
  font-size: 14px;
  color: rgba(180,220,255,.95);
  margin-bottom: 10px;
}
.home-pick-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--muted);
}
.home-pick-score{
  color: var(--blue);
  font-weight: 800;
  text-shadow: 0 0 24px rgba(56,189,248,0.55), 0 0 8px rgba(56,189,248,0.3);
  cursor: pointer;
  position: relative;
}
/* AFTR Score tooltip */
.aftr-score-wrap{
  position: relative;
  display: inline-block;
}
.aftr-score-tip{
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a2332;
  border: 1px solid rgba(56,189,248,0.35);
  border-radius: 10px;
  padding: 10px 13px;
  width: 230px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: rgba(255,255,255,0.88);
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
  white-space: normal;
  text-align: left;
  font-weight: 400;
  text-shadow: none;
}
.aftr-score-tip::after{
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(56,189,248,0.35);
}
.aftr-score-wrap:hover .aftr-score-tip,
.aftr-score-wrap.tip-open .aftr-score-tip{
  opacity: 1;
}
.aftr-score-info-icon{
  font-size: 0.68rem;
  opacity: .6;
  margin-left: 2px;
  vertical-align: super;
  font-weight: 400;
  text-shadow: none;
}

/* "Seguir" button is the primary CTA on home pick cards */
.home-pick-card .btn-follow-pick{
  background: rgba(56,189,248,0.18);
  border-color: rgba(56,189,248,0.45);
  color: rgba(56,189,248,1);
  font-weight: 700;
}
.home-pick-card .btn-follow-pick:hover{
  background: rgba(56,189,248,0.30);
  border-color: rgba(56,189,248,0.70);
}
.home-pick-edge-pos{
  color: var(--green);
  font-weight: 700;
  text-shadow: 0 0 18px rgba(34,197,94,0.5), 0 0 6px rgba(34,197,94,0.3);
}
.home-empty{ padding: 28px; text-align: center; }

/* =========================
   HOME — BIG MATCHES
========================= */
.home-bigmatch-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.home-bigmatch-card{
  display: block;
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(145deg, rgba(255,255,255,.05), rgba(0,0,0,.10));
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), border-color .22s ease;
}
.home-bigmatch-card:hover{
  transform: translateY(-4px);
  border-color: rgba(56,189,248,.28);
  box-shadow: 0 14px 40px rgba(0,0,0,.40), 0 0 24px rgba(56,189,248,.10);
  text-decoration: none;
}
.home-bigmatch-league{
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 6px;
}
.home-bigmatch-match{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: 800;
  margin-bottom: 8px;
}
.home-bigmatch-pick{
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
}
.home-bigmatch-pick-market{ color: rgba(180,220,255,.95); }
.home-bigmatch-pick-score{ font-weight: 800; color: var(--blue); }

/* =========================
   HOME — SECTIONS (spacing + hierarchy)
========================= */
.home-section{
  margin-bottom: 56px;
  position: relative;
}
.home-section + .home-section::before{
  content: "";
  display: block;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.07) 30%, rgba(255,255,255,.07) 70%, transparent);
  margin-bottom: 56px;
  margin-top: -28px;
}
.home-section:last-of-type{ margin-bottom: 40px; }

/* Heading con barra acento cyan/violeta */
.home-h2{
  margin: 0 0 22px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.025em;
  position: relative;
  padding-left: 18px;
  color: var(--text);
}
.home-h2::before{
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #38bdf8 0%, #818cf8 100%);
  box-shadow: 0 0 12px rgba(56,189,248,.55);
}
.home-card{ padding: 20px 22px; }
.home-spark-wrap{ margin-top: 10px; }
.home-grid{ gap: 20px; }

/* =========================
   HOME — COMBOS (3 cards: Safe, Medium, Aggressive)
========================= */
/* ── Combos Carousel ───────────────────────────────────────── */
.combos-car{
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.combos-car__viewport{
  overflow: hidden;
  border-radius: 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, black 5%, black 95%, transparent 100%);
}
.combos-car__track{
  display: flex;
  will-change: transform;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  cursor: grab;
}
.combos-car__track:active{ cursor: grabbing; }
.combos-car__track > .home-premium-combo-card,
.combos-car__track > .card{
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 18px;
  margin: 0;
}
.combos-car__controls{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}
.combos-car__btn{
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(234,242,255,.92);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
  flex-shrink: 0;
}
.combos-car__btn:hover{
  background: rgba(56,189,248,.16);
  border-color: rgba(56,189,248,.45);
}
.combos-car__dots{
  display: flex;
  gap: 8px;
  align-items: center;
}
.combos-car__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.20);
  cursor: pointer;
  padding: 0;
  transition: background .3s ease, width .3s ease, box-shadow .3s ease;
}
.combos-car__dot.active{
  width: 24px;
  background: linear-gradient(90deg, #38bdf8, #818cf8);
  box-shadow: 0 0 10px rgba(56,189,248,.50);
}

/* Legacy grid (kept for backward compat, overridden by carousel) */
.home-combos-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  min-width: 0;
}
@media (max-width: 980px){
  .home-combos-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px){
  .home-combos-grid{
    grid-template-columns: 1fr;
  }
}
.home-premium-combo-card{
  padding: 20px 20px 18px;
  border-radius: 20px !important;
  border-left-width: 3px !important;
}
/* Borde izquierdo de color por tier */
.home-premium-combo-card:has(.home-combo-tier--seguro){
  border-left-color: rgba(34,197,94,.55) !important;
  box-shadow: var(--shadow-soft), inset 3px 0 20px rgba(34,197,94,.05) !important;
}
.home-premium-combo-card:has(.home-combo-tier--balanceado){
  border-left-color: rgba(234,179,8,.55) !important;
  box-shadow: var(--shadow-soft), inset 3px 0 20px rgba(234,179,8,.05) !important;
}
.home-premium-combo-card:has(.home-combo-tier--value){
  border-left-color: rgba(239,68,68,.55) !important;
  box-shadow: var(--shadow-soft), inset 3px 0 20px rgba(239,68,68,.05) !important;
}
.home-combo-desc{
  font-size: 12.5px;
  line-height: 1.25;
  color: var(--muted);
  margin-bottom: 8px;
}
.home-combo-stats{
  display:flex;
  flex-wrap:wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 10px;
}
.home-combo-stats b{
  color: rgba(234,242,255,.96);
}
.home-combo-empty{
  font-size: 13px;
  padding: 6px 0 2px;
  text-align: center;
}

/* Tier badges for the new premium combo system */
.home-combo-tier--seguro{
  background: rgba(34,197,94,.22);
  border-color: rgba(34,197,94,.45);
  color: var(--green);
  box-shadow: 0 0 16px rgba(34,197,94,.18);
}
.home-combo-tier--balanceado{
  background: rgba(234,179,8,.22);
  border-color: rgba(234,179,8,.45);
  color: var(--yellow);
  box-shadow: 0 0 16px rgba(234,179,8,.15);
}
.home-combo-tier--value{
  background: rgba(239,68,68,.18);
  border-color: rgba(239,68,68,.42);
  color: #f87171;
  box-shadow: 0 0 14px rgba(239,68,68,.16);
}

/* Make legs list compact (legacy) */
.home-premium-combo-card .combo-legs{ gap: 8px; }
.home-premium-combo-card .combo-leg{ padding: 6px 0; }
.home-premium-combo-card .combo-market{ font-size: 12px; }

/* =========================
   COMBO V2 — Cards compactos y visuales
========================= */
.cv2{
  padding: 16px 18px 14px;
  border-radius: 18px !important;
  position: relative;
  overflow: hidden;
}
.cv2--seguro{
  background: linear-gradient(140deg, rgba(34,197,94,.09) 0%, var(--card-bg,#0f1520) 48%);
  border-color: rgba(34,197,94,.22) !important;
}
.cv2--balanceado{
  background: linear-gradient(140deg, rgba(234,179,8,.09) 0%, var(--card-bg,#0f1520) 48%);
  border-color: rgba(234,179,8,.22) !important;
}
.cv2--value{
  background: linear-gradient(140deg, rgba(239,68,68,.08) 0%, var(--card-bg,#0f1520) 48%);
  border-color: rgba(239,68,68,.2) !important;
}
/* Cabecera */
.cv2-head{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.cv2-badge{
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  border: 1px solid transparent;
  flex-shrink: 0;
}
.cv2-badge--seguro{
  background: rgba(34,197,94,.2);
  border-color: rgba(34,197,94,.4);
  color: #4ade80;
  box-shadow: 0 0 12px rgba(34,197,94,.22);
}
.cv2-badge--balanceado{
  background: rgba(234,179,8,.18);
  border-color: rgba(234,179,8,.4);
  color: #fbbf24;
  box-shadow: 0 0 12px rgba(234,179,8,.2);
}
.cv2-badge--value{
  background: rgba(239,68,68,.15);
  border-color: rgba(239,68,68,.38);
  color: #f87171;
  box-shadow: 0 0 10px rgba(239,68,68,.18);
}
.cv2-title{
  font-size: 13px;
  font-weight: 700;
  color: rgba(234,242,255,.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Hero: cuota + barra de probabilidad */
.cv2-hero{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.cv2-odds-block{
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 66px;
  flex-shrink: 0;
}
.cv2-odds-num{
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.02em;
}
.cv2--seguro    .cv2-odds-num{ color: #4ade80; text-shadow: 0 0 22px rgba(34,197,94,.45); }
.cv2--balanceado .cv2-odds-num{ color: #fbbf24; text-shadow: 0 0 22px rgba(234,179,8,.35); }
.cv2--value     .cv2-odds-num{ color: #f87171; text-shadow: 0 0 18px rgba(239,68,68,.35); }
.cv2-odds-lbl{
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted,rgba(148,163,184,.65));
  margin-top: 3px;
}
.cv2-prob-block{
  flex: 1;
  min-width: 0;
}
.cv2-prob-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.cv2-prob-lbl{
  font-size: 11px;
  color: var(--muted,rgba(148,163,184,.65));
}
.cv2-prob-val{
  font-size: 15px;
  font-weight: 800;
  color: var(--text,#eaf2ff);
}
.cv2-bar{
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow: hidden;
}
.cv2-bar-fill{
  height: 100%;
  border-radius: 999px;
}
.cv2-bar-fill--seguro    { background: linear-gradient(90deg,#16a34a,#4ade80); }
.cv2-bar-fill--balanceado{ background: linear-gradient(90deg,#b45309,#fbbf24); }
.cv2-bar-fill--value     { background: linear-gradient(90deg,#b91c1c,#f87171); }
/* Separador tipo ticket */
.cv2-sep{
  margin: 0 0 12px;
  border-top: 1px dashed rgba(255,255,255,.09);
}
/* Legs compactos */
.cv2-legs{
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 12px;
}
.cv2-leg{
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.cv2-leg-match{
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.cv2-crest{
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
}
.cv2-team{
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70px;
}
.cv2-vs{
  font-size: 10px;
  color: var(--muted,rgba(148,163,184,.6));
  font-weight: 500;
  flex-shrink: 0;
}
.cv2-mkt{
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  white-space: nowrap;
  flex-shrink: 0;
  color: rgba(234,242,255,.72);
}
.cv2-leg-pct{
  font-size: 11px;
  font-weight: 700;
  color: var(--text,#eaf2ff);
  flex-shrink: 0;
  min-width: 30px;
  text-align: right;
}
/* Footer */
.cv2-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cv2-count{
  font-size: 11px;
  color: var(--muted,rgba(148,163,184,.6));
}
.cv2-aftr-badge{
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  background: rgba(56,189,248,.12);
  border: 1px solid rgba(56,189,248,.28);
  color: #38bdf8;
  letter-spacing: .03em;
}
.cv2-empty{
  font-size: 13px;
  padding: 20px 0 8px;
  text-align: center;
}

.combo-card-slot{
  padding: 18px;
}
.combo-card-slot .combo-head{
  margin-bottom: 10px;
}
.combo-card-slot .combo-title{
  font-size: 15px;
  font-weight: 800;
}
.combo-tier-safe .combo-tier{
  background: rgba(34,197,94,.22);
  color: var(--green);
  box-shadow: 0 0 16px rgba(34,197,94,0.2);
}
.combo-tier-medium .combo-tier{
  background: rgba(234,179,8,.22);
  color: var(--yellow);
  box-shadow: 0 0 16px rgba(234,179,8,0.2);
}
.combo-tier-aggressive .combo-tier{
  background: rgba(239,68,68,.18);
  color: #f87171;
  box-shadow: 0 0 14px rgba(239,68,68,0.18);
}
.combo-empty{
  font-size: 13px;
  padding: 16px 0;
  text-align: center;
}

/* =========================
   HOME — FEATURED LEAGUE CARDS (logo, ROI, top pick, Ver liga)
========================= */
.home-leagues-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.home-league-card{
  padding: 22px !important;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.home-league-card:hover{
  border-color: rgba(170,210,255,.2);
  box-shadow: 0 12px 32px rgba(0,0,0,.2);
}
.home-league-card-head{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.home-league-logo{
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.home-league-fallback{
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(120,180,255,.25), rgba(120,180,255,.12));
  border: 1px solid rgba(170,210,255,.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: rgba(255,255,255,.95);
}
.home-league-card-title{
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
}
.home-league-card-roi{
  font-size: 24px;
  font-weight: 900;
  margin-bottom: 8px;
  letter-spacing: -.02em;
}
.home-league-card-roi.pos{ color: var(--green); }
.home-league-card-roi.neg{ color: #f87171; }
.home-league-card-roi:empty{ display: none; }
.home-league-card-stats{
  font-size: 13px;
  margin-bottom: 14px;
  color: var(--muted);
  line-height: 1.4;
}
.home-league-top-pick{
  margin-top: 14px;
  padding: 14px 12px;
  background: rgba(255,255,255,.04);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
}
.home-league-top-pick-label{
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.home-league-top-pick-match{
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--text);
  line-height: 1.3;
}
.home-league-top-pick-market{
  font-size: 13px;
  color: rgba(180,220,255,.95);
  margin-bottom: 4px;
}
.home-league-top-pick-meta{
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
  line-height: 1.4;
}
.home-league-ver{
  display: inline-block;
  margin-top: 14px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  background: rgba(120,180,255,.12);
  border: 1px solid rgba(170,210,255,.25);
  color: rgba(200,230,255,.95);
  text-decoration: none;
  transition: all .15s ease;
}
.home-league-ver:hover{
  background: rgba(120,180,255,.2);
  border-color: rgba(170,210,255,.4);
  color: #fff;
  text-decoration: none;
}

/* =========================
   HOME — PERFORMANCE (chart + summary)
========================= */
.home-perf-section{ margin-bottom: 52px; }
.home-perf-intro{
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.45;
  max-width: 420px;
}
.home-perf-chart-wrap{
  padding: 24px 20px 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
}
.home-perf-chart-wrap .roi-spark-canvas{
  min-height: 180px;
}
.home-perf-summary{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.home-perf-summary-item{
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.home-perf-summary strong{ color: var(--text); }
.home-perf-summary .muted{ margin-right: 4px; }

/* =========================
   HOME — PREMIUM CTA
========================= */
/* =========================
   HOME — PREMIUM (Free vs Premium comparison + CTA)
========================= */
.home-cta-section{
  margin-top: 32px;
  margin-bottom: 48px;
}
.home-premium-block{
  padding: 44px 36px 40px;
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(170,210,255,.18);
  border-radius: var(--radius);
  box-shadow: 0 24px 64px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.home-premium-title{
  margin: 0 0 10px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--text);
}
.home-premium-subtitle{
  margin: 0 0 28px;
  font-size: 15px;
  text-align: center;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.45;
}
.home-premium-compare{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  max-width: 580px;
  margin: 0 auto;
}
@media (max-width: 600px){
  .home-premium-compare{ grid-template-columns: 1fr; }
}
.home-premium-col{
  padding: 28px 24px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}
.home-premium-free{
  border-color: rgba(255,255,255,.1);
}
.home-premium-pro{
  border-color: rgba(170,210,255,.3);
  background: linear-gradient(180deg, rgba(120,180,255,.08), rgba(120,180,255,.02));
  box-shadow: 0 0 24px rgba(56,189,248,0.08);
}
.home-premium-col-title{
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--text);
}
.home-premium-list{
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--text);
  line-height: 1.5;
}
.home-premium-list li{
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}
.home-premium-list li::before{
  content: "•";
  position: absolute;
  left: 0;
  color: var(--muted);
}
.home-premium-pro .home-premium-list li::before{
  content: "✓";
  color: var(--green);
}
.home-premium-price{
  margin-bottom: 20px;
}
.home-premium-price .price-main{ font-size: 30px; font-weight: 900; }
.home-premium-price .price-sub{ font-size: 15px; color: var(--muted); }
.home-cta-btn{
  display: inline-block;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--blue), #0ea5e9);
  color: #fff;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease;
  box-shadow: 0 8px 32px rgba(56,189,248,.5), 0 0 24px rgba(56,189,248,.25), 0 0 0 1px rgba(255,255,255,.15) inset;
}
.home-cta-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(56,189,248,.55), 0 0 32px rgba(56,189,248,.35), 0 0 0 1px rgba(255,255,255,.2) inset;
}

.top.top-pro{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  position:sticky;
  top:0;
  z-index:50;
}

.logo-aftr{
  width:55px;
  height:55px;
  transform:translateY(1px);
  object-fit:contain;
  filter:drop-shadow(0 0 6px rgba(120,170,255,0.5));
}

.brand-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  line-height:1.1;
}

.card{
  transition: transform .15s ease, box-shadow .15s ease;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}

.roi-spark-wrap{
  margin-top:14px;
  padding:14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(255,255,255,0.04);
}

.roi-spark-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
  margin-bottom:10px;
}

.roi-spark-title{
  font-weight:800;
  letter-spacing:.2px;
}

/* roiSpark: responsive canvas (width set by JS from container) */
.roi-spark-canvas{
  position:relative;
  width:100%;
  max-width:100%;
  overflow:hidden;
}

#roiSpark{
  display:block;
  width:100% !important;
  max-width:100%;
  height:140px;
}

.roi-tip{
  position:absolute;
  pointer-events:none;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(10,12,18,.92);
  border:1px solid rgba(120,170,255,.22);
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 0 0 6px rgba(120,170,255,.07);
  font-size:12px;
  font-weight:800;
  color:rgba(234,242,255,.92);
  transform:translate(10px, -10px);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  max-width:220px;
}

.roi-tip .muted{
  font-weight:700;
}

.roi-tip:before{
  content:"";
  position:absolute;
  left:16px;
  top:-6px;
  width:12px;
  height:12px;
  transform:rotate(45deg);
  background:rgba(10,12,18,.92);
  border-left:1px solid rgba(120,170,255,.22);
  border-top:1px solid rgba(120,170,255,.22);
}

.market-wrap{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:10px;
  min-width: 0;
  max-width: 100%;
}

.market-row{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  border-radius:14px;
  padding:12px;
}

.market-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:baseline;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.market-name{
  font-weight:900;
  letter-spacing:.2px;
}

.market-bar{
  position:relative;
  height:14px;
  border-radius:999px;
  overflow:hidden;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(170,210,255,.12);
  box-shadow: inset 0 0 10px rgba(0,0,0,.45);
}

.market-fill{
  height:100%;
  width:0%;
  transition: width 0.8s cubic-bezier(.2,.8,.2,1);
}

.market-fill.pos{
  background: linear-gradient(90deg,#22c55e,#38bdf8);
  box-shadow:0 0 18px rgba(34,197,94,.22);
}

.market-fill.neg{
  background: linear-gradient(90deg,#ef4444,#eab308);
  box-shadow:0 0 18px rgba(239,68,68,.18);
}

.market-val{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  font-weight:900;
  color:rgba(234,242,255,.9);
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}

*{
  box-sizing:border-box;
}

.top, .top-actions, .brand, .kpi-grid, .grid, .roi-spark-wrap, .market-wrap{
  max-width:100%;
  box-sizing:border-box;
}

img{
  max-width:100%;
  height:auto;
}
canvas{
  max-width:100%;
}

@media (max-width: 768px){
  .links a[href*="matches"],
  .links a[href*="picks"]{
    display:none;
  }

  .top-pro{
    padding:16px;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .brand{
    flex-direction:row;
    align-items:center;
    gap:12px;
  }

  .brand-text{
    font-size:16px;
  }

  .league-select{
    width:100%;
  }

  .league-select select{
    width:100%;
  }

  .links{
    display:none;
  }

  #roiSpark{
    height:100px;
  }
}

@media (max-width: 640px){
  .top.top-pro{
    padding:12px 12px;
  }

  .logo-aftr{
    width:42px;
    height:42px;
  }

  .brand-title{
    font-size:16px;
  }

  .brand-tag{
    font-size:11px;
    opacity:.8;
  }

  .league-select span.muted{
    display:none;
  }
}

/* =========================
   ACCOUNT — Premium Picks
========================= */
.account-pick-card{
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 12px 36px rgba(0,0,0,.18);
}
.account-pick-title{
  font-weight: 900;
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.account-pick-subtitle{
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.account-badge-row{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  align-items:center;
  margin-bottom: 10px;
}
.account-mini-badge{
  display:inline-flex;
  align-items:center;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(234,242,255,.92);
  white-space: nowrap;
}
.account-badge-aftr{
  border-color: rgba(56,189,248,.35);
  background: rgba(56,189,248,.12);
  color: rgba(180,220,255,.98);
}
.account-badge-tier-watch{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: rgba(234,242,255,.88);
}
.account-badge-tier-strong{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
  color: #86efac;
}
.account-badge-tier-elite{
  border-color: rgba(234,179,8,.35);
  background: rgba(234,179,8,.12);
  color: #fde68a;
}
.account-badge-tier-risky{
  border-color: rgba(255,152,0,.35);
  background: rgba(255,152,0,.12);
  color: #fdba74;
}

.account-badge-edge-pos{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
  color: #baffd2;
}
.account-badge-edge-neg{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
  color: #ffd0d0;
}
.account-badge-edge-neutral{
  border-color: rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(234,242,255,.85);
}
.account-pick-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
}
.account-history-bottom{
  justify-content:space-between;
}
.account-card-action{
  font-size: 0.78rem;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.account-card-action:hover:not(:disabled){
  background: rgba(255,255,255,.1);
  color: var(--text);
}
.account-card-action:disabled{
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-remove-fav.account-card-action,
.btn-unfollow.account-card-action{
  margin-left: auto;
}
.account-pick-muted{
  font-size: 0.82rem;
  color: var(--muted);
}
.account-pick-date{
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}
.account-status-badge{
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 900;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(234,242,255,.92);
  white-space: nowrap;
}
.account-status-pending{
  border-color: rgba(234,179,8,.35);
  background: rgba(234,179,8,.14);
  color: #fde68a;
}
.account-status-win{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.14);
  color: #86efac;
}
.account-status-loss{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.14);
  color: #fda4af;
}
.account-status-push{
  border-color: rgba(234,179,8,.35);
  background: rgba(234,179,8,.14);
  color: #fde68a;
}

/* =========================
   ACCOUNT PAGE — Layout & header
========================= */
.account-header-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 14px;
  background: rgba(11,15,20,.85);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.account-header-title{
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}
.account-header-home{
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background .15s, border-color .15s;
}
.account-header-home:hover{
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.18);
  text-decoration: none;
  color: var(--text);
}

.account-page.account-page-wrapper{
  max-width: 580px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}
.account-section{
  margin-bottom: 32px;
  scroll-margin-top: 20px;
}
.account-section-title{
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 14px 0;
  letter-spacing: .02em;
}
.account-hero{
  padding: 24px;
  margin-bottom: 24px;
  border-radius: 14px;
  background: var(--card-bg, rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
}
.account-greeting{
  font-size: 1.3rem;
  margin: 0 0 8px 0;
  color: var(--text);
}
.account-plan-row{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 4px 0;
}
.account-plan{
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
}
.account-plan-premium{ color: #b8a574; }
.account-plan-free{ color: var(--muted); }
.account-premium-badge{
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(212,175,55,.18);
  border: 1px solid rgba(212,175,55,.4);
  color: #d4af37;
  font-weight: 700;
  letter-spacing: .03em;
}
.account-created{
  margin: 12px 0 0 0;
  font-size: 0.85rem;
}
.account-streak-banner{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.account-streak-banner--win{
  background: linear-gradient(135deg, rgba(34,197,94,.15) 0%, rgba(16,185,129,.08) 100%);
  border-color: rgba(34,197,94,.35);
  color: #4ade80;
}
.account-streak-banner--loss{
  background: linear-gradient(135deg, rgba(239,68,68,.12) 0%, rgba(220,38,38,.06) 100%);
  border-color: rgba(239,68,68,.30);
  color: #f87171;
}
.account-streak-banner-icon{
  font-size: 1.4rem;
  line-height: 1;
}
.account-streak-banner-text{
  font-size: 1rem;
}
/* ── Racha prominente ── */
.home-streak-banner{
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 0 auto 24px;
  max-width: 900px;
  padding: 18px 22px;
  border-radius: 16px;
  border: 1px solid transparent;
}
.home-streak-banner--win{
  background: linear-gradient(135deg, rgba(34,197,94,.18) 0%, rgba(16,185,129,.08) 100%);
  border-color: rgba(34,197,94,.4);
}
.home-streak-banner--loss{
  background: linear-gradient(135deg, rgba(239,68,68,.14) 0%, rgba(220,38,38,.06) 100%);
  border-color: rgba(239,68,68,.32);
}
.streak-fires{ font-size: 1.8rem; line-height: 1; flex-shrink: 0; }
.streak-body{ flex: 1 1 180px; }
.streak-headline{
  font-size: 1.15rem; font-weight: 800; color: #4ade80; line-height: 1.2;
}
.home-streak-banner--loss .streak-headline{ color: #f87171; }
.streak-num{ font-size: 2rem; font-weight: 900; margin-right: 4px; }
.streak-sub{ font-size: 0.82rem; opacity: .7; margin-top: 3px; }
.streak-share-btn{
  background: rgba(34,197,94,.2); border-color: rgba(34,197,94,.4);
  color: #4ade80; font-weight: 700; font-size: 0.82rem;
  padding: 7px 14px; white-space: nowrap; flex-shrink: 0;
}
.streak-share-btn:hover{ background: rgba(34,197,94,.32); }

/* ── Share card modal ── */
.modal--share{ width: min(480px, 100%); }
.share-card-preview{
  background: linear-gradient(145deg, #0f172a 0%, #1a2540 100%);
  border: 1px solid rgba(120,170,255,.25);
  border-radius: 16px;
  padding: 20px;
  margin: 12px 0 16px;
}
.sc-brand{
  display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.sc-logo{ width: 28px; height: 28px; border-radius: 6px; }
.sc-brand-name{ font-weight: 900; font-size: 1rem; }
.sc-brand-tag{ font-size: 0.72rem; opacity: .5; margin-left: 4px; }
.sc-league{ font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; opacity: .5; margin-bottom: 4px; }
.sc-match{ font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
.sc-market{ font-size: 0.88rem; opacity: .75; margin-bottom: 14px; }
.sc-stats{ display: flex; gap: 16px; margin-bottom: 14px; }
.sc-stat{ display: flex; flex-direction: column; gap: 2px; }
.sc-stat-label{ font-size: 0.66rem; text-transform: uppercase; letter-spacing: .06em; opacity: .5; }
.sc-stat-val{ font-size: 1.1rem; font-weight: 800; }
.sc-val-blue{ color: rgba(120,170,255,1); }
.sc-val-green{ color: #4ade80; }
.sc-footer{ font-size: 0.7rem; opacity: .35; text-align: right; }
.share-modal-actions{ display: flex; gap: 8px; flex-wrap: wrap; }
.share-btn-wa{ background: #25d366; color: #fff; border: none; font-weight: 700; }
.share-btn-wa:hover{ background: #1fba57; }
.share-btn-copy{ background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.15); }
.share-btn-download{ background: rgba(120,170,255,.15); border-color: rgba(120,170,255,.3); color: rgba(120,170,255,1); }

/* Streak share card variant */
.share-card-streak{ text-align: center; padding: 28px 20px; }
.streak-card-fires{ font-size: 2.2rem; margin-bottom: 8px; }
.streak-card-num{ font-size: 2.4rem; font-weight: 900; color: #4ade80; line-height: 1; }
.streak-card-label{ font-size: 0.88rem; opacity: .7; margin-top: 4px; margin-bottom: 16px; }

/* ── Account page rediseño ───────────────────────────────── */
.ap-stats-row{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 20px 0 10px;
}
.ap-stat{
  background: #141920;
  border-radius: 14px;
  padding: 18px 12px 14px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.06);
}
.ap-stat-num{
  display: block;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 4px;
}
.ap-stat-label{
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6b7280;
}
.ap-stat--win .ap-stat-num{ color: #4ade80; }
.ap-stat--loss .ap-stat-num{ color: #f87171; }
.ap-stat--rate .ap-stat-num{ color: #60a5fa; }
.ap-stat--streak .ap-stat-num{ font-size: 1.2rem; color: #fbbf24; }
.ap-stats-secondary{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #6b7280;
  margin-bottom: 20px;
}
.ap-stats-secondary strong{ color: #d1d5db; }

/* Streak card */
.streak-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 20px 24px;
  border-radius: 16px;
  border: 1px solid transparent;
  margin-bottom: 20px;
  text-align: center;
}
.streak-card--win{
  background: linear-gradient(135deg, rgba(34,197,94,.12) 0%, rgba(16,185,129,.06) 100%);
  border-color: rgba(34,197,94,.30);
}
.streak-card--loss{
  background: linear-gradient(135deg, rgba(239,68,68,.10) 0%, rgba(220,38,38,.05) 100%);
  border-color: rgba(239,68,68,.25);
}
.streak-card-main{
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.streak-card-icon{ font-size: 2rem; line-height: 1; }
.streak-card-num{
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
}
.streak-card--win .streak-card-num{ color: #4ade80; }
.streak-card--loss .streak-card-num{ color: #f87171; }
.streak-card-label{
  font-size: 1rem;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.streak-card-dots{
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.streak-dot{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.streak-dot--win{ background: #4ade80; }
.streak-dot--loss{ background: #f87171; }
.streak-card-best{
  font-size: 0.8rem;
  color: #6b7280;
  letter-spacing: .03em;
}

/* Checkout buttons */
.checkout-btns{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.modal-cta--mp{ background:#009ee3; color:#fff; border:none; font-weight:600; }
.modal-cta--mp:hover{ background:#0088cc; }
.modal-cta--ls{ background:transparent; border:1px solid rgba(255,255,255,.2); color:#9ca3af; font-size:0.85rem; }
.modal-cta--ls:hover{ border-color:rgba(255,255,255,.4); color:#e5e7eb; }

/* ── Plan comparison modal ── */
.modal--wide{ width: min(640px, 100%); }
.plan-compare{
  display: flex; gap: 12px; align-items: flex-start;
}
.plan-col{
  flex: 1 1 0; border-radius: 12px; padding: 16px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.plan-col--free{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}
.plan-col--premium{
  background: rgba(56,189,248,0.07);
  border: 1px solid rgba(56,189,248,0.35);
  position: relative;
}
.plan-col-badge{
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: rgba(56,189,248,0.9); color: #0d1117;
  font-size: 0.7rem; font-weight: 700; padding: 2px 10px; border-radius: 20px;
  white-space: nowrap; letter-spacing: .04em;
}
.plan-col-name{ font-size: 0.95rem; font-weight: 700; margin-top: 6px; }
.plan-col-price-line{ margin: 2px 0 6px; }
.plan-price-num{ font-size: 1.5rem; font-weight: 800; }
.plan-price-sub{ font-size: 0.78rem; opacity: .6; margin-left: 4px; }
.plan-col-list{ list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 5px; }
.plan-item{ font-size: 0.82rem; padding-left: 18px; position: relative; opacity: .88; line-height: 1.4; }
.plan-item--yes::before{ content: "✓"; position: absolute; left: 0; color: #4ade80; font-weight: 700; }
.plan-item--no::before{ content: "✕"; position: absolute; left: 0; color: rgba(255,255,255,0.25); }
.plan-item--no{ opacity: .45; }
.plan-col-btn{
  display: block; text-align: center; padding: 9px 12px; border-radius: 8px;
  font-size: 0.85rem; font-weight: 600; text-decoration: none; margin-top: auto;
}
.plan-col-btn--free{
  background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.15);
}
.plan-col-btn--free:hover{ background: rgba(255,255,255,0.13); }
.checkout-btns{ display: flex; flex-direction: column; gap: 8px; }
@media(max-width:520px){
  .plan-compare{ flex-direction: column; }
  .plan-col--premium{ margin-top: 14px; }
}

/* ── Signup modal free tier perks ── */
.signup-free-perks{
  background: rgba(56,189,248,0.07);
  border: 1px solid rgba(56,189,248,0.20);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 14px;
}
.signup-free-title{ font-size: 0.80rem; font-weight: 600; margin: 0 0 6px; opacity: .85; text-transform: uppercase; letter-spacing: .05em; }
.signup-free-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 3px; }
.signup-free-list li{ font-size: 0.83rem; padding-left: 16px; position: relative; opacity: .85; }
.signup-free-list li::before{ content: "✓"; position: absolute; left: 0; color: #4ade80; font-weight: 700; }
.signup-footer-note{ font-size: 0.80rem; text-align: center; margin-top: 10px; }
.modal-link{ color: rgba(120,170,255,0.9); text-decoration: none; }
.modal-link:hover{ text-decoration: underline; }

/* ── Trial banner ── */
.trial-banner{
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(34,197,94,0.12) 0%, rgba(56,189,248,0.08) 100%);
  border-bottom: 1px solid rgba(34,197,94,0.25);
  padding: 10px 20px;
  font-size: 0.88rem;
}
.trial-banner-icon{ font-size: 1.1rem; flex-shrink: 0; }
.trial-banner-copy{ flex: 1 1 200px; }
.trial-banner-cta{
  background: rgba(34,197,94,0.85); color: #0d1117;
  border: none; font-weight: 700; font-size: 0.82rem;
  padding: 6px 14px; border-radius: 7px; cursor: pointer; white-space: nowrap;
}
.trial-banner-cta:hover{ background: rgba(34,197,94,1); }

/* ── Free picks counter ── */
.picks-free-counter{ font-size: 0.78rem; font-weight: 400; opacity: .6; margin-left: 6px; }

/* ── Ad slot (house ad promoting premium) ── */
.aftr-ad-slot{
  grid-column: 1 / -1;
  display: flex; flex-direction: column; gap: 4px;
}
.ad-label{
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: .06em;
  opacity: .35; padding: 0 4px;
}
.ad-house{
  background: rgba(120,170,255,0.06);
  border: 1px dashed rgba(120,170,255,0.20);
  border-radius: 10px; padding: 12px 16px;
}
.ad-house-inner{
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.ad-house-icon{ font-size: 1.4rem; flex-shrink: 0; }
.ad-house-copy{ flex: 1 1 160px; display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; }
.ad-house-copy strong{ font-weight: 700; }
.ad-house-copy span{ opacity: .65; font-size: 0.78rem; }
.ad-house-btn{
  background: rgba(120,170,255,0.18); border-color: rgba(120,170,255,0.35);
  color: rgba(120,170,255,1); font-weight: 700; font-size: 0.82rem;
  padding: 7px 14px; white-space: nowrap;
}
.ad-house-btn:hover{ background: rgba(120,170,255,0.28); }
.ad-bookie-banner{
  display: block; text-decoration: none;
  background: rgba(255,165,0,.10);
  border: 1px solid rgba(255,165,0,.30);
  border-radius: 10px; padding: 12px 16px;
}
.ad-bookie-banner:hover{ background: rgba(255,165,0,.18); }
.ad-bookie-inner{
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.ad-bookie-copy{ display: flex; flex-direction: column; gap: 2px; font-size: 0.85rem; }
.ad-bookie-copy strong{ font-weight: 700; color: rgba(255,200,80,1); }
.ad-bookie-copy span{ opacity: .75; font-size: 0.78rem; color: #fff; }
.ad-bookie-cta{
  background: rgba(255,165,0,.25); border: 1px solid rgba(255,165,0,.45);
  color: rgba(255,200,80,1); font-weight: 700; font-size: 0.82rem;
  padding: 7px 14px; border-radius: 20px; white-space: nowrap;
}

/* ── Locked "more picks" card ── */
.locked-more-card{
  grid-column: 1 / -1;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: 14px; padding: 24px 20px;
  cursor: pointer; text-align: center;
  transition: background .15s;
}
.locked-more-card:hover{ background: rgba(255,255,255,0.06); }
.locked-more-icon{ font-size: 1.6rem; }
.locked-more-title{ font-size: 1.1rem; font-weight: 700; }
.locked-more-sub{ font-size: 0.82rem; opacity: .6; }
.locked-more-btn{
  background: rgba(120,170,255,0.9); color: #0d1117;
  border: none; font-weight: 700; padding: 9px 22px; margin-top: 4px;
}
.locked-more-btn:hover{ background: rgba(140,185,255,1); }

/* ── PWA install banner ── */
.pwa-banner{
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 9000;
  background: rgba(13,17,23,0.97);
  border-top: 1px solid rgba(56,189,248,0.30);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
  padding: 12px 16px 12px;
  animation: slideUpIn .25s ease-out;
}
@keyframes slideUpIn{ from{ transform:translateY(100%); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.pwa-banner-inner{
  max-width: 600px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pwa-banner-icon{
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
}
.pwa-banner-copy{ flex: 1 1 160px; display: flex; flex-direction: column; gap: 2px; }
.pwa-banner-title{ font-size: 0.9rem; font-weight: 700; }
.pwa-banner-sub{ font-size: 0.78rem; }
.pwa-banner-actions{ display: flex; align-items: center; gap: 8px; }
.pwa-install-btn{
  background: rgba(56,189,248,0.9); color: #0d1117;
  border: none; border-radius: 8px; padding: 8px 16px;
  font-size: 0.85rem; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.pwa-install-btn:hover{ background: rgba(56,189,248,1); }
.pwa-banner-dismiss{
  background: transparent; border: none; color: rgba(255,255,255,0.4);
  font-size: 1rem; cursor: pointer; padding: 4px 8px; flex-shrink: 0;
}
.pwa-banner-dismiss:hover{ color: rgba(255,255,255,0.8); }
.pwa-ios-tip{
  max-width: 600px; margin: 10px auto 0;
  background: rgba(56,189,248,0.10);
  border: 1px solid rgba(56,189,248,0.25);
  border-radius: 10px; padding: 10px 14px;
  font-size: 0.83rem; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.pwa-ios-tip p{ margin: 0; flex: 1; line-height: 1.5; }
.pwa-ios-close{
  background: rgba(56,189,248,0.18); border: 1px solid rgba(56,189,248,0.35);
  color: inherit; border-radius: 6px; padding: 5px 12px; font-size: 0.8rem;
  cursor: pointer; white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════
   TRACKER
   ═══════════════════════════════════════════════════════ */
.tracker-body{ background:#0d1117; color:#e5e7eb; min-height:100vh; font-family:inherit; }

/* Header */
.tracker-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.07);
  position:sticky; top:0; background:#0d1117; z-index:10;
}
.tracker-header-logo{ display:flex; align-items:center; gap:8px; text-decoration:none; color:#e5e7eb; font-weight:700; font-size:1.1rem; }
.tracker-header-logo-img{ width:28px; height:28px; object-fit:contain; }
.tracker-header-right{ display:flex; align-items:center; gap:10px; }
.tracker-header-user{ font-size:0.8rem; }
.tracker-header-pill{ font-size:0.8rem; padding:4px 12px; }

/* Main */
.tracker-main{ max-width:640px; margin:0 auto; padding:16px 16px 100px; }

/* Summary */
.tracker-summary{
  display:flex; gap:0; border-radius:14px; overflow:hidden;
  background:#141920; border:1px solid rgba(255,255,255,.07); margin-bottom:20px;
}
.tracker-summary-item{
  flex:1; display:flex; flex-direction:column; align-items:center; padding:14px 8px;
  border-right:1px solid rgba(255,255,255,.06);
}
.tracker-summary-item:last-child{ border-right:none; }
.tracker-summary-num{ font-size:1rem; font-weight:700; }
.tracker-summary-label{ font-size:0.7rem; color:#6b7280; margin-top:2px; }
.pnl--pos{ color:#4ade80; }
.pnl--neg{ color:#f87171; }

/* Tabs */
.tracker-tabs{ display:flex; gap:4px; margin-bottom:16px; }
.tracker-tab{
  flex:1; padding:8px; background:#141920; border:1px solid rgba(255,255,255,.08);
  border-radius:8px; color:#6b7280; font-size:0.85rem; cursor:pointer; transition:all .15s;
}
.tracker-tab--active{ background:#1e293b; border-color:rgba(96,165,250,.4); color:#93c5fd; }

/* Bet card */
.bet-card{
  background:#141920; border:1px solid rgba(255,255,255,.07); border-radius:14px;
  margin-bottom:14px; overflow:hidden;
}
.bet-card--won{ border-color:rgba(34,197,94,.25); }
.bet-card--lost{ border-color:rgba(239,68,68,.2); }
.bet-card--in_play{ border-color:rgba(251,191,36,.25); }

.bet-card-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid rgba(255,255,255,.05);
}
.bet-card-header-left{ display:flex; align-items:center; gap:8px; }
.bet-card-header-right{ display:flex; align-items:center; gap:8px; }
.bet-type-label{ font-size:0.7rem; font-weight:700; color:#6b7280; letter-spacing:.05em; }

/* Status badge */
.bet-status-badge{
  font-size:0.72rem; font-weight:600; padding:2px 8px; border-radius:20px;
}
.status--pending{ background:rgba(107,114,128,.2); color:#9ca3af; }
.status--inplay{ background:rgba(251,191,36,.15); color:#fbbf24; }
.status--won{ background:rgba(34,197,94,.15); color:#4ade80; }
.status--lost{ background:rgba(239,68,68,.15); color:#f87171; }
.status--void{ background:rgba(156,163,175,.1); color:#6b7280; }

/* Copy */
.bet-copy{ font-size:0.8rem; font-weight:600; }
.bet-copy--won{ color:#4ade80; }
.bet-copy--lost{ color:#f87171; }
.bet-copy--alive{ color:#34d399; }
.bet-copy--close{ color:#fbbf24; }

/* Progress */
.bet-progress{ padding:6px 14px 0; font-size:0.8rem; color:#6b7280; }
.bet-progress-num{ font-weight:700; color:#e5e7eb; }

/* Legs */
.bet-legs{ padding:8px 0; }
.bet-leg{
  display:flex; align-items:center; gap:10px;
  padding:8px 14px; border-bottom:1px solid rgba(255,255,255,.04);
}
.bet-leg:last-child{ border-bottom:none; }
.leg-icon{ font-size:1rem; flex-shrink:0; width:22px; text-align:center; }
.leg-info{ flex:1; min-width:0; }
.leg-match{ display:block; font-size:0.85rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.leg-market{ display:block; font-size:0.75rem; color:#6b7280; }

/* Leg status color tint */
.leg-status--won .leg-match{ color:#4ade80; }
.leg-status--lost .leg-match{ color:#f87171; }
.leg-status--void .leg-match{ color:#6b7280; }

/* Leg action buttons */
.leg-actions{ display:flex; gap:4px; flex-shrink:0; }
.leg-btn{
  width:28px; height:28px; border-radius:6px; border:none; cursor:pointer;
  font-size:0.85rem; display:flex; align-items:center; justify-content:center;
}
.leg-btn--won{ background:rgba(34,197,94,.15); color:#4ade80; }
.leg-btn--won:hover{ background:rgba(34,197,94,.3); }
.leg-btn--lost{ background:rgba(239,68,68,.15); color:#f87171; }
.leg-btn--lost:hover{ background:rgba(239,68,68,.3); }
.leg-btn--void{ background:rgba(107,114,128,.15); color:#9ca3af; }
.leg-btn--void:hover{ background:rgba(107,114,128,.25); }
.leg-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* Footer */
.bet-card-footer{
  display:flex; padding:10px 14px; gap:0;
  border-top:1px solid rgba(255,255,255,.05);
}
.bet-footer-item{
  flex:1; display:flex; flex-direction:column; align-items:center; font-size:0.8rem;
  border-right:1px solid rgba(255,255,255,.05);
}
.bet-footer-item:last-child{ border-right:none; }
.bet-footer-item .muted{ font-size:0.7rem; }
.bet-footer-item strong{ font-size:0.9rem; margin-top:1px; }
.payout-val{ color:#60a5fa; }

.bet-note{ font-size:0.75rem; padding:6px 14px 10px; }

/* Delete btn */
.bet-delete-btn{
  background:none; border:none; cursor:pointer; color:#4b5563; font-size:1rem; padding:2px 4px;
}
.bet-delete-btn:hover{ color:#f87171; }

/* Empty */
.tracker-empty{ text-align:center; padding:40px 0; }

/* FAB */
.tracker-fab{
  position:fixed; bottom:24px; right:20px; width:56px; height:56px;
  border-radius:50%; background:#3b82f6; border:none; color:#fff;
  font-size:1.8rem; line-height:1; cursor:pointer; box-shadow:0 4px 20px rgba(59,130,246,.4);
  display:flex; align-items:center; justify-content:center; z-index:20;
  transition:transform .15s, box-shadow .15s;
}
.tracker-fab:hover{ transform:scale(1.07); box-shadow:0 6px 24px rgba(59,130,246,.5); }

/* Modal */
.tracker-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:30;
}
.tracker-modal{
  position:fixed; bottom:0; left:0; right:0; z-index:40;
  background:#141920; border-radius:20px 20px 0 0;
  border:1px solid rgba(255,255,255,.1); max-height:90vh; overflow-y:auto;
}
@media(min-width:600px){
  .tracker-modal{
    top:50%; left:50%; right:auto; bottom:auto;
    transform:translate(-50%,-50%);
    width:520px; max-height:85vh; border-radius:16px;
  }
}
.tracker-modal-inner{ padding:20px; }
.tracker-modal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.tracker-modal-title{ font-size:1.1rem; font-weight:700; }
.tracker-modal-close{ background:none; border:none; color:#6b7280; font-size:1.5rem; cursor:pointer; line-height:1; }
.tracker-modal-close:hover{ color:#e5e7eb; }

/* Form */
.tracker-form-row{ margin-bottom:14px; }
.tracker-form-row--stake{ margin-top:16px; }
.tracker-form-label{ display:block; font-size:0.78rem; color:#9ca3af; margin-bottom:6px; }
.tracker-input{
  width:100%; background:#0d1117; border:1px solid rgba(255,255,255,.12); border-radius:8px;
  padding:9px 12px; color:#e5e7eb; font-size:0.9rem;
}
.tracker-input:focus{ outline:none; border-color:#3b82f6; }
.tracker-select{
  width:100%; background:#0d1117; border:1px solid rgba(255,255,255,.12); border-radius:8px;
  padding:9px 12px; color:#e5e7eb; font-size:0.85rem;
}
.tracker-select:focus{ outline:none; border-color:#3b82f6; }

/* Type toggle */
.tracker-type-toggle{ display:flex; gap:6px; }
.tracker-type-btn{
  flex:1; padding:7px; background:#0d1117; border:1px solid rgba(255,255,255,.12);
  border-radius:8px; color:#6b7280; font-size:0.85rem; cursor:pointer;
}
.tracker-type-btn--active{ background:#1e3a5f; border-color:#3b82f6; color:#93c5fd; }

/* Leg form */
.leg-form{ background:#0d1117; border:1px solid rgba(255,255,255,.07); border-radius:10px; padding:12px; margin-bottom:10px; }
.leg-form-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.leg-form-num{ font-size:0.75rem; font-weight:600; color:#6b7280; text-transform:uppercase; letter-spacing:.04em; }
.leg-form-row{ display:flex; gap:8px; margin-bottom:8px; }
.leg-form-row:last-child{ margin-bottom:0; }
.leg-form-row .tracker-input{ flex:1; }
.leg-form-row .tracker-select{ width:100%; }
.leg-odds-wrap{ display:flex; flex-direction:column; gap:4px; width:100%; }
.leg-kickoff-wrap{ display:flex; flex-direction:column; gap:4px; width:100%; margin-top:4px; }
.leg-odds-label{ font-size:0.75rem; color:#6b7280; }
.leg-odds-wrap .tracker-input{ max-width:160px; }
input[type="datetime-local"].tracker-input{ color-scheme:dark; }
.leg-remove-btn{
  background:none; border:none; color:#4b5563; font-size:0.78rem; cursor:pointer; padding:0;
}
.leg-remove-btn:hover{ color:#f87171; }

/* Add leg */
.tracker-add-leg-btn{
  width:100%; padding:9px; background:none; border:1px dashed rgba(255,255,255,.15);
  border-radius:8px; color:#6b7280; cursor:pointer; font-size:0.85rem; margin-bottom:14px;
}
.tracker-add-leg-btn:hover{ border-color:#3b82f6; color:#93c5fd; }

/* Payout preview */
.tracker-payout-preview{
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(59,130,246,.08); border:1px solid rgba(59,130,246,.2);
  border-radius:10px; padding:10px 14px; margin-bottom:14px;
}
.tracker-payout-label{ font-size:0.8rem; color:#93c5fd; }
.tracker-payout-num{ font-size:1rem; font-weight:700; color:#60a5fa; }

/* Submit */
.tracker-submit-btn{ width:100%; padding:12px; font-size:1rem; margin-top:4px; }
.tracker-form-error{ margin-top:8px; font-size:0.82rem; }

/* Cards de picks */
.ap-card{
  display: flex;
  align-items: stretch;
  background: #141920;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .15s;
}
.ap-card--win{ border-left: 4px solid #4ade80; }
.ap-card--loss{ border-left: 4px solid #f87171; }
.ap-card--push{ border-left: 4px solid #fbbf24; }
.ap-card--pending{ border-left: 4px solid #60a5fa; }
.ap-card--fav, .ap-card-result-fav{ border-left: 4px solid #a78bfa; }
.ap-card-left{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  min-width: 64px;
}
.ap-badge{
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .5px;
  padding: 4px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}
.ap-badge--win{ background: rgba(74,222,128,.15); color: #4ade80; }
.ap-badge--loss{ background: rgba(248,113,113,.15); color: #f87171; }
.ap-badge--push{ background: rgba(251,191,36,.15); color: #fbbf24; }
.ap-badge--pending{ background: rgba(96,165,250,.12); color: #60a5fa; }
.ap-card-body{
  flex: 1;
  padding: 12px 8px;
  min-width: 0;
}
.ap-card-market{
  font-size: 0.95rem;
  font-weight: 600;
  color: #f3f4f6;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-card-score{
  font-size: 0.8rem;
  color: #9ca3af;
  margin-left: 6px;
  font-weight: 400;
}
.ap-card-teams{
  font-size: 0.8rem;
  color: #9ca3af;
  margin-bottom: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ap-card-chips{ display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.ap-card-chip{
  font-size: 0.68rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  color: #9ca3af;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.ap-chip-tier{ background: rgba(96,165,250,.1); color: #60a5fa; }
.ap-chip-edge{ background: rgba(74,222,128,.1); color: #4ade80; }
.ap-card-when{ font-size: 0.72rem; color: #4b5563; margin-top: 2px; }
.ap-card-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  padding: 10px 12px;
}
.ap-card-link{
  font-size: 0.75rem;
  color: #4ade80;
  text-decoration: none;
  white-space: nowrap;
}
.ap-remove-btn{
  background: none;
  border: none;
  color: #4b5563;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.ap-remove-btn:hover{ color: #f87171; background: rgba(248,113,113,.1); }
@media (max-width: 480px){
  .ap-stats-row{ grid-template-columns: repeat(2, 1fr); }
  .ap-stat-num{ font-size: 1.5rem; }
}
.account-stats{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}
.account-stat-card{
  padding: 16px 12px;
  text-align: center;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.08);
}
.account-stat-label{
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.account-stat-value{
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
}
.account-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.account-actions--sm{
  gap: 6px;
  margin-bottom: 20px;
}
.account-pill--sm{
  font-size: 11px !important;
  padding: 5px 10px !important;
  border-radius: 20px;
}
.carousel-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}
.carousel-btn{
  font-size: 13px;
  padding: 5px 14px;
  min-width: 40px;
}
.carousel-btn:disabled{
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.carousel-page{
  font-size: 12px;
}

/* ── Tracker bar flotante (picks en cola) ── */
.tracker-bar{
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  align-items: center;
  gap: 10px;
  background: #1b2540;
  border: 1px solid rgba(56,189,248,.35);
  border-radius: 40px;
  padding: 10px 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}
.tracker-bar-text{
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.tracker-bar-btn{
  font-size: 12px;
  padding: 5px 14px;
  background: var(--blue);
  color: #000;
  font-weight: 700;
  border-radius: 20px;
  text-decoration: none;
}
.tracker-bar-clear{
  background: none;
  border: none;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
}
.account-action-pill{
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text);
  text-decoration: none;
  font-size: 0.9rem;
  transition: background .15s;
}
.account-action-pill:hover{
  background: rgba(255,255,255,.1);
  color: var(--text);
  text-decoration: none;
}
.account-favorites,
.account-history{
  display: grid;
  gap: 14px;
}

/* =========================
   ACCOUNT — Premium theme (gold accents)
========================= */
.account-page--premium .account-hero-premium{
  background: linear-gradient(145deg, rgba(26,26,32,.95) 0%, rgba(36,32,28,.95) 100%);
  border: 1px solid rgba(212,175,55,.25);
  box-shadow: 0 0 24px rgba(212,175,55,.08), inset 0 1px 0 rgba(255,255,255,.04);
}
.account-page--premium .account-plan-premium{
  color: #d4af37;
}
.account-page--premium .account-premium-badge{
  background: rgba(212,175,55,.2);
  border-color: rgba(212,175,55,.5);
  color: #e8d48a;
  box-shadow: 0 0 12px rgba(212,175,55,.12);
}
.account-page--premium .account-stat-card{
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
}
.account-page--premium .account-pick-card{
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
}
.account-page--premium .account-mini-badge.account-badge-tier-elite,
.account-page--premium .account-mini-badge.account-badge-aftr{
  border-color: rgba(212,175,55,.35);
  background: rgba(212,175,55,.12);
  color: #e8d48a;
}
.account-page--premium .account-header-row{
  border-bottom-color: rgba(212,175,55,.15);
}
.account-page--premium .account-header-home:hover{
  border-color: rgba(212,175,55,.3);
  background: rgba(212,175,55,.08);
}
.account-page--premium .account-action-pill{
  border-color: rgba(255,255,255,.12);
}
.account-page--premium .account-action-pill:hover{
  border-color: rgba(212,175,55,.25);
  background: rgba(212,175,55,.06);
}

/* =========================
   ACCOUNT — Premium Dashboard upgrade
========================= */
.account-hero-card{
  position: relative;
}
.account-hero-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 8px;
}
.account-hero-meta{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.account-type-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(234,242,255,.92);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: .02em;
}
.account-type-pill--premium{
  border-color: rgba(212,175,55,.45);
  background: rgba(212,175,55,.12);
  color: #e8d48a;
  box-shadow: 0 0 16px rgba(212,175,55,.10);
}
.account-type-pill--free{
  color: rgba(234,242,255,.78);
}
.account-hero-summary{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.06);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.account-summary-item{
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
}
.account-summary-label{
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.account-summary-value{
  font-size: 1.15rem;
  font-weight: 900;
  color: rgba(234,242,255,.98);
}

.account-stats-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 720px){
  .account-stats-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .account-hero-summary{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ── Nav favorite team crest ── */
.nav-user-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  transition: background .15s;
}
.nav-user-chip:hover{ background: rgba(255,255,255,.1); }
.nav-fav-crest{
  width: 20px; height: 20px;
  object-fit: contain; flex-shrink: 0;
}
.nav-user-name{ font-size: 13px; font-weight: 600; }

/* ── Hero fav team ── */
.hero-fav-team{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px; font-size: 13px; font-weight: 600;
}
.hero-fav-team--empty{ font-size: 12px; font-weight: 400; }
.hero-fav-crest{ width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
.hero-fav-name{ }
.hero-fav-choose{ color: var(--accent,#38bdf8); text-decoration: none; }

/* ── Team section on home ── */
.team-section-title{
  display: flex; align-items: center; gap: 10px;
}
.team-section-crest{
  width: 28px; height: 28px; object-fit: contain;
}

/* ── Team selector (account page) ── */
.team-selector-wrap{ display: flex; flex-direction: column; gap: 12px; }
.team-current-display{ font-size: 14px; }
.team-search-input{
  width: 100%; box-sizing: border-box;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05);
  color: inherit; font-size: 14px;
  outline: none;
}
.team-search-input:focus{ border-color: rgba(56,189,248,.5); }
.team-grid{
  display: flex; flex-wrap: wrap; gap: 8px;
  max-height: 320px; overflow-y: auto;
}
.team-grid-hint{ font-size: 13px; }
.team-chip{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  cursor: pointer; font-size: 12px; font-weight: 500;
  color: inherit; transition: background .12s, border-color .12s;
}
.team-chip:hover{ background: rgba(255,255,255,.09); border-color: rgba(56,189,248,.4); }
.team-chip.active{
  background: rgba(56,189,248,.15);
  border-color: rgba(56,189,248,.6);
  color: #38bdf8;
}
.team-chip-crest{ width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.team-chip-name{ }
.team-save-msg{ font-size: 13px; padding: 6px 0; }
.team-save-msg--ok{ color: #4ade80; }
.team-save-msg--err{ color: #f87171; }

.account-insights-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.account-insight-card{
  padding: 14px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
}
.account-insight-label{
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.account-insight-value{
  font-size: 1.05rem;
  font-weight: 900;
  color: rgba(234,242,255,.98);
}

.account-activity-list{
  margin-top: 8px;
}
.account-activity-item{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 10px;
}
.account-activity-market{
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(234,242,255,.96);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-activity-date{
  font-size: 0.8rem;
  color: rgba(234,242,255,.7);
  white-space: nowrap;
}

.account-card-link{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  text-decoration: none;
  font-size: 0.78rem;
  transition: background .15s, color .15s, border-color .15s;
}
.account-card-link:hover{
  background: rgba(255,255,255,.1);
  color: var(--text);
  border-color: rgba(255,255,255,.22);
  text-decoration: none;
}

@media (max-width: 480px){
  .account-hero-summary{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =========================
   AFTR PREMIUM LAYER — depth, motion, account identity
========================= */
@keyframes aftr-hero-float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-3px); }
}
@keyframes aftr-gold-glow{
  0%, 100%{ box-shadow: 0 0 20px rgba(212,175,55,.25), 0 0 40px rgba(212,175,55,.08); }
  50%{ box-shadow: 0 0 28px rgba(255,215,120,.35), 0 0 56px rgba(212,175,55,.12); }
}
@keyframes aftr-pulse-dot{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: 0.45; transform: scale(0.92); }
}
@keyframes aftr-stat-pulse{
  0%, 100%{ box-shadow: inset 0 0 24px rgba(56,189,248,.06), 0 0 0 1px rgba(56,189,248,.12); }
  50%{ box-shadow: inset 0 0 32px rgba(56,189,248,.1), 0 0 20px rgba(56,189,248,.08); }
}
@keyframes aftr-section-in{
  from{ opacity: 0; transform: translateY(12px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes aftr-shimmer-slow{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

@media (prefers-reduced-motion: reduce){
  .account-hero-card,
  .account-stat-card--pulse,
  .account-live-dot,
  .account-premium-badge-gold-inner,
  .account-section,
  .account-block--stats,
  .pick.pick-best,
  .account-pick-highlight{
    animation: none !important;
  }
  .card:hover,
  .account-pick-card:hover,
  .account-stat-card:hover,
  .pill:hover,
  .account-card-action:hover,
  .account-action-pill:hover{
    transform: none !important;
    filter: none !important;
  }
}

/* Identity hero */
.account-hero.account-hero-card,
.account-hero-card.account-hero{
  padding: 36px 32px;
  margin-bottom: 28px;
  border-radius: 20px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 90% 80% at 80% 0%, rgba(56, 189, 248, 0.14), transparent 55%),
    radial-gradient(ellipse 70% 60% at 10% 100%, rgba(139, 92, 246, 0.12), transparent 50%),
    linear-gradient(165deg, rgba(22, 28, 42, 0.95) 0%, rgba(12, 16, 26, 0.98) 100%);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    var(--shadow-soft),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 60px rgba(56, 189, 248, 0.06);
  animation: aftr-hero-float 8s ease-in-out infinite;
}
.account-hero-card-shine{
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 120deg at 50% 50%, transparent 0deg, rgba(56,189,248,.06) 60deg, transparent 120deg);
  opacity: 0.5;
  pointer-events: none;
  animation: aftr-hero-float 14s ease-in-out infinite reverse;
}
.account-page--premium .account-hero-card{
  border-color: rgba(212, 175, 55, 0.35);
  box-shadow:
    var(--shadow-soft),
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 1px rgba(212, 175, 55, 0.12),
    0 0 80px rgba(212, 175, 55, 0.12);
  animation: aftr-hero-float 8s ease-in-out infinite, aftr-gold-glow 4s ease-in-out infinite;
}
.account-hero.card:hover{
  transform: translateY(-2px) scale(1.003);
  filter: brightness(1.02);
}
.account-hero-ident{
  position: relative;
  z-index: 1;
}
.account-greeting{
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  margin: 0 0 6px 0;
  text-shadow: 0 2px 24px rgba(0,0,0,.4);
}
.account-email{
  font-size: 0.88rem;
  margin: 0 0 18px 0;
  opacity: 0.85;
}
.account-hero-badge-row{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 8px;
}
.account-created{
  margin: 0;
  font-size: 0.86rem;
}
.account-premium-badge-gold{
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f0d78c, #b8860b 45%, #ffe9a8 100%);
  background-size: 200% 200%;
  animation: aftr-shimmer-slow 6s linear infinite;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.35);
}
.account-premium-badge-gold-inner{
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1408;
  background: linear-gradient(180deg, #fff8e1, #e8c547);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.account-hero-upgrade{
  position: relative;
  z-index: 1;
  margin: 12px 0 0 0;
  font-size: 0.9rem;
}
.account-hero-upgrade-link{
  color: rgba(147, 197, 253, 0.95) !important;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(147, 197, 253, 0.35);
  transition: color .15s, border-color .15s;
}
.account-hero-upgrade-link:hover{
  color: #fff !important;
  border-bottom-color: rgba(255,255,255,.5);
  text-decoration: none;
}
.account-hero-summary{
  position: relative;
  z-index: 1;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.account-summary-item{
  transition: transform .2s var(--ease-out), box-shadow .2s ease, border-color .2s ease;
}
.account-summary-item:hover{
  transform: scale(1.02);
  border-color: rgba(56, 189, 248, 0.2);
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.08);
}
.account-summary-value{
  font-size: 1.22rem;
  font-variant-numeric: tabular-nums;
}
.js-stat-anim{
  font-variant-numeric: tabular-nums;
}

/* Sections hierarchy */
.account-page.account-page-wrapper{
  padding: 28px 16px 48px;
}
.account-block--stats{
  margin-bottom: 8px;
  animation: aftr-section-in 0.55s var(--ease-out) both;
}
.account-section{
  margin-bottom: 40px;
  animation: aftr-section-in 0.5s var(--ease-out) both;
}
.account-section-title{
  font-size: 1.12rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 18px 0;
  color: rgba(234,242,255,.95);
}
.account-section-title-accent{
  background: linear-gradient(90deg, #fff, rgba(180, 220, 255, 0.95));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Stat tiles */
.account-stats{
  margin-bottom: 22px;
}
.account-stat-card{
  position: relative;
  padding: 18px 14px;
  text-align: left;
  border-radius: 14px;
  background: linear-gradient(155deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.02) 50%, rgba(0,0,0,.15) 100%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 24px rgba(0,0,0,.25);
  transition: transform .22s var(--ease-out), box-shadow .22s ease, border-color .2s ease;
  animation: aftr-section-in 0.45s var(--ease-out) both;
}
.account-stats-grid .account-stat-card:nth-child(1){ animation-delay: 0.03s; }
.account-stats-grid .account-stat-card:nth-child(2){ animation-delay: 0.06s; }
.account-stats-grid .account-stat-card:nth-child(3){ animation-delay: 0.09s; }
.account-stats-grid .account-stat-card:nth-child(4){ animation-delay: 0.12s; }
.account-stats-grid .account-stat-card:nth-child(5){ animation-delay: 0.15s; }
.account-stats-grid .account-stat-card:nth-child(6){ animation-delay: 0.18s; }
.account-stats-grid .account-stat-card:nth-child(7){ animation-delay: 0.21s; }
.account-stats-grid .account-stat-card:nth-child(8){ animation-delay: 0.24s; }
.account-stat-card:hover{
  transform: scale(1.02) translateY(-2px);
  border-color: rgba(56, 189, 248, 0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 36px rgba(0,0,0,.35), 0 0 28px rgba(56, 189, 248, 0.1);
}
.account-stat-label{
  font-size: 0.68rem;
  margin-bottom: 8px;
}
.account-stat-value{
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.account-stat-card--pulse{
  animation: aftr-section-in 0.45s var(--ease-out) both, aftr-stat-pulse 3.2s ease-in-out infinite;
  animation-delay: 0s, 0.6s;
}
.account-stats-grid .account-stat-card--pulse:nth-child(6){ animation-delay: 0.18s, 0.6s; }
.account-stats-grid .account-stat-card--pulse:nth-child(7){ animation-delay: 0.21s, 1s; }

/* Pick cards */
.account-pick-card{
  position: relative;
  transition: transform .22s var(--ease-out), box-shadow .22s ease, border-color .2s ease;
  background: linear-gradient(160deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 10px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
}
.account-pick-card:hover{
  transform: scale(1.02);
  border-color: rgba(56, 189, 248, 0.3);
  box-shadow: 0 16px 44px rgba(0,0,0,.38), 0 0 32px rgba(56, 189, 248, 0.12), inset 0 1px 0 rgba(255,255,255,.08);
}
.account-pick-highlight{
  border-color: rgba(234, 179, 8, 0.35);
  box-shadow: 0 10px 36px rgba(0,0,0,.3), 0 0 28px rgba(234, 179, 8, 0.12), inset 0 0 20px rgba(234, 179, 8, 0.05);
}
.account-pick-highlight:hover{
  border-color: rgba(253, 224, 71, 0.45);
  box-shadow: 0 18px 48px rgba(0,0,0,.4), 0 0 40px rgba(234, 179, 8, 0.18);
}
.account-pick-active{
  border-color: rgba(56, 189, 248, 0.22);
}
.account-pick-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.account-pick-head-main{
  min-width: 0;
  flex: 1;
}
.account-pick-open{
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.15);
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
  color: rgba(180,220,255,.95);
  text-decoration: none;
  transition: transform .18s var(--ease-out), box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.account-pick-open:hover{
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(56, 189, 248, 0.4);
  filter: brightness(1.12);
  box-shadow: 0 8px 24px rgba(0,0,0,.35), 0 0 20px rgba(56, 189, 248, 0.15);
  text-decoration: none;
  color: #fff;
}
.account-pick-open-icon{
  display: block;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  margin-left: -2px;
}
.account-live-pulse{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.account-live-dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #facc15;
  box-shadow: 0 0 10px rgba(250, 204, 21, 0.8);
  animation: aftr-pulse-dot 1.4s ease-in-out infinite;
}
.account-status-finished{
  opacity: 0.92;
}
.account-card-action{
  font-weight: 800;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.18), rgba(239, 68, 68, 0.08));
  color: #fecaca !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .18s var(--ease-out), filter .18s ease, box-shadow .18s ease;
}
.account-card-action--warn:hover:not(:disabled){
  transform: translateY(-2px);
  filter: brightness(1.1);
  box-shadow: 0 8px 22px rgba(239, 68, 68, 0.2);
  color: #fff !important;
}
.account-card-link{
  font-weight: 700;
  border-radius: 10px;
  padding: 8px 12px;
  background: linear-gradient(180deg, rgba(56, 189, 248, 0.12), rgba(56, 189, 248, 0.04));
  border-color: rgba(56, 189, 248, 0.25);
}

/* Premium teaser (free users) */
.account-premium-teaser{
  position: relative;
  overflow: hidden;
  padding: 24px 22px;
  margin-bottom: 28px;
  border-radius: 18px;
  border: 1px solid rgba(139, 92, 246, 0.25);
  background: linear-gradient(145deg, rgba(30, 27, 48, 0.95), rgba(18, 22, 36, 0.98));
  box-shadow: 0 12px 40px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
}
.account-premium-teaser-glow{
  position: absolute;
  width: 200px;
  height: 200px;
  right: -60px;
  top: -80px;
  background: radial-gradient(circle, rgba(139, 92, 246, 0.35), transparent 70%);
  pointer-events: none;
}
.account-premium-teaser-title{
  position: relative;
  margin: 0 0 14px 0;
  font-size: 1.15rem;
  font-weight: 900;
}
.account-premium-teaser-list{
  position: relative;
  margin: 0 0 18px 0;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 1.65;
}
.account-premium-teaser-cta{
  position: relative;
  display: inline-block;
  padding: 11px 22px !important;
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  color: #fff !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 24px rgba(79, 70, 229, 0.35);
}

/* Insights + activity */
.account-insight-card{
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .2s ease, box-shadow .2s ease;
}
.account-insight-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
}
.account-insight-value{
  font-size: 1.12rem;
}

/* Account nav pills */
.account-action-pill{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  box-shadow: 0 4px 16px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .18s var(--ease-out), filter .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.account-action-pill:hover{
  transform: translateY(-2px);
  filter: brightness(1.08);
  text-decoration: none;
}

/* Home / picks — best & combos hierarchy */
.pick.pick-best{
  border-color: rgba(234, 179, 8, 0.28);
  box-shadow: inset 0 0 24px rgba(234, 179, 8, 0.06), 0 0 20px rgba(234, 179, 8, 0.08);
  transition: transform .2s var(--ease-out), box-shadow .2s ease;
}
.pick.pick-best:hover{
  transform: scale(1.01);
  box-shadow: inset 0 0 28px rgba(234, 179, 8, 0.1), 0 0 28px rgba(234, 179, 8, 0.12);
}
.combo-card,
.home-premium-combo-card{
  transition: transform .22s var(--ease-out), box-shadow .22s ease, border-color .2s ease;
}
.combo-card:hover,
.home-premium-combo-card:hover{
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(56, 189, 248, 0.22);
  box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 24px rgba(56, 189, 248, 0.08);
}

@media (prefers-reduced-motion: reduce){
  .pick.pick-best:hover,
  .combo-card:hover,
  .home-premium-combo-card:hover{
    transform: none !important;
  }
}

/* =========================
   HOME — polish (hero KPIs, ROI block, bottom hub)
========================= */
.home-hero-kpis{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 20px;
  margin-top: 22px;
  max-width: 420px;
}
@media (min-width: 640px){
  .home-hero-kpis{
    grid-template-columns: repeat(4, minmax(0, 1fr));
    max-width: none;
    gap: 12px 28px;
  }
}
.home-hero-kpi{
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(165deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 8px 24px rgba(0,0,0,.2);
  min-width: 0;
}
.home-hero-kpi span{
  display: block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .72;
}
.home-hero-kpi strong{
  display: block;
  font-size: 1.15rem;
  font-weight: 900;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.home-perf-inner{
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}
.home-perf-chart-wrap.card{
  padding: 20px 18px 18px;
  margin: 0;
}

.home-bottom-hub-section{
  margin-top: 12px;
  margin-bottom: 40px;
}
.home-bottom-hub{
  max-width: 920px;
  margin: 0 auto;
}
.home-bottom-hub-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 720px){
  .home-bottom-hub-grid{
    grid-template-columns: 1fr;
  }
}
.home-hub-card{
  padding: 22px 22px 24px !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  min-height: 100%;
  background: linear-gradient(165deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.06);
}
.home-hub-card--primary{
  border-color: rgba(56, 189, 248, 0.22);
}
.home-hub-card--account{
  border-color: rgba(139, 92, 246, 0.2);
}
.home-hub-eyebrow{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(180, 220, 255, 0.75);
}
.home-hub-title{
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.home-hub-desc{
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.home-hub-perks{
  margin: 4px 0 0 0;
  padding-left: 18px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: rgba(234,242,255,.88);
}
.home-hub-perks--compact{
  list-style: none;
  padding-left: 0;
}
.home-hub-perks--compact li{
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.home-hub-perks--compact li:last-child{
  border-bottom: none;
}
.home-hub-cta{
  margin-top: auto;
  padding: 10px 20px !important;
}
.home-hub-cta-secondary{
  margin-top: auto;
  padding: 9px 18px !important;
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.15) !important;
}
.home-hub-foot{
  margin: 0;
  font-size: 0.8rem;
}
.home-hub-link{
  display: inline-block;
  margin-top: 4px;
  font-size: 0.88rem;
  text-decoration: none;
}
.home-hub-link:hover{
  color: var(--text);
}

/* League dashboard — KPI + ROI contained width */
.league-dash-panel{
  max-width: 920px;
  margin: 0 auto 20px;
  padding: 0 2px;
}
/* KPI strip ahora oculto — JS sigue usándolo internamente */
.league-kpi-hidden{
  display: none !important;
}
.league-kpi-strip{
  margin-bottom: 16px;
}
.league-kpi-grid{
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 520px){
  .league-kpi-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Panel de Rendimiento: 4to tile W/L */
.perf-stat-tile--neutral{
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
}

/* Mercado expandible dentro del panel */
.perf-market-details{
  margin-top: 16px;
  border-top: 1px solid rgba(255,255,255,.07);
  padding-top: 12px;
}
.perf-market-toggle{
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 700;
  color: rgba(234,242,255,.8);
  user-select: none;
}
.perf-market-toggle::-webkit-details-marker{ display: none; }
.perf-market-count{
  font-size: 11px;
  font-weight: 600;
  color: var(--muted,rgba(148,163,184,.65));
  background: rgba(255,255,255,.07);
  padding: 1px 7px;
  border-radius: 999px;
}
.perf-market-chevron{
  margin-left: auto;
  font-size: 16px;
  color: var(--muted,rgba(148,163,184,.5));
  transition: transform .2s ease;
}
.perf-market-details[open] .perf-market-chevron{
  transform: rotate(90deg);
}
.perf-market-rows{
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mkt-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: 13px;
}
.mkt-row:last-child{ border-bottom: none; }
.mkt-row-name{
  flex: 1;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mkt-row-wl{
  font-size: 12px;
  min-width: 52px;
  text-align: center;
}
.mkt-row-wr{
  font-size: 12px;
  min-width: 36px;
  text-align: right;
}
.mkt-row-net{
  font-size: 13px;
  font-weight: 800;
  min-width: 44px;
  text-align: right;
}
.mkt-row-net--pos{ color: #4ade80; }
.mkt-row-net--neg{ color: #f87171; }
.league-roi-panel{
  padding: 18px 16px 16px;
  margin-top: 0;
}
.league-roi-panel .roi-spark-canvas{
  min-height: 160px;
}

/* League — compact mercado grid */
.league-market-section{
  max-width: 720px;
  margin: 28px auto 8px;
  padding: 0 4px;
}
.league-market-title{
  margin-bottom: 8px !important;
}
.league-market-intro{
  margin: 0 0 16px 0;
  font-size: 0.88rem;
  max-width: 36rem;
}
.market-compact-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 540px){
  .market-compact-grid{
    grid-template-columns: 1fr;
  }
}
.market-compact-card{
  padding: 14px 14px 12px !important;
  margin: 0;
}
.market-compact-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.market-compact-name{
  font-weight: 900;
  font-size: 0.88rem;
  line-height: 1.3;
  min-width: 0;
}
.market-compact-net{
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.market-compact-net--pos{ color: #86efac; }
.market-compact-net--neg{ color: #fca5a5; }
.market-compact-meta{
  font-size: 0.72rem;
  margin-bottom: 8px;
  line-height: 1.35;
}
.market-bar--compact{
  height: 10px;
}
.market-compact-empty{
  grid-column: 1 / -1;
  text-align: center;
  padding: 20px;
}

/* Account — recent activity feed cards */
.account-activity-feed-card{
  padding: 12px 14px;
  border-radius: 12px;
  margin-bottom: 10px;
  background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 18px rgba(0,0,0,.18);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.account-activity-feed-card:last-child{
  margin-bottom: 0;
}
.account-activity-feed-card:hover{
  border-color: rgba(56, 189, 248, 0.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 8px 22px rgba(0,0,0,.22);
}
.account-activity-feed-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.account-activity-feed-date{
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(234,242,255,.65);
  white-space: nowrap;
}
.account-activity-feed-market{
  font-size: 0.95rem;
  font-weight: 900;
  color: rgba(234,242,255,.96);
  margin-bottom: 4px;
}
.account-activity-feed-match{
  font-size: 0.82rem;
  line-height: 1.35;
}

/* =========================
   PREMIUM — ROI / performance panel (home + league)
========================= */
.perf-panel-section{
  margin-bottom: 56px;
}
.perf-panel-head{
  margin-bottom: 22px;
}
.perf-panel-head--home .perf-panel-title{
  margin-bottom: 8px;
}
.perf-panel-title{
  margin: 0 0 6px 0;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.perf-panel-sub{
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  max-width: 34rem;
}
.league-perf-block{
  margin-top: 8px;
  margin-bottom: 8px;
}
.perf-panel-glass{
  position: relative;
  border-radius: 18px;
  padding: 22px 20px 20px;
  background:
    linear-gradient(165deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 45%, rgba(8,12,22,.55) 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 16px 48px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.perf-panel-glass::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 48px rgba(56, 189, 248, 0.06);
}
.perf-strip-stats{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}
@media (max-width: 640px){
  .perf-strip-stats{
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 20px;
  }
}
.perf-stat-tile{
  position: relative;
  padding: 16px 14px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.1);
  text-align: center;
  transition: transform 0.25s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)), box-shadow 0.25s ease, border-color 0.25s ease;
}
.perf-stat-tile:hover{
  transform: scale(1.02);
  border-color: rgba(170, 210, 255, 0.22);
  box-shadow: 0 8px 28px rgba(0,0,0,.28), 0 0 24px rgba(56, 189, 248, 0.08);
}
.perf-stat-tile--primary{
  padding-top: 18px;
}
.perf-stat-tile--primary .perf-stat-value{
  font-size: 1.65rem;
}
.perf-stat-tile--pos{
  border-color: rgba(34, 197, 94, 0.28);
  box-shadow: inset 0 0 28px rgba(34, 197, 94, 0.07), 0 0 20px rgba(34, 197, 94, 0.06);
}
.perf-stat-tile--pos:hover{
  box-shadow: 0 8px 28px rgba(0,0,0,.28), 0 0 28px rgba(34, 197, 94, 0.12);
}
.perf-stat-tile--neg{
  border-color: rgba(239, 68, 68, 0.3);
  box-shadow: inset 0 0 28px rgba(239, 68, 68, 0.08), 0 0 18px rgba(239, 68, 68, 0.06);
}
.perf-stat-tile--neg:hover{
  box-shadow: 0 8px 28px rgba(0,0,0,.28), 0 0 26px rgba(239, 68, 68, 0.12);
}
.perf-stat-tile--neutral{
  opacity: 0.92;
}
.perf-stat-tile--flat{
  border-color: rgba(255,255,255,.12);
}
.perf-stat-arrow{
  display: block;
  font-size: 0.95rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
}
.perf-stat-arrow--up{
  color: #4ade80;
  text-shadow: 0 0 14px rgba(74, 222, 128, 0.45);
}
.perf-stat-arrow--down{
  color: #f87171;
  text-shadow: 0 0 14px rgba(248, 113, 113, 0.4);
}
.perf-stat-value{
  display: block;
  font-size: 1.28rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: rgba(234,242,255,.98);
}
.perf-stat-tile--neg .perf-stat-value{
  color: #fecaca;
}
.perf-stat-tile--pos .perf-stat-value{
  color: #d1fae5;
}
.perf-stat-label{
  display: block;
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(234,242,255,.55);
}
.perf-chart-head-inner{
  margin-bottom: 14px;
  padding-top: 4px;
}
.perf-chart-canvas-wrap{
  min-height: 148px;
  border-radius: 12px;
  background: rgba(0,0,0,.12);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 2px 16px rgba(0,0,0,.25);
}
.perf-chart-empty-state{
  padding: 36px 20px 40px;
  text-align: center;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
}
.perf-chart-empty-title{
  margin: 0 0 8px 0;
  font-size: 1rem;
  font-weight: 800;
  color: rgba(234,242,255,.9);
}
.perf-chart-empty-sub{
  margin: 0 auto;
  max-width: 22rem;
  font-size: 0.88rem;
  line-height: 1.5;
}
.home-perf-inner .perf-panel-glass{
  max-width: 680px;
  margin: 0 auto;
}
.home-perf-section .home-perf-intro.perf-panel-sub{
  margin-bottom: 0;
}
.league-perf-chart-shell{
  margin-top: 0;
}
.league-dash-panel .perf-chart-canvas-wrap{
  min-height: 156px;
}

/* Home: perf glass overrides older .home-perf-chart-wrap flat card */
.home-perf-chart-wrap.perf-panel-glass{
  padding: 22px 20px 20px;
  background:
    linear-gradient(165deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.03) 45%, rgba(8,12,22,.55) 100%);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow:
    0 16px 48px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.1),
    inset 0 -1px 0 rgba(0,0,0,.2);
}

@media (prefers-reduced-motion: reduce){
  .perf-stat-tile:hover{
    transform: none;
  }
}

/* =========================
   League carousel (coverflow)
========================= */
.league-carousel-wrap{
  width: 100%;
  max-width: 100%;
}
.home-carousel-strip{
  position: relative;
  z-index: 2;
  margin: 0 0 18px;
  padding: 0 12px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.home-header-inicio{
  font-size: 13px;
  font-weight: 800;
  color: rgba(234,242,255,.72);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.1);
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.home-header-inicio:hover{
  color: rgba(234,242,255,.95);
  border-color: rgba(170,210,255,.28);
  background: rgba(255,255,255,.04);
}
/* League dashboard: carousel needs full row width (same effective width as home strip). */
.top.top-pro.top-pro--with-carousel{
  flex-wrap: wrap;
}
.top-pro--with-carousel .top-actions--carousel{
  flex: 1 1 100%;
  min-width: 0;
  max-width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 100%;
}
.top-pro--with-carousel .top-actions--carousel .links{
  justify-content: center;
  flex-wrap: wrap;
}

.league-carousel-fallback--scroll{
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 4px 14px;
  scroll-snap-type: x proximity;
}
.league-carousel-fallback__link{
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 72px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: var(--text);
  text-decoration: none;
  font-size: 11px;
  font-weight: 800;
  scroll-snap-align: start;
}
.league-carousel-fallback__link img{
  border-radius: 10px;
  object-fit: contain;
}

.league-carousel{
  --cc-shift: clamp(56px, 20vw, 120px);
  --lc-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --lc-dur: 0.45s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  padding: 8px 0 16px;
  background: linear-gradient(180deg, rgba(6,10,18,.92) 0%, rgba(8,12,22,.55) 50%, transparent 100%);
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.league-carousel--home{
  padding-top: 14px;
  padding-bottom: 20px;
}

.league-carousel__arrow{
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(234,242,255,.9);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s var(--lc-ease), border-color .2s ease, opacity .2s ease;
}
.league-carousel__arrow:hover:not(:disabled){
  background: rgba(120,170,255,.12);
  border-color: rgba(170,210,255,.35);
}
.league-carousel__arrow:disabled{
  opacity: 0.28;
  cursor: default;
}

.league-carousel__viewport{
  flex: 1 1 auto;
  min-width: 0;
  height: 185px;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.league-carousel__viewport::-webkit-scrollbar{ display: none; }
.league-carousel__viewport:active{ cursor: grabbing; }

.league-carousel__track{
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 100%;
}

/* No-JS fallback: plain horizontal scroll */
.league-carousel:not(.league-carousel--ready) .league-carousel__viewport{
  overflow-x: auto;
  cursor: auto;
}
.league-carousel:not(.league-carousel--ready) .league-carousel__track{
  padding: 4px 8px;
}
.league-carousel:not(.league-carousel--ready) .league-carousel__item{
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
}
.league-carousel:not(.league-carousel--ready) .league-carousel__glow{
  opacity: 0 !important;
}
.league-carousel:not(.league-carousel--ready) .league-carousel__arrow{
  display: none;
}

.league-carousel__item{
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: transparent;
  padding: 0 6px;
  cursor: pointer;
  flex: 0 0 auto;
  position: relative;
  scroll-snap-align: center;
  will-change: transform, opacity;
  transition:
    transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    opacity   0.38s ease,
    filter    0.38s ease;
}

/* Distance classes — scale depth + tilt suave (sin rotateY extremo que hace items invisibles) */
.league-carousel--ready .league-carousel__item--d0{
  transform: scale(1.14);
  opacity: 1;
  filter: none;
  z-index: 10;
  animation: carousel-item-float 3.8s ease-in-out infinite;
}
.league-carousel--ready .league-carousel__item--dn1{
  transform: perspective(900px) rotateY(16deg) scale(0.86);
  opacity: 0.70;
  filter: none;
  z-index: 5;
}
.league-carousel--ready .league-carousel__item--dp1{
  transform: perspective(900px) rotateY(-16deg) scale(0.86);
  opacity: 0.70;
  filter: none;
  z-index: 5;
}
.league-carousel--ready .league-carousel__item--dn2{
  transform: perspective(900px) rotateY(26deg) scale(0.70);
  opacity: 0.40;
  filter: blur(0.5px);
  z-index: 2;
}
.league-carousel--ready .league-carousel__item--dp2{
  transform: perspective(900px) rotateY(-26deg) scale(0.70);
  opacity: 0.40;
  filter: blur(0.5px);
  z-index: 2;
}
.league-carousel--ready .league-carousel__item--far{
  transform: perspective(900px) rotateY(35deg) scale(0.55);
  opacity: 0.18;
  filter: blur(1px);
  pointer-events: none;
}

@keyframes carousel-item-float{
  0%,100%{ transform: scale(1.14) translateY(0); }
  50%     { transform: scale(1.14) translateY(-5px); }
}

.league-carousel__card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 14px 10px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  position: relative;
  min-width: 92px;
  transition: border-color var(--lc-dur) var(--lc-ease), box-shadow var(--lc-dur) var(--lc-ease);
}
.league-carousel__item--d0 .league-carousel__card{
  border-color: rgba(120,200,255,.65);
  background: linear-gradient(165deg, rgba(56,189,248,.18), rgba(139,92,246,.10));
  box-shadow:
    0 16px 48px rgba(0,0,0,.55),
    0 0 0 1px rgba(120,200,255,.35),
    0 0 40px rgba(56,189,248,.35),
    inset 0 1px 0 rgba(255,255,255,.18);
}

.league-carousel__glow{
  position: absolute;
  inset: -12px;
  border-radius: 26px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(56,189,248,.55) 0%,
    rgba(139,92,246,.25) 50%,
    transparent 72%
  );
  filter: blur(12px);
  transition: opacity var(--lc-dur) var(--lc-ease);
}
.league-carousel__item--d0 .league-carousel__glow{
  opacity: 1;
  animation: carousel-glow-pulse 2.8s ease-in-out infinite alternate;
}
@keyframes carousel-glow-pulse{
  0%  { opacity: 0.75; }
  100%{ opacity: 1; filter: blur(16px); }
}

.league-carousel__logo{
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 12px;
  display: block;
}
.league-carousel__logo-fallback{
  display: none;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  font-size: 22px;
  font-weight: 900;
  color: rgba(234,242,255,.85);
}
.league-carousel__name{
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  max-width: 100px;
  line-height: 1.2;
  color: rgba(234,242,255,.88);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.league-carousel__item--d0 .league-carousel__name{
  color: rgba(234,242,255,.98);
}

@media (max-width: 520px){
  .league-carousel__arrow{
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
  .league-carousel__card{
    min-width: 80px;
    padding: 10px 10px 8px;
  }
  .league-carousel__logo,
  .league-carousel__logo-fallback{
    width: 48px;
    height: 48px;
  }
}

@media (prefers-reduced-motion: reduce){
  .league-carousel__item{
    transition-duration: 0.01ms;
    animation: none !important;
  }
  .league-carousel__glow,
  .league-carousel__card{
    transition-duration: 0.01ms;
    animation: none !important;
  }
  .hero-art__frame{
    animation: none !important;
    transform: perspective(900px) rotateY(-18deg) rotateX(6deg);
  }
  .hero-art__glow{
    animation: none !important;
  }
}

/* =========================
   Home: drum/wheel 3D carousel
   Items sit on a cylinder; track spins to bring active item front-centre.
   Dashboard coverflow unchanged (.league-carousel without --3d)
========================= */

/* ── Wrapper ─────────────────────────────────────────────────────────── */
.league-carousel.league-carousel--3d{
  display: block;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 4px 0 8px;
  background: linear-gradient(180deg, rgba(10,14,24,.9) 0%, rgba(8,12,20,.5) 100%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 48px rgba(0,0,0,.35);
  user-select: none;
  -webkit-user-select: none;
}
.home-carousel-strip .league-carousel--3d{
  max-width: 100%;
}


/* =========================
   Live Match Center
========================= */
.live-header{
  justify-content: center;
}
.live-header-inner{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.live-back-link{
  font-size: 13px;
  font-weight: 900;
}

.live-matchbar{
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-width: 0;
}
.live-team{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.live-team-name{
  font-size: 13px;
  font-weight: 900;
  text-align: center;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.live-scorecol{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.live-score{
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.live-minute-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.live-minute{
  font-size: 12px;
  font-weight: 900;
  color: rgba(234,242,255,.78);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.live-live-badge{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.02em;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(239,68,68,.25);
  background: rgba(239,68,68,.12);
  color: #fda4af;
  box-shadow: 0 0 24px rgba(239,68,68,.10);
}
.live-header-right{
  flex: 0 0 auto;
}
.live-watch-hint{
  padding: 8px 14px !important;
}

.live-tabs{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 6px 0 16px;
}
.live-tab{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
  transition: filter .15s ease, transform .12s ease, border-color .15s ease, background .15s ease;
}
.live-tab:hover{
  filter: brightness(1.08);
}
.live-tab--active{
  background: rgba(120,180,255,.10);
  border-color: rgba(170,210,255,.35);
  box-shadow: 0 0 0 6px rgba(56,189,248,.06);
}

.live-panel{
  margin-top: 10px;
}
.live-panel--active{
  display: block;
}

.live-main-card{
  padding: 16px 16px 18px;
}
.live-main-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.live-main-kicker{
  font-size: 12px;
  font-weight: 900;
  color: rgba(180,220,255,.95);
}
.live-trend-badge{
  font-size: 11px;
  font-weight: 900;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  white-space: nowrap;
}
.live-trend-up{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
  color: #86efac;
}
.live-trend-dn{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.12);
  color: #fda4af;
}

.live-main-metrics{
  margin-top: 12px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.live-metric{
  flex: 1 1 170px;
  min-width: 0;
  padding: 12px 12px;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.live-metric-label{
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
}
.live-metric-value{
  margin-top: 6px;
  font-size: 20px;
  font-weight: 900;
  color: rgba(234,242,255,.98);
}

.live-reasons{
  margin: 14px 0 0;
  padding-left: 18px;
}
.live-reasons li{
  margin: 8px 0;
  font-weight: 800;
  color: rgba(234,242,255,.86);
  font-size: 13px;
}

.live-actions{
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}
.live-watch-btn{
  padding: 10px 18px;
}

.live-h2{
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 900;
  color: rgba(234,242,255,.95);
}

.live-timeline{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.live-timeline-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.live-timeline-side{
  width: 10px;
  height: 34px;
  border-radius: 999px;
  flex: 0 0 auto;
  margin-top: 4px;
  background: rgba(255,255,255,.15);
}
.live-timeline-side--home{
  background: rgba(56,189,248,.65);
  box-shadow: 0 0 22px rgba(56,189,248,.20);
}
.live-timeline-side--away{
  background: rgba(239,68,68,.65);
  box-shadow: 0 0 22px rgba(239,68,68,.18);
}
.live-timeline-minute{
  flex: 0 0 auto;
  font-weight: 900;
  font-size: 12px;
  color: rgba(234,242,255,.70);
  min-width: 64px;
}
.live-timeline-text{
  font-weight: 800;
  font-size: 13px;
  color: rgba(234,242,255,.88);
}

.live-stat-row{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
}
.live-stat-label{
  flex: 0 0 auto;
  width: 150px;
  font-size: 12px;
  font-weight: 900;
  color: var(--muted);
}
.live-comparebar{
  flex: 1 1 auto;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  overflow: hidden;
  display: flex;
}
.live-comparebar-home{
  height: 100%;
  background: linear-gradient(90deg, rgba(56,189,248,.95), rgba(120,180,255,.55));
}
.live-comparebar-away{
  height: 100%;
  background: linear-gradient(90deg, rgba(239,68,68,.95), rgba(244,114,182,.45));
}
.live-stat-values{
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  color: rgba(234,242,255,.72);
  white-space: nowrap;
}
.live-muted{
  color: rgba(234,242,255,.72);
  opacity: 0.9;
  margin: 0 6px;
}

.live-pick-block{
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(255,255,255,.10);
}
.live-pick-block:last-child{
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.live-pick-title{
  font-size: 13px;
  font-weight: 900;
  color: rgba(234,242,255,.92);
  margin-bottom: 12px;
}
.live-pick-row{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.live-pick-market{
  font-weight: 900;
  font-size: 14px;
  color: rgba(234,242,255,.98);
}
.live-pick-prob{
  font-weight: 900;
  font-size: 12px;
  color: rgba(234,242,255,.72);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255,255,255,.03);
}
.live-pick-badge{
  font-size: 11px;
  font-weight: 900;
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(234,242,255,.92);
}
.live-pick-badge--win{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.12);
  color: #86efac;
}
.live-pick-badge--watch{
  border-color: rgba(56,189,248,.35);
  background: rgba(56,189,248,.12);
  color: #7dd3fc;
}
.live-pick-badge--weak{
  border-color: rgba(234,179,8,.35);
  background: rgba(234,179,8,.12);
  color: #fde68a;
}
.live-live-opps{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.live-opportunity{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.live-op-market{
  font-weight: 900;
  color: rgba(234,242,255,.95);
}
.live-op-row{
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.live-h2h-table{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.live-h2h-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}
.live-h2h-season{
  font-weight: 900;
  color: rgba(234,242,255,.84);
}
.live-h2h-score{
  font-weight: 900;
  color: rgba(234,242,255,.95);
}

@media (max-width: 640px){
  .live-matchbar{
    gap: 10px;
  }
  .live-team-name{
    max-width: 110px;
  }
  .live-stat-row{
    flex-direction: column;
    align-items: flex-start;
  }
  .live-stat-label{
    width: auto;
  }
}
/* =========================
   Pick card stagger fade-in
========================= */
@keyframes card-stagger-in{
  from{ opacity:0; transform:translateY(14px); }
  to  { opacity:1; transform:translateY(0); }
}
.card-stagger{
  animation: card-stagger-in 0.38s ease both;
}

/* =========================
   Skeleton loader
========================= */
@keyframes skel-shimmer{
  0%  { background-position: -400px 0; }
  100%{ background-position:  400px 0; }
}
.skel-overlay{
  position: absolute;
  inset: 0;
  z-index: 40;
  background: var(--bg, #0b0f14);
  padding: 12px 0;
}
.skel-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  padding: 0 16px;
}
.skel-card{
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.03);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skel-line,
.skel-dot,
.skel-vs,
.skel-gauge,
.skel-badge{
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.05) 0%,
    rgba(255,255,255,.10) 40%,
    rgba(255,255,255,.05) 80%
  );
  background-size: 800px 100%;
  animation: skel-shimmer 1.4s linear infinite;
}
.skel-line      { height: 11px; border-radius: 999px; width: 100%; }
.skel-line--sm  { height: 9px; }
.skel-line--md  { height: 13px; }
.skel-teams{
  display: flex;
  align-items: center;
  gap: 8px;
}
.skel-team      { display:flex; align-items:center; gap:6px; flex:1; }
.skel-dot       { width:28px; height:28px; border-radius:50%; flex-shrink:0; }
.skel-vs        { width:18px; height:11px; border-radius:4px; flex-shrink:0; }
.skel-gauge     { width:58px; height:58px; border-radius:50%; margin: 0 auto; }
.skel-badges    { display:flex; gap:6px; }
.skel-badge     { height:22px; width:54px; border-radius:999px; }

@media (prefers-reduced-motion: reduce){
  .skel-line,.skel-dot,.skel-vs,.skel-gauge,.skel-badge{
    animation: none;
    background: rgba(255,255,255,.07);
  }
  .card-stagger{ animation: none; }
}

/* ==============================================
   LC3D — Home carousel 3D coverflow
   Perspectiva compartida en el stage; JS posiciona
   cada item via transform (no scroll-snap).
============================================== */
.lc3d{
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 8px 18px;
  background: linear-gradient(180deg, rgba(10,14,26,.95) 0%, rgba(8,12,20,.55) 100%);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 20px 60px rgba(0,0,0,.40);
  user-select: none;
  -webkit-user-select: none;
}
.home-carousel-strip .lc3d{
  max-width: 100%;
}

/* Arrows */
.lc3d__prev,
.lc3d__next{
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(234,242,255,.9);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, border-color .2s ease;
  flex-shrink: 0;
}
.lc3d__prev:hover,
.lc3d__next:hover{
  background: rgba(56,189,248,.14);
  border-color: rgba(56,189,248,.40);
}

/* Stage — perspectiva compartida para verdadero 3D */
.lc3d__stage{
  flex: 1 1 auto;
  position: relative;
  height: 178px;
  perspective: 900px;
  perspective-origin: 50% 50%;
  overflow: hidden;
}
/* Spotlight detrás del item activo */
.lc3d__stage::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,.10) 0%, transparent 72%);
  pointer-events: none;
  z-index: 0;
}

/* Items — absolute centrados; JS mueve con transform */
.lc3d__item{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -52px;   /* -half(104px card width) */
  margin-top:  -54px;   /* -half(108px card height) */
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  /* Transition-property y timing en CSS; duración la pone el JS */
  transition-property: transform, opacity, filter;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1), ease, ease;
  transition-duration: 0s;
}

/* Card visual */
.lc3d__card{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(165deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: 0 8px 28px rgba(0,0,0,.35);
  width: 104px;
  position: relative;
  transition: border-color .45s ease, box-shadow .45s ease, background .45s ease;
}
.lc3d__item--active .lc3d__card{
  border-color: rgba(56,189,248,.70);
  background: linear-gradient(165deg, rgba(56,189,248,.20), rgba(139,92,246,.10));
  box-shadow:
    0 18px 52px rgba(0,0,0,.55),
    0 0 0 1px rgba(56,189,248,.30),
    0 0 44px rgba(56,189,248,.32),
    inset 0 1px 0 rgba(255,255,255,.18);
}

/* Glow tras la card activa */
.lc3d__glow{
  position: absolute;
  inset: -14px;
  border-radius: 26px;
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(56,189,248,.55) 0%,
    rgba(139,92,246,.25) 52%,
    transparent 74%
  );
  filter: blur(16px);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.lc3d__item--active .lc3d__glow{
  opacity: 1;
  animation: lc3d-glow-pulse 2.6s ease-in-out infinite alternate;
}
@keyframes lc3d-glow-pulse{
  0%  { opacity: 0.72; filter: blur(14px); }
  100%{ opacity: 1;    filter: blur(20px); }
}

/* Logo */
.lc3d__logo{
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}
.lc3d__logo-fallback{
  display: none;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255,255,255,.08);
  font-size: 22px;
  font-weight: 900;
  color: rgba(234,242,255,.85);
}
.lc3d__name{
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .03em;
  text-align: center;
  color: rgba(234,242,255,.82);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
  line-height: 1.2;
}
.lc3d__item--active .lc3d__name{
  color: rgba(234,242,255,.98);
}

/* reduced-motion */
@media (prefers-reduced-motion: reduce){
  .lc3d__item{ transition: none !important; }
  .hero-art__frame{ animation: none !important; transform: perspective(900px) rotateY(-18deg) rotateX(6deg); }
  .hero-art::before{ animation: none !important; }
  .lc3d__item--active .lc3d__glow{ animation: none !important; }
}

/* Mobile */
@media (max-width: 520px){
  .lc3d__prev,.lc3d__next{ width: 32px; height: 32px; font-size: 17px; }
  .lc3d__stage{ height: 160px; }
  .lc3d__card{ width: 90px; padding: 12px 12px 10px; }
  .lc3d__logo,.lc3d__logo-fallback{ width: 48px; height: 48px; }
  .lc3d__item{ margin-left: -45px; margin-top: -48px; }
}

/* =========================
   MATCH DETAIL DRAWER
========================= */
.match-drawer{
  position:fixed;inset:0;z-index:9000;pointer-events:none;
  display:flex;justify-content:flex-end;
}
.match-drawer.open{pointer-events:all;}
.match-drawer-overlay{
  position:absolute;inset:0;background:rgba(0,0,0,0);
  transition:background .3s ease;
}
.match-drawer.open .match-drawer-overlay{background:rgba(0,0,0,.6);}
.match-drawer-panel{
  position:relative;width:min(480px,100vw);height:100%;
  background:#0d1117;border-left:1px solid rgba(255,255,255,.1);
  transform:translateX(100%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  overflow-y:auto;display:flex;flex-direction:column;
}
.match-drawer.open .match-drawer-panel{transform:translateX(0);}
@media(max-width:600px){
  .match-drawer{align-items:flex-end;}
  .match-drawer-panel{
    width:100%;height:92vh;border-left:none;
    border-top:1px solid rgba(255,255,255,.12);
    border-radius:18px 18px 0 0;
    transform:translateY(100%);
  }
  .match-drawer.open .match-drawer-panel{transform:translateY(0);}
}
.match-drawer-top{
  display:flex;justify-content:flex-end;padding:14px 16px 0;flex-shrink:0;
}
.match-drawer-close{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  color:rgba(234,242,255,.75);width:32px;height:32px;border-radius:50%;
  font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .2s;
}
.match-drawer-close:hover{background:rgba(255,255,255,.14);}
.match-drawer-body{padding:0 18px 32px;flex:1;}
.md-loading{padding:40px 0;text-align:center;color:var(--muted);font-size:14px;}
/* Content */
.md-content{display:flex;flex-direction:column;}
.md-header{
  padding:12px 0 16px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:4px;
}
.md-header-league{
  font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);margin-bottom:10px;
}
.md-header-teams{display:flex;align-items:center;gap:8px;}
.md-header-team{
  display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0;
}
.md-header-name{
  font-size:13px;font-weight:700;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100px;
}
.md-header-vs{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;}
.md-vs-label{font-size:11px;color:var(--muted);font-weight:500;}
.md-header-kickoff{
  font-size:11px;font-weight:700;color:rgba(56,189,248,.9);
  background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.2);
  padding:2px 8px;border-radius:5px;
}
.md-crest-lg{width:32px;height:32px;object-fit:contain;}
.md-crest-sm{width:16px;height:16px;object-fit:contain;flex-shrink:0;}
/* Tabs */
.md-tabs{
  display:flex;gap:4px;padding:12px 0 0;
  border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:16px;
}
.md-tab{
  flex:1;padding:8px 4px;border:none;background:none;
  color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;
  border-bottom:2px solid transparent;transition:color .2s,border-color .2s;
}
.md-tab.active{color:#38bdf8;border-bottom-color:#38bdf8;}
.md-tab:hover:not(.active){color:rgba(234,242,255,.75);}
.md-panel--hidden{display:none!important;}
/* Forma */
.md-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:420px){.md-form-grid{grid-template-columns:1fr;}}
.md-form-col{display:flex;flex-direction:column;gap:8px;}
.md-form-name{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;}
.md-form-dots{display:flex;gap:3px;flex-wrap:wrap;}
.form-dot{
  width:22px;height:22px;border-radius:5px;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;
}
.form-dot--w{background:rgba(34,197,94,.25);color:#4ade80;}
.form-dot--d{background:rgba(234,179,8,.2);color:#fbbf24;}
.form-dot--l{background:rgba(239,68,68,.2);color:#f87171;}
.form-dot--u{background:rgba(255,255,255,.07);color:var(--muted);}
.md-form-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
.md-stat{
  background:rgba(255,255,255,.04);border-radius:7px;
  padding:6px 8px;display:flex;flex-direction:column;gap:1px;
}
.md-stat-lbl{font-size:10px;color:var(--muted);font-weight:600;}
.md-stat-val{font-size:14px;font-weight:800;}
.md-recent{display:flex;flex-direction:column;gap:3px;margin-top:4px;}
.md-recent-row{
  display:flex;align-items:center;gap:4px;font-size:11px;
  padding:3px 0;border-bottom:1px solid rgba(255,255,255,.04);
}
.md-recent-row:last-child{border-bottom:none;}
.md-recent-loc{font-size:10px;color:var(--muted);min-width:10px;}
.md-recent-opp{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.md-recent-score{font-weight:700;font-size:11px;flex-shrink:0;}
.md-res{font-size:10px;font-weight:800;min-width:14px;text-align:right;}
.md-res--w{color:#4ade80;} .md-res--d{color:#fbbf24;} .md-res--l{color:#f87171;}
/* Predicción */
.md-pred-hero{
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:14px;margin-bottom:14px;
}
.md-pred-market{font-size:16px;font-weight:800;margin-bottom:10px;}
.md-pred-row{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
.md-pred-kv{display:flex;flex-direction:column;gap:2px;}
.md-pred-k{font-size:10px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.03em;}
.md-pred-v{font-size:15px;font-weight:800;}
.md-pred-edge--pos{color:#4ade80;} .md-pred-edge--neg{color:#f87171;}
.md-xg-row{display:flex;gap:8px;margin-bottom:14px;margin-top:14px;}
.md-xg-block{
  flex:1;background:rgba(255,255,255,.04);border-radius:8px;
  padding:8px;display:flex;flex-direction:column;align-items:center;gap:2px;
}
.md-xg-val{font-size:18px;font-weight:900;}
.md-xg-lbl{font-size:10px;color:var(--muted);font-weight:600;}
.md-probs{display:flex;flex-direction:column;gap:7px;}
.md-prob-row{display:flex;align-items:center;gap:8px;}
.md-prob-lbl{font-size:12px;min-width:100px;color:rgba(234,242,255,.75);}
.md-prob-bar{flex:1;height:5px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden;}
.md-prob-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#2563eb,#38bdf8);}
.md-prob-val{font-size:12px;font-weight:700;min-width:36px;text-align:right;}
/* Tabla */
.md-table-wrap{overflow-x:auto;}
.md-table{width:100%;border-collapse:collapse;font-size:12px;}
.md-table th{
  padding:6px 4px;text-align:center;font-size:10px;font-weight:700;
  color:var(--muted);text-transform:uppercase;border-bottom:1px solid rgba(255,255,255,.08);
}
.md-table th:nth-child(2){text-align:left;}
.md-table td{
  padding:6px 4px;text-align:center;border-bottom:1px solid rgba(255,255,255,.04);
}
.md-table tbody tr:last-child td{border-bottom:none;}
.md-td-team{display:flex;align-items:center;gap:5px;text-align:left;min-width:90px;}
.md-table-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px;}
.md-td-pos{font-weight:700;font-size:11px;color:var(--muted);min-width:18px;}
.md-td-gd{font-weight:700;}
.md-td-pts{font-weight:900;font-size:13px;}
.md-table-row--home td{background:rgba(34,197,94,.07);}
.md-table-row--away td{background:rgba(56,189,248,.06);}
.md-table-row--home .md-table-name,.md-table-row--home .md-td-pts{color:#4ade80;}

/* ── Win Celebration ──────────────────────────────────────── */
.win-cel-overlay{
  position:fixed;inset:0;z-index:10000;
  background:rgba(0,0,0,.88);
  display:flex;align-items:center;justify-content:center;
  animation:winFadeIn .3s ease;
}
.win-cel-overlay.win-cel-exit{animation:winFadeOut .38s ease forwards;}
@keyframes winFadeIn{from{opacity:0}to{opacity:1}}
@keyframes winFadeOut{from{opacity:1}to{opacity:0}}
.win-cel-box{
  background:linear-gradient(160deg,#052e16 0%,#0d3321 55%,#111827 100%);
  border:1.5px solid rgba(74,222,128,.45);
  border-radius:22px;
  padding:32px 24px 28px;
  text-align:center;
  max-width:360px;
  width:calc(100vw - 32px);
  position:relative;
  z-index:1;
  box-shadow:0 0 80px rgba(74,222,128,.18),0 20px 60px rgba(0,0,0,.5);
  animation:winPop .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes winPop{
  from{transform:scale(.8) translateY(20px);opacity:0}
  to{transform:scale(1) translateY(0);opacity:1}
}
.win-cel-emoji{font-size:3.5rem;line-height:1;margin-bottom:10px;}
.win-cel-title{font-size:1.9rem;font-weight:800;color:#4ade80;letter-spacing:-1px;margin-bottom:4px;}
.win-cel-subtitle{font-size:.85rem;color:#6b7280;margin-bottom:20px;}
.win-cel-picks{text-align:left;margin-bottom:22px;}
.win-cel-pick{
  display:flex;align-items:flex-start;gap:10px;
  padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);
  font-size:.87rem;color:#d1d5db;line-height:1.4;
}
.win-cel-pick:last-child{border-bottom:none;}
.win-cel-check{color:#4ade80;font-size:1rem;font-weight:700;flex-shrink:0;margin-top:2px;}
.win-cel-teams{color:#9ca3af;}
.win-cel-score{color:#4ade80;font-weight:700;margin-left:4px;}
.win-cel-btn{
  background:#4ade80;color:#000;border:none;
  border-radius:12px;padding:13px 0;
  font-size:.95rem;font-weight:700;cursor:pointer;
  width:100%;transition:background .15s,transform .1s;
}
.win-cel-btn:hover{background:#22c55e;}
.win-cel-btn:active{transform:scale(.97);}
.win-cel-foot{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:4px;}
.win-cel-share{
  background:rgba(255,255,255,.08);color:var(--text);
  border:1px solid rgba(255,255,255,.18);border-radius:12px;
  padding:11px 22px;font-size:.88rem;font-weight:600;cursor:pointer;
  transition:background .18s;
}
.win-cel-share:hover{background:rgba(255,255,255,.14);}

/* ── Share modal ────────────────────────────────────────── */
.aftr-share-overlay{
  position:fixed;inset:0;z-index:9500;
  background:rgba(0,0,0,.72);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
  animation:winFadeIn .22s ease;
}
.aftr-share-box{
  background:#0e1420;border:1px solid rgba(56,189,248,.22);
  border-radius:18px;padding:22px;
  width:min(520px,94vw);
  box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.aftr-share-head{
  display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;
}
.aftr-share-title{font-weight:700;font-size:.95rem;}
.aftr-share-x{
  background:none;border:none;color:var(--muted);font-size:1.1rem;
  cursor:pointer;padding:4px 8px;border-radius:6px;
}
.aftr-share-x:hover{background:rgba(255,255,255,.08);}
.aftr-share-preview{
  border-radius:10px;overflow:hidden;margin-bottom:16px;
  box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.aftr-share-actions{display:flex;gap:10px;}
.aftr-share-btn{
  flex:1;padding:11px 16px;border-radius:10px;font-size:.88rem;
  font-weight:700;cursor:pointer;border:none;transition:filter .18s;
}
.aftr-share-btn--dl{
  background:rgba(255,255,255,.07);color:var(--text);
  border:1px solid rgba(255,255,255,.14);
}
.aftr-share-btn--dl:hover{filter:brightness(1.15);}
.aftr-share-btn--native{
  background:var(--blue);color:#000;
  box-shadow:0 0 14px rgba(56,189,248,.3);
}
.aftr-share-btn--native:hover{filter:brightness(1.1);}

/* share btn on ap-card */
.ap-share-btn{
  background:rgba(56,189,248,.1);color:var(--blue);
  border:1px solid rgba(56,189,248,.2);border-radius:7px;
  padding:5px 10px;font-size:.8rem;cursor:pointer;
  transition:background .18s;margin-bottom:4px;display:block;width:100%;
}
.ap-share-btn:hover{background:rgba(56,189,248,.2);}
.win-cel-confetti{
  position:absolute;inset:0;overflow:hidden;
  pointer-events:none;border-radius:22px;
}
.win-confetti-dot{
  position:absolute;top:-12px;
  animation:confettiFall linear forwards;
}
@keyframes confettiFall{
  0%{transform:translateY(0) rotate(0deg);opacity:1}
  80%{opacity:.9}
  100%{transform:translateY(130vh) rotate(800deg);opacity:0}
}

/* ── Onboarding modal ──────────────────────────────────── */
.onb-overlay{
  position:fixed;inset:0;z-index:8500;
  background:rgba(0,0,0,.65);
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
  animation:winFadeIn .3s ease;
}
.onb-box{
  background:#0d1220;
  border:1px solid rgba(56,189,248,.2);
  border-radius:20px;padding:32px 28px 24px;
  width:min(420px,92vw);
  box-shadow:0 24px 64px rgba(0,0,0,.6),0 0 0 1px rgba(56,189,248,.07);
  position:relative;
}
@keyframes onbStepIn{
  from{opacity:0;transform:translateY(10px);}
  to{opacity:1;transform:translateY(0);}
}
.onb-step-in{animation:onbStepIn .25s var(--ease-out);}
.onb-icon{font-size:2.4rem;margin-bottom:12px;}
.onb-title{
  font-size:1.25rem;font-weight:800;margin:0 0 10px;color:var(--text);
}
.onb-body{
  font-size:.9rem;color:var(--muted);line-height:1.6;margin:0 0 24px;
}
.onb-team-link{
  display:inline-block;margin-top:4px;
  color:var(--blue);font-weight:600;
  text-decoration:none;
}
.onb-team-link:hover{text-decoration:underline;}
.onb-footer{
  display:flex;align-items:center;gap:16px;
}
.onb-dots{display:flex;gap:6px;flex:1;}
.onb-dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.2);transition:background .2s;
}
.onb-dot--active{background:var(--blue);}
.onb-cta{
  background:var(--blue);color:#000;font-weight:700;
  padding:10px 22px;font-size:.9rem;
  box-shadow:0 0 14px rgba(56,189,248,.3);
}
.onb-cta:hover{filter:brightness(1.1);}
.onb-skip{
  position:absolute;top:16px;right:16px;
  background:none;border:none;color:var(--muted);
  font-size:.78rem;cursor:pointer;padding:4px 8px;border-radius:6px;
}
.onb-skip:hover{background:rgba(255,255,255,.06);color:var(--text);}

/* ── Bankroll ──────────────────────────────────────────── */
.account-section-badge{
  font-size:.65rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  background:rgba(56,189,248,.15);color:var(--blue);
  border:1px solid rgba(56,189,248,.25);border-radius:5px;
  padding:2px 7px;margin-left:8px;vertical-align:middle;
}
.bankroll-display-inner{display:flex;flex-direction:column;gap:10px;}
.bk-current{display:flex;flex-direction:column;gap:4px;}
.bk-label{font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;}
.bk-amount{font-size:1.7rem;font-weight:800;color:var(--text);}
.bk-pnl{display:flex;flex-direction:column;gap:3px;}
.bk-pnl-val{font-size:1rem;font-weight:700;}
.bk-pnl--pos .bk-pnl-val{color:var(--green);}
.bk-pnl--neg .bk-pnl-val{color:var(--red);}
.bk-edit-btn{margin-top:6px;font-size:.8rem;padding:6px 14px;}
.bankroll-form{margin-top:14px;}
.bankroll-form-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.bankroll-form-row label{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted);flex:1;min-width:100px;}
.bankroll-input{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:8px 10px;color:var(--text);font-size:.9rem;
}
.bankroll-save-btn{font-size:.85rem;padding:8px 18px;}

/* ── Monthly strip ─────────────────────────────────────── */
.home-monthly-strip{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09);
  border-radius:10px;padding:8px 16px;margin:0 0 12px;font-size:.8rem;
}
.hms-label{color:var(--muted);font-weight:500;letter-spacing:.02em;}
.hms-stat{font-weight:700;padding:2px 8px;border-radius:5px;font-size:.77rem;}
.hms-win{background:rgba(34,197,94,.12);color:var(--green);}
.hms-loss{background:rgba(239,68,68,.1);color:var(--red);}
.hms-wr{font-weight:700;font-size:.82rem;margin-left:auto;}

/* ── Social proof badge ────────────────────────────────── */
.pick-social-proof{
  float:right;font-size:.72rem;color:var(--muted);
  background:rgba(255,255,255,.05);border-radius:5px;
  padding:2px 7px;font-weight:500;
}

/* ── Pick del Día ──────────────────────────────────────── */
.home-pod-wrap{margin:0 0 20px;}
.home-pod-header{
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.home-pod-crown{font-size:1rem;}
.home-pod-title{
  font-size:.82rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--blue);
  text-shadow:0 0 10px rgba(56,189,248,.5);
}
.home-pod-league{
  margin-left:auto;font-size:.75rem;color:var(--muted);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
  border-radius:6px;padding:2px 9px;
}
.home-pod-card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(56,189,248,.25);
  border-radius:16px;padding:18px 20px;
  position:relative;overflow:hidden;
  box-shadow:0 0 0 1px rgba(56,189,248,.08), 0 8px 32px rgba(0,0,0,.35);
}
.home-pod-card::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 0% 0%, rgba(56,189,248,.07), transparent),
    radial-gradient(ellipse 50% 40% at 100% 100%, rgba(88,28,135,.1), transparent);
  pointer-events:none;
}
.home-pod-match{
  display:flex;align-items:center;gap:8px;
  font-size:1rem;font-weight:600;margin-bottom:8px;flex-wrap:wrap;
  position:relative;z-index:1;
}
.home-pod-market{
  font-size:.85rem;color:var(--muted);margin-bottom:10px;
  position:relative;z-index:1;
}
.home-pod-badges{
  display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px;
  position:relative;z-index:1;
}
.home-pod-score{
  background:rgba(56,189,248,.12);color:var(--blue);
  border:1px solid rgba(56,189,248,.2);
  border-radius:6px;padding:3px 10px;font-size:.78rem;font-weight:700;
}
.home-pod-tier{
  border-radius:6px;padding:3px 10px;font-size:.78rem;font-weight:700;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);
}
.home-pod-edge{
  background:rgba(34,197,94,.1);color:var(--green);
  border:1px solid rgba(34,197,94,.18);
  border-radius:6px;padding:3px 10px;font-size:.78rem;font-weight:600;
}
.home-pod-reasons{
  list-style:none;padding:0;margin:0 0 14px;
  display:flex;flex-direction:column;gap:5px;
  position:relative;z-index:1;
}
.home-pod-reasons li{
  font-size:.81rem;color:var(--muted);
  padding-left:14px;position:relative;line-height:1.45;
}
.home-pod-reasons li::before{
  content:"›";position:absolute;left:0;
  color:var(--blue);font-weight:700;
}
.home-pod-actions{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:1;}
.home-pod-btn-follow{
  background:var(--blue);color:#000;font-weight:700;
  padding:9px 18px;font-size:.88rem;border-radius:9px;
  box-shadow:0 0 16px rgba(56,189,248,.3);
  transition:box-shadow .2s,filter .2s;
}
.home-pod-btn-follow:hover{filter:brightness(1.1);box-shadow:0 0 24px rgba(56,189,248,.5);}
.home-pod-btn-save{
  background:rgba(255,255,255,.05);color:var(--text);
  border:1px solid rgba(255,255,255,.15);
  padding:9px 18px;font-size:.88rem;border-radius:9px;
  transition:background .2s;
}
.home-pod-btn-save:hover{background:rgba(255,255,255,.09);}
.md-table-row--away .md-table-name,.md-table-row--away .md-td-pts{color:#38bdf8;}

/* ── Footer ────────────────────────────────────────────── */
.aftr-footer{
  margin-top:60px;
  border-top:1px solid rgba(255,255,255,.07);
  padding:32px 20px 40px;
}
.aftr-footer-inner{
  max-width:1100px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  text-align:center;
}
.aftr-footer-brand{display:flex;align-items:center;gap:10px;}
.aftr-footer-logo{font-size:1.15rem;font-weight:900;color:var(--text);letter-spacing:-.5px;}
.aftr-footer-tagline{font-size:.8rem;color:var(--muted);}
.aftr-footer-links{display:flex;gap:20px;flex-wrap:wrap;justify-content:center;}
.aftr-footer-links a{font-size:.82rem;color:var(--muted);text-decoration:none;}
.aftr-footer-links a:hover{color:var(--text);}
.aftr-footer-copy{font-size:.75rem;color:rgba(255,255,255,.25);margin:0;}

/* ═══════════════════════════════════════════════════════════
   MOBILE POLISH — targeted fixes for small screens
══════════════════════════════════════════════════════════ */

/* Nav: hide secondary nav links, shrink auth pills */
@media (max-width: 480px) {
  .home-header-nav { display: none; }
  .home-header { gap: 10px; margin-bottom: 18px; }
  .home-header-auth { gap: 6px; }
  .home-header-auth .pill { padding: 6px 10px; font-size: .78rem; }
  .nav-user-name { max-width: 72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .brand-tag { display: none; } /* tagline only shows at wider widths */
}

/* Hero: tighter padding + responsive headline */
@media (max-width: 640px) {
  .hero { padding: 32px 20px; gap: 28px; }
  .hero-copy h1 { font-size: clamp(1.35rem, 5.5vw, 1.9rem); }
  .hero-copy p { font-size: .88rem; }
  .hero-stats { gap: 18px; }
  .hero-stats strong { font-size: 18px; }
}
@media (max-width: 400px) {
  .hero { padding: 24px 14px; }
  .hero-art { height: 180px; }
  .hero-art__frame { width: 170px; height: 170px; }
}

/* Pick del Día: full-width actions on small screens */
@media (max-width: 480px) {
  .home-pod-actions { flex-direction: column; }
  .home-pod-btn-follow, .home-pod-btn-save { width: 100%; text-align: center; }
  .home-pod-card { padding: 14px 14px; }
}

/* Account panel: stack stats + cards on small screens */
@media (max-width: 400px) {
  .ap-card { flex-wrap: wrap; }
  .ap-card-right {
    width: 100%; flex-direction: row;
    justify-content: flex-start; padding: 0 10px 10px; gap: 8px;
  }
  .ap-stats-secondary { flex-direction: column; gap: 6px; }
  .account-actions { gap: 6px; flex-wrap: wrap; }
  .account-action-pill { font-size: .75rem; padding: 6px 10px; }
}

/* Share modal: full-width on mobile */
@media (max-width: 540px) {
  .aftr-share-box { padding: 16px; border-radius: 14px; }
  .aftr-share-actions { flex-direction: column; }
  .aftr-share-btn { text-align: center; }
}

/* Onboarding: full-width on small phones */
@media (max-width: 440px) {
  .onb-box { padding: 24px 18px 18px; border-radius: 16px; }
  .onb-title { font-size: 1.1rem; }
}

/* Monthly strip: wrap on mobile */
@media (max-width: 400px) {
  .home-monthly-strip { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hms-wr { margin-left: 0; }
}

/* Bankroll form: stack on mobile */
@media (max-width: 480px) {
  .bankroll-form-row { flex-direction: column; }
  .bk-amount { font-size: 1.35rem; }
}

/* ── Premium Welcome Celebration ── */
.prem-welcome-overlay {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.82);
}
.confetti-canvas {
  position: absolute; inset: 0; pointer-events: none;
  width: 100%; height: 100%;
}
.prem-welcome-card {
  position: relative; z-index: 1;
  background: #1a1a2e;
  border: 2px solid #FFD700;
  border-radius: 24px;
  padding: 40px 36px 32px;
  text-align: center;
  max-width: 360px; width: 90%;
  box-shadow: 0 0 60px rgba(255,215,0,.25);
  animation: prem-pop .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes prem-pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}
.prem-welcome-crown {
  font-size: 3rem; margin-bottom: 12px;
  animation: crown-spin 1s ease .3s both;
}
@keyframes crown-spin {
  from { transform: rotateY(-180deg) scale(.5); opacity: 0; }
  to   { transform: rotateY(0deg)    scale(1);  opacity: 1; }
}
.prem-welcome-title {
  font-size: 1.8rem; font-weight: 800;
  color: #FFD700; margin: 0 0 8px;
  text-shadow: 0 0 20px rgba(255,215,0,.5);
}
.prem-welcome-sub {
  font-size: .95rem; color: #aaa; margin: 0 0 24px; line-height: 1.5;
}
.prem-welcome-btn {
  display: inline-block;
  background: linear-gradient(135deg, #FFD700, #FF8C00);
  color: #000; font-weight: 700; font-size: .95rem;
  border: none; border-radius: 12px;
  padding: 12px 28px; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.prem-welcome-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,215,0,.4);
}

/* ── Onboarding Checklist Modal ── */
.onboarding-card {
  position: relative;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  padding: 28px 24px 20px;
  max-width: 400px; width: 92%;
  max-height: 90vh; overflow-y: auto;
}
.onboarding-header {
  text-align: center; margin-bottom: 20px;
}
.onboarding-crown { font-size: 2rem; }
.onboarding-header h3 {
  font-size: 1.25rem; font-weight: 700;
  color: #fff; margin: 6px 0 4px;
}
.onboarding-header p {
  font-size: .82rem; color: #666; margin: 0;
}
.onboarding-list { display: flex; flex-direction: column; gap: 8px; }
.onboarding-item {
  display: flex; align-items: center; gap: 12px;
  background: #1e1e1e; border: 1px solid #2a2a2a;
  border-radius: 12px; padding: 14px 16px;
  cursor: pointer; transition: background .15s, border-color .15s;
  text-align: left; width: 100%;
  color: inherit; font: inherit;
}
.onboarding-item:hover {
  background: #252525; border-color: #FFD700;
}
.onboarding-item-icon {
  font-size: 1.3rem; flex-shrink: 0; width: 28px; text-align: center;
}
.onboarding-item-text {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
}
.onboarding-item-text strong {
  font-size: .9rem; color: #fff; font-weight: 600;
}
.onboarding-item-text span {
  font-size: .78rem; color: #777;
}
.onboarding-arrow {
  font-size: 1rem; color: #555; flex-shrink: 0;
  transition: color .15s, transform .15s;
}
.onboarding-item:hover .onboarding-arrow {
  color: #FFD700; transform: translateX(3px);
}

/* Pulse highlight for "Seguir picks" onboarding */
@keyframes onboard-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,215,0,.7); }
  50%       { box-shadow: 0 0 0 10px rgba(255,215,0,0); }
}
.onboard-pulse {
  animation: onboard-pulse .6s ease 3;
}

/* ── Trial Welcome Modal ── */
.trial-welcome-card {
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 20px;
  padding: 32px 28px 24px;
  max-width: 360px; width: 92%;
  text-align: center;
  animation: prem-pop .4s cubic-bezier(.34,1.56,.64,1) both;
}
.trial-welcome-icon { font-size: 2.5rem; margin-bottom: 10px; }
.trial-welcome-title {
  font-size: 1.5rem; font-weight: 800; color: #fff; margin: 0 0 8px;
}
.trial-welcome-sub {
  font-size: .9rem; color: #aaa; margin: 0 0 20px; line-height: 1.5;
}
.trial-welcome-sub strong { color: #FFD700; }
.trial-welcome-perks {
  background: #1e1e1e; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 20px;
  display: flex; flex-direction: column; gap: 8px; text-align: left;
}
.twp-item { font-size: .85rem; color: #ccc; }
.trial-welcome-btn {
  display: block; width: 100%;
  background: linear-gradient(135deg, #FFD700, #FF8C00);
  color: #000; font-weight: 700; font-size: .95rem;
  border: none; border-radius: 12px;
  padding: 13px; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  margin-bottom: 10px;
}
.trial-welcome-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,215,0,.35);
}
.trial-welcome-note { font-size: .75rem; color: #555; margin: 0; }

/* ── How It Works ── */
.how-it-works .home-h2{ margin-bottom: 24px; }
.hiw-steps{
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.hiw-step{
  flex: 1;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px;
  padding: 24px 20px;
  text-align: center;
  position: relative;
}
.hiw-icon{
  font-size: 28px;
  margin-bottom: 10px;
}
.hiw-num{
  position: absolute;
  top: 12px;
  left: 14px;
  font-size: 11px;
  font-weight: 800;
  color: rgba(56,189,248,.7);
  letter-spacing: .05em;
}
.hiw-title{
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  color: #f1f5f9;
}
.hiw-desc{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.hiw-arrow{
  font-size: 20px;
  color: rgba(255,255,255,.2);
  padding: 0 12px;
  align-self: center;
  flex-shrink: 0;
}
@media(max-width:640px){
  .hiw-steps{ flex-direction: column; gap: 10px; }
  .hiw-arrow{ display: none; }
}

/* ── Historial Público ── */
.home-public-history .home-h2{ margin-bottom: 16px; }
.pub-hist-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pub-hist-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--card);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
  font-size: 13px;
}
.pub-hist-badge{
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  min-width: 44px;
  text-align: center;
  flex-shrink: 0;
}
.pub-hist-win  { background: rgba(34,197,94,.18);  color: #22c55e; }
.pub-hist-loss { background: rgba(239,68,68,.18);  color: #ef4444; }
.pub-hist-push { background: rgba(234,179,8,.18);  color: #eab308; }
.pub-hist-mkt{
  font-weight: 700;
  color: var(--text);
  min-width: 70px;
}
.pub-hist-match{
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pub-hist-date{
  font-size: 11px;
  flex-shrink: 0;
}
@media(max-width:480px){
  .pub-hist-match{ display: none; }
}

/* ── Bankroll Home Widget ── */
.bankroll-home-section { padding-bottom: 8px; }
.bkh-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.bkh-config-link { font-size: .8rem; }
.bankroll-display-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.bk-current, .bk-pnl {
  background: #1a1a1a; border: 1px solid #2a2a2a;
  border-radius: 14px; padding: 16px 18px;
}
.bk-current { border-color: #2a2a2a; }
.bk-pnl--pos { border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.05); }
.bk-pnl--neg { border-color: rgba(239,68,68,.3);  background: rgba(239,68,68,.05); }
.bk-label { display: block; font-size: .72rem; color: #555; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.bk-amount { display: block; font-size: 1.35rem; font-weight: 800; color: #fff; }
.bk-pnl-val { display: block; font-size: 1.05rem; font-weight: 700; }
.bk-pnl--pos .bk-pnl-val { color: #4ade80; }
.bk-pnl--neg .bk-pnl-val { color: #f87171; }
.bk-edit-btn { margin-top: 12px; font-size: .8rem; padding: 6px 14px; }
@media (max-width: 480px) {
  .bankroll-display-inner { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   MOBILE — Pick cards compactas (≤480px)
══════════════════════════════════════════════ */
@media (max-width: 480px) {

  /* Card padding reducido */
  .aftr-pick-card.card { padding: 12px; }

  /* Equipos: crests más chicos, nombres más ajustados */
  .aftr-teams { gap: 6px; }
  .aftr-team .crest { width: 20px; height: 20px; }
  .aftr-teams .team-name { font-size: 12px; }
  .aftr-vs { font-size: 11px; padding: 0 4px; }

  /* Mercado + cuota */
  .aftr-mainpick { padding: 8px 10px; margin-top: 6px; }
  .pick-main-highlight .aftr-market { font-size: 15px; }
  .aftr-prob-odds { margin-top: 4px; }

  /* AFTR Score block: gauge más chico */
  .aftr-score-block { padding: 8px 10px 6px; gap: 8px; }
  .aftr-gauge-svg { width: 44px; height: 44px; }
  .aftr-gauge-num { font-size: 12px; }
  .aftr-badge { font-size: 10px; padding: 2px 6px; }

  /* Botones de acción */
  .pick-action-btn { padding: 8px 10px; font-size: 12px; }
  .btn-add-tracker  { padding: 8px 10px; font-size: 12px; }

  /* Top meta */
  .aftr-topmeta { font-size: 11px; }
  .aftr-meta-tier-pill { font-size: 10px; padding: 2px 6px; }

  /* Home picks grid: 1 columna sin gap excesivo */
  .home-picks-grid { gap: 10px; }

  /* Streak card más compacto */
  .streak-card { padding: 10px 14px; }
  .streak-card-num { font-size: 2rem; }

  /* Historial público: más compacto */
  .pub-hist-row { padding: 7px 10px; font-size: 12px; }
  .pub-hist-badge { font-size: 10px; padding: 2px 6px; min-width: 36px; }
}

/* ── Sticky bottom banner (1xBet) ── */
.aftr-sticky-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 999;
  background: #0d1117;
  border-top: 1px solid rgba(255,255,255,.08);
  height: 50px;
  overflow: hidden;
}
body { padding-bottom: 54px; }