[hidden]{display:none!important}
:root{
  --ink:#1b2a41; --muted:#5b6b82; --bg:#f3f7fb; --card:#fff; --line:#dbe5f0;
  --lagoon:#0e7c86; --lagoon-d:#0a5f67; --sun:#ffb400; --sun-d:#e09c00; --coral:#ff5d6c; --grass:#2fb36b; --violet:#7a6cf0; --sky:#2f8cff; --pink:#ff7ab8;
  --r:18px; --shadow:0 6px 24px rgba(27,42,65,.08);
}
*{box-sizing:border-box}
html{font-size:17px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Tajawal","Segoe UI",Tahoma,"Noto Naskh Arabic","DejaVu Sans",sans-serif;font-weight:500;line-height:1.7;min-height:100vh;display:flex;flex-direction:column}
main{flex:1;width:100%;max-width:1040px;margin:0 auto;padding:16px}
a{color:var(--lagoon-d)}
h1,h2,h3{font-weight:800;line-height:1.35;margin:.2em 0 .5em}
h1{font-size:1.9rem}h2{font-size:1.3rem}
.muted{color:var(--muted)}.center{text-align:center}.narrow{max-width:460px;margin:24px auto}
.inline{display:inline}
.top{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.brand{font-weight:800;font-size:1.35rem;text-decoration:none;color:var(--lagoon-d);display:flex;gap:.4em;align-items:center}
.logo{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--sun);font-size:1.2rem}
nav{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4em;min-height:46px;padding:.5em 1.2em;border:0;border-radius:14px;background:var(--lagoon);color:#fff;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;transition:transform .08s,background .15s}
.btn:hover{background:var(--lagoon-d)}.btn:active{transform:translateY(1px)}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.btn.big{min-height:56px;font-size:1.15rem;padding:.6em 1.6em;border-radius:16px}
.btn.small{min-height:38px;padding:.2em .9em;font-size:.92rem;border-radius:11px}
.btn.sun{background:var(--sun);color:#3a2a00}.btn.sun:hover{background:var(--sun-d)}
.btn.ghost{background:transparent;color:var(--lagoon-d);box-shadow:inset 0 0 0 2px var(--line)}.btn.ghost:hover{background:#eaf3f6}
.btn.bad{background:var(--coral)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.card{background:var(--card);border-radius:var(--r);padding:20px;box-shadow:var(--shadow);margin:16px 0}
.stack{display:grid;gap:14px}
label{display:grid;gap:4px;font-weight:700}
input,select,textarea{font:inherit;font-weight:500;padding:.6em .8em;border:2px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);width:100%}
input[type=checkbox],input[type=radio]{width:auto}
label.check{display:flex;gap:.6em;align-items:flex-start;font-weight:500}
.note{padding:.7em 1em;border-radius:12px;background:#e8f4f6;margin:10px 0}
.note.bad{background:#ffe9eb;color:#8a1f2b}.note.warn{background:#fff4d6;color:#6d4b00}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;align-items:center;padding:28px 0}
.hero h1{font-size:2.5rem}
.ticks{padding-inline-start:1.2em;color:var(--muted)}
.hero-art{position:relative;height:340px}
.wheel-demo{position:absolute;inset:20px 40px;border-radius:50%;background:conic-gradient(var(--sun) 0 14%,var(--coral) 0 28%,var(--violet) 0 43%,var(--sky) 0 57%,var(--grass) 0 71%,var(--pink) 0 86%,var(--lagoon) 0);display:grid;place-items:center;font-size:4rem;box-shadow:var(--shadow);animation:slow 40s linear infinite}
.wheel-demo span{background:#fff;border-radius:50%;width:110px;height:110px;display:grid;place-items:center;animation:slow 40s linear infinite reverse}
@keyframes slow{to{transform:rotate(360deg)}}
.tile{position:absolute;background:#fff;padding:.5em 1em;border-radius:14px;font-weight:800;box-shadow:var(--shadow)}
.t1{top:0;inset-inline-start:0;color:var(--grass)}.t2{bottom:30px;inset-inline-start:10px;color:var(--violet)}.t3{top:50px;inset-inline-end:0;color:var(--coral)}
.steps ol{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0;list-style:none;counter-reset:s}
.steps li{background:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--shadow);counter-increment:s;display:grid;gap:4px}
.steps li::before{content:counter(s);width:36px;height:36px;border-radius:50%;background:var(--sun);display:grid;place-items:center;font-weight:800}
.steps span{color:var(--muted)}
.welcome{padding-top:6px}.soon{background:#fff4d6;color:#6d4b00;border-radius:99px;padding:.1em .7em;font-size:.85rem;margin-inline-start:.5em}
.upload-form{display:grid;gap:14px}
.drop{display:grid;justify-items:center;gap:4px;border:3px dashed #9cc3cb;background:#f0f9fa;border-radius:var(--r);padding:30px 14px;text-align:center;cursor:pointer}
.drop:hover,.drop.on{background:#e1f3f5;border-color:var(--lagoon)}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop:focus-within{outline:3px solid var(--sky)}
.drop-ico{font-size:2.6rem}
.rows{list-style:none;padding:0;display:grid;gap:10px}
.row{display:flex;gap:10px;align-items:center;background:#fff;border-radius:16px;padding:12px 16px;box-shadow:var(--shadow)}
.row-main{flex:1;text-decoration:none;color:inherit;display:grid}.row-main small{color:var(--muted)}
.badge{padding:.15em .8em;border-radius:99px;font-size:.85rem;font-weight:700;background:#e8f4f6}
.badge.ready{background:#dff6e9;color:#14683a}.badge.failed{background:#ffe9eb;color:#8a1f2b}.badge.processing{background:#fff4d6;color:#6d4b00}
.empty{color:var(--muted);background:#fff;border-radius:16px;padding:16px;text-align:center}
.danger summary{cursor:pointer;color:#8a1f2b;font-weight:700}
.foot{text-align:center;color:var(--muted);padding:20px;font-size:.9rem}
.spinner{width:54px;height:54px;border-radius:50%;border:6px solid #cfe6ea;border-top-color:var(--lagoon);margin:0 auto 12px;animation:slow .9s linear infinite}
.title-line{display:flex;gap:12px;align-items:center}.title-line input{font-size:1.5rem;font-weight:800;border-color:transparent;background:transparent}.title-line input:hover,.title-line input:focus{border-color:var(--line);background:#fff}
.saved{color:var(--grass);font-weight:700;white-space:nowrap}
.builder-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-top:22px}.builder-head small{color:var(--muted);font-weight:500}
.tools{display:flex;gap:6px;flex-wrap:wrap}
.q{background:#fff;border-radius:16px;padding:14px;box-shadow:var(--shadow);margin:10px 0;display:grid;gap:8px;border-inline-start:8px solid var(--lagoon)}
.q.k-tf{border-color:var(--grass)}.q.k-mcq{border-color:var(--violet)}.q.k-cloze{border-color:var(--sun)}.q.k-short{border-color:var(--pink)}.q.k-review{border-color:var(--sky)}.q.unclear{background:#fffaf0}
.q-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.q-kind{font-weight:800;font-size:.9rem;color:var(--muted)}
.q-head .spacer{flex:1}
.q textarea{resize:vertical;min-height:2.6em}
.q .ev{font-size:.88rem;color:var(--muted);background:#f3f7fb;border-radius:10px;padding:.4em .8em}
.q .warn{color:#6d4b00;font-weight:700}
.opt-row{display:flex;gap:6px;align-items:center}.opt-row input[type=radio]{accent-color:var(--grass);width:1.3em;height:1.3em}
.games{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.game{position:relative;background:#fff;border-radius:18px;padding:16px;box-shadow:var(--shadow);display:grid;gap:2px;cursor:pointer;border:3px solid transparent;font-weight:500}
.game:has(input:checked){border-color:var(--lagoon);background:#f0f9fa}
.game input{position:absolute;top:12px;inset-inline-end:12px;width:1.3em;height:1.3em;accent-color:var(--lagoon)}
.g-ico{font-size:2rem}.game small{color:var(--muted)}.game .g-n{font-style:normal;font-size:.85rem;color:var(--lagoon-d)}
.game.off{opacity:.45}
.make{display:flex;gap:10px;flex-wrap:wrap}.make input{flex:1;min-width:200px}
.prose h2{margin-top:1.2em}
/* ---------- the stage (presentation) ---------- */
body.stage{background:#10233f;color:#fff;height:100vh;overflow:hidden}
body.stage main{max-width:none;padding:0;height:100vh}
#stage{height:100vh;display:flex;flex-direction:column;position:relative}
.bar{display:flex;gap:10px;align-items:center;padding:8px 14px;background:rgba(255,255,255,.08)}
.bar .deck-title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.bar-btns{display:flex;gap:6px}
.stage .btn.ghost{color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}.stage .btn.ghost:hover{background:rgba(255,255,255,.12)}
.view{flex:1;overflow:auto;padding:18px;display:grid;align-content:start;justify-items:center}
.view h2{font-size:clamp(1.4rem,3vw,2.2rem);text-align:center}
.menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;width:min(1000px,100%)}
.tile-btn{border:0;border-radius:24px;padding:26px 14px;font:inherit;color:#fff;font-weight:800;font-size:1.3rem;cursor:pointer;display:grid;gap:4px;justify-items:center;box-shadow:0 8px 0 rgba(0,0,0,.25);transition:transform .1s}
.tile-btn:hover{transform:translateY(-3px)}.tile-btn small{font-weight:500;font-size:.9rem;opacity:.9}.tile-btn .ico{font-size:2.8rem}
.tile-btn.g-wheel{background:var(--violet)}.tile-btn.g-qa{background:var(--sky)}.tile-btn.g-tf{background:var(--grass)}.tile-btn.g-mcq{background:var(--coral)}.tile-btn.g-cloze{background:#e09c00}.tile-btn.g-teams{background:var(--lagoon)}.tile-btn.g-random{background:var(--pink)}.tile-btn.g-pick{background:#5b4bd6}
.qcard{width:min(980px,100%);background:#fff;color:var(--ink);border-radius:28px;padding:clamp(18px,3vw,40px);box-shadow:0 10px 0 rgba(0,0,0,.25);display:grid;gap:18px}
.qtext{font-size:clamp(1.5rem,3.6vw,2.8rem);font-weight:800;line-height:1.5;text-align:center;margin:0}
.kindtag{justify-self:center;background:#eaf3f6;color:var(--lagoon-d);border-radius:99px;padding:.1em 1em;font-weight:700}
.answer{background:#e4f8ec;color:#0f5a31;border-radius:20px;padding:16px;text-align:center;font-size:clamp(1.3rem,3vw,2.2rem);font-weight:800}
.answer small{display:block;font-weight:500;font-size:.9rem;color:#3d6b52;margin-top:6px}
.answer.no-clear{background:#fff4d6;color:#6d4b00}
.ctrl{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.opts{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.opt{border:3px solid var(--line);background:#fff;border-radius:20px;padding:16px;font:inherit;font-size:clamp(1.1rem,2.4vw,1.8rem);font-weight:700;cursor:pointer;color:var(--ink)}
.opt:hover{border-color:var(--lagoon)}.opt.right{background:var(--grass);color:#fff;border-color:var(--grass)}.opt.wrong{background:var(--coral);color:#fff;border-color:var(--coral)}
.tfbtns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.tfbtns .opt{font-size:clamp(1.6rem,4vw,3rem)}
.blank{display:inline-block;min-width:3.5em;border-bottom:5px solid var(--sun);color:var(--sun)}.blank.filled{color:var(--grass);border-color:var(--grass)}
.wheel-wrap{display:grid;justify-items:center;gap:14px}
.wheel{position:relative;width:min(70vh,86vw,520px);aspect-ratio:1}
.wheel canvas{width:100%;height:100%;transition:transform 4.2s cubic-bezier(.12,.7,.1,1)}
.pointer{position:absolute;top:-14px;inset-inline-start:50%;transform:translateX(50%);font-size:2.4rem;filter:drop-shadow(0 2px 2px rgba(0,0,0,.4))}
[dir=rtl] .pointer{transform:translateX(50%)}
.scoreboard{display:flex;gap:14px;justify-content:center;padding:8px;background:rgba(0,0,0,.18)}
.team{display:flex;align-items:center;gap:10px;border-radius:18px;padding:6px 14px;background:var(--lagoon);min-width:230px;justify-content:space-between}
.team.b{background:var(--violet)}.team.turn{outline:4px solid var(--sun)}
.team input.tname{background:transparent;border:0;color:#fff;font-weight:800;width:7em;padding:.1em}
.scoreboard{flex-wrap:wrap}
.team .pts{font-size:2rem;font-weight:800;min-width:2ch;text-align:center}
.team button{width:38px;height:38px;border-radius:50%;border:0;font-weight:800;font-size:1.2rem;cursor:pointer}
.award{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.award .btn{background:var(--lagoon)}.award .btn.b{background:var(--violet)}
.pause{position:absolute;inset:0;background:#10233f;display:grid;place-items:center;z-index:10;text-align:center}
.pause-card{display:grid;gap:12px;justify-items:center}
.progress{color:rgba(255,255,255,.7);text-align:center;margin:6px 0}
@media (max-width:760px){
  .opts{grid-template-columns:1fr}
  html{font-size:16px}.hero{grid-template-columns:1fr}.hero h1{font-size:1.9rem}.hero-art{height:230px}.steps ol{grid-template-columns:1fr}
  .row{flex-wrap:wrap}.bar{flex-wrap:wrap}.bar-btns{flex-wrap:wrap}.team{min-width:0;flex:1 1 150px;padding:4px 8px;gap:4px}.team input.tname{width:100%;min-width:0;flex:1;font-size:.9rem}.team button{width:32px;height:32px;flex:none}.team .pts{font-size:1.5rem}.tfbtns{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* subscriptions and manager */
.btn.small{padding:.3rem .8rem;font-size:.9rem;min-height:0}
.plans,.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;margin:1rem 0}
.plan .price{font-size:1.6rem;font-weight:800}.plan .price small{display:block;font-size:.85rem;font-weight:400;color:var(--muted,#667)}
.stat b{display:block;font-size:1.6rem}.ref{background:#fff3c4;padding:.1rem .5rem;border-radius:.5rem}
.stack{display:grid;gap:.8rem;max-width:30rem}.stack label{display:grid;gap:.25rem}
.bank{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem}.bank dt{font-weight:700}
.tbl{width:100%;border-collapse:collapse}.tbl td,.tbl th{padding:.4rem;border-bottom:1px solid #0001;text-align:start}
.req{padding:.6rem 0;border-bottom:1px solid #0001;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}

/* students */
.tbl-wrap{overflow-x:auto}.cell-in{width:100%;min-width:9rem;font:inherit;padding:.4rem .6rem;border:2px solid #0002;border-radius:12px}
.acts{white-space:nowrap}.acts .btn{margin-inline-start:.3rem}.btn.danger{color:#b3261e}
.lvl{padding:.15rem .6rem;border-radius:999px;font-weight:700;font-size:.9rem}.lvl.la{background:#dff6e8;color:#0f5a31}.lvl.lb{background:#e1efff;color:#124a8a}.lvl.lc{background:#fff0d1;color:#7a4b00}
.answers{padding-inline-start:1.2rem;display:grid;gap:.4rem}.lesson-info{margin:.2rem 0 1rem}
/* students on the stage */
.pick{display:flex;gap:6px;align-items:center}.pick select{font:inherit;padding:.35rem .6rem;border-radius:12px;max-width:11rem;border:2px solid rgba(255,255,255,.35);background:#16365f;color:#fff}
.mark{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}.mark .btn.ok{background:#2fb36b}.mark .btn.no{background:#ff5d6c}
.marked{margin-top:10px;text-align:center;font-weight:700;opacity:.9}
@media (max-width:640px){.pick{flex:1 1 100%}.pick select{flex:1;max-width:none}}

/* the students' wheel */
.picked{margin:0 auto;padding:14px 26px;border-radius:24px;background:linear-gradient(135deg,#ffb400,#ff7ab8);color:#10233f;font-size:clamp(1.6rem,4.5vw,3rem);font-weight:800;text-align:center;box-shadow:0 8px 0 rgba(0,0,0,.25);animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
.picked small{display:block;font-size:.5em;font-weight:600;opacity:.8}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.picked{animation:none}}
.roster{width:min(900px,96vw);margin:10px auto;background:rgba(255,255,255,.08);border-radius:18px;padding:8px 14px}
.roster summary{cursor:pointer;font-weight:700;padding:6px 0}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.chip{border:0;border-radius:999px;padding:4px 12px;font:inherit;font-size:.95rem;cursor:pointer;background:rgba(255,255,255,.16);color:#fff}
.chip.done{background:#2fb36b}.chip.gone{background:transparent;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);text-decoration:line-through;opacity:.7}
.roster .row{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0}
.snd{margin-inline-start:8px}
.inline-form{display:flex;gap:10px;align-items:end;flex-wrap:wrap}.inline-form .grow{flex:1 1 14rem;display:grid;gap:.25rem}.inline-form input{font:inherit;padding:.5rem .8rem;border:2px solid #0002;border-radius:14px}
.class-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:8px}.class-title{font-weight:800;font-size:1.2rem;flex:1 1 12rem}
.class-card{margin-top:16px}
.classes-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;width:min(900px,94vw);margin:12px auto}