*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f3f4f6;color:#111827;min-height:100vh}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}

/* Layout */
.container{max-width:640px;margin:0 auto;padding:0 16px}
.page{min-height:100vh;display:flex;flex-direction:column}

/* Header */
.header{background:#1d4ed8;color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.header-title{font-size:17px;font-weight:600;display:flex;align-items:center;gap:8px}
.header-user{font-size:13px;opacity:.85;display:flex;align-items:center;gap:10px}
.btn-logout{background:rgba(255,255,255,.15);border:none;color:#fff;padding:5px 12px;border-radius:20px;font-size:12px}

/* Bottom nav */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid #e5e7eb;display:flex;z-index:100}
.nav-tab{flex:1;padding:10px 0;border:none;background:none;font-size:11px;color:#6b7280;display:flex;flex-direction:column;align-items:center;gap:3px;transition:color .15s}
.nav-tab .icon{font-size:20px}
.nav-tab.active{color:#1d4ed8;font-weight:500}
.content{flex:1;padding:16px 0 80px}

/* Cards */
.card{background:#fff;border-radius:12px;border:1px solid #e5e7eb;margin-bottom:10px;overflow:hidden}
.card-header{padding:10px 14px;background:#f9fafb;border-bottom:1px solid #e5e7eb;font-size:12px;font-weight:600;color:#6b7280;text-transform:uppercase;letter-spacing:.04em}

/* Match card */
.match{padding:12px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #f3f4f6}
.match:last-child{border-bottom:none}
.team{flex:1;display:flex;align-items:center;gap:7px;font-size:14px;font-weight:500}
.team.right{flex-direction:row-reverse;text-align:right}
.crest{width:22px;height:22px;object-fit:contain}
.score-area{display:flex;align-items:center;gap:6px;flex-shrink:0}
.score-input{width:38px;height:38px;text-align:center;border:1.5px solid #d1d5db;border-radius:8px;font-size:17px;font-weight:600;background:#fff;-moz-appearance:textfield}
.score-input::-webkit-inner-spin-button,.score-input::-webkit-outer-spin-button{-webkit-appearance:none}
.score-input:focus{outline:none;border-color:#1d4ed8}
.score-input.saved{border-color:#16a34a;background:#f0fdf4}
.score-input.error{border-color:#dc2626;background:#fef2f2}
.score-sep{font-size:18px;font-weight:700;color:#9ca3af}
.match-meta{font-size:11px;color:#9ca3af;margin-top:4px}
.match-col{flex:1;min-width:0}

/* Locked / result */
.lock-badge{font-size:11px;color:#9ca3af;display:flex;flex-direction:column;align-items:center;gap:2px}
.result-score{font-size:17px;font-weight:700;color:#111827;min-width:38px;text-align:center}
.pts-badge{font-size:11px;font-weight:600;padding:2px 7px;border-radius:20px;white-space:nowrap}
.pts-exact{background:#dcfce7;color:#15803d}
.pts-result{background:#dbeafe;color:#1d4ed8}
.pts-diff{background:#fef9c3;color:#854d0e}
.pts-zero{background:#f3f4f6;color:#9ca3af}

/* Leaderboard */
.lb-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid #f3f4f6}
.lb-row:last-child{border-bottom:none}
.lb-rank{width:28px;font-size:14px;font-weight:700;text-align:center;color:#9ca3af}
.lb-rank.top1{color:#f59e0b}
.lb-rank.top2{color:#94a3b8}
.lb-rank.top3{color:#b45309}
.lb-name{flex:1;font-size:14px;font-weight:500}
.lb-pts{font-size:20px;font-weight:700;color:#1d4ed8;min-width:48px;text-align:right}
.lb-sub{font-size:11px;color:#9ca3af;text-align:right}
.lb-me{background:#eff6ff}

/* Auth */
.auth-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.auth-logo{font-size:48px;margin-bottom:8px}
.auth-title{font-size:22px;font-weight:700;margin-bottom:4px}
.auth-sub{font-size:14px;color:#6b7280;margin-bottom:28px}
.auth-card{background:#fff;border-radius:16px;border:1px solid #e5e7eb;padding:24px;width:100%;max-width:380px}
.tab-row{display:flex;border-bottom:1px solid #e5e7eb;margin-bottom:20px}
.tab-btn{flex:1;padding:10px;border:none;background:none;font-size:14px;font-weight:500;color:#6b7280;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab-btn.active{color:#1d4ed8;border-bottom-color:#1d4ed8}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;font-weight:500;color:#374151;margin-bottom:5px}
.field input{width:100%;padding:10px 12px;border:1.5px solid #d1d5db;border-radius:8px;font-size:14px;background:#fff}
.field input:focus{outline:none;border-color:#1d4ed8}
.btn-primary{width:100%;padding:12px;background:#1d4ed8;color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;margin-top:4px}
.btn-primary:hover{background:#1e40af}
.btn-primary:disabled{background:#93c5fd;cursor:not-allowed}
.error-msg{background:#fef2f2;color:#dc2626;border:1px solid #fecaca;border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:12px}
.success-msg{background:#f0fdf4;color:#16a34a;border:1px solid #bbf7d0;border-radius:8px;padding:10px 12px;font-size:13px;margin-bottom:12px}

/* Admin */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.stat-card{background:#fff;border-radius:12px;border:1px solid #e5e7eb;padding:14px;text-align:center}
.stat-num{font-size:28px;font-weight:700;color:#1d4ed8}
.stat-label{font-size:12px;color:#6b7280;margin-top:2px}
.user-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid #f3f4f6}
.user-row:last-child{border-bottom:none}
.user-info{flex:1}
.user-name{font-size:14px;font-weight:500}
.user-email{font-size:12px;color:#9ca3af}
.btn-del{background:#fee2e2;color:#dc2626;border:none;border-radius:8px;padding:6px 12px;font-size:12px;font-weight:500}
.btn-sync{background:#1d4ed8;color:#fff;border:none;border-radius:8px;padding:10px 20px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:6px}
.btn-sync:disabled{background:#93c5fd}
.badge-admin{background:#dbeafe;color:#1d4ed8;font-size:11px;padding:1px 7px;border-radius:20px;font-weight:500}

/* Stage labels */
.stage-label{font-size:11px;font-weight:600;padding:2px 8px;border-radius:20px;display:inline-block}
.stage-GROUP_STAGE{background:#f3f4f6;color:#6b7280}
.stage-LAST_16{background:#dbeafe;color:#1d4ed8}
.stage-QUARTER_FINALS{background:#ede9fe;color:#7c3aed}
.stage-SEMI_FINALS{background:#fef3c7;color:#b45309}
.stage-THIRD_PLACE{background:#f3f4f6;color:#6b7280}
.stage-FINAL{background:#fce7f3;color:#be185d}

.section-title{padding:14px 0 8px;font-size:13px;font-weight:700;color:#374151;display:flex;align-items:center;justify-content:space-between}
.empty{text-align:center;color:#9ca3af;padding:40px 20px;font-size:14px}

/* ── Standings table ─────────────────────────────────── */
.standing-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.standing-table{width:100%;border-collapse:collapse;font-size:14px;min-width:320px}
.standing-table thead tr{background:#1d4ed8;color:#fff}
.standing-table th{padding:9px 8px;font-weight:600;font-size:12px;white-space:nowrap}
.standing-table th.col-name{text-align:left}
.standing-row{border-bottom:1px solid #f3f4f6;transition:background .1s}
.standing-row:last-child{border-bottom:none}
.standing-row:hover{background:#f9fafb}
.standing-row td{padding:10px 8px;vertical-align:middle}
.col-pos{width:36px;text-align:center}
.col-name{text-align:left;font-weight:500;max-width:140px}
.col-stat{width:36px;text-align:center;color:#6b7280;font-size:13px}
.col-pts{width:44px;text-align:center;font-size:17px;font-weight:700;color:#1d4ed8}
.col-exact{color:#16a34a!important}
.col-diff{color:#854d0e!important}
.col-win{color:#1d4ed8!important}
.standing-medal{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:12px;font-weight:700}
.gold{background:#fef3c7;color:#b45309;border:1.5px solid #f59e0b}
.silver{background:#f1f5f9;color:#475569;border:1.5px solid #94a3b8}
.bronze{background:#fdf4e7;color:#92400e;border:1.5px solid #d97706}
.standing-pos{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;font-size:13px;color:#9ca3af}
.row-gold{border-left:3px solid #f59e0b}
.row-silver{border-left:3px solid #94a3b8}
.row-bronze{border-left:3px solid #d97706}
.row-me{background:#eff6ff!important}
.row-me td{font-weight:500}
.me-tag{font-size:10px;color:#6b7280;font-weight:400;background:#e5e7eb;padding:1px 6px;border-radius:10px;margin-left:4px}
.standing-legend{display:flex;gap:14px;padding:10px 12px;font-size:11px;color:#9ca3af;flex-wrap:wrap;border-top:1px solid #f3f4f6}
.leg{font-size:13px;margin-right:3px}
.leg-exact{color:#16a34a}
.leg-diff{color:#854d0e}
.leg-win{color:#1d4ed8}

/* ── LAST_32 stage label ───────────────────────────────── */
.stage-LAST_32{background:#dcfce7;color:#15803d}

/* ── Team predictions: TBD card ─────────────────────────── */
.match-tbd{flex-direction:column;align-items:stretch;gap:0;padding:12px 14px}
.tbd-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.tbd-slot{flex:1;font-size:13px;font-weight:500;color:#9ca3af;font-style:italic}
.tbd-slot:last-child{text-align:right}
.vs-badge{font-size:11px;font-weight:600;color:#9ca3af;background:#f3f4f6;padding:2px 8px;border-radius:20px;white-space:nowrap}

/* Locked team prediction */
.tp-locked{display:flex;align-items:center;gap:8px;font-size:13px;color:#374151;background:#f9fafb;border-radius:8px;padding:8px 10px;margin-bottom:6px}
.tp-locked.tp-none{color:#9ca3af}
.tp-lock-icon{font-size:16px;flex-shrink:0}

/* Team picker inputs */
.tp-inputs{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.team-input{width:100%;padding:9px 11px;border:1.5px solid #d1d5db;border-radius:8px;font-size:13px;background:#fff;font-family:inherit}
.team-input:focus{outline:none;border-color:#1d4ed8}
.team-input.saved{border-color:#16a34a;background:#f0fdf4}
.team-input.error{border-color:#dc2626;background:#fef2f2}
.btn-tp-save{align-self:flex-end;background:#1d4ed8;color:#fff;border:none;border-radius:8px;padding:8px 18px;font-size:13px;font-weight:600;font-family:inherit}
.btn-tp-save:disabled{background:#93c5fd}
.tp-deadline{color:#b45309!important;font-size:11px;margin-bottom:2px}

/* Team prediction result row (under confirmed match card) */
.tp-result{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:5px;font-size:12px;padding-top:5px;border-top:1px dashed #f3f4f6}
.tp-label{color:#9ca3af;font-weight:500}
.tp-team{font-weight:500;color:#374151}
.tp-team.tp-ok{color:#16a34a}
.tp-team.tp-miss{color:#dc2626;text-decoration:line-through;opacity:.7}
.tp-sep-dot{color:#d1d5db}
.pts-team{background:#f3e8ff;color:#7c3aed}

/* Eq column in standings */
.col-eq{color:#7c3aed!important}
.leg-eq{color:#7c3aed}

/* ── Score stepper (+/-) ─────────────────────────────────── */
.match-main-row{display:flex;align-items:center;gap:8px}
.score-stepper{display:flex;align-items:center;gap:2px}
.btn-step{width:26px;height:38px;border:1.5px solid #d1d5db;border-radius:7px;background:#f9fafb;font-size:17px;font-weight:600;color:#374151;padding:0;line-height:1;flex-shrink:0}
.btn-step:hover{background:#e5e7eb;border-color:#9ca3af}
.btn-step:active{background:#d1d5db;transform:scale(.95)}

/* ── TBD team name style ─────────────────────────────────── */
.tbd-name{color:#9ca3af;font-style:italic;font-size:13px}

/* ── Team picker section (below match row) ───────────────── */
.tp-section{margin-top:8px;padding-top:8px;border-top:1px dashed #e5e7eb}
.tp-section-label{font-size:11px;color:#b45309;margin-bottom:6px;font-weight:500}

/* ── Inline team autocomplete input ─────────────────────── */
.team-input-inline{flex:1;min-width:0;background:#f0f7ff;border:1.5px solid #bfdbfe;border-radius:8px;padding:5px 9px;font-size:13px;font-weight:500;font-family:inherit;color:#1e3a5f;width:100%}
.team-input-inline.right{text-align:right}
.team-input-inline:focus{outline:none;border-color:#1d4ed8;background:#fff}
.team-input-inline.saved{border-color:#16a34a;background:#f0fdf4;color:#166534}
.team-input-inline.error{border-color:#dc2626;background:#fef2f2}

/* ── Meta row with save button ───────────────────────────── */
.tp-meta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px}
.tp-deadline-text{color:#b45309;font-weight:500}
.btn-tp-save-inline{background:#1d4ed8;color:#fff;border:none;border-radius:7px;padding:5px 12px;font-size:12px;font-weight:600;font-family:inherit;white-space:nowrap;flex-shrink:0}
.btn-tp-save-inline:disabled{background:#93c5fd}

/* ── Fix standings header (override dark bg) ─────────────── */
.standing-table thead tr{background:#f1f5f9;color:#374151}
.standing-table thead th{border-bottom:2px solid #dde4f0;font-size:13px}

/* ── Rules box below table ───────────────────────────────── */
.rules-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:14px 16px;margin-top:12px;font-size:13px;color:#374151}
.rules-title{font-weight:700;margin-bottom:8px;color:#1d4ed8}
.rules-list{padding-left:18px;display:flex;flex-direction:column;gap:6px;line-height:1.5}
.rules-list li{color:#4b5563}
.rules-list b{color:#111827}

/* ── Team input wrapper with X button ───────────────────── */
.team-input-wrap{display:flex;align-items:center;flex:1;min-width:0;gap:4px}
.team-input-wrap .team-input-inline{flex:1;min-width:0;width:auto}
.btn-clear-team{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:#e5e7eb;border:none;color:#6b7280;font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;line-height:1}
.btn-clear-team:hover{background:#fee2e2;color:#dc2626}

/* ── Team name truncation (all screens) ─────────────────── */
.team{min-width:0}
.team-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ── Mobile responsive ───────────────────────────────────── */
@media (max-width:520px){
  .container{padding:0 8px}
  .match{padding:10px 10px}
  .match-main-row{gap:4px}
  .team{font-size:12px;gap:4px}
  .crest{width:16px;height:16px}
  .score-input{width:30px;height:30px;font-size:13px}
  .btn-step{width:20px;height:30px;font-size:13px;border-radius:6px}
  .score-stepper{gap:1px}
  .result-score{font-size:14px;min-width:28px}
  .lock-badge{font-size:10px}
  .match-meta{font-size:10px}
  .section-title{font-size:12px;padding:10px 0 6px}
  .pts-badge{font-size:10px;padding:1px 5px}
  .team-input-inline{font-size:11px;padding:4px 6px}
  .btn-clear-team{width:18px;height:18px;font-size:11px}
  .header-title{font-size:15px}
  .header-user{font-size:12px}
  /* Standings */
  .standing-table{font-size:12px}
  .col-j{display:none}
  .col-pos{width:28px}
  .col-stat{width:26px}
  .col-pts{width:34px;font-size:14px}
  .standing-medal{width:20px;height:20px;font-size:11px}
  .me-tag{display:none}
  .standing-legend{font-size:10px;gap:8px}
  .rules-box{font-size:12px;padding:10px 12px}
  .rules-list{gap:5px}
}

/* ── Flex truncation fix (all screens) ───────────────────── */
.score-area{flex-shrink:0}
.crest{flex-shrink:0}
.team-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Mobile: equipos arriba, score abajo ─────────────────── */
@media (max-width:520px){
  .match-main-row{flex-wrap:wrap;row-gap:4px}
  .team{flex:1 0 40%}
  .score-area{order:1;flex:0 0 100%;justify-content:center}
}

/* ── Bottom nav safe area + content clearance ────────────── */
.bottom-nav{padding-bottom:env(safe-area-inset-bottom,0px)}
.content{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}

/* ── Instructivo / reglas ────────────────────────────────── */
.rules-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:16px 18px;margin-top:16px;font-size:13px}
.rules-section-title{font-size:13px;font-weight:700;color:#1e3a5f;margin-bottom:8px;display:flex;align-items:center;gap:6px}
.rules-p{color:#374151;line-height:1.5;margin-bottom:8px}
.rules-note{font-size:12px;color:#6b7280;background:#f1f5f9;border-left:3px solid #cbd5e1;padding:7px 10px;border-radius:0 6px 6px 0;margin-top:6px}
.rules-ej{display:block;margin-top:4px;font-style:italic}
.rules-table{width:100%;border-collapse:collapse;margin-bottom:6px;font-size:12px}
.rules-table thead tr{background:#1d4ed8;color:#fff}
.rules-table th{padding:6px 8px;text-align:left;font-weight:600;font-size:11px}
.rules-table td{padding:6px 8px;border-bottom:1px solid #e5e7eb;vertical-align:top}
.rules-table tbody tr:last-child td{border-bottom:none}
.rules-table tbody tr:nth-child(even){background:#f8fafc}
.rpt{text-align:center;font-weight:700;color:#16a34a}
.rpt-zero{color:#9ca3af}

/* ── Fechas límite en cards ──────────────────────────────── */
.meta-date{color:#6b7280}
.meta-closes{color:#6b7280}
.meta-locked{color:#9ca3af;font-weight:500}
.meta-pred-locked{color:#374151;font-weight:600;background:#f3f4f6;padding:1px 6px;border-radius:6px}
.meta-tp-closes{color:#1d4ed8;font-weight:500}
.meta-tp-locked{color:#9ca3af}