:root{--space-deep: #0d0d2b;--space-mid: #131340;--nebula-purple: #2d1b69;--nebula-blue: #1a2980;--star-gold: #ffd700;--star-amber: #ffb347;--comet-teal: #00d4aa;--comet-pink: #ff6b9d;--white: #ffffff;--white-soft: rgba(255,255,255,.92);--white-ghost: rgba(255,255,255,.08);--white-glow: rgba(255,255,255,.15);--bubble-user: linear-gradient(135deg, #667eea 0%, #764ba2 100%);--bubble-tutor: rgba(255,255,255,.12);--radius-xl: 24px;--radius-lg: 16px;--radius-md: 12px;--radius-sm: 8px;--radius-pill: 999px;--shadow-glow: 0 0 30px rgba(102,126,234,.4);--shadow-card: 0 8px 32px rgba(0,0,0,.3);--shadow-btn: 0 4px 15px rgba(0,0,0,.3);--font-display: "Fredoka One", cursive;--font-body: "Nunito", sans-serif;--transition: .25s cubic-bezier(.34, 1.56, .64, 1)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font-body);background:var(--space-deep);color:var(--white);-webkit-font-smoothing:antialiased}.cosmic-bg{position:fixed;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 20% 50%,rgba(45,27,105,.6) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(26,41,128,.5) 0%,transparent 55%),radial-gradient(ellipse at 60% 80%,rgba(0,212,170,.15) 0%,transparent 50%),linear-gradient(180deg,#0d0d2b,#131340,#0d0d2b);z-index:0}.cosmic-bg:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-image:radial-gradient(1px 1px at 10% 15%,rgba(255,255,255,.8) 0%,transparent 100%),radial-gradient(1px 1px at 25% 35%,rgba(255,255,255,.6) 0%,transparent 100%),radial-gradient(1px 1px at 40% 10%,rgba(255,255,255,.9) 0%,transparent 100%),radial-gradient(1px 1px at 55% 60%,rgba(255,255,255,.5) 0%,transparent 100%),radial-gradient(1px 1px at 70% 25%,rgba(255,255,255,.7) 0%,transparent 100%),radial-gradient(1px 1px at 85% 45%,rgba(255,255,255,.8) 0%,transparent 100%),radial-gradient(1px 1px at 15% 75%,rgba(255,255,255,.6) 0%,transparent 100%),radial-gradient(1px 1px at 90% 80%,rgba(255,255,255,.5) 0%,transparent 100%),radial-gradient(2px 2px at 50% 50%,rgba(255,215,0,.6) 0%,transparent 100%),radial-gradient(1px 1px at 30% 90%,rgba(255,255,255,.7) 0%,transparent 100%);animation:twinkle 4s ease-in-out infinite alternate}@keyframes twinkle{0%{opacity:.6}to{opacity:1}}.page{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;overflow:hidden}.card{background:#ffffff12;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-xl);box-shadow:var(--shadow-card)}h1,h2,h3{font-family:var(--font-display);letter-spacing:.02em}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 28px;border:none;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:1rem;font-weight:800;cursor:pointer;transition:transform var(--transition),box-shadow var(--transition);text-decoration:none;white-space:nowrap}.btn:active{transform:scale(.95)!important}.btn-primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 20px #667eea80}.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 30px #667eeab3}.btn-gold{background:linear-gradient(135deg,var(--star-gold) 0%,var(--star-amber) 100%);color:#1a1a2e;box-shadow:0 4px 20px #ffd70066}.btn-gold:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 30px #ffd70099}.btn-teal{background:linear-gradient(135deg,var(--comet-teal) 0%,#00a8cc 100%);color:#0d0d2b;box-shadow:0 4px 20px #00d4aa66}.btn-teal:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 8px 30px #00d4aa99}.btn-ghost{background:var(--white-ghost);color:var(--white);border:1px solid var(--white-glow)}.btn-ghost:hover{background:var(--white-glow);transform:translateY(-2px)}.btn-sm{padding:10px 20px;font-size:.875rem}.btn-lg{padding:18px 36px;font-size:1.125rem}.btn-full{width:100%}.input{width:100%;padding:14px 18px;background:#ffffff14;border:1.5px solid rgba(255,255,255,.15);border-radius:var(--radius-lg);color:#fff;font-family:var(--font-body);font-size:1rem;font-weight:600;transition:border-color .2s,box-shadow .2s;outline:none}.input::placeholder{color:#ffffff59}.input:focus{border-color:#667eeacc;box-shadow:0 0 0 3px #667eea33}.input-label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ffffff80;margin-bottom:6px}.form-group{display:flex;flex-direction:column;gap:6px}[dir=rtl]{font-family:var(--font-body)}[dir=rtl] .chat-bubble-user{border-radius:20px 4px 20px 20px}[dir=rtl] .chat-bubble-tutor{border-radius:4px 20px 20px}::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{0%{transform:scale(.8);opacity:0}70%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes pulse-glow{0%,to{box-shadow:0 0 20px #667eea66}50%{box-shadow:0 0 40px #667eeacc}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.animate-fade-up{animation:fadeUp .5s ease forwards}.animate-pop{animation:pop .4s cubic-bezier(.34,1.56,.64,1) forwards}.animate-float{animation:float 3s ease-in-out infinite}.animate-spin{animation:spin 1s linear infinite}.alert-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--comet-pink);border-radius:50%;font-size:.7rem;font-weight:800;color:#fff;animation:pulse-glow 2s ease-in-out infinite}.comic-page{background:#faf6e8;background-image:radial-gradient(circle,rgba(0,0,0,.08) 1px,transparent 1px);background-size:6px 6px;min-height:100%;padding:12px 10px 16px;display:flex;flex-direction:column;gap:0}.comic-panel{position:relative;background:#fffef5;border:3px solid #1a1a1a;overflow:visible}.comic-panel:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border:1.5px solid rgba(0,0,0,.15);border-radius:1px;pointer-events:none}.comic-row{display:flex;width:100%;margin-bottom:-3px}.panel-tutor{flex:0 0 62%;border-right-width:1.5px}.panel-kid{flex:1;border-left-width:1.5px}.panel-full{width:100%}.speech-bubble{position:relative;background:#fff;border:2.5px solid #1a1a1a;border-radius:18px;padding:10px 14px;font-family:Bangers,cursive;font-size:clamp(.95rem,3.5vw,1.15rem);letter-spacing:.03em;line-height:1.35;color:#1a1a2e;box-shadow:2px 2px #1a1a1a;word-break:break-word}.speech-bubble.tutor:after{content:"";position:absolute;bottom:-14px;left:20px;width:0;height:0;border-left:8px solid transparent;border-right:4px solid transparent;border-top:14px solid #1a1a1a}.speech-bubble.tutor:before{content:"";position:absolute;bottom:-10px;left:22px;width:0;height:0;border-left:6px solid transparent;border-right:3px solid transparent;border-top:11px solid white;z-index:1}.speech-bubble.kid:after{content:"";position:absolute;bottom:-14px;right:20px;width:0;height:0;border-left:4px solid transparent;border-right:8px solid transparent;border-top:14px solid #1a1a1a}.speech-bubble.kid:before{content:"";position:absolute;bottom:-10px;right:22px;width:0;height:0;border-left:3px solid transparent;border-right:6px solid transparent;border-top:11px solid white;z-index:1}.speech-bubble.thinking{border-radius:50%/60% 60% 40% 40%}.caption-box{background:gold;border:2px solid #1a1a1a;padding:4px 10px;font-family:Bangers,cursive;font-size:.8rem;letter-spacing:.06em;color:#1a1a2e;box-shadow:2px 2px #1a1a1a;display:inline-block}.sound-effect{font-family:Bangers,cursive;font-size:clamp(1.8rem,8vw,2.8rem);letter-spacing:.05em;color:gold;-webkit-text-stroke:3px #1a1a1a;text-shadow:4px 4px 0 #1a1a1a;text-align:center;animation:pop .4s cubic-bezier(.34,1.56,.64,1) forwards;display:block}.chalkboard-panel{background:linear-gradient(160deg,#1a3a2a,#0f2d1f,#1a3a2a);border:3px solid #1a1a1a;border-top:none;position:relative;overflow:hidden}.chalkboard-panel:after{content:"";position:absolute;bottom:0;left:0;right:0;height:8px;background:linear-gradient(90deg,#2d5a3d,#4a8a5d,#2d5a3d)}.panel-enter{animation:panelSlideIn .4s cubic-bezier(.34,1.2,.64,1) forwards}@keyframes panelSlideIn{0%{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.tilt-l{transform:rotate(-.4deg)}.tilt-r{transform:rotate(.3deg)}.tilt-n{transform:rotate(-.2deg)}.comic-character{display:block;filter:drop-shadow(2px 2px 0px rgba(0,0,0,.25))}.panel-inner{padding:10px 12px 14px;display:flex;flex-direction:column;gap:10px;min-height:100px}.comic-typing{display:flex;gap:5px;align-items:center;padding:8px 0}.comic-typing-dot{width:8px;height:8px;border-radius:50%;background:#1a1a2e;border:1.5px solid #1a1a1a}