@font-face{font-family:Tajawal;src:url(fonts/Tajawal-Medium.ttf) format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Tajawal;src:url(fonts/Tajawal-Bold.ttf) format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:Tajawal;src:url(fonts/Tajawal-ExtraBold.ttf) format("truetype");font-weight:800;font-display:swap}
@font-face{font-family:Ruqaa;src:url(fonts/ArefRuqaa-Bold.ttf) format("truetype");font-weight:700;font-display:block}
:root{--teal:#0F766E;--teal2:#14B8A6;--coral:#FF6B57;--ink:#17302D;--muted:#6F817C;--paper:#FFF9F1;--dot:#F1E5D2;--dock:#0F766E}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:Tajawal,system-ui,sans-serif;color:var(--ink);background:var(--paper);
 background-image:radial-gradient(var(--dot) 1.3px,transparent 1.5px);background-size:22px 22px;overflow:hidden}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}
svg{display:block}
#app{position:relative;height:100%;height:100dvh;display:flex;flex-direction:column;max-width:560px;margin:0 auto;overflow-x:clip}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 12px) 14px 6px;gap:8px;flex:none}
.tb-right{display:flex;align-items:center;gap:8px}
.mascot{width:46px;height:46px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(30,30,60,.12);padding:2px;flex:none}
.mascot svg{width:100%;height:100%}
.talking .mascot .mouth{animation:talk .28s infinite alternate}
@keyframes talk{to{d:path("M25 46 Q32 55 39 46")}}
.tb-btn{width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(30,30,60,.10);display:grid;place-items:center}
.tb-btn svg{width:20px;height:20px;fill:var(--ink);stroke:var(--ink)}
.tb-btn:disabled{opacity:.35}
#btnPause .ic-play{display:none}.paused #btnPause .ic-play{display:block}.paused #btnPause .ic-pause{display:none}
#btnSound .ic-off{display:none}.muted #btnSound .ic-off{display:block}.muted #btnSound .ic-on{display:none}
.tb-close svg{fill:none}
.tb-center{flex:1;text-align:center;font-weight:800;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transition:opacity .3s}
.mode-player .tb-center{opacity:1}
.tb-center small{display:block;font-weight:500;color:var(--muted);font-size:12px;margin-top:1px}
.stage{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.home{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 26px;text-align:center}
.mode-player .home{display:none}
.empty-title{font-weight:800;font-size:clamp(26px,7.4vw,34px);line-height:1.45;margin:0 0 22px;color:var(--ink)}
.empty-sub{margin:0 0 10px;color:var(--muted);font-weight:700;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}
.chip{background:#fff;border:1.5px solid #EEE3D2;border-radius:999px;padding:9px 15px;font-weight:700;font-size:15px;box-shadow:0 2px 8px rgba(30,30,60,.05)}
.chip b{color:var(--teal)}
.chip:active{transform:scale(.97)}
.ready-btn{display:inline-flex;align-items:center;gap:8px;color:var(--teal);font-weight:800;font-size:15px;padding:8px 12px}
.ready-btn svg{width:20px;height:20px;stroke:var(--teal)}
.player{display:none;flex:1;min-height:0;flex-direction:column;justify-content:center;padding:0 8px}
.mode-player .player{display:flex}
.progress{display:flex;gap:4px;padding:4px 6px 8px;direction:rtl;position:absolute;top:0;left:8px;right:8px}
.progress i{flex:1;height:4px;border-radius:4px;background:#EADFCC;overflow:hidden;position:relative}
.progress i b{position:absolute;inset:0 0 0 auto;width:0;background:var(--teal2);border-radius:4px}
.board-wrap{flex:none;width:100%;aspect-ratio:4/3;max-height:52vh;margin:0 auto;position:relative}
#board{width:100%;height:100%;overflow:visible}
#board text{font-family:Ruqaa,Tajawal,serif;font-weight:700}
#board .tok{font-family:Tajawal,sans-serif;font-weight:800}
.captions{flex:0 1 auto;min-height:118px;max-height:30vh;overflow:auto;padding:10px 8px 4px;font-size:clamp(17px,4.8vw,20px);line-height:1.75;font-weight:700;text-align:center}
.captions span{color:#B9B5C7;transition:color .15s}
.captions span.on{color:var(--ink)}
.captions span.now{color:var(--teal)}
.controls{display:flex;align-items:center;justify-content:center;gap:12px;padding:2px 0 40px}
.ctl{height:40px;min-width:40px;border-radius:999px;background:#fff;box-shadow:0 2px 10px rgba(30,30,60,.08);display:flex;align-items:center;justify-content:center;gap:6px;padding:0 12px;font-weight:800;font-size:14px}
.ctl svg{width:20px;height:20px;stroke:var(--ink)}
.ctl:disabled{opacity:.35}
.dock{flex:none;padding:6px 12px calc(env(safe-area-inset-bottom) + 8px);position:relative}
.continue{position:absolute;top:-38px;left:50%;transform:translateX(-50%);background:var(--dock);color:#fff;font-weight:800;font-size:14px;padding:8px 18px;border-radius:999px;box-shadow:0 4px 14px rgba(0,0,0,.18);display:none;white-space:nowrap}
.continue:after{content:"";position:absolute;bottom:-6px;left:50%;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:var(--dock)}
.continue.show{display:block;animation:pop .25s ease-out}
.continue.pulse{background:var(--coral)}.continue.pulse:after{border-top-color:var(--coral)}
@keyframes pop{from{transform:translateX(-50%) scale(.85);opacity:0}}
.dock-row{display:flex;align-items:center;gap:8px}
.ask{flex:1;display:flex;align-items:center;background:var(--dock);border-radius:999px;height:54px;padding:0 6px;gap:4px;box-shadow:0 6px 18px rgba(20,20,30,.18)}
.ask input{flex:1;min-width:0;background:none;border:0;outline:0;color:#fff;font-family:inherit;font-size:16px;font-weight:500;padding:0 4px}
.ask input::placeholder{color:#A3A1AE}
.ask-cam{width:40px;height:40px;display:grid;place-items:center}
.ask-cam svg{width:23px;height:23px;stroke:#D7D5DF}
.ask-send{width:42px;height:42px;border-radius:50%;background:#fff;display:grid;place-items:center}
.ask-send svg{width:20px;height:20px;stroke:var(--dock)}
.mic{width:54px;height:54px;border-radius:50%;background:var(--dock);display:grid;place-items:center;flex:none;box-shadow:0 6px 18px rgba(20,20,30,.18)}
.mic svg{width:24px;height:24px;stroke:#fff}
.mic.rec{background:var(--coral);animation:recp 1s infinite}
@keyframes recp{50%{box-shadow:0 0 0 8px rgba(255,107,87,.25)}}
.demo-note{margin:6px 0 0;text-align:center;font-size:11px;color:var(--muted);font-weight:700}
.sheet-bg{position:fixed;inset:0;background:rgba(20,20,30,.35);opacity:0;pointer-events:none;transition:opacity .25s;z-index:20}
.sheet{position:fixed;left:0;right:0;bottom:0;max-width:560px;margin:0 auto;background:#fff;border-radius:24px 24px 0 0;padding:10px 16px calc(env(safe-area-inset-bottom) + 18px);max-height:82vh;overflow:auto;transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:21}
.sheet-open .sheet{transform:none}.sheet-open .sheet-bg{opacity:1;pointer-events:auto}
.sheet-handle{width:42px;height:5px;border-radius:4px;background:#EADFCC;margin:0 auto 10px}
.sheet h2{margin:2px 0 12px;font-size:20px;font-weight:800}
.tabs{display:flex;gap:6px;background:#F3F1F8;border-radius:14px;padding:4px;margin-bottom:14px}
.tabs button{flex:1;padding:10px 4px;border-radius:11px;font-weight:800;font-size:14px;color:var(--muted)}
.tabs button.on{background:#fff;color:var(--teal);box-shadow:0 2px 8px rgba(30,30,60,.08)}
.subj h3{font-size:15px;margin:14px 0 8px;color:var(--muted);font-weight:800}
.lesson{display:flex;align-items:center;gap:12px;width:100%;text-align:right;padding:12px;border-radius:14px;border:1.5px solid #EEEBF5;margin-bottom:8px;background:#fff}
.lesson .lic{width:40px;height:40px;border-radius:12px;background:#E6FAF7;display:grid;place-items:center;flex:none}
.lesson .lic svg{width:20px;height:20px;fill:var(--teal)}
.lesson .lt{flex:1;font-weight:800;font-size:16px}
.lesson .lt small{display:block;font-weight:500;color:var(--muted);font-size:12.5px;margin-top:2px}
.lesson.soon{opacity:.6}.lesson.soon .lic{background:#F3F1F8}.lesson.soon .lic svg{fill:var(--muted)}
.badge{font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:999px;background:#FFF0ED;color:var(--coral);white-space:nowrap}
.badge.go{background:#E6FAF7;color:var(--teal)}
.toast{position:fixed;left:50%;bottom:120px;transform:translate(-50%,20px);background:var(--dock);color:#fff;padding:12px 16px;border-radius:14px;font-weight:700;font-size:14.5px;line-height:1.6;max-width:min(90vw,460px);text-align:center;opacity:0;pointer-events:none;transition:.25s;z-index:30}
.toast.show{opacity:1;transform:translate(-50%,0)}
.soon-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:10px 20px}

/* live lessons */
.stage-pick{display:flex;gap:6px;justify-content:center;margin:0 0 8px}
.stage-pick[hidden]{display:none}
.mode-player .stage-pick{display:none}
.stage-pick button{font-weight:700;font-size:13px;padding:5px 11px;border-radius:999px;background:#fff;border:1.5px solid #EEE3D2;color:var(--muted)}
.stage-pick button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.thinking{display:flex;align-items:center;justify-content:center;gap:6px;padding-top:6px;color:var(--teal);font-weight:800}
.thinking b{width:9px;height:9px;border-radius:50%;background:var(--teal2);animation:thk 1s infinite ease-in-out}
.thinking b:nth-child(2){animation-delay:.15s}.thinking b:nth-child(3){animation-delay:.3s}
.thinking span{margin-inline-start:8px;font-size:16px}
@keyframes thk{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-7px);opacity:1}}
.loading .controls{visibility:hidden}
.loading .board-wrap:after{content:"";position:absolute;inset:18% 30%;border-radius:50%;background:radial-gradient(circle,rgba(20,184,166,.18),transparent 65%);animation:glow 1.6s infinite ease-in-out}
@keyframes glow{50%{transform:scale(1.15);opacity:.6}}
.loading .mascot{animation:bob 1s infinite ease-in-out}
@keyframes bob{50%{transform:translateY(-3px) rotate(-4deg)}}
#board.live text{paint-order:stroke;stroke:#F7F6FB;stroke-width:5px;stroke-linejoin:round}

/* ---------- full version: account, quiz, progress, voices ---------- */
.tb-me{flex:none}.tb-me svg{fill:none;stroke:var(--ink)}
.mode-player .tb-me{display:none}
.me-ini{width:30px;height:30px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:800;font-size:16px;line-height:1}
.me-ini.big{width:48px;height:48px;font-size:22px;flex:none}
.me-line{margin-top:6px;font-weight:700;font-size:13.5px;color:var(--muted);padding:6px 10px}
.me-line b{color:var(--teal)}
.foot-links{margin:6px 0 0;text-align:center;font-size:11.5px;font-weight:700;color:var(--muted);display:flex;gap:6px;justify-content:center;align-items:center}
.foot-links a,.foot-links button{color:var(--muted);text-decoration:none;font-weight:700;font-size:11.5px;padding:2px}
.mode-player .foot-links{visibility:hidden}
.voice-btn{display:inline-flex!important;align-items:center;gap:4px;background:#E6FAF7!important;border-color:#BDEEE6!important;color:var(--teal)!important}
.voice-btn svg{width:15px;height:15px;fill:var(--teal);stroke:var(--teal)}
.stage-pick{flex-wrap:wrap}
.screen{position:absolute;inset:0;z-index:25;background:var(--paper);background-image:radial-gradient(var(--dot) 1.3px,transparent 1.5px);background-size:22px 22px;display:none;flex-direction:column}
.screen-open .screen{display:flex;animation:scrIn .22s ease-out}
@keyframes scrIn{from{opacity:0;transform:translateY(14px)}}
.scr-top{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 14px 8px;flex:none}
.scr-top .tb-btn svg{fill:none}
.scr-top h2{flex:1;margin:0;text-align:center;font-size:18px;font-weight:800}
.scr-sp{width:40px}
.scr-body{flex:1;overflow:auto;padding:6px 16px calc(env(safe-area-inset-bottom) + 24px)}
.screen .primary,.screen .btn.primary{display:block;width:100%;text-align:center;background:var(--teal);color:#fff;font-weight:800;font-size:17px;border-radius:999px;padding:14px;margin-top:16px;text-decoration:none;box-shadow:0 6px 16px rgba(13,148,136,.25)}
.screen .primary:disabled{opacity:.6}
.screen .ghost{display:block;margin:10px auto 0;color:var(--muted);font-weight:800;font-size:15px;padding:8px}
.seg{display:flex;gap:6px;background:#EEECF5;border-radius:14px;padding:4px;margin-bottom:6px}
.seg button{flex:1;padding:10px;border-radius:11px;font-weight:800;color:var(--muted);font-size:15px}
.seg button.on{background:#fff;color:var(--teal);box-shadow:0 2px 8px rgba(30,30,60,.08)}
.form label{display:block;font-weight:800;font-size:14.5px;margin:16px 0 7px}
.form input{width:100%;font:inherit;font-size:17px;padding:13px 14px;border:1.5px solid #EEE3D2;border-radius:14px;background:#fff;color:var(--ink);outline:0}
.form input:focus{border-color:var(--teal2);box-shadow:0 0 0 3px rgba(20,184,166,.18)}
#jPin{letter-spacing:8px;text-align:center;direction:ltr}
.pills{display:flex;flex-wrap:wrap;gap:7px}
.pills button{padding:9px 14px;border-radius:999px;background:#fff;border:1.5px solid #EEE3D2;font-weight:800;font-size:14.5px;color:#3F5652}
.pills button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.hint{color:var(--muted);font-size:13.5px;font-weight:500;line-height:1.7;margin:10px 0 0}
.warn{background:#FFF4E5;color:#9A5B00;border-radius:12px;padding:10px 12px;font-weight:700;font-size:14px;line-height:1.6}
.msg{min-height:1.4em;font-weight:700;text-align:center;margin:10px 0 0;color:var(--teal)}.msg.err{color:#C2410C}
.hero{text-align:center;padding:18px 4px}
.hero h3{font-size:21px;font-weight:800;margin:12px 0 8px;line-height:1.5}
.hero p{color:#3F5652;font-weight:500;line-height:1.8;font-size:15.5px;margin:6px 0}
.hero .pills{justify-content:center;margin-top:14px}
.hero-ic svg{width:76px;height:76px;margin:0 auto}
.qwrap{padding-top:4px}
.qmeta{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-weight:800;font-size:13px;gap:10px}
.qmeta span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dots{display:flex;gap:4px}.dots i{width:18px;height:5px;border-radius:4px;background:#EADFCC}.dots i.d{background:var(--teal2)}.dots i.c{background:var(--coral)}
.qq{font-size:21px;font-weight:800;line-height:1.6;margin:20px 0 16px}
.opts{display:flex;flex-direction:column;gap:10px}
.opts button{text-align:right;background:#fff;border:2px solid #E8E5F1;border-radius:16px;padding:15px 16px;font-weight:800;font-size:17px;color:var(--ink);box-shadow:0 2px 8px rgba(30,30,60,.04)}
.opts button:active{transform:scale(.99)}
.opts.done button{opacity:.55}
.opts button.ok{border-color:#16A34A;background:#ECFDF3;opacity:1;color:#0F5F2E}
.opts button.bad{border-color:var(--coral);background:#FFF0ED;opacity:1;color:#B4321F}
.why{min-height:1.5em;font-weight:700;color:#3F5652;line-height:1.7;margin:14px 2px 0;font-size:15px}
.score{width:132px;height:132px;border-radius:50%;margin:6px auto 0;background:conic-gradient(var(--teal2),var(--teal));display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 10px 26px rgba(13,148,136,.3)}
.score b{font-size:48px;line-height:1}.score span{font-weight:800;font-size:15px;opacity:.9}
.pts{color:var(--coral)!important;font-weight:800!important;font-size:18px!important}
.up{color:var(--teal)!important;font-weight:800!important}
.row2{display:flex;gap:10px;margin-top:16px}.row2>*{flex:1;margin:0!important}
.row2 button:not(.primary):not(.ghost),.row2 .btn:not(.primary){background:#fff;border:1.5px solid #EEE3D2;border-radius:999px;padding:13px;font-weight:800;font-size:15.5px;text-align:center}
.row2 .primary,.row2 .btn.primary{padding:13px;font-size:15.5px}
.lvl-big{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:6px}
.lvl-big b{font-size:28px;color:var(--teal);font-weight:800}
.lbar{display:inline-flex;gap:4px;direction:ltr}.lbar i{width:22px;height:9px;border-radius:5px;background:#EADFCC}.lbar i.on{background:var(--teal2)}
.lvl-big .lbar i{width:34px;height:12px}
.pcard{background:linear-gradient(135deg,#0D9488,#14B8A6);color:#fff;border-radius:22px;padding:16px;box-shadow:0 10px 26px rgba(13,148,136,.28)}
.pc-top{display:flex;align-items:center;gap:12px}.pc-top b{font-size:20px;display:block}.pc-top small{opacity:.9;font-weight:700}
.pc-top .me-ini{background:#fff;color:var(--teal)}
.pc-lvl{display:flex;align-items:center;gap:10px;margin:14px 0 10px;font-weight:800}
.pc-lvl .lbar i{background:rgba(255,255,255,.3)}.pc-lvl .lbar i.on{background:#fff}
.pc-lvl b{margin-inline-start:auto;background:rgba(255,255,255,.2);padding:3px 11px;border-radius:999px}
.pc-row{display:flex;gap:8px}.pc-row div{flex:1;background:rgba(255,255,255,.16);border-radius:14px;padding:9px 6px;text-align:center}
.pc-row b{display:block;font-size:21px}.pc-row small{font-size:11.5px;font-weight:700;opacity:.95}
.grid4{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.grid4 div{background:#fff;border-radius:16px;padding:12px;box-shadow:0 2px 10px rgba(30,30,60,.05)}
.grid4 b{display:block;font-size:19px;color:var(--ink)}.grid4 small{color:var(--muted);font-weight:700;font-size:12.5px}
.scr-body h4{font-size:15.5px;font-weight:800;margin:20px 2px 10px;color:#3F5652}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.bdg{background:#fff;border-radius:16px;padding:10px 6px;text-align:center;box-shadow:0 2px 10px rgba(30,30,60,.05);opacity:.5;filter:grayscale(1)}
.bdg.got{opacity:1;filter:none}
.bdg span svg{width:38px;height:38px;margin:0 auto 4px}.bdg b{display:block;font-size:13px}.bdg small{display:block;font-size:11px;color:var(--muted);font-weight:500;line-height:1.4}
.recent{display:flex;flex-direction:column;gap:8px}
.ra{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:11px 12px;box-shadow:0 2px 8px rgba(30,30,60,.04)}
.ra div{flex:1;min-width:0}.ra b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ra small{color:var(--muted);font-weight:500;font-size:12px}
.sc{font-weight:800;font-size:14px;padding:4px 10px;border-radius:999px;flex:none}.sc.g{background:#ECFDF3;color:#15803D}.sc.w{background:#FFF0ED;color:var(--coral)}
.parent{background:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 2px 10px rgba(30,30,60,.05)}
.parent p{margin:0;color:#3F5652;font-weight:500;font-size:14px;line-height:1.7}
.parent .row2{margin-top:10px}
.tail{margin-top:22px}.tail .ghost{color:var(--coral)!important}
.voices{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.vc{display:flex;align-items:center;gap:12px;background:#fff;border:2px solid #EEEBF5;border-radius:16px;padding:10px 12px;cursor:pointer}
.vc.on{border-color:var(--teal2);background:#F0FDFA}
.vc div{flex:1}.vc b{display:block;font-size:16px}.vc small{color:var(--muted);font-weight:700;font-size:12.5px}
.va{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:18px;flex:none;background:var(--teal)}
.va.f{background:var(--coral)}.va.p{background:#6B6880}.va svg{width:22px;height:22px}
.vplay{width:40px;height:40px;border-radius:50%;background:#E6FAF7;display:grid;place-items:center}.vplay svg{width:18px;height:18px;fill:var(--teal)}
.ticks{list-style:none;padding:0;margin:14px auto;max-width:300px;text-align:right}
.ticks li{padding:7px 30px 7px 0;position:relative;font-weight:700}
.ticks li:before{content:"";position:absolute;right:4px;top:12px;width:14px;height:8px;border:solid var(--teal);border-width:0 0 3px 3px;transform:rotate(-45deg)}
.ltr-num{font-weight:800;font-size:20px!important;color:var(--ink)!important;letter-spacing:1px;margin-top:10px!important}

/* ---------- responsive: small phones, tablets, desktop ---------- */
@media (max-width:370px){
  .topbar{padding-left:10px;padding-right:10px;gap:6px}.tb-right{gap:6px}
  .mascot{width:40px;height:40px}.tb-btn{width:36px;height:36px}
  .empty-title{font-size:25px}.chip{font-size:14px;padding:8px 12px}
  .ask{height:50px}.mic{width:50px;height:50px}
  .qq{font-size:19px}.opts button{font-size:16px;padding:13px 14px}
  .pc-row b{font-size:18px}.grid4 b{font-size:17px}
}
@media (min-width:700px){
  #app{max-width:920px}
  .home{max-width:640px;margin:0 auto;width:100%}
  .dock{width:100%;max-width:680px;margin:0 auto}
  .board-wrap{max-height:60vh}
  .captions{width:100%;max-width:760px;margin:0 auto;font-size:21px}
  .scr-body{width:100%;max-width:640px;margin:0 auto}
  .scr-top{width:100%;max-width:680px;margin:0 auto}
  .sheet{max-width:680px}
  .grid4{grid-template-columns:repeat(4,1fr)}
  .toast{bottom:140px}
}
@media (min-width:1024px) and (min-height:560px){
  #app{max-width:1280px}
  .mode-player .player{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);grid-template-rows:auto minmax(0,1fr) auto;column-gap:28px;align-content:center;padding:0 28px}
  .player .progress{position:static;grid-column:1/-1;padding:4px 0 12px}
  .player .board-wrap{grid-column:1;grid-row:2/4;width:100%;max-height:calc(100dvh - 210px);align-self:center;background:rgba(255,255,255,.55);border-radius:24px;box-shadow:0 6px 30px rgba(30,30,60,.06)}
  .player .captions{grid-column:2;grid-row:2;max-height:calc(100dvh - 330px);align-self:end;text-align:right;background:#fff;border-radius:20px;padding:18px 18px 14px;font-size:21px;box-shadow:0 6px 24px rgba(30,30,60,.07);margin:0}
  .player .controls{grid-column:2;grid-row:3;align-self:start;padding:14px 0 0}
  .mode-player .dock{max-width:760px}
  .home{max-width:760px}
}
@media (hover:hover){.chip:hover,.lesson:hover,.opts button:hover,.vc:hover,.pills button:hover{border-color:var(--teal2)}.ctl:hover,.tb-btn:hover{box-shadow:0 2px 14px rgba(13,148,136,.25)}}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid rgba(20,184,166,.45);outline-offset:2px}
.rev-btn{color:var(--coral)!important;margin-top:-6px}.rev-btn svg{stroke:var(--coral)!important}
.screen #pRev{background:var(--coral);box-shadow:0 6px 16px rgba(255,107,87,.25)}
.upl{background:#fff;border-radius:18px;padding:4px 14px 14px;box-shadow:0 2px 10px rgba(30,30,60,.05)}.upl h4{margin:12px 0 0!important}.upl input[type=file]{font-size:14px;padding:10px}

/* v4: Google sign-in, plans, teacher, parent, curriculum */
.gbtn{display:flex;justify-content:center;min-height:46px;margin:16px auto 4px;max-width:340px}
.or{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:800;font-size:13px;margin:8px 0}.or::before,.or::after{content:"";flex:1;height:1px;background:#EEE3D2}
.gwho{display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;padding:10px 12px;margin-top:8px;box-shadow:0 2px 10px rgba(30,30,60,.05)}
.gwho img{width:40px;height:40px;border-radius:50%}.gwho b{display:block}.gwho small{color:var(--muted);font-size:12.5px}
.glink{background:#fff;border-radius:16px;padding:12px 14px;margin-top:12px;box-shadow:0 2px 10px rgba(30,30,60,.05);text-align:center}.glink b{display:block;font-size:15.5px}
.plan-line{display:flex;align-items:center;gap:10px;background:#fff;border-radius:16px;padding:12px 14px;margin-top:12px;box-shadow:0 2px 10px rgba(30,30,60,.05)}
.plan-line>div{flex:1;min-width:0}.plan-line small{display:block;color:var(--muted);font-size:12.5px;font-weight:700}.plan-line b{font-size:17px;color:var(--teal)}
.plan-line button{background:var(--coral);color:#fff;font-weight:800;border-radius:999px;padding:9px 16px;font-size:14.5px;flex:none}
.pill-wait{font-size:11.5px;font-weight:800;padding:4px 9px;border-radius:999px;background:#FFF4E5;color:#9A5B00;flex:none}
.plans{display:grid;gap:10px;margin-top:12px}
.plan{background:#fff;border:2px solid #EEEBF5;border-radius:18px;padding:14px;position:relative}
.plan.cur{border-color:var(--teal2)}.plan.on{border-color:var(--coral);box-shadow:0 6px 20px rgba(255,107,87,.15)}
.pl-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}.pl-top b{font-size:19px}.pl-price{font-weight:800;color:var(--teal);font-size:15.5px}
.plan ul{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:4px;font-size:14px;font-weight:700;color:#3F5652}
.plan li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal2);margin-left:8px}
.plan li.no{color:#B4B1C2;text-decoration:line-through}.plan li.no::before{background:#D8D4E6}
.pl-pick{margin-top:12px;width:100%;background:var(--coral);color:#fff;font-weight:800;border-radius:999px;padding:11px;font-size:15px}
.pl-cur{display:inline-block;margin-top:10px;font-size:12.5px;font-weight:800;color:var(--teal);background:#E6FAF7;padding:4px 10px;border-radius:999px}
.code-row{display:flex;gap:8px}.code-row input{flex:1;min-width:0}.code-row button{background:#EEECF5;font-weight:800;border-radius:12px;padding:0 16px}
.kid{background:#fff;border-radius:18px;padding:14px;margin-top:12px;box-shadow:0 2px 10px rgba(30,30,60,.05)}
.kid .me-ini.big{background:var(--coral)}.kid .pc-top small{display:block;color:var(--muted);font-size:12.5px}.kid .warn{margin-top:10px}
.cur-tag{font-size:11px;font-weight:800;color:#fff;background:var(--teal2);border-radius:999px;padding:2px 8px;margin-inline-start:6px;vertical-align:2px}
.unit-t{font-size:13px;font-weight:800;color:var(--teal);margin:4px 2px 6px}
a.lesson{text-decoration:none;color:inherit}
.adm-btn{display:block;width:100%;margin-top:10px;background:#1F1F29;color:#fff;font-weight:800;border-radius:999px;padding:12px;font-size:15.5px}
.sc.r{background:#F3F2F7;color:#8A8798}
.msg.err{color:#C2410C}
@media (min-width:700px){.plans{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}