/* ═══════════════════════════════════════════════════════════════════
   طَلاقة — Talaqah Design System  v1.0
   ─────────────────────────────────────────────────────────────────
   Style direction : dark-mode-oled  (ui-ux-pro-max · styles.csv)
   Palette base    : LMS teal+amber  (ui-ux-pro-max · colors.csv)
   Type            : IBM Plex Sans Arabic (UI/AR)
                     Atkinson Hyperlegible (EN — accessibility-first,
                     typography.csv)  ·  Cairo (display)
   A11y targets    : contrast ≥ 4.5:1 · focus 2px/3:1 · touch ≥ 44px
                     CLS-safe · prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────── 1. Design tokens ─────────── */
:root{
  /* Brand — from colors.csv "LMS" profile */
  --brand:        #0D9488;
  --brand-hi:     #2DD4BF;
  --brand-lo:     #0F766E;
  --on-brand:     #04211E;
  --accent:       #D97706;
  --accent-hi:    #FBBF24;
  --on-accent:    #231200;

  /* Semantic */
  --ok:           #22C55E;
  --warn:         #F59E0B;
  --bad:          #EF4444;
  --info:         #3B82F6;

  /* CEFR level hues */
  --c-a1:#10B981; --c-a2:#3B82F6; --c-b1:#8B5CF6;
  --c-b2:#F59E0B; --c-c1:#EF4444; --c-c2:#0F172A;

  /* Radii */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-full:999px;

  /* Elevation */
  --sh-1:0 1px 2px rgba(0,0,0,.30);
  --sh-2:0 4px 12px rgba(0,0,0,.32);
  --sh-3:0 12px 32px rgba(0,0,0,.40);
  --sh-4:0 24px 64px rgba(0,0,0,.52);
  --glow-brand:0 0 0 1px rgba(45,212,191,.18), 0 8px 30px rgba(13,148,136,.22);

  /* Motion */
  --d-fast:120ms; --d:200ms; --d-slow:340ms;
  --e:cubic-bezier(.22,.61,.36,1);
  --e-out:cubic-bezier(.16,1,.3,1);

  /* Layout */
  --sb:264px;
  --top:64px;
  --tab:62px;
  --maxw:1180px;

  /* Type scale — 16px base, 1.5 body line-height (ux-guidelines) */
  --fs-2xs:.72rem; --fs-xs:.8rem; --fs-sm:.885rem; --fs:1rem;
  --fs-md:1.125rem; --fs-lg:1.32rem; --fs-xl:1.62rem;
  --fs-2xl:2.05rem; --fs-3xl:2.6rem; --fs-4xl:3.3rem;
}

/* Dark (default — OLED) */
html[data-theme="dark"]{
  --bg:        #08090A;
  --bg-2:      #0E1012;
  --bg-3:      #14171A;
  --surface:   #14171A;
  --surface-2: #1B1F23;
  --surface-3: #23282D;
  --line:      #262C32;
  --line-2:    #333A41;
  --fg:        #F2F5F5;
  --fg-2:      #C6CDD2;
  --muted:     #8C979F;
  --muted-2:   #6C777F;
  --brand-soft:rgba(13,148,136,.16);
  --accent-soft:rgba(217,119,6,.16);
  --ok-soft:   rgba(34,197,94,.16);
  --bad-soft:  rgba(239,68,68,.16);
  --info-soft: rgba(59,130,246,.16);
  --scrim:     rgba(4,5,6,.78);
  color-scheme:dark;
}
/* Light */
html[data-theme="light"]{
  --bg:        #F0FDFA;
  --bg-2:      #E6F7F3;
  --bg-3:      #FFFFFF;
  --surface:   #FFFFFF;
  --surface-2: #F5FBFA;
  --surface-3: #EAF4F2;
  --line:      #CDE7E1;
  --line-2:    #A9D6CE;
  --fg:        #0B2E2A;
  --fg-2:      #134E4A;
  --muted:     #475569;
  --muted-2:   #64748B;
  --brand-soft:rgba(13,148,136,.10);
  --accent-soft:rgba(217,119,6,.12);
  --ok-soft:   rgba(22,163,74,.12);
  --bad-soft:  rgba(220,38,38,.10);
  --info-soft: rgba(37,99,235,.10);
  --scrim:     rgba(11,46,42,.42);
  --sh-1:0 1px 2px rgba(11,46,42,.08);
  --sh-2:0 4px 12px rgba(11,46,42,.10);
  --sh-3:0 12px 32px rgba(11,46,42,.12);
  --sh-4:0 24px 64px rgba(11,46,42,.16);
  --brand:#0F766E; --on-brand:#FFFFFF;
  --accent:#B45309; --on-accent:#FFFFFF;
  color-scheme:light;
}

/* ─────────── 2. Reset & base ─────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
/* سمة hidden يجب أن تغلب دائمًا على قواعد display المخصّصة */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  min-height:100dvh;
  background:var(--bg);
  color:var(--fg);
  /* خط إيموجي احتياطي حتى على الأجهزة بلا خطوط إيموجي نظامية */
  font-family:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif,"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji";
  font-size:var(--fs);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
html[data-theme="dark"] body{
  background-image:
    radial-gradient(1100px 620px at 88% -12%, rgba(13,148,136,.13), transparent 62%),
    radial-gradient(760px 520px at -8% 104%, rgba(217,119,6,.09), transparent 60%);
  background-attachment:fixed;
}
img,svg,video{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--brand-hi);text-decoration:none}
html[data-theme="light"] a{color:var(--brand-lo)}
h1,h2,h3,h4{line-height:1.28;font-weight:700;text-wrap:balance}
h1{font-size:var(--fs-2xl)} h2{font-size:var(--fs-xl)} h3{font-size:var(--fs-lg)}
p{text-wrap:pretty}
ul,ol{padding-inline-start:1.2em}
hr{border:0;border-top:1px solid var(--line);margin:1.4rem 0}

/* English runs get the accessibility-first face */
.en,[lang="en"],.latin{
  font-family:"Atkinson Hyperlegible","IBM Plex Sans Arabic",system-ui,sans-serif;
  direction:ltr; unicode-bidi:isolate;
  font-weight:400; letter-spacing:.005em;
}
.en-b{font-family:"Atkinson Hyperlegible",system-ui,sans-serif;direction:ltr;unicode-bidi:isolate;font-weight:700}
.ipa{font-family:"Atkinson Hyperlegible",system-ui,sans-serif;direction:ltr;unicode-bidi:isolate;color:var(--muted);font-size:.92em}

/* ── Focus: WCAG 2.2 — ≥2px perimeter, ≥3:1 contrast (ux-guidelines) ── */
:focus{outline:none}
:focus-visible{
  outline:3px solid var(--brand-hi);
  outline-offset:3px;
  border-radius:var(--r-xs);
}
html[data-theme="light"] :focus-visible{outline-color:var(--brand-lo)}

.skip-link{
  position:fixed;top:-100px;inset-inline-start:50%;translate:-50% 0;
  z-index:2000;background:var(--brand);color:var(--on-brand);
  padding:.75rem 1.3rem;border-radius:var(--r-full);font-weight:700;
  transition:top var(--d) var(--e);box-shadow:var(--sh-3);
}
.skip-link:focus-visible{top:12px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--muted-2)}

