/* نبراس · التصميم (الألوان والخطوط والمكوّنات) */
:root{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}html,body{margin:0;padding:0}img{max-width:100%}[hidden]{display:none!important}
/* Layout: a single-column "journey" app — dark-blue brand frame, light from the gold lamp marks every win and the next step. Mobile-first with a bottom tab bar. */
/* Light-only by design: always cream, whatever the device theme. */
:root{
  color-scheme:light;
  /* brand (from the Nibras identity) */
  --logo:#1D3A8A;          /* logo + headings */
  --brand:#1D3A8A;         /* filled brand surfaces (bars, chips, my chat bubbles) */
  --on-brand:#FFFFFF;
  --brand-text:#1D3A8A;    /* links, labels */
  --brand-soft:#E7EDFC;    /* calm panels, hints after a mistake */
  --lamp:#F4A62A;          /* the one action colour + earned light */
  --on-lamp:#14234F;       /* dark text on gold keeps contrast */
  --tag:#565D72;           /* tagline grey from the logo file */
  --glow:#FFD166;          /* highlights, progress, celebration */
  --glow-soft:#FFEFC2;
  /* neutrals, tinted toward the brand blue */
  /* warm cream ground for young readers (light-only design) */
  --bg:#FFF8EC; --surface:#FFFFFF; --surface-2:#FCEFD8;
  --ink:#14234F; --ink-2:#4A5784; --ink-3:#6B7699; --line:#EFE2C8;
  /* semantic */
  --good:#18794E; --good-soft:#DDF3E8;
  --shadow:0 1px 2px rgba(20,35,79,.06),0 8px 24px rgba(20,35,79,.08);
  --r:20px; --r-sm:14px;
  --f-body:"Tajawal",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --f-num:"Nunito","Tajawal",ui-rounded,system-ui,sans-serif;
}
/* Night mode: only when the student turns it on with the moon button. */
:root[data-nb="night"]{
  color-scheme:dark;
  --logo:#DCE5FF; --brand:#2C4CB0; --on-brand:#FFFFFF; --brand-text:#AFC2F7; --brand-soft:#1C2A5A;
  --glow-soft:#3A3115; --tag:#B7C2E6;
  --bg:#0C1430; --surface:#141F45; --surface-2:#1A2752; --ink:#EEF2FF; --ink-2:#B7C2E6; --ink-3:#8E9AC4; --line:#26356A;
  --good:#5FD39A; --good-soft:#123528; --shadow:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.3);
}
:root[data-nb="night"] .chip.lit,:root[data-nb="night"] .example b{color:var(--glow)}
*{box-sizing:border-box}
html,body{min-height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.75;direction:rtl;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;line-height:1.35;font-weight:800;color:var(--logo);text-wrap:balance}
h1{font-size:clamp(1.8rem,6vw,2.5rem)} h2{font-size:clamp(1.35rem,4.4vw,1.7rem)} h3{font-size:1.12rem}
p{margin:0}
a{color:var(--brand-text)}
:focus-visible{outline:3px solid var(--lamp);outline-offset:2px;border-radius:8px}
.m{font-family:var(--f-num);font-weight:800;direction:ltr;unicode-bidi:isolate;white-space:nowrap;letter-spacing:.01em}
/* Arabic school notation (set by app.js on <html>): maths runs right to left, fractions are stacked */
[data-math="ar"] .m{direction:rtl;letter-spacing:0}
[data-math="ar"] .ans{direction:rtl;text-align:right}
[data-math="ar"] ol{list-style-type:arabic-indic}
.frac{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.15;margin:0 .18em;font-size:.84em;direction:rtl}
.frac>span:first-child{border-bottom:.11em solid currentColor;padding:0 .3em .06em}
.frac>span:last-child{padding:.04em .3em 0}
.m sup,.msg sup{font-size:.68em;line-height:0}
/* in the school books the exponent sits at the upper left of its base: ٣ then a small ٥ to its left */
[data-math="ar"] sup{unicode-bidi:isolate}
/* a mixed number, as in the school books: the whole number with its fraction beside it */
.mix{display:inline-flex;align-items:center;direction:ltr;unicode-bidi:isolate;vertical-align:middle;margin:0 .1em}
.mix .frac{margin:0 0 0 .1em}
/* the empty answer box of the school books */
.abox{display:inline-block;width:1.5em;height:1.5em;vertical-align:-.38em;margin:0 .12em;border:.1em solid var(--brand-text);border-radius:.22em;background:var(--surface);box-shadow:inset 0 -.14em 0 color-mix(in srgb,var(--brand-text) 22%,transparent)}
math{font-size:1.05em}
.muted{color:var(--ink-2)} .small{font-size:.9rem} .tiny{font-size:.8rem;color:var(--ink-3)}
.wrap{max-width:760px;margin-inline:auto;padding-inline:16px}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:12px;height:62px}
.brandlink{display:flex;align-items:center;text-decoration:none;flex:none}
.brandlink svg{height:34px;width:auto;display:block}
.nav{display:flex;gap:4px;margin-inline-start:auto}
.nav a{padding:7px 14px;border-radius:999px;text-decoration:none;color:var(--ink-2);font-weight:700;font-size:.95rem;white-space:nowrap}
.nav a:hover{background:var(--surface-2)}
.nav a[aria-current="page"]{background:var(--glow-soft);color:var(--ink);box-shadow:inset 0 0 0 2px var(--glow)}
.acts{display:flex;gap:8px;align-items:center;flex:none}
.mode{width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--brand-text);display:grid;place-items:center;cursor:pointer;flex:none}
.mode:hover{border-color:var(--lamp)}
.mode svg{width:20px;height:20px}
.me{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px 4px 6px;display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;font-size:.9rem;color:var(--ink)}
.me .dot{width:26px;height:26px;border-radius:50%;background:var(--glow);color:var(--on-lamp);display:grid;place-items:center;font-size:.8rem}
.tabbar{display:none}
@media (max-width:700px){
  .nav{display:none}
  .acts{margin-inline-start:auto}
  .tabbar{display:grid;grid-template-columns:repeat(3,1fr);position:fixed;inset-inline:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 2px 8px;font-size:.78rem;font-weight:700;text-decoration:none;color:var(--ink-3)}
  .tabbar a svg{width:24px;height:24px}
  .tabbar a[aria-current="page"]{color:var(--brand-text)}
  .tabbar a[aria-current="page"] .ic{background:var(--glow-soft)}
  .tabbar .ic{border-radius:999px;padding:2px 14px;display:grid;place-items:center}
  main{padding-bottom:96px}
}
main{padding-block:24px 56px}
.view{display:grid;gap:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;box-shadow:var(--shadow)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.eyebrow{font-size:.85rem;font-weight:800;color:var(--brand-text);letter-spacing:.02em}

/* buttons: gold = the one thing to do next; blue outline = secondary */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border:2px solid transparent;border-radius:999px;padding:10px 24px;font-weight:800;font-size:1.02rem;cursor:pointer;text-decoration:none;line-height:1.3;transition:transform .12s ease,box-shadow .12s ease}
.btn:active{transform:translateY(2px)}
.btn-go{background:var(--lamp);color:var(--on-lamp);box-shadow:0 4px 0 color-mix(in srgb,var(--lamp) 60%,#7a4a00)}
.btn-go:active{box-shadow:0 2px 0 color-mix(in srgb,var(--lamp) 60%,#7a4a00)}
.btn-line{background:var(--surface);border-color:var(--line);color:var(--brand-text)}
.btn-line:hover{border-color:var(--brand-text)}
.btn-sm{min-height:40px;padding:6px 16px;font-size:.92rem}
.btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:3px 12px;font-size:.82rem;font-weight:700;white-space:nowrap}
.chip.lit{background:var(--glow-soft);color:var(--on-lamp)}
.chip.calm{background:var(--brand-soft);color:var(--brand-text)}
.chip.good{background:var(--good-soft);color:var(--good)}
.chip.plain{background:var(--surface-2);color:var(--ink-2)}
.draft{font-size:.8rem;color:var(--ink-3);text-align:center}

/* home */
.hero{display:grid;gap:18px;justify-items:center;text-align:center;padding:28px 18px 26px;border-radius:28px;background:
  radial-gradient(120% 70% at 50% 0%,var(--glow-soft),transparent 70%),var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.hero .logo{width:min(300px,78vw);height:auto}
.hero .tag{font-weight:800;font-size:1.15rem;color:var(--tag)}
.hero .lead{max-width:30em;color:var(--ink-2)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:640px){.steps{grid-template-columns:1fr}}
.step{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px}
.step .n{width:40px;height:40px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-family:var(--f-num);font-weight:900;font-size:1.1rem}
.step h3{font-size:1.02rem}
.step p{font-size:.92rem;color:var(--ink-2)}

/* onboarding */
.field{display:grid;gap:6px}
.field label{font-weight:800}
.field input{border:2px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface);min-height:52px;font-size:1.05rem}
.field input:focus{border-color:var(--brand-text);outline:none}
.picks{display:flex;flex-wrap:wrap;gap:8px}
.picks button{border:2px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-weight:700;cursor:pointer}
.picks button:hover{border-color:var(--lamp)}

/* game: lantern journey */
.game{max-width:620px;margin-inline:auto;width:100%;display:grid;gap:14px}
.lanterns{display:flex;gap:6px;justify-content:center;align-items:flex-end}
.lanterns svg{width:26px;height:34px}
.ln.off path.b{fill:var(--surface-2);stroke:var(--line)}
.ln.off circle{fill:var(--line)}
.ln.on path.b{fill:var(--lamp);stroke:var(--lamp)}
.ln.on circle{fill:var(--glow)}
.ln.on{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--glow) 80%,transparent))}
.ln.now{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-3px)}}
.station{display:flex;align-items:center;gap:10px;justify-content:center;color:var(--ink-2);font-weight:700;font-size:.92rem}
.station .badge{background:var(--brand);color:var(--on-brand);border-radius:999px;padding:2px 12px;font-size:.8rem}
.puzzle{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:18px;box-shadow:var(--shadow);display:grid;gap:14px}
.ptype{display:flex;align-items:center;gap:8px;color:var(--brand-text);font-weight:800;font-size:.9rem}
.ptype svg{width:22px;height:22px}
.stem{font-size:1.25rem;font-weight:700;line-height:1.85;color:var(--ink)}
.scale{width:100%;max-width:360px;height:auto;margin-inline:auto;display:block}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px}
.tile{display:flex;align-items:center;gap:12px;min-height:60px;text-align:start;width:100%;padding:12px 14px;border-radius:var(--r-sm);border:2px solid var(--line);background:var(--surface);cursor:pointer;font-size:1.08rem;font-weight:700;color:var(--ink);transition:transform .1s ease,border-color .1s}
.tile:hover:not([disabled]){border-color:var(--brand-text)}
.tile .k{flex:none;width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--brand-text);font-weight:800}
.tile[aria-checked="true"]{border-color:var(--lamp);background:var(--glow-soft)}
.tile[aria-checked="true"] .k{background:var(--lamp);color:var(--on-lamp)}
.tile.right{border-color:var(--good);background:var(--good-soft)}
.tile.right .k{background:var(--good);color:#fff}
.tile.tried{border-style:dashed;border-color:var(--ink-3);background:var(--surface-2);color:var(--ink-3);cursor:default}
.tile.tried .k{background:transparent}
.tile[disabled]{cursor:default}
.ansbox{display:grid;gap:10px}
.ans{direction:ltr;text-align:left;font-family:var(--f-num);font-weight:800;font-size:1.4rem;border:2px solid var(--line);border-radius:var(--r-sm);padding:10px 16px;min-height:58px;background:var(--surface);color:var(--ink);width:100%;min-width:0}
.ans:focus{border-color:var(--lamp);outline:none;box-shadow:0 0 0 4px var(--glow-soft)}
.keys{display:flex;flex-wrap:wrap;gap:6px;direction:ltr}
.keys button{min-width:46px;height:46px;padding:0 10px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);font-family:var(--f-num);font-weight:800;font-size:1.1rem;color:var(--brand-text);cursor:pointer}
.keys button:active{background:var(--glow-soft)}
.report{display:grid;gap:10px;background:var(--surface);border:2px solid var(--lamp);border-radius:var(--r-sm);padding:14px 16px;box-shadow:0 0 0 5px var(--glow-soft)}
.aibadge{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:800;color:var(--brand-text);background:var(--brand-soft);border-radius:999px;padding:3px 12px}
.detail{border-top:1px dashed var(--line);padding-top:12px}
.detail summary{cursor:pointer;font-weight:800;color:var(--brand-text)}
.dlist{display:grid;gap:10px;margin-top:10px}
.drow{display:grid;gap:2px;background:var(--surface-2);border-radius:12px;padding:10px 12px;min-width:0;overflow-wrap:anywhere}
.spark{position:fixed;pointer-events:none;z-index:50;font-family:var(--f-num);font-weight:900;color:var(--lamp);animation:rise 1s ease-out forwards}
@keyframes rise{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-60px) scale(1.4)}}

