@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');
:root{
 --bg:#03152b;--panel:#071f3c;--panel2:#0a2b50;--blue:#0b8cff;--cyan:#20d7ff;
 --gold:#ffc21a;--gold2:#ff8b00;--green:#19d17f;--red:#ff3d45;--text:#f7fbff;--muted:#a8c0d9;
 --line:rgba(255,255,255,.13);--shadow:0 20px 60px rgba(0,0,0,.45);
}
*{box-sizing:border-box}html{min-height:100%;background:#020c1c}
body{margin:0;min-height:100vh;color:var(--text);font-family:Vazirmatn,Tahoma,Arial,sans-serif;
 background:radial-gradient(circle at 50% -10%,#14518c 0,#06203f 38%,#020b19 80%);overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22;background:
 radial-gradient(circle at 10% 20%,#19bfff 0 1px,transparent 2px),radial-gradient(circle at 80% 35%,#ffd43b 0 1px,transparent 2px);
 background-size:95px 95px,130px 130px;animation:stars 10s linear infinite}
@keyframes stars{to{background-position:95px 30px,-130px 50px}}
button,input,select{font:inherit}button{cursor:pointer;border:0;color:#fff;font-weight:800}
.hidden{display:none!important}.muted{color:var(--muted);line-height:1.9}
.primary,.secondary,.danger{border-radius:16px;padding:13px 18px;transition:.2s;box-shadow:0 8px 25px rgba(0,0,0,.3)}
.primary{background:linear-gradient(135deg,#20bfff,#0873ff);border:1px solid #58d7ff;box-shadow:0 0 0 1px #0873ff inset,0 8px 30px rgba(0,125,255,.35)}
.primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.secondary{background:linear-gradient(135deg,#163f70,#0a2850);border:1px solid #4778a8}.danger{background:linear-gradient(135deg,#ff4b4b,#b90e21)}
/* login */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:18px;background:
 linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.5)),url("sports-art.png") center/cover fixed}
.login-wrap:after{content:"";position:fixed;inset:0;background:linear-gradient(180deg,rgba(0,19,48,.15),#020b18 95%);z-index:0}
.login-card{position:relative;z-index:1;width:min(430px,94vw);padding:28px 22px;border:1px solid rgba(69,201,255,.65);
 border-radius:30px;background:linear-gradient(180deg,rgba(5,35,69,.93),rgba(2,18,38,.96));box-shadow:0 30px 100px #000b,0 0 45px #008cff33;text-align:center;backdrop-filter:blur(14px)}
.ball{font-size:62px;filter:drop-shadow(0 0 18px #28bfff);animation:float 2.2s ease-in-out infinite}@keyframes float{50%{transform:translateY(-9px) rotate(8deg)}}
.login-card h1{font-size:30px;margin:5px 0;color:#ffd52a;text-shadow:0 3px 0 #7c3b00,0 0 22px #ffb300}
.login-card input,.login-card select, input,select{width:100%;padding:13px 14px;border-radius:14px;border:1px solid #38648c;background:#061a31;color:#fff;outline:none}
.login-card input:focus,input:focus,select:focus{border-color:#2bcfff;box-shadow:0 0 0 3px #1abaff22}
.login-card .primary{width:100%;margin-top:8px}.login-card hr{border:0;border-top:1px solid var(--line);margin:22px 0}
.account-note{color:#79ffbd;font-size:13px}.error{color:#ff7780;min-height:22px}
/* shell */
#app{min-height:100vh;max-width:1100px;margin:auto;padding-bottom:92px}
header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:13px 18px;
 background:rgba(2,17,36,.82);border-bottom:1px solid #4bbdff33;backdrop-filter:blur(16px)}
header strong{font-size:18px;color:#ffd42a;text-shadow:0 0 15px #ff9d00}
header select{width:auto;min-width:110px;padding:8px 12px}
.tabs{display:flex;gap:8px;padding:12px 14px;position:sticky;top:58px;z-index:19;background:linear-gradient(180deg,#03162bfa,#03162bdd);backdrop-filter:blur(12px)}
.tab{flex:1;background:#092b4e;border:1px solid #2f618d;padding:11px;border-radius:14px;color:#b8d7f2}
.tab.active{background:linear-gradient(135deg,#087dff,#0751ba);color:#fff;border-color:#54cfff;box-shadow:0 0 22px #008cff44}
main{padding:8px 14px}.panel{animation:panelIn .35s ease}@keyframes panelIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.panel h2{font-size:23px;margin:14px 0 7px;text-shadow:0 3px 15px #000}
.hero{position:relative;overflow:hidden;display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:center;min-height:420px;padding:30px;
 border-radius:30px;border:1px solid #3bc9ff77;background:linear-gradient(135deg,#062a52dd,#031326dd),url("sports-art.png") center/cover;box-shadow:var(--shadow)}
.hero:after{content:"";position:absolute;inset:auto -20% -55% -20%;height:70%;background:#08aaff22;filter:blur(35px);border-radius:50%}
.hero h1{font-size:42px;line-height:1.25;margin:8px 0}.hero h1 span{color:#ffd22b;text-shadow:0 0 20px #ff9e00}
.hero p{font-size:16px;color:#d4e7fa}.hero-ball{position:relative;z-index:1}.hero-ball img{display:block;width:100%;max-height:330px;object-fit:cover;border-radius:25px;border:2px solid #42c9ff;box-shadow:0 0 45px #008cff55;animation:heroPulse 3s ease-in-out infinite}
@keyframes heroPulse{50%{transform:scale(1.02);box-shadow:0 0 65px #00aaff77}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}.stats div{padding:17px;border-radius:18px;text-align:center;background:linear-gradient(145deg,#0a3157,#061b34);border:1px solid #3c7da8}
.stats b{display:block;font-size:28px;color:#ffd32c}.stats span{font-size:12px;color:#aac8e4}
.inline-form{display:flex;gap:8px;margin:15px 0}.inline-form input{flex:1}
.table-wrap{overflow:auto;border-radius:18px;border:1px solid #2b587d;background:#04182d}.people-table{width:100%;border-collapse:collapse;min-width:650px}.people-table th,.people-table td{padding:12px;border-bottom:1px solid #ffffff12;text-align:center}.people-table th{color:#8fdcff;background:#0a3156}.people-table td{background:#061e38}.people-table input{width:20px;height:20px;accent-color:#10a7ff}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.import-label{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:14px;background:#0b2e51;border:1px solid #447ba5;cursor:pointer}.import-label input{display:none}
.draw-controls{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;padding:15px;border:1px solid #34729e;border-radius:20px;background:linear-gradient(135deg,#092e51,#051a31);box-shadow:var(--shadow)}
.draw-controls label{display:grid;gap:7px;color:#bcd7ed;font-weight:700}.draw-controls .primary{align-self:end}
.wheel-stage{position:relative;display:grid;place-items:center;min-height:520px;margin:14px 0;border-radius:28px;overflow:hidden;
 background:radial-gradient(circle,#104b78,#03152a 65%);border:1px solid #39bfff55;box-shadow:inset 0 0 80px #000,0 15px 40px #0008}
.wheel{width:min(390px,78vw);aspect-ratio:1;border-radius:50%;border:14px solid #e3a600;outline:5px solid #ffec79;box-shadow:0 0 0 8px #6f4100,0 0 35px #ffc400,0 0 90px #00baff55;display:grid;place-items:center;position:relative;transition:transform 1s cubic-bezier(.12,.8,.18,1);overflow:hidden}
.wheel:after{content:"";width:78px;height:78px;border-radius:50%;background:radial-gradient(circle,#fff,#d7e7ef 45%,#182b3a 47%,#07192a 65%);position:absolute;border:4px solid #f5b719;box-shadow:0 0 20px #000}
.wheel span{position:relative;z-index:2;color:#fff;font-weight:900;font-size:20px;text-shadow:0 2px 5px #000;max-width:50%;text-align:center}
.pointer{position:absolute;top:22px;z-index:4;font-size:58px;color:#ffcf22;text-shadow:0 0 18px #ff6a00,0 4px 0 #8b4300;animation:pointerPulse .7s ease-in-out infinite alternate}
@keyframes pointerPulse{to{transform:translateY(5px) scale(1.05)}}
.wheel.spinning{animation:wheelSpin 1.5s cubic-bezier(.08,.85,.12,1)}@keyframes wheelSpin{to{transform:rotate(1080deg)}}
.status{text-align:center;font-weight:800;color:#a9ddff;min-height:28px}
.results{display:grid;gap:12px}.winner{position:relative;padding:25px;text-align:center;border-radius:24px;background:radial-gradient(circle at 50% 0,#ffd52c55,#1b2d46 35%,#07192c);border:2px solid #ffc928;box-shadow:0 0 35px #ffb00055;overflow:hidden;animation:winnerIn .65s cubic-bezier(.2,1.4,.3,1)}.winner:before{content:"✦ ✧ ✦";position:absolute;inset:8px;color:#ffe066;letter-spacing:35px;opacity:.7}.winner strong{display:block;font-size:30px;color:#ffe02b;text-shadow:0 0 18px #ff9b00;margin:5px}.winner span{display:block;color:#fff}.winner small{color:#d9e9f8}
@keyframes winnerIn{from{opacity:0;transform:scale(.75) translateY(25px)}to{opacity:1;transform:none}}
#historyList{display:grid;gap:8px}.history-item{padding:13px;border-radius:15px;background:#072543;border:1px solid #2e5f83}
footer{text-align:center;color:#7090aa;font-size:11px;padding:18px}
/* mobile-first */
@media(max-width:700px){
 body{background:radial-gradient(circle at 50% -10%,#0e4778,#03172c 45%,#020913)}
 #app{padding-bottom:86px}header{padding:10px 12px}header strong{font-size:15px}.tabs{top:50px;display:none}
 main{padding:7px 10px}.panel h2{font-size:20px}
 .hero{display:block;min-height:590px;padding:20px 16px;border-radius:25px;background-position:center}
 .hero h1{font-size:32px;margin-top:10px}.hero p{font-size:14px}.hero .primary{width:100%;margin-top:10px}.hero-ball{margin-top:18px}.hero-ball img{max-height:245px}
 .stats{gap:7px}.stats div{padding:12px 5px}.stats b{font-size:23px}.stats span{font-size:10px}
 .inline-form{display:grid;grid-template-columns:1fr}.inline-form .primary{width:100%}
 .draw-controls{grid-template-columns:1fr 1fr}.draw-controls .primary{grid-column:1/-1}
 .wheel-stage{min-height:475px;border-radius:24px}.wheel{width:min(330px,84vw);border-width:11px}
 .pointer{top:14px;font-size:48px}.wheel span{font-size:16px}
 .toolbar>*{flex:1;text-align:center}.people-table{min-width:590px}
 footer{display:none}
 .mobile-nav{display:grid!important}
}
.mobile-nav{display:none;position:fixed;z-index:50;bottom:0;left:0;right:0;padding:8px 10px calc(8px + env(safe-area-inset-bottom));grid-template-columns:repeat(4,1fr);gap:6px;background:rgba(2,16,34,.94);border-top:1px solid #43c6ff55;backdrop-filter:blur(16px)}
.mobile-nav button{padding:9px 4px;border-radius:14px;background:#082744;color:#8fb0c9;font-size:11px}.mobile-nav button.active{background:linear-gradient(135deg,#087eff,#064aa9);color:#fff;box-shadow:0 0 20px #008cff44}
.spark{position:fixed;width:7px;height:7px;border-radius:50%;background:#ffd34d;pointer-events:none;z-index:100;animation:spark 900ms ease-out forwards;box-shadow:0 0 10px #fff}.shake{animation:shake .35s}@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}@keyframes spark{to{transform:translate(var(--x),var(--y)) scale(.1);opacity:0}}