/* ─────────── 3. Topbar ─────────── */
.topbar{
  position:sticky;top:0;z-index:900;
  height:var(--top);
  background:color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter:blur(18px) saturate(1.5);
  -webkit-backdrop-filter:blur(18px) saturate(1.5);
  border-bottom:1px solid var(--line);
}
.topbar__in{
  max-width:100%;height:100%;
  margin-inline:0;padding-inline:1rem;
  display:flex;align-items:center;gap:1rem;
}
.brand{display:flex;align-items:center;gap:.65rem;color:var(--fg);flex-shrink:0}
.brand__mark{
  display:grid;place-items:center;
  width:38px;height:38px;border-radius:12px;
  background:linear-gradient(140deg,var(--brand),var(--brand-lo));
  color:#fff;font-weight:700;font-size:1.25rem;
  box-shadow:0 4px 14px rgba(13,148,136,.4), inset 0 1px 0 rgba(255,255,255,.25);
}
.brand__txt{display:flex;flex-direction:column;line-height:1.1}
.brand__txt strong{font-family:Cairo,"IBM Plex Sans Arabic",sans-serif;font-size:1.12rem;font-weight:800}
.brand__txt small{font-size:.66rem;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;
  font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr}

.topbar__stats{display:flex;align-items:center;gap:.35rem;margin-inline-start:auto}
.stat{
  display:flex;align-items:center;gap:.3rem;
  padding:.32rem .62rem;border-radius:var(--r-full);
  background:var(--surface-2);border:1px solid var(--line);
  font-size:var(--fs-xs);white-space:nowrap;
}
.stat__ic{font-size:.92rem}
.stat__val{font-weight:700;font-variant-numeric:tabular-nums}
.stat__lb{color:var(--muted);font-size:var(--fs-2xs)}
.stat--cefr{padding:.2rem .3rem;background:transparent;border:0}
.stat__badge{
  display:grid;place-items:center;min-width:40px;height:28px;padding:0 .5rem;
  border-radius:var(--r-xs);font-weight:800;font-size:var(--fs-xs);
  background:linear-gradient(140deg,var(--brand),var(--brand-lo));color:#fff;
  letter-spacing:.06em;font-family:"Atkinson Hyperlegible",sans-serif;
}
.topbar__actions{display:flex;gap:.3rem;flex-shrink:0}
.icbtn{
  display:grid;place-items:center;width:44px;height:44px;   /* ≥44px touch target */
  border-radius:var(--r-sm);border:1px solid transparent;
  background:transparent;cursor:pointer;color:var(--fg-2);
  transition:background var(--d-fast) var(--e),transform var(--d-fast) var(--e),border-color var(--d-fast);
  font-size:1.05rem;
}
.icbtn:hover{background:var(--surface-2);border-color:var(--line);color:var(--fg)}
.icbtn:active{transform:scale(.93)}
.icbtn[aria-pressed="false"]{opacity:.5}

/* ─────────── 4. Shell / sidebar ─────────── */
.shell{display:grid;grid-template-columns:var(--sb) minmax(0,1fr);min-height:calc(100dvh - var(--top))}
.sidebar{
  position:sticky;top:var(--top);height:calc(100dvh - var(--top));
  display:flex;flex-direction:column;gap:1rem;
  padding:1.1rem .8rem;overflow-y:auto;
  border-inline-end:1px solid var(--line);
  background:linear-gradient(180deg,var(--bg-2),var(--bg));
}
.nav{list-style:none;padding:0;display:flex;flex-direction:column;gap:.22rem}
.nav__i{
  display:flex;align-items:center;gap:.72rem;
  min-height:46px;padding:.5rem .8rem;
  border-radius:var(--r-sm);
  color:var(--fg-2);font-weight:500;font-size:var(--fs-sm);
  border:1px solid transparent;position:relative;
  transition:background var(--d-fast) var(--e),color var(--d-fast),transform var(--d-fast);
}
.nav__i span[aria-hidden]{font-size:1.12rem;width:1.4em;text-align:center;flex-shrink:0}
.nav__i:hover{background:var(--surface-2);color:var(--fg)}
.nav__i:active{transform:translateX(2px)}
.nav__i.is-active{
  background:var(--brand-soft);color:var(--brand-hi);
  border-color:color-mix(in srgb,var(--brand) 32%,transparent);font-weight:700;
}
html[data-theme="light"] .nav__i.is-active{color:var(--brand-lo)}
.nav__i.is-active::before{
  content:"";position:absolute;inset-inline-start:-.8rem;top:50%;translate:0 -50%;
  width:3px;height:60%;border-radius:0 4px 4px 0;background:var(--brand-hi);
}
.nav__i--accent.is-active{background:var(--accent-soft);color:var(--accent-hi);
  border-color:color-mix(in srgb,var(--accent) 34%,transparent)}
html[data-theme="light"] .nav__i--accent.is-active{color:#92400E}
.nav__i--accent.is-active::before{background:var(--accent-hi)}
.nav__pill{
  margin-inline-start:auto;min-width:22px;height:22px;padding:0 .38rem;
  display:grid;place-items:center;border-radius:var(--r-full);
  background:var(--accent);color:var(--on-accent);
  font-size:var(--fs-2xs);font-weight:800;font-variant-numeric:tabular-nums;
}

.sidebar__goal{
  margin-top:auto;padding:.9rem;border-radius:var(--r-md);
  background:var(--surface);border:1px solid var(--line);
}
.goal__hd{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-size:var(--fs-xs)}
.goal__hd span{color:var(--muted)}
.goal__hd strong{font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.meter{height:8px;margin:.55rem 0 .5rem;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
.meter__fill{
  display:block;height:100%;width:0%;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--brand),var(--brand-hi));
  transition:width var(--d-slow) var(--e-out);
}
.goal__hint{font-size:var(--fs-2xs);color:var(--muted);line-height:1.5}

.sidebar__ai{
  padding:.7rem .8rem;border-radius:var(--r-md);
  background:linear-gradient(140deg,rgba(13,148,136,.14),rgba(217,119,6,.09));
  border:1px solid var(--line);display:flex;flex-direction:column;gap:.25rem;
}
.sidebar__ai small{color:var(--muted);font-size:var(--fs-2xs)}
.ai-chip{display:flex;align-items:center;gap:.45rem;font-size:var(--fs-xs);font-weight:700;
  font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr;justify-content:flex-start}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px var(--ok-soft);animation:pulse 2.4s var(--e) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.42}}

/* ─────────── 5. Main / view ─────────── */
.main{min-width:0;padding:1.5rem clamp(1rem,2.6vw,2.4rem) 3rem}
.view{max-width:var(--maxw);margin-inline:auto}
.boot{display:grid;place-items:center;gap:1rem;min-height:52vh;color:var(--muted)}
.boot__ring{
  width:46px;height:46px;border-radius:50%;
  border:3px solid var(--line);border-top-color:var(--brand);
  animation:spin 900ms linear infinite;
}
@keyframes spin{to{rotate:360deg}}

/* ── Section scaffolding ── */
.sec{margin-bottom:2.4rem;animation:rise var(--d-slow) var(--e-out) both}
@keyframes rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
.sec__hd{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:1rem;flex-wrap:wrap}
.sec__hd h2{display:flex;align-items:center;gap:.55rem}
.sec__hd p{color:var(--muted);font-size:var(--fs-sm);margin-top:.2rem}
.eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:var(--fs-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-hi);margin-bottom:.4rem;
  font-family:"Atkinson Hyperlegible",sans-serif;
}
html[data-theme="light"] .eyebrow{color:var(--brand-lo)}

/* ── Cards ── */
.card{
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:1.2rem;box-shadow:var(--sh-1);
  transition:border-color var(--d) var(--e),box-shadow var(--d) var(--e),transform var(--d) var(--e);
}
.card--hover:hover{border-color:var(--line-2);box-shadow:var(--sh-2);transform:translateY(-2px)}
.card--brand{background:linear-gradient(145deg,var(--brand-soft),transparent 62%),var(--surface);
  border-color:color-mix(in srgb,var(--brand) 26%,var(--line))}