/* path */
.trail{position:relative;display:grid;gap:0;padding-block:8px}
.stop{position:relative;display:grid;grid-template-columns:72px 1fr;gap:14px;align-items:center;padding-block:12px;text-decoration:none;color:inherit}
.stop:nth-child(even){transform:translateX(-18px)}
.stop:not(:last-child)::after{content:"";position:absolute;inset-inline-start:35px;top:62px;height:calc(100% - 38px);border-inline-start:4px dotted var(--line)}
.stop.lit:not(:last-child)::after{border-color:var(--lamp)}
.orb{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;border:3px solid var(--line);background:var(--surface);position:relative;z-index:1}
.orb svg{width:34px;height:40px}
.stop.lit .orb{background:var(--glow-soft);border-color:var(--lamp);box-shadow:0 0 0 6px color-mix(in srgb,var(--glow) 35%,transparent)}
.stop.now .orb{border-color:var(--lamp);border-width:4px;background:var(--surface);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--lamp) 45%,transparent)}50%{box-shadow:0 0 0 10px transparent}}
.stop .info{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;display:grid;gap:4px;min-width:0}
.stop.now .info{border-color:var(--lamp);box-shadow:var(--shadow)}
.stop:hover .info{border-color:var(--brand-text)}
.stop .info b{font-size:1.05rem;color:var(--logo)}
@media (prefers-reduced-motion:reduce){.stop.now .orb,.ln.now,.spark{animation:none}}
.ideas{display:grid;gap:8px}
.idea{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;background:var(--brand-soft);border-radius:var(--r-sm);padding:12px 14px}
.idea svg{width:22px;height:22px;color:var(--brand-text);margin-top:3px}

/* lesson */
.explain{display:grid;gap:12px}
.example{background:var(--glow-soft);border-radius:var(--r-sm);padding:14px 16px;display:grid;gap:4px}
.example b{color:var(--on-lamp)}
.meter{display:flex;gap:6px}
.meter i{width:30px;height:10px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line)}
.meter i.on{background:var(--lamp);border-color:var(--lamp)}
.fb{border-radius:var(--r-sm);padding:14px 16px;display:grid;gap:6px}
.fb.good{background:var(--good-soft)}
.fb.good b{color:var(--good)}
.fb.hint{background:var(--brand-soft);border:2px dashed color-mix(in srgb,var(--brand-text) 40%,transparent)}
.fb.hint b{color:var(--brand-text)}
.done{text-align:center;display:grid;gap:12px;justify-items:center;padding:28px 20px}
.done .big{width:110px;height:130px;filter:drop-shadow(0 0 18px color-mix(in srgb,var(--glow) 80%,transparent))}

/* chat */
.chat{display:flex;flex-direction:column;height:min(72vh,700px);min-height:440px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.chat-head{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.appicon{width:44px;height:44px;border-radius:13px;background:var(--brand);display:grid;place-items:center;flex:none}
.appicon svg{width:30px;height:auto}
.msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--bg)}
.msg{max-width:86%;padding:10px 15px;border-radius:18px;line-height:1.8;overflow-wrap:anywhere;min-width:0}
.msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-start-start-radius:6px}
.msg.me{align-self:flex-end;background:var(--brand);color:var(--on-brand);border-start-end-radius:6px}
.msg.me .m{color:inherit}
.msg p+p{margin-top:6px}
.msg ol,.msg ul{margin:4px 0;padding-inline-start:1.3em}
.thinking{display:inline-flex;gap:5px;padding-block:6px}
.thinking i{width:8px;height:8px;border-radius:50%;background:var(--lamp);animation:b 1.2s infinite}
.thinking i:nth-child(2){animation-delay:.15s}.thinking i:nth-child(3){animation-delay:.3s}
@keyframes b{0%,80%,100%{opacity:.25}40%{opacity:1}}
.suggest{display:flex;gap:8px;flex-wrap:wrap;padding:0 16px 10px;background:var(--bg)}
.suggest button{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 14px;font-size:.88rem;font-weight:700;cursor:pointer;color:var(--brand-text)}
.composer{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);align-items:flex-end;background:var(--surface)}
.composer textarea{flex:1;min-width:0;resize:none;border:2px solid var(--line);border-radius:16px;padding:10px 14px;background:var(--bg);min-height:50px;max-height:140px;line-height:1.5}
.composer textarea:focus{border-color:var(--brand-text);outline:none}
.iconbtn{width:50px;height:50px;border-radius:16px;border:2px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;flex:none;color:var(--brand-text)}
.iconbtn.send{background:var(--lamp);border-color:var(--lamp);color:var(--on-lamp)}
.iconbtn[disabled]{opacity:.45;cursor:not-allowed}
.iconbtn svg{width:22px;height:22px}
.note{font-size:.85rem;padding:8px 16px;background:var(--glow-soft);color:var(--ink)}

/* sheet */
.sheet{position:fixed;inset:0;z-index:60;background:rgba(10,18,45,.45);display:grid;place-items:end center;padding:16px}
.sheet .card{width:min(440px,100%);display:grid;gap:14px}
.toast{position:fixed;inset-inline:16px;bottom:calc(90px + env(safe-area-inset-bottom,0px));z-index:70;margin-inline:auto;max-width:420px;background:var(--brand);color:var(--on-brand);padding:12px 16px;border-radius:14px;text-align:center;font-weight:700;box-shadow:var(--shadow)}


/* ===== v2 additions ===== */
body:not(.has-tabs) .tabbar{display:none!important}
@media (max-width:700px){body:not(.has-tabs) main{padding-bottom:40px}}
.between{justify-content:space-between}
.center{text-align:center}
.notice{background:var(--glow-soft);border-radius:var(--r-sm);padding:12px 14px;font-size:.9rem;color:var(--ink);display:flex;gap:10px;align-items:flex-start}
.notice svg{flex:none;width:20px;height:20px;color:var(--brand-text);margin-top:3px}

/* landing */
.roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;width:100%;max-width:560px}
.rolebtn{display:grid;gap:4px;justify-items:center;text-align:center;padding:18px 16px;border-radius:var(--r);text-decoration:none;border:2px solid var(--line);background:var(--surface);color:var(--ink);transition:transform .12s ease,border-color .12s}
.rolebtn:hover{transform:translateY(-2px);border-color:var(--lamp)}
.rolebtn b{font-size:1.15rem;color:var(--logo)}
.rolebtn span{font-size:.88rem;color:var(--ink-2)}
.rolebtn svg{width:40px;height:40px;color:var(--brand-text)}
.rolebtn.primary{background:var(--lamp);border-color:var(--lamp)}
.rolebtn.primary b,.rolebtn.primary span,.rolebtn.primary svg{color:var(--on-lamp)}

