/* ================================================
   RECHARGE.COM × WORLD CUP 2026 — Campaign v2
   Weekly prediction → discount code
   ================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --g:#16a34a;--gd:#15803d;--gl:#22c55e;--gbg:#f0fdf4;--g10:rgba(22,163,74,.1);--g5:rgba(22,163,74,.05);
  --bg:#f7f8fa;--w:#fff;--card:#fff;
  --t1:#111827;--t2:#4b5563;--t3:#9ca3af;
  --bdr:#e5e7eb;--bdr2:#d1d5db;
  --red:#ef4444;--gold:#f59e0b;--blue:#3b82f6;
  --r:14px;--rs:10px;
  --sh:0 1px 3px rgba(0,0,0,.04);--shm:0 4px 16px rgba(0,0,0,.07);
}
body{font-family:'Syne',sans-serif;background:var(--bg);color:var(--t1);min-height:100vh;-webkit-font-smoothing:antialiased}

.container{max-width:440px;margin:0 auto;min-height:100vh;background:var(--w)}
@media(min-width:440px){.container{border-left:1px solid var(--bdr);border-right:1px solid var(--bdr)}}

/* Header */
.hdr{position:sticky;top:0;z-index:100;background:var(--g);color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between}
.hdr-logo{font-weight:800;font-size:1rem;letter-spacing:-.3px}
.hdr-evt{font-size:.62rem;opacity:.7;margin-left:8px;font-weight:500}

/* Tabs */
.tabs{display:flex;background:var(--w);border-bottom:1px solid var(--bdr)}
.tab{flex:1;padding:10px 4px 8px;background:none;border:none;border-bottom:2.5px solid transparent;color:var(--t3);font-size:.62rem;font-weight:700;font-family:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;transition:all .12s}
.tab.on{color:var(--g);border-bottom-color:var(--g)}
.tab-i{font-size:1.1rem}

.content{padding:16px}
.pnl{display:none}.pnl.on{display:block}