.card--accent{background:linear-gradient(145deg,var(--accent-soft),transparent 62%),var(--surface);
  border-color:color-mix(in srgb,var(--accent) 26%,var(--line))}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.g3{grid-template-columns:repeat(auto-fill,minmax(min(100%,258px),1fr))}
.g4{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.stack{display:flex;flex-direction:column;gap:.85rem}
.row{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* ── Buttons (≥44px) ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:46px;padding:.6rem 1.15rem;
  border-radius:var(--r-sm);border:1px solid var(--line);
  background:var(--surface-2);color:var(--fg);
  font-weight:600;font-size:var(--fs-sm);cursor:pointer;white-space:nowrap;
  transition:transform var(--d-fast) var(--e),background var(--d-fast),border-color var(--d-fast),box-shadow var(--d-fast);
}
.btn:hover{background:var(--surface-3);border-color:var(--line-2)}
.btn:active{transform:scale(.975)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn--pri{
  background:linear-gradient(140deg,var(--brand),var(--brand-lo));color:#fff;border-color:transparent;
  box-shadow:0 4px 16px rgba(13,148,136,.34), inset 0 1px 0 rgba(255,255,255,.16);font-weight:700;
}
.btn--pri:hover{filter:brightness(1.09);box-shadow:0 6px 22px rgba(13,148,136,.44)}
.btn--acc{background:linear-gradient(140deg,var(--accent),#B45309);color:#fff;border-color:transparent;
  box-shadow:0 4px 16px rgba(217,119,6,.32), inset 0 1px 0 rgba(255,255,255,.18);font-weight:700}
.btn--acc:hover{filter:brightness(1.09)}
.btn--ghost{background:transparent;border-color:var(--line)}
.btn--ghost:hover{background:var(--surface-2)}
.btn--bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 34%,var(--line));color:#FCA5A5}
html[data-theme="light"] .btn--bad{color:#991B1B}
.btn--lg{min-height:54px;padding:.85rem 1.7rem;font-size:var(--fs-md);border-radius:var(--r-md)}
.btn--sm{min-height:38px;padding:.35rem .8rem;font-size:var(--fs-xs);border-radius:var(--r-xs)}
.btn--blk{width:100%}
.btn__ic{font-size:1.1em;line-height:1}

/* ── Chips / badges / pills ── */
.chip{
  display:inline-flex;align-items:center;gap:.32rem;
  padding:.24rem .62rem;border-radius:var(--r-full);
  background:var(--surface-2);border:1px solid var(--line);
  font-size:var(--fs-2xs);font-weight:600;color:var(--fg-2);white-space:nowrap;
}
.chip--brand{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 30%,transparent);color:var(--brand-hi)}
html[data-theme="light"] .chip--brand{color:var(--brand-lo)}
.chip--accent{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent-hi)}
html[data-theme="light"] .chip--accent{color:#92400E}
.chip--ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 30%,transparent);color:#86EFAC}
html[data-theme="light"] .chip--ok{color:#166534}
.cefr{
  display:inline-grid;place-items:center;min-width:36px;height:24px;padding:0 .45rem;
  border-radius:6px;font-size:var(--fs-2xs);font-weight:800;color:#fff;letter-spacing:.05em;
  font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr;
}
.cefr[data-l="a1"]{background:var(--c-a1)} .cefr[data-l="a2"]{background:var(--c-a2)}
.cefr[data-l="b1"]{background:var(--c-b1)} .cefr[data-l="b2"]{background:var(--c-b2)}
.cefr[data-l="c1"]{background:var(--c-c1)} .cefr[data-l="c2"]{background:#334155}

/* ─────────── 6. Hero ─────────── */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(1.6rem,4.4vw,3.1rem);
  border-radius:var(--r-xl);
  background:
    radial-gradient(760px 380px at 92% -22%, rgba(45,212,191,.20), transparent 62%),
    radial-gradient(560px 320px at -6% 118%, rgba(217,119,6,.16), transparent 60%),
    linear-gradient(160deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);box-shadow:var(--sh-3);
  margin-bottom:1.7rem;
}
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(circle at 1px 1px, var(--line-2) 1px, transparent 0);
  background-size:26px 26px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),transparent 72%);
}
.hero__in{position:relative;z-index:1;display:grid;gap:1.5rem;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center}
.hero h1{
  font-family:Cairo,"IBM Plex Sans Arabic",sans-serif;
  font-size:clamp(1.85rem,4.6vw,var(--fs-4xl));font-weight:800;line-height:1.16;
  letter-spacing:-.015em;margin-bottom:.7rem;
}
.hero h1 .grad{
  background:linear-gradient(102deg,var(--brand-hi),var(--accent-hi) 78%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__sub{color:var(--fg-2);font-size:clamp(.95rem,1.6vw,var(--fs-md));max-width:56ch;margin-bottom:1.3rem}
.hero__cta{display:flex;gap:.65rem;flex-wrap:wrap}
.hero__badges{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:1.1rem}

/* level ladder in hero */
.ladder{display:flex;flex-direction:column;gap:.4rem}
.ladder__t{font-size:var(--fs-2xs);color:var(--muted);margin-bottom:.2rem;font-weight:600}
.rung{
  display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;
  border-radius:var(--r-sm);background:color-mix(in srgb,var(--bg) 55%,transparent);
  border:1px solid var(--line);font-size:var(--fs-xs);
  transition:transform var(--d) var(--e),border-color var(--d),background var(--d);
}
.rung:hover{transform:translateX(-3px);border-color:var(--line-2)}
.rung.is-done{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.rung.is-cur{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 44%,transparent);box-shadow:var(--glow-brand)}
.rung__b{width:8px;height:26px;border-radius:4px;background:var(--line-2);flex-shrink:0}
.rung.is-done .rung__b{background:var(--ok)} .rung.is-cur .rung__b{background:var(--brand-hi)}
.rung__n{font-weight:700;font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr;min-width:26px}
.rung__a{color:var(--muted);margin-inline-start:auto;font-size:var(--fs-2xs)}

/* ─────────── 7. Lesson path ─────────── */
.levelblk{margin-bottom:1.5rem;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);background:var(--surface)}
.levelblk__hd{
  display:flex;align-items:center;gap:.9rem;padding:1rem 1.15rem;cursor:pointer;
  background:linear-gradient(100deg,var(--lvl-soft),transparent 70%);
  border:0;width:100%;text-align:start;color:var(--fg);
  transition:background var(--d) var(--e);
}
.levelblk__hd:hover{background:linear-gradient(100deg,var(--lvl-soft),var(--surface-2) 82%)}
.levelblk__hd[aria-expanded="true"] .chev{rotate:180deg}
.chev{transition:rotate var(--d) var(--e);color:var(--muted);flex-shrink:0}
.lvl-badge{
  display:grid;place-items:center;width:52px;height:52px;border-radius:var(--r-md);
  background:var(--lvl);color:#fff;font-weight:800;font-size:1.02rem;flex-shrink:0;
  font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr;letter-spacing:.03em;
  box-shadow:0 6px 18px color-mix(in srgb,var(--lvl) 44%,transparent), inset 0 1px 0 rgba(255,255,255,.22);
}
.levelblk__meta{min-width:0;flex:1}
.levelblk__meta h3{font-size:var(--fs-md);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.levelblk__meta p{color:var(--muted);font-size:var(--fs-xs);margin-top:.18rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.levelblk__body{padding:0 1.15rem 1.15rem;display:none}
.levelblk.is-open .levelblk__body{display:block;animation:rise var(--d) var(--e-out) both}
.unitgrid{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr));margin-top:.3rem}
.unitcard{
  display:flex;flex-direction:column;gap:.5rem;padding:.9rem;
  border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface-2);
  transition:border-color var(--d) var(--e),transform var(--d) var(--e),box-shadow var(--d);
}
.unitcard:hover{border-color:var(--lvl);transform:translateY(-2px);box-shadow:var(--sh-2)}
.unitcard__hd{display:flex;align-items:center;gap:.55rem}
.unitcard__ic{font-size:1.4rem;line-height:1}
.unitcard__t{font-weight:700;font-size:var(--fs-sm);line-height:1.35}
.unitcard__t small{display:block;color:var(--muted);font-weight:500;font-size:var(--fs-2xs);
  font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr}
