:root{--brand:#6c4bf4;--brand-2:#9b6bff;--pink:#ff5da2;--orange:#ff8a3d;--yellow:#ffcc34;--green:#2fc36b;--teal:#17c0c0;--blue:#3d9bff;--red:#ff5b5b;--ink:#2b2350;--ink-soft:#6a6390;--paper:#f6f3ff;--card:#fff;--line:#ece7fb;--shadow:0 10px 24px #6c4bf424;--shadow-lg:0 18px 40px #6c4bf438;--radius:20px;--radius-sm:14px;--font:"Tajawal", system-ui, sans-serif;--font-fun:"Baloo Bhaijaan 2", "Tajawal", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font);color:var(--ink);background:var(--paper);background-image:radial-gradient(circle at 12% 8%,#ff8a3d1f,#0000 40%),radial-gradient(circle at 88% 4%,#3d9bff1f,#0000 42%),radial-gradient(circle at 60% 100%,#ff5da21a,#0000 45%);min-height:100vh;font-size:18px;line-height:1.7}h1,h2,h3{font-family:var(--font-fun);color:var(--ink);margin:0 0 .4em;line-height:1.3}button{font-family:var(--font-fun);cursor:pointer;border:none;font-size:1rem}input,textarea,select{font-family:var(--font);font-size:1rem}code,.mono{direction:ltr;unicode-bidi:plaintext;font-family:Fira Code,ui-monospace,SF Mono,Menlo,monospace}.app{max-width:1080px;margin:0 auto;padding:18px 18px 80px}.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:2px solid var(--line)}.btn{background:var(--brand);color:#fff;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:12px 22px;font-size:1.05rem;font-weight:700;transition:transform 80ms,filter .15s;display:inline-flex;box-shadow:0 6px #0000001f}.btn:hover{filter:brightness(1.05)}.btn:active{transform:translateY(3px);box-shadow:0 3px #0000001f}.btn.big{padding:16px 30px;font-size:1.25rem}.btn.ghost{color:var(--brand);border:2px solid var(--line);box-shadow:0 6px 0 var(--line);background:#fff}.btn.green{background:var(--green)}.btn.pink{background:var(--pink)}.btn.orange{background:var(--orange)}.btn.red{background:var(--red)}.btn.gray{color:var(--ink-soft);background:#eae6fb;box-shadow:0 6px #d9d3f2}.btn:disabled{opacity:.5;cursor:not-allowed}.chip{color:var(--brand);font-size:.85rem;font-weight:700;font-family:var(--font-fun);background:#f0ecff;border-radius:999px;align-items:center;gap:6px;padding:4px 12px;display:inline-flex}.field{margin-bottom:16px;display:block}.field>span{color:var(--ink);font-weight:700;font-family:var(--font-fun);margin-bottom:6px;display:block}.field input[type=text],.field textarea,.field select,.text-input{border:2px solid var(--line);border-radius:var(--radius-sm);width:100%;color:var(--ink);background:#fbfaff;padding:12px 14px;transition:border-color .15s,box-shadow .15s}.field input[type=text]:focus,.field textarea:focus,.field select:focus,.text-input:focus{border-color:var(--brand-2);outline:none;box-shadow:0 0 0 4px #9b6bff2e}textarea{resize:vertical;line-height:1.7}.muted{color:var(--ink-soft)}.center{text-align:center}.row{align-items:center;gap:12px;display:flex}.spread{justify-content:space-between}.wrap{flex-wrap:wrap}.stack{flex-direction:column;gap:14px;display:flex}.pop-in{animation:.35s cubic-bezier(.18,1.4,.5,1) both pop}@keyframes pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.shake{animation:.4s shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-7px)}75%{transform:translate(7px)}}@media (width<=640px){body{font-size:16px}.app{padding:12px 12px 70px}}.topbar{background:var(--card);box-shadow:var(--shadow);border:2px solid var(--line);border-radius:999px;justify-content:space-between;align-items:center;gap:12px;margin-bottom:24px;padding:10px 16px;display:flex}.brand{align-items:center;gap:8px;display:flex}.brand-logo-img{object-fit:cover;border-radius:8px;width:42px;height:42px}.brand-name{font-family:var(--font-fun);color:var(--brand);font-size:1.5rem;font-weight:800}.mode-switch{background:var(--paper);border-radius:999px;gap:6px;padding:5px;display:flex}.mode-btn{color:var(--ink-soft);background:0 0;border-radius:999px;padding:8px 18px;font-weight:700;transition:all .15s}.mode-btn.on{background:var(--brand);color:#fff;box-shadow:0 4px 10px #6c4bf459}.icon-btn{background:0 0;border:none;border-radius:10px;padding:6px;font-size:1.2rem;line-height:1}.icon-btn:hover{background:var(--paper)}.big-gear{font-size:1.5rem}.lesson-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;display:grid}.lesson-tile{background:var(--tile);color:#fff;border-radius:var(--radius);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:6px;min-height:190px;padding:24px 20px;transition:transform .12s;display:flex;box-shadow:0 10px #0000001f}.lesson-tile:hover{transform:translateY(-4px)}.lesson-tile:active{transform:translateY(2px);box-shadow:0 4px #0000001f}.tile-emoji{font-size:3rem;line-height:1}.tile-title{font-family:var(--font-fun);font-size:1.25rem;font-weight:800}.tile-meta{opacity:.9;font-size:.9rem}.tile-go{font-weight:700;font-family:var(--font-fun);background:#ffffff40;border-radius:999px;margin-top:8px;padding:6px 16px}.teacher-tile{flex-direction:column;gap:12px;padding:18px;display:flex}.teacher-tile-main{text-align:center;color:var(--ink);background:0 0;flex-direction:column;align-items:center;gap:6px;padding:8px;display:flex}.teacher-tile-main .tile-emoji{font-size:2.6rem}.teacher-tile-main .tile-title{color:var(--ink)}.teacher-tile-main .tile-meta{color:var(--ink-soft)}.teacher-tile-actions{gap:8px;display:flex}.teacher-tile-actions .btn{flex:1;padding:10px;font-size:.95rem}.teacher-tile-actions .btn.red{flex:none}.picker{flex-wrap:wrap;gap:8px;display:flex}.emoji-pick{background:var(--paper);border:2px solid #0000;border-radius:14px;width:52px;height:52px;font-size:1.6rem}.emoji-pick.on{border-color:var(--brand);box-shadow:var(--shadow);background:#fff}.color-pick{width:40px;height:40px;box-shadow:0 0 0 2px var(--line);border:3px solid #fff;border-radius:50%}.color-pick.on{box-shadow:0 0 0 3px var(--ink);transform:scale(1.1)}.element-editor{overflow:hidden}.ee-head{cursor:pointer;background:#faf8ff;padding:16px 18px}.ee-num{background:var(--brand);color:#fff;width:30px;height:30px;font-family:var(--font-fun);border-radius:50%;justify-content:center;align-items:center;font-weight:800;display:inline-flex}.ee-body{padding:4px 18px 20px}.toggle-row{font-weight:700;font-family:var(--font-fun);cursor:pointer;align-items:center;gap:10px;display:flex}.toggle-row input{width:22px;height:22px;accent-color:var(--brand)}.upload{background:var(--paper);border:2px dashed var(--brand-2);color:var(--brand);font-weight:700;font-family:var(--font-fun);cursor:pointer;border-radius:14px;align-items:center;gap:8px;padding:14px 22px;display:inline-flex}.img-preview{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.img-preview img{border:2px solid var(--line);border-radius:12px;max-width:160px;max-height:120px}.field-label{font-weight:800;font-family:var(--font-fun);font-size:1.1rem}.quiz-editor{border-top:2px dashed var(--line);margin-top:18px;padding-top:16px}.qe{border:2px solid var(--line);background:#faf8ff;border-radius:16px;padding:14px}.radio{border:2px solid var(--line);width:34px;min-width:34px;height:34px;color:var(--green);background:#fff;border-radius:50%;font-weight:800}.radio.on{background:var(--green);color:#fff;border-color:var(--green)}.inline-msg{border-radius:12px;margin-top:10px;padding:10px 14px;font-weight:700}.inline-msg.ok{color:#1a8f4d;background:#e6f9ee}.inline-msg.err{color:#d23c3c;background:#ffe9e9}.kid-hero{margin-bottom:26px}.kid-hero-emoji{font-size:3.5rem}.kid-hero h1{color:var(--brand);font-size:2.2rem}.lesson-top{margin-bottom:12px}.lesson-title-badge{font-family:var(--font-fun);align-items:center;gap:8px;font-size:1.2rem;font-weight:800;display:flex}.lesson-emoji{font-size:1.5rem}.progress-track{background:#eae6fb;border-radius:999px;height:16px;margin-bottom:20px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--green), var(--teal));border-radius:999px;height:100%;transition:width .4s}.explain-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:2px solid var(--line);padding:28px}.explain-title{color:var(--brand);font-size:1.8rem}.explain-img{border-radius:16px;max-width:100%;max-height:300px;margin:8px auto 16px;display:block}.explain-text{margin:0;font-size:1.35rem;line-height:1.9}.practice-head{justify-content:space-between;align-items:center;margin-bottom:10px;display:flex}.q-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:2px solid var(--line);margin-bottom:14px;padding:20px}.q-prompt{font-family:var(--font-fun);margin:0 0 14px;font-size:1.3rem;font-weight:700}.q-options{gap:10px;display:grid}.q-opt{border:3px solid var(--line);color:var(--ink);text-align:start;background:#faf8ff;border-radius:16px;padding:14px 18px;font-size:1.15rem;font-weight:700;transition:all .12s}.q-opt:hover:not(:disabled){border-color:var(--brand-2);transform:translateY(-2px)}.q-opt.correct{border-color:var(--green);color:#1a8f4d;background:#e6f9ee}.q-opt.wrong{border-color:var(--red);color:#d23c3c;background:#ffe9e9}.q-feedback{font-weight:700;font-family:var(--font-fun);border-radius:14px;margin-top:12px;padding:12px 16px}.q-feedback.good{color:#1a8f4d;background:#e6f9ee}.q-feedback.bad{color:#c76a12;background:#fff3e0}.celebrate{padding:50px 20px}.celebrate-emoji{font-size:5rem;animation:.5s cubic-bezier(.18,1.4,.5,1) both pop}.celebrate h1{color:var(--brand);font-size:2.4rem}.stars{letter-spacing:8px;font-size:2.6rem}.practice-block,.quiz-block{margin-top:4px}.editor{box-shadow:var(--shadow);background:#1e1b2e;border-radius:16px;overflow:hidden}.editor-bar{background:#2a2740;align-items:center;gap:6px;padding:10px 14px;display:flex}.editor-dot{border-radius:50%;width:12px;height:12px}.editor-lang{color:#b9b4d6;margin-inline-start:auto;font-size:.8rem}.editor-code{color:#f4f2ff;resize:vertical;background:#1e1b2e;border:none;width:100%;padding:16px;font-size:1.05rem;line-height:1.8}.editor-code:focus{outline:none}.editor-actions{background:#2a2740;gap:10px;padding:12px 14px;display:flex}.editor-output{color:#7cfc9b;white-space:pre-wrap;word-break:break-word;background:#12101d;margin:0;padding:16px;font-size:1rem}.editor-output.bad{color:#ff8a8a}.editor-preview{background:#fff;border:none;width:100%;height:220px}.modal-backdrop{z-index:50;background:#2b235073;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal{width:100%;max-width:460px;padding:24px}.preview-banner{border:2px solid var(--orange);color:#c76a12;background:#fff3e0;border-radius:16px;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;padding:12px 18px;font-weight:700;display:flex}.code-example{box-shadow:var(--shadow);border-radius:16px;overflow:hidden}.code-example-head{background:#2a2740;padding:10px 14px}.code-example-head .chip{color:#d8d2ff;background:#3a3660}.code-block{color:#f4f2ff;white-space:pre-wrap;word-break:break-word;background:#1e1b2e;margin:0;padding:16px;font-size:1.05rem;line-height:1.8;overflow-x:auto}.code-result{background:#12101d;padding:12px 16px}.code-result-label{font-family:var(--font-fun);color:var(--teal);margin-bottom:4px;font-size:.85rem;font-weight:700;display:block}.code-result-body{color:#7cfc9b;white-space:pre-wrap;word-break:break-word;margin:0;font-size:1rem}.track-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;display:grid}.track-card{background:var(--tile);color:#fff;border-radius:var(--radius);text-align:center;flex-direction:column;align-items:center;gap:6px;padding:28px 24px;transition:transform .12s;display:flex;box-shadow:0 12px #0000001f}.track-card:hover{transform:translateY(-4px)}.track-card:active{transform:translateY(2px);box-shadow:0 5px #0000001f}.track-card-emoji{font-size:3.4rem;line-height:1}.track-card-title{font-family:var(--font-fun);font-size:1.6rem;font-weight:800}.track-card-desc{opacity:.92;font-size:.95rem;line-height:1.5}.track-card-meta{font-weight:700;font-family:var(--font-fun);margin-top:4px}.track-banner{background:var(--tile);border-radius:var(--radius);box-shadow:var(--shadow);align-items:center;gap:16px;padding:22px 24px;display:flex}.track-banner-emoji{font-size:3rem}.track-lessons{flex-direction:column;gap:10px;margin-top:18px;display:flex}.track-lesson-row{background:var(--card);border:2px solid var(--line);text-align:start;border-radius:16px;align-items:center;gap:14px;padding:12px 16px;transition:transform .1s,border-color .15s;display:flex}.track-lesson-row:hover:not(:disabled){border-color:var(--brand-2);transform:translate(-4px)}.track-lesson-row.locked{opacity:.55;cursor:not-allowed}.track-lesson-row.complete{background:#f2fef7;border-color:#bdeecd}.tl-num{color:#fff;width:38px;min-width:38px;height:38px;font-family:var(--font-fun);border-radius:50%;justify-content:center;align-items:center;font-size:1.1rem;font-weight:800;display:inline-flex}.tl-emoji{font-size:1.5rem}.tl-title{font-family:var(--font-fun);flex:1;font-size:1.1rem;font-weight:700}.tl-state{font-size:1.3rem}@media (width<=640px){.topbar{border-radius:20px;flex-wrap:wrap;justify-content:center}.explain-text{font-size:1.15rem}.explain-title{font-size:1.4rem}.tl-title{font-size:1rem}}.floating-mode-btn{background:var(--card);border:2px solid var(--line);width:56px;height:56px;box-shadow:var(--shadow);z-index:100;border-radius:50%;justify-content:center;align-items:center;font-size:1.8rem;transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;position:fixed;bottom:24px;right:24px}.floating-mode-btn:hover{box-shadow:var(--shadow-lg);border-color:var(--brand);transform:translateY(-4px)scale(1.05)}.floating-mode-btn:active{transform:translateY(0)scale(.95)}@media (width<=640px){.floating-mode-btn{width:48px;height:48px;font-size:1.5rem;bottom:16px;right:16px}}.celebration-overlay{z-index:10000;pointer-events:none;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.celebration-shape{background:var(--brand);color:#fff;font-family:var(--font-fun);border:4px solid var(--yellow);border-radius:999px;padding:30px 50px;font-size:3rem;font-weight:800;animation:3s ease-in-out forwards bounce-in-out;box-shadow:0 10px 40px #6c4bf466}@keyframes bounce-in-out{0%{opacity:0;transform:scale(0)rotate(-10deg)}10%{opacity:1;transform:scale(1.1)rotate(5deg)}15%{opacity:1;transform:scale(1)rotate(0)}85%{opacity:1;transform:scale(1)rotate(0)}90%{opacity:1;transform:scale(1.1)rotate(5deg)}to{opacity:0;transform:scale(0)rotate(-10deg)}}