/* IELTS Academy — design system: "boarding pass" — deep ink navy, coral stamp, teal route lines, warm paper */
[hidden]{display:none!important}
:root{
  --paper:#FBF8F2; --paper2:#F4EFE4; --surface:#FFFFFF; --surface2:#F6F2EA; --ink:#14213D; --ink2:#3D4866; --muted:#6B7390; --line:#E6DFD1; --edge:#14213D;
  --pri:#CC4A22; --pri-2:#B23A17; --pri-ink:#FFFFFF; --pri-soft:#FDE6DE; --pri-t:#B23A17;
  --teal:#1B8A8F; --teal-soft:#DDF1F1; --teal-t:#14686C;
  --gold:#F2B33D; --gold-soft:#FDF1D6; --gold-t:#8A5D00;
  --navy:#14213D; --navy-2:#22335C; --navy-ink:#F6F3EC;
  --ok:#1E8E5A; --ok-soft:#DFF3E8; --ok-t:#16704A; --bad:#D6453D; --bad-soft:#FBE3E1; --bad-t:#B0322B;
  --sky:#3E7CB1; --sky-soft:#E1EDF7;
  --cL:#3E7CB1; --cR:#1B8A8F; --cW:#E4572E; --cS:#8C5CC7;
  --shadow:0 1px 2px rgba(20,33,61,.06),0 12px 28px -16px rgba(20,33,61,.25);
  --pop:3px 3px 0 var(--edge);
  --f-head:"Readex Pro","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Arabic","Readex Pro",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --f-en:"Readex Pro",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --f-test:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --r:16px; --gut:16px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  color-scheme:dark;
  --paper:#0F1626; --paper2:#141C30; --surface:#18223A; --surface2:#1F2B47; --ink:#EEF0F6; --ink2:#C3C8D9; --muted:#9AA2BC; --line:#2C3858; --edge:#05080F;
  --pri:#FF7A52; --pri-2:#FF9371; --pri-ink:#1A0E08; --pri-soft:#3A2018; --pri-t:#FF9A7A;
  --teal:#3FC1C6; --teal-soft:#123638; --teal-t:#6FD6DA; --gold:#F5C25E; --gold-soft:#3A2F14; --gold-t:#F5C25E;
  --navy:#0A1020; --navy-2:#1A2644; --navy-ink:#F6F3EC;
  --ok:#4CC88B; --ok-soft:#14352A; --ok-t:#6FDBA5; --bad:#FF7A70; --bad-soft:#3F1C1C; --bad-t:#FF9A92; --sky:#79B2E6; --sky-soft:#18304A;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 30px -16px rgba(0,0,0,.7);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#0F1626; --paper2:#141C30; --surface:#18223A; --surface2:#1F2B47; --ink:#EEF0F6; --ink2:#C3C8D9; --muted:#9AA2BC; --line:#2C3858; --edge:#05080F;
  --pri:#FF7A52; --pri-2:#FF9371; --pri-ink:#1A0E08; --pri-soft:#3A2018; --pri-t:#FF9A7A;
  --teal:#3FC1C6; --teal-soft:#123638; --teal-t:#6FD6DA; --gold:#F5C25E; --gold-soft:#3A2F14; --gold-t:#F5C25E;
  --navy:#0A1020; --navy-2:#1A2644; --navy-ink:#F6F3EC;
  --ok:#4CC88B; --ok-soft:#14352A; --ok-t:#6FDBA5; --bad:#FF7A70; --bad-soft:#3F1C1C; --bad-t:#FF9A92; --sky:#79B2E6; --sky-soft:#18304A;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 30px -16px rgba(0,0,0,.7);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px));
  background-image:radial-gradient(circle at 1px 1px,color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 0);background-size:22px 22px}
@media (min-width:960px){body{padding-bottom:0}}
body.exam-open{overflow:hidden}
a{color:var(--pri-t)}
h1,h2,h3,h4{font-family:var(--f-head);line-height:1.35;margin:0;font-weight:600;text-wrap:balance}
h1{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:700;letter-spacing:-.01em}
h2{font-size:1.22rem} h3{font-size:1.04rem}
p{margin:0}
.en,[lang="en"] .en{font-family:var(--f-en)}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted)} .small{font-size:.86rem} .tiny{font-size:.76rem} .center{text-align:center}
.lead{color:var(--ink2);max-width:68ch}
.eyebrow{font-family:var(--f-head);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--pri-t);font-weight:600}
:root[lang="ar"] .eyebrow{letter-spacing:0;text-transform:none;font-size:.86rem}
svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
svg .f{fill:currentColor;stroke:none}
.i16{inline-size:16px;block-size:16px;vertical-align:-3px;flex-shrink:0} .i20{inline-size:20px;block-size:20px;flex-shrink:0}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
bdi.ltr{direction:ltr;unicode-bidi:isolate}