.unitcard__p{margin-top:auto}

/* lesson rows */
.lessons{list-style:none;padding:0;margin:.7rem 0 0;display:flex;flex-direction:column;gap:.34rem}
.lsn{
  display:flex;align-items:center;gap:.75rem;
  padding:.62rem .8rem;border-radius:var(--r-sm);
  border:1px solid transparent;background:var(--bg-2);
  transition:background var(--d-fast) var(--e),border-color var(--d-fast),transform var(--d-fast);
  color:var(--fg);text-align:start;width:100%;cursor:pointer;font:inherit;
}
.lsn:hover:not(:disabled){background:var(--surface-2);border-color:var(--line-2);transform:translateX(-3px)}
.lsn:disabled{opacity:.45;cursor:not-allowed}
.lsn.is-done{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 24%,transparent)}
.lsn__n{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;flex-shrink:0;
  background:var(--surface-3);font-size:var(--fs-2xs);font-weight:800;color:var(--fg-2);
  font-variant-numeric:tabular-nums;
}
.lsn.is-done .lsn__n{background:var(--ok);color:#04240F}
.lsn__b{min-width:0;flex:1}
.lsn__b strong{display:block;font-size:var(--fs-sm);font-weight:600;line-height:1.35}
.lsn__b span{display:block;font-size:var(--fs-2xs);color:var(--muted);
  font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lsn__m{display:flex;align-items:center;gap:.55rem;flex-shrink:0;color:var(--muted);font-size:var(--fs-2xs)}

/* progress bar */
.pbar{height:6px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden;min-width:64px}
.pbar__f{display:block;height:100%;border-radius:var(--r-full);background:var(--lvl,var(--brand));
  transition:width var(--d-slow) var(--e-out)}

/* ─────────── 8. Lesson player ─────────── */
.lplayer{display:grid;gap:1.3rem}
.lhead{
  padding:1.3rem;border-radius:var(--r-lg);border:1px solid var(--line);
  background:linear-gradient(140deg,var(--lvl-soft),transparent 66%),var(--surface);
}
.lhead__top{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:.55rem}
.lhead h1{font-size:clamp(1.4rem,3.4vw,var(--fs-2xl));margin-bottom:.3rem}
.lhead .en-sub{color:var(--muted);font-size:var(--fs-sm)}
.lhead__goal{
  margin-top:.85rem;padding:.75rem .9rem;border-radius:var(--r-md);
  background:var(--brand-soft);border-inline-start:3px solid var(--brand);
  font-size:var(--fs-sm);color:var(--fg-2);
}

.tabs{display:flex;gap:.3rem;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:none;
  border-bottom:1px solid var(--line);position:sticky;top:var(--top);z-index:80;
  background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(14px);padding-top:.4rem}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex-shrink:0;min-height:44px;padding:.5rem .9rem;border:0;background:transparent;
  color:var(--muted);font-weight:600;font-size:var(--fs-sm);cursor:pointer;
  border-bottom:3px solid transparent;transition:color var(--d-fast),border-color var(--d-fast),background var(--d-fast);
  display:inline-flex;align-items:center;gap:.4rem;border-radius:var(--r-xs) var(--r-xs) 0 0;
}
.tab:hover{color:var(--fg);background:var(--surface-2)}
.tab.is-on{color:var(--brand-hi);border-bottom-color:var(--brand-hi)}
html[data-theme="light"] .tab.is-on{color:var(--brand-lo)}
.tab__c{font-size:var(--fs-2xs);background:var(--surface-3);padding:.05rem .35rem;border-radius:var(--r-full);
  font-variant-numeric:tabular-nums}
.tab.is-on .tab__c{background:var(--brand-soft);color:inherit}

/* ── vocab cards ── */
.vgrid{display:grid;gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,268px),1fr))}
.vcard{
  position:relative;padding:.95rem;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:.42rem;
  transition:transform var(--d) var(--e),border-color var(--d),box-shadow var(--d);
}
.vcard:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--brand) 40%,var(--line));box-shadow:var(--sh-2)}
.vcard.is-known{border-color:color-mix(in srgb,var(--ok) 40%,var(--line));background:var(--ok-soft)}
.vcard__top{display:flex;align-items:flex-start;gap:.5rem;justify-content:space-between}
.vcard__en{font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr;unicode-bidi:isolate;
  font-size:var(--fs-md);font-weight:700;line-height:1.3;word-break:break-word}
.vcard__ar{font-size:var(--fs-sm);color:var(--fg-2);font-weight:500}
.vcard__ipa{font-size:var(--fs-xs)}
.vcard__pos{font-size:var(--fs-2xs);color:var(--muted-2);font-style:italic;
  font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr}