/* auth */
.auth{max-width:520px;margin-inline:auto;width:100%;display:grid;gap:16px}
.segtabs{display:grid;grid-template-columns:1fr 1fr;background:var(--surface-2);border-radius:999px;padding:4px;gap:4px}
.segtabs button{border:0;background:none;border-radius:999px;padding:9px 10px;font-weight:800;cursor:pointer;color:var(--ink-2)}
.segtabs button[aria-pressed="true"]{background:var(--surface);color:var(--brand-text);box-shadow:var(--shadow)}
.field input,.field select{width:100%}
.pw{position:relative}
.pw input{padding-left:72px}
.pw button{position:absolute;left:8px;top:50%;transform:translateY(-50%);border:0;background:none;color:var(--brand-text);font-weight:700;font-size:.85rem;cursor:pointer;padding:6px}
:root{--bad:#B3261E;--bad-soft:#FCE8E6}
:root[data-nb="night"]{--bad:#FFB4AB;--bad-soft:#3B1714}
.err{color:var(--bad);background:var(--bad-soft);border-radius:12px;padding:10px 12px;font-weight:700;font-size:.92rem}
.avs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.av{border:3px solid transparent;background:none;border-radius:50%;padding:2px;cursor:pointer;display:grid;justify-items:center;gap:2px;font-size:.78rem;color:var(--ink-2);font-weight:700}
.av svg{width:100%;max-width:72px;height:auto;border-radius:50%}
.av[aria-checked="true"]{border-color:var(--lamp);background:var(--glow-soft);border-radius:18px}
.avatar-sm svg{width:30px;height:30px;border-radius:50%;display:block}
.avatar-md svg{width:56px;height:56px;border-radius:50%;display:block}
.avatar-lg svg{width:96px;height:96px;border-radius:50%;display:block}
.me .avatar-sm{display:grid}

/* islands map (diagnosis levels) */
.islands{display:flex;align-items:center;justify-content:center;gap:0;direction:rtl}
.isle{display:grid;justify-items:center;gap:4px;min-width:74px}
.isle .dot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-num);font-weight:900;font-size:1.2rem;background:var(--surface-2);color:var(--ink-3);border:3px solid var(--line)}
.isle small{font-size:.75rem;color:var(--ink-3);font-weight:700}
.isle.now .dot{background:var(--lamp);color:var(--on-lamp);border-color:var(--lamp);box-shadow:0 0 0 6px var(--glow-soft);animation:pulse 2s ease-in-out infinite}
.isle.now small{color:var(--brand-text)}
.isle.done .dot{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.isle-link{flex:0 1 46px;border-top:4px dotted var(--line);margin-bottom:22px}
.qn{font-family:var(--f-num);font-size:.85rem;color:var(--ink-3)}

/* bubbles */
.pond{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;padding:8px 4px 4px}
.bub{width:112px;height:112px;border-radius:50%;border:2px solid color-mix(in srgb,var(--brand-text) 25%,transparent);cursor:pointer;display:grid;place-items:center;padding:8px;text-align:center;font-family:var(--f-num);font-weight:900;font-size:1.25rem;color:var(--ink);
  background:radial-gradient(circle at 32% 28%,#fff 0 10%,transparent 11%),radial-gradient(circle at 50% 50%,var(--surface) 55%,var(--brand-soft) 100%);
  box-shadow:inset -6px -8px 16px color-mix(in srgb,var(--brand-text) 14%,transparent),0 6px 16px rgba(20,35,79,.10);
  animation:float 3.2s ease-in-out infinite;animation-delay:var(--d,0s);transition:transform .15s ease,box-shadow .15s}
.bub:hover:not([disabled]){transform:scale(1.05)}
.bub .m{font-weight:900}
.bub.sel{border-color:var(--lamp);border-width:4px;transform:scale(1.1);background:radial-gradient(circle at 32% 28%,#fff 0 10%,transparent 11%),radial-gradient(circle at 50% 50%,var(--glow-soft) 50%,var(--glow) 100%)}
.bub.pop{animation:popb .35s ease-out forwards}
.bub.right{border-color:var(--good);border-width:4px;background:var(--good-soft);animation:none}
.bub.tried{opacity:.45;border-style:dashed;animation:none;cursor:default}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes popb{0%{transform:scale(1.1)}60%{transform:scale(1.35);opacity:.6}100%{transform:scale(1.6);opacity:0}}

/* number line hop */
.nlwrap{overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;direction:ltr}
.nl{position:relative;display:grid;grid-template-columns:repeat(21,1fr);min-width:620px;padding-top:84px;padding-bottom:30px;direction:ltr}
.nl::before{content:"";position:absolute;left:2%;right:2%;top:98px;height:4px;border-radius:2px;background:var(--brand)}
.tick{border:0;background:none;cursor:pointer;display:grid;justify-items:center;gap:6px;padding:8px 0 2px;color:var(--ink-2);font-family:var(--f-num);font-weight:800;font-size:.82rem;position:relative}
.tick .tk{width:3px;height:20px;background:var(--brand);border-radius:2px}
.tick.zero .tk{height:28px;width:4px}
.tick.zero{color:var(--brand-text)}
.tick:hover .tk{background:var(--lamp)}
.frog{position:absolute;top:24px;left:calc((var(--i) + .5) * 100% / 21);transform:translateX(-50%);transition:left .32s ease;width:52px;height:52px;pointer-events:none}
.frog svg{width:52px;height:52px;display:block}
.frog.hop svg{animation:hop .32s ease}
@keyframes hop{0%{transform:translateY(0)}45%{transform:translateY(-22px) rotate(-6deg)}100%{transform:translateY(0)}}
.startmark{position:absolute;top:142px;left:calc((var(--i) + .5) * 100% / 21);transform:translateX(-50%);font-size:.7rem;font-weight:800;color:var(--ink-3);white-space:nowrap}
.startmark::before{content:"";display:block;width:10px;height:10px;border-radius:50%;background:var(--ink-3);margin:0 auto 2px}
.hopctl{display:flex;gap:10px;align-items:center;justify-content:center}
.hopctl button{min-width:86px;height:50px;border-radius:14px;border:2px solid var(--line);background:var(--surface-2);font-family:var(--f-num);font-weight:900;font-size:1.05rem;color:var(--brand-text);cursor:pointer}
.hopctl button:active{background:var(--glow-soft)}
.hopctl output{min-width:72px;text-align:center;font-family:var(--f-num);font-weight:900;font-size:1.6rem;color:var(--logo)}

/* shade bar */
.bar{display:flex;gap:6px;direction:ltr}
.bar button{flex:1;height:68px;border-radius:12px;border:2px solid var(--line);background:var(--surface);cursor:pointer;transition:background .12s,transform .12s}
.bar button.on{background:var(--lamp);border-color:var(--lamp);transform:translateY(-3px)}
.barcount{font-weight:800;color:var(--ink-2);text-align:center}
.barcount b{font-family:var(--f-num);color:var(--logo)}

/* order cards */
.slots{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:8px}
.slot{min-height:64px;border:2px dashed var(--line);border-radius:14px;display:grid;place-items:center;position:relative;background:var(--surface-2)}
.slot small{position:absolute;top:4px;inset-inline-start:8px;font-size:.68rem;color:var(--ink-3);font-weight:800}
.slot button,.pool button{border:2px solid var(--brand-text);background:var(--surface);color:var(--logo);border-radius:12px;min-width:64px;min-height:48px;padding:6px 10px;font-family:var(--f-num);font-weight:900;font-size:1.15rem;cursor:pointer;direction:ltr}
.pool{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;min-height:56px}
.pool button{box-shadow:0 4px 0 color-mix(in srgb,var(--brand-text) 30%,transparent)}
.orderhint{display:flex;justify-content:space-between;font-size:.78rem;font-weight:800;color:var(--ink-3)}

/* balance tilt */
.scale .beam{transform-origin:180px 32px;transition:transform .6s cubic-bezier(.3,1.6,.5,1)}

/* level interstitial */
.interlude{text-align:center;display:grid;gap:14px;justify-items:center;padding:30px 20px}

/* path levels */
.lvsec{display:grid;gap:6px}
.lvhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.lvhead h3{display:flex;align-items:center;gap:10px}
.lvnum{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--on-brand);font-family:var(--f-num);font-weight:900}
.pbar{height:10px;border-radius:999px;background:var(--surface-2);overflow:hidden;border:1px solid var(--line)}
.pbar i{display:block;height:100%;background:var(--lamp);border-radius:999px}

/* parent */
.kid{display:grid;gap:16px}
.kidhead{display:flex;align-items:center;gap:12px}
.kidhead .grow{flex:1;min-width:0}
.lvgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px}
.lvbox{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;display:grid;gap:8px;background:var(--surface);min-width:0}
.lvbox h4{margin:0;font-size:.95rem;color:var(--logo)}
.sk{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:.88rem}
.sk span:first-child{min-width:0}
.timeline{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.timeline li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:.9rem}
.timeline .when{font-family:var(--f-num);font-size:.78rem;color:var(--ink-3);white-space:nowrap;padding-top:2px}
.msgitem{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;display:grid;gap:6px;background:var(--surface);min-width:0}
.msgitem pre{margin:0;white-space:pre-wrap;font-family:var(--f-body);font-size:.9rem;line-height:1.7;color:var(--ink);overflow-wrap:anywhere}
.msgmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:.8rem;color:var(--ink-3)}
.chk{display:flex;align-items:center;gap:10px;font-weight:700}
.chk input{width:22px;height:22px;accent-color:var(--brand)}
.radio-row{display:flex;gap:8px;flex-wrap:wrap}
.radio-row label{border:2px solid var(--line);border-radius:999px;padding:6px 14px;cursor:pointer;font-weight:800;display:flex;gap:6px;align-items:center}
.radio-row input{accent-color:var(--brand)}
.code{font-family:var(--f-num);font-weight:900;font-size:1.8rem;letter-spacing:.18em;color:var(--logo);direction:ltr;background:var(--glow-soft);border-radius:14px;padding:6px 18px;display:inline-block}
@media (prefers-reduced-motion:reduce){.bub,.isle.now .dot{animation:none}.frog{transition:none}.frog.hop svg{animation:none}}

.view>*,.game>*,.puzzle>*,.card>*{min-width:0}
.station{flex-wrap:wrap}
.station .badge{white-space:nowrap}

.interlude .big{width:90px;height:110px;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--glow) 80%,transparent))}
.hero .avatar-lg svg{box-shadow:0 0 0 6px var(--glow-soft)}
/* ---------- teaching figures (figures.js) + the «أتعلّم» box of the lesson ---------- */
.figs{display:grid;gap:16px;justify-items:center}
.fig{margin:0;display:grid;gap:6px;justify-items:center;width:100%}
.figsvg{display:block;width:100%;height:auto;direction:ltr}
.figrow{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;align-items:flex-end;width:100%}
.figrow .figsvg{width:auto;flex:0 1 auto;height:auto;min-width:0}
.fig figcaption{font-size:.92rem;color:var(--ink-2);text-align:center;line-height:1.9}
.learn{border:2px solid color-mix(in srgb,var(--brand-text) 35%,transparent);background:var(--brand-soft);border-radius:var(--r-sm);padding:12px 16px;display:grid;gap:6px}
.learn>b{display:flex;align-items:center;gap:6px;color:var(--brand-text)}
.learn>b svg{color:var(--lamp);flex:none;width:20px;height:20px}
.learn ul{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.learn li{position:relative;padding-inline-start:18px;line-height:1.9}
.learn li::before{content:"";position:absolute;inset-inline-start:2px;top:.78em;width:8px;height:8px;border-radius:50%;background:var(--lamp)}
.figbox{border:1px dashed var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface);display:grid;gap:10px}
.figbox>b{color:var(--brand-text)}
.figs.swipe{position:relative;display:flex;gap:0;justify-items:initial;align-items:center;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.figs.swipe::-webkit-scrollbar{display:none}
.figs.swipe>.fig{flex:0 0 100%;scroll-snap-align:center;padding:2px 4px}
.fignav{display:flex;align-items:center;justify-content:space-between;gap:10px}
.fignav button:disabled{opacity:.4;cursor:default}
.fb .figs{margin-top:6px;background:var(--surface);border-radius:12px;padding:12px 10px}
/* worked steps, one per line (figures.js: steps, subst, solve, pattern). Not .steps: that is the landing page */
.fsteps{display:grid;gap:8px;justify-items:start;font-size:1.3rem;line-height:2}
.fsteps>div{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px}
.fsteps .note{font-size:.82rem;color:var(--ink-3);font-weight:500;line-height:1.5;padding:2px 10px;border-radius:8px}
.fsteps .hl{background:var(--glow-soft);border-bottom:3px solid var(--lamp);border-radius:6px;padding:.05em .3em}
/* ---------- maths keyboard for the chat: Arabic digits, operations and symbols instead of the device keyboard ---------- */
.padt{font-family:var(--f-num);font-weight:900;font-size:.95rem;line-height:1.05;background:var(--glow-soft);border-color:var(--lamp);color:var(--on-lamp);display:grid;place-items:center;text-align:center}
.padt small{display:block;font-size:.72rem;font-weight:800}
.padt[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
:root[data-nb="night"] .padt{color:var(--glow)}
:root[data-nb="night"] .padt[aria-pressed="true"]{color:var(--on-brand)}
.chat.pad-open{height:min(90vh,860px);min-height:600px}
.chat.pad-open .suggest{display:none}
.mpad{scroll-margin-bottom:84px}
@media (max-width:700px){.chat.pad-open{height:calc(100vh - 150px);height:calc(100dvh - 150px);min-height:540px}.chat.pad-open .chat-head{padding:8px 14px}.chat.pad-open .appicon{width:36px;height:36px;border-radius:11px}.chat.pad-open .appicon svg{width:24px}}
@media (max-width:700px) and (max-height:720px){.mpad button{height:40px}.mpad button small{display:none}}
.mprev{padding:6px 14px;border-top:1px dashed var(--line);background:var(--surface);font-size:.95rem;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mprev>span:first-child{font-size:.78rem;color:var(--ink-3);font-weight:700}
.mpadbox{background:var(--surface-2);border-top:1px solid var(--line)}
.mpad{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;padding:8px 10px 10px;direction:ltr;max-width:520px;width:100%;margin-inline:auto}
.mpad button{height:46px;min-width:0;border-radius:12px;border:1px solid var(--line);background:var(--surface);font-family:var(--f-num);font-weight:800;font-size:1.25rem;color:var(--ink);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none}
.mpad button small{font-family:var(--f-body);font-size:.6rem;font-weight:700;color:var(--ink-3);margin-top:3px;line-height:1}
.mpad button:active{background:var(--glow-soft);transform:translateY(1px)}
.mpad .op{background:var(--brand-soft);color:var(--brand-text)}
.mpad .sym{background:var(--surface);color:var(--brand-text);font-size:1.1rem}
.mpad .del{background:var(--glow-soft);color:var(--on-lamp)}
:root[data-nb="night"] .mpad .del{color:var(--glow)}
.mpad .wide{grid-column:span 4;font-family:var(--f-body);font-size:.9rem;color:var(--ink-2)}
.mpad .abc{font-family:var(--f-body);font-size:.95rem;background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.mpad .frac{font-size:.62em;margin:0}
.mpad button:disabled{opacity:.45;cursor:default}
/* the same keyboard under the «اكتب جوابك» box of a question */
.ansbox .mpadbox{border:1px solid var(--line);border-radius:16px}
.mpad.sm{max-width:460px;padding:8px}
.mpad.sm button{height:42px;font-size:1.15rem}
@media (max-width:700px){.game .mpad.sm button{height:38px}.game .mpad.sm{gap:4px;padding:6px}}
@media (max-width:700px) and (max-height:760px){.mpad.sm button{height:38px}.mpad.sm button small{display:none}}
.mpad sup{font-size:.6em}
/* ---------- what the tutor can put in a chat message: display maths, roots, tables, drawings, games ---------- */
.dmath{text-align:center;font-size:1.2em;margin:8px 0}
.sqrt{display:inline-flex;align-items:stretch;white-space:nowrap}
.sqrt>i{font-style:normal;display:inline-block}
[data-math="ar"] .sqrt>i{transform:scaleX(-1)}
.sqrt>span{border-top:.09em solid currentColor;padding:0 .18em;margin-top:.12em}
.oline{border-top:.09em solid currentColor;padding-top:.02em}
.msg.wide{max-width:100%;width:100%}
.tblwrap{overflow-x:auto;margin:6px 0}
.mtbl{border-collapse:collapse;width:100%;font-size:.95em}
.mtbl th,.mtbl td{border:1px solid var(--line);padding:6px 10px;text-align:center}
.mtbl th{background:var(--brand-soft);color:var(--brand-text);font-weight:800}
.chatfig{margin:8px 0;background:var(--bg);border-radius:12px;padding:10px 6px}
.gamecard{margin-top:8px;border:2px solid color-mix(in srgb,var(--lamp) 55%,transparent);border-radius:16px;padding:12px;background:var(--bg);display:grid;gap:12px}
.gamecard>*{min-width:0}
.msg.wide{padding-inline:8px}
.gamecard .mpad.sm{padding:6px;gap:4px}
.gamecard .mpad.sm button small{font-size:.54rem}
.mpad .abc{white-space:nowrap}
.mpad.sm .abc{font-size:.82rem}
.gamecard.done{border-style:dashed;border-color:var(--line);gap:4px;opacity:.85}
.ghead{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--brand-text);font-size:.92rem}
.ghead svg{width:20px;height:20px;flex:none}
.gamecard .stem{font-size:1.12rem}
.gres{display:grid;gap:2px}
.gres b{font-size:.82rem;opacity:.85}
.gres .tag{font-weight:800;font-size:.9rem}
.msg.me .gres .tag.ok{color:var(--glow)}
.msg.me .gres .tag.no{color:#FFD9C7}

/* teacher mode in the chat: headings, labels, the model's own drawing, and the «أكمل» row */
.msg .mh{font-size:1rem;font-weight:800;color:var(--logo);margin:8px 0 2px}
.msg .mhr{border:0;border-top:1px solid var(--line);margin:8px 0}
.tmode .msg em{font-style:normal;font-weight:800;color:var(--brand-text)}
.tmode .msg li+li{margin-top:4px}
[data-math="ar"] .tmode .msg ol{list-style-type:arabic-indic}
.mcode{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em;font-weight:700;background:var(--glow-soft);border-radius:6px;padding:1px 6px;white-space:nowrap}
.chatfig .usvg{background:#fff;color:#1f2937;border-radius:10px;font-family:inherit;margin-inline:auto}
.controw{align-self:flex-start;display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.88rem;color:var(--ink-2)}

/* intro video on the landing page (intro-video.js) — a night stage, same look in day and night mode */
.intro{width:100%;max-width:640px;min-width:0}
.intro-player{background:#0B1A44;color:#FFF8EC;border-radius:22px;padding:8px;box-shadow:0 18px 40px -20px rgba(11,26,68,.55)}
.intro-player:fullscreen{display:flex;flex-direction:column;justify-content:center;border-radius:0}
.intro-stage{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:15px;overflow:hidden;background:#0B1A44}
.intro-stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.intro-play{position:absolute;left:50%;bottom:8%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#1D3A8A;color:#FFFFFF;border:0;border-radius:999px;padding:6px 18px 6px 6px;font-weight:800;font-size:clamp(.82rem,2.4vw,1rem);box-shadow:0 10px 24px -10px rgba(11,26,68,.7);cursor:pointer;white-space:nowrap}
.intro-play .ic{width:clamp(30px,6vw,42px);height:clamp(30px,6vw,42px);border-radius:50%;background:#F4A62A;color:#14234F;display:grid;place-items:center;flex:none}
.intro-play .ic svg{width:44%;height:44%;margin-left:8%}
.intro-play:hover .ic{background:#FFD166}
.intro-end{position:absolute;inset:0;background:rgba(8,17,46,.9);display:grid;place-items:center;text-align:center;padding:12px}
.intro-end .t{font-weight:800;font-size:clamp(1.05rem,3.6vw,1.6rem);color:#FFF8EC}
.intro-end-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:12px}
.intro-ghost{background:transparent;border-color:rgba(255,248,236,.55);color:#FFF8EC;font-family:inherit}
.intro-ghost:hover{background:rgba(255,255,255,.08)}
.intro-replay{margin-top:10px;background:none;border:0;color:#FFD166;font-weight:700;font-size:.9rem;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.intro-ctl{display:flex;align-items:center;gap:6px;padding:6px 2px 0}
.intro-ctl button{width:38px;height:38px;flex:none;border:0;border-radius:10px;background:transparent;color:#FFF8EC;display:grid;place-items:center;cursor:pointer}
.intro-ctl button:hover{background:rgba(255,255,255,.1)}
.intro-ctl svg{width:20px;height:20px}
.intro-ctl .seek{flex:1;min-width:0;-webkit-appearance:none;appearance:none;height:6px;border-radius:6px;background:linear-gradient(to left,#F4A62A var(--pct,0%),rgba(255,255,255,.22) var(--pct,0%));cursor:pointer}
.intro-ctl .seek::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:#FFD166;border:3px solid #0B1A44}
.intro-ctl .seek::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:#FFD166;border:3px solid #0B1A44}
.intro-ctl .time{font-family:var(--f-num);font-weight:800;font-size:.8rem;color:#C3CDEE;white-space:nowrap;font-variant-numeric:tabular-nums;direction:rtl;padding-inline:4px}

/* landing: the video and the login buttons side by side (stacked on phones: video first) */
.hero-split{display:grid;gap:16px;width:100%;align-items:center}
@media (min-width:720px){.hero-split{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.roles.stack{grid-template-columns:1fr;max-width:none;gap:10px}
.roles.stack .rolebtn{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:start;column-gap:12px;row-gap:0;padding:12px 14px;align-items:center}
.roles.stack .rolebtn svg{grid-row:1/3;width:34px;height:34px}
.roles.stack .rolebtn b,.roles.stack .rolebtn span{grid-column:2}

/* landing sections: who, for whom, why */
.lsec{display:grid;gap:14px;padding-top:10px}
.lsec-head{display:grid;gap:6px;text-align:center;justify-items:center}
.lsec-head .kick{font-weight:800;font-size:.9rem;color:var(--lamp)}
.lsec-head p{color:var(--ink-2);max-width:34em}
.lgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:640px){.lgrid{grid-template-columns:1fr}}
.lcard{display:flex;flex-direction:column;gap:8px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px;min-width:0}
.lcard .ico{width:48px;height:48px;border-radius:14px;background:var(--brand-soft);color:var(--brand-text);display:grid;place-items:center}
.lcard .ico svg{width:28px;height:28px}
.lcard p{font-size:.92rem;color:var(--ink-2);flex:1}
.lwhy{display:grid;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow)}
.lwhy p{color:var(--ink-2)}

/* landing hero without the card; login as icons, the label shows on hover */
.hero.plain{background:none;border:0;box-shadow:none;padding:12px 0 8px}
.hero.plain .intro{max-width:680px}
.rolei-row{display:flex;justify-content:center;gap:18px;padding-bottom:26px}
.rolei{position:relative;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--line);background:var(--surface);color:var(--brand-text);cursor:pointer;text-decoration:none;font:inherit;transition:transform .12s ease,border-color .12s}
.rolei svg{width:32px;height:32px}
.rolei.primary{background:var(--lamp);border-color:var(--lamp);color:var(--on-lamp)}
.rolei:hover,.rolei:focus-visible{transform:translateY(-2px);border-color:var(--lamp)}
.rolei .tip{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,-4px);white-space:nowrap;font-size:.82rem;font-weight:800;color:var(--logo);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.rolei:hover .tip,.rolei:focus-visible .tip{opacity:1;transform:translate(-50%,0)}
@media (hover:none){.rolei .tip{opacity:1;transform:translate(-50%,0)}}
@media (prefers-reduced-motion:reduce){.rolei,.rolei .tip{transition:none}}

/* wide landing: text on the right, video on the left */
body.wide #app{max-width:1080px}
.lhero{display:grid;gap:22px;align-items:center}
@media (min-width:860px){.lhero{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}}
.lhero-text{display:grid;gap:14px;justify-items:start;text-align:start;min-width:0}
.lhero-text h1{font-size:clamp(1.6rem,3.6vw,2.3rem)}
.lhero-text .lead{color:var(--ink-2)}
.lhero-text .rolei-row{justify-content:flex-start;padding-bottom:22px}
.lhero .intro{max-width:none}
@media (max-width:859px){.lhero-text{justify-items:center;text-align:center}.lhero-text .rolei-row{justify-content:center}}
.lprice{display:grid;gap:12px;justify-items:center;text-align:center;max-width:460px;width:100%;margin-inline:auto;background:var(--surface);border:2px solid var(--lamp);border-radius:var(--r);padding:22px 20px;box-shadow:var(--shadow)}
.lprice-amt{display:grid;justify-items:center;line-height:1.1}
.lprice-amt b{font-family:var(--f-num);font-weight:900;font-size:3.2rem;color:var(--logo)}
.lprice-amt span{font-weight:800;color:var(--logo)}
.lprice-amt small{color:var(--ink-2);font-size:.95rem;margin-top:4px}
.lprice ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;text-align:start;width:100%}
.lprice li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:.95rem}
.lprice li::before{content:"";flex:none;width:10px;height:10px;margin-top:.55em;border-radius:50%;background:var(--glow);box-shadow:0 0 0 4px var(--glow-soft)}

body.wide .top .wrap{max-width:1080px}

/* roomier landing */
body.wide #app,body.wide .top .wrap{max-width:1200px;padding-inline:24px}
body.wide .view{gap:56px;padding-bottom:40px}
body.wide .hero.plain{padding-top:28px}
.lhero{gap:36px;padding-block:8px}
@media (min-width:860px){.lhero{grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);column-gap:64px}}
.lhero-text{gap:20px}
.lhero-text .lead{line-height:1.95}
.lsec{gap:22px}
.lgrid,.steps{gap:18px}
.lcard{padding:20px}
.lwhy{padding:24px 28px;gap:14px}

/* hero details: smaller logo, warm glow, highlight, facts */
body.wide .hero.plain .logo{width:min(230px,62vw)}
body.wide .hero.plain{gap:10px;padding-top:18px}
.lhero{position:relative;isolation:isolate}
.lhero::before{content:"";position:absolute;z-index:-1;inset:-40px -20px;background:radial-gradient(45% 60% at 30% 50%,var(--glow-soft),transparent 70%),radial-gradient(35% 50% at 85% 40%,var(--brand-soft),transparent 70%);opacity:.9;pointer-events:none}
.eyebrow-chip{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:800;color:var(--brand-text);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.eyebrow-chip i{width:8px;height:8px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 4px var(--glow-soft)}
.lhero-text h1 .hl{background:linear-gradient(transparent 62%,var(--glow-soft) 62%);padding-inline:2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
:root[data-nb="night"] .lhero-text h1 .hl{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--lamp) 35%,transparent) 62%)}
.facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px}
.facts li{white-space:nowrap}
.facts li{display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:6px 12px 6px 10px}
.facts b{font-family:var(--f-num);font-weight:900;font-size:1.25rem;color:var(--logo);min-width:1.2em;text-align:center}
.facts span{font-size:.85rem;color:var(--ink-2);line-height:1.4}
@media (max-width:859px){.facts{justify-content:center}}
@media (max-width:420px){.facts{grid-template-columns:1fr}}

.lsec{scroll-margin-top:84px}

/* =====================================================================
   HOME PAGE (landing) — Nibras: light + guidance + personalised learning
   ===================================================================== */
body.wide #app{max-width:1200px;padding-inline:24px}
body.wide .top .wrap{max-width:1200px;padding-inline:24px}
body.wide .top{background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px)}
@media (min-width:701px) and (max-width:900px){body.wide .nav a{padding:7px 9px;font-size:.88rem}}
.nb-home{gap:0;padding-bottom:28px}
.nb-home h2{font-size:clamp(1.6rem,3.4vw,2.35rem);line-height:1.3}
.nb-home .kick{font-weight:800;font-size:.9rem;color:#B86E00;letter-spacing:.01em}
:root[data-nb="night"] .nb-home .kick{color:var(--glow)}
.nb-sec{padding-block:clamp(56px,8vw,96px);display:grid;gap:34px}
.nb-sec .lsec-head{gap:10px}
.nb-sec .lsec-head p{font-size:1.05rem}
[data-rv]{transition:opacity .7s ease,transform .7s ease}
.rv-wait{opacity:0;transform:translateY(22px)}

/* hero */
.nb-hero{position:relative;isolation:isolate;display:grid;gap:40px;align-items:center;padding-block:clamp(28px,5vw,64px) clamp(40px,6vw,80px)}
@media (min-width:900px){.nb-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1.18fr);column-gap:clamp(40px,5vw,72px)}}
.nb-hero::before{content:"";position:absolute;z-index:-2;inset:-24px -40px 0;background:
  radial-gradient(40% 55% at 26% 48%,color-mix(in srgb,var(--glow) 30%,transparent),transparent 70%),
  radial-gradient(30% 45% at 88% 22%,var(--brand-soft),transparent 72%);pointer-events:none}
.nb-hero::after{content:"";position:absolute;z-index:-1;inset:0 -40px;pointer-events:none;opacity:.55;background-image:
  radial-gradient(1.6px 1.6px at 12% 18%,var(--lamp) 50%,transparent 52%),radial-gradient(1.2px 1.2px at 46% 8%,var(--logo) 50%,transparent 52%),
  radial-gradient(1.4px 1.4px at 64% 82%,var(--lamp) 50%,transparent 52%),radial-gradient(1.2px 1.2px at 92% 70%,var(--logo) 50%,transparent 52%),
  radial-gradient(1.6px 1.6px at 30% 92%,var(--logo) 50%,transparent 52%),radial-gradient(1.2px 1.2px at 80% 40%,var(--lamp) 50%,transparent 52%)}
.nb-path{position:absolute;z-index:-1;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.nb-path path{fill:none;stroke:var(--lamp);stroke-width:2.2;stroke-dasharray:2 12;stroke-linecap:round;opacity:.55;animation:nbPath 18s linear infinite}
@keyframes nbPath{to{stroke-dashoffset:-280}}
.nb-hero-text{display:grid;gap:22px;justify-items:start;min-width:0}
.nb-kicker{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:var(--tag);font-size:1rem}
.nb-bulb{width:34px;height:34px;flex:none}
.nb-bulb circle:first-child{animation:nbGlow 3.6s ease-in-out infinite;transform-origin:24px 22px}
@keyframes nbGlow{50%{opacity:.5;transform:scale(1.12)}}
.nb-hero h1{font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.28;font-weight:800;color:var(--logo)}
.nb-hero h1 .hl{background:linear-gradient(transparent 64%,color-mix(in srgb,var(--glow) 55%,transparent) 64%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding-inline:2px}
.nb-lead{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.95;color:var(--ink-2);max-width:32em}
.nb-cta{display:flex;flex-wrap:wrap;gap:12px}
.nb-cta .btn{min-height:54px;padding-inline:26px}
.nb-cta .btn-line svg{color:var(--lamp)}
.nb-login{display:flex;align-items:center;gap:16px;padding-top:6px}
.nb-login-l{font-size:.85rem;font-weight:800;color:var(--ink-3)}
.nb-login .rolei-row{padding-bottom:22px;gap:12px;justify-content:flex-start}
@media (hover:none){.nb-login .rolei-row{gap:40px;padding-bottom:30px}.nb-login .rolei .tip{font-size:.75rem}}
@media (max-width:420px){.nb-login{flex-direction:column;gap:8px}}
.nb-login .rolei{width:52px;height:52px}
.nb-login .rolei svg{width:26px;height:26px}
.nb-video{display:grid;gap:12px;min-width:0}
.nb-video-l{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--logo);font-size:.98rem;justify-self:start}
.nb-video-l i{width:9px;height:9px;border-radius:50%;background:var(--lamp);box-shadow:0 0 0 5px color-mix(in srgb,var(--glow) 40%,transparent)}
.nb-video .intro{max-width:none}
.nb-video .intro-player{border-radius:26px;padding:10px;box-shadow:0 30px 60px -28px rgba(11,26,68,.55),0 0 0 1px rgba(255,209,102,.18) inset}
.nb-video .intro-stage{border-radius:18px}
@media (max-width:899px){.nb-hero-text{justify-items:center;text-align:center}.nb-cta,.nb-login .rolei-row{justify-content:center}.nb-login{justify-content:center}.nb-video-l{justify-self:center}}

/* "you're not late" */
.nb-late{position:relative;isolation:isolate;display:grid;justify-items:center;text-align:center;gap:18px;padding:clamp(60px,9vw,110px) 20px;border-block:1px solid var(--line)}
.nb-late h2{font-size:clamp(2rem,5.4vw,3.6rem);line-height:1.3;color:var(--logo)}
.nb-late h2 span{color:var(--ink)}
.nb-late>p{font-size:clamp(1.05rem,1.8vw,1.25rem);color:var(--ink-2);max-width:30em}
.nb-late-lamp .ln{width:58px;height:76px}
.nb-late-lamp{position:relative}
.nb-late-lamp::before{content:"";position:absolute;inset:-34px;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--glow) 55%,transparent),transparent)}
.nb-symbols{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.nb-symbols span{position:absolute;font-family:var(--f-num);font-weight:900;color:var(--logo);opacity:.08;font-size:clamp(1.6rem,3vw,2.6rem);animation:nbFloat 14s ease-in-out infinite}
.nb-symbols span:nth-child(1){top:14%;right:8%}.nb-symbols span:nth-child(2){top:62%;right:16%;animation-delay:-3s}
.nb-symbols span:nth-child(3){top:24%;left:12%;animation-delay:-6s}.nb-symbols span:nth-child(4){top:70%;left:20%;animation-delay:-9s}
.nb-symbols span:nth-child(5){top:40%;right:30%;animation-delay:-2s}.nb-symbols span:nth-child(6){top:16%;left:36%;animation-delay:-11s;font-family:var(--f-body)}
.nb-symbols span:nth-child(7){top:80%;right:44%;animation-delay:-5s}.nb-symbols span:nth-child(8){top:46%;left:6%;animation-delay:-7s}
@keyframes nbFloat{50%{transform:translateY(-14px)}}

/* split sections (text + mockup) */
.nb-split{align-items:center}
@media (min-width:900px){.nb-split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(40px,6vw,88px)}.nb-split.rev .nb-split-text{order:2}}
.nb-split-text{display:grid;gap:14px;min-width:0}
.nb-split-text p{font-size:1.06rem;line-height:1.95;color:var(--ink-2);max-width:32em}
.nb-split-text .nb-strong{font-weight:800;color:var(--logo);font-size:1.15rem}
.nb-mock,.nb-dash{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:22px;box-shadow:var(--shadow);display:grid;gap:16px;min-width:0}
.nb-mock figcaption,.nb-dash figcaption{font-size:.78rem;color:var(--ink-3)}
.nb-tag{margin-inline-start:auto;font-size:.75rem;font-weight:800;color:var(--ink-3);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:2px 10px;white-space:nowrap}
.nb-mock-top{display:flex;align-items:center;gap:12px}
.nb-mock-top b{display:block;color:var(--logo);font-size:1.05rem;line-height:1.3}
.nb-mock-top small{color:var(--ink-3)}
.nb-av{width:44px;height:44px;border-radius:50%;background:var(--brand);color:var(--on-brand);display:grid;place-items:center;font-weight:800;flex:none}
.nb-skills{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative}
.nb-skills li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--bg)}
.nb-skills li>span:nth-child(2){font-weight:700}
.nb-skills small{font-size:.8rem;color:var(--ink-3)}
.nb-skills .st{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:900}
.nb-skills .done .st{background:var(--good-soft);color:var(--good)}
.nb-skills .now{border-color:var(--lamp);background:color-mix(in srgb,var(--glow) 18%,var(--surface));box-shadow:0 0 0 4px color-mix(in srgb,var(--glow) 25%,transparent)}
.nb-skills .now .st{border:2.5px dashed var(--lamp)}
.nb-skills .now small{color:#9A5B00;font-weight:800}
:root[data-nb="night"] .nb-skills .now small{color:var(--glow)}
.nb-skills .lock{opacity:.6}
.nb-skills .lock .st{background:var(--surface-2);color:var(--ink-3)}

/* how it works */
.nb-steps{position:relative;display:grid;gap:18px}
@media (min-width:820px){.nb-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}}
.nb-steps .line{display:none}
@media (min-width:820px){.nb-steps .line{display:block;position:absolute;top:58px;inset-inline:16%;height:3px;border-radius:3px;background:linear-gradient(to left,var(--lamp),var(--glow));box-shadow:0 0 12px color-mix(in srgb,var(--glow) 70%,transparent);transform-origin:right;transition:transform 1.4s ease .25s}
 .nb-steps.rv-wait .line{transform:scaleX(0)}}
.nb-step{position:relative;display:grid;justify-items:center;text-align:center;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:22px 20px 24px;box-shadow:var(--shadow);min-width:0}
.nb-step .num{font-family:var(--f-num);font-weight:900;font-size:.85rem;color:var(--ink-3);letter-spacing:.08em}
.nb-step .ic{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--bg);border:2px solid var(--glow);position:relative;z-index:1}
.nb-step .ic .ln{width:28px;height:36px}
.nb-step .ic .step-ic{width:30px;height:30px;fill:none;stroke:var(--logo);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.nb-step .ic .step-ic .f{fill:var(--glow);stroke:var(--lamp)}.nb-step .ic .ln{width:28px;height:36px}
.nb-step h3{font-size:1.35rem;color:var(--logo)}
.nb-step b{color:var(--ink);font-size:1rem}
.nb-step p{color:var(--ink-2);font-size:.95rem}
.nb-steps.rv-in .nb-step{animation:nbUp .6s ease both}
.nb-steps.rv-in .nb-step:nth-of-type(2){animation-delay:.15s}.nb-steps.rv-in .nb-step:nth-of-type(3){animation-delay:.3s}
@keyframes nbUp{from{opacity:0;transform:translateY(16px)}}

/* AI flow */
.nb-flow{list-style:none;margin:0;padding:0;display:grid;gap:14px;counter-reset:none}
@media (min-width:860px){.nb-flow{grid-template-columns:repeat(5,minmax(0,1fr));gap:0}}
.nb-flow li{position:relative;display:grid;justify-items:center;text-align:center;gap:6px;padding:18px 12px}
.nb-flow .dot{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-family:var(--f-num);font-weight:900;background:var(--brand);color:var(--on-brand);position:relative;z-index:1}
.nb-flow li:last-child .dot{background:var(--lamp);color:var(--on-lamp);box-shadow:0 0 0 6px color-mix(in srgb,var(--glow) 40%,transparent)}
.nb-flow b{color:var(--logo);font-size:1.05rem}
.nb-flow small{color:var(--ink-2);font-size:.88rem}
.nb-flow li:not(:last-child)::after{content:"";position:absolute;background:var(--line)}
@media (min-width:860px){.nb-flow li:not(:last-child)::after{top:41px;left:-50%;width:100%;height:2px;background:linear-gradient(to left,var(--brand-text),var(--lamp));opacity:.5}}
@media (max-width:859px){.nb-flow li{grid-template-columns:46px minmax(0,1fr);justify-items:start;text-align:start;column-gap:14px;padding:8px 0}.nb-flow li b{align-self:end}.nb-flow .dot{grid-row:1/3}.nb-flow li:not(:last-child)::after{right:22px;top:54px;width:2px;height:calc(100% - 30px)}}

/* games */
.nb-games{display:grid;gap:18px}
@media (min-width:760px){.nb-games{grid-template-columns:repeat(3,minmax(0,1fr))}}
.nb-game{display:grid;gap:8px;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px;box-shadow:var(--shadow);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;min-width:0}
.nb-game:hover{transform:translateY(-4px);border-color:var(--lamp);box-shadow:0 18px 34px -18px rgba(20,35,79,.35)}
.nb-game svg{width:100%;height:96px;background:var(--bg);border-radius:16px;padding:10px 0}
.nb-game h3{font-size:1.15rem;color:var(--logo);margin-top:6px}
.nb-game p{color:var(--ink-2);font-size:.95rem}
.nb-game-cta{font-weight:800;font-size:.9rem;color:var(--brand-text);text-decoration:none;justify-self:start;margin-top:4px}
.nb-game-cta::after{content:" ←"}
.nb-game-cta:hover{text-decoration:underline}
.g-surf{fill:var(--surface);stroke:var(--brand-text);stroke-width:2}
.g-fill{fill:var(--lamp)}
.g-soft{fill:#FFF3D1}
.g-soft2{fill:var(--brand-text);opacity:.35}
.g-line{stroke:var(--brand-text);fill:none;stroke-linecap:round}
.g-dash{stroke:var(--lamp);fill:none;stroke-dasharray:3 6;stroke-linecap:round}
.nb-game:hover .g-fill{animation:nbPulse .9s ease}
@keyframes nbPulse{50%{opacity:.6}}
.nb-more{display:flex;justify-content:center}

/* progress dashboard */
.nb-dash-row{display:flex;align-items:center;gap:10px}
.nb-dash-row b{color:var(--logo);font-size:1.05rem}
.nb-meter{height:14px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.nb-meter i{display:block;height:100%;border-radius:inherit;background:linear-gradient(to left,var(--lamp),var(--glow))}
.nb-dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.nb-dash-grid>div{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:12px 14px;display:grid;gap:2px}
.nb-dash-grid small{color:var(--ink-3);font-size:.82rem}
.nb-dash-grid b{font-family:var(--f-num);font-weight:900;font-size:1.8rem;color:var(--logo);line-height:1.2}
.nb-dash-grid b span{font-size:1rem;color:var(--ink-3)}
.nb-lanterns{display:flex;flex-wrap:wrap;gap:6px;justify-content:space-between}
.nb-lanterns .ln{width:22px;height:29px}

/* "it's ok to say I don't get it" */
.nb-ok{display:grid;justify-items:center;text-align:center;gap:16px;margin-block:clamp(20px,4vw,40px);padding:clamp(40px,6vw,72px) clamp(20px,5vw,60px);border-radius:32px;background:radial-gradient(70% 90% at 50% 0%,color-mix(in srgb,var(--glow) 28%,transparent),transparent 70%),var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.nb-ok h2{font-size:clamp(1.8rem,4.4vw,2.9rem);color:var(--logo)}
.nb-ok h2 span{color:#B86E00}
:root[data-nb="night"] .nb-ok h2 span{color:var(--glow)}
.nb-ok-sub{color:var(--ink-2);font-weight:700}
.nb-ok ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:760px}
.nb-ok li{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:700;color:var(--ink)}
.nb-ok li::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--lamp);margin-inline-end:8px;vertical-align:middle}
.nb-ok blockquote{margin:12px 0 0;font-size:clamp(1.15rem,2.4vw,1.5rem);font-weight:800;line-height:1.7;color:var(--logo);border-inline-start:4px solid var(--lamp);padding-inline-start:16px;text-align:start}

/* final CTA — the night stage, like the video */
.nb-final{position:relative;overflow:hidden;isolation:isolate;display:grid;justify-items:center;text-align:center;gap:16px;margin-top:clamp(40px,6vw,72px);margin-bottom:24px;padding:clamp(48px,7vw,84px) 20px;border-radius:32px;background:#0B1A44;color:#FFF8EC}
.nb-final::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(40% 60% at 50% 18%,rgba(255,209,102,.22),transparent 70%),
  radial-gradient(1.5px 1.5px at 10% 30%,#FFF8EC 50%,transparent 52%),radial-gradient(1.2px 1.2px at 22% 76%,#FFF8EC 50%,transparent 52%),radial-gradient(1.6px 1.6px at 82% 24%,#FFF8EC 50%,transparent 52%),
  radial-gradient(1.2px 1.2px at 70% 70%,#FFF8EC 50%,transparent 52%),radial-gradient(1.4px 1.4px at 40% 12%,#FFD166 50%,transparent 52%),radial-gradient(1.2px 1.2px at 92% 58%,#FFD166 50%,transparent 52%)}
.nb-final h2{color:#FFF8EC;font-size:clamp(1.9rem,4.6vw,3rem)}
.nb-final p{color:#C3CDEE;font-size:1.1rem;line-height:1.9}
.nb-final .btn{min-height:56px;padding-inline:30px;margin-top:6px}
.nb-final-tags{font-weight:800;color:#FFD166 !important;font-size:.95rem !important;letter-spacing:.02em}
.nb-final-lamp .nb-bulb{width:64px;height:64px}
.nb-final-lamp .nb-bulb rect{fill:#C3CDEE}

@media (prefers-reduced-motion:reduce){.nb-path path,.nb-bulb circle:first-child,.nb-symbols span,.nb-steps.rv-in .nb-step{animation:none}[data-rv],.nb-game,.nb-steps .line{transition:none}}

.nb-home{overflow-x:clip}

/* plans */
.nb-plans{display:grid;gap:20px;max-width:880px;width:100%;margin-inline:auto}
@media (min-width:760px){.nb-plans{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:stretch}}
.nb-plan{display:grid;gap:14px;align-content:start;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:26px 24px;box-shadow:var(--shadow);min-width:0}
.nb-plan.main{border:2px solid var(--lamp);background:radial-gradient(90% 60% at 50% 0%,color-mix(in srgb,var(--glow) 22%,transparent),transparent 70%),var(--surface)}
.nb-plan-badge{justify-self:start;font-size:.8rem;font-weight:800;border-radius:999px;padding:3px 12px;background:var(--lamp);color:var(--on-lamp)}
.nb-plan-badge.alt{background:var(--brand-soft);color:var(--brand-text)}
.nb-plan h3{font-size:1.35rem;color:var(--logo)}
.nb-price{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}
.nb-price b{font-family:var(--f-num);font-weight:900;font-size:3.2rem;line-height:1;color:var(--logo)}
.nb-price>span{font-weight:800;font-size:1.4rem;color:var(--logo);line-height:1.4}
.nb-price small{color:var(--ink-2);font-size:.88rem;line-height:1.5;margin-inline-start:6px}
.nb-price.ask{display:grid;gap:6px}
.nb-price.ask b{font-family:var(--f-body);font-size:2rem}
.nb-plan ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nb-plan li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:.96rem;line-height:1.7}
.nb-plan li::before{content:"";flex:none;width:9px;height:9px;margin-top:.6em;border-radius:50%;background:var(--glow);box-shadow:0 0 0 4px var(--glow-soft)}
.nb-plan .btn{justify-self:stretch;margin-top:auto}
.nb-plans-note{text-align:center;font-size:.86rem;color:var(--ink-3);max-width:46em;margin-inline:auto}

/* explanation levels: «بسّطلي الشرح» → simpler → simplest */
.xbadge{width:fit-content;margin:0;background:var(--glow-soft);color:var(--on-lamp);font-weight:800;font-size:.85rem;border-radius:999px;padding:3px 12px}
.xsteps{border:1px dashed var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface);display:grid;gap:10px}
.xstep{display:grid;gap:8px}
.xstep[hidden]{display:none}
.xstep>p{margin:0;font-size:1.08rem;line-height:1.95}
.xstory{background:var(--glow-soft);border-radius:var(--r-sm);padding:14px 16px;display:grid;gap:8px}
.xstory>p{margin:0;font-size:1.08rem;line-height:1.95}
.xstory .fig{background:var(--surface);border-radius:12px;padding:8px}
.xtry{border-top:1px dashed var(--line);padding-top:10px;display:grid;gap:6px}
.xtry p{margin:0;font-weight:700}
.xtry summary{cursor:pointer;color:var(--brand-text);font-weight:800;width:fit-content}
.xtry details p{font-weight:400;margin-top:6px}
.xmore{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.xmore>span{color:var(--ink-2)}
.xback{border:0;background:none;font:inherit;font-size:.92rem;color:var(--brand-text);text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:6px 2px}
:root[data-nb="night"] .xbadge{color:var(--glow)}

/* lesson video with the Nibras avatar (lesson-player.js) */
.lsn .lsn-player{background:#0E1C47;border-radius:22px;padding:6px;box-shadow:0 26px 50px -26px rgba(11,26,68,.55)}
.lsn .lsn-player:fullscreen{display:flex;flex-direction:column;justify-content:center;border-radius:0}
.lsn .lsn-stage{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:16px;overflow:hidden;background:#F6EAD3}
.lsn .lsn-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lsn .lsn-cap{position:absolute;left:8%;right:8%;bottom:4%;text-align:center;pointer-events:none}
.lsn .lsn-cap span{background:rgba(20,35,79,.86);color:#FFF8EC;font-size:clamp(.78rem,1.9vw,1.08rem);line-height:1.8;padding:4px 14px;border-radius:12px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lsn .lsn-big{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;background:#1D3A8A;color:#fff;border:0;border-radius:999px;padding:7px 20px 7px 7px;font:800 clamp(.85rem,2.4vw,1.05rem) var(--f-body);cursor:pointer;white-space:nowrap;box-shadow:0 14px 30px -10px rgba(11,26,68,.6)}
.lsn .lsn-big .lsn-ic{width:clamp(32px,6vw,46px);height:clamp(32px,6vw,46px);border-radius:50%;background:#F4A62A;color:#14234F;display:grid;place-items:center}
.lsn .lsn-big .lsn-ic svg{width:44%;height:44%;margin-left:8%}
.lsn .lsn-ctl{display:flex;align-items:center;gap:4px;padding:6px 4px 2px}
.lsn .lsn-ctl button{width:38px;height:38px;flex:none;border:0;border-radius:10px;background:transparent;color:#FFF8EC;display:grid;place-items:center;cursor:pointer;font:800 .8rem var(--f-body)}
.lsn .lsn-ctl button:hover{background:rgba(255,255,255,.1)}
.lsn .lsn-ctl button[aria-pressed="true"]{color:#FFD166}
.lsn .lsn-ctl svg{width:20px;height:20px}
.lsn .lsn-ctl .lsn-cc{width:auto;padding-inline:9px;height:28px;border:1.5px solid currentColor;border-radius:7px}
.lsn .lsn-segs{flex:1;min-width:0;display:flex;gap:3px;padding-inline:6px}
.lsn .lsn-segs i{flex:1;height:6px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden;position:relative}
.lsn .lsn-segs i b{position:absolute;inset:0 0 0 auto;width:0;background:#F4A62A;border-radius:inherit}
.lsn-tabs{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:4px;justify-self:start;margin-block:6px 4px}
.lsn-tabs button{border:0;background:transparent;border-radius:999px;padding:7px 16px;font:800 .95rem var(--f-body);color:var(--ink-2);cursor:pointer}
.lsn-tabs button[aria-selected="true"]{background:var(--surface);color:var(--logo);box-shadow:0 1px 4px rgba(20,35,79,.12)}
.lsn{margin-block:6px}

/* ---------- skill numbers, prerequisites, quiz grades ---------- */
.sknum{display:inline-block;font-family:var(--f-num);font-weight:900;font-size:.8em;background:var(--brand-soft);color:var(--brand-text);border-radius:999px;padding:0 9px;margin-inline-end:8px;vertical-align:middle;line-height:1.7}
.skpre{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.skpre a.chip{text-decoration:none}
.skpre a.chip:hover{outline:2px solid var(--brand-text);outline-offset:1px}
.stars{display:inline-flex;gap:2px;vertical-align:middle}
.star{width:18px;height:18px;fill:var(--surface-2);stroke:var(--line);stroke-width:1.2}
.star.on{fill:var(--lamp);stroke:var(--lamp)}
.quizres .stars .star{width:44px;height:44px}
.skgrade{display:inline-flex;flex-wrap:wrap;align-items:center;gap:8px}
.quizbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.quizbar .grow{flex:1;min-width:200px}
.quizhead{display:grid;gap:8px}
.qdots{display:flex;gap:6px}
.qdots i{flex:1;height:8px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.qdots i.qd-done{background:var(--brand-text);border-color:var(--brand-text)}
.qdots i.qd-now{background:var(--lamp);border-color:var(--lamp)}
.qrev{display:grid;gap:6px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.qrev .stem{margin:0;font-size:1rem}
.skgrade-row{align-items:center}

/* path lock: a station opens only after the ones before it are lit */
.stop.locked{cursor:not-allowed}
.stop.locked .info{background:var(--surface-2,var(--surface));opacity:.72}
.stop.locked:hover .info{border-color:var(--line)}
.stop.locked .orb svg.ln{opacity:.45}
.orb svg.lk{position:absolute;width:24px;height:24px;inset-inline-end:-4px;bottom:-4px;padding:3px;border-radius:50%;background:var(--surface);border:2px solid var(--line);color:var(--ink-3)}
/* seven islands (grades 1–7): they shrink to fit a phone instead of overflowing */
.islands{max-width:100%}
.isle{min-width:0;flex:0 1 74px}
.isle-link{min-width:4px}
@media (max-width:560px){.isle .dot{width:34px;height:34px;font-size:1rem;border-width:2px}.isle small{font-size:.66rem}.isle.now .dot{box-shadow:0 0 0 4px var(--glow-soft)}.isle-link{flex-basis:14px;margin-bottom:18px}}
/* levels above the student's grade */
.lvsec.later{opacity:.6}
@media (max-width:420px){.stop:nth-child(even){transform:translateX(-14px)}}
/* the typed answer, shown again the way the book writes it (fractions stacked) */
.anspv{margin:-4px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--ink-2)}
.anspv .m{font-size:1.25rem;font-weight:800;color:var(--logo)}
/* what the words on the path mean */
.legend{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px}
.legend summary{cursor:pointer;font-weight:800;color:var(--brand-text)}
.legend ul{margin:8px 0 0;padding-inline-start:1.2em;display:grid;gap:4px}
/* «المطلوب مني»: the plan after the diagnosis */
.planhead{display:flex;align-items:center;gap:16px}
.planhead .ring{width:84px;height:84px;flex:none}
.plansec{display:grid;gap:10px}
.plansec h3{margin:6px 0 0}
.plancard{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.plancard .grow{flex:1;min-width:0;display:grid;gap:4px}
.plancard b{color:var(--logo)}
.plancard.now{border-color:var(--lamp);box-shadow:var(--shadow)}
.plancard.later{opacity:.75}
.plancard .lockic svg{width:22px;height:22px;color:var(--ink-3)}
.plancard .orb.sm{width:40px;height:40px;border-width:2px;flex:none;background:var(--glow-soft);border-color:var(--lamp)}
.plancard .orb.sm svg{width:20px;height:24px}
.plancard .stars svg{width:16px;height:16px}

/* ---------- student home: warm, no navy surfaces ---------- */
.hm{--apricot-soft:#FDE8DA;--apricot-ink:#C0612E;--sage:#3E8E63;--sage-soft:#E1F1E6;--sky:#3C7896;--sky-soft:#E8F1F7;--honey-dk:#C77F12;gap:20px}
:root[data-nb="night"] .hm{--apricot-soft:#3A2519;--apricot-ink:#F2A07E;--sage:#7DCB9C;--sage-soft:#16301F;--sky:#8CC3DE;--sky-soft:#162630;--honey-dk:#FFD166}
.hm h1,.hm h2{color:var(--ink)}
.hm-hero{position:relative;display:grid;grid-template-columns:190px 1fr;gap:12px;align-items:end;border-radius:30px;padding:24px 28px 0;overflow:hidden;
  background:radial-gradient(120% 140% at 85% 0%,var(--glow-soft) 0%,var(--surface-2) 48%,var(--apricot-soft) 100%)}
.hm-hero::before{content:"";position:absolute;inset-inline-start:40px;top:-70px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--glow) 50%,transparent),transparent 65%);pointer-events:none}
.hm-teacher{position:relative;display:grid;justify-items:center;align-self:end}
.hm-teacher img{width:180px;max-width:100%;height:auto;display:block;filter:drop-shadow(0 10px 18px rgba(120,80,20,.18))}
.hm-bubble{position:relative;margin-bottom:8px;background:var(--surface);border-radius:18px;padding:7px 14px;font-weight:800;font-size:.92rem;box-shadow:var(--shadow);text-align:center}
.hm-bubble::after{content:"";position:absolute;bottom:-7px;inset-inline-start:calc(50% - 7px);width:14px;height:14px;background:var(--surface);transform:rotate(45deg)}
.hm-task{position:relative;align-self:center;display:grid;gap:12px;padding-bottom:24px;min-width:0}
.hm-hello{font-weight:800;color:var(--ink-2);margin:0}
.hm-task h1{font-size:clamp(1.45rem,3.6vw,2.05rem);margin:0;line-height:1.35}
.hm-why{color:var(--ink-2);margin:0}
.hm-trail{list-style:none;margin:0;padding:0;display:flex;align-items:center;flex-wrap:wrap}
.hm-trail li{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.95rem;color:var(--ink-3)}
.hm-trail li + li::before{content:"";width:22px;height:3px;border-radius:3px;background:var(--line);margin-inline:8px}
.hm-trail li.done + li::before{background:var(--lamp)}
.hm-trail .dot{min-width:30px;height:30px;padding-inline:4px;border-radius:999px;display:grid;place-items:center;background:var(--surface);border:2px solid var(--line);font-family:var(--f-num);font-size:.78rem}
.hm-trail .done{color:var(--ink)}.hm-trail .done .dot{background:var(--lamp);border-color:var(--lamp);color:var(--on-lamp)}
.hm-trail .cur{color:var(--ink)}.hm-trail .cur .dot{border-color:var(--lamp);color:var(--honey-dk);box-shadow:0 0 0 5px color-mix(in srgb,var(--glow) 45%,transparent)}
.hm-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hm-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:dense;gap:18px;align-items:stretch}
.hm-card{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:20px 22px;display:grid;gap:10px;align-content:start;min-width:0}
.hm-card p{margin:0}
.hm-wide{grid-column:1/-1}
.hm-card h2{font-size:1.1rem;margin:0;display:flex;align-items:center;gap:10px}
.hm-b{width:34px;height:34px;border-radius:12px;display:grid;place-items:center;flex:none}
.hm-b svg{width:20px;height:20px}
.hm-b.honey{background:var(--glow-soft);color:var(--honey-dk)}
.hm-b.apricot{background:var(--apricot-soft);color:var(--apricot-ink)}
.hm-b.sage{background:var(--sage-soft);color:var(--sage)}
.hm-b.sky{background:var(--sky-soft);color:var(--sky)}
.hm-qday .stem{font-size:1.1rem;font-weight:800}
.hm-opts{display:flex;gap:10px;flex-wrap:wrap}
.hm-opt{min-width:72px;padding:9px 16px;border-radius:18px;border:2px solid var(--line);background:var(--bg);font:800 1.1rem var(--f-body);color:var(--ink);cursor:pointer;transition:transform .12s,border-color .12s}
.hm-opt:hover:not(:disabled){transform:translateY(-2px);border-color:var(--lamp)}
.hm-opt:disabled{cursor:default}
.hm-opt.right{background:var(--sage-soft);border-color:var(--sage);color:var(--sage)}
.hm-opt.wrong{background:var(--apricot-soft);border-color:var(--apricot-ink);color:var(--apricot-ink);text-decoration:line-through}
.hm-fb{font-weight:700;color:var(--ink-2);font-size:.95rem}
.hm-ex{background:var(--apricot-soft);border-radius:12px;padding:6px 12px;color:var(--ink-2)}
.hm-vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:12px}
.hm-vid{display:grid;gap:6px;text-decoration:none;color:inherit;border-radius:18px;overflow:hidden;background:var(--bg);border:1px solid var(--line);transition:transform .15s}
a.hm-vid:hover{transform:translateY(-2px)}
.hm-vid.locked{opacity:.65}
.hm-vid .th{position:relative;aspect-ratio:16/9;max-width:100%;background:linear-gradient(135deg,var(--surface-2),var(--glow-soft));display:flex;align-items:flex-end;padding-inline:12px;overflow:hidden}
.hm-vid .th img{height:96%;width:auto;display:block}
.hm-vid .play{position:absolute;inset-inline-end:12px;bottom:12px;width:38px;height:38px;border-radius:50%;background:var(--lamp);color:var(--on-lamp);display:grid;place-items:center}
.hm-vid .play svg{width:18px;height:18px}
.hm-vid .meta{padding:0 12px 12px;display:grid;gap:2px}
.hm-vid .meta small{color:var(--ink-3);font-size:.82rem}
.hm-imp{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.hm-imp li{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--bg);border-radius:16px;padding:10px 12px}
.hm-imp li div{display:grid;gap:2px}
.hm-lights{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hm-lights div{border-radius:18px;padding:14px 8px;display:grid;justify-items:center;text-align:center;gap:2px}
.hm-lights svg{width:22px;height:26px}
.hm-lights .l1{background:var(--glow-soft)}.hm-lights .l2{background:var(--apricot-soft);color:var(--lamp)}.hm-lights .l3{background:var(--sage-soft);color:var(--sage)}
.hm-lights b{font:900 1.7rem var(--f-num);line-height:1.1;color:var(--ink)}
.hm-lights span{font-size:.82rem;font-weight:700;color:var(--ink-2)}
@media (max-width:760px){
  .hm-hero{grid-template-columns:1fr;padding:20px 20px 0}
  .hm-teacher{order:2;grid-template-columns:auto 1fr;justify-items:start;align-items:center;gap:10px}
  .hm-teacher img{width:120px}
  .hm-bubble{order:2;margin:0}.hm-bubble::after{display:none}
  .hm-trail li + li::before{width:14px;margin-inline:5px}
  .hm-grid{grid-template-columns:1fr}
}

/* ---------- help page ---------- */
.helpbtn{display:none;text-decoration:none}
.helpbtn svg{width:20px;height:20px}
@media (max-width:700px){.helpbtn:not([hidden]){display:grid}}
.help-tips{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.help-tip{display:grid;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;text-decoration:none;color:var(--ink)}
.help-tip:hover{border-color:var(--lamp)}
@media (max-width:520px){.help-tips{grid-template-columns:1fr}}
.help-form{display:grid;gap:14px}
.help-form h3{margin:0}
.field textarea,.field select{width:100%;border:2px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface);font-size:1.05rem;color:var(--ink)}
.field textarea{resize:vertical;min-height:130px;line-height:1.6}
.field textarea:focus,.field select:focus{border-color:var(--brand-text);outline:none}