/* ---------- buttons, chips, cards ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;font-family:var(--f-head);font-size:.95rem;border-radius:12px;padding:10px 18px;border:2px solid var(--edge);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;line-height:1.3;min-height:44px;transition:transform .08s,box-shadow .08s;box-shadow:var(--pop)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--edge)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--edge)}
.btn.primary{background:var(--pri);color:var(--pri-ink)}
.btn.teal{background:var(--teal);color:#fff}
.btn.dark{background:var(--navy);color:var(--navy-ink)}
.btn.ghost{box-shadow:none;border-color:var(--line);background:transparent}
.btn.ghost:hover{background:var(--surface2);transform:none}
.btn.sm{padding:6px 12px;min-height:36px;font-size:.86rem;border-radius:10px}
.btn.block{width:100%}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.icon-btn{inline-size:42px;block-size:42px;display:grid;place-items:center;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.icon-btn svg{inline-size:20px;block-size:20px}
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;padding:2px 10px;border-radius:99px;background:var(--surface2);color:var(--ink2);white-space:nowrap;font-weight:600;border:1px solid var(--line)}
.chip.pri{background:var(--pri-soft);color:var(--pri-t);border-color:transparent}
.chip.teal{background:var(--teal-soft);color:var(--teal-t);border-color:transparent}
.chip.gold{background:var(--gold-soft);color:var(--gold-t);border-color:transparent}
.chip.ok{background:var(--ok-soft);color:var(--ok-t);border-color:transparent}
.chip.bad{background:var(--bad-soft);color:var(--bad-t);border-color:transparent}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.spread{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.card{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:20px;display:grid;gap:12px;align-content:start;box-shadow:var(--shadow);min-width:0;position:relative}
.card.tight{padding:14px;gap:8px}
.card.ink{background:var(--navy);color:var(--navy-ink);border-color:var(--navy)}
.card.ink .muted{color:color-mix(in srgb,var(--navy-ink) 70%,transparent)}
.card h2 .chip{vertical-align:middle}
.grid{display:grid;gap:16px}
.g2{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.g3{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.g4{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.tile{display:grid;gap:6px;text-decoration:none;color:inherit;cursor:pointer;text-align:start;font:inherit}
.tile:hover{border-color:var(--ink2)}
.tile .t-ic{inline-size:44px;block-size:44px;border-radius:12px;display:grid;place-items:center;border:2px solid var(--edge);box-shadow:2px 2px 0 var(--edge)}
.tile .t-ic svg{inline-size:22px;block-size:22px}
.locked{opacity:.92}
.lock-b{display:inline-flex;align-items:center;gap:4px;font-size:.74rem;font-weight:700;color:var(--gold-t);background:var(--gold-soft);border-radius:99px;padding:1px 9px}
.empty{color:var(--muted);font-size:.92rem;padding:8px 0}
hr.sep{border:0;border-top:1.5px dashed var(--line);margin:4px 0}
.notice{border-radius:12px;padding:12px 14px;background:var(--surface2);border:1.5px solid var(--line);font-size:.92rem}
.notice.gold{background:var(--gold-soft);border-color:transparent;color:var(--ink)}
.notice.pri{background:var(--pri-soft);border-color:transparent}
.notice.teal{background:var(--teal-soft);border-color:transparent}
kbd{font-family:var(--f-mono);font-size:.8em;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:0 5px}

/* ---------- header / nav ---------- */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1.5px solid var(--line)}
.top-in{max-width:1180px;margin:0 auto;padding-inline:var(--gut);display:flex;align-items:center;gap:14px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);flex-shrink:0}
.logo{inline-size:42px;block-size:42px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center;font-family:var(--f-en);font-weight:700;font-size:10.5px;letter-spacing:.02em;border:2px solid var(--edge);box-shadow:2px 2px 0 var(--edge);position:relative;transform:rotate(-8deg)}
.logo::after{content:"";position:absolute;inset:3px;border-radius:50%;border:1.5px dashed rgba(255,255,255,.7)}
.brand b{font-family:var(--f-head);font-size:1.08rem;display:block;line-height:1.2;font-weight:700}
.brand small{color:var(--muted);font-size:.72rem;display:block;line-height:1.2;font-family:var(--f-en)}
#nav{display:none;gap:2px;flex:1;justify-content:center}
#nav a,#tabbar a{text-decoration:none;color:var(--ink2);display:flex;align-items:center;gap:6px;border-radius:10px;font-size:.9rem;font-weight:600;font-family:var(--f-head)}
#nav a{padding:7px 11px}
#nav a svg,#tabbar a svg{inline-size:20px;block-size:20px}
#nav a:hover{background:var(--surface2)}
#nav a.on{background:var(--navy);color:var(--navy-ink)}
.hdr-acts{display:flex;align-items:center;gap:8px;margin-inline-start:auto}
#tabbar{position:fixed;inset-inline:10px;bottom:calc(8px + env(safe-area-inset-bottom,0px));z-index:30;display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border:2px solid var(--edge);border-radius:18px;box-shadow:var(--pop);padding:5px}
#tabbar a{flex-direction:column;gap:0;padding:6px 2px;font-size:.7rem;justify-content:center}
#tabbar a.on{background:var(--navy);color:var(--navy-ink)}
@media (min-width:960px){#nav{display:flex}#tabbar{display:none}.hdr-acts{margin-inline-start:0}}
.save-dot{inline-size:9px;block-size:9px;border-radius:50%;background:var(--ok);flex-shrink:0}
.save-dot.bad{background:var(--bad)} .save-dot.wait{background:var(--gold)}
#banner{background:var(--gold-soft);text-align:center;padding:8px 16px;font-size:.9rem;font-weight:600}
#banner.promo{background:var(--pri-soft)} #banner.warn{background:var(--bad-soft)}
main{max-width:1180px;margin:0 auto;padding:24px var(--gut) 56px;display:grid;gap:22px}
.page-h{display:grid;gap:6px;max-width:820px}
.page-h p{color:var(--ink2)}
footer{max-width:1180px;margin:0 auto;padding:20px var(--gut) 30px;color:var(--muted);font-size:.84rem;display:flex;gap:14px;flex-wrap:wrap;justify-content:space-between}
footer a{color:var(--muted)}

/* ---------- band stamps & meters ---------- */
.stamp{inline-size:86px;block-size:86px;border-radius:50%;border:3px solid currentColor;display:grid;place-items:center;position:relative;transform:rotate(-6deg);font-family:var(--f-en);flex-shrink:0}
.stamp::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1.5px dashed currentColor;opacity:.6}
.stamp b{font-size:1.75rem;line-height:1;font-weight:700}
.stamp small{position:absolute;bottom:13px;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.stamp.sm{inline-size:62px;block-size:62px;border-width:2.5px} .stamp.sm b{font-size:1.25rem} .stamp.sm small{bottom:8px;font-size:.5rem}
.stamp.lg{inline-size:120px;block-size:120px} .stamp.lg b{font-size:2.6rem} .stamp.lg small{bottom:18px}
.stamp.none{color:var(--muted);opacity:.7}
.c-L{color:var(--cL)} .c-R{color:var(--cR)} .c-W{color:var(--cW)} .c-S{color:var(--cS)}
.bg-L{background:var(--cL)} .bg-R{background:var(--cR)} .bg-W{background:var(--cW)} .bg-S{background:var(--cS)}
.skills4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:520px){.skills4 .stamp{inline-size:64px;block-size:64px;border-width:2px}.skills4 .stamp *{font-size:.85em}}
.sk{display:grid;justify-items:center;gap:4px;text-align:center;text-decoration:none;color:inherit}
.sk .lab{font-size:.82rem;font-weight:600}
.meter{block-size:10px;border-radius:99px;background:var(--surface2);overflow:hidden;border:1px solid var(--line)}
.meter i{display:block;block-size:100%;border-radius:99px;background:var(--teal)}
.bars{display:grid;gap:10px}
.bar-row{display:grid;grid-template-columns:minmax(90px,150px) 1fr auto;gap:10px;align-items:center;font-size:.9rem}
.bandline{position:relative;block-size:14px;border-radius:99px;background:var(--surface2);border:1px solid var(--line)}
.bandline i{position:absolute;inset-block:0;inset-inline-start:0;border-radius:99px}
.bandline .tgt{position:absolute;inset-block:-4px;inline-size:3px;background:var(--ink);border-radius:2px}
.hero{background:var(--navy);color:var(--navy-ink);border-radius:22px;padding:26px;display:grid;gap:18px;grid-template-columns:1fr;position:relative;overflow:hidden;border:2px solid var(--edge);box-shadow:var(--pop)}
.hero::after{content:"";position:absolute;inset-inline-end:-60px;top:-60px;inline-size:220px;block-size:220px;border-radius:50%;border:2px dashed color-mix(in srgb,var(--navy-ink) 18%,transparent)}
.hero .muted{color:color-mix(in srgb,var(--navy-ink) 72%,transparent)}
.hero .stamp{color:var(--gold)}
@media (min-width:860px){.hero{grid-template-columns:1.4fr 1fr;align-items:center}}
.countdown{display:flex;gap:10px;align-items:baseline}
.countdown b{font-family:var(--f-en);font-size:2.4rem;line-height:1}
.tasks{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.task{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface);text-decoration:none;color:inherit}
.task:hover{border-color:var(--ink2)}
.task .tk{inline-size:26px;block-size:26px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}
.task.done .tk{background:var(--ok);border-color:var(--ok);color:#fff}
.task.done .tt{text-decoration:line-through;color:var(--muted)}
.task .tt b{display:block;font-family:var(--f-head);font-weight:600}
.task .tt small{color:var(--muted)}
.dot{inline-size:10px;block-size:10px;border-radius:50%;display:inline-block}

/* ---------- lists ---------- */
.list{display:grid;gap:8px}
.li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);text-decoration:none;color:inherit;flex-wrap:wrap}
.li:hover{border-color:var(--ink2)}
.li .li-t{display:grid;gap:2px;min-width:0;flex:1}
.li .li-t b{font-family:var(--f-head);font-weight:600}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:12px;padding:3px;background:var(--surface);gap:2px;flex-wrap:wrap}
.seg button{font:inherit;font-size:.86rem;font-weight:600;border:0;background:transparent;color:var(--ink2);padding:6px 12px;border-radius:9px;cursor:pointer;font-family:var(--f-head)}
.seg button.on{background:var(--navy);color:var(--navy-ink)}
.fld{display:grid;gap:5px;font-size:.9rem;font-weight:600}
.fld input,.fld select,.fld textarea,input.inp,select.inp{font:inherit;font-weight:400;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);min-height:44px;width:100%}
.fld .hint{font-weight:400;color:var(--muted);font-size:.8rem}
.err{color:var(--bad-t);font-size:.86rem}