.vcard__ex{
  padding:.55rem .68rem;border-radius:var(--r-sm);background:var(--bg-2);
  border:1px solid var(--line);font-size:var(--fs-xs);display:flex;flex-direction:column;gap:.2rem;
}
.vcard__ex .en{font-weight:600;color:var(--fg)}
.vcard__ex .ar{color:var(--muted)}
.vcard__acts{display:flex;gap:.3rem;margin-top:auto;padding-top:.3rem}
.mini{
  display:inline-flex;align-items:center;justify-content:center;gap:.28rem;
  min-height:38px;min-width:38px;padding:.3rem .6rem;
  border-radius:var(--r-xs);border:1px solid var(--line);background:var(--surface);
  color:var(--fg-2);font-size:var(--fs-2xs);font-weight:600;cursor:pointer;flex:1;
  transition:background var(--d-fast),color var(--d-fast),border-color var(--d-fast),transform var(--d-fast);
}
.mini:hover{background:var(--brand-soft);color:var(--brand-hi);border-color:color-mix(in srgb,var(--brand) 34%,transparent)}
html[data-theme="light"] .mini:hover{color:var(--brand-lo)}
.mini:active{transform:scale(.95)}
.mini.is-on{background:var(--brand);color:#fff;border-color:transparent}
.mini--ok.is-on{background:var(--ok);color:#04240F}

/* ── grammar block ── */
.gblock{display:grid;gap:1rem}
.gformula{
  padding:.95rem 1.1rem;border-radius:var(--r-md);
  background:linear-gradient(120deg,var(--surface-2),var(--bg-2));
  border:1px solid var(--line);border-inline-start:4px solid var(--accent);
  font-family:"Atkinson Hyperlegible",monospace;direction:ltr;unicode-bidi:isolate;
  font-size:var(--fs-sm);line-height:1.75;white-space:pre-wrap;word-break:break-word;
}
.gexplain{font-size:var(--fs-sm);color:var(--fg-2);line-height:1.85}
.gex{list-style:none;padding:0;display:grid;gap:.4rem}
.gex li{padding:.6rem .8rem;border-radius:var(--r-sm);background:var(--surface-2);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:.18rem;font-size:var(--fs-sm)}
.gex .en{font-weight:600}
.gex .ar{color:var(--muted);font-size:var(--fs-xs)}
.tipbox{
  padding:.85rem 1rem;border-radius:var(--r-md);font-size:var(--fs-sm);
  background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);
  border-inline-start:4px solid var(--accent);color:var(--fg-2);
}
.tipbox strong{color:var(--accent-hi)}
html[data-theme="light"] .tipbox strong{color:#92400E}
.errlist{list-style:none;padding:0;display:grid;gap:.35rem}
.errlist li{padding:.55rem .75rem;border-radius:var(--r-sm);background:var(--bad-soft);
  border:1px solid color-mix(in srgb,var(--bad) 24%,transparent);font-size:var(--fs-xs);
  font-family:"Atkinson Hyperlegible","IBM Plex Sans Arabic",sans-serif;direction:ltr;unicode-bidi:isolate;
  text-align:start;line-height:1.7}
html[data-theme="light"] .errlist li{color:#7F1D1D}

/* ── phrases ── */
.plist{display:grid;gap:.5rem}
.pitem{
  display:flex;align-items:center;gap:.8rem;padding:.75rem .9rem;
  border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line);
  transition:border-color var(--d) var(--e),transform var(--d) var(--e);
}
.pitem:hover{border-color:color-mix(in srgb,var(--brand) 38%,var(--line));transform:translateX(-2px)}
.pitem__b{min-width:0;flex:1}
.pitem__en{font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr;unicode-bidi:isolate;
  font-weight:700;font-size:var(--fs-sm);line-height:1.45;text-align:start}
.pitem__ar{color:var(--fg-2);font-size:var(--fs-sm);margin-top:.15rem}
.pitem__note{color:var(--muted);font-size:var(--fs-2xs);margin-top:.3rem;
  padding:.2rem .5rem;background:var(--bg-2);border-radius:var(--r-xs);display:inline-block}
.speak{
  display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;
  border-radius:50%;border:1px solid var(--line);background:var(--surface);
  color:var(--brand-hi);cursor:pointer;font-size:1rem;
  transition:background var(--d-fast),transform var(--d-fast),box-shadow var(--d-fast);
}
.speak:hover{background:var(--brand-soft);box-shadow:var(--glow-brand)}
.speak:active{transform:scale(.9)}
.speak.is-speak{background:var(--brand);color:#fff;animation:throb 1.1s var(--e) infinite}
@keyframes throb{0%,100%{box-shadow:0 0 0 0 rgba(45,212,191,.5)}50%{box-shadow:0 0 0 9px rgba(45,212,191,0)}}

/* ── dialogue ── */
.dlg{display:flex;flex-direction:column;gap:.6rem}
.dline{display:flex;gap:.65rem;align-items:flex-start;animation:rise var(--d) var(--e-out) both}
.dline--b{flex-direction:row-reverse}
.dav{
  display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex-shrink:0;
  background:var(--surface-3);font-weight:800;font-size:var(--fs-sm);color:var(--fg-2);
  border:1px solid var(--line);font-family:"Atkinson Hyperlegible",sans-serif;
}
.dline--b .dav{background:var(--brand-soft);color:var(--brand-hi);border-color:color-mix(in srgb,var(--brand) 34%,transparent)}
.dbub{
  flex:1;min-width:0;padding:.7rem .9rem;border-radius:var(--r-md);
  background:var(--surface-2);border:1px solid var(--line);
}
.dline--b .dbub{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 22%,transparent)}
.dbub__en{font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr;unicode-bidi:isolate;
  text-align:start;font-weight:600;font-size:var(--fs-sm);line-height:1.5}
.dbub__ar{color:var(--muted);font-size:var(--fs-xs);margin-top:.28rem}

/* ── story / reading ── */
.story{display:grid;gap:.9rem}
.story__p{
  padding:.95rem 1.1rem;border-radius:var(--r-md);background:var(--surface-2);
  border:1px solid var(--line);font-size:var(--fs-md);line-height:1.95;
  font-family:"Atkinson Hyperlegible","IBM Plex Sans Arabic",sans-serif;
  direction:ltr;text-align:start;unicode-bidi:isolate;
}
.story__p .w{cursor:pointer;border-radius:4px;padding:0 1px;transition:background var(--d-fast),color var(--d-fast)}
.story__p .w:hover{background:var(--brand-soft);color:var(--brand-hi)}
.story__tr{
  padding:.9rem 1.05rem;border-radius:var(--r-md);background:var(--bg-2);
  border:1px solid var(--line);border-inline-start:3px solid var(--brand);
  color:var(--fg-2);font-size:var(--fs-sm);line-height:1.95;white-space:pre-line;
}

/* ─────────── 9. Quiz ─────────── */
.quiz{display:grid;gap:1rem}
.qitem{
  padding:1.15rem;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh-1);
  animation:rise var(--d) var(--e-out) both;
}
.qitem__hd{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem;flex-wrap:wrap}
.qitem__n{font-size:var(--fs-2xs);color:var(--muted);font-variant-numeric:tabular-nums;margin-inline-start:auto}
.qtext{font-size:var(--fs-md);font-weight:600;line-height:1.65;margin-bottom:.9rem}
.qtext .en,.qtext .blank{
  font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr;unicode-bidi:isolate;
}
.blank{
  display:inline-block;min-width:78px;padding:0 .4rem;margin:0 .12rem;
  border-bottom:2.5px dashed var(--brand);color:var(--brand-hi);font-weight:700;text-align:center;
}
.opts{display:grid;gap:.45rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr))}
.opt{
  display:flex;align-items:center;gap:.6rem;min-height:52px;padding:.6rem .85rem;
  border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--surface-2);
  cursor:pointer;text-align:start;font:inherit;color:var(--fg);
  transition:border-color var(--d-fast) var(--e),background var(--d-fast),transform var(--d-fast);
}
.opt:hover:not(:disabled){border-color:var(--brand);background:var(--brand-soft);transform:translateY(-1px)}
.opt:disabled{cursor:default}
.opt__k{
  display:grid;place-items:center;width:26px;height:26px;border-radius:7px;flex-shrink:0;
  background:var(--surface-3);font-size:var(--fs-2xs);font-weight:800;color:var(--fg-2);
  font-family:"Atkinson Hyperlegible",sans-serif;
}
.opt__t{flex:1;font-size:var(--fs-sm);line-height:1.5}
.opt.is-right{border-color:var(--ok);background:var(--ok-soft)}
.opt.is-right .opt__k{background:var(--ok);color:#04240F}
.opt.is-wrong{border-color:var(--bad);background:var(--bad-soft)}
.opt.is-wrong .opt__k{background:var(--bad);color:#fff}
.opt.is-dim{opacity:.5}

.inp{
  width:100%;min-height:52px;padding:.7rem .9rem;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--bg-2);color:var(--fg);
  font-family:"Atkinson Hyperlegible","IBM Plex Sans Arabic",sans-serif;
  font-size:var(--fs);transition:border-color var(--d-fast),box-shadow var(--d-fast);
}
.inp:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.inp.is-right{border-color:var(--ok);background:var(--ok-soft)}
.inp.is-wrong{border-color:var(--bad);background:var(--bad-soft)}
textarea.inp{min-height:110px;resize:vertical;line-height:1.7}
.inp[lang="en"],.inp--en{direction:ltr;text-align:start;unicode-bidi:isolate}

.feedback{
  margin-top:.85rem;padding:.8rem .95rem;border-radius:var(--r-md);
  font-size:var(--fs-sm);line-height:1.75;display:none;
  border-inline-start:4px solid;animation:rise var(--d) var(--e-out) both;
}
.feedback.is-on{display:block}
.feedback--ok{background:var(--ok-soft);border-color:var(--ok);color:var(--fg-2)}
.feedback--bad{background:var(--bad-soft);border-color:var(--bad);color:var(--fg-2)}
.feedback strong{display:block;margin-bottom:.2rem;font-size:var(--fs-sm)}
.feedback--ok strong{color:#86EFAC} .feedback--bad strong{color:#FCA5A5}
html[data-theme="light"] .feedback--ok strong{color:#15803D}
html[data-theme="light"] .feedback--bad strong{color:#B91C1C}
.feedback .en{font-weight:700;color:var(--fg)}

/* match game */
.match{display:grid;gap:.8rem;grid-template-columns:1fr 1fr}
.matchcol{display:flex;flex-direction:column;gap:.4rem}
.mcard{
  min-height:50px;padding:.55rem .8rem;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--surface-2);cursor:pointer;
  font-size:var(--fs-sm);text-align:center;font:inherit;color:var(--fg);
  transition:border-color var(--d-fast),background var(--d-fast),transform var(--d-fast),opacity var(--d-fast);
}
.mcard:hover:not(:disabled){border-color:var(--brand);transform:translateY(-1px)}
.mcard.is-sel{border-color:var(--brand-hi);background:var(--brand-soft);box-shadow:var(--glow-brand)}
.mcard.is-hit{border-color:var(--ok);background:var(--ok-soft);opacity:.72;cursor:default}
.mcard.is-miss{animation:shake 420ms var(--e);border-color:var(--bad);background:var(--bad-soft)}
@keyframes shake{0%,100%{translate:0}20%{translate:-6px}40%{translate:6px}60%{translate:-4px}80%{translate:4px}}

/* order game */
.orderbank,.orderans{display:flex;flex-wrap:wrap;gap:.4rem;min-height:56px;padding:.5rem;
  border-radius:var(--r-md);border:1.5px dashed var(--line);background:var(--bg-2);align-content:flex-start}
.orderans{border-style:solid;border-color:var(--line-2);background:var(--surface-2)}
.wtile{
  padding:.42rem .8rem;border-radius:var(--r-xs);border:1px solid var(--line-2);
  background:var(--surface-3);cursor:pointer;font:inherit;font-size:var(--fs-sm);
  font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr;color:var(--fg);
  transition:transform var(--d-fast),background var(--d-fast),border-color var(--d-fast);
}
.wtile:hover{background:var(--brand-soft);border-color:var(--brand);transform:translateY(-2px)}
.wtile:active{transform:scale(.94)}

/* ─────────── 10. AI Chat ─────────── */
.chat{display:flex;flex-direction:column;height:calc(100dvh - var(--top) - 3.6rem);min-height:520px;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.chat__hd{
  display:flex;align-items:center;gap:.7rem;padding:.8rem 1rem;flex-shrink:0;
  background:linear-gradient(120deg,var(--brand-soft),transparent 68%),var(--surface-2);
  border-bottom:1px solid var(--line);flex-wrap:wrap;
}
.chat__av{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(140deg,var(--brand),var(--brand-lo));color:#fff;font-size:1.15rem;
  box-shadow:0 4px 14px rgba(13,148,136,.36)}
.chat__meta{min-width:0;flex:1}
.chat__meta strong{display:block;font-size:var(--fs-sm)}
.chat__meta small{color:var(--muted);font-size:var(--fs-2xs);display:flex;align-items:center;gap:.35rem}
.chat__log{flex:1;overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.85rem;scroll-behavior:smooth}
.msg{display:flex;gap:.6rem;max-width:min(100%,760px);animation:rise var(--d) var(--e-out) both}
.msg--u{align-self:flex-start;flex-direction:row-reverse}
.msg--a{align-self:flex-end}
.msg__av{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;
  font-size:.9rem;background:var(--surface-3);border:1px solid var(--line)}
.msg--a .msg__av{background:linear-gradient(140deg,var(--brand),var(--brand-lo));color:#fff;border-color:transparent}
.msg__b{padding:.72rem .95rem;border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.8;
  background:var(--surface-2);border:1px solid var(--line);min-width:0;overflow-wrap:anywhere}
.msg--a .msg__b{background:var(--brand-soft);border-color:color-mix(in srgb,var(--brand) 26%,transparent)}
.msg__b strong{color:var(--brand-hi)}
html[data-theme="light"] .msg__b strong{color:var(--brand-lo)}
.msg__b p+p{margin-top:.6rem}
.msg__b ul,.msg__b ol{margin:.45rem 0;padding-inline-start:1.15em}
.msg__b li{margin:.22rem 0}
.msg__b code{font-family:ui-monospace,Menlo,monospace;direction:ltr;font-size:.9em;
  background:var(--bg-2);padding:.1rem .34rem;border-radius:5px;border:1px solid var(--line)}
.msg__b .en-inline{font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr;unicode-bidi:isolate;
  background:var(--bg-2);padding:.05rem .34rem;border-radius:5px;font-weight:600}
.msg__acts{display:flex;gap:.3rem;margin-top:.5rem;flex-wrap:wrap}
.typing{display:inline-flex;gap:.28rem;align-items:center;padding:.3rem 0}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--brand-hi);animation:bounce 1.15s var(--e) infinite}
.typing i:nth-child(2){animation-delay:.16s} .typing i:nth-child(3){animation-delay:.32s}
@keyframes bounce{0%,60%,100%{translate:0;opacity:.42}30%{translate:0 -6px;opacity:1}}

.chat__modes{display:flex;gap:.35rem;padding:.6rem .8rem 0;overflow-x:auto;scrollbar-width:none;flex-shrink:0}
.chat__modes::-webkit-scrollbar{display:none}
.mode{
  flex-shrink:0;min-height:40px;padding:.35rem .8rem;border-radius:var(--r-full);
  border:1px solid var(--line);background:var(--surface-2);color:var(--fg-2);
  font-size:var(--fs-2xs);font-weight:600;cursor:pointer;white-space:nowrap;
  transition:background var(--d-fast),color var(--d-fast),border-color var(--d-fast),transform var(--d-fast);
}
.mode:hover{border-color:var(--brand);color:var(--fg)}
.mode.is-on{background:var(--brand);color:#fff;border-color:transparent;font-weight:700}
.mode:active{transform:scale(.95)}

.chat__in{display:flex;gap:.5rem;padding:.75rem .8rem;border-top:1px solid var(--line);
  background:var(--surface-2);align-items:flex-end;flex-shrink:0}
.chat__in textarea{
  flex:1;min-height:46px;max-height:150px;padding:.65rem .85rem;resize:none;
  border-radius:var(--r-sm);border:1.5px solid var(--line);background:var(--bg-2);
  line-height:1.6;font-size:var(--fs-sm);
}
.chat__in textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);outline:none}
.send{
  display:grid;place-items:center;width:46px;height:46px;flex-shrink:0;border-radius:var(--r-sm);
  border:0;background:linear-gradient(140deg,var(--brand),var(--brand-lo));color:#fff;
  cursor:pointer;font-size:1.1rem;transition:transform var(--d-fast),filter var(--d-fast);
  box-shadow:0 4px 14px rgba(13,148,136,.34);
}
.send:hover{filter:brightness(1.1)} .send:active{transform:scale(.93)} .send:disabled{opacity:.45;cursor:not-allowed}

.sugg{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 .8rem .7rem}
.sugg button{
  padding:.32rem .72rem;border-radius:var(--r-full);border:1px dashed var(--line-2);
  background:transparent;color:var(--muted);font-size:var(--fs-2xs);cursor:pointer;
  transition:color var(--d-fast),border-color var(--d-fast),background var(--d-fast);
}
.sugg button:hover{color:var(--brand-hi);border-color:var(--brand);background:var(--brand-soft)}

/* ─────────── 11. Speech lab ─────────── */
.lab{display:grid;gap:1.2rem}
.mic{
  position:relative;display:grid;place-items:center;width:132px;height:132px;margin:0 auto;
  border-radius:50%;border:0;cursor:pointer;
  background:linear-gradient(140deg,var(--brand),var(--brand-lo));color:#fff;font-size:2.7rem;
  box-shadow:0 10px 36px rgba(13,148,136,.42), inset 0 2px 0 rgba(255,255,255,.2);
  transition:transform var(--d) var(--e),box-shadow var(--d) var(--e);
}
.mic:hover{transform:scale(1.05)}
.mic:active{transform:scale(.96)}
.mic.is-rec{background:linear-gradient(140deg,var(--bad),#B91C1C);box-shadow:0 10px 36px rgba(239,68,68,.46)}
.mic.is-rec::after{
  content:"";position:absolute;inset:-14px;border-radius:50%;
  border:2px solid var(--bad);animation:ripple 1.5s var(--e) infinite;
}
@keyframes ripple{0%{transform:scale(.86);opacity:.85}100%{transform:scale(1.28);opacity:0}}
.score{
  display:grid;place-items:center;gap:.2rem;padding:1.1rem;border-radius:var(--r-lg);
  background:var(--surface-2);border:1px solid var(--line);text-align:center;
}
.score__n{font-size:var(--fs-4xl);font-weight:800;line-height:1;
  font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr;font-variant-numeric:tabular-nums}
.score__n.is-hi{color:var(--ok)} .score__n.is-md{color:var(--warn)} .score__n.is-lo{color:var(--bad)}

/* ─────────── 12. SRS review ─────────── */
.flipwrap{perspective:1400px;width:100%;max-width:520px;margin:0 auto}
.flip{
  position:relative;width:100%;min-height:300px;transform-style:preserve-3d;
  transition:transform 560ms var(--e-out);cursor:pointer;
}
.flip.is-flipped{transform:rotateY(180deg)}
.face{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  padding:1.7rem;border-radius:var(--r-xl);text-align:center;
  background:linear-gradient(150deg,var(--surface-2),var(--surface));
  border:1px solid var(--line);box-shadow:var(--sh-3);
}
.face--b{transform:rotateY(180deg);background:linear-gradient(150deg,var(--brand-soft),var(--surface))}
.face__big{font-size:clamp(1.6rem,5vw,var(--fs-2xl));font-weight:800;line-height:1.3;word-break:break-word}
.face__hint{color:var(--muted);font-size:var(--fs-xs)}
.srsbtns{display:grid;gap:.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr))}

/* ─────────── 13. Progress / charts ─────────── */
.kpi{
  padding:1.05rem;border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);display:flex;flex-direction:column;gap:.25rem;
}
.kpi__v{font-size:var(--fs-2xl);font-weight:800;line-height:1.1;
  font-variant-numeric:tabular-nums;font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr;text-align:start}
.kpi__l{color:var(--muted);font-size:var(--fs-2xs);font-weight:600}
.kpi__d{font-size:var(--fs-2xs);color:var(--brand-hi);font-weight:600}

.bars{display:flex;align-items:flex-end;gap:.4rem;height:150px;padding-top:.5rem}
.bar{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:.3rem;height:100%}
.bar__c{width:100%;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--brand-hi),var(--brand));
  min-height:3px;transition:height var(--d-slow) var(--e-out)}