/* Shared */
.sec{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sec-t{font-size:.9rem;font-weight:700}
.sec-b{font-size:.6rem;padding:3px 9px;border-radius:10px;background:var(--gbg);color:var(--g);font-weight:700}
.mc{background:var(--card);border:1px solid var(--bdr);border-radius:var(--r);padding:14px;margin-bottom:10px;box-shadow:var(--sh)}
.mc-top{display:flex;align-items:center;justify-content:space-between;font-size:.62rem;color:var(--t3);margin-bottom:10px}
.mc-fl{width:28px;height:19px;border-radius:3px;object-fit:cover;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.btn{width:100%;padding:14px;border:none;border-radius:var(--rs);font-size:.9rem;font-weight:700;font-family:inherit;cursor:pointer;transition:all .12s;display:flex;align-items:center;justify-content:center;gap:6px}
.btn-g{background:var(--g);color:#fff}.btn-g:hover{background:var(--gd)}.btn-g:disabled{opacity:.35;cursor:not-allowed}
.btn-o{background:transparent;color:var(--t2);border:1.5px solid var(--bdr)}
.ld{display:flex;align-items:center;justify-content:center;padding:40px}
.sp{width:24px;height:24px;border:3px solid var(--bdr);border-top-color:var(--g);border-radius:50%;animation:spin .6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:36px 16px;color:var(--t3)}.empty-i{font-size:2.2rem;margin-bottom:8px;opacity:.4}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(60px);padding:11px 22px;background:var(--t1);border-radius:var(--rs);color:#fff;font-size:.8rem;font-weight:500;font-family:inherit;box-shadow:var(--shm);z-index:1000;opacity:0;transition:all .25s;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}.toast.ok{background:var(--g)}.toast.err{background:var(--red)}

/* ====== MATCH HERO ====== */
.match-hero{background:var(--w);border:2px solid var(--bdr);border-radius:16px;padding:24px 16px 16px;margin-bottom:16px;text-align:center;box-shadow:var(--shm)}
.mh-teams{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:12px}
.mh-team{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1}
.mh-flag{width:56px;height:38px;border-radius:6px;object-fit:cover;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.mh-name{font-weight:800;font-size:.95rem}
.mh-rank{font-size:.6rem;color:var(--t3)}
.mh-vs{font-size:1.4rem;font-weight:800;color:var(--t3);min-width:50px}
.mh-meta{font-size:.68rem;color:var(--t3)}

/* ====== TIER INFO ====== */
.tiers-info{background:var(--gbg);border-radius:var(--rs);padding:12px 14px;margin-bottom:16px}
.tier-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:.78rem}
.tier-row:not(:last-child){border-bottom:1px solid rgba(22,163,74,.1)}
.tier-icon{font-size:1rem;width:24px;text-align:center}
.tier-val{margin-left:auto;font-weight:800;color:var(--g)}

/* ====== VOTE FORM ====== */
.q-section{margin-bottom:16px}
.q-label{font-size:.78rem;font-weight:700;color:var(--t2);margin-bottom:8px}

.vote-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px}
.vote-opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px;background:var(--bg);border:2px solid var(--bdr);border-radius:var(--rs);cursor:pointer;transition:all .15s;user-select:none;text-align:center}
.vote-opt:hover{border-color:var(--g);background:var(--g5)}
.vote-opt.on{border-color:var(--g);background:var(--gbg);box-shadow:0 0 0 3px var(--g10)}
.vo-flag{width:44px;height:30px;display:flex;align-items:center;justify-content:center}
.vo-flag img{width:44px;height:30px;border-radius:4px;object-fit:cover;box-shadow:0 1px 4px rgba(0,0,0,.1)}
.vo-name{font-weight:700;font-size:.78rem}

.score-row{display:flex;align-items:flex-end;gap:10px;justify-content:center}
.score-side{text-align:center}
.score-inp{width:64px;padding:12px 8px;background:var(--bg);border:2px solid var(--bdr);border-radius:var(--rs);color:var(--t1);font-size:1.4rem;font-weight:800;text-align:center;font-family:inherit;outline:none;transition:border-color .12s;-moz-appearance:textfield}
.score-inp::-webkit-outer-spin-button,.score-inp::-webkit-inner-spin-button{-webkit-appearance:none}
.score-inp:focus{border-color:var(--g);background:var(--w)}
.score-dash{font-size:1.2rem;font-weight:800;color:var(--t3);padding-bottom:12px}

/* ====== RESULT CARD ====== */
.result-card{background:var(--w);border:2px solid var(--bdr);border-radius:16px;padding:28px 16px;text-align:center;margin-top:16px}
.rc-exact{border-color:var(--gold);background:linear-gradient(135deg,rgba(245,158,11,.04),transparent)}
.rc-correct{border-color:var(--g);background:var(--gbg)}
.rc-voted{border-color:var(--bdr)}
.rc-missed{border-color:var(--red);background:#fef2f2}
.rc-emoji{font-size:2.5rem;margin-bottom:8px}
.rc-label{font-size:1rem;font-weight:700;margin-bottom:4px}
.rc-discount{font-size:2rem;font-weight:800;color:var(--g);margin:8px 0}
.rc-exact .rc-discount{color:var(--gold)}

.dc{font-size:1.2rem;font-weight:800;letter-spacing:4px;color:var(--g);background:var(--gbg);padding:14px;border-radius:var(--rs);border:2px dashed var(--gl);cursor:pointer;user-select:all;margin:8px 0}

/* ====== VOTED CARD ====== */
.voted-card{background:var(--gbg);border:1px solid var(--g10);border-radius:16px;padding:24px 16px;text-align:center;margin-top:16px}

/* ====== HISTORY ====== */
.hist-badge{font-size:.58rem;font-weight:700;padding:2px 8px;border-radius:8px}
.bg-exact{background:rgba(245,158,11,.12);color:var(--gold)}
.bg-correct{background:var(--gbg);color:var(--g)}
.bg-voted{background:#f3f4f6;color:var(--t3)}
.bg-waiting{background:#eff6ff;color:var(--blue)}
.bg-missed{background:#fef2f2;color:var(--red)}
.bg-upcoming{background:#f3f4f6;color:var(--t3)}
.hist-teams{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:.82rem;margin-bottom:6px}
.hist-score{font-weight:800;color:var(--t1);min-width:40px;text-align:center}
.hist-vote{font-size:.72rem;color:var(--t2);text-align:center;margin-bottom:4px}
.hist-code{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:8px}
.hist-code .dc{font-size:.85rem;letter-spacing:2px;padding:8px 12px;margin:0;flex:0 0 auto}

/* ====== PHASE CARDS ====== */
.phase-card{border-left:3px solid var(--g)}

/* ====== HOW IT WORKS ====== */
.howit-steps{display:flex;flex-direction:column;gap:2px;margin-bottom:20px}
.howit-step{display:flex;align-items:center;gap:12px;padding:12px;background:var(--bg);border-radius:var(--rs)}
.hs-num{width:28px;height:28px;border-radius:50%;background:var(--g);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex-shrink:0}
.hs-text{font-size:.78rem;line-height:1.4;color:var(--t2)}
.hs-text strong{color:var(--t1)}

/* ====== AUTH ====== */
.auth-w{min-height:100vh;display:flex;flex-direction:column;background:var(--w);max-width:440px;margin:0 auto}
.auth-hero{flex:0 0 auto;background:linear-gradient(135deg,#16a34a,#15803d);padding:52px 28px 40px;text-align:center;color:#fff;position:relative;overflow:hidden}
.auth-hero::after{content:'';position:absolute;bottom:-40px;left:50%;transform:translateX(-50%);width:500px;height:80px;background:var(--w);border-radius:50%}
.auth-hero h1{font-size:2.2rem;font-weight:800;line-height:1.1;margin-bottom:4px;position:relative;z-index:1}
.auth-hero h1 span{color:rgba(255,255,255,.7);font-weight:500;font-size:1rem;display:block;margin-bottom:4px}
.auth-em{font-size:3rem;margin-bottom:12px;display:block;position:relative;z-index:1}
.auth-sub{font-size:.82rem;color:rgba(255,255,255,.8);margin-top:4px;position:relative;z-index:1}
.auth-body{flex:1;padding:32px 28px 40px;display:flex;flex-direction:column;align-items:center}
.auth-steps{display:flex;gap:6px;margin-bottom:28px}.auth-step{width:32px;height:4px;border-radius:2px;background:var(--bdr)}.auth-step.active{background:var(--g)}.auth-step.done{background:var(--gl)}
.auth-feats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:28px;width:100%;max-width:320px}
.auth-ft{text-align:center;padding:14px 6px;background:var(--bg);border-radius:var(--rs)}.auth-ft-i{font-size:1.5rem;margin-bottom:4px}.auth-ft-t{font-size:.62rem;color:var(--t2);font-weight:600;line-height:1.3}
.auth-form{width:100%;max-width:320px}
.field{margin-bottom:14px}
.field label{display:block;font-size:.7rem;font-weight:600;color:var(--t2);margin-bottom:4px;text-transform:uppercase;letter-spacing:.5px}
.field input{width:100%;padding:13px 16px;background:var(--bg);border:2px solid var(--bdr);border-radius:var(--rs);color:var(--t1);font-size:1rem;font-family:inherit;outline:none;transition:border-color .15s}
.field input:focus{border-color:var(--g);background:var(--w)}
.field input::placeholder{color:var(--t3)}
.field-code input{font-size:1.8rem;letter-spacing:12px;text-align:center;font-weight:800;padding:16px}
.auth-err{color:var(--red);font-size:.78rem;margin-top:8px;text-align:center;min-height:18px}
.auth-link{color:var(--t3);font-size:.78rem;margin-top:16px;cursor:pointer;text-align:center}.auth-link:hover{color:var(--g)}