:root{--blue:#178fc8;--navy:#173454;--pink:#c83882;--green:#11866e;--bg:#eef5f8;--card:#fff;--text:#172b40}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:"Noto Nastaliq Urdu",serif}.appbar{direction:ltr;display:flex;justify-content:space-between;align-items:center;padding:12px 28px;background:linear-gradient(100deg,#12334e,#187faf);color:#fff;box-shadow:0 3px 18px #1234}.appbar b{font:700 22px/1.3 sans-serif}.appbar small{display:block;opacity:.8;font:13px sans-serif}.ghost{color:#fff;background:#ffffff18;border:1px solid #ffffff55;border-radius:10px;padding:9px 14px;cursor:pointer}.layout{display:grid;grid-template-columns:minmax(550px,820px) minmax(320px,390px);direction:ltr;gap:22px;max-width:1260px;margin:24px auto;padding:0 16px}.book-page,.teacher-panel{direction:rtl;background:#fff;border-radius:26px;box-shadow:0 12px 35px #18364e18}.book-page{position:relative;overflow:hidden;padding:28px 38px}.book-page:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 95% 5%,#dff4d8 0 9%,transparent 25%),radial-gradient(circle at 5% 5%,#f7dbea 0 8%,transparent 24%);pointer-events:none}.lesson-head{position:relative;display:flex;justify-content:space-between;align-items:center}.badge{display:grid;place-items:center;width:86px;height:86px;border:6px solid #f4a9bd;border-radius:50%;color:#d3326a;background:white;box-shadow:0 6px 0 #405697}.badge b{font:700 37px/1 sans-serif}.badge span{position:absolute;margin-top:91px;background:#405697;color:#ffe45e;border-radius:14px;padding:0 19px 5px}.letter-tabs{display:flex;gap:12px;margin-left:auto;margin-right:90px;direction:rtl}.letter-tabs>span{min-width:110px;text-align:center;padding:6px 18px 12px;background:linear-gradient(#46b6e8,#168bc4);border-radius:15px;color:#fff;font:700 48px/1.2 "Noto Naskh Arabic";box-shadow:0 5px 0 #d6e7ed}.letter-tabs small{display:block;font:14px "Noto Nastaliq Urdu"}.hero{position:relative;display:grid;grid-template-columns:170px 1fr 110px;direction:ltr;align-items:center;border:4px solid #31a9dd;border-radius:30px;margin:45px 0 28px;min-height:155px}.hero img{width:156px;height:132px;object-fit:cover;border:6px solid #fff;border-radius:18px;box-shadow:0 0 0 4px #31a9dd;margin-left:8px}.hero-word{text-align:center;direction:rtl;font:700 67px/1 "Noto Naskh Arabic"}.hero-word strong{color:#df3c55}.flower{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:#31a9dd;color:#fff;font:700 52px "Noto Naskh Arabic"}.haraka-row{display:grid;grid-template-columns:78px 1fr;gap:13px;align-items:center;margin:13px 0}.haraka-row h3{margin:0;text-align:center;border:3px solid currentColor;border-radius:18px;background:#fff;padding:4px 2px 8px;font-size:20px}.haraka-row>div{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.zabar{color:var(--pink)}.zair{color:var(--blue)}.paish{color:var(--green)}.lesson-token{font:700 36px/1.35 "Noto Naskh Arabic";color:#172b40;background:#fffdf5;border:3px solid currentColor;border-radius:13px;padding:2px 10px 8px;cursor:pointer;transition:.16s}.lesson-token:hover,.lesson-token.selected{transform:translateY(-2px);background:#fff4b8;box-shadow:0 0 0 4px #ffd84a66}.instruction{border-top:2px dashed #9bcfe2;margin:24px 0 13px;padding-top:15px;font-size:16px}.word-line{display:flex;justify-content:space-around;gap:10px;direction:rtl;padding:15px;border:3px dashed #69b9d3;border-radius:22px}.word-line .word{font-size:31px;border:0;background:transparent}.teaching-note{display:flex;gap:15px;margin-top:20px;padding-top:10px;border-top:4px solid #c52b70;color:#9e225b}.teaching-note span{color:#344;font-size:14px}.teacher-panel{overflow:hidden;align-self:start;position:sticky;top:18px}.panel-tabs{display:grid;grid-template-columns:1fr 1fr}.tab{border:0;padding:15px;background:#e7f2f7;color:#31536a;font:700 18px "Noto Nastaliq Urdu";cursor:pointer}.tab.active{background:#fff;color:#087cab;border-top:4px solid #1594c8}.tabpane{display:none;padding:20px}.tabpane.active{display:block}.setting-row{display:flex;justify-content:space-between;align-items:center;gap:10px}.setting-row select,#recordItem{padding:9px;border:1px solid #b8ccd6;border-radius:10px;background:#fff;font-family:inherit}.hint{font-size:13px;color:#627585;line-height:2}.playlist{max-height:310px;overflow:auto}.empty{padding:30px 8px;text-align:center;border:2px dashed #c8d8df;border-radius:14px;color:#789}.playlist-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:8px 4px;border-bottom:1px solid #e5edf1}.playlist-row strong{font:700 25px "Noto Naskh Arabic"}.repeat{display:flex;align-items:center;direction:ltr;background:#edf5f8;border-radius:15px}.repeat button{border:0;background:transparent;padding:6px 9px;cursor:pointer}.repeat b{min-width:24px;text-align:center;font-family:sans-serif}.remove{border:0;background:#ffe4e4;color:#bd2c2c;border-radius:50%;width:27px;height:27px;cursor:pointer}.quick-actions{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0}.soft,.danger-soft{border:0;border-radius:10px;padding:8px 10px;font-family:inherit;cursor:pointer}.soft{background:#e0f4fb;color:#08739e}.danger-soft{background:#ffe6e6;color:#ad2727}.primary{width:100%;border:0;border-radius:13px;padding:12px;background:linear-gradient(100deg,#087eb6,#12a58a);color:#fff;font:700 17px "Noto Nastaliq Urdu";cursor:pointer}.rec-status{text-align:center;margin:18px 0;padding:18px;border-radius:14px;background:#f2f7f9}.rec-status.live{background:#ffe7e7;color:#c61c37;animation:pulse 1s infinite}.record-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.record,.stop{border:0;border-radius:12px;padding:10px;color:white;font-family:inherit;cursor:pointer}.record{background:#d82f4b}.stop{background:#344b5d}.record:disabled,.stop:disabled,.primary:disabled{opacity:.45;cursor:not-allowed}#previewAudio{width:100%;margin:13px 0}.record-list{margin-top:15px;max-height:295px;overflow:auto}.record-row{display:grid;grid-template-columns:1fr auto auto auto;gap:6px;align-items:center;border-bottom:1px solid #e5edf0;padding:7px 2px}.record-row em{font-size:11px;color:#a14d4d}.record-row em.ready{color:#16856c}.mini-play,.mini-delete{border:0;border-radius:8px;cursor:pointer}.mini-play{background:#dff5ec;color:#087b63}.mini-delete{background:#ffe4e4;color:#b21f2e}.player-overlay{position:fixed;z-index:50;inset:0;background:radial-gradient(circle at center,#195884,#071827);color:#fff;display:none;place-items:center;text-align:center}.player-overlay.open{display:grid}.player-overlay>#closePlayer{position:absolute;top:20px;left:20px;width:50px;height:50px;border:0;border-radius:50%;font-size:32px;color:#fff;background:#ffffff1e;cursor:pointer}.playing-label{position:absolute;top:7%;font-size:24px;color:#90dfff}.playing-text{direction:rtl;font:700 clamp(90px,18vw,250px)/1.2 "Noto Naskh Arabic";text-shadow:0 10px 30px #0008}.player-overlay img{display:none;width:min(420px,60vw);max-height:35vh;border-radius:28px}.player-overlay.show-image img{display:block}.player-overlay.show-image .playing-text{font-size:clamp(55px,9vw,120px)}.counter{font:18px sans-serif}.player-controls{position:absolute;bottom:5%;display:flex;gap:12px}.player-controls button{border:1px solid #ffffff55;background:#ffffff18;color:white;border-radius:13px;padding:10px 20px;font-family:inherit;cursor:pointer}@keyframes pulse{50%{box-shadow:0 0 0 8px #e52e4c22}}@media(max-width:900px){.layout{grid-template-columns:1fr}.teacher-panel{position:static}.book-page{padding:25px}.appbar{padding:10px 15px}}@media(max-width:560px){.layout{padding:0 7px}.book-page{padding:18px 13px;border-radius:16px}.letter-tabs{margin-right:20px}.letter-tabs>span{min-width:70px;font-size:35px}.hero{grid-template-columns:105px 1fr 70px}.hero img{width:97px;height:90px}.hero-word{font-size:46px}.flower{width:62px;height:62px;font-size:38px}.haraka-row{grid-template-columns:60px 1fr}.lesson-token{font-size:27px}.word-line{flex-wrap:wrap}.word-line .word{font-size:25px}}