/* ═══════════════════════════════════════
   QUINIELA MUNDIAL 2026 — UNOTRANS
   ═══════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fustat:wght@300;400;500;600;700;800&display=swap');

:root {
  --black:    #000E19;
  --dark:     #00223B;
  --blue:     #176091;
  --blue-h:   #1a74ae;
  --cloud:    #EDEFF7;
  --smoke:    #D3D6E0;
  --steel:    #BCBFCC;
  --space:    #9DA2B3;
  --muted:    #6E7180;
  --bg:       #F2F4F8;
  --card:     #FFFFFF;
  --border:   #E4E7F0;
  --text:     #000E19;
  --green:    #0B6B44;
  --red:      #B91C1C;
  --gold:     #c9a227;
  --r:        8px;
  --rlg:      14px;
  --sh:       0 1px 6px rgba(0,14,25,.07);
  --shmd:     0 4px 16px rgba(0,14,25,.10);
  --shlg:     0 8px 40px rgba(0,14,25,.16);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Fustat',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}

/* NAVBAR */
.navbar{background:var(--black);height:60px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:200}
.navbar-brand{display:flex;align-items:center;gap:16px}
.logo{height:28px;width:auto;max-width:180px;object-fit:contain}
.nav-divider{width:1px;height:20px;background:rgba(255,255,255,.15)}
.nav-subtitle{font-size:.75rem;font-weight:600;color:var(--space);letter-spacing:.1em;text-transform:uppercase}
.navbar-right{display:flex;align-items:center;gap:12px}
.nav-user{font-size:.85rem;color:var(--steel);font-weight:500}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 18px;border:none;border-radius:var(--r);font-family:inherit;font-size:.84rem;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-h)}
.btn-ghost{background:transparent;color:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.15)}.btn-ghost:hover{background:rgba(255,255,255,.08);color:#fff}
.btn-full{width:100%;padding:11px;font-size:.92rem}
.btn-large{padding:12px 32px;border-radius:50px}
.btn-sm{padding:5px 12px;font-size:.76rem}
.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* UTIL */
.hidden{display:none!important}
.screen{min-height:calc(100vh - 54px)}
.screen.hidden{display:none!important}
.screen.active{display:block}

/* ── AUTH SPLIT ── */
#screen-auth {
  display: flex;
  min-height: calc(100vh - 54px);
}