.bar__c.is-zero{background:var(--surface-3)}
.bar__l{font-size:var(--fs-2xs);color:var(--muted);white-space:nowrap}

.donut{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.donut svg{width:132px;height:132px;flex-shrink:0;rotate:-90deg}
.donut__t{stroke:var(--surface-3);fill:none;stroke-width:13}
.donut__v{fill:none;stroke-width:13;stroke-linecap:round;transition:stroke-dashoffset var(--d-slow) var(--e-out)}
.donut__c{position:relative;display:grid;place-items:center}
.donut__n{position:absolute;font-size:var(--fs-lg);font-weight:800;
  font-family:"Atkinson Hyperlegible",sans-serif}

.skillrow{display:flex;align-items:center;gap:.75rem;padding:.5rem 0}
.skillrow__n{min-width:104px;font-size:var(--fs-xs);font-weight:600}
.skillrow__b{flex:1}
.skillrow__v{min-width:42px;text-align:end;font-size:var(--fs-xs);color:var(--muted);
  font-variant-numeric:tabular-nums;font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr}

.badges{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,124px),1fr))}
.badge{
  padding:.85rem .5rem;border-radius:var(--r-md);text-align:center;
  background:var(--surface-2);border:1px solid var(--line);
  transition:transform var(--d) var(--e),border-color var(--d),box-shadow var(--d);
}
.badge:hover{transform:translateY(-3px)}
.badge.is-won{background:linear-gradient(150deg,var(--accent-soft),var(--surface-2));
  border-color:color-mix(in srgb,var(--accent) 40%,transparent);box-shadow:var(--sh-2)}
