/* مِرقاة تعلّم · Mirq AI Teacher — design tokens. Identity: ink + saffron (#c2410c), paper background, chalkboard code.
   Family: Miraqa (IBM Plex Sans Arabic + Alexandria). RTL first, 375px first. */
:root{
 --f:"IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
 --fd:"Alexandria","IBM Plex Sans Arabic",system-ui,sans-serif;
 --fm:"IBM Plex Mono","IBM Plex Sans Arabic",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
 --ink:#1c1917;--ink2:#44403c;--mut:#6b625a;--line:#e9e1d6;--line2:#f2ece4;--paper:#fbf8f3;--card:#fff;
 --acc:#c2410c;--acc-ink:#9a3412;--acc-soft:#fff1e6;--acc-line:rgba(194,65,12,.28);
 --ok:#15803d;--ok-soft:#ecfdf3;--bad:#b91c1c;--bad-soft:#fef2f2;--warn:#a16207;--warn-soft:#fefce8;
 --chalk:#1c1917;--chalk2:#292524;--chalk-t:#f5f0e8;--chalk-acc:#fdba74;--chalk-y:#fde68a;
 --r1:10px;--r2:14px;--r3:20px;--pill:999px;
 --sh:0 1px 2px rgba(28,25,23,.05);--sh2:0 14px 32px -18px rgba(28,25,23,.35);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--f);color:var(--ink);background:var(--paper);line-height:1.75;font-size:15.5px;overflow-x:hidden}