.auth-left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 40px;
  background: linear-gradient(145deg, #000E19 0%, #00223B 100%);
  position: relative;
  overflow: hidden;
}
.auth-left::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(23,96,145,.20) 0%, transparent 70%);
  top: -150px; right: -150px;
  pointer-events: none;
}
.auth-left-inner { position: relative; z-index: 1; max-width: 420px; width: 100%; }
.auth-left-logo { width: 180px !important; max-width: 180px !important; height: auto !important; margin-bottom: 48px; display: block; opacity: .95; }
.auth-left h2 { font-size: 2.8rem; font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 18px; letter-spacing: -.02em; }
.auth-left h2 em { font-style: normal; color: #3a9fd8; display: block; }
.auth-left p { font-size: .95rem; color: #8a9ab0; line-height: 1.8; margin-bottom: 36px; }
.auth-features { display: flex; flex-direction: column; gap: 14px; }
.auth-feat { display: flex; align-items: center; gap: 12px; font-size: .88rem; color: #BCBFCC; }
.auth-feat-dot { width: 6px; height: 6px; border-radius: 50%; background: #3a9fd8; flex-shrink: 0; }

.auth-right {
  width: 460px;
  flex-shrink: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 48px;
  box-shadow: -8px 0 40px rgba(0,0,0,.12);
}
.auth-form-wrap { width: 100%; }
.auth-form-title { font-size: 1.6rem; font-weight: 800; color: var(--text); margin-bottom: 6px; letter-spacing: -.02em; }
.auth-form-sub { font-size: .88rem; color: var(--muted); margin-bottom: 28px; }

.auth-tabs {
  display: flex;
  background: var(--bg);
  border-radius: 10px;
  padding: 4px;
  margin-bottom: 24px;
  gap: 2px;
}
.tab-btn {
  flex: 1; padding: 10px; border: none; background: transparent;
  border-radius: 8px; cursor: pointer; font-family: inherit;
  font-size: .88rem; font-weight: 600; color: var(--muted); transition: all .15s;
}
.tab-btn.active { background: var(--card); color: var(--text); box-shadow: 0 1px 6px rgba(0,14,25,.08); }
.tab-content.hidden { display: none; }
.tab-content.active { display: block; }

.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: .74rem;
  font-weight: 700;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.form-group input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  font-family: inherit;
  font-size: .95rem;
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  background: #fff;
}
.form-group input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(23,96,145,.08);
}
.form-group input::placeholder { color: var(--steel); }

.btn-full { width: 100%; padding: 13px; font-size: .95rem; border-radius: 10px; }

.error-msg {
  background: #fef2f2; color: var(--red); border-radius: var(--r);
  padding: 10px 14px; font-size: .82rem; font-weight: 500; margin-bottom: 14px;
}
.error-msg.hidden { display: none; }

/* ── COUNTDOWN ── */
.countdown-bar{
  background: #000E19;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.countdown-label {
  font-size: .72rem;
  font-weight: 600;
  color: #9DA2B3;
  text-transform: uppercase;
  letter-spacing: .07em;
  white-space: nowrap;
}
.countdown-label span { color: #fff; font-weight: 700; }
.countdown-units { display: flex; align-items: center; gap: 4px; }
.countdown-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 6px 12px;
  min-width: 52px;
}
.countdown-unit span {
  font-size: 1.5rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.countdown-unit small {
  font-size: .62rem;
  font-weight: 600;
  color: #6E7180;
  letter-spacing: .1em;
  margin-top: 3px;
  text-transform: uppercase;
}
.countdown-sep { font-size: .9rem; font-weight: 300; color: #40424D; padding: 0 2px; }

/* ── MAIN TABS ── */
.main-tabs{background:var(--card);border-bottom:1px solid var(--border);display:flex;padding:0 32px;position:sticky;top:60px;z-index:100}
.main-tab{padding:16px 22px;border:none;background:transparent;font-family:inherit;font-size:.92rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:all .15s}
.main-tab:hover{color:var(--text)}
.main-tab.active{color:var(--blue);border-bottom-color:var(--blue)}

/* ── VIEWS ── */
.view{display:none;max-width:900px;margin:0 auto;padding:32px}
.view.active{display:block}
.view-header{margin-bottom:24px}
.view-header h2{font-size:1.35rem;font-weight:700;margin-bottom:4px}
.view-header p{font-size:.88rem;color:var(--muted)}

/* ── PHASE PILLS ── */
.phase-pills{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.phase-pill{padding:8px 18px;border:1.5px solid var(--border);border-radius:24px;background:var(--card);font-family:inherit;font-size:.84rem;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s}
.phase-pill:hover{border-color:var(--blue);color:var(--blue)}
.phase-pill.active{background:var(--blue);border-color:var(--blue);color:#fff}

/* ── GROUP ACCORDION ── */
.g-acc{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--card);margin-bottom:6px}
.g-acc-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;cursor:pointer;user-select:none;transition:background .15s}
.g-acc-head:hover{background:var(--bg)}
.g-acc-title{display:flex;align-items:center;gap:12px;font-size:.9rem;font-weight:700}
.g-badge{background:var(--dark);color:#fff;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:5px;letter-spacing:.04em}
.g-preview{font-size:.82rem;color:var(--muted);font-weight:400}
.g-chevron{width:15px;height:15px;color:var(--steel);transition:transform .2s;flex-shrink:0}
.g-acc.open .g-chevron{transform:rotate(180deg)}
.g-acc-body{display:none;border-top:1px solid var(--border)}
.g-acc.open .g-acc-body{display:block}

/* ── MATCH CARD ── */
.match-card{display:grid;grid-template-columns:1fr 140px 1fr;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border);gap:10px;transition:background .15s}
.match-card:last-child{border-bottom:none}
.match-card:hover{background:var(--bg)}
.match-card.locked{opacity:.65}
.team{display:flex;align-items:center;gap:9px;font-size:.92rem;font-weight:600}
.team.home{justify-content:flex-end}
.team-flag{font-size:1.15rem;line-height:1}
.match-center{display:flex;flex-direction:column;align-items:center;gap:5px}
.score-row{display:flex;align-items:center;gap:7px}
.score-input input{width:40px;height:40px;text-align:center;border:1.5px solid var(--border);border-radius:var(--r);font-family:inherit;font-size:1rem;font-weight:700;color:var(--text);outline:none;transition:border-color .15s;-moz-appearance:textfield}
.score-input input::-webkit-inner-spin-button,.score-input input::-webkit-outer-spin-button{-webkit-appearance:none}
.score-input input:focus{border-color:var(--blue)}
.score-input input:disabled{background:var(--bg);color:var(--steel);cursor:not-allowed}
.score-sep{color:var(--steel);font-size:.9rem}
.match-dt{font-size:.72rem;color:var(--space);text-align:center}
.time-tag{font-size:.7rem;font-weight:700;color:var(--blue);background:rgba(23,96,145,.08);padding:2px 7px;border-radius:4px}
.res-badge{display:inline-block;padding:1px 6px;border-radius:10px;font-size:.64rem;font-weight:700}
.res-exact{background:#dcfce7;color:#166534}
.res-ok{background:#dbeafe;color:#1e40af}
.res-bad{background:#fee2e2;color:#991b1b}

/* SAVE BAR */
.save-bar{position:sticky;bottom:0;background:var(--card);border-top:1px solid var(--border);padding:16px 32px;display:flex;align-items:center;gap:14px;margin:0 -32px;box-shadow:0 -4px 16px rgba(0,14,25,.05)}
.save-ok{font-size:.82rem;color:var(--green);font-weight:700}

/* ── CALENDAR ── */
.cal-day{margin-bottom:28px}
.cal-day-hd{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--space);padding:6px 0;margin-bottom:10px;border-bottom:1px solid var(--border)}
.cal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.cal-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;transition:border-color .15s}
.cal-card:hover{border-color:var(--blue)}
.cal-card.filled{border-left:3px solid var(--blue)}
.cal-phase{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--space);margin-bottom:9px}
.cal-teams{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.cal-team{display:flex;align-items:center;gap:6px;font-size:.88rem;font-weight:700;flex:1}
.cal-team.away{justify-content:flex-end;text-align:right}
.cal-flag{font-size:1.05rem;flex-shrink:0}
.cal-vs{font-size:.7rem;font-weight:700;color:var(--steel);flex-shrink:0}
.cal-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cal-time{font-size:.7rem;font-weight:600;color:var(--blue);background:rgba(23,96,145,.08);padding:3px 8px;border-radius:4px}
.cal-pred{font-size:.7rem;font-weight:600;color:var(--muted)}
.cal-pred.filled{color:var(--green)}
.cal-ics{font-size:.66rem;font-weight:600;color:var(--muted);background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:2px 7px;cursor:pointer;text-decoration:none;white-space:nowrap}
.cal-ics:hover{border-color:var(--blue);color:var(--blue)}

/* ── LEADERBOARD TABLE ── */
.lb-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:24px}
.lb-table{width:100%;border-collapse:collapse}
.lb-table th{padding:10px 14px;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--space);background:var(--bg);border-bottom:1px solid var(--border);text-align:left}
.lb-table th.c{text-align:center}
.lb-table td{padding:11px 14px;font-size:.84rem;border-bottom:1px solid var(--border);vertical-align:middle}
.lb-table tr:last-child td{border-bottom:none}
.lb-table tr.top5 td{background:linear-gradient(90deg,rgba(23,96,145,.03),transparent)}
.lb-table tr:hover td{background:var(--bg)}
.lb-table td.c{text-align:center;color:var(--muted);font-weight:600}
.lb-table td.pts{text-align:center;font-size:1rem;font-weight:800;color:var(--blue)}
.lb-rk{display:flex;align-items:center;gap:9px}
.lb-rk-num{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.75rem;background:var(--bg);color:var(--muted);flex-shrink:0}
.lb-rk-num.gold{background:var(--dark);color:var(--gold)}
.lb-rk-num.silver{background:#2a2f3a;color:var(--space)}
.lb-rk-num.bronze{background:#1e1200;color:#b87333}
.lb-rk-num.top5{background:var(--blue);color:#fff}
.p-area{font-size:.7rem;color:var(--muted);font-weight:400;display:block;margin-top:1px}
.lb-legend{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.lb-leg-item{display:flex;align-items:center;gap:6px;font-size:.76rem;color:var(--muted)}
.lb-leg-tag{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:5px;font-size:.65rem;font-weight:800;flex-shrink:0}
.lb-leg-tag.exact{background:#dcfce7;color:#166534}
.lb-leg-tag.ok{background:#dbeafe;color:#1e40af}
.lb-leg-tag.bad{background:#fee2e2;color:#991b1b}

/* ── LEGEND ── */
.pts-legend{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:16px 20px}
.pts-legend h3{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--space);margin-bottom:12px}
.pts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px}
.pts-item{font-size:.8rem;display:flex;align-items:center;gap:9px;color:var(--muted)}
.pts-tag{background:var(--dark);color:#fff;padding:2px 7px;border-radius:4px;font-weight:700;font-size:.7rem;white-space:nowrap;flex-shrink:0}

/* ── ADMIN ── */
.adm-card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:10px 14px;margin-bottom:5px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.adm-teams{flex:1;font-size:.84rem;font-weight:600}
.adm-teams small{font-weight:400;color:var(--muted);font-size:.72rem;display:block;margin-top:1px}
.adm-score{display:flex;align-items:center;gap:7px}
.adm-score input{width:40px;height:34px;text-align:center;border:1.5px solid var(--border);border-radius:var(--r);font-family:inherit;font-size:.95rem;font-weight:700;outline:none;transition:border-color .15s;-moz-appearance:textfield}
.adm-score input::-webkit-inner-spin-button,.adm-score input::-webkit-outer-spin-button{-webkit-appearance:none}
.adm-score input:focus{border-color:var(--blue)}
.adm-saved{color:var(--green);font-size:.74rem;font-weight:700}

/* ── ADMIN TABS ── */
.admin-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.admin-tab {
  padding: 10px 20px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: .83rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all .15s;
}
.admin-tab:hover { color: var(--text); }
.admin-tab.active { color: var(--blue); border-bottom-color: var(--blue); }

.admin-section { display: none; }
.admin-section.active { display: block; }
.admin-section-desc { font-size: .82rem; color: var(--muted); margin-bottom: 16px; }

.sync-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: linear-gradient(90deg, rgba(23,96,145,.06), rgba(23,96,145,.02));
  border: 1px solid rgba(23,96,145,.15);
  border-radius: var(--r); padding: 16px 20px;
}
.sync-title { font-size: .9rem; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.sync-sub { font-size: .78rem; color: var(--muted); }
.sync-status { font-size: .8rem; font-weight: 600; margin-top: 8px; }
.sync-status.ok { color: var(--green); }
.sync-status.err { color: var(--red); }

/* Users table */
.users-table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; }
.users-table { width: 100%; border-collapse: collapse; }
.users-table th {
  padding: 10px 14px;
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--space); background: var(--bg);
  border-bottom: 1px solid var(--border); text-align: left;
}
.users-table td {
  padding: 12px 14px;
  font-size: .84rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.users-table tr:last-child td { border-bottom: none; }
.users-table tr:hover td { background: var(--bg); }
.user-name-cell { font-weight: 700; }
.user-email-cell { color: var(--muted); font-size: .78rem; }
.user-area-tag {
  display: inline-block;
  background: rgba(23,96,145,.08);
  color: var(--blue);
  padding: 2px 8px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 600;
}
.user-date { font-size: .76rem; color: var(--muted); }
.user-pts { font-weight: 800; color: var(--blue); }
.btn-delete {
  background: transparent;
  border: 1px solid #fca5a5;
  color: var(--red);
  padding: 4px 12px;
  border-radius: 6px;
  font-family: inherit;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
}
.btn-delete:hover { background: #fee2e2; }
.users-count { font-size: .78rem; color: var(--muted); margin-bottom: 12px; font-weight: 500; }

/* PHASE TITLE (admin) */
.phase-title{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--space);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border);margin-top:20px}
.phase-title:first-child{margin-top:0}

/* TOAST */
.toast{position:fixed;bottom:72px;left:50%;transform:translateX(-50%);background:var(--black);color:#fff;padding:9px 20px;border-radius:20px;font-size:.82rem;font-weight:500;z-index:999;box-shadow:0 4px 20px rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);white-space:nowrap}
.toast.hidden{display:none}

.loading{text-align:center;color:var(--muted);padding:40px;font-size:.88rem}

/* RESPONSIVE */
@media(max-width:768px){
  #screen-auth{flex-direction:column}
  .auth-left{padding:28px 20px;min-height:auto}
  .auth-left h2{font-size:1.5rem}
  .auth-features{display:none}
  .auth-right{width:100%;padding:28px 20px}
}
@media(max-width:640px){
  .navbar{padding:0 14px}
  .nav-subtitle{display:none}
  .main-tabs{padding:0 8px;overflow-x:auto}
  .main-tab{padding:12px 10px;font-size:.76rem;white-space:nowrap}
  .view{padding:14px}
  .save-bar{margin:0 -14px;padding:10px 14px}
  .match-card{grid-template-columns:1fr;gap:6px;padding:10px 12px}
  .team.home{justify-content:flex-start}
  .match-center{flex-direction:row;justify-content:center}
  .cal-grid{grid-template-columns:1fr}
  .countdown-bar{padding:8px 14px}
  .countdown-unit{min-width:40px;padding:4px 7px}
  .countdown-unit span{font-size:1rem}
  .countdown-label{display:none}
}