.badge:not(.is-won){opacity:.4;filter:grayscale(1)}
.badge__ic{font-size:1.7rem;line-height:1;margin-bottom:.35rem}
.badge__n{font-size:var(--fs-2xs);font-weight:700;line-height:1.35}
.badge__d{font-size:var(--fs-2xs);color:var(--muted);margin-top:.15rem;line-height:1.4}

/* ─────────── 14. Placement test ─────────── */
.plc{max-width:720px;margin-inline:auto;display:grid;gap:1.2rem}
.plc__bar{height:8px;border-radius:var(--r-full);background:var(--surface-3);overflow:hidden}
.plc__fill{height:100%;background:linear-gradient(90deg,var(--brand),var(--brand-hi));
  transition:width var(--d-slow) var(--e-out)}

/* ─────────── 15. Toasts & modal ─────────── */
.toast-stack{position:fixed;bottom:calc(var(--tab) + 1rem);inset-inline-end:1rem;z-index:1500;
  display:flex;flex-direction:column;gap:.5rem;pointer-events:none;max-width:min(92vw,380px)}
@media(min-width:1025px){.toast-stack{bottom:1.4rem}}
.toast{
  display:flex;align-items:center;gap:.65rem;padding:.8rem 1rem;
  border-radius:var(--r-md);background:var(--surface-2);border:1px solid var(--line-2);
  box-shadow:var(--sh-3);font-size:var(--fs-sm);pointer-events:auto;
  animation:toastin var(--d-slow) var(--e-out) both;
}
.toast.is-out{animation:toastout var(--d) var(--e) both}
@keyframes toastin{from{opacity:0;translate:0 18px scale(.96)}to{opacity:1;translate:0 0 scale(1)}}
@keyframes toastout{to{opacity:0;translate:0 10px scale(.97)}}
.toast--ok{border-color:color-mix(in srgb,var(--ok) 42%,var(--line))}
.toast--bad{border-color:color-mix(in srgb,var(--bad) 42%,var(--line))}
.toast--xp{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  background:linear-gradient(120deg,var(--accent-soft),var(--surface-2))}
.toast__ic{font-size:1.2rem;flex-shrink:0}

.modal-root{position:fixed;inset:0;z-index:1800;display:grid;place-items:center;padding:1rem;
  background:var(--scrim);backdrop-filter:blur(6px);animation:fade var(--d) var(--e)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{
  width:min(100%,520px);max-height:86dvh;overflow-y:auto;
  padding:1.4rem;border-radius:var(--r-xl);background:var(--surface);
  border:1px solid var(--line-2);box-shadow:var(--sh-4);
  animation:pop var(--d-slow) var(--e-out) both;
}
@keyframes pop{from{opacity:0;scale:.94;translate:0 14px}to{opacity:1;scale:1;translate:0 0}}
.modal h2{margin-bottom:.5rem}
.modal__x{position:absolute;top:.7rem;inset-inline-end:.7rem}

/* ─────────── 16. Empty / notice ─────────── */
.empty{
  display:grid;place-items:center;gap:.7rem;padding:2.6rem 1.4rem;text-align:center;
  border-radius:var(--r-lg);border:1.5px dashed var(--line-2);background:var(--surface);color:var(--muted);
}
.empty__ic{font-size:2.6rem;line-height:1;opacity:.75}
.empty p{max-width:46ch;font-size:var(--fs-sm);line-height:1.75}
.notice{
  padding:.85rem 1rem;border-radius:var(--r-md);font-size:var(--fs-sm);line-height:1.7;
  background:var(--info-soft);border:1px solid color-mix(in srgb,var(--info) 30%,transparent);
  border-inline-start:4px solid var(--info);color:var(--fg-2);
}
.notice--warn{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 32%,transparent);border-inline-start-color:var(--accent)}
.notice--ok{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 32%,transparent);border-inline-start-color:var(--ok)}