img,svg{max-width:100%}
a{color:var(--acc-ink)}
h1,h2,h3{font-family:var(--fd);line-height:1.3;margin:0 0 .4em;letter-spacing:-.01em}
h1{font-size:clamp(28px,7.6vw,50px);font-weight:700}
h2{font-size:clamp(23px,6vw,34px);font-weight:700}
h3{font-size:clamp(17px,4.6vw,20px);font-weight:600}
p{margin:0 0 .8em}
code,pre,kbd,.mono{font-family:var(--fm);font-size:.92em}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.mut{color:var(--mut)}
.kick{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--f);color:var(--acc-ink);background:var(--acc-soft);border:1px solid var(--acc-line);padding:4px 12px;border-radius:var(--pill);margin-bottom:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:var(--pill);border:1px solid transparent;background:var(--acc);color:#fff;font:600 15.5px var(--f);text-decoration:none;cursor:pointer;transition:transform .12s,background .12s;white-space:nowrap}
.btn:hover{background:var(--acc-ink)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--line2)}
.btn.dark{background:var(--ink);color:#fff}
.btn.sm{min-height:40px;padding:0 16px;font-size:14px}
.btn.block{width:100%;border-radius:var(--r2)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.g{background:#fff;color:#1f1f1f;border:1px solid #dadce0;font-weight:600}
.btn.g:hover{background:#f8f9fa}
.chip{display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--f);padding:3px 10px;border-radius:var(--pill);background:var(--line2);color:var(--ink2);white-space:nowrap}
.chip.acc{background:var(--acc-soft);color:var(--acc-ink)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r3);padding:20px;box-shadow:var(--sh)}
.grid{display:grid;gap:14px}
@media(min-width:760px){.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.field{display:block;margin:0 0 12px}
.field>span{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
input[type=text],input[type=email],input[type=password],input[type=number],input:not([type]),select,textarea{width:100%;min-height:50px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r2);background:#fff;font:15.5px var(--f);color:var(--ink)}
input:focus,select:focus,textarea:focus,.btn:focus-visible,a:focus-visible{outline:3px solid var(--acc-line);outline-offset:1px}
.toast{position:fixed;inset-inline:12px;bottom:16px;margin:auto;max-width:460px;background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r2);z-index:99;box-shadow:var(--sh2);font-size:14.5px;animation:up .25s}
@keyframes up{from{transform:translateY(10px);opacity:0}}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* brand mark */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 18px var(--fd)}
.logo svg{width:34px;height:34px;flex:none}
.logo small{display:block;font:500 11.5px var(--f);color:var(--mut);margin-top:-4px}

/* top bar */
.top{position:sticky;top:0;z-index:30;background:rgba(251,248,243,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:10px;height:64px}
.top nav{display:none;gap:22px}
.top nav a{color:var(--ink2);text-decoration:none;font-weight:500}
.top nav a:hover{color:var(--acc-ink)}
.top .act{display:flex;gap:8px;align-items:center}
.lang{min-height:40px;min-width:44px;padding:0 10px;border-radius:var(--pill);border:1px solid var(--line);background:#fff;font:600 13px var(--f);cursor:pointer;color:var(--ink)}
@media(min-width:900px){.top nav{display:flex}}

/* landing */
.hero{padding:36px 0 30px}
.hero .wrap{display:grid;gap:30px;align-items:center}
@media(min-width:960px){.hero .wrap{grid-template-columns:1.05fr .95fr}.hero{padding:64px 0 56px}}
.hero h1 em{font-style:normal;color:var(--acc);background:linear-gradient(transparent 62%,var(--acc-soft) 62%)}
.hero .lead{font-size:clamp(16px,4.3vw,19px);color:var(--ink2);max-width:560px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 10px}
.trust{display:flex;flex-wrap:wrap;gap:8px 16px;color:var(--mut);font-size:13.5px}
.trust span::before{content:"✓ ";color:var(--ok);font-weight:700}
.board{background:var(--chalk);color:var(--chalk-t);border-radius:24px;padding:18px;box-shadow:var(--sh2);position:relative;overflow:hidden}
.board::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 220px at 85% -10%,rgba(253,186,116,.16),transparent 60%);pointer-events:none}
.board .bar{display:flex;gap:6px;margin-bottom:12px}.board .bar i{width:10px;height:10px;border-radius:50%;background:#57534e}
.board pre{margin:0 0 12px;background:var(--chalk2);border-radius:14px;padding:12px 14px;direction:ltr;text-align:left;overflow-x:auto;font-size:13px;line-height:1.7;color:#e7e5e4}
.board pre .ln{color:#78716c;margin-right:10px}.board pre .k{color:var(--chalk-acc)}.board pre .s{color:#a7f3d0}.board pre .er{background:rgba(248,113,113,.18);display:inline-block;width:100%}
.board .err{font:12.5px var(--fm);color:#fca5a5;direction:ltr;text-align:left;margin:-4px 0 12px}
.bub{background:#fff;color:var(--ink);border-radius:18px 18px 18px 6px;padding:12px 14px;font-size:14.5px;line-height:1.75;max-width:94%}
.bub b{color:var(--acc-ink)}
.bub .terms{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.term{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;padding:3px 10px;border-radius:var(--pill);background:var(--acc-soft);color:var(--acc-ink);border:1px solid var(--acc-line)}
.term i{font-style:normal;font-family:var(--fm);color:var(--ink2)}
.wave{display:flex;gap:3px;align-items:center;margin-top:10px;color:var(--chalk-y);font-size:12.5px}
.wave b{width:3px;border-radius:2px;background:var(--chalk-y);animation:w 1s infinite ease-in-out}
.wave b:nth-child(2){animation-delay:.1s}.wave b:nth-child(3){animation-delay:.2s}.wave b:nth-child(4){animation-delay:.3s}.wave b:nth-child(5){animation-delay:.4s}
@keyframes w{0%,100%{height:5px}50%{height:16px}}
@media (prefers-reduced-motion:reduce){.wave b{animation:none;height:10px}}
.sec{padding:52px 0}
.sec.alt{background:#fff;border-block:1px solid var(--line)}
.sec .head{max-width:720px;margin-bottom:26px}
.ladder{display:grid;gap:10px}
@media(min-width:760px){.ladder{grid-template-columns:repeat(5,1fr);align-items:end}}
.step{border:1px solid var(--line);background:#fff;border-radius:var(--r2);padding:14px;position:relative}
.step b{font:700 26px var(--fd);color:var(--acc)}
@media(min-width:760px){.step:nth-child(1){min-height:120px}.step:nth-child(2){min-height:150px}.step:nth-child(3){min-height:180px}.step:nth-child(4){min-height:210px}.step:nth-child(5){min-height:240px;background:var(--ink);color:#fff;border-color:var(--ink)}.step:nth-child(5) b{color:var(--chalk-acc)}}
.feat{display:flex;flex-direction:column;gap:8px}
.feat .ic{width:44px;height:44px;border-radius:12px;background:var(--acc-soft);display:grid;place-items:center;color:var(--acc)}
.feat .ic svg{width:24px;height:24px}
.track{border-top:4px solid var(--tc,var(--acc))}
.track ul{margin:8px 0 0;padding-inline-start:18px;color:var(--ink2)}
.price{display:flex;flex-direction:column;gap:6px;position:relative}
.price .amt{font:700 34px var(--fd)}.price .amt small{font:500 14px var(--f);color:var(--mut)}
.price ul{list-style:none;padding:0;margin:8px 0 14px;flex:1}
.price li{padding:6px 0;border-bottom:1px dashed var(--line2);font-size:14.5px}
.price li::before{content:"✓";color:var(--ok);font-weight:700;margin-inline-end:8px}
.price li.no{color:var(--mut)}.price li.no::before{content:"–";color:var(--mut)}
.price.best{border:2px solid var(--acc);box-shadow:var(--sh2)}
.price .flag{position:absolute;top:-12px;inset-inline-start:16px;background:var(--acc);color:#fff;font:600 12px var(--f);padding:3px 10px;border-radius:var(--pill)}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{font-weight:600;cursor:pointer;list-style:none}
.faq summary::after{content:"+";float:left;color:var(--acc);font-weight:700}
.faq details[open] summary::after{content:"−"}
.foot{background:var(--ink);color:#d6d3d1;padding:36px 0 26px;font-size:14px}
.foot a{color:#fff;text-decoration:none}
.foot .cols{display:grid;gap:18px}
@media(min-width:760px){.foot .cols{grid-template-columns:2fr 1fr 1fr}}
.foot .logo{color:#fff}.foot .logo small{color:#a8a29e}
.pg{max-width:780px;margin:0 auto;padding:36px 18px 60px}
.pg h2{margin-top:1.4em}
.list{padding-inline-start:20px}.list li{margin:6px 0}
.cert .certbox{background:#fff;border:2px solid var(--ink);border-radius:24px;padding:30px 22px;text-align:center;box-shadow:var(--sh2)}
#qr svg{width:170px;height:170px;margin:12px auto;display:block}

/* ---------------- app ---------------- */
.app-top .wrap{height:58px}
.tabs{position:fixed;bottom:0;inset-inline:0;z-index:40;display:flex;background:#fff;border-top:1px solid var(--line);padding:4px 4px calc(4px + env(safe-area-inset-bottom))}
.tabs a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;color:var(--mut);text-decoration:none;font-size:11.5px;font-weight:600;border-radius:12px;min-height:48px;justify-content:center}
.tabs a svg{width:22px;height:22px}
.tabs a.on{color:var(--acc-ink);background:var(--acc-soft)}
@media(min-width:900px){.tabs{position:sticky;top:58px;bottom:auto;justify-content:center;gap:6px;border-top:0;border-bottom:1px solid var(--line);padding:6px}.tabs a{flex:none;flex-direction:row;gap:8px;padding:6px 14px;font-size:14px;min-height:40px}}
main.app{padding:18px 0 110px}
@media(min-width:900px){main.app{padding-bottom:50px}}
.hello{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:12px;text-align:center}
.stat b{display:block;font:700 22px var(--fd)}
.stat span{font-size:12.5px;color:var(--mut)}
.meter{height:8px;background:var(--line2);border-radius:99px;overflow:hidden;margin-top:6px}
.meter i{display:block;height:100%;background:var(--acc);border-radius:99px}
.unit{margin:16px 0}
.unit h3{display:flex;justify-content:space-between;align-items:center;gap:8px}
.les{display:flex;align-items:center;gap:12px;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:var(--r2);margin:8px 0;text-decoration:none;color:var(--ink)}
.les .n{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--line2);font:700 14px var(--fd);flex:none}
.les.done .n{background:var(--ok);color:#fff}
.les.locked{opacity:.6}
.les .t{flex:1;min-width:0}.les .t small{display:block;color:var(--mut);font-family:var(--fm);font-size:12px}
.lesson{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.lesson>*{min-width:0}
@media(min-width:1000px){.lesson{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}.lesson .side{position:sticky;top:120px}}
.blk{margin:0 0 12px;overflow-wrap:anywhere}
.blk.term{display:block;background:#fff;border:1px solid var(--line);border-inline-start:4px solid var(--acc);border-radius:var(--r1);padding:10px 12px;font-size:14.5px;color:var(--ink)}
.blk.term b{color:var(--acc-ink)}.blk.term i{font-style:normal;font-family:var(--fm);background:var(--line2);padding:1px 6px;border-radius:6px;margin-inline-start:6px}
.blk.tip{background:var(--warn-soft);border-radius:var(--r1);padding:10px 12px;font-size:14.5px}
.blk.saudi{background:#f0fdf4;border-radius:var(--r1);padding:10px 12px;font-size:14.5px}
pre.code{background:var(--chalk);color:#e7e5e4;padding:12px 14px;border-radius:var(--r2);overflow-x:auto;direction:ltr;text-align:left;font-size:13.5px;line-height:1.65;margin:0 0 12px}
.ed{display:flex;background:var(--chalk);border-radius:var(--r2);overflow:hidden;direction:ltr;min-height:200px;border:1px solid #000}
.ed .gut{margin:0;padding:12px 8px;color:#78716c;text-align:right;user-select:none;font:13.5px/1.65 var(--fm);min-width:38px;background:#171412;overflow:hidden;white-space:pre}
.ed textarea{flex:1;min-width:0;min-height:200px;border:0;border-radius:0;background:transparent;color:#f5f5f4;font:13.5px/1.65 var(--fm);padding:12px;resize:vertical;white-space:pre;overflow:auto;tab-size:2;direction:ltr;text-align:left;caret-color:var(--chalk-acc)}
.ed textarea:focus{outline:none}
.ed.tall textarea{min-height:320px}
.runrow{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.out{background:#0c0a09;color:#e7e5e4;border-radius:var(--r2);padding:12px 14px;font:13px/1.7 var(--fm);direction:ltr;text-align:left;min-height:54px;white-space:pre-wrap;word-break:break-word;max-height:300px;overflow:auto}
.out .er{color:#fca5a5}.out .ok{color:#86efac}.out .fl{color:#fcd34d}
.res{list-style:none;padding:0;margin:10px 0}
.res li{display:flex;gap:8px;align-items:flex-start;padding:8px 10px;border-radius:var(--r1);margin:6px 0;font-size:14.5px}
.res li.p{background:var(--ok-soft)}.res li.f{background:var(--bad-soft)}
.res li small{display:block;color:var(--mut);font-family:var(--f);unicode-bidi:plaintext;text-align:start}
iframe.prev{width:100%;height:260px;border:1px solid var(--line);border-radius:var(--r2);background:#fff}
.tutor{display:flex;flex-direction:column;height:min(70vh,620px);background:#fff;border:1px solid var(--line);border-radius:var(--r3);overflow:hidden}
.tutor .hd{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.tutor .hd .av{width:38px;height:38px;border-radius:12px;background:var(--ink);display:grid;place-items:center;flex:none}
.tutor .hd .av svg{width:24px;height:24px}
.tutor .msgs{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.m{max-width:88%;padding:10px 12px;border-radius:16px;font-size:14.5px;line-height:1.75;white-space:pre-wrap;word-wrap:break-word}
.m.a{background:#fff;border:1px solid var(--line);align-self:flex-start;border-start-start-radius:6px}
.m.u{background:var(--acc);color:#fff;align-self:flex-end;border-start-end-radius:6px}
.m pre{white-space:pre;overflow-x:auto;background:var(--chalk);color:#e7e5e4;padding:8px 10px;border-radius:10px;direction:ltr;text-align:left;font-size:12.5px;margin:6px 0}
.m .tools{display:flex;gap:6px;margin-top:6px}
.m .tools button{border:1px solid var(--line);background:var(--paper);border-radius:var(--pill);min-height:32px;padding:0 10px;font:600 12.5px var(--f);cursor:pointer;color:var(--ink2)}
.m .refs{margin-top:6px;font-size:12px;color:var(--mut)}
.m.typing{color:var(--mut)}
.tutor .chips{display:flex;gap:6px;padding:8px 10px 0;overflow-x:auto}
.tutor .chips button{flex:none;border:1px solid var(--acc-line);background:var(--acc-soft);color:var(--acc-ink);border-radius:var(--pill);min-height:36px;padding:0 12px;font:600 13px var(--f);cursor:pointer}
.tutor form{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);align-items:flex-end}
.tutor textarea{min-height:46px;max-height:120px;resize:none;border-radius:var(--r2);padding:10px 12px}
.iconbtn{width:46px;height:46px;flex:none;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.iconbtn.acc{background:var(--acc);border-color:var(--acc);color:#fff}
.iconbtn.rec{background:var(--bad);color:#fff;border-color:var(--bad)}
.iconbtn svg{width:20px;height:20px}
.modal{position:fixed;inset:0;background:rgba(28,25,23,.5);z-index:80;display:grid;place-items:center;padding:16px}
.modal .card{max-width:460px;width:100%;max-height:90vh;overflow:auto}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pick{border:1px solid var(--line);background:#fff;border-radius:var(--r2);padding:14px;text-align:start;cursor:pointer;font:inherit;color:inherit;width:100%}
.pick.on{border:2px solid var(--acc);background:var(--acc-soft)}
.lvl{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.lvl button{min-height:56px;border:1px solid var(--line);background:#fff;border-radius:var(--r1);font:700 18px var(--fd);cursor:pointer}
.lvl button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.etabs{display:flex;gap:6px;margin-bottom:8px}
.etabs button{min-height:38px;padding:0 14px;border-radius:var(--pill);border:1px solid var(--line);background:#fff;font:600 13px var(--fm);cursor:pointer}
.etabs button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.rv{border-inline-start:4px solid var(--line);padding:8px 12px;margin:8px 0;background:#fff;border-radius:var(--r1)}
.rv.blocker{border-color:var(--bad)}.rv.major{border-color:var(--acc)}.rv.minor{border-color:var(--warn)}.rv.nit{border-color:#a8a29e}
.rv code{direction:ltr;display:inline-block}
.bars .row{display:flex;align-items:center;gap:10px;margin:8px 0}.bars .row span{width:140px;font-size:13.5px}.bars .row .meter{flex:1;margin:0}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th,.tbl td{padding:8px 6px;border-bottom:1px solid var(--line2);text-align:start;vertical-align:top}
.tbl-wrap{overflow-x:auto}
.empty{text-align:center;padding:26px;color:var(--mut)}
.login{max-width:420px;margin:24px auto;padding:0 18px}
.or{display:flex;align-items:center;gap:10px;color:var(--mut);font-size:13px;margin:16px 0}.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.inv{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:18px}
.inv table{width:100%;border-collapse:collapse}.inv td{padding:6px 0;border-bottom:1px dashed var(--line2)}
@media print{.top,.tabs,.noprint{display:none!important}body{background:#fff}}
html[dir=ltr] .faq summary::after{float:right}