/* ---------- lesson ---------- */
.lesson{max-width:820px;display:grid;gap:16px}
.lb{display:grid;gap:10px}
.lb h3{display:flex;gap:8px;align-items:center}
.lb ol,.lb ul{margin:0;padding-inline-start:22px;display:grid;gap:6px}
.src{font-family:var(--f-en);direction:ltr;text-align:left;background:var(--surface2);border-inline-start:4px solid var(--teal);border-radius:8px;padding:12px 14px;white-space:pre-line;font-size:.95rem}
.walk{background:var(--teal-soft);border-radius:10px;padding:10px 12px;font-size:.92rem}
.opt-btns{display:grid;gap:8px}
.opt-btn{font:inherit;text-align:start;padding:10px 14px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;display:flex;gap:10px;align-items:center}
.opt-btn:hover{border-color:var(--ink2)}
.opt-btn .L{inline-size:26px;block-size:26px;border-radius:7px;border:1.5px solid var(--line);display:grid;place-items:center;font-weight:700;font-family:var(--f-en);flex-shrink:0;font-size:.85rem}
.opt-btn.ok{border-color:var(--ok);background:var(--ok-soft)} .opt-btn.ok .L{background:var(--ok);color:#fff;border-color:var(--ok)}
.opt-btn.bad{border-color:var(--bad);background:var(--bad-soft)} .opt-btn.bad .L{background:var(--bad);color:#fff;border-color:var(--bad)}
.opt-btn[disabled]{cursor:default}
.ltr-text{direction:ltr;text-align:left;font-family:var(--f-en);unicode-bidi:isolate}

/* ---------- flashcards ---------- */
.flash{perspective:1200px;max-width:520px;margin-inline:auto;width:100%}
.flash-in{position:relative;min-height:260px;transition:transform .5s;transform-style:preserve-3d;cursor:pointer}
.flash.flip .flash-in{transform:rotateY(180deg)}
.flash-f,.flash-b{position:absolute;inset:0;backface-visibility:hidden;border-radius:20px;border:2px solid var(--edge);box-shadow:var(--pop);padding:24px;display:grid;place-content:center;gap:10px;text-align:center;background:var(--surface)}
.flash-f{background:linear-gradient(180deg,var(--surface) 0,var(--surface) 70%,var(--gold-soft) 70%)}
.flash-b{transform:rotateY(180deg)}
.flash .word{font-family:var(--f-en);font-size:2rem;font-weight:700;direction:ltr}
.flash .ex{font-family:var(--f-en);direction:ltr;color:var(--ink2);font-size:.95rem}
@media (prefers-reduced-motion:reduce){.flash-in{transition:none}}

/* ---------- writing studio ---------- */
.studio{display:grid;gap:16px}
@media (min-width:1000px){.studio{grid-template-columns:1fr 1.15fr;align-items:start}.studio .sticky{position:sticky;top:80px}}
.prompt-box{font-family:var(--f-en);direction:ltr;text-align:left;white-space:pre-line;background:var(--surface2);border-radius:12px;padding:14px;border:1.5px solid var(--line)}
.editor{font-family:var(--f-en);direction:ltr;text-align:left;font-size:1.02rem;line-height:1.8;min-height:380px;width:100%;padding:16px;border:2px solid var(--edge);border-radius:14px;background:var(--surface);color:var(--ink);resize:vertical}
.wbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:.88rem}
.wc{font-family:var(--f-en);font-weight:700}
.radar{display:grid;gap:8px}
.flag{border-inline-start:4px solid var(--gold);background:var(--surface2);border-radius:8px;padding:8px 12px;font-size:.88rem;display:grid;gap:3px}
.flag.hi{border-color:var(--bad)} .flag.ok{border-color:var(--ok)}
.flag q{font-family:var(--f-en);quotes:none;direction:ltr;unicode-bidi:isolate;background:var(--bad-soft);border-radius:4px;padding:0 4px}
.crit{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center}
.crit .cb{inline-size:42px;block-size:42px;border-radius:10px;display:grid;place-items:center;font-family:var(--f-en);font-weight:700;color:#fff;background:var(--navy)}
.fix{display:grid;gap:4px;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line)}
.fix .q{font-family:var(--f-en);direction:ltr;text-align:left;text-decoration:line-through;color:var(--bad-t)}
.fix .b{font-family:var(--f-en);direction:ltr;text-align:left;color:var(--ok-t);font-weight:600}
.model{font-family:var(--f-en);direction:ltr;text-align:left;white-space:pre-line;line-height:1.8}
.vocab-pills{display:flex;flex-wrap:wrap;gap:6px}
.vp{font-size:.85rem;border-radius:8px;padding:3px 9px;background:var(--teal-soft);color:var(--ink)}
.vp b{font-family:var(--f-en);direction:ltr;unicode-bidi:isolate}

/* ---------- charts ---------- */
.chart{width:100%;max-width:640px;margin-inline:auto;display:block;direction:ltr}
.chart text{fill:var(--ink);stroke:none;font-family:var(--f-test);font-size:11px}
.chart .ax{stroke:var(--ink2);stroke-width:1}
.chart .gl{stroke:var(--line);stroke-width:1}
.ctable{border-collapse:collapse;width:100%;font-family:var(--f-test);font-size:.88rem;direction:ltr;text-align:left}
.ctable th,.ctable td{border:1px solid var(--line);padding:6px 8px}
.ctable th{background:var(--surface2)}
.legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;font-family:var(--f-test);font-size:.8rem;direction:ltr}
.legend i{display:inline-block;inline-size:12px;block-size:12px;border-radius:3px;margin-inline-end:4px;vertical-align:-1px}