/* ─────────── 17. Tabbar (mobile) ─────────── */
.tabbar{
  display:none;position:fixed;bottom:0;inset-inline:0;z-index:950;height:var(--tab);
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(20px) saturate(1.5);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabbar a{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.14rem;
  color:var(--muted);font-size:var(--fs-2xs);min-height:44px;
  transition:color var(--d-fast);
}
.tabbar a span{font-size:1.25rem;line-height:1}
.tabbar a em{font-style:normal;font-weight:600}
.tabbar a.is-active{color:var(--brand-hi)}
html[data-theme="light"] .tabbar a.is-active{color:var(--brand-lo)}

/* ─────────── 18. Responsive ─────────── */
@media(max-width:1024px){
  .shell{grid-template-columns:1fr}
  .sidebar{
    position:fixed;top:var(--top);inset-inline-start:0;z-index:1000;
    width:min(84vw,300px);height:calc(100dvh - var(--top));
    transform:translateX(100%);transition:transform var(--d-slow) var(--e-out);
    box-shadow:var(--sh-4);background:var(--bg-2);
  }
  html[dir="ltr"] .sidebar{transform:translateX(-100%)}
  .sidebar.is-open{transform:translateX(0)!important}
  .tabbar{display:flex}
  .main{padding-bottom:calc(var(--tab) + 2rem)}
  .hero__in{grid-template-columns:1fr}
  .chat{height:calc(100dvh - var(--top) - var(--tab) - 2.4rem)}
  .stat__lb{display:none}
}
@media(max-width:720px){
  :root{--top:58px}
  .topbar__stats .stat:nth-child(3){display:none}
  .brand__txt small{display:none}
  .hero{padding:1.25rem;border-radius:var(--r-lg)}
  .main{padding:1rem .85rem calc(var(--tab) + 2rem)}
  .match{grid-template-columns:1fr}
  .lhead{padding:1rem}
  .qitem{padding:.95rem}
  .card{padding:1rem}
  h1{font-size:var(--fs-xl)} h2{font-size:var(--fs-lg)}
  .ladder{order:-1}
}
@media(max-width:400px){
  .topbar__stats .stat:nth-child(2){display:none}
  .btn--lg{min-height:50px;padding:.75rem 1.1rem;font-size:var(--fs-sm)}
}

/* ─────────── 19. Print ─────────── */
@media print{
  .topbar,.sidebar,.tabbar,.toast-stack,.chat__in,.sugg,.mic{display:none!important}
  body{background:#fff;color:#000}
  .card,.qitem{break-inside:avoid;border:1px solid #ccc;box-shadow:none}
}

/* ─────────── 20. Reduced motion (a11y) ─────────── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .flip{transition:none}
  .mic.is-rec::after,.dot{animation:none}
}
html.no-motion *,html.no-motion *::before,html.no-motion *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important;
}

/* ─────────── 21. Utilities ─────────── */
.mt0{margin-top:0}.mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.6rem}
.mb0{margin-bottom:0}.mb1{margin-bottom:.5rem}.mb2{margin-bottom:1rem}
.tc{text-align:center}.tr{text-align:end}
.muted{color:var(--muted)}.muted2{color:var(--muted-2)}
.xs{font-size:var(--fs-xs)}.sm{font-size:var(--fs-sm)}.md{font-size:var(--fs-md)}
.b{font-weight:700}.bb{font-weight:800}
.hide{display:none!important}
.divider{height:1px;background:var(--line);margin:1.3rem 0}
.num{font-variant-numeric:tabular-nums;font-family:"Atkinson Hyperlegible",sans-serif;direction:ltr;unicode-bidi:isolate}
.wrap-anywhere{overflow-wrap:anywhere}

/* ─────────── 22. الأيقونات (Lucide SVG — لا إيموجي) ─────────── */
.ic{
  display:inline-block;vertical-align:-0.16em;flex-shrink:0;
  stroke:currentColor;fill:none;
}
.ic-fill{fill:currentColor;stroke:currentColor}
.ic-star-on{color:var(--accent-hi)}
.ic-star-off{color:var(--muted-2);opacity:.55}
.ic-bad{color:var(--bad)}
.ic-good{color:var(--ok)}
/* محاذاة الأيقونة داخل الأزرار والشرائح */
.btn .ic,.tab .ic,.chip .ic,.mini .ic,.mode .ic,.nav__i .ic,.speak .ic,.mic .ic{margin-inline-end:.15em}
.btn .ic:only-child,.speak .ic:only-child,.mic .ic:only-child,.icbtn .ic:only-child{margin:0}
.icbtn .ic{width:20px;height:20px}
.nav__i .ic{width:19px;height:19px}
.tabbar a .ic{width:22px;height:22px;margin:0}
.brand__mark .ic{width:22px;height:22px}
.lvl-badge .ic{width:22px;height:22px}
.mic .ic{width:44px;height:44px}
.badge__ic{display:flex;justify-content:center;margin-bottom:.4rem}
.badge__ic .ic{width:26px;height:26px}
.unitcard__ic{display:flex;align-items:center}
.unitcard__ic .ic{width:22px;height:22px;color:var(--lvl,var(--brand-hi))}
.dav .ic{width:18px;height:18px}
.empty__ic{display:flex;justify-content:center}
.empty__ic .ic{width:44px;height:44px;opacity:.7}
.toast__ic{display:flex}
.toast__ic .ic{width:19px;height:19px}
.qitem__hd .chip .ic{width:14px;height:14px}
.errlist li .ic{vertical-align:-0.12em;margin-inline-end:.3em}
.feedback .ic{vertical-align:-0.12em;margin-inline-end:.25em}
.score .ic{width:30px;height:30px}
.hero__badges .chip .ic{width:13px;height:13px}
.chat__av .ic{width:20px;height:20px}
.msg__av .ic{width:16px;height:16px}

/* عزل اتجاه النص في أسئلة الإكمال: الجملة الإنجليزية LTR والتلميح العربي RTL */
.qtext .q-en{
  direction:ltr;unicode-bidi:isolate;display:inline;
  font-family:"Atkinson Hyperlegible","IBM Plex Sans Arabic",system-ui,sans-serif;
}
.qtext .q-gloss{
  unicode-bidi:isolate;color:var(--brand-hi);font-weight:600;
  margin-inline-start:.45rem;font-size:.92em;
}
html[data-theme="light"] .qtext .q-gloss{color:var(--brand-lo)}

/* مختبر النطق: التغذية اللحظية والتشخيص */
.lab-live{
  padding:.8rem 1rem;border-radius:var(--r-md);
  background:var(--bad-soft);border:1px solid color-mix(in srgb,var(--bad) 30%,transparent);
}
.lab-interim{
  min-height:1.6em;text-align:center;font-size:var(--fs-md);font-weight:600;
  color:var(--fg);overflow-wrap:anywhere;
}
.lab-interim:empty::before{content:'…';color:var(--muted)}
.chip--bad{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 32%,transparent);color:#FCA5A5}
html[data-theme="light"] .chip--bad{color:#991B1B}