:root{--ac:#34d399;--ac2:#059669;--gold:#fbbf24;--bg:#06130f;--bg2:#0b2019;--card:rgba(255,255,255,.055);--bd:rgba(255,255,255,.09);--tx:#ecf5f1;--mut:#93a8a0;--bad:#f87171;--warn:#fb923c;--info:#60a5fa;--fs:30px;--r:20px}
:root[data-theme=midnight]{--ac:#60a5fa;--ac2:#2563eb;--bg:#060a18;--bg2:#0c1530}
:root[data-theme=rose]{--ac:#f472b6;--ac2:#db2777;--bg:#14070f;--bg2:#2a0f1f}
:root[data-theme=sand]{--ac:#fbbf24;--ac2:#d97706;--gold:#34d399;--bg:#140f06;--bg2:#2a1f0c}
:root[data-theme=violet]{--ac:#a78bfa;--ac2:#7c3aed;--bg:#0c0714;--bg2:#1a1030}
.sw[data-theme=emerald]{--a:#34d399;--b:#06130f}.sw[data-theme=midnight]{--a:#60a5fa;--b:#060a18}.sw[data-theme=rose]{--a:#f472b6;--b:#14070f}.sw[data-theme=sand]{--a:#fbbf24;--b:#140f06}.sw[data-theme=violet]{--a:#a78bfa;--b:#0c0714}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg)}
body{margin:0;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--tx);background:radial-gradient(900px 500px at 85% -10%,color-mix(in srgb,var(--ac) 22%,transparent),transparent 60%),radial-gradient(700px 500px at -10% 30%,color-mix(in srgb,var(--gold) 10%,transparent),transparent 60%),linear-gradient(180deg,var(--bg),var(--bg2));background-attachment:fixed;min-height:100vh;line-height:1.45;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M40 4l9 21 21-9-9 21 21 9-21 9 9 21-21-9-9 21-9-21-21 9 9-21-21-9 21-9-9-21 21 9z' fill='none' stroke='white' stroke-width='1'/%3E%3C/svg%3E")}
body.noscroll{overflow:hidden}
h1,h2,h3{margin:0;line-height:1.2}h1{font-size:22px}h2{font-size:24px;margin-bottom:6px}h3{font-size:17px}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
.ar{font-family:'Amiri Quran','Scheherazade New','Noto Naskh Arabic',serif;direction:rtl;line-height:2.1;font-size:var(--fs)}
.muted{color:var(--mut)}.small{font-size:12.5px}.center{text-align:center}.grow{flex:1;min-width:0}.ok-t{color:var(--ac)}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}.row-gap{display:flex;gap:10px;flex-wrap:wrap}.col-gap{display:flex;flex-direction:column;gap:10px}
.view{max-width:720px;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) 16px 130px}
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 0 16px}.who{display:flex;align-items:center;gap:12px;min-width:0}.who h1{font-size:18px}
.avatar{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;font-size:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--ac) 35%,transparent),var(--card));border:1px solid var(--bd);flex:none}
.chips{display:flex;gap:6px}.chip{padding:6px 11px;border-radius:999px;background:var(--card);border:1px solid var(--bd);font-size:13px;font-weight:600;white-space:nowrap}.chip.gold{color:var(--gold)}
.card{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:16px;margin-bottom:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.card.hero{display:flex;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 22%,transparent),var(--card))}.hero-l{flex:1}
.eyebrow{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:700;color:var(--ac);margin-bottom:6px}
.xpbar,.progress{height:10px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:8px 0}.progress.thin{height:6px;margin:6px 0}
.xpbar i,.progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--ac2),var(--ac));transition:width .6s}
.continue h3{font-size:20px}.continue .progress{margin:14px 0}.sname{font-size:26px;line-height:1.6;color:var(--gold)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 18px;border-radius:16px;font-weight:700;background:rgba(255,255,255,.09);border:1px solid var(--bd);transition:transform .12s,filter .15s;text-align:center}
.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:default}.btn.small{padding:8px 13px;font-size:13px;border-radius:12px}
.btn.primary{background:linear-gradient(180deg,var(--ac),var(--ac2));color:#04130d;border-color:transparent;box-shadow:0 6px 0 color-mix(in srgb,var(--ac2) 70%,black),0 10px 24px color-mix(in srgb,var(--ac) 30%,transparent);margin-bottom:6px}
.btn.primary:active{transform:translateY(4px);box-shadow:0 2px 0 color-mix(in srgb,var(--ac2) 70%,black)}
.btn.gold{background:linear-gradient(180deg,#fde68a,var(--gold));color:#2a1d00;border-color:transparent;box-shadow:0 6px 0 #b45309}.btn.gold:active{transform:translateY(4px);box-shadow:0 2px 0 #b45309}
.btn.ghost{background:none;border-color:transparent;color:var(--mut)}.btn.danger{background:linear-gradient(180deg,#fb7185,#e11d48);color:#fff;border-color:transparent}.btn.danger-o{border-color:var(--bad);color:var(--bad)}
.btn.big-mic{width:100%;padding:16px;font-size:16px}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}.tile{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}.tile span{font-size:26px}.tile b{font-size:13px}.tile small{color:var(--mut);font-size:11px}
.tip{display:flex;gap:12px;align-items:center}.tip span{font-size:28px}.tip small{display:block}
.quest{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--bd)}.quest:first-of-type{border-top:0}.quest.done b{color:var(--ac)}
.daily-ar{font-size:calc(var(--fs) + 2px);text-align:center;margin:8px 0}.en{color:#cfe0d9;margin:6px 0}.tl{color:var(--gold);font-style:italic;margin:6px 0;font-size:14px}
.skeleton{height:80px;border-radius:14px;background:linear-gradient(90deg,var(--card),rgba(255,255,255,.1),var(--card));background-size:200% 100%;animation:sk 1.2s infinite}@keyframes sk{to{background-position:-200% 0}}
/* inputs */
label{display:block;margin:12px 0 4px;font-size:13px;font-weight:600;color:var(--mut)}
input,select{width:100%;padding:13px 14px;margin-top:6px;border-radius:14px;border:1px solid var(--bd);background:rgba(0,0,0,.28);color:var(--tx);font:inherit;outline:none}
input:focus,select:focus{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 25%,transparent)}input[type=range]{padding:0;accent-color:var(--ac)}input[type=checkbox]{width:22px;height:22px;margin:0;accent-color:var(--ac)}
select option{background:#10201b}.search{margin:0 0 12px;border-radius:16px}.err{color:var(--bad);min-height:20px;font-size:13px;margin:8px 0}hr{border:0;border-top:1px solid var(--bd);margin:16px 0}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;color:var(--tx)}.switch-row span{display:flex;flex-direction:column;font-size:15px}
.chips-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 12px}.chips-row.scroll{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.chips-row.tight{margin:0}
.pick{padding:10px 16px;border-radius:999px;background:var(--card);border:1px solid var(--bd);font-weight:600;white-space:nowrap}.pick.sm{padding:6px 12px;font-size:12px}.pick.on{background:color-mix(in srgb,var(--ac) 25%,transparent);border-color:var(--ac);color:var(--ac)}
/* auth */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px 16px}.auth-card{width:100%;max-width:420px}.logo{width:84px;margin:0 auto 14px}.logo svg{width:100%;filter:drop-shadow(0 10px 24px color-mix(in srgb,var(--ac) 40%,transparent))}
.hero-t{font-size:46px;text-align:center;letter-spacing:-.02em}.lead{text-align:center;color:var(--mut);font-size:17px;margin:8px 0 28px}.dots{display:flex;gap:6px;justify-content:center;margin-bottom:18px}.dots i{width:28px;height:5px;border-radius:9px;background:var(--bd)}.dots i.on{background:var(--ac)}
.auth-card h2{margin-bottom:12px}.auth-card .btn{width:100%}
/* quran list */
.slist{display:flex;flex-direction:column;gap:8px}.srow{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--card);border:1px solid var(--bd)}
.snum{width:44px;height:44px;display:grid;place-items:center;flex:none;position:relative}.snum::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--ac) 22%,transparent);transform:rotate(45deg) scale(.72);border-radius:10px}.snum::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--ac) 22%,transparent);border-radius:10px;transform:scale(.72)}.snum b{position:relative;z-index:1;font-size:14px}
.sinfo{flex:1;min-width:0}.sinfo small{color:var(--mut);display:block;font-size:12px}.sright{text-align:right;display:flex;flex-direction:column;align-items:flex-end}.sright .sname{font-size:22px;line-height:1.5}.stat{font-style:normal}.lockt{color:var(--mut);font-size:11px}
.srow.locked{opacity:.55}.srow.mastered{border-color:color-mix(in srgb,var(--gold) 55%,transparent)}.srow.learned{border-color:color-mix(in srgb,var(--ac) 45%,transparent)}
.back{display:inline-block;color:var(--ac);font-weight:600;margin-bottom:10px}
.surah-head{text-align:center}.big-name{font-size:44px;color:var(--gold);line-height:1.6}.surah-head .btn{width:100%}.surah-head.mastered{border-color:var(--gold)}
.bismillah{text-align:center;font-size:calc(var(--fs) + 4px);margin:14px 0}
.ayah{padding:14px 16px;border-radius:18px;margin-bottom:10px;background:var(--card);border:1px solid var(--bd);transition:background .3s,border-color .3s}.ayah.learned{border-color:color-mix(in srgb,var(--ac) 35%,transparent)}.ayah.playing{background:color-mix(in srgb,var(--ac) 18%,transparent);border-color:var(--ac)}
.ayah .ar{margin:6px 0}.ayah-top{display:flex;align-items:center;gap:8px}.num{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:color-mix(in srgb,var(--ac) 25%,transparent);font-size:12px;font-weight:700}.chk{color:var(--ac);margin-left:auto}
.icon-btn{width:40px;height:40px;border-radius:14px;display:inline-grid;place-items:center;background:var(--card);border:1px solid var(--bd);font-size:16px}.icon-btn.sm{width:30px;height:30px;font-size:12px;border-radius:10px}.icon-btn.fav{color:#f472b6}
/* progress */
.stats4{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.stats3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.stat{text-align:center;margin:0;padding:14px 8px}.stat b{display:block;font-size:24px}.stat small{color:var(--mut)}
.stats4+.card,.stats3+.card{margin-top:14px}.stats3{margin-bottom:14px}.stats4{margin-bottom:0}
.chart{width:100%;height:auto;margin-top:8px}.chart text{fill:var(--mut);font-size:11px}.chart .val{fill:var(--tx);font-weight:700}.cbar{fill:color-mix(in srgb,var(--ac) 45%,transparent)}.cbar.today{fill:var(--ac)}
.ring{position:relative;display:grid;place-items:center;margin:0 auto}.ring svg{width:100%;height:100%}.rb{fill:none;stroke:rgba(255,255,255,.09);stroke-width:8}.rf{fill:none;stroke:var(--ac);stroke-width:8;stroke-linecap:round;transition:stroke-dashoffset .6s}.rl{position:absolute;text-align:center;display:flex;flex-direction:column}.rl b{font-size:17px}.rl small{font-size:10px;color:var(--mut)}
.rings{display:flex;justify-content:space-around;flex-wrap:wrap;gap:8px}
.grid114{display:grid;grid-template-columns:repeat(auto-fill,minmax(38px,1fr));gap:6px}.cell{aspect-ratio:1;border-radius:10px;display:grid;place-items:center;font-size:12px;font-weight:700;background:rgba(255,255,255,.06);color:var(--mut)}
.cell.learning,.c.learning{background:color-mix(in srgb,var(--info) 40%,transparent);color:#fff}.cell.learned,.c.learned{background:color-mix(in srgb,var(--ac) 55%,transparent);color:#04130d}.cell.mastered,.c.mastered{background:linear-gradient(135deg,#fde68a,var(--gold));color:#2a1d00}
.legend{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--mut);margin:6px 0 10px;align-items:center}.legend .c{display:inline-block;width:10px;height:10px;border-radius:3px;background:rgba(255,255,255,.12);margin-right:4px}
.mrow{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--bd)}.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}.badge{text-align:center;padding:12px 6px;border-radius:16px;background:rgba(255,255,255,.04);opacity:.5;display:flex;flex-direction:column;gap:2px}.badge span{font-size:28px}.badge b{font-size:12px}.badge small{font-size:10px;color:var(--mut)}.badge.got{opacity:1;background:color-mix(in srgb,var(--gold) 14%,transparent);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent)}
/* more */
.list{padding:4px 14px}.lrow{display:flex;align-items:center;gap:12px;padding:13px 0;border-top:1px solid var(--bd)}.lrow:first-child{border-top:0}.lrow.cur{color:var(--ac);font-weight:700}.lrow small{display:block}.ico{width:38px;height:38px;border-radius:12px;background:var(--card);display:grid;place-items:center;font-size:20px;flex:none}.lrow i{color:var(--mut);font-style:normal;font-size:22px}
.form .btn{width:100%;margin-top:12px}.preview{text-align:center;margin-top:10px}.sec{margin:18px 0 8px;color:var(--ac);font-size:14px;text-transform:uppercase;letter-spacing:.06em}
.advice{display:flex;gap:14px;align-items:flex-start;padding:14px}.advice span{font-size:26px}.advice p{margin:3px 0 0}.hadith p{margin:0 0 8px}.hadith-today{background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 18%,transparent),var(--card))}.quote{font-size:18px;font-weight:600;margin:6px 0 10px}
.shopgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.shopi{background:var(--card);border:1px solid var(--bd);border-radius:18px;padding:14px 6px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}.shopi.eq{border-color:var(--ac)}.prev{font-size:34px;height:44px;display:grid;place-items:center}.sw{display:block;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--a),var(--b))}
.cal-h,.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.cal-h{margin-top:12px;text-align:center;color:var(--mut);font-size:12px}.day{aspect-ratio:1;border-radius:12px;background:rgba(255,255,255,.05);font-weight:600;position:relative}.day.today{border:1px solid var(--ac)}.day.f{background:color-mix(in srgb,var(--ac) 35%,transparent)}.day i{position:absolute;bottom:5px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--gold)}
.countdown{font-size:42px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ac);margin:6px 0 14px}
.dhikr{text-align:center}.dhikr .ar{margin:10px 0}.dbtn{display:block;margin:12px auto;border-radius:50%;box-shadow:0 0 60px color-mix(in srgb,var(--ac) 25%,transparent);transition:transform .08s}.dbtn:active{transform:scale(.96)}.dbtn .rl b{font-size:56px}
.alpha{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}.letter{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:8px 2px;display:flex;flex-direction:column;align-items:center}.letter .ar{font-size:36px;line-height:1.5}.letter small{color:var(--mut);font-size:11px}
.giant{font-size:110px;line-height:1.4;color:var(--gold)}.forms{display:flex;justify-content:space-around;margin:14px 0}.forms div{text-align:center;display:flex;flex-direction:column}.forms .ar{font-size:40px;line-height:1.5}.forms small{color:var(--mut);font-size:11px}
/* glass nav */
.nav{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(92vw,400px);height:68px;padding:6px;display:grid;grid-template-columns:repeat(4,1fr);border-radius:999px;z-index:50;
background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.05));-webkit-backdrop-filter:blur(22px) saturate(200%) brightness(1.08);backdrop-filter:blur(22px) saturate(200%) brightness(1.08);border:1px solid rgba(255,255,255,.22);
box-shadow:0 14px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(255,255,255,.1),inset 0 0 22px rgba(255,255,255,.07)}
.nav .pill{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px)/4);border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -6px 14px color-mix(in srgb,var(--ac) 25%,transparent),0 4px 14px rgba(0,0,0,.28);transition:transform .5s cubic-bezier(.34,1.5,.64,1)}
.nav a{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:11px;font-weight:600;color:rgba(255,255,255,.65);transition:color .2s}.nav a svg{width:23px;height:23px}.nav a.on{color:#fff}
body.authing .nav{display:none}
/* sheet, toast, confetti */
.sheet-wrap{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.5);display:flex;align-items:flex-end;justify-content:center;opacity:0;transition:opacity .2s}.sheet-wrap.in{opacity:1}
.sheet{width:100%;max-width:560px;max-height:85vh;overflow:auto;background:linear-gradient(180deg,#15251f,#0d1a15);border:1px solid var(--bd);border-radius:26px 26px 0 0;padding:12px 20px calc(24px + env(safe-area-inset-bottom));transform:translateY(30px);transition:transform .25s}.sheet-wrap.in .sheet{transform:none}.sheet .btn{width:100%;margin-top:12px}.grab{width:44px;height:5px;border-radius:9px;background:var(--bd);margin:0 auto 14px}
#toasts{position:fixed;top:max(14px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:500;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}.toast{display:flex;gap:8px;align-items:center;padding:11px 16px;border-radius:999px;background:rgba(20,35,29,.92);border:1px solid var(--bd);backdrop-filter:blur(12px);box-shadow:0 8px 30px rgba(0,0,0,.4);animation:tin .3s}.toast.out{opacity:0;transform:translateY(-8px);transition:.4s}@keyframes tin{from{opacity:0;transform:translateY(-14px)}}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:600;overflow:hidden}.confetti i{position:absolute;top:-12px;width:9px;height:14px;border-radius:2px;animation:fall 2.4s ease-in forwards}@keyframes fall{to{transform:translate(var(--dx),105vh) rotate(var(--r));opacity:.9}}
/* game overlay */
.game{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;background:linear-gradient(180deg,var(--bg),var(--bg2));overflow:hidden}.game.arcade{z-index:250}.game.recite{z-index:220}
.game-top{display:flex;align-items:center;gap:12px;padding:max(14px,env(safe-area-inset-top)) 16px 10px;max-width:640px;width:100%;margin:0 auto}.game-top b{font-size:17px}
.bar{flex:1;height:14px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}.bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ac2),var(--ac));border-radius:99px;transition:width .4s;box-shadow:inset 0 3px 0 rgba(255,255,255,.3)}
.combo{font-weight:800;color:var(--mut);min-width:54px;text-align:right}.combo.hot{color:var(--gold);animation:pulse .6s infinite alternate}@keyframes pulse{to{transform:scale(1.15)}}
.game-body{flex:1;overflow:auto;padding:10px 18px 24px;max-width:640px;width:100%;margin:0 auto}.game-foot{padding:12px 18px calc(18px + env(safe-area-inset-bottom));max-width:640px;width:100%;margin:0 auto;border-top:1px solid var(--bd)}.game-foot:empty{border:0;padding:0}.game-foot .btn{width:100%}
.step-tag{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--ac);font-weight:700;margin-bottom:8px}.q{font-size:20px;font-weight:700;margin:6px 0}.big{font-size:calc(var(--fs) + 6px);text-align:center;margin:14px 0}
.listen{margin:6px 0 10px;padding:9px 16px;border-radius:99px;background:color-mix(in srgb,var(--info) 22%,transparent);border:1px solid color-mix(in srgb,var(--info) 50%,transparent);font-weight:700}
.slots{min-height:86px;display:flex;flex-wrap:wrap;gap:8px;padding:12px;margin:12px 0;border-radius:18px;border:2px dashed var(--bd);align-content:flex-start;justify-content:flex-start}.slots.good{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent)}.slots.badx{border-color:var(--bad);animation:shake .4s}.ph{color:var(--mut);font-size:14px;align-self:center;margin:auto}
.bank{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.chip.ar{font-size:26px;line-height:1.7;padding:2px 14px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid var(--bd);box-shadow:0 3px 0 rgba(0,0,0,.35)}.chip.ghost{background:rgba(255,255,255,.03);border:1px dashed var(--bd);box-shadow:none;color:transparent;min-width:60px;height:56px;border-radius:14px}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}.opts.col{grid-template-columns:1fr}
.opt{padding:14px;border-radius:16px;background:rgba(255,255,255,.07);border:2px solid var(--bd);box-shadow:0 3px 0 rgba(0,0,0,.3);font-weight:600;text-align:center;line-height:1.4}.opt.ar{font-size:26px;line-height:1.8}.opts.col .opt:not(.ar){text-align:left;font-weight:500}
.opt.right{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 20%,transparent)}.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 20%,transparent);animation:shake .4s}.opt.locked{pointer-events:none}
.opt.seq{display:flex;align-items:center;gap:10px;justify-content:center;position:relative}.opt.seq .ar{font-size:22px;line-height:1.8}.opt.seq i{position:absolute;left:10px;width:26px;height:26px;border-radius:50%;background:var(--ac);color:#04130d;display:grid;place-items:center;font-style:normal;font-weight:800;font-size:13px}.opt.seq.sel{border-color:var(--ac)}
.blank{display:inline-block;min-width:70px;border-bottom:3px solid var(--gold);color:var(--gold);text-align:center}@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.fb{padding:12px 14px;border-radius:14px;margin-bottom:12px;display:flex;flex-direction:column;gap:2px;animation:tin .25s}.fb.ok{background:color-mix(in srgb,var(--ac) 22%,transparent);color:var(--ac)}.fb.bad{background:color-mix(in srgb,var(--bad) 20%,transparent);color:var(--bad)}.fb span{color:var(--tx);font-size:14px}.fb .ar{font-size:20px;line-height:1.8}
.result{text-align:center;padding-top:10px}.result h2{margin:8px 0}.big-emoji{font-size:64px}.stars{font-size:56px;display:flex;justify-content:center;gap:6px}.stars i{font-style:normal;color:rgba(255,255,255,.15);transform:scale(.4);opacity:0}.stars i.on{color:var(--gold);animation:pop .5s forwards;text-shadow:0 0 24px rgba(251,191,36,.6)}@keyframes pop{60%{transform:scale(1.3)}to{transform:scale(1);opacity:1}}.stars i:not(.on){opacity:1;transform:none}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.stat-row div{background:var(--card);border-radius:14px;padding:10px 2px;border:1px solid var(--bd)}.stat-row b{display:block;font-size:19px}.stat-row small{color:var(--mut);font-size:11px}
.banner{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--info) 18%,transparent);margin:10px 0;text-align:left}.banner.gold{background:color-mix(in srgb,var(--gold) 20%,transparent)}.banner.bad{background:color-mix(in srgb,var(--bad) 18%,transparent)}
.score{font-size:60px;font-weight:800;color:var(--gold)}.gcard{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px;margin-top:12px;border-radius:20px;background:var(--card);border:1px solid var(--bd);box-shadow:0 4px 0 rgba(0,0,0,.3)}.gcard span{font-size:38px}.gcard small{display:block;color:var(--mut)}.gcard:active{transform:translateY(2px)}
.g-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:17px}.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0}.mcard{aspect-ratio:3/4;position:relative;border-radius:14px;perspective:600px}.mcard .f,.mcard .b{position:absolute;inset:0;display:grid;place-items:center;border-radius:14px;backface-visibility:hidden;transition:transform .35s;font-weight:700}.mcard .f{background:linear-gradient(145deg,var(--ac2),var(--ac));color:#04130d;font-size:22px}.mcard .b{background:rgba(255,255,255,.12);transform:rotateY(180deg);font-size:15px}.mcard .b.ar{font-size:34px;line-height:1.4}.mcard.open .f,.mcard.done .f{transform:rotateY(180deg)}.mcard.open .b,.mcard.done .b{transform:none}.mcard.done .b{background:color-mix(in srgb,var(--ac) 30%,transparent)}
.target{text-align:center;font-size:18px;margin-bottom:8px}.target .ar{font-size:40px;color:var(--gold);line-height:1.4}.field{position:relative;height:min(58vh,440px);border-radius:20px;overflow:hidden;background:linear-gradient(180deg,rgba(96,165,250,.12),rgba(52,211,153,.12));border:1px solid var(--bd)}
.bub{position:absolute;bottom:-90px;width:74px;height:74px;border-radius:50%;font-size:34px;line-height:1;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.55),hsla(var(--h),80%,60%,.35) 55%,hsla(var(--h),80%,50%,.55));border:1px solid rgba(255,255,255,.4);animation:rise linear forwards;color:#fff;padding:0}@keyframes rise{to{transform:translateY(-560px)}}.bub.pop{animation:none;transform:scale(1.5);opacity:0;transition:.25s}.bub.bad{background:rgba(248,113,113,.5)}
canvas#cv{width:100%;max-width:360px;display:block;margin:0 auto;border-radius:20px;border:1px solid var(--bd);touch-action:manipulation}
/* recitation */
.coach-note{padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--info) 14%,transparent);margin:6px 0 10px;font-size:14px}
.rtext{padding:16px;border-radius:18px;background:var(--card);border:1px solid var(--bd);text-align:center;margin:12px 0;font-size:calc(var(--fs) + 2px);line-height:2.4}.rtext.hidden-text{filter:blur(14px);user-select:none}
.w{border-radius:8px;padding:0 2px;cursor:default}.w.wrong,.w.missing{background:color-mix(in srgb,var(--bad) 28%,transparent);border-bottom:3px solid var(--bad);cursor:pointer}.w.missing{border-bottom-style:dashed}.w.pron{background:color-mix(in srgb,var(--warn) 28%,transparent);border-bottom:3px solid var(--warn);cursor:pointer}.w.taj{border-bottom:3px dotted var(--info);cursor:pointer}
.legend .w{font-size:12px;padding:2px 8px}.aend{color:var(--gold);font-size:.75em}
.recbar{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:12px;font-size:22px}.dot{width:14px;height:14px;border-radius:50%;background:var(--bad);animation:pulse .8s infinite alternate}
.score-ring{width:150px;height:150px;border-radius:50%;margin:10px auto;display:flex;flex-direction:column;align-items:center;justify-content:center;border:10px solid color-mix(in srgb,var(--warn) 60%,transparent);background:var(--card)}.score-ring.pass{border-color:var(--ac);box-shadow:0 0 50px color-mix(in srgb,var(--ac) 40%,transparent)}.score-ring b{font-size:38px}.score-ring small{color:var(--mut)}
.issues{display:flex;flex-direction:column;gap:8px}.issue{display:flex;gap:14px;align-items:center;text-align:left;padding:10px 14px;border-radius:14px;background:var(--card);border:1px solid var(--bd);border-left:4px solid var(--info)}.issue.wrong,.issue.missing{border-left-color:var(--bad)}.issue.pron{border-left-color:var(--warn)}.issue .ar{font-size:28px;line-height:1.6}.issue small{display:block;color:var(--mut)}
.spinner{width:56px;height:56px;border-radius:50%;border:5px solid var(--bd);border-top-color:var(--ac);margin:30px auto 16px;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:700px){.view{padding-top:30px}.nav{width:420px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}