/* ---------- speaking ---------- */
.mic{inline-size:96px;block-size:96px;border-radius:50%;border:3px solid var(--edge);background:var(--pri);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:var(--pop);margin-inline:auto}
.mic svg{inline-size:40px;block-size:40px}
.mic.rec{animation:pulse 1.4s infinite;background:var(--bad)}
@keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--bad) 50%,transparent)}70%{box-shadow:0 0 0 18px transparent}100%{box-shadow:0 0 0 0 transparent}}
@media (prefers-reduced-motion:reduce){.mic.rec{animation:none}}
.timer{font-family:var(--f-en);font-size:2.2rem;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.transcript{font-family:var(--f-en);direction:ltr;text-align:left;background:var(--surface2);border-radius:12px;padding:12px;min-height:60px;white-space:pre-wrap}
.cue{font-family:var(--f-en);direction:ltr;text-align:left;border:2px solid var(--edge);border-radius:14px;padding:18px;background:var(--gold-soft);box-shadow:var(--pop);color:#14213D}
.cue ul{margin:6px 0;padding-left:20px}
.examiner{display:flex;gap:12px;align-items:center}
.examiner .av{inline-size:48px;block-size:48px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-family:var(--f-en);font-weight:700;flex-shrink:0}
.examiner .say{font-family:var(--f-en);direction:ltr;text-align:left;background:var(--surface2);border-radius:14px;padding:10px 14px;font-weight:600}
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.metric{border:1.5px solid var(--line);border-radius:12px;padding:10px;text-align:center}
.metric b{display:block;font-family:var(--f-en);font-size:1.4rem}

/* ---------- toast, modal ---------- */
#toast{position:fixed;inset-inline:16px;bottom:calc(96px + env(safe-area-inset-bottom,0px));margin-inline:auto;max-width:420px;background:var(--navy);color:var(--navy-ink);border-radius:14px;padding:12px 16px;z-index:200;box-shadow:var(--shadow);font-size:.92rem;text-align:center}
@media (min-width:960px){#toast{bottom:24px}}
.modal{position:fixed;inset:0;z-index:150;background:rgba(10,14,26,.55);display:grid;place-items:center;padding:16px;overflow:auto}
.modal-in{background:var(--surface);color:var(--ink);border-radius:20px;border:2px solid var(--edge);box-shadow:var(--pop);width:100%;max-width:460px;padding:22px;display:grid;gap:14px;max-height:calc(100vh - 32px);overflow:auto}
.modal-in.wide{max-width:640px}
.modal-h{display:flex;justify-content:space-between;align-items:center;gap:10px}
.plans{display:grid;gap:12px}
.plan-c{border:2px solid var(--line);border-radius:16px;padding:16px;display:grid;gap:6px;cursor:pointer;text-align:start;font:inherit;background:var(--surface);color:var(--ink)}
.plan-c.on{border-color:var(--pri);box-shadow:3px 3px 0 var(--pri)}
.plan-c .price{font-family:var(--f-en);font-size:1.6rem;font-weight:700}
.benefits{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.benefits li{display:flex;gap:8px;align-items:flex-start}
.benefits svg{color:var(--ok);margin-top:4px}

/* ======================================================================
   COMPUTER-DELIVERED TEST INTERFACE (mirrors the real CD-IELTS look)
   ====================================================================== */
/* ===== exam room: same "boarding pass" theme as the rest of the site (paper, ink, coral, teal) ===== */
#exam{position:fixed;inset:0;z-index:100;overflow-y:auto;background:var(--paper);color:var(--ink);display:flex;flex-direction:column;font-family:var(--f-en);direction:ltr;text-align:left;
  --ex-line:var(--line);--ex-soft:var(--surface2);--ex-acc:var(--pri);--ex-card:var(--surface);--ex-mark:#FFE08A;--ex-ans:var(--teal-soft);--ex-ans-b:var(--teal)}
#exam.contrast{background:#000;color:#ff0;--ex-line:#666;--ex-soft:#111;--ex-acc:#ff0;--ex-card:#000;--ex-ans:#333;--ex-ans-b:#ff0;--ink:#ff0;--muted:#ff0;--surface:#000;--surface2:#111;--line:#666;--edge:#ff0;--pri:#ff0;--pri-ink:#000;--teal:#ff0}
#exam.big{font-size:19px}
#exam button{font-family:var(--f-head)}
.ex-top{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1.5px solid var(--ex-line);background:var(--ex-card);flex-wrap:wrap}
.ex-top .cand{font-size:.88rem;font-weight:600;font-family:var(--f-head);display:flex;align-items:center;gap:8px;min-width:0}
.ex-logo{inline-size:30px;block-size:30px;border-radius:50%;background:var(--pri);color:#fff;display:inline-grid;place-items:center;font-size:7.5px;font-weight:700;letter-spacing:.02em;border:1.5px solid var(--edge);box-shadow:1.5px 1.5px 0 var(--edge);transform:rotate(-8deg);flex-shrink:0}
.ex-top .clock{font-weight:700;font-size:1.05rem;font-variant-numeric:tabular-nums;margin-inline:auto;display:flex;gap:6px;align-items:center;font-family:var(--f-head)}
.ex-top .clock.low{color:var(--bad-t)}
.ex-top button,.ex-audio button{font-size:.82rem;font-weight:600;border:1.5px solid var(--ex-line);background:var(--ex-card);color:var(--ink);border-radius:10px;padding:5px 11px;cursor:pointer;min-height:34px}
.ex-top button:hover{border-color:var(--ink2)}
.ex-top .cand+#ex-x{margin-inline-start:auto}
#exam>.ex-start{flex-shrink:0}
.ex-part{padding:10px 16px;border-bottom:1.5px solid var(--ex-line);background:var(--ex-soft);font-size:.92rem}
.ex-part b{display:block;font-family:var(--f-head)}
.ex-body{flex:1;overflow:hidden;display:flex;min-height:0}
.ex-pane{overflow:auto;padding:18px 22px;min-width:0}
.ex-pane.passage{flex:1;border-right:1.5px solid var(--ex-line);line-height:1.75;background:var(--ex-card)}
.ex-pane.questions{flex:1}
.ex-pane.full{flex:1;max-width:900px;margin:0 auto;width:100%}
@media (max-width:820px){.ex-body.split{flex-direction:column;overflow:auto}.ex-body.split .ex-pane{overflow:visible;border-right:0;border-bottom:4px solid var(--ex-line)}}
.passage h2{font-family:var(--f-head);font-size:1.25rem;margin-bottom:6px}
.passage .sub{font-style:italic;margin-bottom:12px;color:var(--ink2)}
.passage p{margin:0 0 12px}
.passage .pl{font-weight:700;margin-right:8px;color:var(--pri-t)}
.passage .ph{font-weight:700;display:block}
.passage mark{background:var(--ex-mark);color:#14213D;border-radius:2px}
.passage mark.ev{background:var(--ok-soft);color:inherit;outline:2px solid var(--ok)}
#exam.contrast .passage mark{background:#ff0;color:#000}
.qg{margin-bottom:26px}
.qg h3{font-family:var(--f-head);font-size:1rem;margin-bottom:4px}
.qg .ins{font-size:.92rem;margin-bottom:8px}
.qg .ins b{font-weight:700}
.qg .ar-help{direction:rtl;text-align:right;font-family:var(--f-body);font-size:.85rem;background:var(--gold-soft);border-radius:10px;padding:6px 10px;margin:4px 0 10px;color:var(--ink)}
#exam.contrast .qg .ar-help{background:#222;color:#ff0}
.qbox{border:1.5px solid var(--ex-line);border-radius:12px;padding:12px 14px;margin:8px 0;background:var(--ex-card)}
.qbox .qtitle{font-weight:700;text-align:center;margin-bottom:8px;font-family:var(--f-head)}
.q{margin:10px 0;scroll-margin-top:20px}
.q .qn{display:inline-grid;place-items:center;min-width:28px;height:24px;border:1.5px solid var(--ink2);border-radius:7px;font-weight:700;font-size:.82rem;margin-right:6px;padding:0 4px;font-family:var(--f-head)}
.q.cur .qn,.gap.cur{outline:2px solid var(--ex-acc);outline-offset:1px}
.q label.opt{display:flex;gap:8px;align-items:flex-start;padding:5px 8px;border-radius:10px;cursor:pointer}
.q label.opt:hover{background:var(--ex-soft)}
.q label.opt input{margin-top:6px;accent-color:var(--pri)}
.gapw{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.gapw .qn{min-width:24px;height:22px;font-size:.76rem}
input.gap{font:inherit;border:1.5px solid var(--ink2);border-radius:8px;padding:2px 8px;width:9.5em;max-width:60vw;background:var(--ex-card);color:var(--ink)}
input.gap:focus,select.sel:focus{outline:2px solid var(--ex-acc);outline-offset:1px}
select.sel{font:inherit;border:1.5px solid var(--ink2);border-radius:8px;padding:2px 6px;background:var(--ex-card);color:var(--ink);max-width:100%}
.optlist{border:1.5px solid var(--ex-line);border-radius:12px;padding:8px 12px;margin:8px 0;font-size:.92rem;background:var(--ex-card)}
.optlist div{padding:1px 0}
.optlist b{display:inline-block;min-width:34px}
.ntable{border-collapse:collapse;margin:8px 0;width:100%;background:var(--ex-card)}
.ntable td,.ntable th{border:1px solid var(--ex-line);padding:6px 8px;vertical-align:top}
.ntable th{background:var(--ex-soft);font-family:var(--f-head)}
.flowstep{border:1.5px solid var(--ex-line);border-radius:12px;padding:8px 10px;text-align:center;max-width:520px;margin:0 auto;background:var(--ex-card)}
.flowarr{text-align:center;line-height:1;margin:2px 0;color:var(--muted)}
.notes-l{margin:3px 0}
.notes-h{font-weight:700;margin-top:10px;font-family:var(--f-head)}
.notes-b{padding-left:16px;position:relative}
.notes-b::before{content:"•";position:absolute;left:3px;color:var(--pri)}
.ex-nav{border-top:1.5px solid var(--ex-line);background:var(--ex-card);padding:7px 10px;display:flex;align-items:center;gap:8px;overflow-x:auto}
.ex-nav .pg{display:flex;gap:3px;align-items:center;padding-right:10px;border-right:1.5px solid var(--ex-line);flex-shrink:0}
.ex-nav .pg span{font-size:.74rem;font-weight:700;margin-right:3px;white-space:nowrap;font-family:var(--f-head);color:var(--ink2)}
.ex-nav button.nb{font-size:.74rem;min-width:28px;height:28px;border:1.5px solid var(--ex-line);background:var(--ex-card);color:var(--ink);border-radius:8px;cursor:pointer;padding:0 3px;position:relative;font-weight:600}
.ex-nav button.nb.ans{background:var(--ex-ans);border-color:var(--ex-ans-b)}
.ex-nav button.nb.flag::after{content:"";position:absolute;top:-4px;right:-4px;width:9px;height:9px;border-radius:50%;background:var(--gold);border:1.5px solid var(--ex-card)}
.ex-nav button.nb.cur{outline:2px solid var(--ex-acc);outline-offset:1px}
.ex-nav button.nb.ok{background:var(--ok-soft);border-color:var(--ok)} .ex-nav button.nb.no{background:var(--bad-soft);border-color:var(--bad)}
.ex-nav .acts{margin-left:auto;display:flex;gap:6px;flex-shrink:0}
.ex-nav .acts button{font-size:.84rem;font-weight:600;border:1.5px solid var(--ex-line);background:var(--ex-card);color:var(--ink);border-radius:10px;padding:6px 13px;cursor:pointer;min-height:36px}
.ex-nav .acts button.go{background:var(--pri);color:var(--pri-ink);border:2px solid var(--edge);box-shadow:2px 2px 0 var(--edge)}
.ex-audio{display:flex;align-items:center;gap:10px;font-size:.85rem;flex-wrap:wrap}
.ex-audio .vol{width:90px;accent-color:var(--pri)}
.ex-audio .vol-l{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-head);font-weight:600}
.ex-audio .prog{width:160px;height:6px;background:var(--ex-line);border-radius:3px;overflow:hidden}
.ex-audio .prog i{display:block;height:100%;background:var(--pri)}
.ex-start{max-width:640px;margin:28px auto;padding:24px;display:grid;gap:14px;line-height:1.65;background:var(--ex-card);border:1.5px solid var(--ex-line);border-radius:var(--r);box-shadow:var(--shadow);width:calc(100% - 2*var(--gut))}
.ex-start h2{font-family:var(--f-head);margin:0;font-size:1.5rem}
.ex-start ul{margin:0;padding-left:20px}
.ex-start li::marker{color:var(--pri)}
.ex-start .go{justify-self:start;min-width:160px}
.ex-start .rtl{direction:rtl;text-align:right;font-family:var(--f-body);background:var(--teal-soft);border-radius:12px;padding:12px 14px}
.ex-wrap{overflow:auto;flex:1}
/* review mode */
.rv{border-radius:12px;padding:9px 12px;margin:6px 0 12px;font-size:.9rem;display:grid;gap:4px;background:var(--ex-soft);border:1.5px solid var(--ex-line)}
.rv .yours.ok{color:var(--ok-t);font-weight:700} .rv .yours.no{color:var(--bad-t);font-weight:700}
.rv .why{direction:rtl;text-align:right;font-family:var(--f-body)}
.rv .why.en{direction:ltr;text-align:left;font-family:var(--f-en)}
.rv button,.ts-play{font:inherit;font-size:.78rem;font-weight:600;border:1.5px solid var(--ex-line);background:var(--ex-card);color:var(--ink);border-radius:8px;padding:3px 9px;cursor:pointer;justify-self:start}
.tscript{font-size:.95rem;line-height:1.7}
.tscript p{margin:0 0 6px;padding:2px 6px}
.tscript .sp{font-weight:700;margin-right:6px;color:var(--pri-t)}
.tscript p.ev{background:var(--ok-soft);border-radius:8px}
.tscript p.playing{background:var(--gold-soft);border-radius:8px}
.mapsvg{width:100%;max-width:560px;display:block;margin:6px auto;font-family:var(--f-test)}
.mapsvg text{font-size:3px;fill:#1a1a1a;stroke:none}
.result-top{display:grid;gap:16px;justify-items:center;text-align:center;padding:24px 16px;border-bottom:1.5px solid var(--ex-line)}
.result-top .big{font-size:3rem;font-weight:700;line-height:1;font-family:var(--f-head);color:var(--pri-t)}
.qt-table{border-collapse:collapse;font-size:.88rem;background:var(--ex-card)}
.qt-table td,.qt-table th{border:1px solid var(--ex-line);padding:5px 10px;text-align:left}
.qt-table th{background:var(--ex-soft);font-family:var(--f-head)}

.sr{position:absolute!important;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media print{.top,#tabbar,footer{display:none}}
@media (max-width:520px){.brand small{display:none}.top-in{gap:8px}.brand b{font-size:.95rem}.icon-btn{inline-size:38px;block-size:38px}#lang-btn{padding:6px 9px;min-height:38px}.logo{inline-size:36px;block-size:36px;font-size:9px}.hero{padding:20px}.stamp.sm{inline-size:56px;block-size:56px}}

/* ===== skills layer (GAT model) ===== */
.pips{display:inline-flex;gap:3px;flex-shrink:0}.pips i{inline-size:14px;block-size:6px;border-radius:3px;background:var(--line)}.pips i.on{background:var(--teal)}
.mmap{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.mcol{background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:10px;align-content:start}
.mcol-h{font-family:var(--f-head);font-weight:700;display:flex;gap:8px;align-items:center}
.mtiles{display:grid;gap:8px}
.mtile{display:grid;gap:4px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);text-decoration:none;color:inherit;background:var(--surface2)}
.mtile:hover{border-color:var(--ink2)}
.mtile .mt-n{font-weight:600;font-family:var(--f-head);font-size:.92rem}.mtile .mt-f{font-size:.76rem;color:var(--muted)}
.mtile.l3,.mtile.l4{background:var(--teal-soft);border-color:transparent}.mtile.l1{background:var(--gold-soft);border-color:transparent}
.tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1.5px solid var(--line);padding-bottom:8px}
.tabs a{text-decoration:none;color:var(--ink2);font-weight:600;font-family:var(--f-head);padding:7px 14px;border-radius:10px}
.tabs a.on{background:var(--navy);color:var(--navy-ink)}
.sec-h{display:flex;gap:8px;align-items:center;margin-top:8px}
.lgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.lcard{text-decoration:none;color:inherit}.lcard:hover{border-color:var(--ink2)}
.notes{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.note-card{border-radius:14px;padding:14px;border:2px solid var(--edge);box-shadow:3px 3px 0 var(--edge);display:grid;gap:6px;align-content:start;color:#14213D;text-decoration:none;background:#FDF1D6}
.note-card.c1{background:#FBE0D6}.note-card.c2{background:#DDF1F1}.note-card.c3{background:#E1EDF7}
.note-card h3{font-size:1rem}.note-card p{font-size:.9rem}.note-card .ex{font-size:.85rem;background:rgba(255,255,255,.6);border-radius:6px;padding:4px 8px}
.note-card a{color:#B23A17}
.note-card.locked{background:var(--surface2);color:var(--muted);box-shadow:none;border-style:dashed}
.lesson2{display:grid;gap:18px}
@media (min-width:1000px){.lesson2{grid-template-columns:1fr 300px;align-items:start}.lesson-side{position:sticky;top:80px}.mobile-cta{display:none}}
.side-card .lvl-rules{list-style:none;padding:0;margin:0;display:grid;gap:4px;color:var(--muted)}.side-card .lvl-rules li.on{color:var(--ok-t)}
.callout{border-inline-start:5px solid var(--pri);background:var(--pri-soft);border-radius:12px;padding:14px 16px;display:grid;gap:6px}
.callout.arab{border-color:var(--teal);background:var(--teal-soft)}
.h2s{margin-bottom:8px}
.tgrid2{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.tcell{background:var(--surface);border:1.5px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:4px;font-size:.92rem}
.bul,.nsteps{margin:0;padding-inline-start:22px;display:grid;gap:6px}
.nsteps li::marker{font-weight:700;color:var(--pri-t)}
.warn-card{border-color:var(--bad);background:var(--bad-soft)}
.accent-card{background:var(--gold-soft);border-color:transparent}
.excard summary{cursor:pointer;list-style:none}.excard summary::-webkit-details-marker{display:none}
.excard .reveal{display:inline-block;margin-top:8px;font-size:.82rem;color:var(--pri-t);font-weight:600}
.en-v{margin-top:6px}.en-v summary{cursor:pointer;font-size:.8rem;color:var(--muted)}
.drill{max-width:760px;margin-inline:auto;width:100%;display:grid;gap:12px}
.drill-top{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}
.drill-card{gap:14px}
.dq{font-weight:600;font-size:1.05rem}
.hint-box{background:var(--gold-soft);border-radius:12px;padding:10px 14px}
.fb{border-radius:12px;padding:12px 14px;display:grid;gap:6px}
.fb.ok{background:var(--ok-soft)}.fb.no{background:var(--bad-soft)}
.tech-tip{background:var(--surface);border-radius:10px;padding:8px 12px;font-size:.9rem}
.session-card{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;border:2px solid var(--edge);box-shadow:var(--pop)}
.session-card>div{flex:1;min-width:240px;display:grid;gap:6px}
.pill{display:inline-flex;gap:6px;align-items:center;border:1.5px solid color-mix(in srgb,var(--navy-ink) 30%,transparent);border-radius:99px;padding:4px 12px;font-size:.86rem;color:var(--navy-ink);text-decoration:none}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.checks li{display:flex;gap:10px;align-items:center}.checks .ck{inline-size:24px;block-size:24px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex-shrink:0}
.checks li.ok .ck{background:var(--ok);border-color:var(--ok);color:#fff}.checks li.ok{color:var(--ok-t)}
.method{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.mcard{background:var(--surface);border:1.5px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:6px}
.mnum{inline-size:32px;block-size:32px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--f-en);border:2px solid var(--edge)}
.model .msec{display:grid;gap:8px}
.mrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px 10px;border-radius:10px;background:var(--surface2)}
.mrow b{min-width:80px}

:root{--grid:rgba(20,33,61,.07);--pink:var(--teal);--pink-soft:var(--teal-soft);--pink-t:var(--teal-t);--butter:var(--gold);--butter-soft:var(--gold-soft);--coral:var(--bad);--coral-soft:var(--bad-soft);--note-ink:#14213D;--n0:#FFE08A;--n1:#FFC9B5;--n2:#BFE7E4;--n3:#CADFF4;--warn-t:var(--gold-t);--f-hand:"Aref Ruqaa","Caveat",cursive}
:root[lang="en"]{--f-hand:"Caveat","Aref Ruqaa",cursive}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--grid:rgba(255,255,255,.05)}}
:root[data-theme="dark"]{--grid:rgba(255,255,255,.05)}
.xp-stage .t-en{font-family:var(--f-en)}
/* ================= EXPLAINERS (الشروحات) ================= */
.xp{--bad:var(--coral);--bad-soft:var(--coral-soft);--stage:var(--surface);--stage-grid:var(--grid);position:fixed;inset:0;z-index:80;background:var(--paper);overflow:auto;overscroll-behavior:contain;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:26px 26px;color:var(--ink);font-family:var(--f-body)}
body.xp-open{overflow:hidden}
.xp [hidden]{display:none!important}
.xp-in{max-width:1180px;margin:0 auto;padding:12px 16px 40px}
.xp-top{display:flex;align-items:center;gap:12px;margin-block:4px 12px}
.xp-tt{min-width:0;flex:1}
.xp-eyebrow{font-family:var(--f-hand);color:var(--pink-t);font-size:1.05rem;line-height:1.3}
.xp-top h2{font-family:var(--f-head);font-size:clamp(1.2rem,3vw,1.7rem);margin:0;line-height:1.35}
.xp-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:18px;align-items:start}
@media (max-width:900px){.xp-grid{grid-template-columns:1fr}}
.xp-stage-wrap{position:relative;border:2px solid var(--edge);border-radius:18px 18px 0 0;overflow:hidden;background:var(--stage);background-image:linear-gradient(var(--stage-grid) 1px,transparent 1px),linear-gradient(90deg,var(--stage-grid) 1px,transparent 1px);background-size:20px 20px}
.xp-segs{display:flex;gap:4px;padding:10px 12px 0}
.xp-segs i{flex:1;block-size:6px;border-radius:99px;background:var(--line);overflow:hidden;position:relative}
.xp-segs i b{position:absolute;inset-block:0;inset-inline-start:0;inline-size:0;background:var(--pri);border-radius:99px}
.xp-segs i.done b{inline-size:100%}
.xp-stage{display:block;inline-size:100%;aspect-ratio:16/9;max-width:100%;stroke:none}
.xp-scene-t{position:absolute;top:24px;inset-inline-start:14px;font-family:var(--f-hand);color:var(--pink-t);font-size:1.1rem;pointer-events:none}
.xp-cap{min-block-size:3.9em;padding:12px 16px;border:2px solid var(--edge);border-block-start:0;background:var(--surface);font-size:1.08rem;line-height:1.9;font-weight:700}
.xp-cap .w{transition:color .15s,background-color .15s;border-radius:4px}
.xp-cap .w.on{background:var(--butter);color:var(--note-ink)}
.xp-cap .w.past{color:var(--ink)} .xp-cap .w.fut{color:var(--muted)}
.xp-cap.off{display:none}
.xp-ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;border:2px solid var(--edge);border-block-start:1px solid var(--line);border-radius:0 0 18px 18px;background:var(--surface);box-shadow:var(--pop)}
.xp-ib{inline-size:42px;block-size:42px;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;flex:none;padding:0}
.xp-ib.main{inline-size:52px;block-size:52px;border-radius:50%;border:2px solid var(--edge);background:var(--pri);color:var(--pri-ink);box-shadow:2px 2px 0 var(--edge)}
.xp-ib[aria-pressed="false"]{color:var(--muted);opacity:.7}
.xp-ic{inline-size:22px;block-size:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.xp-speed{display:flex;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.xp-speed button{border:0;background:var(--surface);color:var(--ink);padding:0 10px;block-size:42px;font-weight:700;font-size:.85rem;cursor:pointer}
.xp-speed button.on{background:var(--pri-soft)}
.xp-sp{flex:1}
.xp-cover{position:absolute;inset:0;display:grid;place-items:center;background:color-mix(in srgb,var(--stage) 72%,transparent);backdrop-filter:blur(2px)}
.xp-big{display:grid;justify-items:center;gap:10px;border:0;background:none;color:var(--ink);cursor:pointer;font:inherit}
.xp-big .c{inline-size:86px;block-size:86px;border-radius:50%;display:grid;place-items:center;background:var(--pri);color:var(--pri-ink);border:3px solid var(--edge);box-shadow:3px 3px 0 var(--edge)}
.xp-big .c .xp-ic{inline-size:36px;block-size:36px}
.xp-big b{font-family:var(--f-head);font-size:1.15rem}
.xp-big small{color:var(--ink2);font-size:.85rem;max-width:34ch;text-align:center}
.xp-side{display:grid;gap:12px}
.xp-panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px}
.xp-panel h3{font-size:.95rem;margin:0 0 8px;font-family:var(--f-head)}
.xp-chap{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.xp-chap button{inline-size:100%;display:flex;gap:10px;align-items:center;border:0;background:none;color:var(--ink);text-align:start;padding:7px 8px;border-radius:10px;font:inherit;font-size:.9rem;cursor:pointer}
.xp-chap button:hover{background:var(--surface2)}
.xp-chap .n{inline-size:26px;block-size:26px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;font-weight:800;background:var(--surface2);flex:none}
.xp-chap .n .xp-ic{inline-size:16px;block-size:16px}
.xp-chap li.cur button{background:var(--pri-soft);font-weight:800}
.xp-chap li.cur .n{background:var(--pri);color:var(--pri-ink)}
.xp-chap li.done .n{background:var(--ok-soft);color:var(--ok)}
.xp-chap .k{font-size:.72rem;color:var(--pink-t);font-weight:800;margin-inline-start:auto}
.xp-goals{margin:0;padding-inline-start:1.1em;font-size:.88rem;color:var(--ink2);display:grid;gap:4px}
.xp-stage .hot{cursor:pointer}
.xp-stage *{pointer-events:none} .xp-stage .hot,.xp-stage .hot *{pointer-events:auto}
.xp-stage .hot:focus{outline:none}
.xp-stage .hot:focus-visible .hot-ring{stroke:var(--pri);stroke-width:4}
.xp-quiz{position:absolute;inset:0;overflow:auto;background:var(--surface);padding:18px;display:grid;align-content:start;gap:12px}
.xp-qn{font-family:var(--f-hand);color:var(--pink-t);font-size:1.1rem;margin:0}
.xp-quiz h3{font-size:1.15rem;margin:0;font-family:var(--f-head)}
.xp-opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (max-width:520px){.xp-opts{grid-template-columns:1fr}}
.xp-opt{border:2px solid var(--line);background:var(--surface);color:var(--ink);border-radius:12px;padding:10px 12px;text-align:start;font:inherit;font-weight:700;font-size:1rem;cursor:pointer}
.xp-opt:hover:not(:disabled){border-color:var(--pri)}
.xp-opt.right{border-color:var(--ok);background:var(--ok-soft)}
.xp-opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.xp-why{font-size:.92rem;color:var(--ink2);background:var(--surface2);border-radius:12px;padding:10px 12px;margin:0}
.xp-row{display:flex;gap:8px;flex-wrap:wrap}
.xp-btn{border:2px solid var(--edge);border-radius:12px;padding:6px 16px;font-weight:800;font-family:var(--f-head);background:var(--surface);color:var(--ink);box-shadow:2px 2px 0 var(--edge);cursor:pointer}
.xp-btn.pri{background:var(--pri);color:var(--pri-ink)}
.xp-score{font-family:var(--f-head);font-size:2.6rem;font-weight:800;line-height:1}
@media (max-width:560px){.xp-in{padding-inline:10px}.xp-quiz{padding:12px;gap:8px}.xp-quiz h3{font-size:1rem}.xp-opt{padding:7px 10px;font-size:.92rem}.xp-scene-t{font-size:.95rem;top:20px}.xp-cap{font-size:1rem}}
.xp-stage text{font-family:var(--f-head);stroke:none}
.xp-stage .t-ink{fill:var(--ink)} .xp-stage .t-ink2{fill:var(--ink2)} .xp-stage .t-note{fill:var(--note-ink)} .xp-stage .t-hand{fill:var(--pink-t);font-family:var(--f-hand)} .xp-stage .t-pri{fill:var(--pri)} .xp-stage .t-ok{fill:var(--ok)} .xp-stage .t-bad{fill:var(--bad)} .xp-stage .t-inv{fill:var(--pri-ink)}
.xp-stage .f-surface{fill:var(--surface)} .xp-stage .f-surface2{fill:var(--surface2)} .xp-stage .f-pri{fill:var(--pri)} .xp-stage .f-prisoft{fill:var(--pri-soft)} .xp-stage .f-pink{fill:var(--pink)} .xp-stage .f-pinksoft{fill:var(--pink-soft)} .xp-stage .f-butter{fill:var(--butter)} .xp-stage .f-sky{fill:var(--sky)} .xp-stage .f-ok{fill:var(--ok)} .xp-stage .f-oksoft{fill:var(--ok-soft)} .xp-stage .f-bad{fill:var(--bad)} .xp-stage .f-badsoft{fill:var(--bad-soft)} .xp-stage .f-edge{fill:var(--edge)} .xp-stage .f-ink{fill:var(--ink)} .xp-stage .f-line{fill:var(--line)}
.xp-stage .f-n0{fill:var(--n0)} .xp-stage .f-n1{fill:var(--n1)} .xp-stage .f-n2{fill:var(--n2)} .xp-stage .f-n3{fill:var(--n3)}
.xp-stage .s-ink{stroke:var(--ink);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round} .xp-stage .s-pri{stroke:var(--pri);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round} .xp-stage .s-pink{stroke:var(--pink);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round} .xp-stage .s-ok{stroke:var(--ok);stroke-width:5;fill:none;stroke-linecap:round;stroke-linejoin:round} .xp-stage .s-bad{stroke:var(--bad);stroke-width:5;fill:none;stroke-linecap:round} .xp-stage .s-line{stroke:var(--line);stroke-width:2;fill:none} .xp-stage .s-edge{stroke:var(--edge);stroke-width:2}
/* explainers list inside a lesson page */
.xpl{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.xpc{display:grid;gap:6px;text-align:start;background:var(--surface);border:2px solid var(--edge);border-radius:14px;box-shadow:var(--pop);padding:12px 14px;color:var(--ink);font:inherit;cursor:pointer}
.xpc:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--edge)}
.xpc .xpn{display:flex;gap:8px;align-items:center;font-size:.78rem;color:var(--muted);font-weight:700}
.xpc .xpn .pl{inline-size:28px;block-size:28px;border-radius:50%;display:grid;place-items:center;background:var(--pri);color:var(--pri-ink);border:2px solid var(--edge);flex:none}
.xpc .xpn .pl svg{inline-size:14px;block-size:14px}
.xpc b{font-family:var(--f-head);font-size:1rem;line-height:1.4}
.xpc small{color:var(--ink2);font-size:.82rem;line-height:1.6}
.xpc .dn{margin-inline-start:auto;border-radius:99px;padding:0 8px;background:var(--ok-soft);color:var(--ok);font-weight:800}
@media (prefers-reduced-motion:reduce){.xpc:hover{transform:none}}
.xp-sec-h{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap}
.xp-sec-h h2{margin:0}
.xp-sec .xpl{margin-block-start:10px}
.lc-xp{color:var(--pri);font-weight:800}
.xp-eyebrow{display:flex;gap:10px;flex-wrap:wrap}
.xp-dot::before,.xpc .xpm::before{content:"";display:inline-block;inline-size:4px;block-size:4px;border-radius:50%;background:currentColor;vertical-align:middle;margin-inline-end:8px;opacity:.6}
.xp-stage .t-pink{fill:var(--pink-t)}
.xpc.locked{border-style:dashed;box-shadow:none;background:var(--surface2)} .xpc.locked .pl{background:var(--butter);color:var(--note-ink)} .xpc.locked small{color:var(--warn-t);font-weight:700}
.xpc.locked .pl .i16{inline-size:14px;block-size:14px}

/* exam nav: keep actions visible, show the current section */
.ex-nav .acts{position:sticky;inset-inline-end:0;background:var(--ex-card);padding-inline-start:8px;margin-inline-start:auto;flex-shrink:0}
.ex-nav .pg.here span{color:var(--pri-t)}
@media (max-width:520px){.card>.spread:has(>.skills4){flex-direction:column;align-items:stretch}}

.ex-tg{display:none}
@media (max-width:820px){.ex-tg{display:flex;gap:4px;padding:6px 10px;background:var(--ex-soft);border-bottom:1.5px solid var(--ex-line)}.ex-tg button{flex:1;font-size:.86rem;font-weight:700;padding:7px;border:1.5px solid var(--ex-line);background:var(--ex-card);color:var(--ink);border-radius:10px;cursor:pointer}.ex-tg button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ex-body.split:not(.show-q) .ex-pane.questions{display:none}.ex-body.split.show-q .ex-pane.passage{display:none}}

/* explanation language */
.xl-sw{display:grid;gap:6px;margin-block:4px 14px}
.xl-sw .seg{justify-self:start}
.xl-card .xl-opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-block:10px}
@media (max-width:640px){.xl-card .xl-opts{grid-template-columns:1fr}}
.xl-opt{font:inherit;text-align:start;display:grid;gap:4px;padding:12px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);cursor:pointer}
.xl-opt small{color:var(--ink2);line-height:1.6}
.xl-opt.rec{border-color:var(--pri);box-shadow:var(--pop)}
.xl-opt:hover{border-color:var(--pri)}
.ar-show{font:inherit;font-size:.82rem;font-weight:700;background:none;border:0;color:var(--teal-t);cursor:pointer;padding:4px 0;text-decoration:underline}
.ar-more{direction:rtl;text-align:start;margin-top:4px}
.xpc .xp-alt{font-size:.78rem;font-weight:700;color:var(--teal-t);justify-self:start;border-radius:8px;padding:2px 0;cursor:pointer}
.xpc .xp-alt:hover{text-decoration:underline}
@media (max-width:520px){.ex-top{gap:6px;padding:6px 10px}.ex-top button{padding:3px 8px;min-height:30px;font-size:.78rem}.ex-top .cand{font-size:.8rem}.ex-logo{inline-size:26px;block-size:26px;font-size:6.5px}}
/* placement: writing + speaking stages */
.pl{display:grid;gap:14px;align-content:start;padding-bottom:40px}
.pl-steps{display:flex;gap:6px;flex-wrap:wrap}
.pl-st{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-head);font-size:.8rem;font-weight:600;color:var(--muted);padding:3px 10px 3px 4px;border-radius:99px;border:1.5px solid var(--ex-line);background:var(--ex-card)}
.pl-st i{font-style:normal;inline-size:20px;block-size:20px;border-radius:50%;display:grid;place-items:center;background:var(--ex-soft);font-size:.72rem}
.pl-st.done{color:var(--ok-t)} .pl-st.done i{background:var(--ok-soft)}
.pl-st.on{color:var(--ink);border-color:var(--pri)} .pl-st.on i{background:var(--pri);color:var(--pri-ink)}
.pl-ar{direction:rtl;text-align:right;font-family:var(--f-body);background:var(--teal-soft);border-radius:12px;padding:12px 14px;line-height:1.75}
.pl-prompt{font-weight:600;line-height:1.7}
.pl-ed{font:inherit;font-size:1rem;line-height:1.7;inline-size:100%;min-block-size:260px;resize:vertical;border:1.5px solid var(--ink2);border-radius:12px;padding:12px 14px;background:var(--ex-card);color:var(--ink)}
.pl-ed:focus{outline:2px solid var(--ex-acc);outline-offset:1px}
.pl-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pl-wc{font-family:var(--f-head);font-weight:600}
.pl-sp{display:grid;gap:14px}
.pl-act{display:grid;gap:10px;justify-items:center;text-align:center;padding:6px 0}
.pl-act .transcript{inline-size:100%;text-align:left}
.pl-can{display:grid;gap:10px}
.pl-ov{display:grid;justify-items:center;gap:2px;padding:12px 26px;border:2px solid var(--edge);border-radius:var(--r);box-shadow:var(--pop);background:var(--pri-soft)}
.pl-ov .big{font-size:3.4rem}
.pl-notes{display:grid;gap:8px;max-width:620px;text-align:start;width:100%}