/* Ayah Steps - Daykit style (same tokens, fonts and components as Sumstep). Fonts are served from this site, not from Google. */
@font-face{font-family:'Lexend';font-weight:500;font-display:swap;src:url(../fonts/lexend-latin-500.woff2) format('woff2')}
@font-face{font-family:'Lexend';font-weight:600;font-display:swap;src:url(../fonts/lexend-latin-600.woff2) format('woff2')}
@font-face{font-family:'Lexend';font-weight:700;font-display:swap;src:url(../fonts/lexend-latin-700.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:400;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-400.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-weight:700;font-display:swap;src:url(../fonts/atkinson-hyperlegible-latin-700.woff2) format('woff2')}
@font-face{font-family:'Amiri';font-weight:400;font-display:swap;src:url(../fonts/amiri-400.woff2) format('woff2')}
@font-face{font-family:'Amiri';font-weight:700;font-display:swap;src:url(../fonts/amiri-700.woff2) format('woff2')}
@font-face{font-family:'Noto Naskh Arabic';font-weight:400;font-display:swap;src:url(../fonts/noto-naskh-arabic-400.woff2) format('woff2')}
:root{
  --bg:#F2F5FA;--surface:#FFFFFF;--ink:#14213D;--muted:#58688A;--line:#D3DCEA;--grid:#E1E8F2;
  --hl:#FFE066;--hlsoft:#FFF4BF;--hlfg:#14213D;--add:#0B8F80;--sub:#D9481F;--mul:#6A47D6;--div:#1F6FB2;
  --good:#12805C;--goodon:#FFFFFF;--goodbg:#DDF3E9;--nudge:#8A5200;--nudgebg:#FFF0D3;--btn:#14213D;--btnfg:#F2F5FA;
  --f-head:'Lexend',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-body:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-ar:'Amiri','Noto Naskh Arabic','Traditional Arabic',serif;
  --ar:44px;--arlh:1.95;--arws:.14em;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0E1526;--surface:#17213A;--ink:#E9EFFB;--muted:#9AA9C7;--line:#2C3A5C;--grid:#243252;--hl:#FFD84D;--hlsoft:rgba(255,216,77,.18);
  --add:#3CCDB9;--sub:#FF8A5E;--mul:#A58CFF;--div:#6CB4F0;--good:#46D39A;--goodon:#0E1526;--goodbg:#10342A;--nudge:#FFB347;--nudgebg:#3A2A0E;--btn:#E9EFFB;--btnfg:#0E1526;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0E1526;--surface:#17213A;--ink:#E9EFFB;--muted:#9AA9C7;--line:#2C3A5C;--grid:#243252;--hl:#FFD84D;--hlsoft:rgba(255,216,77,.18);
  --add:#3CCDB9;--sub:#FF8A5E;--mul:#A58CFF;--div:#6CB4F0;--good:#46D39A;--goodon:#0E1526;--goodbg:#10342A;--nudge:#FFB347;--nudgebg:#3A2A0E;--btn:#E9EFFB;--btnfg:#0E1526;color-scheme:dark}
:root[data-style="naskh"]{--f-ar:'Noto Naskh Arabic','Amiri','Traditional Arabic',serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.45}
button,input{font-family:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--mul);outline-offset:2px}
#app{outline:none}
.app{max-width:640px;margin:0 auto;padding:16px max(16px,env(safe-area-inset-right,0px)) calc(48px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.ar{font-family:var(--f-ar);font-weight:400}
.lat{font-family:var(--f-head)}
.h1{font:700 34px/1.12 var(--f-head);margin:0 0 10px;text-wrap:balance}
.h2{font:700 24px/1.15 var(--f-head);margin:0;text-wrap:balance}
.lead{margin:0 0 18px;color:var(--muted);font-size:18px}
.muted{color:var(--muted)}
.center{text-align:center}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.brand{display:flex;align-items:center;gap:10px;font:600 16px var(--f-head);letter-spacing:.02em}
.brand i{display:block;width:26px;height:26px;border-radius:7px;background:var(--ink);position:relative}
.brand i::after{content:"";position:absolute;inset:6px;border-radius:3px;background:var(--hl)}
.topbtns{display:flex;gap:8px;align-items:center}
.icon{width:48px;height:48px;display:grid;place-items:center;flex:none;background:transparent;border:2px solid var(--line);border-radius:8px}
.icon:hover,.pbtn:hover{border-color:var(--ink)}
.pbtn{min-height:48px;padding:0 14px;display:flex;gap:6px;align-items:center;background:transparent;border:2px solid var(--line);border-radius:8px;font:600 15px var(--f-head)}
.bar{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.bar>div{min-width:0;flex:1}
.bar.between{justify-content:space-between}
.bar .aa{margin-left:auto}
.btn{min-height:54px;padding:0 22px;border-radius:8px;border:2px solid var(--btn);background:var(--btn);color:var(--btnfg);font:600 18px var(--f-head);display:inline-flex;align-items:center;justify-content:center;text-align:center}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink)}
.btn.big{width:100%;min-height:62px;font-size:20px}
.btn.sm{min-height:46px;padding:0 16px;font-size:16px}
.btn.good{background:var(--good);border-color:var(--good);color:var(--goodon)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
a.btn{text-decoration:none}
.btns{display:grid;gap:10px;margin-top:18px}
.card{background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:16px;margin-bottom:14px}
.card p{margin:8px 0 0}
.card.good{border-color:var(--good);background:var(--goodbg)}
.card.nudge{border-color:var(--nudge);background:var(--nudgebg)}
.stack{display:grid;gap:10px}
.section{margin-top:26px}
.section>.h2{margin-bottom:12px}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;margin:0 0 14px;border:2px solid var(--ink);border-radius:999px;background:var(--surface);font:600 18px var(--f-head)}
.banner{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:2px solid var(--ink);background:var(--surface);border-radius:8px;padding:10px 14px;margin:0 0 14px}
.trow{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line)}
.trow:last-of-type{border-bottom:0}
.trow.isdone b{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1.5px}
.done{font:600 14px var(--f-head);color:var(--good);border:1.5px solid var(--good);border-radius:99px;padding:2px 12px;white-space:nowrap}
.done-all{margin:12px 0 0;font:600 17px var(--f-head);color:var(--good)}
.lvls{display:grid;gap:8px}
.lvl{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;text-align:left;min-height:68px;padding:10px 12px;border:2px solid var(--line);background:var(--surface);border-radius:10px}
.lvl:hover{border-color:var(--ink)}
.lvl.cur{border-color:var(--ink);background:var(--hlsoft)}
.lvl.ok .num{background:var(--good);color:var(--goodon);border-color:var(--good)}
.lvl.locked{opacity:.55}
.num{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--ink);font:700 18px var(--f-head)}
.lt{display:grid;gap:2px;min-width:0}
.lt b{font:600 17px var(--f-head)}
.lt small{color:var(--muted);font-size:15px}
.pc{font:600 14px var(--f-head);color:var(--muted)}
.chars{font-size:30px;line-height:1.2;color:var(--ink)}
.meter{display:block;height:6px;border-radius:3px;background:var(--grid);overflow:hidden;margin-top:4px}
.meter i{display:block;height:100%;background:var(--good)}
.lab{font:600 14px var(--f-head);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.field{margin-bottom:22px}
.ex{margin:8px 0 0;color:var(--muted);font-size:16px}
.namefield{width:100%;font:18px var(--f-body);padding:12px;border:2px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8px}
.seg button{min-height:54px;padding:6px 8px;border:2px solid var(--line);background:var(--surface);border-radius:8px;font:600 17px var(--f-head)}
.seg button[aria-pressed="true"]{background:var(--hl);border-color:var(--ink);color:var(--hlfg)}
.sw{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;text-align:left;min-height:64px;border:2px solid var(--line);background:var(--surface);border-radius:8px;padding:10px 14px}
.sw b{display:block;font:600 17px var(--f-head)}
.sw small{display:block;color:var(--muted);font-size:15px}
.sw.sel{grid-template-columns:1fr}
.sw.sel[aria-checked="true"]{background:var(--hl);border-color:var(--ink);color:var(--hlfg)}
.sw.sel[aria-checked="true"] small{color:var(--hlfg)}
.knob{width:50px;height:28px;border-radius:14px;background:var(--line);position:relative;display:block}
.knob::after{content:"";position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--surface);transition:transform .15s}
.sw[aria-checked="true"] .knob{background:var(--hl)}
.sw[aria-checked="true"] .knob::after{transform:translateX(22px);background:var(--hlfg)}
.acc{border:1.5px solid var(--line);border-radius:10px;background:var(--surface);margin-bottom:10px}
.acc summary{list-style:none;cursor:pointer;padding:14px 16px;min-height:60px;display:flex;align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary b{display:block;font:600 18px var(--f-head)}
.acc summary small{display:block;color:var(--muted);font-size:15px}
.acc[open] summary{border-bottom:1.5px solid var(--line)}
.accbody{padding:16px}
.filebtn{cursor:pointer}
.preview{margin-top:14px;padding:14px;border:2px dashed var(--line);border-radius:10px;font-size:min(var(--ar),48px);line-height:var(--arlh);word-spacing:var(--arws);text-align:center}
.tt{width:100%;border-collapse:collapse;margin-top:8px}
.tt th,.tt td{padding:8px 4px;border-bottom:1px solid var(--line);text-align:left;font-weight:400}
.tt td{text-align:right}
.prose h2{font:700 20px var(--f-head);margin:22px 0 6px}
.prose p,.prose li{margin:6px 0}
.foot{margin:28px 0 8px;text-align:center;color:var(--muted);font-size:15px}
.foot a,.prose a{color:inherit}
/* lessons */
.strip{display:flex;gap:5px;margin:0 0 16px}
.strip i{flex:1;height:8px;border-radius:4px;background:var(--grid)}
.strip i.d{background:var(--good)}
.strip i.c{background:var(--hl);box-shadow:inset 0 0 0 2px var(--ink)}
.q{font:700 22px/1.25 var(--f-head);margin:0 0 12px;text-wrap:balance}
.bigq{text-align:center;margin:6px 0 16px;padding:14px 8px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px}
.bigq.ar{font-size:calc(var(--ar)*1.7);line-height:1.5}
.bigq.lat{font:700 44px/1.2 var(--f-head)}
.opts{display:grid;gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
.opts.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opts.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{min-height:72px;padding:8px;border:2px solid var(--line);background:var(--surface);border-radius:10px;font:600 22px var(--f-head);text-align:center}
.opt.ar{font:400 calc(var(--ar)*1.15)/1.5 var(--f-ar)}
.opt:not([disabled]):hover{border-color:var(--ink)}
.opt.right{background:var(--good);border-color:var(--good);color:var(--goodon)}
.opt.wrong{background:var(--nudgebg);border-color:var(--nudge);color:var(--nudge)}
.opt[disabled]{cursor:default}
.fb{margin-top:16px}
.fb p{margin:8px 0 14px}
.fb b{font:700 22px var(--f-head)}
.teach .tiles,.tiles{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-bottom:6px}
.tl{background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:12px;text-align:center;display:grid;gap:4px}
.tl .ar.big{font-size:calc(var(--ar)*1.6);line-height:1.5}
.tl b{font:600 18px var(--f-head)}
.tl small{color:var(--muted);font-size:15px}
.forms{margin-bottom:10px}
.frow{display:flex;justify-content:space-around;gap:6px;margin:6px 0;text-align:center}
.frow .ar.big{font-size:calc(var(--ar)*1.4);line-height:1.5}
.frow small{color:var(--muted)}
.bigscore{font:700 20px var(--f-head);margin:0;color:var(--muted)}
.bigscore b{font-size:56px;line-height:1;color:var(--ink)}
/* ayah memorising */
.ayah{font-family:var(--f-ar);font-size:var(--ar);line-height:var(--arlh);word-spacing:var(--arws);text-align:right;padding:18px 14px;background:var(--surface);border:1.5px solid var(--line);border-radius:12px;margin-bottom:6px}
.ayah.prev{opacity:.7;margin-bottom:8px;font-size:calc(var(--ar)*.8)}
.tag{font:600 14px var(--f-head);color:var(--muted);margin:6px 2px}
.bism{text-align:center;font-size:calc(var(--ar)*.85);line-height:1.8;margin:0 0 8px;color:var(--muted)}
.w{display:inline-block;border-radius:8px;padding:0 4px}
.w.now{background:var(--hl);color:var(--hlfg)}
.w.later{opacity:.28}
button.w{border:0;background:var(--hlsoft);font:inherit;color:inherit;cursor:pointer;box-shadow:inset 0 -3px 0 var(--muted);line-height:1.45;padding:.05em .25em;margin:.12em 0;vertical-align:middle;min-width:1.6em;min-height:44px}
button.w.hid span{visibility:hidden}
.grades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.grades .btn{padding:0 6px;min-height:62px;font-size:17px}
.alist{display:grid;gap:8px;margin-top:6px}
.arow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--surface);border:1.5px solid var(--line);border-radius:10px;padding:10px 12px}
.an{font:700 15px var(--f-head);color:var(--muted)}
.atext{font-size:calc(var(--ar)*.7);line-height:1.9;text-align:right}
.box{display:grid;gap:3px}
.box i{width:10px;height:5px;border-radius:2px;background:var(--grid)}
.box i.on{background:var(--good)}
.away{position:fixed;inset:0;z-index:50;background:color-mix(in srgb,var(--bg) 92%,transparent);display:flex;align-items:center;justify-content:center;padding:16px}
.awaybox{max-width:420px;width:100%;margin:0}
@media (max-width:400px){.opts.n3{gap:6px}.opt{font-size:20px}.h1{font-size:28px}}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}