:root{--teal: #0f766e;--teal-dark: #0b5f58;--teal-deep: #0a4a44;--teal-soft: #ddf0ec;--teal-mist: #eef7f5;--sun: #f2b64b;--gold: #d4a017;--gold-soft: #fdf3d7;--coral: #ef8354;--coral-soft: #fdeee6;--leaf: #7fb069;--leaf-soft: #eaf4e4;--sky-top: #fff9ef;--sky-bottom: #ffeed9;--card: #ffffff;--ink: #40342c;--muted: #8a7868;--danger: #b3402e;--radius: 28px;--font-latin: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;--font-arabic: "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, "Arial", sans-serif;--shadow-warm: 0 10px 30px rgba(242, 182, 75, .22);--shadow-soft: 0 6px 24px rgba(15, 118, 110, .1)}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-latin);color:var(--ink);-webkit-font-smoothing:antialiased;min-height:100vh;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 100%);background-attachment:fixed;overflow-x:hidden}body:before,body:after{content:"";position:fixed;border-radius:50%;filter:blur(60px);opacity:.5;pointer-events:none;z-index:-1}body:before{width:340px;height:340px;background:#ffe3ae;top:-90px;left:-70px;animation:cloudDrift 26s ease-in-out infinite alternate}body:after{width:300px;height:300px;background:#ffd9c4;bottom:-110px;right:-60px;animation:cloudDrift 32s ease-in-out infinite alternate-reverse}@keyframes cloudDrift{to{transform:translate(46px,30px)}}#root,.app{min-height:100vh}h1{font-size:1.9rem;font-weight:900;margin:0 0 .5rem;color:var(--teal-deep)}h2{font-size:1.5rem;font-weight:900;margin:0 0 .75rem;color:var(--teal-deep)}p{line-height:1.55}.muted{color:var(--muted)}.small{font-size:.85rem}.arabic{font-family:var(--font-arabic);direction:rtl;unicode-bidi:isolate}.session,.parent{max-width:880px;margin:0 auto;padding:16px 16px calc(48px + env(safe-area-inset-bottom));padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));display:flex;flex-direction:column;gap:16px}.session.center{justify-content:center;align-items:center;min-height:100vh;min-height:100dvh;padding-bottom:max(16px,env(safe-area-inset-bottom))}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-soft),var(--shadow-warm);padding:24px;border:3px solid rgba(242,182,75,.25)}.card.narrow{width:100%;max-width:520px;text-align:center}.big-emoji{font-size:3.4rem;margin-bottom:.5rem;animation:gentlePop .5s ease}@keyframes gentlePop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08)}to{transform:scale(1);opacity:1}}.btn{font-family:var(--font-latin);font-weight:900;font-size:1.1rem;min-height:64px;padding:14px 30px;border-radius:999px;border:none;cursor:pointer;transition:transform .08s ease,box-shadow .15s ease,background .15s ease;touch-action:manipulation}.btn:active{transform:scale(.96)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:linear-gradient(160deg,var(--teal),var(--teal-deep));color:#fff;box-shadow:0 6px 18px #0f766e66}.btn.primary:hover:not(:disabled){background:var(--teal-dark)}.btn.gold{background:linear-gradient(160deg,var(--sun),var(--gold));color:#4a3403;box-shadow:0 6px 18px #d4a01766}.btn.ghost{background:var(--teal-mist);color:var(--teal-deep)}.btn.danger{background:#fbe9e5;color:var(--danger);border:2px solid var(--danger)}.btn.big{font-size:1.35rem;min-height:72px;padding:16px 48px;margin-top:12px}.btn.small{min-height:48px;font-size:.95rem;padding:8px 18px}.link{background:none;border:none;color:var(--teal);font-weight:800;font-size:1rem;cursor:pointer;padding:12px;align-self:flex-start;min-height:48px}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px}.timer{background:var(--teal-deep);color:#fff;font-weight:900;font-size:1.25rem;padding:12px 22px;border-radius:999px;min-height:56px;display:flex;align-items:center;white-space:nowrap;flex:none;box-shadow:var(--shadow-soft)}.timer.low{background:linear-gradient(160deg,var(--sun),var(--gold));color:#4a3403;animation:softPulse 1.6s ease-in-out infinite}@keyframes softPulse{50%{transform:scale(1.04)}}.top-actions{display:flex;gap:10px}.top-actions .btn{white-space:nowrap}@media(max-width:430px){.top-actions .btn{padding:10px 14px;font-size:.95rem;min-height:52px}.timer{padding:10px 16px;font-size:1.05rem;min-height:52px}}.notice{background:var(--gold-soft);border:3px solid var(--sun);color:#6b4e06;font-weight:800;text-align:center;padding:14px;border-radius:var(--radius)}.paused-overlay,.break-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#40342c80;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(16px,env(safe-area-inset-bottom))}.break-card{border-color:var(--sun);animation:gentlePop .45s ease}.breathe{width:110px;height:110px;margin:0 auto 12px;border-radius:50%;background:radial-gradient(circle,var(--gold-soft) 30%,var(--sun) 100%);display:flex;align-items:center;justify-content:center;font-size:2.6rem;animation:breathe 4s ease-in-out infinite}@keyframes breathe{0%,to{transform:scale(1)}50%{transform:scale(1.18)}}.avatar-wrap{min-height:300px}.welcome-hero .avatar-stage,.session.center .avatar-stage{height:240px}.avatar-stage{height:clamp(300px,42vh,460px);border-radius:var(--radius);background:radial-gradient(circle at 50% 22%,#fffdf7,#fff3dc 45%,#ffe6bd);box-shadow:var(--shadow-soft),var(--shadow-warm);border:3px solid rgba(242,182,75,.35);overflow:hidden;position:relative}.avatar-stage:before{content:"";position:absolute;top:-46px;right:-46px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,#ffd97a,#ffd97a00 70%);pointer-events:none}.avatar-canvas{width:100%;height:100%}.avatar-canvas canvas{width:100%!important;height:100%!important;display:block}.svg-wrap{display:flex;align-items:center;justify-content:center}.svg-aapa{height:92%;width:auto}.svg-bob{animation:svgBob 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes svgBob{50%{transform:translateY(-7px)}}.svg-aapa.mode-greeting .svg-bob{animation:svgBounce .7s ease-in-out 4}@keyframes svgBounce{50%{transform:translateY(-22px)}}.svg-aapa.mode-happy .svg-bob{animation:svgNod .45s ease-in-out 4}@keyframes svgNod{50%{transform:translateY(10px)}}.svg-aapa.mode-encourage .svg-bob{animation:svgLeanIn 2.2s ease-in-out 1}@keyframes svgLeanIn{30%,70%{transform:scale(1.07) translateY(6px)}}.svg-aapa.mode-celebrate .svg-bob{animation:svgBounce .6s ease-in-out infinite}.svg-eyes{animation:svgBlink 4.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}@keyframes svgBlink{0%,93%,to{transform:scaleY(1)}96%{transform:scaleY(.1)}}.svg-wave{animation:svgWave .9s ease-in-out infinite;transform-box:fill-box;transform-origin:170px 200px}@keyframes svgWave{50%{transform:rotate(18deg)}}.stage{display:flex;flex-direction:column;gap:16px}.step-progress{display:flex;align-items:center;gap:12px;font-weight:800;color:var(--teal-deep)}.star-chip{background:linear-gradient(160deg,var(--sun),var(--gold));color:#4a3403;border-radius:999px;padding:10px 18px;font-size:1.15rem;font-weight:900;white-space:nowrap;box-shadow:0 4px 12px #d4a01759}.step-count{white-space:nowrap;font-size:1.05rem}.progress-track{flex:1;height:16px;background:#fff;border:2px solid rgba(242,182,75,.4);border-radius:999px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--sun));border-radius:999px;transition:width .5s ease}.letter-hero{display:flex;align-items:center;gap:24px;justify-content:center;flex-wrap:wrap;padding:18px 12px;background:linear-gradient(180deg,#fffdf8,#fff6e6);border:3px solid var(--sun);border-radius:24px;box-shadow:inset 0 2px #fff,var(--shadow-warm);position:relative}.letter-hero:after{content:"";position:absolute;left:50%;bottom:-9px;transform:translate(-50%);width:120px;height:14px;border-radius:999px;background:linear-gradient(90deg,var(--sun),var(--gold));opacity:.85}.letter-glyph{font-size:clamp(120px,28vw,180px);font-weight:700;line-height:1.15;color:var(--teal-deep);background:#fff;border-radius:24px;padding:6px 36px 22px;border:3px solid rgba(15,118,110,.18);box-shadow:0 8px 20px #0f766e1f}.letter-glyph.mystery{font-family:var(--font-latin);font-size:clamp(90px,20vw,130px);color:var(--gold);background:var(--gold-soft);border-color:#d4a01773;min-width:190px;text-align:center}.letter-meta{display:flex;flex-direction:column;gap:10px;min-width:180px;max-width:320px}.letter-name{font-size:1.9rem;font-weight:900;color:var(--teal-deep)}.translit{font-size:1.3rem;font-weight:700;color:var(--muted);font-style:italic}.chip{font-size:1.05rem;border-radius:16px;padding:12px 16px;font-weight:700;line-height:1.45}.sound-cue{background:var(--gold-soft);border:2px solid rgba(212,160,23,.35);color:#6b4e06}.example-word{background:var(--teal-mist);border:2px solid rgba(15,118,110,.18);color:var(--teal-deep)}.example-word .arabic{font-size:1.5em;font-weight:700}.mouth-cue{font-size:.95rem;color:var(--muted);padding:2px 4px;line-height:1.5}.letter-chip{display:inline-flex;align-items:center;gap:10px;background:#fff;border:2px solid rgba(242,182,75,.5);border-radius:999px;padding:8px 20px;font-weight:800;color:var(--teal-deep);align-self:flex-start;box-shadow:var(--shadow-soft)}.letter-chip .arabic{font-size:1.8rem;font-weight:700}.bubble{display:flex;gap:10px;align-items:flex-start;padding:14px 16px;border-radius:20px;font-size:1.1rem;line-height:1.5;max-width:100%}.teacher-bubble{background:var(--teal-mist);border:2px solid rgba(15,118,110,.12);color:var(--ink);border-bottom-left-radius:8px}.child-bubble{background:var(--gold-soft);border:2px solid rgba(212,160,23,.4);border-bottom-right-radius:8px;margin-left:auto;flex-direction:row-reverse;text-align:right;max-width:85%}.system-bubble{background:#f5f0e8;color:var(--muted);font-size:.95rem;justify-content:center;text-align:center}.bubble-avatar{font-size:1.5rem;flex-shrink:0}.typing-dots{display:inline-flex;gap:5px;padding:6px 0}.typing-dots i{width:9px;height:9px;border-radius:50%;background:var(--teal);animation:typingBounce 1.1s infinite}.typing-dots i:nth-child(2){animation-delay:.15s}.typing-dots i:nth-child(3){animation-delay:.3s}@keyframes typingBounce{40%{transform:translateY(-6px)}}.actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.feedback{text-align:center;font-size:1.3rem;font-weight:900;padding:16px;border-radius:18px;animation:popIn .25s ease}.feedback.praise{background:var(--gold-soft);color:#6b4e06;border:3px solid var(--sun)}.feedback.retry{background:var(--teal-mist);color:var(--teal-deep);border:3px solid var(--teal)}@keyframes popIn{0%{transform:scale(.92);opacity:0}}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.btn.option{background:#fff;border:4px solid var(--teal);color:var(--teal-deep);font-size:1.5rem;min-height:88px;box-shadow:var(--shadow-soft)}.btn.option:active{background:var(--teal-mist);transform:scale(.96)}.options-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}.dots{display:inline-flex;gap:6px}.dot{width:10px;height:10px;border-radius:50%;background:#e8dcc8}.dot.on{background:var(--sun)}.tabs{display:flex;gap:8px;background:#fff3df;border:2px solid rgba(242,182,75,.35);border-radius:999px;padding:6px;margin-bottom:16px}.tab{flex:1;border:none;background:transparent;font-family:var(--font-latin);font-weight:900;font-size:1.15rem;min-height:60px;border-radius:999px;cursor:pointer;color:var(--teal-deep)}.tab.active{background:#fff;box-shadow:0 2px 8px #0f766e2e}.talk-tab{display:flex;flex-direction:column;align-items:center;gap:14px;padding:8px 0}.hold-btn{font-family:var(--font-latin);font-weight:900;font-size:1.45rem;color:#4a3403;background:linear-gradient(160deg,#ffd97a,var(--sun));border:4px solid #fff;border-radius:999px;min-height:104px;min-width:280px;padding:18px 52px;cursor:pointer;box-shadow:0 10px 28px #f2b64b80;touch-action:none;user-select:none;-webkit-user-select:none}.hold-btn.live{background:linear-gradient(160deg,var(--coral),#d96a3c);color:#fff;animation:softPulse 1.2s ease-in-out infinite}.hold-btn:disabled{opacity:.7}.mic-meter{width:220px;height:12px;background:#f0e6d2;border-radius:999px;overflow:hidden}.mic-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--sun));border-radius:999px;transition:width .08s linear}.hint{color:var(--muted);margin:0;text-align:center}.banner{background:var(--gold-soft);border:3px dashed var(--sun);border-radius:18px;padding:18px;text-align:center;font-weight:700;color:#6b4e06;display:flex;flex-direction:column;gap:12px;align-items:center}.error-line{color:var(--danger);font-weight:700;text-align:center}.chat-tab{display:flex;flex-direction:column;gap:12px}.chat-log{display:flex;flex-direction:column;gap:10px;max-height:320px;overflow-y:auto;padding:4px}.chat-input-row{display:flex;gap:10px}.chat-input{flex:1;font-family:var(--font-latin);font-size:1.1rem;min-height:60px;border-radius:999px;border:3px solid rgba(242,182,75,.5);padding:0 20px;outline:none;background:#fffdf8}.chat-input:focus{border-color:var(--sun)}.welcome-hero{width:100%;max-width:520px}.recap{background:var(--teal-mist);border-radius:18px;padding:16px 18px;margin:16px 0;font-size:1.05rem;text-align:left;border-left:6px solid var(--teal)}.recap-label{display:block;font-size:.8rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--teal);margin-bottom:4px}.disclosure .disclosure-text{font-size:1.25rem;line-height:1.6;background:var(--gold-soft);border:3px solid rgba(212,160,23,.4);border-radius:18px;padding:18px}.stars-earned{font-size:2rem;font-weight:900;color:#8a6104;margin:6px 0 10px;animation:starShine 1.6s ease-in-out infinite}@keyframes starShine{50%{transform:scale(1.07)}}.celebrate-line{font-size:1.3rem}.spinner{width:48px;height:48px;border:5px solid var(--gold-soft);border-top-color:var(--sun);border-radius:50%;margin:12px auto;animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:60}.confetto{position:absolute;top:-24px;border-radius:3px;animation-name:confettiFall;animation-timing-function:linear;animation-fill-mode:forwards;opacity:.95}.confetto.round{border-radius:50%}@keyframes confettiFall{0%{transform:translate3d(0,-24px,0) rotate(0);opacity:1}to{transform:translate3d(var(--sway, 40px),108vh,0) rotate(var(--spin, 200deg));opacity:.7}}.gate-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;padding:20px;padding-top:max(20px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom))}.gate-card{width:100%;max-width:420px;text-align:center;border-color:var(--sun)}.gate-sun{font-size:3rem;display:block;margin-bottom:4px;animation:gentlePop .5s ease}.gate-input{width:100%;padding:14px;font-size:1.15rem;font-family:var(--font-latin);border-radius:16px;border:3px solid rgba(242,182,75,.55);margin-bottom:12px;min-height:60px;outline:none;background:#fffdf8}.gate-input:focus{border-color:var(--sun)}.gate-error{color:var(--danger);font-weight:700}.parent-header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}.stat{text-align:center;padding:18px 12px}.stat-num{font-size:2.2rem;font-weight:900;color:var(--gold)}.stat-label{font-weight:700;color:var(--muted);margin-top:4px}.pin-card form{display:flex;flex-direction:column;align-items:center;gap:12px}.pin-input{font-size:2rem;letter-spacing:1.2rem;text-indent:.6rem;text-align:center;width:220px;min-height:64px;border-radius:16px;border:3px solid rgba(242,182,75,.55);outline:none;font-weight:800;color:var(--teal-deep);background:#fffdf8}.pin-input:focus{border-color:var(--sun)}.pin-dots{display:flex;gap:10px}.pin-dot{width:14px;height:14px;border-radius:50%;background:#eadfc9}.pin-dot.on{background:var(--sun)}.letter-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}.letter-row{display:flex;align-items:center;gap:14px}.letter-glyph-sm{font-size:2.2rem;font-weight:700;color:var(--teal-deep);background:var(--teal-mist);width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:16px;flex-shrink:0;border:2px solid rgba(15,118,110,.15)}.letter-row-name{font-weight:800;min-width:110px}.bar{flex:1;height:14px;background:#f3ecdc;border-radius:999px;overflow:hidden}.bar-fill{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--sun));border-radius:999px;transition:width .5s ease}.pct{font-weight:800;color:var(--teal-deep);min-width:48px;text-align:right}.table-wrap{overflow-x:auto}.sessions-table{width:100%;border-collapse:collapse;font-size:1rem}.sessions-table th,.sessions-table td{text-align:left;padding:12px 10px;border-bottom:1px solid #f3ecdc}.sessions-table th{color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.05em}.field{display:flex;flex-direction:column;gap:8px;font-weight:700}.field-row{display:flex;gap:10px}.num-input{font-family:var(--font-latin);font-size:1.1rem;font-weight:700;min-height:56px;border-radius:14px;border:2px solid rgba(242,182,75,.5);padding:0 16px;width:160px;outline:none;background:#fffdf8}.num-input:focus{border-color:var(--sun)}.danger-zone{border:2px solid rgba(179,64,46,.25)}.stub-note{background:#fdf3ef;border-radius:14px;padding:16px;line-height:1.55;margin:0}@media(min-width:700px){.session,.parent{padding:28px 28px 64px;gap:20px}.avatar-stage{height:clamp(340px,46vh,520px)}.letter-hero{padding:26px 20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}body:before,body:after{display:none}.confetti{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:center;padding:60px 30px}.confetto{position:static;width:18px!important;height:18px!important;clip-path:polygon(50% 0%,63% 37%,100% 38%,70% 60%,82% 100%,50% 75%,18% 100%,30% 60%,0% 38%,37% 37%);border-radius:0;background:var(--sun)!important;opacity:.9;animation:none}}