*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--sky: #4FC3F7;--sun: #FFD54F;--grass: #81C784;--coral: #FF8A65;--violet: #9575CD;--pink: #F06292;--mint: #4DB6AC;--bg: #F0F8FF;--card: #FFFFFF;--text: #2D3748;--muted: #718096;--radius: 20px;--radius-lg: 28px;--shadow: 0 4px 0 rgba(0,0,0,.12);--shadow-lg: 0 8px 0 rgba(0,0,0,.12)}body{font-family:Nunito,Arial,sans-serif;background:var(--bg);color:var(--text);direction:rtl;min-height:100vh;overflow-x:hidden}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#e3f2fd,#f0f8ff 60%);z-index:-2}body:after{content:"☁️";position:fixed;top:40px;left:-80px;font-size:56px;opacity:.25;animation:drift 28s linear infinite;z-index:-1;pointer-events:none}@keyframes drift{0%{transform:translate(-100px)}to{transform:translate(110vw)}}.page{max-width:480px;margin:0 auto;padding:1.25rem 1rem 7rem}.card{background:var(--card);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1rem;box-shadow:var(--shadow-lg);border:2px solid rgba(255,255,255,.8);position:relative;overflow:hidden}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--sky),var(--violet),var(--pink));border-radius:var(--radius-lg) var(--radius-lg) 0 0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#fff;border:2.5px solid #E2E8F0;border-radius:99px;padding:10px 22px;font-size:15px;font-weight:700;font-family:Nunito,sans-serif;color:var(--text);cursor:pointer;box-shadow:0 4px #cbd5e0;transition:transform .1s,box-shadow .1s;text-decoration:none}.btn:hover{transform:translateY(-2px);box-shadow:0 6px #cbd5e0}.btn:active{transform:translateY(2px);box-shadow:0 2px #cbd5e0}.btn-block{width:100%}.btn-sm{padding:6px 16px;font-size:13px;box-shadow:0 3px #cbd5e0}.btn-primary{background:linear-gradient(135deg,var(--sky) 0%,var(--violet) 100%);border-color:transparent;color:#fff;box-shadow:0 4px #5c6bc0}.btn-primary:hover{box-shadow:0 6px #5c6bc0}.btn-primary:active{box-shadow:0 2px #5c6bc0}.btn-green{background:linear-gradient(135deg,var(--grass) 0%,var(--mint) 100%);border-color:transparent;color:#fff;box-shadow:0 4px #388e3c}.btn-coral{background:linear-gradient(135deg,var(--sun) 0%,var(--coral) 100%);border-color:transparent;color:#fff;box-shadow:0 4px #e64a19}.input{width:100%;background:#f7fafc;border:2.5px solid #E2E8F0;border-radius:var(--radius);padding:12px 16px;font-size:15px;font-family:Nunito,sans-serif;color:var(--text);margin-bottom:12px;transition:border-color .2s,box-shadow .2s}.input:focus{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px #4fc3f733}.stars-badge{display:flex;align-items:center;gap:4px;background:linear-gradient(135deg,#ffd54f,#ff8a65);color:#fff;font-weight:800;font-size:15px;padding:6px 14px;border-radius:99px;box-shadow:0 3px #e64a19;animation:starPulse 3s ease-in-out infinite}@keyframes starPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.progress{background:#e2e8f0;border-radius:99px;height:14px;margin:.5rem 0;overflow:hidden}.progress-fill{height:14px;border-radius:99px;background:linear-gradient(90deg,var(--sky),var(--violet));transition:width .5s cubic-bezier(.34,1.56,.64,1);position:relative}.progress-fill:after{content:"⭐";position:absolute;left:-4px;top:-2px;font-size:18px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.3))}.grade-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:1rem 0}.grade-btn{background:#fff;border:3px solid #E2E8F0;border-radius:var(--radius);padding:1rem .5rem;cursor:pointer;text-align:center;font-size:13px;font-weight:700;font-family:Nunito,sans-serif;color:var(--muted);box-shadow:0 4px #e2e8f0;transition:all .15s}.grade-btn:hover{transform:translateY(-3px);box-shadow:0 7px #c6d0dc;border-color:var(--sky)}.grade-btn.selected{border-color:var(--violet);background:#ede7f6;color:var(--violet);box-shadow:0 4px 0 var(--violet)}.grade-num{font-size:28px;font-weight:800;display:block;margin-bottom:2px}.grade-btn:nth-child(1) .grade-num{color:var(--coral)}.grade-btn:nth-child(2) .grade-num{color:var(--grass)}.grade-btn:nth-child(3) .grade-num{color:var(--sky)}.grade-btn:nth-child(4) .grade-num{color:var(--sun);filter:brightness(.8)}.grade-btn:nth-child(5) .grade-num{color:var(--pink)}.grade-btn:nth-child(6) .grade-num{color:var(--violet)}.topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.topic-btn{background:#fff;border:2.5px solid #E2E8F0;border-radius:var(--radius);padding:16px 14px;cursor:pointer;text-align:right;font-size:14px;font-weight:700;font-family:Nunito,sans-serif;color:var(--text);display:flex;flex-direction:column;align-items:flex-start;gap:6px;box-shadow:0 4px #e2e8f0;transition:all .18s}.topic-btn:hover{transform:translateY(-3px);box-shadow:0 7px #c6d0dc}.topic-btn:nth-child(1){border-color:var(--coral);background:#fff3ee}.topic-btn:nth-child(2){border-color:var(--grass);background:#f1fbf1}.topic-btn:nth-child(3){border-color:var(--sky);background:#ebf8ff}.topic-btn:nth-child(4){border-color:var(--violet);background:#f3eeff}.topic-icon{font-size:30px}.question-box{border-radius:var(--radius-lg);padding:2.5rem 1rem;text-align:center;margin:1rem 0;position:relative;overflow:hidden}.question-box-inner{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:var(--radius-lg);padding:2.5rem 1rem;text-align:center;margin:1rem 0;box-shadow:0 8px #4527a0}.question-text{font-family:Fredoka One,cursive;font-size:38px;color:#fff;text-shadow:0 3px 6px rgba(0,0,0,.3);letter-spacing:1px}.answers-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.answer-btn{background:#fff;border:3px solid #E2E8F0;border-radius:var(--radius);padding:18px;cursor:pointer;font-family:Fredoka One,cursive;font-size:26px;color:var(--text);text-align:center;box-shadow:0 5px #cbd5e0;transition:all .15s}.answer-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 8px #a0aec0;border-color:var(--sky);background:#ebf8ff}.answer-btn:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px #cbd5e0}.answer-btn.correct{background:linear-gradient(135deg,#81c784,#4db6ac);border-color:transparent;color:#fff;box-shadow:0 5px #2e7d32;animation:correctPop .4s cubic-bezier(.34,1.56,.64,1)}.answer-btn.wrong{background:linear-gradient(135deg,#ef5350,#ff8a65);border-color:transparent;color:#fff;box-shadow:0 5px #b71c1c;animation:wrongShake .4s ease}@keyframes correctPop{0%{transform:scale(1)}50%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes wrongShake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-5px)}80%{transform:translate(5px)}}.feedback{border-radius:var(--radius);padding:1rem;font-weight:800;font-size:16px;text-align:center;margin-top:.75rem;animation:feedbackSlide .3s ease}@keyframes feedbackSlide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.feedback.correct{background:linear-gradient(135deg,#e8f5e9,#e0f2f1);color:#1b5e20;border:2px solid #81C784}.feedback.wrong{background:linear-gradient(135deg,#ffebee,#fff3e0);color:#b71c1c;border:2px solid #EF9A9A}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:1rem 0}.stat-card{border-radius:var(--radius);padding:1rem .5rem;text-align:center;box-shadow:var(--shadow)}.stat-card:nth-child(1){background:linear-gradient(135deg,#e3f2fd,#bbdefb)}.stat-card:nth-child(2){background:linear-gradient(135deg,#e8f5e9,#c8e6c9)}.stat-card:nth-child(3){background:linear-gradient(135deg,#fff8e1,#ffe082)}.stat-num{font-family:Fredoka One,cursive;font-size:28px;color:var(--text)}.stat-label{font-size:12px;font-weight:700;color:var(--muted);margin-top:3px}.medals{display:flex;gap:10px;flex-wrap:wrap;margin:.75rem 0}.medal{background:linear-gradient(135deg,#fff8e1,#ffe082);border:2px solid #FFD54F;border-radius:var(--radius);padding:.75rem 1rem;font-size:12px;font-weight:700;text-align:center;flex:1;min-width:70px;box-shadow:0 3px #f9a825;animation:medalBounce .5s cubic-bezier(.34,1.56,.64,1)}@keyframes medalBounce{0%{transform:scale(0) rotate(-10deg);opacity:0}to{transform:scale(1) rotate(0);opacity:1}}.medal-icon{font-size:28px;display:block;margin-bottom:4px}.medal.locked{opacity:.3;filter:grayscale(1);animation:none}.badge{display:inline-flex;align-items:center;gap:4px;border-radius:99px;padding:4px 12px;font-size:12px;font-weight:800}.badge-purple{background:#ede7f6;color:#4527a0;border:1.5px solid #9575CD}.badge-green{background:#e8f5e9;color:#1b5e20;border:1.5px solid #81C784}.badge-amber{background:#fff8e1;color:#e65100;border:1.5px solid #FFD54F}.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:3px solid #E2E8F0;display:grid;grid-template-columns:repeat(4,1fr);z-index:100;padding:4px 0 8px;box-shadow:0 -4px 20px #00000014}.nav-item{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 2px;cursor:pointer;background:none;border:none;font-family:Nunito,sans-serif;font-size:10px;font-weight:700;color:var(--muted);transition:color .15s,transform .15s;white-space:nowrap}.nav-item:hover{transform:translateY(-2px)}.nav-item.active{color:var(--violet)}.nav-item span{font-size:22px}.paypal-btn{background:linear-gradient(135deg,#ffd54f,#ffc107);border:none;border-radius:var(--radius);padding:16px;font-size:17px;font-weight:800;cursor:pointer;width:100%;font-family:Nunito,sans-serif;color:#003087;margin-top:.75rem;box-shadow:0 5px #f57f17;transition:transform .1s,box-shadow .1s}.paypal-btn:hover{transform:translateY(-2px);box-shadow:0 7px #f57f17}.paypal-btn:active{transform:translateY(2px);box-shadow:0 3px #f57f17}.plan-card{border:3px solid #E2E8F0;border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:.75rem;cursor:pointer;transition:all .2s;box-shadow:0 4px #e2e8f0}.plan-card.selected{border-color:var(--violet);background:#ede7f6;box-shadow:0 4px 0 var(--violet);transform:translateY(-2px)}.plan-price{font-family:Fredoka One,cursive;font-size:32px;color:var(--violet)}.confetti-wrap{position:relative}@keyframes confettiFall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(120px) rotate(720deg);opacity:0}}.confetti-piece{position:absolute;top:0;width:10px;height:10px;border-radius:2px;animation:confettiFall 1.2s ease-in forwards;pointer-events:none}.hero-char{font-size:72px;text-align:center;animation:heroFloat 3s ease-in-out infinite;display:block;line-height:1}@keyframes heroFloat{0%,to{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-12px) rotate(3deg)}}h1{font-family:Fredoka One,cursive;font-size:26px;font-weight:400;color:var(--text)}h2{font-size:20px;font-weight:800;color:var(--text);margin-bottom:.25rem}h3{font-size:16px;font-weight:800}p{color:var(--muted);font-size:14px;line-height:1.6}.mt1{margin-top:1rem}.mt2{margin-top:1.5rem}.text-center{text-align:center}.flex-between{display:flex;align-items:center;justify-content:space-between}.muted{color:var(--muted);font-size:13px}.page{animation:pageIn .35s ease}@keyframes pageIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes wiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation:none!important;transition:none!important}}[data-theme=dark]{--bg: #1A1A2E;--card: #16213E;--text: #E8E8F0;--muted: #9090B0;--border: #2A2A4A}[data-theme=dark] body{background:#1a1a2e;color:#e8e8f0}[data-theme=dark] body:before{background:linear-gradient(180deg,#1a1a2e,#16213e)}[data-theme=dark] .card{background:#16213e;border-color:#2a2a4a}[data-theme=dark] .btn{background:#1e2a4a;border-color:#3a3a6a;color:#e8e8f0}[data-theme=dark] .btn:hover{background:#253560}[data-theme=dark] .input{background:#1e2a4a;border-color:#3a3a6a;color:#e8e8f0}[data-theme=dark] .input::placeholder{color:#6060a0}[data-theme=dark] .bottom-nav{background:#16213e;border-color:#2a2a4a}[data-theme=dark] .answer-btn{background:#1e2a4a;border-color:#3a3a6a;color:#e8e8f0}[data-theme=dark] .answer-btn:hover:not(:disabled){background:#253560}[data-theme=dark] .stat-card{background:#1e2a4a}[data-theme=dark] .grade-btn{background:#1e2a4a;border-color:#3a3a6a;color:#9090b0}[data-theme=dark] .topic-btn{background:#1e2a4a;border-color:#3a3a6a}[data-theme=dark] .progress{background:#2a2a4a}[data-theme=dark] h1,[data-theme=dark] h2,[data-theme=dark] h3{color:#e8e8f0}[data-theme=dark] p{color:#9090b0}
