/* JMJ — جعفر محبی جاوید (Jafar Mohebbi Javid) — the site's stylesheet.
   index.html links it as assets/app.css?v=<first 12 hex characters of this
   file's SHA-256>; regenerate the stamp after any edit. Font URLs are
   relative to this file (assets/). */
@font-face{font-family:'Vazirmatn';src:url('fonts/vazirmatn-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('fonts/vazirmatn-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('fonts/vazirmatn-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Vazirmatn';src:url('fonts/vazirmatn-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('fonts/lora-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('fonts/lora-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Lora';src:url('fonts/lora-italic-400.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --paper:#F1F4F7;--surface:#FFFFFF;--surface-2:#F7F9FB;
  --ink:#16212B;--ink-soft:#556471;--ink-faint:#606C78;
  --line:#E4E9EF;--line-soft:#EDF1F5;--line-strong:#D6DEE5;
  --brand:#0E5C63;--brand-600:#0B4A50;--on-brand:#FFFFFF;--brand-tint:#E4F0F0;
  --accent:#FF6B5E;--accent-600:#B74433;--accent-tint:#FFE9E6;
  --amber:#C98A12;--amber-tint:#F7EDD6;--success:#1F9D6B;
  --hero-from:#0F6068;--hero-to:#0B484E;--on-hero:#CFE6E6;--on-hero-soft:#A9D2D2;
  --formula-border:#CFE3E3;--letter-sub:#427275;
  --accent-ink:#C4402F;--success-solid:#178055;--on-success:#FFFFFF;
  --shadow-sm:0 1px 2px rgba(16,33,43,.05),0 1px 3px rgba(16,33,43,.06);
  --shadow-md:0 6px 18px rgba(16,33,43,.10);
  --shadow-lg:0 12px 32px rgba(16,33,43,.14);
  --radius:16px;
  --font-fa:'Vazirmatn',system-ui,'Segoe UI',Tahoma,sans-serif;
  --font-en:'Lora',Georgia,'Times New Roman',serif;
  --font-en-read:'Vazirmatn',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Noto Sans',sans-serif;
  --g-alpha:#0E5C63;--g-alpha-bg:#E3EFEF;--g-past:#2C5B8A;--g-past-bg:#E6EDF7;--g-present:#2A7854;--g-present-bg:#E4F1EA;--g-future:#5B4B8A;--g-future-bg:#ECE7F6;--g-basic:#455563;--g-basic-bg:#E9EDF1;--g-adj:#B44536;--g-adj-bg:#FBE8E4;--g-adv:#8E610F;--g-adv-bg:#F7ECD7;--g-conn:#A8447A;--g-conn-bg:#F7E7F0;--g-advanced:#1F6F5C;--g-advanced-bg:#E2F0EB;
}
[data-theme="dark"]{
  --paper:#0E1417;--surface:#161F23;--surface-2:#1C272C;
  --ink:#E7EEF0;--ink-soft:#9FB1B8;--ink-faint:#83949C;
  --line:#26323A;--line-soft:#202B31;--line-strong:#33424A;
  --brand:#34BEC6;--brand-600:#5BD0D6;--brand-tint:#15302F;
  --accent:#FF8275;--accent-600:#FF9C90;--accent-tint:#2C1C19;
  --amber:#E0AA45;--amber-tint:#2A2113;--success:#3CC489;
  --hero-from:#0C4A50;--hero-to:#082F34;--on-hero:#BFE0E0;--on-hero-soft:#8FB6B6;
  --formula-border:#20403F;--letter-sub:#5FA3A8;
  --accent-ink:#FF8275;--success-solid:#3CC489;--on-success:#06231A;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 18px rgba(0,0,0,.4);
  --shadow-lg:0 12px 32px rgba(0,0,0,.5);
  --g-alpha:#33BCC4;--g-past:#74ABE2;--g-present:#5FC99B;--g-future:#AC9DEA;--g-basic:#A3B4C1;--g-adj:#FF8B79;--g-adv:#E8BB5E;--g-conn:#E48EC3;
}
[data-theme="dark"] .grp .card-n{background:var(--surface-2)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--font-fa);background:var(--paper);color:var(--ink);line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
  overflow-wrap:break-word;transition:background .25s ease,color .25s ease}
.wrap{max-width:720px;margin:0 auto;padding:0 18px}
.en{font-family:var(--font-en);unicode-bidi:isolate}
/* A muted aside is usually English, but ten of them are Persian sentences
   in brackets. Forcing every one of them left-to-right laid those out
   backwards. Isolation is what this class needs; the direction belongs to
   whatever is written inside it. */
.en-mut{font-family:var(--font-en);color:var(--ink-soft);unicode-bidi:isolate}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
img{max-width:100%}
/* ---- content protection: block selection, drag, long-press menu (inputs stay usable) ---- */
html{-webkit-touch-callout:none}
body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
input,textarea,[contenteditable="true"]{-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-touch-callout:default}
img,svg,a,.say-btn,.tcard-emoji{-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none}

/* theme toggle */
.theme-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:11px;
  background:rgba(255,255,255,.12);color:#fff;flex:none;transition:background .15s}
.theme-btn:hover{background:rgba(255,255,255,.2)}
.theme-btn .sun{display:none}.theme-btn .moon{display:block}
[data-theme="dark"] .theme-btn .sun{display:block}[data-theme="dark"] .theme-btn .moon{display:none}
.rbar .theme-btn{width:38px;height:38px;background:var(--brand-tint);color:var(--brand)}
.rbar .theme-btn:hover{background:var(--line)}

/* ---------------- HERO ---------------- */
.hero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(165deg,var(--hero-from) 0%,var(--hero-to) 70%);padding:24px 0 32px}
.hero::before{content:"";position:absolute;top:-120px;right:-80px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10),transparent 70%)}
.hero::after{content:"";position:absolute;bottom:-90px;left:-70px;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,94,.16),transparent 70%)}
/* The two circles above are drawn by pseudo-elements, which paint after
   every child of .hero. Without both of these the decoration sits on top
   of the header and swallows the taps meant for the settings button. */
.hero::before,.hero::after{pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.brandmark{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:1.02rem;color:#fff}
.brandmark .bm-ico{width:34px;height:34px;border-radius:9px;background:rgba(255,255,255,.14);
  display:grid;place-items:center;font-family:var(--font-en);font-size:1.05rem;font-weight:700}
.brandmark .bm-ico b{color:#fff}.brandmark .bm-ico i{color:var(--accent);font-style:normal;padding-inline-start:1px}
.hero-eyebrow{display:inline-block;font-size:.8rem;font-weight:700;color:var(--on-hero);
  background:rgba(255,255,255,.10);padding:6px 13px;border-radius:999px}
.hero-title{font-size:2rem;font-weight:800;line-height:1.3;margin:14px 0 8px}
.hero-lead{color:var(--on-hero);font-size:1rem;max-width:46ch;margin-bottom:18px}
.specimen{background:var(--surface);color:var(--ink);border-radius:16px;padding:16px 18px;
  border-inline-start:4px solid var(--accent);box-shadow:var(--shadow-lg);margin-bottom:18px}
.specimen-en{font-family:var(--font-en);font-size:1.28rem;line-height:1.45;color:var(--ink)}
.specimen-fa{color:var(--ink-soft);margin-top:9px;padding-top:9px;border-top:1px dashed var(--line);font-size:.98rem}
.search{display:flex;align-items:center;gap:9px;background:var(--surface);border-radius:13px;
  padding:0 14px;box-shadow:var(--shadow-md);height:50px}
.search svg{flex:none;color:var(--ink-faint)}
.search input{flex:1;border:0;outline:0;background:none;font-family:inherit;font-size:1rem;color:var(--ink);height:100%}
.search input::placeholder{color:var(--ink-faint)}
.hero-stats{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:16px;color:var(--on-hero);font-size:.9rem}
.hero-stats b{color:#fff;font-weight:800}
.hero-stats .dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.4)}

/* ---------------- PROGRESS CARD ---------------- */
#home{padding-bottom:70px}
.prog-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;margin-top:22px;box-shadow:var(--shadow-sm)}
.prog-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px;margin-bottom:11px}
.prog-label{font-weight:800;color:var(--ink);font-size:1rem}
.prog-num{font-size:.85rem;color:var(--ink-soft);font-weight:600}
.prog-track{height:9px;border-radius:999px;background:var(--line);overflow:hidden}
.prog-track i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--brand));transition:width .4s ease}
.prog-actions{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.prog-cta{display:inline-flex;align-items:center;gap:7px;background:var(--brand);color:var(--on-brand);
  font-weight:700;font-size:.92rem;padding:10px 15px;border-radius:11px;transition:transform .15s,box-shadow .15s}
.prog-cta:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.prog-cta .chev{font-size:1.1rem;line-height:1}
.prog-reset{font-size:.82rem;color:var(--ink-faint);font-weight:600;padding:6px 4px}
.prog-reset:hover{color:var(--accent-600)}
.prog-cta.done{background:var(--success-solid);background-image:none;cursor:default}
.prog-line{margin:12px 0 0;font-size:.83rem;color:var(--ink-soft);line-height:1.9}
.prog-line b{font-weight:800}.prog-line b.hi{color:var(--success-solid)}.prog-line b.mid{color:var(--amber)}.prog-line b.lo{color:var(--accent-600)}
.prog-sc{display:block;font-size:.74rem;color:var(--ink-faint)}
.prog-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px}
.prog-stats span{display:flex;flex-direction:column;align-items:center;gap:1px;padding:7px 4px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line);font-size:.7rem;color:var(--ink-faint);text-align:center;line-height:1.5}
.prog-stats b{font-size:.98rem;font-weight:800;color:var(--ink)}
.prog-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.prog-more{font-size:.84rem;font-weight:700;color:var(--brand);text-decoration:none}
.prog-more:hover{text-decoration:underline}
.prog-rs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.prog-rs-q{font-size:.8rem;color:var(--ink-soft)}
.prog-reset.danger{color:var(--accent-600)}
.stk-msg{margin:10px 0 0;font-size:.8rem;color:var(--ink-soft);line-height:1.9}
.stk-how{margin:8px 0 0;font-size:.76rem;color:var(--ink-faint);line-height:1.95}
.stk-det{margin-top:6px}
.stk-det>summary{cursor:pointer;font-size:.78rem;font-weight:700;color:var(--brand);list-style:none;display:inline-block;padding:2px 0}
.stk-det>summary::-webkit-details-marker{display:none}
.stk-det>summary::after{content:" ▾"}
.stk-det[open]>summary::after{content:" ▴"}
.stk-det>summary:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:4px}
@media (max-width:360px){.prog-stats{grid-template-columns:repeat(2,1fr)}}

/* ---------------- GROUPS / CARDS ---------------- */
.grp{margin-top:30px}
.grp-h{display:flex;align-items:center;gap:9px;margin-bottom:13px}
.grp-dot{width:11px;height:11px;border-radius:50%;flex:none}
.grp-t{font-size:1.18rem;font-weight:800;color:var(--ink)}
.grp-c{font-size:.82rem;color:var(--ink-faint);background:var(--surface);border:1px solid var(--line);
  padding:2px 9px;border-radius:999px;margin-inline-start:auto}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:10px;align-items:stretch}
.card{position:relative;display:flex;align-items:center;gap:11px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:11px 12px;min-height:66px;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.card:active{transform:translateY(0)}
.card-n{flex:none;width:40px;height:40px;display:grid;place-items:center;border-radius:11px;
  font-weight:800;font-size:.98rem}
.card-tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.card-fa{font-weight:700;font-size:.98rem;color:var(--ink);line-height:1.45;overflow-wrap:anywhere}
.card-en{font-family:var(--font-en);font-size:.73rem;color:var(--ink-faint);line-height:1.4;overflow-wrap:anywhere}
.card-go{flex:none;color:var(--ink-faint);font-size:1.4rem;line-height:1;font-weight:300}
.card.done .card-n::after{content:"";position:absolute;top:-5px;inset-inline-start:-5px;width:18px;height:18px;
  border-radius:50%;background:var(--success);border:2px solid var(--surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size:12px;background-repeat:no-repeat;background-position:center}
.card.done{border-color:color-mix(in srgb,var(--success) 35%,var(--line))}
.no-result{text-align:center;color:var(--ink-faint);padding:50px 0;display:none}

/* ---------------- READER ---------------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--brand));
  transform:scaleX(0);transform-origin:right center;will-change:transform}
.rbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:11px;
  background:var(--surface);border-bottom:1px solid var(--line);padding:10px 16px}
.rbar-back{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.9rem;color:var(--brand);
  background:var(--brand-tint);padding:8px 13px;border-radius:10px;flex:none;
  white-space:nowrap;transition:background .15s}
.rbar-back:hover{background:var(--line)}
.rbar-title{font-weight:800;font-size:.95rem;color:var(--ink);line-height:1.3;
  overflow-wrap:break-word;word-break:keep-all;min-width:0;flex:1 1 auto;text-align:center}
.rbar-count{font-size:.8rem;color:var(--ink-faint);white-space:nowrap}

.lx-hero{padding:24px 0 6px}
.lx-eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:700;color:var(--brand);
  background:var(--brand-tint);padding:6px 12px;border-radius:999px}
.eb{width:9px;height:9px;border-radius:50%;background:var(--brand)}
.lx-title{font-size:1.75rem;font-weight:800;line-height:1.32;margin:13px 0 3px;color:var(--ink)}
.lx-title-en{font-family:var(--font-en);color:var(--ink-faint);font-size:1.02rem}
.done-btn{display:inline-flex;align-items:center;gap:8px;margin-top:15px;padding:9px 16px;border-radius:11px;
  font-weight:700;font-size:.9rem;background:var(--surface);color:var(--brand);border:1.5px solid var(--line-strong);
  transition:all .15s}
.done-btn:hover{border-color:var(--brand)}
.done-btn .bx{width:18px;height:18px;border-radius:6px;border:2px solid currentColor;display:grid;place-items:center}
.done-btn .bx svg{opacity:0;transition:opacity .15s}
.done-btn.on{background:var(--success-solid);color:var(--on-success);border-color:var(--success-solid)}
.done-btn.on .bx{border-color:#fff}.done-btn.on .bx svg{opacity:1}

/* lesson content */
.lx{padding:8px 0 0}
.lx-p{color:var(--ink);line-height:1.95;margin:11px 0;font-size:1.02rem}
.lx-bullet{position:relative;color:var(--ink);line-height:1.9;margin:7px 0;padding-inline-start:18px}
.lx-bullet::before{content:"";position:absolute;inset-inline-start:2px;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.lx-sub{margin:22px 0 11px;font-size:1.05rem;font-weight:700;color:var(--brand-600);display:flex;align-items:center;gap:9px}
.lx-sub::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--accent);flex:none}
.lx-h{display:flex;align-items:center;gap:11px;margin:28px 0 13px;font-size:1.2rem;font-weight:800;color:var(--ink)}
.lx-h-n{flex:none;width:32px;height:32px;display:grid;place-items:center;background:var(--brand);color:var(--on-brand);border-radius:10px;font-size:.98rem;font-weight:800}
.lx-h-tick{flex:none;width:7px;height:22px;border-radius:3px;background:var(--accent)}
.lx-h-t{min-width:0}
.lx-note{display:flex;gap:11px;border-radius:13px;padding:12px 15px;margin:14px 0;background:var(--brand-tint);
  border:1px solid var(--line);border-inline-start:4px solid var(--brand)}
.lx-note-warn{background:var(--accent-tint);border-inline-start-color:var(--accent)}
.lx-note-tip{background:var(--amber-tint);border-inline-start-color:var(--amber)}
.lx-note-ic{flex:none;font-size:1.05rem;line-height:1.5}
.lx-note-tx{color:var(--ink);line-height:1.85}
.lx-formula{display:flex;align-items:flex-start;gap:11px;margin:13px 0;background:var(--brand-tint);
  border:1px solid var(--formula-border);border-radius:13px;padding:13px 15px}
.lx-formula-tag{flex:none;font-size:.72rem;font-weight:700;background:var(--brand);color:var(--on-brand);padding:4px 10px;border-radius:999px;margin-top:3px}
/* Inside a formula, color means «this part has a role» and nothing else.
   The teal this used to be sat ΔE2000 22 from the green of «فعل اصلی» —
   close enough that a part with no role looked like one that had. */
.lx-formula-tx{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-weight:700;color:var(--ink);font-size:1.02rem;line-height:1.55}
/* A formula part stays on one line as long as it fits. It used to be
   nowrap unconditionally, so on a narrow phone a long part ran past the
   card and the page clipped it. Now it wraps instead, and .fx-u keeps
   each alternative («have not», «is not») whole across the break. */
.fx-t{white-space:normal;unicode-bidi:isolate}
.fx-u{white-space:nowrap}
.fx-en{font-family:var(--font-en)}
.fx-op{color:var(--ink-faint);font-weight:800;opacity:.7}
.fx-q{font-family:var(--font-en);color:var(--ink-faint);font-weight:800}
.lx-exs{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.lx-ex{background:var(--surface);border:1px solid var(--line);border-radius:13px;
  border-inline-start:3px solid var(--accent);padding:13px 15px}
.lx-ex-en{font-family:var(--font-en);font-size:1.08rem;line-height:1.55;color:var(--ink)}
.lx-ex-fa{color:var(--ink-soft);font-size:.97rem;line-height:1.75;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.lx-ex-an{color:var(--brand-600);font-size:.88rem;margin-top:6px;font-weight:600}
.lx-entries{display:flex;flex-direction:column;gap:12px;margin:14px 0}
.lx-entry{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow-sm)}
.lx-entry-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:9px;padding-bottom:11px;margin-bottom:11px;border-bottom:1px solid var(--line-soft)}
.lx-entry-n{flex:none;font-size:.78rem;font-weight:800;color:#fff;background:var(--brand);width:24px;height:24px;border-radius:7px;display:grid;place-items:center;align-self:center}
.lx-entry-en{font-family:var(--font-en);font-size:1.22rem;font-weight:600;color:var(--brand);unicode-bidi:isolate}
.lx-entry-fa{color:var(--ink-soft);font-size:.95rem}
.lx-entry-exs{display:flex;flex-direction:column;gap:9px}
.lx-entry .lx-ex{border:0;background:var(--surface-2);border-inline-start:3px solid var(--accent-tint);border-radius:10px;padding:11px 13px}
.lx-entry .lx-ex-en{font-size:1.02rem}
.lx-vocab{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px;margin:14px 0}
.lx-word{display:flex;flex-direction:column;gap:2px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:11px;padding:9px 11px;position:relative}
.lx-word-n{position:absolute;inset-inline-end:9px;top:8px;font-size:.7rem;color:var(--ink-faint);font-weight:700}
.lx-word-en{font-family:var(--font-en);font-weight:600;font-size:1.04rem;color:var(--brand);unicode-bidi:isolate}
.lx-word-fa{color:var(--ink-soft);font-size:.9rem}
.lx-word-pr{color:var(--accent-600);font-size:.85rem;margin-top:1px}
.lx-letter{display:flex;gap:14px;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:13px;margin:12px 0;box-shadow:var(--shadow-sm)}
.lx-letter-g{flex:none;width:62px;display:flex;align-items:center;justify-content:center;gap:1px;font-family:var(--font-en);background:var(--brand-tint);border-radius:12px;color:var(--brand)}
.lx-letter-up{font-size:2.1rem;font-weight:600;line-height:1}
.lx-letter-lo{font-size:1.25rem;color:var(--letter-sub);line-height:1}
.lx-letter-w{flex:1;display:flex;flex-direction:column;gap:7px;justify-content:center;min-width:0}
.lx-lw{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px}
.lx-lw-en{font-family:var(--font-en);font-weight:600;color:var(--ink);unicode-bidi:isolate}
.lx-lw-fa{color:var(--ink-soft);font-size:.9rem}
.lx-lw-pr{color:var(--accent-600);font-size:.84rem;margin-inline-start:auto}
.lx-specimens{display:flex;flex-direction:column;gap:6px;margin:13px 0}
.lx-spec{font-family:var(--font-en);background:var(--surface-2);border:1px solid var(--line-soft);border-radius:9px;padding:8px 12px;color:var(--ink);font-size:.98rem;unicode-bidi:plaintext}
.lx-rule{height:1px;margin:26px auto;max-width:70%;position:relative;background:linear-gradient(90deg,transparent,var(--line) 30%,var(--line) 70%,transparent)}
.lx-rule::before{content:"";position:absolute;top:50%;left:50%;width:7px;height:7px;transform:translate(-50%,-50%) rotate(45deg);background:var(--accent-tint);border:1.5px solid var(--accent);border-radius:1px}
.lx-nav{display:flex;gap:10px;margin:32px 0 56px}
.lx-navcard{flex:1;display:flex;flex-direction:column;gap:4px;padding:13px 15px;border:1px solid var(--line);border-radius:14px;background:var(--surface);min-width:0;transition:border-color .15s,box-shadow .15s}
.lx-navcard:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.lx-navcard-l{font-size:.74rem;color:var(--ink-faint);display:flex;align-items:center;gap:5px}
.lx-navcard-t{font-weight:700;color:var(--ink);line-height:1.4;overflow-wrap:anywhere}
.lx-navcard.next{align-items:flex-start;text-align:left}
.lx-navcard.prev{align-items:flex-end;text-align:right}
.lx-navcard.ghost{visibility:hidden}

/* back to top */
.totop{position:fixed;inset-inline-end:16px;bottom:16px;width:46px;height:46px;border-radius:50%;
  background:var(--brand);color:#fff;display:grid;place-items:center;box-shadow:var(--shadow-lg);
  z-index:50;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .2s,transform .2s}
.totop.show{opacity:1;transform:translateY(0);pointer-events:auto}

/* ---------------- TABS ---------------- */
.tabs{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:5px;margin-top:22px}
.tab{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:10px;font-weight:700;font-size:.98rem;color:var(--ink-soft);transition:color .15s,background .15s,box-shadow .15s}
.tab svg{flex:none}
.tab.active{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-sm)}
[data-theme="dark"] .tab.active{background:var(--brand);color:#fff}
.tabpane[hidden]{display:none}

/* ---------------- VOCAB THEME CARDS ---------------- */
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:10px;margin-top:16px;align-items:stretch}
.tcard{position:relative;display:flex;align-items:center;gap:11px;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:11px 12px;min-height:66px;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.tcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.tcard:active{transform:translateY(0)}
.tcard-emoji{flex:none;width:44px;height:44px;border-radius:12px;background:var(--brand-tint);display:grid;place-items:center;font-size:1.4rem;line-height:1}
.tcard-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tcard-fa{font-weight:700;font-size:.98rem;color:var(--ink);line-height:1.45;overflow-wrap:anywhere}
.tcard-en{font-family:var(--font-en);font-size:.72rem;color:var(--ink-faint);line-height:1.4;overflow-wrap:anywhere}
.tcard-meta{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px;white-space:nowrap}
.tcard-count{font-size:.7rem;color:var(--ink-faint);white-space:nowrap}
.tcard-go{color:var(--ink-faint);font-size:1.3rem;line-height:1;font-weight:300}

/* ---------------- VOCAB WORD CARDS ---------------- */
.vgrid-words{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px;margin:12px 0}
.vw{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:11px 13px;display:flex;flex-direction:column;gap:6px}
.vw-row{display:flex;align-items:center;gap:8px}
.vw-en{font-family:var(--font-en);font-weight:600;font-size:1.08rem;color:var(--brand);unicode-bidi:isolate;line-height:1.3;flex:1;min-width:0;word-break:break-word}
.vw-pr{font-size:.8rem;color:var(--pron);white-space:nowrap;flex:none}
.vw-fa{color:var(--ink-soft);font-size:.95rem;line-height:1.5;flex:1;min-width:0;word-break:break-word}
.vw-bottom{display:flex;align-items:center;gap:8px;padding-top:7px;border-top:1px dashed var(--line)}
/* vocabulary cards open like the story sentences: tap to reveal. The speaker
   keeps its place at the end of the bottom row while the meaning is hidden. */
.vw.tk-v{cursor:pointer}
.vw.tk-v .vw-bottom{justify-content:flex-end}
.vw.tk-v.open{background:var(--surface-2)}

/* ---------------- VOCAB SEARCH RESULTS ---------------- */
.vresults{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.vres-h{font-size:.85rem;font-weight:700;color:var(--ink-faint);margin:12px 2px 2px}
.vrow{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:11px 13px;transition:border-color .15s,box-shadow .15s}
.vrow:hover{border-color:var(--line-strong);box-shadow:var(--shadow-sm)}
.vrow-en{font-family:var(--font-en);font-weight:600;color:var(--brand);font-size:1.04rem;flex:none;unicode-bidi:isolate}
.vrow-pr{font-size:.78rem;color:var(--pron);flex:none;white-space:nowrap}
.vrow-fa{color:var(--ink);font-size:.95rem;flex:1;min-width:0;line-height:1.5;overflow-wrap:anywhere;text-align:start}
.vrow-tag{font-size:.72rem;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line-soft);border-radius:999px;
  padding:4px 10px;flex:none;white-space:nowrap;max-width:42%;overflow:hidden;text-overflow:ellipsis}
.vmore{text-align:center;color:var(--ink-faint);font-size:.85rem;padding:12px}
.say-btn{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;cursor:pointer;
  background:var(--brand-tint);color:var(--brand);transition:background .15s,transform .1s;-webkit-tap-highlight-color:transparent;user-select:none}
.say-btn:hover{background:var(--line)}
.say-btn:active{transform:scale(.9)}
.say-btn svg{width:16px;height:16px;pointer-events:none}
.say-btn.speaking{background:var(--brand);color:#fff}
.say-btn.speaking svg{animation:sayPulse .9s ease-in-out infinite}
@keyframes sayPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.tts-off .say-btn{display:none}

@media (max-width:480px){
  .hero-title{font-size:1.7rem}.specimen-en{font-size:1.15rem}.lx-title{font-size:1.5rem}
  .cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));gap:9px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}html{scroll-behavior:auto}
}

.grp[data-g="alpha"] .card-n{background:var(--g-alpha-bg);color:var(--g-alpha)}.grp[data-g="alpha"] .grp-dot{background:var(--g-alpha)}.eb.alpha{background:var(--g-alpha)}
.grp[data-g="past"] .card-n{background:var(--g-past-bg);color:var(--g-past)}.grp[data-g="past"] .grp-dot{background:var(--g-past)}.eb.past{background:var(--g-past)}
.grp[data-g="present"] .card-n{background:var(--g-present-bg);color:var(--g-present)}.grp[data-g="present"] .grp-dot{background:var(--g-present)}.eb.present{background:var(--g-present)}
.grp[data-g="future"] .card-n{background:var(--g-future-bg);color:var(--g-future)}.grp[data-g="future"] .grp-dot{background:var(--g-future)}.eb.future{background:var(--g-future)}
.grp[data-g="basic"] .card-n{background:var(--g-basic-bg);color:var(--g-basic)}.grp[data-g="basic"] .grp-dot{background:var(--g-basic)}.eb.basic{background:var(--g-basic)}
.grp[data-g="adj"] .card-n{background:var(--g-adj-bg);color:var(--g-adj)}.grp[data-g="adj"] .grp-dot{background:var(--g-adj)}.eb.adj{background:var(--g-adj)}
.grp[data-g="adv"] .card-n{background:var(--g-adv-bg);color:var(--g-adv)}.grp[data-g="adv"] .grp-dot{background:var(--g-adv)}.eb.adv{background:var(--g-adv)}
.grp[data-g="conn"] .card-n{background:var(--g-conn-bg);color:var(--g-conn)}.grp[data-g="conn"] .grp-dot{background:var(--g-conn)}.eb.conn{background:var(--g-conn)}

/* ============================================================
   VISUAL LAYER v2  ·  elevated / 3D / vivid  —  performance-first
   Depth from: edge highlight + gradient + ONE tiny shadow.
   Soft/blurred shadows & glow only on a FEW elements.
   Motion = transform only (never animate shadow). Smooth on mobile.
   ============================================================ */

/* refined LIGHT palette + LIGHT depth tokens */
:root{
  --paper:#EDF1F5;
  --grad-a:#FFFFFF;--grad-b:#F2F6F9;
  --edge-hi:rgba(255,255,255,.95);--edge-bd:#E2E8EF;--edge-bd-hi:#C7D6E2;
  --elev-1:0 1px 2px rgba(20,40,55,.06),0 2px 6px -2px rgba(20,40,55,.12);
  --elev-2:0 2px 6px -1px rgba(20,40,55,.10),0 8px 18px -8px rgba(20,40,55,.18);
  --tiny:0 1px 2px rgba(20,40,55,.10);
  --hi:inset 0 1px 0 var(--edge-hi);
  --glow-brand:rgba(14,124,132,.30);--glow-accent:rgba(255,107,94,.32);--ring:rgba(14,124,132,.22);
  --brand:#0D747C;--brand-600:#0B5A60;--brand-tint:#E2F1F1;
  --grad-brand-a:#108188;--grad-brand-b:#0C6F76;
  --grad-accent-a:#FF7E72;--grad-accent-b:#F0584A;
}
/* deep vivid DARK palette (default) */
[data-theme="dark"]{
  --paper:#0B1117;
  --surface:#161F27;--surface-2:#1C2731;
  --ink:#EAF2F4;--ink-soft:#A4B6BE;--ink-faint:#87989F;
  --line:#28333C;--line-soft:#202B33;--line-strong:#3A4751;
  --brand:#38D4DC;--brand-600:#66E4EA;--brand-tint:#123230;
  --accent:#FF8273;--accent-600:#FF9E91;--accent-tint:#2F1D19;
  --amber:#E6B056;--amber-tint:#2C2214;--success:#37C98C;
  --hero-from:#0F5E66;--hero-to:#08252B;--on-hero:#D2ECEC;--on-hero-soft:#94BABA;
  --formula-border:#21413F;--letter-sub:#649FA4;
  --on-brand:#062024;
  /* dark tints for the lesson-group badges. Without these the dark theme
     inherited the LIGHT tints from :root and painted bright group colors
     on near-white chips (contrast as low as 1.53). */
  --g-alpha-bg:#0A2527;--g-past-bg:#17222D;--g-present-bg:#12281E;--g-future-bg:#221F2E;
  --g-basic-bg:#202326;--g-adj-bg:#321B18;--g-adv-bg:#2E2512;--g-conn-bg:#2D1C26;
  --grad-a:#1F2D37;--grad-b:#151F27;
  --edge-hi:rgba(255,255,255,.06);--edge-bd:rgba(255,255,255,.08);--edge-bd-hi:rgba(56,212,220,.38);
  --elev-1:0 1px 2px rgba(0,0,0,.35),0 3px 8px -3px rgba(0,0,0,.45);
  --elev-2:0 3px 8px -2px rgba(0,0,0,.4),0 10px 22px -9px rgba(0,0,0,.55);
  --tiny:0 1px 2px rgba(0,0,0,.4);
  --hi:inset 0 1px 0 var(--edge-hi);
  --glow-brand:rgba(56,212,220,.40);--glow-accent:rgba(255,130,115,.40);--ring:rgba(56,212,220,.30);
  --grad-brand-a:#3EDCE4;--grad-brand-b:#1FAEB6;
  --grad-accent-a:#FF9183;--grad-accent-b:#F26354;
}

body{background:var(--paper)}
[data-theme="dark"] .hero-title,[data-theme="dark"] .lx-title{text-shadow:0 1px 1px rgba(0,0,0,.25)}

/* ---- FOCAL cards (few per screen): gradient + edge highlight + light shadow ---- */
.card,.tcard,.lx-entry,.lx-ex,.lx-note,.lx-formula,.vrow,.lx-navcard,.search{
  background-image:linear-gradient(158deg,var(--grad-a),var(--grad-b));
  border:1px solid var(--edge-bd);
  box-shadow:var(--hi),var(--elev-1);
}
.prog-card,.specimen{background-image:linear-gradient(158deg,var(--grad-a),var(--grad-b));border:1px solid var(--edge-bd);box-shadow:var(--hi),var(--elev-2)}

/* interactions: transform + border only — shadow held CONSTANT (no repaint, no jank) */
.card,.tcard,.vrow,.lx-navcard{transition:transform .15s ease,border-color .15s ease}
.card:hover,.tcard:hover,.vrow:hover,.lx-navcard:hover{transform:translateY(-3px);box-shadow:var(--hi),var(--elev-1);border-color:var(--edge-bd-hi)}
.card:active,.tcard:active,.vrow:active{transform:translateY(-1px)}

/* ---- MANY tiny cards: solid + edge highlight + 1px shadow (near-free to paint) ---- */
.vw,.lx-word,.lx-spec{
  background-image:none;background:var(--surface);
  border:1px solid var(--edge-bd);box-shadow:var(--hi),var(--tiny);
  transition:transform .14s ease,border-color .14s ease;
}
.vw:hover,.lx-word:hover,.lx-spec:hover{transform:translateY(-2px);box-shadow:var(--hi),var(--tiny);border-color:var(--edge-bd-hi)}

/* nested example cards stay flat */
.lx-entry .lx-ex{background-image:none;background:var(--surface-2);box-shadow:none;border:1px solid var(--line-soft)}

/* ---- hero: ambient glows (single element) ---- */
.hero{background:
  radial-gradient(130% 100% at 50% -25%,rgba(40,150,158,.5),transparent 58%),
  linear-gradient(165deg,var(--hero-from) 0%,var(--hero-to) 72%)}
.hero::before{width:380px;height:380px;background:radial-gradient(circle,rgba(102,228,234,.18),transparent 70%)}
.hero::after{width:300px;height:300px;background:radial-gradient(circle,rgba(255,130,115,.20),transparent 70%)}

/* ---- search: remove native nested box (FIX) + tactile focus (instant ring) ---- */
.search input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent}
.search input::-webkit-search-decoration,
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-results-button,
.search input::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none;display:none}
.search:focus-within{border-color:var(--brand);box-shadow:var(--hi),var(--elev-1),0 0 0 3px var(--ring)}

/* ---- badges: vivid via gradient, depth via free edge highlight ---- */
.card-n,.tcard-emoji{box-shadow:var(--hi)}
.lx-h-n,.lx-entry-n{background-image:linear-gradient(180deg,var(--grad-brand-a),var(--grad-brand-b));box-shadow:var(--hi)}
.lx-formula-tag{background-image:linear-gradient(180deg,var(--grad-brand-a),var(--grad-brand-b))}
.hero-eyebrow,.lx-eyebrow,.grp-c{box-shadow:var(--hi)}

/* ---- buttons (few per screen): gradient + small glow; no shadow animation ---- */
.theme-btn{box-shadow:var(--hi)}
.rbar .theme-btn,.rbar-back{background-image:linear-gradient(180deg,var(--grad-a),var(--grad-b));border:1px solid var(--edge-bd);box-shadow:var(--hi),var(--elev-1)}
.rbar-back{transition:transform .15s ease,border-color .15s ease}
.rbar-back:hover{transform:translateY(-1px);border-color:var(--edge-bd-hi)}
.prog-cta{background-image:linear-gradient(180deg,var(--grad-brand-a),var(--grad-brand-b));border:1px solid rgba(255,255,255,.14);box-shadow:var(--hi),0 4px 12px -4px var(--glow-brand);transition:transform .15s ease}
.prog-cta:hover{transform:translateY(-2px)}
.done-btn{background-image:linear-gradient(180deg,var(--grad-a),var(--grad-b));box-shadow:var(--hi),var(--elev-1);transition:transform .15s ease,border-color .15s ease}
.done-btn.on{background-image:linear-gradient(180deg,#2FD699,#1FA877);border-color:rgba(255,255,255,.16);box-shadow:var(--hi),0 4px 12px -4px rgba(47,200,140,.42);color:#fff}
.totop{background-image:linear-gradient(180deg,var(--grad-brand-a),var(--grad-brand-b));border:1px solid rgba(255,255,255,.16);box-shadow:var(--hi),0 6px 16px -5px var(--glow-brand),0 3px 8px rgba(0,0,0,.3)}
.totop:hover{transform:translateY(-2px)}

/* ---- speaker: MANY per screen -> flat tinted chip (cheap). Only the ACTIVE one glows. ---- */
.say-btn{background:var(--brand-tint);color:var(--brand);border:1px solid var(--edge-bd);box-shadow:none;transition:transform .12s ease,background .12s ease}
.say-btn:hover{background:var(--line)}
.say-btn:active{transform:scale(.9)}
.say-btn.speaking{background-image:linear-gradient(180deg,var(--grad-accent-a),var(--grad-accent-b));color:#fff;border-color:rgba(255,255,255,.18);box-shadow:0 0 0 3px var(--ring),0 4px 14px -3px var(--glow-accent)}
.say-btn.speaking svg{animation:sayPulse .85s ease-in-out infinite}

/* ---- tabs: raised segmented control ---- */
.tabs{box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}
[data-theme="dark"] .tabs{box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.tab{transition:color .15s ease,background .15s ease}
.tab.active{background-image:linear-gradient(180deg,var(--grad-a),var(--grad-b));box-shadow:var(--hi),var(--elev-1)}
[data-theme="dark"] .tab.active{background-image:linear-gradient(180deg,var(--grad-brand-a),var(--grad-brand-b));color:var(--on-brand)}

/* ---- sticky reader bar (single element): subtle float ---- */
.rbar{background-image:linear-gradient(180deg,var(--grad-a),var(--grad-b));box-shadow:0 4px 14px -10px rgba(0,0,0,.45)}

/* ---- progress (1-2 elements): glowing fill is fine ---- */
.prog-track{box-shadow:inset 0 1px 2px rgba(0,0,0,.16)}
.prog-track i{box-shadow:0 0 10px var(--glow-brand)}
.progress i{box-shadow:0 0 8px var(--glow-brand)}

/* ---- example "bridge": vivid accent spine (cheap) ---- */
.lx-ex{border-inline-start:3px solid var(--accent)}
.specimen{border-inline-start:4px solid var(--accent)}

/* focus ring: cheap outline (no shadow repaint) */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

@media (prefers-reduced-motion:reduce){.say-btn.speaking svg{animation:none!important}}

/* ===================== PRACTICE & FLASHCARDS UI =====================
   Few elements on screen at a time -> richer depth is safe here.
   Motion = transform/opacity only. No blur / backdrop-filter.
   ==================================================================== */

/* ---- home entry cards ---- */
.tools{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 20px}
.tool-card{display:flex;align-items:center;gap:11px;padding:14px;border-radius:18px;color:var(--ink);
  background-image:linear-gradient(158deg,var(--grad-a),var(--grad-b));border:1px solid var(--edge-bd);
  box-shadow:var(--hi),var(--elev-1);transition:transform .15s ease,border-color .15s ease}
.tool-card:hover{transform:translateY(-3px);border-color:var(--edge-bd-hi)}
.tool-card:active{transform:translateY(-1px)}
.tc-ic{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background-image:linear-gradient(180deg,var(--grad-brand-a),var(--grad-brand-b));box-shadow:var(--hi)}
.tc-cards .tc-ic{background-image:linear-gradient(180deg,var(--grad-accent-a),var(--grad-accent-b))}
.tc-tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.tc-tx b{font-size:1rem;font-weight:700}
.tc-tx span{font-size:.78rem;color:var(--ink-soft);line-height:1.45;overflow-wrap:anywhere}
@media (max-width:440px){.tools{grid-template-columns:1fr}.tc-tx span{white-space:normal}}

/* ---- setup forms ---- */
.setup{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.sp-note{margin:6px 0 0;text-align:center;font-size:.8rem;color:var(--ink-faint)}
.rs-help{font-size:.85rem;color:var(--amber);margin-top:-2px}
/* the fields grouped inside a quiz-kind box keep the same spacing as the rest */
#vocabCfg,#grammarCfg,#hearCfg{display:flex;flex-direction:column;gap:16px}
.fld{display:flex;flex-direction:column;gap:8px;font-weight:700;color:var(--ink);font-size:.92rem}
.sel{position:relative;display:block}
.sel::after{content:'▾';position:absolute;inset-inline-end:16px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink-soft);font-size:.8rem}
.setup select,.tts-panel select{width:100%;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;font-size:1rem;font-weight:600;text-align:right;
  color:var(--ink);background-image:linear-gradient(158deg,var(--grad-a),var(--grad-b));border:1px solid var(--edge-bd);
  border-radius:14px;padding-block:13px;padding-inline-start:16px;padding-inline-end:42px;box-shadow:var(--hi),var(--tiny)}
.seg{display:flex;gap:6px;background:var(--surface-2);border:1px solid var(--edge-bd);border-radius:15px;padding:5px}
/* «همه» gets a row of its own, the full width of the numbers above it */
.seg.qz-count{flex-wrap:wrap}
.seg.qz-count .qz-all{flex:1 0 100%;margin-top:2px}
.seg button{flex:1;border:0;background:transparent;color:var(--ink-soft);font-family:inherit;font-weight:700;font-size:.9rem;
  padding:11px 8px;border-radius:11px;transition:transform .12s ease}
.seg button.on{background-image:linear-gradient(180deg,var(--grad-brand-a),var(--grad-brand-b));color:var(--on-brand);box-shadow:var(--hi),var(--tiny)}
.seg button:active{transform:scale(.97)}
.seg.sm button{font-size:.85rem;padding:10px 6px}
.btn-primary{display:block;width:100%;text-align:center;border:1px solid rgba(255,255,255,.14);border-radius:15px;padding:15px;
  font-family:inherit;font-weight:800;font-size:1.02rem;color:var(--on-brand);background-image:linear-gradient(180deg,var(--grad-brand-a),var(--grad-brand-b));
  box-shadow:var(--hi),0 6px 16px -5px var(--glow-brand);transition:transform .14s ease;margin-top:4px}
.btn-primary:active{transform:scale(.99) translateY(1px)}
.btn-ghost{display:block;width:100%;text-align:center;border:1px solid var(--edge-bd);border-radius:15px;padding:13px;
  font-family:inherit;font-weight:700;font-size:.95rem;color:var(--ink);background:var(--surface-2);margin-top:10px;transition:transform .14s ease}
.btn-ghost:active{transform:scale(.99)}

/* ---- quiz question ---- */
.q-wrap{max-width:640px}
.q-top{display:flex;justify-content:space-between;align-items:center;font-size:.85rem;font-weight:700;color:var(--ink-soft);margin-bottom:8px}
.q-bar{height:7px;border-radius:99px;background:var(--surface-2);overflow:hidden;box-shadow:inset 0 1px 2px rgba(0,0,0,.16);margin-bottom:18px}
.q-bar i{display:block;height:100%;border-radius:99px;background-image:linear-gradient(90deg,var(--grad-brand-b),var(--grad-brand-a));
  box-shadow:0 0 10px var(--glow-brand);transition:width .3s ease}
.q-card{background-image:linear-gradient(158deg,var(--grad-a),var(--grad-b));border:1px solid var(--edge-bd);
  box-shadow:var(--hi),var(--elev-2);border-radius:22px;padding:22px}
.q-prompt{font-size:.95rem;font-weight:700;color:var(--ink-soft);margin-bottom:14px;text-align:center}
.q-word{text-align:center;font-weight:800;margin-bottom:6px}
.q-word.en{font-family:'Lora',Georgia,serif;font-size:2rem;color:var(--brand-600);display:flex;align-items:center;justify-content:center;gap:10px}
.q-word.fa{font-size:1.7rem;color:var(--ink)}
.q-pr{text-align:center;color:var(--pron);font-size:.95rem;margin-bottom:4px}
.q-sent{font-family:'Lora',Georgia,serif;font-size:1.3rem;text-align:center;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--edge-bd);border-radius:14px;padding:16px;margin-bottom:6px;line-height:1.9}
.q-sent u{color:var(--accent-ink);text-decoration:none;border-bottom:2px dashed var(--accent-ink);padding:0 14px}
.q-listen{display:flex;justify-content:center;padding:10px 0 4px}
.q-opts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.q-opt{display:flex;align-items:center;gap:11px;text-align:start;border:1px solid var(--edge-bd);border-radius:14px;padding:14px;
  font-family:inherit;font-size:1rem;font-weight:600;color:var(--ink);background:var(--surface);box-shadow:var(--hi),var(--tiny);
  transition:transform .12s ease,border-color .12s ease}
.q-opt[dir=ltr]{font-family:'Lora',Georgia,serif}
.q-opt:not(.done):active{transform:scale(.99)}
.q-opt:not(.done):hover{border-color:var(--edge-bd-hi)}
.q-key{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:.85rem;font-weight:800;
  color:var(--brand);background:var(--brand-tint);border:1px solid var(--edge-bd)}
.q-opt-t{flex:1;min-width:0}
.q-opt.correct{border-color:#2FBF87;background:rgba(47,191,135,.14)}
.q-opt.correct .q-key{background:#2FBF87;color:#fff;border-color:transparent}
.q-opt.wrong{border-color:#E8635A;background:rgba(232,99,90,.13)}
.q-opt.wrong .q-key{background:#E8635A;color:#fff;border-color:transparent}
.q-foot{margin-top:4px}
.q-fb{font-weight:800;text-align:center;margin:16px 0 8px;font-size:1.05rem}
.q-fb.ok{color:#2FBF87}
.q-fb.no{color:#E8635A}
.q-exp{background:var(--brand-tint);border:1px solid var(--edge-bd);border-radius:12px;padding:12px 14px;color:var(--ink);
  font-size:.92rem;line-height:1.95;margin-bottom:10px;text-align:right}
.q-answer{background:var(--surface-2);border:1px solid var(--edge-bd);border-radius:13px;padding:12px 14px;margin-bottom:10px}
.q-answer-en{font-family:'Lora',Georgia,serif;font-size:1.16rem;font-weight:700;color:var(--brand-600);line-height:1.55;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.q-answer-en>span{min-width:0}
.q-answer-pr{color:var(--pron);font-size:.92rem;line-height:1.8;margin-top:7px;padding-top:7px;
  border-top:1px dashed var(--line);text-align:right;overflow-wrap:anywhere}
.q-answer-fa{color:var(--ink);font-size:1rem;margin-top:7px;padding-top:7px;border-top:1px dashed var(--line);text-align:right}
/* when a pronunciation is there it carries the divider, so the meaning
   does not draw a second one right under it */
.q-answer-pr+.q-answer-fa{border-top:0;padding-top:0;margin-top:5px}
.q-pair{text-align:center;color:var(--ink-soft);font-size:.98rem;margin-bottom:12px}
.q-pair span[lang=en]{font-family:'Lora',Georgia,serif;color:var(--brand-600);font-weight:700}

/* ---- result ---- */
.q-card.result{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.rs-ring{--p:0;width:128px;height:128px;border-radius:50%;display:grid;place-items:center;margin:6px auto 8px;
  background:conic-gradient(var(--brand) calc(var(--p)*1%),var(--line) 0)}
.rs-ring span{width:98px;height:98px;border-radius:50%;display:grid;place-items:center;background:var(--surface);
  font-size:1.5rem;font-weight:800;color:var(--ink)}
.rs-line{font-size:1.15rem;font-weight:800;color:var(--ink)}
.rs-msg{color:var(--ink-soft);font-size:.98rem;margin-bottom:4px}
.rs-best{color:var(--ink-faint);font-size:.88rem;margin-bottom:8px}
.rs-emoji{font-size:3rem;margin:4px 0}

/* ---- flashcards (3D flip, single element = smooth) ---- */
.fc{perspective:1200px;margin:6px 0 18px;cursor:default}
.fc-in{position:relative;width:100%;min-height:230px;transition:transform .45s cubic-bezier(.4,.15,.2,1);transform-style:preserve-3d}
.fc.flip .fc-in{transform:rotateY(180deg)}
.fc-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;padding:24px;border-radius:22px;
  background-image:linear-gradient(158deg,var(--grad-a),var(--grad-b));border:1px solid var(--edge-bd);box-shadow:var(--hi),var(--elev-2)}
.fc-b{transform:rotateY(180deg)}
.fc-word.en{font-family:'Lora',Georgia,serif;font-size:2.1rem;color:var(--brand-600);display:flex;align-items:center;gap:11px;font-weight:800}
.fc-word.fa{font-size:1.8rem;color:var(--ink);font-weight:800}
.fc-hint{color:var(--ink-faint);font-size:.85rem}
.fc-pr{color:var(--pron);font-size:1rem}
.fc-answer{font-size:1.5rem;color:var(--ink);font-weight:800;text-align:center;margin-top:2px;padding-top:11px;border-top:1px dashed var(--line);width:100%}
.fc-theme{margin-top:4px;font-size:.82rem;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--edge-bd);border-radius:99px;padding:5px 12px}
.fc-actions{min-height:54px}
.fc-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grade{border:1px solid rgba(255,255,255,.14);border-radius:15px;padding:15px;font-family:inherit;font-weight:800;font-size:1rem;color:#fff;transition:transform .12s ease}
.grade:active{transform:scale(.98)}
.grade.yes{background-image:linear-gradient(180deg,#2FD699,#1FA877);box-shadow:var(--hi),0 5px 14px -4px rgba(47,200,140,.45)}
.grade.no{background-image:linear-gradient(180deg,var(--grad-accent-a),var(--grad-accent-b));box-shadow:var(--hi),0 5px 14px -4px var(--glow-accent)}

/* ---- stats / box bars ---- */
.fc-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.fcst{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--surface-2);border:1px solid var(--edge-bd);
  border-radius:14px;padding:13px 6px;box-shadow:var(--hi)}
.fcst b{font-size:1.5rem;font-weight:800;color:var(--brand-600)}
.fcst span{font-size:.74rem;color:var(--ink-soft)}
.fc-help{color:var(--ink-soft);font-size:.82rem;display:flex;flex-wrap:wrap;gap:7px;align-items:center;justify-content:center;margin-top:6px}
.boxbar{display:inline-flex;flex-direction:column;align-items:center;gap:1px;background:var(--surface);border:1px solid var(--edge-bd);border-radius:10px;padding:6px 9px;min-width:50px}
.boxbar i{font-style:normal;font-weight:800;color:var(--ink);font-size:.95rem}
.boxbar em{font-style:normal;font-size:.66rem;color:var(--ink-faint)}
.boxbar.b5{border-color:var(--edge-bd-hi)}

/* ---- larger speaker for quiz/cards ---- */
.say-lg{width:48px;height:48px;border-radius:14px}
.say-lg svg{width:25px;height:25px}

/* ===== lesson audio: speaker beside every English word / example / letter ===== */
.say-btn.sm{width:26px;height:26px;border-radius:8px}
.say-btn.sm svg{width:14px;height:14px}
.lx-ex-top{display:flex;align-items:flex-start;gap:9px}
.lx-ex-top .lx-ex-en{flex:1;min-width:0}
.lx-ex-top .say-btn{flex:none;margin-top:1px}
.lx-word-top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.lx-word-top .lx-word-en{min-width:0}
.lx-word-top .say-btn{flex:none}
.lx-entry-head .say-btn{flex:none;align-self:center}
.lx-lw .say-btn{flex:none;align-self:center}
.lx-letter-g{flex-direction:column;gap:6px;padding-block:8px}
.lx-letter-gg{display:flex;align-items:center;gap:1px}
.lx-spec-row{display:flex;align-items:center;gap:8px}
.lx-spec-row .lx-spec{flex:1;min-width:0}
.lx-spec-row .say-btn{flex:none}

/* ===================== CONVERSATION + IDIOMS/VERBS UI =====================
   Many cards per page -> near-free styling (solid bg + edge highlight + 1px shadow).
   ========================================================================= */

/* entry-card icon tints (4-card grid already defined in features.css) */
.tc-talk .tc-ic{background-image:linear-gradient(180deg,#46C7E6,#2E8FC8)}
.tc-phrases .tc-ic{background-image:linear-gradient(180deg,#F2A65A,#E07B39)}

/* conversation */
.tsec{margin-top:22px}
.tsec:first-of-type{margin-top:6px}
.pgrid{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.pcard{background:var(--surface);border:1px solid var(--edge-bd);box-shadow:var(--hi),var(--tiny);border-radius:15px;padding:13px 15px}
.pcard-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pcard-en{font-family:'Lora',Georgia,serif;font-size:1.18rem;font-weight:600;color:var(--brand-600);line-height:1.5;flex:1;min-width:0}
.pcard-pr{color:var(--pron);font-size:.9rem;margin-top:5px}
.pcard-fa{color:var(--ink);font-size:1rem;margin-top:4px}
/* conversation sentences open like the story sentences: tap to reveal */
.fc-keys{display:none}
@media (hover:hover) and (pointer:fine){.fc-keys{display:block}}
.fc{cursor:pointer}
.pcard.tk-s{cursor:pointer;transition:background .12s ease,border-color .12s ease}
.pcard.tk-s:hover,.pcard.tk-s.open{background:var(--surface-2)}

/* sub-tabs on the phrases page */
.pp-seg{margin-top:4px}
.pp-seg button{font-size:.85rem;padding:11px 6px}
.pp-pane{margin-top:4px}

/* irregular verbs — each form chip is a tappable audio button */
.ilist{display:flex;flex-direction:column;gap:10px}
.irow{background:var(--surface);border:1px solid var(--edge-bd);box-shadow:var(--hi),var(--tiny);border-radius:15px;padding:13px}
.iforms{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.iform{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--surface-2);border:1px solid var(--edge-bd);
  border-radius:11px;padding:9px 5px;width:100%;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color .15s ease,transform .1s ease}
.iform:active{transform:scale(.96)}
.iform.speaking{border-color:var(--brand);background:var(--brand-tint)}
.iform.speaking b{color:var(--brand)}
.iform em{font-style:normal;font-size:.66rem;color:var(--ink-faint)}
.iform b{font-family:'Lora',Georgia,serif;font-size:1.04rem;font-weight:700;color:var(--brand-600);text-align:center;line-height:1.3}
.irow-fa{color:var(--ink);font-size:1.04rem;font-weight:700;text-align:center;margin-top:11px}

/* phrasal verbs & idioms cards — split into two parts by a dashed divider */
.cardlist{display:flex;flex-direction:column;gap:10px}
.xcard{background:var(--surface);border:1px solid var(--edge-bd);box-shadow:var(--hi),var(--tiny);border-radius:15px;padding:14px 15px}
.x-en{font-family:'Lora',Georgia,serif;font-size:1.2rem;font-weight:700;color:var(--brand-600);flex:1;min-width:0}
.x-fa{color:var(--ink);font-size:1.02rem;font-weight:600;margin-top:7px}
.x-more{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;padding:9px 12px;background:var(--surface-2);border:1px solid var(--edge-bd);border-radius:11px;color:var(--brand-600);font-family:inherit;font-size:.92rem;font-weight:700;cursor:pointer;transition:border-color .15s}
.x-more:hover{border-color:var(--brand-600)}
.x-chev{display:inline-block;font-size:.8rem;line-height:1;transition:transform .18s}
.x-more.open .x-chev{transform:rotate(180deg)}
.x-exs{display:flex;flex-direction:column;margin-top:12px;border-top:1px dashed var(--line);padding-top:13px}
.x-exs[hidden]{display:none}
.x-ex-item{display:flex;gap:10px;align-items:flex-start}
.x-ex-item + .x-ex-item{border-top:1px dashed var(--line);margin-top:13px;padding-top:13px}
.x-lv{flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--brand-tint);color:var(--brand-600);font-size:.78rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:2px}
.x-ex-body{flex:1;min-width:0}
.x-ex-row{display:flex;align-items:center;gap:8px}
.x-ex{font-family:var(--font-en-read);font-size:1.02rem;color:var(--ink);font-style:normal;font-weight:500;line-height:1.65;letter-spacing:.006em;flex:1;min-width:0;text-rendering:optimizeLegibility;font-variant-ligatures:none;-webkit-font-smoothing:antialiased}
/* the persian pronunciation sits between the english and its meaning, in
   one color of its own everywhere in the app so it is never mistaken
   for the meaning */
.lx-ex-pr{color:var(--pron);font-size:.92rem;line-height:1.8;margin-top:8px;
  padding-top:8px;border-top:1px dashed var(--line);overflow-wrap:anywhere}
.x-ex-pr{color:var(--pron);font-size:.86rem;line-height:1.8;margin-top:5px;overflow-wrap:anywhere}
.x-ex-fa{color:var(--ink-soft);font-size:.93rem;margin-top:6px;line-height:1.75}

/* grammar vocab chip -> tappable, reveals a full-width examples panel */
.lx-word.gx-has{cursor:pointer;padding-bottom:23px}
.gx-chev{position:absolute;inset-inline-end:10px;bottom:7px;font-size:.72rem;line-height:1;color:var(--brand);transition:transform .18s}
.lx-word.gx-open .gx-chev{transform:rotate(180deg)}
.gx-exs{grid-column:1/-1;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--edge-bd);border-radius:12px;padding:12px 14px;margin:2px 0 5px}
.gx-exs[hidden]{display:none}

/* ===== accessibility: touch targets, skip link, screen-reader text =====
   Hit areas are enlarged with a transparent ::after overlay instead of
   changing width/height, so nothing moves on screen. Expansion is sized
   per control to stay smaller than the real gap to its neighbor, so no
   button can ever steal a tap from the one next to it. */
.say-btn{position:relative}
.say-btn::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:44px;height:44px}
/* .sm sits in dense grids (measured min gap 9px) -> expand to 34px only */
.say-btn.sm::after{width:34px;height:34px}
.theme-btn{position:relative}
.theme-btn::after{content:"";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);width:44px;height:44px}
.rbar-back,.done-btn,.x-more{position:relative}
.rbar-back::after,.done-btn::after,.x-more::after{content:"";position:absolute;
  top:50%;left:0;right:0;transform:translateY(-50%);height:44px}

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

.skiplink{position:fixed;top:-100px;inset-inline-start:12px;z-index:100;
  padding:12px 18px;min-height:44px;border:0;border-radius:11px;
  background:var(--brand-tint);color:var(--brand-600);
  border:2px solid var(--brand-600);font-family:inherit;font-weight:800;
  font-size:.95rem;cursor:pointer;box-shadow:var(--shadow-lg);
  transition:top .18s ease}
.skiplink:focus{top:calc(12px + env(safe-area-inset-top,0px))}
#app:focus{outline:none}

/* Very narrow phones (<=359px): the sticky bar holds a back button, the
   theme toggle and a lesson counter, which leaves the title about 57px.
   One point smaller lets even the longest title ("گذشته کامل استمراری")
   wrap on its space instead of being cut or split mid-word. */
@media (max-width:359px){
  .rbar-title{font-size:.85rem}
  .rbar-back{padding:8px 10px;font-size:.85rem}
}

.noscript-msg,.crash-msg{width:calc(100% - 32px);max-width:520px;margin:14vh auto;padding:24px 22px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  text-align:center;color:var(--ink);line-height:1.9}
.noscript-msg strong,.crash-msg strong{display:block;font-size:1.15rem;margin-bottom:10px;color:var(--brand-600)}
.noscript-msg p,.crash-msg p{color:var(--ink-soft);font-size:.95rem}
.crash-msg button{margin-top:16px;min-height:44px;padding:11px 22px;border:0;border-radius:12px;
  background:var(--brand);color:var(--on-brand);font-family:inherit;font-weight:800;
  font-size:1rem;cursor:pointer}

/* ===== performance: skip layout/paint for off-screen list items =====
   Measured on a 4x-throttled CPU, rendering the adjectives lesson cost
   444ms, of which only 61ms was HTML parsing - 383ms was style+layout.
   content-visibility:auto lets the browser skip that work for anything
   outside the viewport. The `auto` keyword in contain-intrinsic-size makes
   the browser remember each element's real size after it is first laid out,
   so the scrollbar does not jump. Wrapped in @supports: browsers without
   it simply render as before. */
@supports (content-visibility:auto) and (contain-intrinsic-size:auto 100px){
  /* Placeholder heights are the real measured heights of these rows, so the
     scrollbar length is right from the very first frame. Containers whose
     height varies a lot (.lx-vocab: 186-669px) are deliberately NOT included -
     a wrong guess there is what makes a page visibly jump while scrolling. */
  .irow           {content-visibility:auto;contain-intrinsic-size:auto 106px}
  .pcard          {content-visibility:auto;contain-intrinsic-size:auto 96px}
  /* conversation cards start closed (one English line), so their placeholder is short */
  .pcard.tk-s     {contain-intrinsic-size:auto 30px}
  .lx-word        {content-visibility:auto;contain-intrinsic-size:auto 89px}
  .vgrid-words > *{content-visibility:auto;contain-intrinsic-size:auto 90px}
}

/* ===== safe-area insets — notched phones & installed (standalone) PWA =====
   Paired with <meta name="viewport" content="...viewport-fit=cover">.
   Every value keeps its original number as the base and only ADDS the inset,
   so on devices with no cutout (inset = 0px) the layout is byte-identical.
   Browsers without env() support drop these declarations as invalid and fall
   back to the original rules above. */
.hero{padding-top:calc(24px + env(safe-area-inset-top,0px))}
.rbar{padding-top:calc(10px + env(safe-area-inset-top,0px))}
.progress{top:env(safe-area-inset-top,0px)}
body{padding-bottom:env(safe-area-inset-bottom,0px)}
.totop{bottom:calc(16px + env(safe-area-inset-bottom,0px));
  inset-inline-end:calc(16px + max(env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)))}
@supports not (inset-inline-end:calc(16px + max(env(safe-area-inset-left,0px),env(safe-area-inset-right,0px)))){
  .totop{inset-inline-end:16px}
}

/* ================= JMJ brand · about · FAQ · footer ================= */
.brandmark{display:inline-flex;align-items:center;gap:10px;font-weight:800;color:#fff}
.brandmark .bm-ico{width:38px;height:38px;border-radius:11px;background:rgba(255,255,255,.15);
  display:grid;place-items:center;flex:none;overflow:hidden}
.brandmark .bm-ico svg{width:38px;height:38px;display:block}
.bm-tx{display:flex;flex-direction:column;gap:1px;line-height:1.2}
.bm-tx b{font-family:var(--font-en);font-size:1.04rem;font-weight:700;letter-spacing:.1em;color:#fff}
.bm-tx i{font-style:normal;font-weight:600;font-size:.67rem;color:var(--on-hero-soft);letter-spacing:0}

.jmj-bottom{padding-bottom:84px}
.jmj-about{margin-top:34px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:20px 20px 22px;box-shadow:var(--shadow-sm)}
.jmj-about-top{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.jmj-ava{width:58px;height:58px;flex:none;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md)}
.jmj-ava svg{width:58px;height:58px;display:block}
.jmj-about-id{display:block;min-width:0}
.jmj-about-h{font-size:1.22rem;font-weight:800;color:var(--ink);line-height:1.45}
.jmj-about-sub{font-size:.85rem;color:var(--ink-soft);font-weight:600;line-height:1.6}
.jmj-about-sub{font-family:var(--font-en);unicode-bidi:isolate;letter-spacing:.01em}
.jmj-about-role{font-size:.83rem;color:var(--ink-faint);font-weight:600;margin-top:1px}
.jmj-about-p{color:var(--ink-soft);font-size:.95rem;line-height:1.95}
.jmj-about-p b{color:var(--ink);font-weight:700}
.jmj-facts{list-style:none;display:grid;gap:8px;margin-top:16px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,215px),1fr))}
.jmj-facts li{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:11px;
  padding:9px 12px;font-size:.87rem;color:var(--ink-soft);font-weight:600}
.jmj-facts li b{color:var(--brand);font-weight:800}

.jmj-faq{margin-top:28px}
.jmj-faq-h{font-size:1.16rem;font-weight:800;color:var(--ink);margin-bottom:12px}
.jmj-q{background:var(--surface);border:1px solid var(--line);border-radius:13px;
  margin-bottom:9px;overflow:hidden}
.jmj-q>summary{cursor:pointer;list-style:none;padding:13px 15px;font-weight:700;
  font-size:.94rem;color:var(--ink);display:flex;align-items:center;gap:10px;line-height:1.7}
.jmj-q>summary::-webkit-details-marker{display:none}
.jmj-q>summary::after{content:"+";margin-inline-start:auto;color:var(--brand);
  font-weight:800;font-size:1.2rem;line-height:1;flex:none}
.jmj-q[open]>summary::after{content:"\2212"}
.jmj-q-a{margin:0 15px 14px;padding-top:12px;border-top:1px solid var(--line-soft);
  color:var(--ink-soft);font-size:.91rem;line-height:2}
.jmj-q-a span{font-family:var(--font-en);unicode-bidi:isolate}

.jmj-foot{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);text-align:center}
.jmj-foot-b{font-family:var(--font-en);font-size:1.15rem;font-weight:700;
  letter-spacing:.14em;color:var(--brand)}
.jmj-foot-n{font-size:.94rem;font-weight:700;color:var(--ink);margin-top:3px}
.jmj-foot-s{font-size:.78rem;color:var(--ink-faint);margin-top:6px;
  font-family:var(--font-en);unicode-bidi:isolate}
.jmj-foot-c{font-size:.78rem;color:var(--ink-faint);margin-top:8px}

/* the crawlable, no-JavaScript first paint — replaced by the app on boot */
.jmj-intro{color:var(--ink-soft);font-size:.95rem;line-height:2;margin-top:22px}
.jmj-intro b{color:var(--ink);font-weight:700}
.jmj-sec-h{font-size:1.16rem;font-weight:800;color:var(--ink);margin:26px 0 12px}

/* ================= lesson prerequisites (پیش‌نیازهای این درس) ================= */
.pq-sec{margin-top:32px;padding-top:24px;border-top:1px solid var(--line)}
.pq-top{display:flex;align-items:flex-start;gap:12px;margin-bottom:15px}
.pq-ic{width:40px;height:40px;flex:none;border-radius:12px;background:var(--brand-tint);
  color:var(--brand);display:grid;place-items:center}
.pq-top-tx{min-width:0}
.pq-t{font-size:1.13rem;font-weight:800;color:var(--ink);line-height:1.55;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pq-n{font-size:.72rem;font-weight:700;color:var(--brand);background:var(--brand-tint);
  border-radius:999px;padding:3px 9px}
.pq-s{font-size:.85rem;color:var(--ink-faint);line-height:1.85;margin-top:3px}

.pq{background:var(--surface);border:1px solid var(--line);border-radius:14px;
  margin-bottom:9px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.pq[open]{border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:var(--shadow-sm)}
.pq>summary{cursor:pointer;list-style:none;padding:12px 14px;display:flex;
  align-items:center;gap:10px;min-height:56px}
.pq>summary::-webkit-details-marker{display:none}
.pq>summary:hover .pq-badge{background:var(--brand);color:var(--on-brand)}
.pq-badge{background:var(--brand-tint);color:var(--brand);font-weight:800;font-size:.88rem;
  padding:6px 11px;border-radius:9px;flex:none;line-height:1.5;transition:background .15s,color .15s}
.pq-badge.en{font-family:var(--font-en);unicode-bidi:isolate;letter-spacing:.01em;font-size:.86rem}
.pq-hint{font-size:.81rem;color:var(--ink-faint);font-weight:600;line-height:1.65;min-width:0}
.pq>summary::after{content:"▾";margin-inline-start:auto;color:var(--ink-faint);
  font-size:.78rem;flex:none;transition:transform .2s ease}
.pq[open]>summary::after{transform:rotate(180deg);color:var(--brand)}
.pq-b{margin:0 14px 15px;padding-top:13px;border-top:1px solid var(--line-soft)}

.pq-p{font-size:.9rem;color:var(--ink-soft);line-height:2.05}
.pq-p+.pq-p{margin-top:8px}
.pq-p b,.pq-note b{color:var(--ink);font-weight:700}
.pq-h3{font-size:.92rem;font-weight:800;color:var(--ink);margin:16px 0 9px;
  display:flex;align-items:center;gap:8px;line-height:1.6}
.pq-h3::before{content:"";width:4px;height:15px;border-radius:2px;background:var(--accent);flex:none}

.pq-tw{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.pq-tw.scroll{max-height:340px;overflow-y:auto}
.pq-tw:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.pq-tb{width:100%;border-collapse:collapse;font-size:.85rem}
.pq-tb th{background:var(--brand-tint);color:var(--brand);font-weight:800;font-size:.78rem;
  padding:9px 11px;text-align:start;white-space:nowrap;position:sticky;top:0;z-index:1}
.pq-tb td{padding:10px 11px;border-top:1px solid var(--line-soft);color:var(--ink-soft);
  line-height:1.85;vertical-align:top}
.pq-tb tbody tr:first-child td{border-top:0}
.pq-tb td:first-child{color:var(--ink);font-weight:700}
.pq-en{font-family:var(--font-en);unicode-bidi:isolate;color:var(--ink);font-size:.94em}
.pq-tb td:not(:first-child) .pq-en{color:var(--ink-soft)}
.pq-fa{display:block;color:var(--ink-faint);font-size:.8rem;margin-top:3px;line-height:1.75}

.pq-note{margin-top:13px;background:var(--amber-tint);border-inline-start:3px solid var(--amber);
  border-radius:10px;padding:11px 13px;font-size:.85rem;color:var(--ink-soft);line-height:2}
.pq-note.ok{background:var(--brand-tint);border-inline-start-color:var(--brand)}
.pq-cap{font-size:.78rem;color:var(--ink-faint);font-weight:600;margin-bottom:7px;
  display:flex;align-items:center;gap:6px}
.pq-cap::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.pq-link{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-size:.85rem;
  font-weight:700;color:var(--brand)}
.pq-link:hover{text-decoration:underline}
@media (max-width:430px){
  .pq>summary{padding:11px 12px;gap:9px}
  .pq-badge{font-size:.84rem;padding:5px 9px}
  .pq-badge.en{font-size:.82rem}
  .pq-hint{font-size:.76rem;line-height:1.6}
  .pq-tb{font-size:.82rem}
  .pq-tb td,.pq-tb th{padding:8px 9px}
  .pq-b{margin:0 11px 13px}
}
@media (prefers-reduced-motion:reduce){
  .pq>summary::after{transition:none}
}

/* ===================== grammatical-role colors =====================
   One color per role, identical in every formula, every example and every
   "more examples" list.  The five colors were chosen by optimization, not by
   eye: the hues are spread around the wheel away from the brand teal, they sit
   on a deliberate lightness ladder, and every pair was checked to be at least
   ΔE2000 32 apart in normal vision (and still separable under protanopia,
   deuteranopia and tritanopia).  The earlier blue/violet pair measured only
   ΔE 19.5, which is why they blurred together. */
:root{
  --role-s:#0668D6;  /* فاعل        — آبی    */
  --role-a:#866100;  /* فعل کمکی    — کهربایی */
  --role-n:#82000E;--pron:#A32014;  /* منفی‌کننده  — قرمز   */
  --role-v:#0E7B4C;  /* فعل اصلی    — سبز    */
  --role-q:#BD1A9F;  /* کلمه پرسشی  — سرخابی */
}
[data-theme="dark"]{
  --role-s:#539EF8; --role-a:#FDB215; --role-n:#FC6152;--pron:#FF8A7A;
  --role-v:#52DA98; --role-q:#FFBFFF;
}
.r-s{color:var(--role-s)}
.r-a{color:var(--role-a)}
.r-n{color:var(--role-n)}
.r-v{color:var(--role-v)}
.r-q{color:var(--role-q)}
/* a question word that is also the subject ("Who is knocking?") */
.r-q.r-sub{border-bottom:2px dotted var(--role-s)}
/* color is never the only cue: the roles are also a shade heavier than
   the words around them, and the key below the lesson title names them */
.lx-ex-en .r-s,.lx-ex-en .r-a,.lx-ex-en .r-n,.lx-ex-en .r-v,.lx-ex-en .r-q,
.x-ex .r-s,.x-ex .r-a,.x-ex .r-n,.x-ex .r-v,.x-ex .r-q{font-weight:600}
/* «not» used to carry an underline as well as its color. It made the line
   look marked up rather than taught, so the underline is gone: the red, the
   heavier weight and the color key under the title already name it. */

/* ---- the color key under the lesson title ---- */
.rk{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 6px;padding:12px 13px;
  background:var(--surface-2);border:1px solid var(--line);border-radius:13px}
.rk-t{width:100%;font-size:.78rem;font-weight:700;color:var(--ink-faint);
  line-height:1.75;margin-bottom:3px}
.rk-i{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.rk-d{width:9px;height:9px;border-radius:50%;flex:none;background:currentColor}

/* ---- prerequisite badges wear the color of the role they explain ---- */
.pq-badge.ro-s{color:var(--role-s);background:color-mix(in srgb,var(--role-s) 13%,transparent)}
.pq-badge.ro-a{color:var(--role-a);background:color-mix(in srgb,var(--role-a) 13%,transparent)}
.pq-badge.ro-v{color:var(--role-v);background:color-mix(in srgb,var(--role-v) 13%,transparent)}
.pq-badge.ro-q{color:var(--role-q);background:color-mix(in srgb,var(--role-q) 13%,transparent)}
.pq>summary:hover .pq-badge.ro-s{background:var(--role-s);color:#fff}
.pq>summary:hover .pq-badge.ro-a{background:var(--role-a);color:#fff}
.pq>summary:hover .pq-badge.ro-v{background:var(--role-v);color:#fff}
.pq>summary:hover .pq-badge.ro-q{background:var(--role-q);color:#fff}
@media (max-width:430px){
  .rk{padding:10px 11px;gap:6px}
  .rk-i{font-size:.75rem;padding:4px 9px}
}


.tkrow{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;color:inherit;transition:border-color .15s,transform .15s}
.tkrow:hover{border-color:var(--brand);transform:translateY(-1px)}
.tkrow>.say-btn{flex:0 0 auto;margin-top:2px}
.tkrow-b{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.tkrow-en{font-family:var(--serif);font-size:1rem;color:var(--brand-ink);direction:ltr;text-align:left;overflow-wrap:anywhere}
.tkrow-pr{font-size:.8rem;color:var(--pron)}
.tkrow-fa{font-size:.88rem;color:var(--ink-soft)}
.tkrow .vrow-tag{flex:0 0 auto;align-self:center}
@media (max-width:520px){.tkrow{flex-wrap:wrap}.tkrow .tkrow-b{min-width:calc(100% - 52px)}.tkrow .vrow-tag{order:3;align-self:flex-start;margin-top:4px;margin-inline-start:52px;max-width:none}}

.iform-pr{display:block;margin-top:3px;font-size:.7rem;color:var(--pron);font-weight:500;line-height:1.4}
.x-pr{font-size:.82rem;color:var(--pron);margin-top:2px}

.lx-lead2{margin-top:7px;color:var(--ink-soft);font-size:.95rem;line-height:1.9}
.fc-stats.four{grid-template-columns:1fr 1fr}
.fcst em{font-style:normal;font-size:.68rem;color:var(--ink-faint);text-align:center;line-height:1.6;margin-top:1px}
.fc-none{text-align:center;padding:14px 12px;border:1px dashed var(--line);border-radius:14px;color:var(--ink-soft);font-size:.9rem;line-height:1.9}
.fcbox{border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
/* on the end-of-session card the table is as wide as the buttons under it */
.q-card.result .fcbox{align-self:stretch;margin:6px 0 10px;text-align:start}
.fcbox-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.fcbox-h b{font-size:.95rem;color:var(--ink)}
.fcbox-h span{font-size:.76rem;color:var(--ink-faint)}
.fcbox-row{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line-soft)}
.fcbox-row:last-child{border-bottom:0}
.fcbox-n{flex:0 0 auto;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;font-size:.82rem;font-weight:800;color:#fff}
.fcbox-tx{flex:0 0 auto;display:flex;flex-direction:column;min-width:104px}
.fcbox-tx b{font-size:.85rem;color:var(--ink)}
.fcbox-tx em{font-style:normal;font-size:.7rem;color:var(--ink-faint)}
.fcbox-bar{flex:1 1 auto;height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden;min-width:24px}
.fcbox-bar i{display:block;height:100%;border-radius:99px}
.fcbox-c{flex:0 0 auto;min-width:34px;text-align:left;font-weight:800;font-size:.9rem;color:var(--ink)}
.fcbox-n.b0,.fcbox-bar i.b0{background:var(--ink-faint)}
.fcbox-n.b1,.fcbox-bar i.b1{background:#C2410C}
.fcbox-n.b2,.fcbox-bar i.b2{background:#B45309}
.fcbox-n.b3,.fcbox-bar i.b3{background:#0E7490}
.fcbox-n.b4,.fcbox-bar i.b4{background:#0F766E}
.fcbox-n.b5,.fcbox-bar i.b5{background:#15803D}
[data-theme="dark"] .fcbox-n.b1,[data-theme="dark"] .fcbox-bar i.b1{background:#FB7A4B}
[data-theme="dark"] .fcbox-n.b2,[data-theme="dark"] .fcbox-bar i.b2{background:#F0A93A}
[data-theme="dark"] .fcbox-n.b3,[data-theme="dark"] .fcbox-bar i.b3{background:#3FB6D4}
[data-theme="dark"] .fcbox-n.b4,[data-theme="dark"] .fcbox-bar i.b4{background:#35BFA8}
[data-theme="dark"] .fcbox-n.b5,[data-theme="dark"] .fcbox-bar i.b5{background:#4ECB7A}
.fc-method .x-more{width:100%}
.fcm{padding:14px 15px;color:var(--ink-soft);font-size:.88rem;line-height:2}
.fcm p{margin:0 0 10px}
.fcm b{color:var(--ink)}
.fcm-ol,.fcm-ul{margin:0 0 12px;padding-inline-start:22px;display:flex;flex-direction:column;gap:6px}
.fcm-ol{list-style-type:persian}
.fcm-h{font-weight:800;color:var(--ink);margin:14px 0 8px}
.fcm-days{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.fcm-days span{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:5px 11px;font-size:.78rem;color:var(--ink-soft)}
.fcm-days i{font-style:normal;width:20px;height:20px;border-radius:7px;display:grid;place-items:center;font-size:.72rem;font-weight:800;color:#fff}
.fcm-days i.b1{background:#C2410C}.fcm-days i.b2{background:#B45309}.fcm-days i.b3{background:#0E7490}
.fcm-days i.b4{background:#0F766E}.fcm-days i.b5{background:#15803D}
[data-theme="dark"] .fcm-days i.b1{background:#FB7A4B}[data-theme="dark"] .fcm-days i.b2{background:#F0A93A}
[data-theme="dark"] .fcm-days i.b3{background:#3FB6D4}[data-theme="dark"] .fcm-days i.b4{background:#35BFA8}
[data-theme="dark"] .fcm-days i.b5{background:#4ECB7A}
.fcm-note{font-size:.8rem;color:var(--ink-faint);margin-top:10px}
.fc-boxline{display:flex;justify-content:center;margin:2px 0 10px}
.fc-box{font-size:.74rem;font-weight:700;color:#fff;border-radius:99px;padding:4px 12px}
.fc-box.b0{background:var(--ink-faint)}.fc-box.b1{background:#C2410C}.fc-box.b2{background:#B45309}
.fc-box.b3{background:#0E7490}.fc-box.b4{background:#0F766E}.fc-box.b5{background:#15803D}
[data-theme="dark"] .fc-box.b1{background:#FB7A4B}[data-theme="dark"] .fc-box.b2{background:#F0A93A}
[data-theme="dark"] .fc-box.b3{background:#3FB6D4}[data-theme="dark"] .fc-box.b4{background:#35BFA8}
[data-theme="dark"] .fc-box.b5{background:#4ECB7A}
.fc-grade .grade{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1.5}
.fc-grade .grade em{font-style:normal;font-size:.68rem;font-weight:600;opacity:.85}
.fc-reset{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;margin-top:4px}
.fc-reset-q{font-size:.85rem;color:var(--ink-soft)}
.btn-ghost.sm{padding:8px 14px;font-size:.82rem;width:auto;align-self:center}
.btn-ghost.sm.danger{color:var(--role-n);border-color:color-mix(in srgb,var(--role-n) 45%,transparent)}
.q-card.result .fcbox{margin:14px 0;text-align:right}

.q-scope{margin:8px 0 2px;text-align:center;font-size:.78rem;color:var(--ink-faint)}
.q-hint{margin:14px 0 0;text-align:center;font-size:.74rem;color:var(--ink-faint)}
@media (hover:none){.q-hint{display:none}}
/* the question used to sit at the top of the page, where a thumb on a
   phone never looks; it is now in the middle, over the quiz */
.q-quit{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:22px;
  background:color-mix(in srgb,var(--paper) 72%,transparent);backdrop-filter:blur(3px)}
.q-quit[hidden]{display:none}
.q-quit-box{width:100%;max-width:340px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:20px 18px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.q-quit-box p{margin:0 0 6px;font-size:1.02rem;font-weight:800;color:var(--ink)}
.q-quit-box>span{display:block;font-size:.84rem;line-height:1.8;color:var(--ink-soft)}
.q-quit-btns{display:flex;gap:9px;margin-top:16px}
.q-quit-btns button{flex:1}
/* ---- «are you leaving?» ---- */
.exit-ask{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:22px;
  background:color-mix(in srgb,var(--paper) 72%,transparent);backdrop-filter:blur(3px)}
.exit-ask[hidden]{display:none}
.exit-box{width:100%;max-width:340px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:20px 18px;text-align:center;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.exit-box p{margin:0 0 6px;font-size:1.02rem;font-weight:800;color:var(--ink)}
.exit-box>span{display:block;font-size:.84rem;line-height:1.8;color:var(--ink-soft)}
.exit-btns{display:flex;gap:9px;margin-top:16px}
.exit-btns button{flex:1}
.qz-note{font-size:.84rem;color:var(--ink-faint);text-align:center;line-height:1.9;
  border:1px dashed var(--line);border-radius:12px;padding:9px 12px}
.qz-note.warn{color:var(--role-a);border-color:color-mix(in srgb,var(--role-a) 45%,transparent)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;filter:grayscale(.4)}
.rs-scope{font-size:.8rem;color:var(--ink-faint);margin-top:-4px}
.rv{text-align:right;margin:18px 0 6px;border-top:1px solid var(--line);padding-top:16px}
.rv-h{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.rv-h b{font-size:.95rem;color:var(--ink)}
.rv-h .seg.sm{flex:1 1 auto;min-width:200px}
.rv-item{display:flex;gap:10px;padding:12px 13px;border:1px solid var(--line);border-radius:14px;
  background:var(--surface);margin-bottom:9px}
.rv-item.no{border-color:color-mix(in srgb,var(--role-n) 40%,var(--line))}
.rv-item.ok{border-color:color-mix(in srgb,var(--role-v) 34%,var(--line))}
.rv-n{flex:0 0 auto;width:24px;height:24px;border-radius:8px;display:grid;place-items:center;
  font-size:.76rem;font-weight:800;background:var(--surface-2);color:var(--ink-soft)}
.rv-item.no .rv-n{background:var(--role-n);color:#fff}
.rv-item.ok .rv-n{background:var(--role-v);color:#fff}
.rv-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:6px}
.rv-q{font-family:var(--font-en);font-size:.98rem;color:var(--ink);overflow-wrap:anywhere}
.rv-q[dir="rtl"]{font-family:inherit}
.rv-tr{font-size:.8rem;color:var(--pron)}
.rv-a{display:flex;align-items:baseline;gap:7px;font-size:.88rem;flex-wrap:wrap}
.rv-a em{font-style:normal;font-size:.72rem;color:var(--ink-faint);flex:0 0 auto}
.rv-a b{font-weight:700;overflow-wrap:anywhere}
.rv-a.bad b{color:var(--role-n);text-decoration:line-through;text-decoration-thickness:1px}
.rv-a.good b{color:var(--role-v)}
.rv-e{font-size:.82rem;color:var(--ink-soft);line-height:1.9}
.rv-none{text-align:center;padding:16px;border:1px dashed var(--line);border-radius:14px;
  color:var(--ink-soft);font-size:.9rem}

/* ===================== PRONUNCIATION =====================
   The speaker button has three states: idle, waiting for the engine
   (.loading) and playing (.speaking). Waiting is deliberately quiet —
   with a local voice it lasts a single frame and must not flash. */
.say-btn.loading{background:var(--surface-2);color:var(--ink-faint);box-shadow:none}
.say-btn.loading svg{animation:sayWait .9s ease-in-out infinite}
@keyframes sayWait{0%,100%{opacity:.4}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.say-btn.loading svg{animation:none;opacity:.6}}
/* the irregular-verb chips are speakers too */
.iform.loading{border-color:var(--edge-bd);background:var(--surface-2)}
.iform.loading b{opacity:.55}

/* ---- entry row, sitting full width at the foot of the tools grid ---- */
.tts-bar{grid-column:1/-1;display:flex;align-items:center;gap:11px;width:100%;text-align:start;
  padding:12px 14px;border-radius:16px;color:var(--ink);font-family:inherit;
  background-image:linear-gradient(158deg,var(--grad-a),var(--grad-b));
  border:1px solid var(--edge-bd);box-shadow:var(--hi),var(--elev-1);
  transition:transform .15s ease,border-color .15s ease}
.tts-bar:hover{transform:translateY(-2px);border-color:var(--edge-bd-hi)}
.tts-bar:active{transform:translateY(0)}
.tts-bar-ic{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  color:var(--brand);background:var(--brand-tint)}
.tts-bar-ic svg{width:18px;height:18px}
.tts-bar-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.tts-bar-tx b{font-size:.92rem;font-weight:700}
.tts-bar-tx span{font-size:.76rem;color:var(--ink-soft);line-height:1.55;overflow-wrap:anywhere}
.tts-bar-go{flex:none;color:var(--ink-faint);font-size:1.15rem;line-height:1}

/* ---- the panel ---- */
.tts-sheet{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
/* A plain [hidden] rule loses to the class rule above, which would leave an
   invisible full-screen scrim on top of the whole app swallowing every tap.
   Both belts: display:none when closed, and no pointer events unless open. */
.tts-sheet[hidden]{display:none!important;pointer-events:none}
.tts-sheet:not(.on) .tts-panel{pointer-events:none}
.tts-scrim{position:absolute;inset:0;background:rgba(9,18,22,.5);opacity:0;transition:opacity .18s ease}
.tts-sheet.on .tts-scrim{opacity:1}
.tts-panel{position:relative;width:100%;max-width:520px;max-height:86vh;overflow:auto;
  -webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:14px;
  background:var(--surface);border:1px solid var(--edge-bd);border-bottom:0;border-radius:22px 22px 0 0;
  padding:16px 18px calc(20px + env(safe-area-inset-bottom,0px));
  box-shadow:0 -14px 40px rgba(9,18,22,.3);transform:translateY(16px);opacity:0;
  transition:transform .2s ease,opacity .2s ease}
.tts-sheet.on .tts-panel{transform:none;opacity:1}
@media (min-width:560px){.tts-sheet{align-items:center}
  .tts-panel{border-radius:22px;border-bottom:1px solid var(--edge-bd);padding-bottom:20px}}
@media (prefers-reduced-motion:reduce){.tts-panel,.tts-scrim{transition:none}}
html.tts-lock,html.tts-lock body{overflow:hidden}
.tts-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tts-head b{font-size:1.05rem;font-weight:800;color:var(--ink)}
.tts-x{flex:none;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--edge-bd)}
.tts-x svg{width:16px;height:16px}
.tts-lead{margin:-4px 0 0;font-size:.82rem;color:var(--ink-soft);line-height:1.95}
.tts-now{display:flex;flex-direction:column;gap:6px;padding:11px 13px;border-radius:14px;
  background:var(--surface-2);border:1px solid var(--line)}
.tts-now-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tts-now-l{font-size:.78rem;color:var(--ink-faint);flex:none}
.tts-now b{font-size:.94rem;color:var(--ink);overflow-wrap:anywhere;min-width:0;
  direction:ltr;unicode-bidi:isolate;text-align:left}
.tts-chip{flex:none;font-size:.72rem;font-weight:700;padding:3px 9px;
  border-radius:999px;background:var(--amber-tint);color:var(--amber)}
.tts-chip.off{background:var(--brand-tint);color:var(--brand)}
.tts-note{margin:0;font-size:.8rem;color:var(--ink-soft);line-height:1.95}
.tts-warn{margin:0;font-size:.85rem;color:var(--ink-soft);line-height:2.05;padding:12px 14px;
  border:1px dashed var(--line);border-radius:14px;background:var(--surface-2)}
.tts-warn b{color:var(--ink)}
/* Menu paths are English: each one is its own left-to-right island, so the
   arrows can never be flipped into the surrounding Persian sentence. */
.tts-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.tts-steps li{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:13px;
  background:var(--surface-2);border:1px solid var(--line)}
.tts-steps b{font-size:.82rem;color:var(--ink)}
.tts-steps code,.tts-path{direction:ltr;unicode-bidi:isolate;text-align:left;font-family:var(--font-en-read);
  font-size:.78rem;line-height:1.75;color:var(--ink-soft);overflow-wrap:anywhere}
.tts-path{display:block;margin-top:5px;padding:7px 9px;border-radius:9px;background:var(--surface-2);
  border:1px solid var(--line)}
.tts-test{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;
  border:1px solid var(--line);background:var(--surface-2)}
.tts-test-t{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0}
.tts-test-t span[lang=en]{font-family:var(--font-en);font-size:1.02rem;color:var(--ink);
  direction:ltr;unicode-bidi:isolate;text-align:left}
.tts-test-fa{font-size:.78rem;color:var(--ink-faint)}
.tts-test-h{margin-top:3px;font-size:.72rem;color:var(--brand);font-weight:700}
[data-theme="dark"] .tts-test-h{color:var(--ink-soft)}
.tts-panel .fld{gap:7px}
.tts-panel .btn-ghost.sm{margin-top:0}

/* ---- failure notice ---- */
.tts-toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:130;
  display:flex;align-items:center;gap:10px;max-width:min(92vw,460px);padding:11px 13px;border-radius:16px;
  background:var(--ink);color:var(--paper);box-shadow:var(--shadow-lg);
  visibility:hidden;opacity:0;transform:translate(-50%,14px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s}
.tts-toast.on{visibility:visible;opacity:1;transform:translate(-50%,0)}
.tts-toast-m{font-size:.84rem;line-height:1.75}
.tts-toast-a{flex:none;font-family:inherit;font-size:.78rem;font-weight:700;padding:6px 11px;
  border-radius:10px;background:rgba(128,128,128,.34);color:inherit}

/* ===================== hidden must mean hidden =====================
   The browser's own [hidden]{display:none} is a plain attribute rule, so any
   class rule that sets `display` quietly beats it. That is how the quiz's
   "leave the quiz?" bar ended up sitting on top of every single question,
   and how a closed panel could cover the whole app. One rule, everywhere,
   so the mistake cannot come back. */
[hidden]{display:none!important}

/* ===================== زنجیره‌ی روزانه ===================== */
.stk{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.stk-top{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.stk-n{font-size:.86rem;color:var(--ink-soft)}
.stk-n b{font-size:1.05rem;font-weight:800;color:var(--brand)}
.stk-c{font-size:.78rem;color:var(--ink-faint)}
.stk.done .stk-c{color:var(--success-solid);font-weight:700}
.stk-track{height:7px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.stk-track i{display:block;height:100%;border-radius:99px;
  background-image:linear-gradient(90deg,var(--grad-brand-a),var(--grad-brand-b));transition:width .35s ease}
.stk.done .stk-track i{background-image:linear-gradient(90deg,var(--success),var(--success-solid))}
.stk-days{display:flex;gap:6px;justify-content:space-between;margin-top:10px}
.stk-day{flex:1 1 0;min-width:0;height:26px;border-radius:8px;display:grid;place-items:center;
  font-size:.72rem;font-weight:700;color:var(--ink-faint);
  background:var(--surface-2);border:1px solid var(--line)}
.stk-day.on{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.stk-day.today{outline:2px solid var(--brand);outline-offset:1px}
.stk-best{margin-top:8px;font-size:.76rem;color:var(--ink-faint);text-align:center}

/* ===================== ردیف‌های ثانویه‌ی خانه ===================== */
.tools{margin:0 0 10px}
.rows{display:flex;flex-direction:column;gap:10px;margin:0 0 20px}
.rows .tts-bar{grid-column:auto}
.mis-bar .tts-bar-ic{color:var(--role-n);background:color-mix(in srgb,var(--role-n) 14%,transparent)}

/* ===================== دفتر اشتباهات ===================== */
.mis-none{text-align:center;padding:26px 18px;border:1px dashed var(--line);border-radius:16px;
  color:var(--ink-soft);font-size:.95rem;line-height:2.2}
.mis-none .btn-ghost{max-width:260px;margin:12px auto 0}
.mis-list{display:flex;flex-direction:column;gap:9px;margin:16px 0 8px}
/* ---- the notebook is split by kind ----
   One flat list mixed a grammar slip with a forgotten word and a sentence,
   so nothing could be scanned. Each kind now owns a titled section, and the
   tab bar filters to one of them. Both the tabs and the section counts are
   redrawn from the DOM after a row is removed, so a section and its tab can
   never disagree, and the last row of a section takes the section with it. */
.mis-seg,.lq-seg{flex-wrap:wrap}
.mis-seg button,.lq-seg button{flex:1 1 auto;font-size:.8rem;padding:10px 9px;white-space:nowrap}
.mis-secs{margin-top:2px}
.mis-sec{margin-top:20px}
.mis-sec:first-child{margin-top:10px}
.mis-sec[hidden]{display:none}
.mis-sec-h{display:flex;align-items:center;gap:10px;padding:0 2px}
.mis-sec-ic{flex:none;width:32px;height:32px;border-radius:11px;display:grid;place-items:center;
  color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.mis-sec-ic svg{width:17px;height:17px}
.mis-sec-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.mis-sec-t b{font-size:.95rem;font-weight:800;color:var(--ink);line-height:1.5}
.mis-sec-t span{font-size:.73rem;color:var(--ink-faint);line-height:1.5;overflow-wrap:anywhere}
.mis-sec-n{flex:none;font-size:.75rem;color:var(--ink-faint);white-space:nowrap}
.mis-sec .mis-list{margin:10px 0 0}
.mis-pr{color:var(--pron);font-size:.82rem;line-height:1.75;margin-top:4px;overflow-wrap:anywhere}
.mis-tag{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.mis-n{font-size:.69rem;font-weight:700;color:var(--role-n);white-space:nowrap;
  background:color-mix(in srgb,var(--role-n) 13%,transparent);border-radius:999px;padding:2px 8px}
.mis-item{display:flex;gap:10px;align-items:flex-start;padding:12px 13px;border-radius:14px;
  background:var(--surface);border:1px solid var(--line)}
.mis-b{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.mis-q{font-family:var(--font-en);font-size:1rem;color:var(--ink);overflow-wrap:anywhere}
.mis-q[dir="rtl"]{font-family:inherit}
.mis-a{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;font-size:.88rem}
.mis-a em{font-style:normal;font-size:.72rem;color:var(--ink-faint);flex:0 0 auto}
.mis-a b{color:var(--role-v);font-weight:700;overflow-wrap:anywhere}
.mis-tag{font-size:.74rem;color:var(--ink-faint)}
.mis-sp{flex:0 0 auto;width:0}
.mis-x{flex:0 0 auto;align-self:center;font-family:inherit;font-size:.74rem;font-weight:700;
  padding:7px 10px;border-radius:10px;white-space:nowrap;
  color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--edge-bd)}
.mis-x:active{transform:scale(.97)}

/* ===================== «خودت را بسنج» در پایان درس ===================== */
.lx-quizcta{display:flex;align-items:center;gap:12px;margin:20px 0 4px;padding:14px;
  border-radius:18px;color:var(--ink);
  background-image:linear-gradient(158deg,var(--grad-a),var(--grad-b));
  border:1px solid var(--edge-bd);box-shadow:var(--hi),var(--elev-1);
  transition:transform .15s ease,border-color .15s ease}
.lx-quizcta:hover{transform:translateY(-2px);border-color:var(--edge-bd-hi)}
.lqc-ic{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;color:#fff;
  background-image:linear-gradient(180deg,var(--grad-brand-a),var(--grad-brand-b));box-shadow:var(--hi)}
.lqc-ic svg{width:22px;height:22px}
.lqc-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.lqc-tx b{font-size:1rem;font-weight:700}
.lqc-tx span{font-size:.78rem;color:var(--ink-soft)}
.lqc-go{flex:none;color:var(--ink-faint);font-size:1.2rem;line-height:1}

/* ===================== تمرین املا ===================== */
.q-listen.sm{margin:10px 0 2px}
.sp-wrap{display:flex;flex-direction:column;gap:8px;margin:16px 0 4px}
.sp-in{width:100%;font-family:var(--font-en);font-size:1.35rem;font-weight:600;letter-spacing:.02em;
  text-align:center;direction:ltr;color:var(--ink);background:var(--surface-2);
  border:1px solid var(--edge-bd);border-radius:14px;padding:14px 12px;
  transition:border-color .15s ease,background .15s ease}
.sp-in::placeholder{font-family:var(--font-fa);font-size:.9rem;font-weight:500;color:var(--ink-faint);letter-spacing:0}
.sp-in:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.sp-in.ok{border-color:var(--role-v);background:color-mix(in srgb,var(--role-v) 10%,var(--surface))}
.sp-in.no{border-color:var(--role-n);background:color-mix(in srgb,var(--role-n) 10%,var(--surface))}
.sp-in:disabled{opacity:1}
.sp-hint{align-self:center;font-family:inherit;font-size:.8rem;font-weight:700;padding:8px 14px;
  border-radius:11px;color:var(--brand);background:var(--brand-tint);border:1px solid var(--edge-bd)}
.sp-hint:disabled{opacity:.45}
.sp-go{margin-top:6px}
/* ---- spelling a whole sentence ----
   A sentence does not fit one centered line at the word size, and a single
   line input would slide sideways under the thumb. A wrapping box at a
   calmer size keeps the whole answer in sight while it is being typed. */
.sp-in.sent{font-size:1.05rem;font-weight:600;letter-spacing:0;line-height:1.75;
  min-height:84px;resize:none;overflow:auto}
.q-word.fa.sent{font-size:1.25rem;line-height:1.8;font-weight:700}
/* the letter by letter diff is unreadable across a sentence, so a sentence
   is marked word by word - which is also exactly how it is graded */
.sp-diff.words{font-size:1.02rem;gap:6px;font-weight:700}
.sp-diff.words span{padding:3px 8px;border-radius:8px}
.sp-diff.words span.ok{background:color-mix(in srgb,var(--role-v) 12%,transparent)}
.sp-diff.words span.extra{text-decoration:line-through;text-decoration-thickness:2px}
.sp-diff{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;margin:10px 0 2px;
  font-family:var(--font-en);font-size:1.3rem;font-weight:700;direction:ltr;unicode-bidi:isolate}
.sp-diff span{padding:2px 3px;border-radius:5px}
.sp-diff span.ok{color:var(--role-v)}
.sp-diff span.no{color:var(--role-n);background:color-mix(in srgb,var(--role-n) 14%,transparent);
  text-decoration:underline;text-decoration-thickness:2px}

/* ===================== پشتیبان‌گیری ===================== */
.bak-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.bak-st{padding:11px 12px;border-radius:13px;background:var(--surface-2);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center}
.bak-st b{font-size:1.15rem;font-weight:800;color:var(--brand)}
.bak-st span{font-size:.74rem;color:var(--ink-faint);line-height:1.5}
.bak-load{display:block;text-align:center;cursor:pointer;margin-top:10px}
.bak-msg{font-size:.84rem;line-height:1.9;padding:10px 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-soft)}
.bak-msg.ok{color:var(--success-solid);border-color:color-mix(in srgb,var(--success-solid) 40%,transparent)}
.bak-msg.no{color:var(--role-n);border-color:color-mix(in srgb,var(--role-n) 45%,transparent)}

/* Inline English inside a Persian sentence. Isolation is the whole point:
   without it, two English runs with a neutral character between them get
   reordered by the bidi algorithm and the sentence reads scrambled. */
.lx-en{font-family:var(--font-en);unicode-bidi:isolate;direction:ltr;color:var(--brand-600)}
[data-theme="dark"] .lx-en{color:var(--brand)}
/* Two English phrases compared: its own left-to-right block, never inline. */
.lx-pair{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:9px 0 2px;
  padding:9px 12px;border-radius:11px;background:var(--surface-2);border:1px solid var(--line);
  direction:ltr;unicode-bidi:isolate;text-align:left;
  font-family:var(--font-en);font-size:.92rem;color:var(--ink)}
.lx-pair i{font-style:normal;font-weight:800;color:var(--ink-faint);flex:none}
/* Tables inside a lesson body need the breathing room the prerequisite
   cards get from their own padding. */
.lx .pq-tw{margin:14px 0}
.lx .pq-tb td{color:var(--ink)}

/* ===================== شنیداری جمله ===================== */
.hr-tag{margin-top:10px;text-align:center;font-size:.82rem;color:var(--ink-faint)}

/* ===================== جستجوی سراسری ===================== */
.gs-h{display:flex;align-items:baseline;gap:8px;margin:20px 0 9px;font-size:.95rem;
  font-weight:800;color:var(--ink)}
.gs-h span{font-size:.76rem;font-weight:700;color:var(--brand);background:var(--brand-tint);
  border-radius:999px;padding:2px 9px}
.gs-hint{margin:20px 0;text-align:center;font-size:.9rem;color:var(--ink-faint);
  padding:20px;border:1px dashed var(--line);border-radius:14px}
.gs-row{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:13px;
  background:var(--surface);border:1px solid var(--line);margin-bottom:7px}
.gs-en{font-family:var(--font-en);font-weight:600;color:var(--brand);flex:1 1 auto;
  min-width:0;unicode-bidi:isolate;overflow-wrap:anywhere}

/* Three equal columns leave about 80px of text per cell on a 320px phone, and
   the longest past participles — understood, undertaken, broadcast — need a
   little more than that, so they were being cut off at the screen edge. A grid
   track only holds its share if it is allowed to be narrower than its content,
   which is what minmax(0,1fr) says; the slightly smaller type on the narrowest
   screens then keeps every form whole on one line, and overflow-wrap is the
   backstop should a longer verb ever be added. */
.iforms{grid-template-columns:repeat(3,minmax(0,1fr))}
.iform b{overflow-wrap:anywhere}
@media (max-width:359px){
  .iforms{gap:6px}
  .iform{padding:9px 3px}
  .iform b{font-size:.92rem}
}

/* The vocabulary row was drawn for a single-subject list, where the subject is
   already in the page title and no chip is needed. Search results add that chip
   to every row, and three non-shrinking children plus a chip do not fit a 320px
   phone — so here the chip always drops to its own line, indented to sit under
   the text, exactly as it already does for the sentence rows. */
.gs-res .vrow{flex-wrap:wrap;row-gap:0}
.gs-res .vrow .vrow-en{min-width:0;overflow-wrap:anywhere}
.gs-res .vrow .vrow-fa{flex:1 1 auto}
.gs-res .vrow .vrow-brk{flex:1 0 100%;height:0}
.gs-res .vrow .vrow-tag{margin-top:7px;margin-inline-start:52px;max-width:none}
.gs-fa{font-size:.86rem;color:var(--ink-soft);flex:0 1 auto;min-width:0;text-align:end}
.gs-res{margin-bottom:22px}

/* ===================== پیشرفت من ===================== */
.pg-sec{margin:16px 0;padding:14px 15px;border-radius:18px;background:var(--surface);
  border:1px solid var(--line)}
.pg-t{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;justify-content:space-between;
  font-size:.98rem;font-weight:800;color:var(--ink);margin-bottom:10px}
.pg-t span{font-size:.8rem;font-weight:600;color:var(--ink-faint)}
.pg-bar{height:9px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);
  overflow:hidden}
.pg-bar i{display:block;height:100%;border-radius:99px;
  background-image:linear-gradient(90deg,var(--grad-brand-a),var(--grad-brand-b));
  transition:width .4s ease}
.pg-bar.sm{height:7px;flex:1 1 auto;min-width:60px}
.pg-groups{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.pg-g{display:flex;align-items:center;gap:10px}
.pg-g-n{flex:0 0 auto;width:104px;font-size:.8rem;color:var(--ink-soft);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pg-g-c{flex:0 0 auto;font-size:.76rem;color:var(--ink-faint);font-variant-numeric:tabular-nums}
.pg-g.full .pg-g-n{color:var(--success-solid);font-weight:700}
.pg-boxes{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.pg-box{padding:10px 8px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:2px}
.pg-box b{font-size:1.1rem;font-weight:800;color:var(--ink)}
.pg-box span{font-size:.72rem;color:var(--ink-faint)}
.pg-box.b4 b,.pg-box.b5 b{color:var(--success-solid)}
.pg-box.b0 b{color:var(--ink-faint)}
.pg-bests{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pg-best{padding:11px 6px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:2px}
.pg-best b{font-size:1.05rem;font-weight:800;color:var(--brand)}
.pg-best span{font-size:.72rem;color:var(--ink-faint)}
.pg-note{margin:11px 0 0;font-size:.83rem;color:var(--ink-soft);line-height:1.95}
.pg-sec .btn-ghost,.pg-sec .btn-primary{margin-top:11px}
.pg-sec .stk{margin-top:0;padding-top:0;border-top:0}
/* ===================== پیشرفت من ===================== */
.pg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.pg-tile{padding:12px 8px;border-radius:14px;background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--hi),var(--tiny);display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;min-width:0}
.pg-tile b{font-size:1.15rem;font-weight:800;color:var(--brand);line-height:1.3}
.pg-tile b small{font-size:.72rem;font-weight:600;color:var(--ink-faint)}
.pg-tile span{font-size:.8rem;font-weight:700;color:var(--ink)}
.pg-tile em{font-style:normal;font-size:.7rem;color:var(--ink-faint);line-height:1.6}
.pg-tile.warn b{color:var(--amber)}
.pg-lasts{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.pg-last{padding:11px 10px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);
  display:flex;flex-direction:column;gap:3px;min-width:0}
.pg-last-k{font-size:.8rem;font-weight:700;color:var(--ink-soft)}
.pg-last b{font-size:1.25rem;font-weight:800;color:var(--ink-faint);line-height:1.35}
.pg-last em{font-style:normal;font-size:.75rem;color:var(--ink-soft)}
.pg-last small{font-size:.7rem;color:var(--ink-faint);line-height:1.7;overflow-wrap:anywhere}
.pg-last.hi b{color:var(--success-solid)}.pg-last.mid b{color:var(--amber)}.pg-last.lo b{color:var(--accent-600)}
.pg-dets{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.pg-det{border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden;margin-top:10px}
.pg-dets .pg-det{margin-top:0}
.pg-det>summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:11px 13px;background:var(--surface-2)}
.pg-det>summary::-webkit-details-marker{display:none}
.pg-det>summary:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.pg-det-t{font-size:.9rem;font-weight:800;color:var(--ink);flex:1 1 auto}
.pg-det-s{font-size:.76rem;color:var(--ink-faint);display:flex;align-items:center;gap:8px}
.pg-det-bar{display:inline-flex;width:70px}
.pg-det-c{color:var(--ink-faint);font-size:.8rem;transition:transform .15s ease}
.pg-det[open]>summary .pg-det-c{transform:rotate(180deg)}
.pg-det-b{display:flex;flex-direction:column}
.pg-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:9px 13px;border-top:1px solid var(--line-soft)}
.pg-row.all{background:var(--brand-tint)}
.pg-row-n{flex:1 1 130px;min-width:0;display:flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none}
a.pg-row-n:hover .pg-row-t{color:var(--brand)}
.pg-row-t{font-size:.84rem;font-weight:700;display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.pg-row-t small{font-size:.7rem;font-weight:500;color:var(--ink-faint)}
.pg-emo{flex:0 0 auto;font-size:1.05rem}
.pg-mark{flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-strong);display:grid;place-items:center;
  font-size:.72rem;font-weight:800;color:var(--on-success)}
.pg-mark.on{background:var(--success-solid);border-color:var(--success-solid)}
.pg-chips{display:flex;gap:5px;flex:0 0 auto;margin-inline-start:auto}
.pg-chip{display:flex;flex-direction:column;align-items:center;min-width:54px;padding:4px 5px;border-radius:9px;
  border:1px solid var(--line);background:var(--surface);text-decoration:none;line-height:1.35}
.pg-chip em{font-style:normal;font-size:.64rem;color:var(--ink-faint)}
.pg-chip b{font-size:.84rem;font-weight:800;color:var(--ink-faint)}
a.pg-chip:hover{border-color:var(--brand)}
.pg-chip.hi b{color:var(--success-solid)}.pg-chip.mid b{color:var(--amber)}.pg-chip.lo b{color:var(--accent-600)}
.pg-chip.na{opacity:.55}
.pg-chip.na b{font-size:.68rem;font-weight:600}
.pg-bak{margin:18px 0 8px;width:100%}
@media (max-width:420px){.pg-tiles{grid-template-columns:repeat(2,1fr)}.pg-chip{min-width:46px;padding:3px 4px}.pg-chip em{font-size:.6rem}.pg-row{padding:8px 10px;gap:6px 8px}.pg-row-n{flex-basis:110px}}


/* ===================== صرف فعل ===================== */
.cj-more{margin-top:10px}
.cj-h{font-size:.84rem;color:var(--ink-soft);margin:0 0 9px;line-height:1.8}
.cj-h b{font-family:var(--font-en);color:var(--brand);unicode-bidi:isolate}
.cj .pq-tb td:last-child{display:flex;align-items:center;gap:8px;justify-content:space-between}
.pq-pr{display:block;margin-top:3px;font-size:.7rem;color:var(--pron);line-height:1.7}
.cj-pr{display:block;margin-top:4px;font-size:.76rem;color:var(--pron);line-height:1.7}
.cj-s{font-family:var(--font-en);color:var(--ink);unicode-bidi:isolate;direction:ltr;
  flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.cj-na{color:var(--ink-faint);font-size:.8rem}
.cj .pq-tb td:first-child{white-space:nowrap}

/* ===================== متن‌های خواندنی ===================== */
.tools .tc-story{grid-column:1/-1}

.rdsum{display:flex;flex-direction:column;gap:7px;margin:4px 0 16px}
.rdsum-b{height:8px;border-radius:99px;background:var(--surface-2);
  border:1px solid var(--line-soft);overflow:hidden}
.rdsum-b i{display:block;height:100%;border-radius:99px;background:var(--brand)}
.rdsum span{font-size:.82rem;color:var(--ink-faint)}

.lib-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 16px}
.lib-seg a{display:flex;align-items:center;justify-content:center;gap:6px;
  padding:11px 8px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);text-decoration:none;
  font-size:.9rem;font-weight:800;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.lib-seg a span{font-size:.74rem;font-weight:700;opacity:.75;
  font-variant-numeric:tabular-nums}
.lib-seg a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.lib-seg a.on span{opacity:.9}
.rdlv{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 14px}
.rdlv .rdlv-all{grid-column:1 / -1}
.rdlv button{display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);font-family:inherit;
  font-size:.82rem;font-weight:700;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.rdlv button span{font-size:.72rem;font-weight:600;opacity:.8;
  font-variant-numeric:tabular-nums}
.rdlv button.on{background:var(--brand);border-color:var(--brand);color:#fff}

.rdlist{display:flex;flex-direction:column;gap:9px;margin-top:14px}
/* the strip of chapter numbers at the top of a book */
/* the foot of a long book: the numbers, then the two cards */
.st-pager{margin-top:22px;padding-top:16px;border-top:1px dashed var(--line)}
.st-chs{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:0 0 4px}
.st-pager .lx-nav{margin-top:12px}
.st-ch{min-width:38px;padding:8px 10px;border-radius:12px;text-align:center;font-weight:800;
  font-size:.88rem;color:var(--ink-soft);background:var(--surface-2);border:1px solid var(--line)}
.st-ch.on{color:#fff;background:var(--brand);border-color:transparent}
.st-ch-t{display:flex;flex-direction:column;gap:3px;margin:16px 0 6px}
.st-ch-n{font-size:.76rem;font-weight:800;color:var(--brand)}
.st-ch-en{font-family:var(--font-en-read);font-size:1.12rem;font-weight:700;color:var(--ink)}
.st-ch-fa{font-size:.92rem;color:var(--ink-soft)}
.rdcard{position:relative;display:flex;align-items:center;gap:11px;padding:12px 13px;
  border-radius:14px;background:var(--surface);border:1px solid var(--edge-bd);
  box-shadow:var(--hi),var(--tiny);
  transition:transform .15s ease,border-color .15s ease}
.rdcard:hover{transform:translateY(-2px);border-color:var(--edge-bd-hi)}
.rdcard.done{border-color:var(--brand)}
.rdcard-e{flex:0 0 auto;font-size:1.5rem;line-height:1}
.rdcard-tx{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.rdcard-en{font-family:var(--font-en);font-weight:600;color:var(--brand);
  font-size:1rem;unicode-bidi:isolate;direction:ltr;text-align:start;
  overflow-wrap:anywhere}
.rdcard-fa{font-size:.86rem;color:var(--ink-soft)}
.rdcard-meta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:3px}
.rdcard-lv{font-size:.7rem;font-weight:700;border-radius:999px;padding:2px 9px;
  border:1px solid var(--line-soft);white-space:nowrap}
.rdcard-lv.l1{color:#0E7B4C;background:rgba(14,123,76,.10)}
.rdcard-lv.l2{color:#866100;background:rgba(134,97,0,.10)}
.rdcard-lv.l3{color:#82000E;background:rgba(130,0,14,.10)}
html[data-theme=dark] .rdcard-lv.l1{color:#52DA98;background:rgba(82,218,152,.12)}
html[data-theme=dark] .rdcard-lv.l2{color:#FDB215;background:rgba(253,178,21,.12)}
html[data-theme=dark] .rdcard-lv.l3{color:#FC6152;background:rgba(252,97,82,.12)}
.rdcard-w{font-size:.72rem;color:var(--ink-faint);white-space:nowrap;
  font-variant-numeric:tabular-nums}
.rdcard-tick{position:absolute;inset-inline-start:6px;inset-block-start:6px;
  font-size:.7rem;color:var(--brand);font-weight:800}

.rd-hero{position:relative}
.rd-emoji{display:block;font-size:2.2rem;line-height:1;margin-bottom:8px}
/* one under the other: «خواندمش» is the decision, the translations
   switch is the tool, and side by side they competed for the eye */
.rd-bar{display:grid;grid-template-columns:1fr;gap:8px;margin:6px 0 8px}
.rd-bar button{padding:10px 8px;border-radius:12px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink-soft);font-family:inherit;
  font-size:.84rem;font-weight:700;cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease}
.rd-bar button.on{background:var(--brand);border-color:var(--brand);color:#fff}
/* «read» is a state, not a control, so it is marked rather than filled —
   otherwise two solid buttons sit side by side and neither reads as active. */
.rd-bar .rd-done.on{background:var(--brand-tint);border-color:var(--brand);color:var(--brand)}
.rd-hint{margin:0 0 14px;font-size:.8rem;color:var(--ink-faint);line-height:1.9}

.rd-text{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}
.rd-p{display:flex;flex-direction:column;gap:8px;padding:13px;border-radius:14px;
  background:var(--surface);border:1px solid var(--edge-bd);
  box-shadow:var(--hi),var(--tiny)}
.rd-s{border-radius:10px;padding:5px 6px;cursor:pointer;
  transition:background .12s ease}
.rd-s:hover{background:var(--surface-2)}
.rd-s.open{background:var(--surface-2)}
.rd-s-top{display:flex;align-items:flex-start;gap:9px}
.rd-en{flex:1 1 auto;min-width:0;font-family:var(--font-en);font-size:1.02rem;
  line-height:1.75;color:var(--ink);unicode-bidi:isolate;overflow-wrap:anywhere}
.rd-pr{margin-top:5px;margin-inline-start:41px;font-size:.86rem;line-height:1.9;
  color:var(--pron);border-inline-start:2px solid var(--pron);
  padding-inline-start:9px;overflow-wrap:anywhere}
.rd-fa{margin-top:5px;margin-inline-start:41px;font-size:.9rem;line-height:1.9;
  color:var(--ink-soft);border-inline-start:2px solid var(--brand);
  padding-inline-start:9px}

.rd-h{margin:26px 0 10px;font-size:1.05rem;font-weight:800;color:var(--ink)}
.rd-gl{display:flex;flex-direction:column;gap:7px}
.rd-g{display:flex;align-items:center;gap:9px;flex-wrap:wrap;row-gap:2px;
  padding:9px 11px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line)}
.rd-g-en{font-family:var(--font-en);font-weight:600;color:var(--brand);
  unicode-bidi:isolate;overflow-wrap:anywhere;min-width:0}
.rd-g-pr{font-size:.76rem;color:var(--pron);white-space:nowrap}
.rd-g-fa{flex:1 1 100%;margin-inline-start:41px;font-size:.86rem;color:var(--ink-soft)}

.rd-qz{display:flex;flex-direction:column;gap:12px}
.rd-q{padding:13px;border-radius:14px;background:var(--surface);
  border:1px solid var(--edge-bd);box-shadow:var(--hi),var(--tiny)}
.rd-q-t{display:flex;align-items:flex-start;gap:9px;font-size:.95rem;font-weight:700;
  line-height:1.9;margin-bottom:10px}
.rd-q-n{flex:0 0 auto;width:24px;height:24px;margin-top:3px;border-radius:8px;display:grid;
  place-items:center;font-size:.78rem;font-weight:800;background:var(--brand);color:#fff;
  font-variant-numeric:tabular-nums}
.rd-q-e bdi,.rd-q-t bdi,.rd-o bdi{font-family:var(--font-en)}
.rd-q-o{display:flex;flex-direction:column;gap:7px}
.rd-o{display:flex;align-items:center;gap:9px;width:100%;text-align:start;
  padding:10px 11px;border-radius:11px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink);font-family:inherit;font-size:.9rem;
  line-height:1.7;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.rd-o:hover:not(:disabled){border-color:var(--line-strong)}
.rd-o:disabled{cursor:default}
.rd-o-n{flex:0 0 auto;width:22px;height:22px;border-radius:7px;display:grid;
  place-items:center;font-size:.74rem;font-weight:700;background:var(--brand-tint);
  color:var(--brand);font-variant-numeric:tabular-nums}
.rd-o.right{border-color:#0E7B4C;background:rgba(14,123,76,.10)}
.rd-o.right .rd-o-n{background:#0E7B4C;color:#fff}
.rd-o.wrong{border-color:#82000E;background:rgba(130,0,14,.10)}
.rd-o.wrong .rd-o-n{background:#82000E;color:#fff}
html[data-theme=dark] .rd-o.right{border-color:#52DA98;background:rgba(82,218,152,.12)}
html[data-theme=dark] .rd-o.right .rd-o-n{background:#52DA98;color:#0B1416}
html[data-theme=dark] .rd-o.wrong{border-color:#FC6152;background:rgba(252,97,82,.12)}
html[data-theme=dark] .rd-o.wrong .rd-o-n{background:#FC6152;color:#0B1416}
.rd-q-e{margin-top:10px;padding:9px 11px;border-radius:11px;font-size:.85rem;
  line-height:1.9;background:var(--surface-2);border:1px solid var(--line)}
.rd-q-e b{font-weight:800}
.rd-q-e.ok b{color:#0E7B4C}
.rd-q-e.no b{color:#82000E}
html[data-theme=dark] .rd-q-e.ok b{color:#52DA98}
html[data-theme=dark] .rd-q-e.no b{color:#FC6152}

.gs-res .rd-gsrow{flex-wrap:wrap;row-gap:0}
.gs-res .rd-gsrow .vrow-brk{flex:1 0 100%;height:0}
.gs-res .rd-gsrow .vrow-tag{margin-top:7px;margin-inline-start:52px;max-width:none}

@media (max-width:360px){
  .rdlv{grid-template-columns:repeat(2,1fr)}
  .rd-bar{grid-template-columns:1fr}
}

/* ===================== خوانایی نتیجه‌ی پاسخ ===================== */
/* White on these two mid-tones measures 2.35:1 and 3.30:1 — the number that
   marks the right answer was the hardest thing on the page to read. Dark ink
   on the same colors measures 7.93:1 and 5.65:1 and keeps the signal. */
.q-opt.correct .q-key,.q-opt.wrong .q-key{color:#0B1416}

/* a hint is pressed with a thumb like everything else */
.sp-hint{min-height:40px}

/* ===================== یک جستجو، بالای صفحه ===================== */
/* It sits on the seam between the hero and the page, which is where a
   learner looks first and the only place that belongs to no one tab. */
.hsearch{position:relative;z-index:4;margin:-27px 0 18px}
.hsearch .search{height:56px;border-radius:16px;border:1px solid var(--edge-bd);
  box-shadow:var(--shadow-lg)}
.hsearch-x{position:relative;flex:none;width:40px;height:40px;margin-inline-end:-6px;
  border-radius:50%;display:grid;place-items:center;color:var(--ink-soft);background:var(--surface-2)}
.hsearch-x svg{width:16px;height:16px}
.hsearch-x:active{transform:scale(.94)}
.hsearch-h{margin:9px 3px 0;font-size:.76rem;line-height:1.9;color:var(--ink-faint)}
.hres{margin-bottom:26px}
.hres:empty{display:none}

/* Searching hides the browsing screen rather than pushing it down. A class
   does it, so whichever tab was open is still open when the box is cleared. */
html.hsearching .hsearch-h,
html.hsearching .hero-eyebrow,
html.hsearching .hero-title,
html.hsearching .hero-lead,
html.hsearching .specimen,
html.hsearching .hero-stats{display:none}
html.hsearching .hero{padding:20px 0 34px}
html.hsearching #home>.tools,
html.hsearching #home>.rows,
html.hsearching #home>.tabs,
html.hsearching #home>.tabpane,
html.hsearching .jmj-bottom{display:none}

/* ===================== تنظیمات ===================== */
/* Every one of these was a small square with a larger invisible box drawn
   over it. The box reached past its own button and swallowed taps meant for
   the row underneath, so the buttons are simply the size they need to be. */
.rbar .theme-btn{width:40px;height:40px}
/* the bar that offers the newer build */
.newver{position:fixed;inset-inline:12px;bottom:12px;z-index:130;display:flex;flex-wrap:wrap;
  align-items:center;gap:8px;padding:12px 14px;border-radius:16px;background:var(--surface);
  border:1px solid var(--line);box-shadow:0 14px 40px rgba(0,0,0,.3)}
.newver span{flex:1 1 100%;font-size:.88rem;font-weight:700;color:var(--ink)}
.newver button{flex:1}
.set-ver{margin-top:14px;text-align:center;font-size:.76rem;color:var(--ink-faint)}
.set-row{display:flex;flex-direction:column;gap:10px}
.set-t{display:flex;flex-direction:column;gap:2px}
.set-t b{font-size:.92rem;font-weight:700;color:var(--ink)}
.set-t span{font-size:.76rem;color:var(--ink-soft);line-height:1.55}
.set-seg{width:100%}
.set-go{width:100%}
.set-go[disabled]{opacity:.6;cursor:default}
.set-go[disabled]:hover{transform:none;border-color:var(--edge-bd)}
.tts-head b{flex:1 1 auto;min-width:0}
.tts-back{flex:none;width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;color:var(--ink-soft);
  background:var(--surface-2);border:1px solid var(--edge-bd)}
.tts-back svg{width:17px;height:17px}
.tts-x{width:40px;height:40px;border-radius:12px}

/* ===================== دانلود و آپلود فایل بک آپ ===================== */
.bak-msg b{color:inherit}
.bak-msg.ask{color:var(--ink);border-color:var(--edge-bd-hi);background:var(--surface-2)}
.bak-ask-h{display:block;font-size:.9rem;margin-bottom:6px}
.bak-pre{margin:0;padding-inline-start:18px;font-size:.82rem;line-height:2;color:var(--ink-soft)}
.bak-warn{margin:9px 0 0;font-size:.8rem;line-height:1.9;color:var(--role-n)}
.bak-ask{display:flex;gap:9px;margin-top:11px}
.bak-ask .btn-primary,.bak-ask .btn-ghost{flex:1;margin:0;padding:12px 10px;font-size:.9rem}
@media (max-width:359px){.bak-ask{flex-direction:column}}

/* a formula part that may be left out entirely — brackets, as in any
   grammar book, and the paragraph above says the same thing in words */
.fx-pa{color:var(--ink-faint);font-weight:700;padding:0 1px}
/* a group of alternatives with a fixed word after it: the brackets say
   «pick one of these, then the rest follows», so the «been» of
   «(have/has) been» can never look like part of «has». Solid ink, unlike
   the faint .fx-pa above, so «grouped» and «optional» stay distinct. */
.fx-gp{color:var(--ink);font-weight:800;padding:0 1px}

/* =====================================================================
   TRUE DARK — the default theme (2026-09-30)
   A near-black canvas (#030405) with neutral surfaces that step up in
   lightness, not in blue. On black, shadows barely show, so depth comes
   from hairline borders and a soft top highlight on every card. The
   brand teal and coral are used as light: glows, rings and gradients.
   Everything here is scoped to [data-theme="dark"]; the light theme is
   untouched (it only gets its own color-scheme, so native controls and
   scrollbars always match the theme instead of the phone's setting).
   ===================================================================== */
:root:not([data-theme="dark"]){color-scheme:light}
[data-theme="dark"]{
  color-scheme:dark;
  --paper:#030405;
  --surface:#0C0E11;--surface-2:#121519;--surface-3:#181C21;
  --ink:#F1F4F6;--ink-soft:#A6AFB8;--ink-faint:#8A939D;
  --line:#1C2126;--line-soft:#15191D;--line-strong:#2A3037;
  --brand:#3DD9E0;--brand-600:#7AE9EE;--brand-tint:#12262A;--on-brand:#021A1C;
  --accent:#FF8273;--accent-600:#FFA093;--accent-tint:#291C1D;--accent-ink:#FF8273;
  --amber:#F2B84B;--amber-tint:#282218;
  --success:#3DDC97;--success-solid:#3DDC97;--on-success:#04150D;
  --hero-from:#030405;--hero-to:#030405;--on-hero:#D3DEE2;--on-hero-soft:#95A4AC;
  --formula-border:#18393B;--letter-sub:#72B8BD;
  /* lesson-group colors: the tint is 13% of the color over the surface */
  --g-alpha:#33BCC4;--g-alpha-bg:#112528;--g-past:#74ABE2;--g-past-bg:#1A222C;
  --g-present:#5FC99B;--g-present-bg:#172623;--g-future:#AC9DEA;--g-future-bg:#21212D;
  --g-basic:#A3B4C1;--g-basic-bg:#202428;--g-adj:#FF8B79;--g-adj-bg:#2C1E1F;
  --g-adv:#E8BB5E;--g-adv-bg:#29241B;--g-conn:#E48EC3;--g-conn-bg:#281F28;
  --g-advanced:#4FC9A8;--g-advanced-bg:#152625;
  /* depth */
  --grad-a:#121519;--grad-b:#0A0C0F;
  --edge-hi:rgba(255,255,255,.055);--edge-bd:rgba(255,255,255,.075);--edge-bd-hi:rgba(61,217,224,.5);
  --shadow-sm:0 1px 2px rgba(0,0,0,.7);
  --shadow-md:0 10px 26px -8px rgba(0,0,0,.85);
  --shadow-lg:0 22px 48px -14px rgba(0,0,0,.95);
  --elev-1:0 1px 2px rgba(0,0,0,.6),0 6px 16px -8px rgba(0,0,0,.9);
  --elev-2:0 2px 4px rgba(0,0,0,.6),0 14px 30px -12px rgba(0,0,0,.95);
  --tiny:0 1px 2px rgba(0,0,0,.7);
  --glow-brand:rgba(61,217,224,.38);--glow-accent:rgba(255,130,115,.36);--ring:rgba(61,217,224,.34);
  --grad-brand-a:#55E6EC;--grad-brand-b:#17B1BA;
  --grad-accent-a:#FF978A;--grad-accent-b:#F25F4F;
}
[data-theme="dark"] ::selection{background:rgba(61,217,224,.32);color:#fff}

/* home hero: no colored band any more -- the canvas itself, lit by two
   soft glows that fade out well before the hero ends, so there is no edge
   where the hero meets the page */
[data-theme="dark"] .hero{
  background:
    radial-gradient(80% 60% at 92% -10%,rgba(61,217,224,.30),transparent 62%),
    radial-gradient(60% 42% at 30% -16%,rgba(52,150,230,.13),transparent 70%),
    var(--paper)}
[data-theme="dark"] .hero::before{top:-160px;right:-120px;width:440px;height:440px;
  background:radial-gradient(circle,rgba(122,233,238,.2),transparent 64%)}
/* on wide screens the light sits over the content column, not in the far
   corner of the window */
@media (min-width:760px){
  [data-theme="dark"] .hero{background:
    radial-gradient(560px 360px at calc(50% + 300px) -80px,rgba(61,217,224,.28),transparent 70%),
    radial-gradient(620px 300px at calc(50% - 160px) -120px,rgba(52,150,230,.12),transparent 72%),
    var(--paper)}
  [data-theme="dark"] .hero::before{right:auto;left:calc(50% + 120px)}}
[data-theme="dark"] .hero::after{display:none}
/* the headline catches the light: white fading to a pale teal */
[data-theme="dark"] .hero-title{background:linear-gradient(180deg,#FFFFFF 30%,#B9EEF1);
  -webkit-background-clip:text;background-clip:text;color:transparent}
[data-theme="dark"] .hero-eyebrow{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
[data-theme="dark"] .hero .theme-btn,[data-theme="dark"] .brandmark .bm-ico{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
[data-theme="dark"] .hero .theme-btn:hover{background:rgba(255,255,255,.1)}
[data-theme="dark"] .hero-title,[data-theme="dark"] .lx-title{text-shadow:none}
[data-theme="dark"] .hero-stats .dot{background:rgba(255,255,255,.28)}

/* top bar of the inner pages: frosted black glass */
[data-theme="dark"] .rbar{background:rgba(3,4,5,.94);background-image:none;
  border-bottom:1px solid rgba(255,255,255,.07);box-shadow:none}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  [data-theme="dark"] .rbar{background:rgba(3,4,5,.72);
    -webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px)}}

/* segmented tabs: a recessed track with a lit, glowing active tab */
[data-theme="dark"] .tabs{background:#08090B;border-color:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.7)}
[data-theme="dark"] .tab.active{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -10px var(--glow-brand)}

/* primary actions glow softly; ghost buttons sit on the surface */
[data-theme="dark"] .btn-primary{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 24px -12px var(--glow-brand)}
[data-theme="dark"] .prog-cta{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 8px 20px -10px var(--glow-brand)}
[data-theme="dark"] .btn-ghost{background:var(--surface-2);border-color:rgba(255,255,255,.08)}

/* settings sheet and dialogs: a deeper, blurred scrim */
[data-theme="dark"] .tts-scrim{background:rgba(0,0,0,.66);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
[data-theme="dark"] .tts-panel{box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 -20px 60px -20px rgba(0,0,0,.9)}

/* the lesson group "ساختارهای پیشرفته" had no colors of its own (no dot,
   plain number badges) in either theme */
.grp[data-g="advanced"] .card-n{background:var(--g-advanced-bg);color:var(--g-advanced)}
.grp[data-g="advanced"] .grp-dot{background:var(--g-advanced)}

/* flashcard grade buttons: white text on these bright gradients measured
   only 1.9-3.2:1; dark text reads at 6-10:1 (both themes) */
.grade.yes{color:#04241A}
.grade.no{color:#340C07}
.fc-grade .grade em{opacity:.8}
/* flashcard box chips in dark: bright fills need dark text; the "new card"
   chip becomes a quiet graphite pill instead of a pale grey one */
[data-theme="dark"] .fc-box{color:#0A0C0F}
[data-theme="dark"] .fc-box.b0{background:#2A3037;color:#D3DAE0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}

/* text on brand-colored fills uses --on-brand: white in the light theme (so
   nothing changes there), deep teal-black on the bright dark-theme teal,
   where white measured as low as 1.7:1 */
.lx-entry-n,.totop,.say-btn.speaking,.lib-seg a.on,.rdlv button.on,.st-ch.on,
.rd-bar button.on,.rd-q-n{color:var(--on-brand)}
/* "خوانده شد": dark text on the green (white was 2.4:1, both themes) */
.done-btn.on{color:#04241A}
.done-btn.on .bx{border-color:currentColor}
/* bright role / box colors of the dark theme carry dark text */
[data-theme="dark"] .rv-item.no .rv-n,[data-theme="dark"] .rv-item.ok .rv-n,
[data-theme="dark"] .pq>summary:hover .pq-badge,[data-theme="dark"] .fcbox-n{color:#0A0C0F}
[data-theme="dark"] .fcbox-n.b0{background:#2A3037;color:#D3DAE0}
/* light theme: amber and red/green feedback text were too pale on white
   (2.8-3.2:1); the same hues, deep enough to read (5:1+) */
:root:not([data-theme="dark"]) .prog-line b.mid,:root:not([data-theme="dark"]) .pg-last.mid b,
:root:not([data-theme="dark"]) .pg-chip.mid b,:root:not([data-theme="dark"]) .pg-tile.warn b{color:#8A5A00}
:root:not([data-theme="dark"]) .q-fb.no{color:#B8392A}
:root:not([data-theme="dark"]) .q-fb.ok{color:#157A4F}

/* ---- audit: a heading for screen readers only, and the count badges of the
   story/reading switches at full strength in the light theme (3.5:1 -> 6:1) */
.vh{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
html[data-theme="light"] .lib-seg a:not(.on) span,html[data-theme="light"] .rdlv button span{opacity:1}

/* ===================== تلفظ آمریکایی (American pronunciation course) ===================== */
:root{--sd:#5F42BD;--sd-bg:#EEE9FB}
[data-theme="dark"]{--sd:#BBA9F8;--sd-bg:#1B1733}
.tc-sounds .tc-ic{background-image:linear-gradient(180deg,#9C88F2,#6A4DD0)}
.sd-list .card-n{background:var(--sd-bg);color:var(--sd)}
.card-sum{font-size:.76rem;color:var(--ink-soft);line-height:1.55;overflow-wrap:anywhere}
.ipa{font-family:"Charis SIL","Doulos SIL","Gentium Plus","Noto Sans","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-style:normal;unicode-bidi:isolate;letter-spacing:.01em}
.sd-sym{color:var(--sd);font-weight:700;font-size:1.12em}
.sd-sym-s{color:var(--sd);font-weight:700;font-size:1.05rem;white-space:nowrap}
.sd-lx .lx-h .ipa{margin-inline-end:4px}
.sd-how{margin:4px 0 12px;color:var(--ink);line-height:1.95}
.sd-how b{color:var(--sd)}
.sd-y{margin:-4px 0 12px;color:var(--ink-soft);font-size:.92rem;line-height:1.9}
.sd-words{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,112px),1fr));gap:8px;margin:10px 0 6px}
.sd-w{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 6px 7px;border-radius:12px;background:var(--surface-2);
  border:1px solid var(--line-soft);color:var(--ink);cursor:pointer;text-align:center;font:inherit;min-width:0;
  transition:border-color .15s,background .15s,transform .1s;-webkit-tap-highlight-color:transparent;user-select:none}
.sd-w:hover{border-color:var(--sd)}
.sd-w:active{transform:scale(.97)}
.sd-w:focus-visible,.sd-both:focus-visible{outline:2px solid var(--sd);outline-offset:2px}
.sd-w.loading,.sd-w.speaking{border-color:var(--sd);background:var(--sd-bg)}
.sd-w b{font-family:var(--font-en);font-weight:600;font-size:1.02rem;color:var(--brand);overflow-wrap:anywhere;unicode-bidi:isolate}
.sd-w .ipa{font-size:.86rem;color:var(--sd)}
.sd-w .sd-pr{font-size:.76rem;color:var(--ink-soft)}
.sd-w em{font-style:normal;font-size:.76rem;color:var(--ink-faint);line-height:1.5;overflow-wrap:anywhere}
.sd-w.sm{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:2px 6px;padding:5px 8px}
.sd-w.sm b{font-size:.95rem}
.sd-w strong,.sd-show strong,.sd-fb strong{color:var(--sd);font-weight:800}
.sd-dot{color:var(--ink-faint);margin:0 1px;font-weight:400}
.sd-pairs{margin:14px 0;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:10px}
.sd-pairs-h{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-weight:700;margin:2px 4px 10px}
.sd-pairs-h .ipa{color:var(--sd);font-size:1.05rem}
.sd-vs-t{font-weight:400;color:var(--ink-soft)}
.sd-pairs-n{flex-basis:100%;font-weight:400;font-size:.76rem;color:var(--ink-faint)}
.sd-prow{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;align-items:center;gap:6px;margin:6px 0}
.sd-prow2{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.sd-vs{color:var(--ink-faint);font-size:.9rem}
.sd-both{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:var(--sd-bg);color:var(--sd);cursor:pointer;
  font:inherit;font-size:.8rem;display:grid;place-items:center;-webkit-tap-highlight-color:transparent}
.sd-both.sm{width:auto;height:auto;padding:4px 10px;display:inline-flex;margin-inline-start:6px}
.sd-both.loading,.sd-both.speaking{background:var(--sd);color:#fff}
.sd-sents{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.sd-sent{display:flex;align-items:flex-start;gap:10px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:12px;padding:10px 12px}
.sd-sent-tx{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.sd-sent-en{font-family:var(--font-en);font-size:1rem;color:var(--ink);text-align:left;overflow-wrap:anywhere}
.sd-sent-en strong{color:var(--sd);font-weight:700}
.sd-sent-pr{font-size:.8rem;color:var(--ink-soft)}
.sd-sent-fa{font-size:.86rem;color:var(--ink-faint)}
.sd-link .sd-sent-pr{font-family:var(--font-en);text-align:left;color:var(--sd);font-size:.9rem}
.sd-rule{margin:12px 0;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.sd-rule-h{display:flex;align-items:center;gap:10px;line-height:1.8}
.sd-badge{flex:none;min-width:40px;padding:3px 8px;border-radius:9px;background:var(--sd-bg);color:var(--sd);font-weight:800;text-align:center;font-family:var(--font-en)}
.sd-badge.ipa{font-family:"Charis SIL","Doulos SIL","Gentium Plus","Noto Sans","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.sd-red-h{display:flex;align-items:center;gap:8px;margin:6px 4px 4px;font-family:var(--font-en);color:var(--ink-soft)}
.sd-red-h b{color:var(--sd);font-size:1.05rem}
.sd-arr{color:var(--ink-faint)}
.sd-into{margin:10px 0;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.sd-into-h{display:flex;align-items:center;gap:10px;font-weight:700;margin-bottom:8px}
.sd-arrows{flex:none;padding:2px 8px;border-radius:9px;background:var(--sd-bg);color:var(--sd);font-weight:800;white-space:nowrap}
.sd-ex{display:inline-flex;align-items:center;gap:8px}
.sd-go{font-size:.78rem;color:var(--sd);white-space:nowrap;font-weight:700}
.sd-chart td{vertical-align:middle}
.sd-fb .sd-fbrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:4px 0}
.sd-fb .sd-fbrow b{font-family:var(--font-en);font-size:1.02rem;color:var(--brand)}
.sd-fb .sd-fbrow .ipa{color:var(--sd)}
.sd-fb .sd-fbrow em{font-style:normal;color:var(--ink-soft);font-size:.86rem}
.sd-fb p{margin:6px 0 0}
.sd-fbn{margin-top:8px;font-size:.86rem;color:var(--ink-soft)}
.sd-mark{background:var(--sd-bg);color:var(--sd);border-radius:4px;padding:0 2px;box-shadow:0 0 0 2px var(--sd)}
.sd-show{margin-top:6px;flex-wrap:wrap}
.sd-show-s{font-size:1.3rem;line-height:1.6}
.part-wait{display:flex;align-items:center;justify-content:center;gap:10px;min-height:40vh;color:var(--ink-soft)}
.part-spin{width:22px;height:22px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--sd);animation:sdspin .9s linear infinite}
@keyframes sdspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.part-spin{animation:none}}
@media (max-width:360px){.sd-words{grid-template-columns:repeat(auto-fill,minmax(min(100%,96px),1fr))}.sd-both{width:32px;height:32px}}
/* ===================== گفتار و شنیدار: سایه‌خوانی، ضبط و دیکته ===================== */
:root{--spk:#0B7A5C;--spk-bg:#E1F4EC;--on-spk:#FFFFFF}
[data-theme="dark"]{--spk:#63D3AE;--spk-bg:#11271F;--on-spk:#0E1417}
.tc-speak .tc-ic,.spk-cta .lqc-ic,.spk-cont .lqc-ic,.spk-dcta .lqc-ic{background-image:linear-gradient(180deg,#1C9C75,#0B6E54)}
.spk-modes{margin:4px 0 6px}
.spk-modes button{font-size:.86rem;padding:10px 4px;line-height:1.35}
.spk-modes button:disabled{opacity:.45;cursor:not-allowed}
.spk-help{font-size:.84rem;color:var(--ink-soft);line-height:1.85;margin:6px 2px 10px}
.spk-nosup{color:var(--accent-ink)}
.spk-priv{font-size:.8rem;color:var(--spk);background:var(--spk-bg);border-radius:11px;padding:8px 12px;margin:0 0 12px;line-height:1.85}
.spk-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 16px 12px;box-shadow:var(--shadow-sm);margin:0 0 14px}
.spk-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-faint);min-height:1.7em;flex-wrap:wrap}
.spk-phase{color:var(--spk);font-weight:700}
.spk-en{font-family:var(--font-en);font-size:1.35rem;line-height:1.55;color:var(--ink);text-align:left;margin:10px 0 4px;overflow-wrap:anywhere;min-height:2.1em}
.spk-en strong{color:var(--spk);font-weight:700}
.spk-en.hid{text-align:center}
.spk-reveal{border:1px dashed var(--line-strong);background:var(--surface-2);color:var(--ink-soft);border-radius:11px;padding:8px 14px;font-family:var(--font-fa);font-size:.86rem;cursor:pointer}
.spk-ipa{color:var(--sd);font-size:1rem;text-align:left;font-family:"Charis SIL","Doulos SIL","Gentium Plus","Noto Sans","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.spk-note{font-family:var(--font-en);color:var(--spk);text-align:left}
.spk-pr{font-size:.95rem;color:var(--ink-soft);margin-top:2px}
.spk-fa{font-size:.95rem;color:var(--ink-faint);margin-top:2px}
.spk.no-pr .spk-pr,.spk.no-fa .spk-fa,.spk.no-fa .spk-li-fa{display:none!important}
.spk.no-en .spk-li-en{filter:blur(5px);user-select:none}
.spk-meter,.spk-timer{height:6px;border-radius:4px;background:var(--line-soft);overflow:hidden;margin:10px 0 2px}
.spk-meter i,.spk-timer i{display:block;height:100%;background:var(--spk);transform-origin:right center;transform:scaleX(0)}
.spk-meter i{transition:transform .06s linear}
.spk-timer i{transform:scaleX(1)}
.spk-msg{margin:10px 0 0;font-size:.86rem;color:var(--accent-ink);line-height:1.85}
.spk-msg.info{color:var(--ink-soft)}
.spk-ctl{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:12px}
.spk-play{flex:none;width:64px;height:64px;border-radius:50%;border:0;display:grid;place-items:center;color:#fff;cursor:pointer;
  background-image:linear-gradient(180deg,#1C9C75,#0B6E54);box-shadow:var(--hi),0 8px 18px -6px rgba(11,122,92,.55);transition:transform .12s ease}
.spk-play:active{transform:scale(.95)}
.spk-play:disabled{opacity:.5;cursor:not-allowed}
.spk-nav{min-width:84px;border:1px solid var(--edge-bd);background:var(--surface-2);color:var(--ink);border-radius:13px;padding:10px 14px;font-family:inherit;font-weight:700;font-size:.9rem;cursor:pointer}
.spk-nav:disabled{opacity:.4;cursor:not-allowed}
.spk-ctl2{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:10px}
.spk-sm{border:1px solid var(--line-strong);background:transparent;color:var(--ink-soft);border-radius:10px;padding:7px 12px;font-family:inherit;font-size:.82rem;font-weight:700;cursor:pointer;min-height:34px}
.spk-stop{border-color:var(--spk);color:var(--spk)}
.spk-opts{display:flex;flex-direction:column;gap:10px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:16px;padding:12px 14px;margin:0 0 16px}
.spk-opt{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
.spk-opt[hidden]{display:none}
.spk-opt-l{font-size:.86rem;font-weight:700;color:var(--ink-soft)}
.spk-opt .seg{flex:1 1 210px;max-width:330px}
.spk-sel{flex:1 1 210px;max-width:330px;font-family:inherit;font-size:.86rem;padding:9px 10px;border-radius:11px;border:1px solid var(--line-strong);background:var(--surface);color:var(--ink)}
.spk-tgs{display:flex;flex-wrap:wrap;gap:8px 18px}
.spk-tg{display:inline-flex;align-items:center;gap:7px;font-size:.86rem;color:var(--ink);cursor:pointer;min-height:30px}
.spk-tg input{width:18px;height:18px;margin:0;accent-color:var(--spk)}
.spk-list{position:relative;max-height:min(62vh,560px);overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:6px;margin-bottom:6px}
.spk-lh{font-size:.82rem;font-weight:800;color:var(--spk);margin:12px 10px 4px}
.spk-lh:first-child{margin-top:6px}
.spk-li{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:start;border:0;background:transparent;border-radius:11px;padding:8px 10px;font-family:inherit;cursor:pointer;color:var(--ink)}
.spk-li:hover{background:var(--surface-2)}
.spk-li.on{background:var(--spk-bg);box-shadow:inset 0 0 0 1.5px var(--spk)}
.spk-li.gap{margin-top:12px}
.spk-li-n{flex:none;min-width:30px;height:24px;padding:0 4px;border-radius:8px;display:grid;place-items:center;background:var(--surface-2);color:var(--ink-faint);font-size:.76rem;font-weight:700}
.spk-li.on .spk-li-n{background:var(--spk);color:var(--on-spk)}
.spk-li-tx{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.spk-li-en{font-family:var(--font-en);font-size:.98rem;line-height:1.5;text-align:left;overflow-wrap:anywhere}
.spk-li-en strong{color:var(--spk)}
.spk-li-fa{font-size:.8rem;color:var(--ink-faint);line-height:1.7}
.spk-how{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 12px}
.spk-how-i{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:11px 12px;display:flex;flex-direction:column;gap:3px}
.spk-how-i b{font-size:.92rem}
.spk-how-i span{font-size:.8rem;color:var(--ink-soft);line-height:1.75}
.spk-stat{font-size:.86rem;color:var(--ink-soft);margin:10px 2px}
.spk-dets .pg-det-b{padding:0}
.spk-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-top:1px solid var(--line-soft)}
.spk-row:first-child{border-top:0}
.spk-row-n{display:flex;align-items:center;gap:9px;min-width:0;color:var(--ink);flex:1 1 auto}
.spk-row-t{display:flex;flex-direction:column;min-width:0;font-size:.92rem;font-weight:700;line-height:1.6}
.spk-row-t small{font-weight:400;font-size:.76rem;color:var(--ink-faint)}
.spk-row-a{display:flex;gap:6px;flex:none}
.spk-a{display:inline-flex;align-items:center;min-height:32px;font-size:.78rem;font-weight:800;padding:5px 10px;border-radius:10px;background:var(--spk-bg);color:var(--spk);white-space:nowrap}
.spk-a.alt{background:var(--surface-2);color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--line)}
.spk-chs{display:flex;flex-wrap:wrap;gap:5px;justify-content:flex-end;max-width:58%}
.spk-ch{min-width:32px;height:32px;padding:0 6px;border-radius:9px;display:grid;place-items:center;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-soft);font-size:.8rem;font-weight:700}
.spk-ch.on{background:var(--spk-bg);color:var(--spk);box-shadow:inset 0 0 0 1.5px var(--spk)}
.spk-wait{padding:12px}
.spk-cta-chs{flex-wrap:wrap}
.spk-cta-chs .spk-chs{max-width:none;justify-content:flex-start;margin-top:8px}
.spk-cta-chs .spk-ch{min-width:0;padding:0 11px;height:34px}
.q-mh{text-align:center;color:var(--ink-soft);font-size:.95rem;margin-top:6px}
.dt-listen{gap:12px;align-items:center}
.dt-slow{border:1px solid var(--line-strong);background:var(--surface-2);color:var(--ink-soft);border-radius:12px;padding:9px 14px;font-family:inherit;font-weight:700;font-size:.86rem;cursor:pointer}
.dt-slow.loading,.dt-slow.speaking{background:var(--spk);border-color:var(--spk);color:var(--on-spk)}
@media (max-width:359px){.spk-how{grid-template-columns:1fr}.spk-row{flex-wrap:wrap}.spk-row-a,.spk-chs{width:100%;justify-content:flex-end;max-width:none}}
@media (max-width:400px){.spk-nav{min-width:0;padding:10px 12px}.spk-how-i{padding:10px}.spk-a{padding:5px 8px}}
@media (prefers-reduced-motion:reduce){.spk-meter i,.spk-play{transition:none}}
/* ===================== گفت‌وگوهای آمریکایی (dialogues) ===================== */
:root{--dg:#B83266;--dg-bg:#FCE8EF}
[data-theme="dark"]{--dg:#F48FB1;--dg-bg:#2A1520}
/* the home card comes after an even row of cards, so it takes the whole row */
.tools .tc-dlg{grid-column:1/-1}
.tc-dlg .tc-ic,.dg-cta .lqc-ic{background-image:linear-gradient(180deg,#D9467A,#A3285A)}
.dg-gh{display:flex;align-items:center;gap:7px;margin:24px 2px 10px;font-size:1rem;font-weight:800;color:var(--ink)}
.dg-wrap .rdlist+.lx-quizcta{margin-top:24px}
.dg-set .lx-note-tx{line-height:1.95}
.dg-roles{display:block;margin-top:5px;font-size:.84rem;color:var(--ink-soft)}
.dg-roles b{color:var(--ink);font-weight:700}
/* the dialogue as a chat: the first speaker on the start side, the second on the end side */
.dg-chat{gap:10px}
.dg-l{max-width:min(94%,600px);padding:7px 10px 9px;border-radius:16px;background:var(--surface);border:1px solid var(--line);align-self:flex-start;border-start-start-radius:5px}
.dg-l.s1{align-self:flex-end;background:var(--dg-bg);border-color:transparent;border-start-start-radius:16px;border-start-end-radius:5px}
.dg-l.s0:hover,.dg-l.s0.open{background:var(--surface-2)}
.dg-l.s1:hover,.dg-l.s1.open{background:var(--dg-bg);box-shadow:inset 0 0 0 1px var(--dg)}
.dg-who{display:block;margin:0 2px 3px;font-size:.72rem;font-weight:800;color:var(--brand);line-height:1.6}
.dg-l.s1 .dg-who{color:var(--dg)}
.dg-wrap .rd-g-pr{white-space:normal;overflow-wrap:anywhere}
/* «best reply» */
.rp-ctx{background:var(--surface-2);border:1px solid var(--line);border-radius:16px;padding:11px 14px 12px;margin:8px 0 12px}
.rp-sit{display:block;font-size:.78rem;color:var(--ink-faint);margin-bottom:7px;line-height:1.7}
.rp-line{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap}
.rp-who{flex:0 0 100%;font-size:.74rem;font-weight:800;color:var(--dg)}
.q-listen.rp-say{display:inline-flex;flex:none;padding:0}
.rp-en{flex:1 1 180px;min-width:0;font-family:var(--font-en);font-size:1.1rem;line-height:1.6;color:var(--ink);text-align:left;unicode-bidi:isolate;overflow-wrap:anywhere}
.rp-fa{margin-top:7px;font-size:.86rem;line-height:1.85;color:var(--ink-soft)}
.rp-ask{margin:2px 2px 10px;font-size:.92rem;font-weight:700;color:var(--ink)}
.rv-ofa{flex:1 1 100%;font-size:.78rem;line-height:1.75;color:var(--ink-soft)}
/* role-play in the speaking player */
.spk-who{margin:8px 0 -4px;font-size:.78rem;font-weight:800;color:var(--dg)}
.spk-who[hidden]{display:none}
.spk-li-who{font-size:.72rem;font-weight:800;color:var(--dg);line-height:1.5}
@media (max-width:520px){.spk-modes.four{flex-wrap:wrap}.spk-modes.four button{flex:1 1 calc(50% - 6px)}}
.spk.no-fa .spk-fa.cue{display:block!important}
.spk-fa.cue{font-size:1.05rem;color:var(--ink);font-weight:700}
.spk.myturn .spk-li.on .spk-li-en{filter:blur(5px);user-select:none}
.spk-how-i.wide{grid-column:1/-1}
.rp-prev{display:flex;flex-direction:column;gap:1px;margin:0 0 9px;padding:0 0 9px;border-bottom:1px dashed var(--line-strong)}
.rp-prev .rp-who{color:var(--ink-soft)}
.rp-pen{font-family:var(--font-en);font-size:.95rem;line-height:1.6;color:var(--ink-soft);text-align:left;unicode-bidi:isolate;overflow-wrap:anywhere}
/* phase 4: group chips on the list, group names in the speaking hub */
.dg-jump{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 4px}
.dg-jc{display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:5px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink-soft);font-family:inherit;font-size:.8rem;font-weight:700;cursor:pointer}
.dg-jc em{font-style:normal;font-weight:800;color:var(--dg)}
.dg-jc:hover{border-color:var(--dg);color:var(--ink)}
.dg-gh{scroll-margin-top:84px}
.dg-gh:focus{outline:none}
.spk-hgh{font-size:.8rem;font-weight:800;color:var(--dg);padding:12px 12px 4px;border-top:1px solid var(--line-soft)}
.spk-hgh:first-child{border-top:0;padding-top:8px}
/* ===================== انگلیسیِ خودمانی و عامیانه (phase 5) ===================== */
:root{--cs:#B04B0A;--cs-bg:#FFF1E6;--bub:#1266CF;--on-bub:#FFFFFF}
[data-theme="dark"]{--cs:#FFB273;--cs-bg:#2B1C10;--bub:#1266CF;--on-bub:#FFFFFF}
/* two part cards now share the last row of the home tools */
.tools .tc-dlg{grid-column:auto}
.tc-cas .tc-ic,.cs-cta .lqc-ic{background-image:linear-gradient(180deg,#F2994A,#C9560B)}
.cs-cm{display:block;margin-top:3px;font-size:.76rem;color:var(--ink-faint)}
.cs-warn{color:var(--accent-ink);font-weight:800}
.cs-intro{margin:14px 0 6px}
.cs-link{display:flex;align-items:center;gap:7px;margin:4px 0 10px;font-size:.9rem;font-weight:700;color:var(--brand)}
.cs-link:hover{text-decoration:underline}
/* the legend of labels */
.cs-leg{margin:10px 0 6px;padding:8px 13px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.cs-leg summary{cursor:pointer;font-weight:800;font-size:.9rem;color:var(--ink);padding:3px 0}
.cs-leg-l{list-style:none;margin:8px 0 2px;padding:0;display:grid;gap:7px}
.cs-leg-l li{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-soft);line-height:1.7}
.cs-leg-s{display:flex;flex-wrap:wrap;gap:6px}
.cs-leg-p{margin:10px 0 4px;font-size:.82rem;line-height:1.9;color:var(--ink-soft)}
/* labels */
.cs-reg,.cs-yr,.cs-st{display:inline-flex;align-items:center;flex:none;padding:1px 9px;border-radius:999px;font-size:.72rem;font-weight:800;line-height:1.8;white-space:nowrap}
.cs-yr{border:1px solid var(--line-strong);color:var(--ink-soft);background:transparent;font-weight:700}
.cs-reg.r-f{background:#E6EEFB;color:#1D4E9E}.cs-reg.r-n{background:#ECEFF2;color:#434F5B}.cs-reg.r-c{background:#E3F4EA;color:#1A6640}
.cs-reg.r-v{background:#FFF1D9;color:#7E4C00}.cs-reg.r-t{background:#EFE8FB;color:#5532A0}.cs-reg.r-y{background:#FCE6F0;color:#9A2459}
.cs-reg.r-s{background:#F4ECE4;color:#704322}.cs-reg.r-m{background:#FFE9DA;color:#9A3F08}.cs-reg.r-r{background:#FDE3E3;color:#A81F28}
.cs-reg.r-x{background:#9E1C24;color:#FFFFFF}
.cs-st.s-e{background:#E8EEF3;color:#3E5466}.cs-st.s-c{background:#E3F4EA;color:#1A6640}.cs-st.s-u{background:#E4EEFC;color:#1F4F9A}
.cs-st.s-f{background:#FFF1D9;color:#7E4C00}.cs-st.s-d{background:#ECEFF2;color:#56616C}
[data-theme="dark"] .cs-reg.r-f{background:#18243A;color:#A8C6FF}[data-theme="dark"] .cs-reg.r-n{background:#20272D;color:#C4CDD6}
[data-theme="dark"] .cs-reg.r-c{background:#14281D;color:#8EDAB0}[data-theme="dark"] .cs-reg.r-v{background:#2C2212;color:#F3C56E}
[data-theme="dark"] .cs-reg.r-t{background:#231B35;color:#C9B2F6}[data-theme="dark"] .cs-reg.r-y{background:#2D1621;color:#F59CC3}
[data-theme="dark"] .cs-reg.r-s{background:#2B211A;color:#E2B791}[data-theme="dark"] .cs-reg.r-m{background:#2F1D11;color:#FFB47E}
[data-theme="dark"] .cs-reg.r-r{background:#321517;color:#FF9EA3}[data-theme="dark"] .cs-reg.r-x{background:#C3313A;color:#FFFFFF}
[data-theme="dark"] .cs-st.s-e{background:#1E2830;color:#B5C6D3}[data-theme="dark"] .cs-st.s-c{background:#14281D;color:#8EDAB0}
[data-theme="dark"] .cs-st.s-u{background:#18243A;color:#A8C6FF}[data-theme="dark"] .cs-st.s-f{background:#2C2212;color:#F3C56E}
[data-theme="dark"] .cs-st.s-d{background:#20272D;color:#AEB9C3}
/* sections and entries */
.cs-sec{margin:6px 0 20px}
.cs-sx{margin:-2px 2px 10px;font-size:.9rem;line-height:1.95;color:var(--ink-soft)}
.cs-items{display:grid;gap:10px}
.cs-it{padding:11px 14px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);scroll-margin-top:90px;transition:box-shadow .3s}
.cs-it.lv2,.cs-it.lv3{border-inline-start:4px solid var(--accent-ink)}
.cs-top{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px}
.cs-w{font-family:var(--font-en);font-size:1.22rem;font-weight:800;color:var(--ink);unicode-bidi:isolate;overflow-wrap:anywhere}
.cs-ab{font-family:var(--font-en-read);letter-spacing:.02em}
.cs-p{font-size:.92rem;color:var(--ink-soft)}
.cs-fl{font-family:var(--font-en);font-size:.92rem;color:var(--ink-soft);unicode-bidi:isolate}
.cs-tags{display:flex;flex-wrap:wrap;gap:5px;margin:7px 0 5px}
.cs-tags:empty{display:none}
.cs-f{font-size:.86rem;color:var(--ink-soft);margin:2px 0}
.cs-f b{font-family:var(--font-en);color:var(--ink);unicode-bidi:isolate}
.cs-m{font-size:1rem;font-weight:700;line-height:1.85;color:var(--ink)}
.cs-sp{margin-top:3px;font-size:.84rem;line-height:1.85;color:var(--ink-soft)}
.cs-n{margin-top:7px;padding:6px 10px;border-radius:10px;background:var(--surface-2);font-size:.86rem;line-height:1.95;color:var(--ink-soft)}
.cs-xs{display:grid;gap:2px;margin-top:8px}
.cs-x{display:flex;align-items:flex-start;gap:8px;padding:7px 0 2px;border-top:1px dashed var(--line-strong)}
.cs-x .say-btn{margin-top:2px}
.cs-x-tx{display:flex;flex-direction:column;flex:1 1 auto;min-width:0}
.cs-x-en{font-family:var(--font-en);font-size:1rem;line-height:1.6;color:var(--ink);text-align:left;unicode-bidi:isolate;overflow-wrap:anywhere}
.cs-x-pr{font-size:.84rem;line-height:1.8;color:var(--ink-faint)}
.cs-x-fa{font-size:.9rem;line-height:1.85;color:var(--ink-soft)}
.cs-hl{box-shadow:0 0 0 3px var(--cs)}
/* texting: the message as typed, in a phone's bubble */
.cs-chat{margin-top:9px}
.cs-chat .cs-x{border-top:0;padding-top:4px}
.cs-bub{display:table;max-width:88%;margin:0 0 2px auto;padding:6px 13px;border-radius:18px 18px 5px 18px;background:var(--bub);color:var(--on-bub);font-family:var(--font-en-read);font-size:.95rem;line-height:1.55;text-align:left;unicode-bidi:isolate;overflow-wrap:anywhere}
.cs-emo{display:flex;align-items:center;gap:12px}
.cs-emoji{flex:none;font-size:2.1rem;line-height:1}
.cs-emo-tx{flex:1 1 auto;min-width:0}
/* formal and casual */
.cs-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px 10px;align-items:start;padding:11px 14px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);scroll-margin-top:90px}
.cs-side{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0}
.cs-side-l{display:flex;align-items:center;gap:6px;min-width:0;width:100%}
.cs-side .cs-x-en{flex:1 1 auto}
.cs-arr{align-self:center;color:var(--ink-faint);font-size:1.1rem}
.cs-pm,.cs-pair .cs-n{grid-column:1/-1}
.cs-pm{font-size:.92rem;font-weight:700;color:var(--ink);border-top:1px dashed var(--line-strong);padding-top:6px}
.cs-pairs{gap:8px}
@media (max-width:540px){.cs-pair{grid-template-columns:minmax(0,1fr)}.cs-arr{transform:rotate(90deg);justify-self:center}}
/* replies */
.cs-ask{margin:6px 0 8px;padding:7px 12px 4px;border-radius:14px;background:var(--cs-bg)}
.cs-ask .cs-x{border-top:0;padding-top:2px}
.cs-ask-l{display:block;font-size:.76rem;font-weight:800;color:var(--cs)}
.cs-rps{display:grid;padding:4px 12px 6px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.cs-rps>.cs-ask-l{margin-top:4px}
.cs-rp{display:flex;align-items:flex-start;gap:8px;padding:8px 0;border-bottom:1px solid var(--line-soft);scroll-margin-top:90px;transition:box-shadow .3s}
.cs-rp:last-child{border-bottom:0}
.cs-rp .say-btn{margin-top:2px}
.cs-rp .cs-reg{margin-top:4px}
.cs-rp-n{margin-top:2px;font-size:.8rem;line-height:1.85;color:var(--ink-faint)}
/* the warning before the rude words */
.cs-gate{margin:14px 0 18px;padding:20px 18px;border:1px solid var(--line);border-inline-start:4px solid var(--accent-ink);border-radius:18px;background:var(--surface);text-align:center}
.cs-gate-ic{font-size:2rem;line-height:1}
.cs-gate-h{margin:8px 0 6px;font-size:1.08rem;font-weight:800;color:var(--ink)}
.cs-gate p{margin:0;font-size:.92rem;line-height:2;color:var(--ink-soft);text-align:start}
.cs-gate-b{display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:14px}
.cs-note .lx-note-tx{line-height:2}
.cs-tips{margin:6px 0 14px;padding-inline-start:20px;line-height:2;color:var(--ink-soft);font-size:.92rem}
.cs-tips li{margin:3px 0}
/* quiz */
.cs-qs{margin:2px 0 12px;font-family:var(--font-en);font-size:.98rem;line-height:1.6;color:var(--ink-soft);text-align:center;unicode-bidi:isolate;overflow-wrap:anywhere}
.cs-qbub{margin:6px auto 12px}
.cs-qw.emo span{font-size:2.4rem}
.cs-lead{margin:8px 0 6px;font-size:.95rem;font-weight:700;line-height:1.9;color:var(--ink)}
@media (prefers-reduced-motion:reduce){.cs-it,.cs-rp{transition:none}}
/* ===================== مسیر یادگیری (phase 6) ===================== */
:root{--pt:#2457B8;
  --lvA1:#17784A;--lvA2:#0E6E7A;--lvB1:#2457B8;--lvB2:#5E38B0;--lvC1:#B03A0A;
  --lvA1-bg:#E3F4EA;--lvA2-bg:#DFF3F5;--lvB1-bg:#E4EEFC;--lvB2-bg:#EFE8FB;--lvC1-bg:#FDE8E0;
  --lvA1-ink:#17653F;--lvA2-ink:#0D5C66;--lvB1-ink:#1F4F9A;--lvB2-ink:#5532A0;--lvC1-ink:#953110}
[data-theme="dark"]{--pt:#8DB3FF;
  --lvA1-bg:#14281D;--lvA2-bg:#11292C;--lvB1-bg:#18243A;--lvB2-bg:#231B35;--lvC1-bg:#331A12;
  --lvA1-ink:#8EDAB0;--lvA2-ink:#7FD6E0;--lvB1-ink:#A8C6FF;--lvB2-ink:#C9B2F6;--lvC1-ink:#FFAE8A}
/* the level as a small label and as a tile */
.pt-chip{display:inline-flex;align-items:center;flex:none;padding:0 7px;border-radius:7px;font-family:var(--font-en-read);font-size:.72rem;font-weight:800;line-height:1.7;letter-spacing:.02em;direction:ltr;unicode-bidi:isolate;vertical-align:middle;white-space:nowrap}
.pt-badge{flex:none;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:14px;color:#fff;font-family:var(--font-en-read);font-size:1.05rem;font-weight:800;letter-spacing:.02em;direction:ltr;box-shadow:var(--hi)}
.pt-badge.sm{width:34px;height:34px;border-radius:10px;font-size:.84rem}
.pt-badge.big{width:78px;height:78px;border-radius:22px;font-size:1.7rem;margin:4px auto 10px}
.pt-chip.lv-A1{background:var(--lvA1-bg);color:var(--lvA1-ink)}.pt-chip.lv-A2{background:var(--lvA2-bg);color:var(--lvA2-ink)}
.pt-chip.lv-B1{background:var(--lvB1-bg);color:var(--lvB1-ink)}.pt-chip.lv-B2{background:var(--lvB2-bg);color:var(--lvB2-ink)}
.pt-chip.lv-C1{background:var(--lvC1-bg);color:var(--lvC1-ink)}
.pt-badge.lv-A1{background:var(--lvA1)}.pt-badge.lv-A2{background:var(--lvA2)}.pt-badge.lv-B1{background:var(--lvB1)}
.pt-badge.lv-B2{background:var(--lvB2)}.pt-badge.lv-C1{background:var(--lvC1)}
.lx-eyebrow .pt-chip{margin-inline-start:2px}
.tc-tx b .pt-chip{margin-inline-start:4px}
/* the home card: a whole row of its own, first */
.tools .tc-path{grid-column:1/-1}
.tc-path .tc-ic,.pt-cta .lqc-ic,.pt-check .lqc-ic{background-image:linear-gradient(180deg,#4F86E8,#2457B8)}
.tc-path .tc-tx{flex:1 1 auto}
.pt-mini{display:block;height:6px;margin-top:5px;border-radius:99px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.pt-mini i{display:block;height:100%;border-radius:99px;background-image:linear-gradient(90deg,var(--grad-brand-a),var(--grad-brand-b))}
.gs-tools{margin:0 0 12px}
/* the start: test, from zero, or pick a level */
.pt-start h2,.pt-today-h h2{font-size:1.05rem;font-weight:800;color:var(--ink);margin:0}
.pt-start{margin:16px 0 6px}
.pt-start .pt-cta{margin-top:12px}
.pt-zero{display:flex;align-items:center;gap:12px;width:100%;margin:10px 0 0;padding:14px;border:1px solid var(--edge-bd);border-radius:18px;background:var(--surface);color:var(--ink);font-family:inherit;text-align:start;box-shadow:var(--hi),var(--tiny);transition:transform .15s ease,border-color .15s ease}
.pt-zero:hover{transform:translateY(-2px);border-color:var(--edge-bd-hi)}
.pt-e{flex:none;width:30px;font-size:1.25rem;line-height:1;text-align:center}
.pt-tx{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
.pt-tx b{font-size:.95rem;font-weight:700;color:var(--ink);line-height:1.6;overflow-wrap:anywhere}
.pt-tx small{font-size:.78rem;color:var(--ink-soft);line-height:1.6}
.pt-det{margin:10px 0 0;padding:4px 14px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.pt-det>summary{cursor:pointer;padding:9px 0;font-weight:700;font-size:.9rem;color:var(--ink)}
.pt-det p{margin:2px 0 10px;font-size:.88rem;line-height:2;color:var(--ink-soft)}
.pt-pick{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:4px 0 12px}
.pt-pk{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 4px;border:1px solid var(--edge-bd);border-radius:14px;background:var(--surface-2);color:var(--ink);font-family:inherit;transition:transform .12s ease}
.pt-pk b{font-family:var(--font-en-read);font-size:1rem;font-weight:800;direction:ltr}
.pt-pk span{font-size:.7rem;color:var(--ink-soft);line-height:1.5;text-align:center}
.pt-pk.lv-A1 b{color:var(--lvA1-ink)}.pt-pk.lv-A2 b{color:var(--lvA2-ink)}.pt-pk.lv-B1 b{color:var(--lvB1-ink)}.pt-pk.lv-B2 b{color:var(--lvB2-ink)}.pt-pk.lv-C1 b{color:var(--lvC1-ink)}
.pt-pk.on{border-color:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand);background:var(--brand-tint)}
@media (max-width:420px){.pt-pick{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* the current level */
.pt-cur{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:16px 0 4px;padding:14px;border:1px solid var(--edge-bd);border-radius:18px;background-image:linear-gradient(158deg,var(--grad-a),var(--grad-b));box-shadow:var(--hi),var(--elev-1)}
.pt-cur-tx{display:flex;flex-direction:column;gap:2px;flex:1 1 180px;min-width:0}
.pt-cur-tx b{font-size:1.02rem;font-weight:800;color:var(--ink)}
.pt-cur-tx span{font-size:.8rem;color:var(--ink-soft)}
.pt-change{flex:1 1 100%;margin:0;background:var(--surface)}
.pt-retest{display:inline-block;margin:0 0 10px;font-size:.88rem;font-weight:700;color:var(--brand)}
.pt-retest:hover{text-decoration:underline}
/* today's plan */
.pt-today{margin:14px 0 4px;padding:16px 14px;border:1px solid var(--edge-bd);border-radius:20px;background:var(--surface);box-shadow:var(--hi),var(--tiny)}
.pt-today-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.pt-today-h span{font-size:.85rem;font-weight:800;color:var(--ink-soft)}
.pt-tasks{display:grid;gap:8px;margin-top:12px}
.pt-task,.pt-step{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);color:var(--ink);transition:transform .12s ease,border-color .12s ease}
.pt-task:hover,.pt-step:hover{transform:translateY(-1px);border-color:var(--line-strong)}
.pt-tick{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--surface);font-size:.74rem;font-weight:800;color:var(--ink-soft)}
.pt-task.done,.pt-step.done{border-color:color-mix(in srgb,var(--success) 35%,var(--line))}
.pt-task.done .pt-tick,.pt-step.done .pt-tick{background:#17784A;border-color:#17784A;color:#fff}
[data-theme="dark"] .pt-task.done .pt-tick,[data-theme="dark"] .pt-step.done .pt-tick{background:#8EDAB0;border-color:#8EDAB0;color:#0E2A1C}
.pt-task.done .pt-tx b{color:var(--ink-soft)}
.pt-yay{margin:12px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.92rem;font-weight:700;line-height:1.9;color:#17784A}
[data-theme="dark"] .pt-yay{color:#7BD9AE}
.pt-yay .btn-ghost{margin:0}
.pt-note{margin:12px 0 0;font-size:.82rem;line-height:1.95;color:var(--ink-soft)}
.pt-goal{margin-top:14px}
.pt-stk .stk{margin-top:14px}
/* the five levels */
.pt-lvs{display:grid;gap:10px}
.pt-lv{border:1px solid var(--line);border-radius:18px;background:var(--surface);overflow:hidden;scroll-margin-top:80px}
.pt-lv>summary{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}
.pt-lv>summary::-webkit-details-marker{display:none}
.pt-lv-t{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;flex:1 1 auto;min-width:0}
.pt-lv-t b{font-size:1rem;font-weight:800;color:var(--ink)}
.pt-lv-t small{flex:1 1 100%;font-size:.78rem;color:var(--ink-faint)}
.pt-lv-c{flex:none;color:var(--ink-faint);font-size:.8rem;transition:transform .15s ease}
.pt-lv[open]>summary .pt-lv-c{transform:rotate(180deg)}
.pt-lv-b{padding:0 14px 14px}
.pt-tag{display:inline-flex;padding:0 8px;border-radius:999px;font-size:.7rem;font-weight:800;line-height:1.8}
.pt-tag.ok{background:color-mix(in srgb,var(--success) 15%,transparent);color:#17653F}
.pt-tag.cur{background:var(--brand-tint);color:var(--brand)}
.pt-tag.skip{background:var(--surface-2);color:var(--ink-faint);border:1px solid var(--line)}
[data-theme="dark"] .pt-tag.ok{color:#7BD9AE}
.pt-can{margin:10px 0 8px;font-size:.88rem;line-height:2;color:var(--ink-soft)}
.pt-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
.pt-steps .pt-tick{font-size:.7rem}
.pt-check{margin-top:14px}
.pt-how{margin-top:16px}
/* the placement test */
.pt-intro .btn-primary{margin-top:16px}
.pt-rules{margin:0;padding-inline-start:20px;font-size:.92rem;line-height:2.05;color:var(--ink-soft)}
.pt-rules li{margin:2px 0}
.pt-passage{margin:0 0 8px;padding:14px 16px;border:1px solid var(--edge-bd);border-radius:14px;background:var(--surface-2);font-family:var(--font-en);font-size:1.05rem;line-height:1.85;color:var(--ink);text-align:left;overflow-wrap:anywhere}
.q-opt.pt-idk{border-style:dashed;background:transparent;color:var(--ink-soft);font-weight:700}
.q-opt.picked{border-color:var(--brand);box-shadow:inset 0 0 0 1.5px var(--brand);background:var(--brand-tint)}
.q-opt.picked .q-key{background:var(--brand);color:var(--on-brand);border-color:transparent}
.pt-stage,.pt-res{text-align:center}
.pt-stage .rs-msg,.pt-res .rs-msg{margin:8px 0 14px}
.pt-res .pt-can{text-align:start}
.pt-sc{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin:10px 0 16px}
.pt-sc-i{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 2px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);font-size:.8rem;color:var(--ink-faint)}
.pt-sc-i b{font-family:var(--font-en-read);font-size:.9rem;font-weight:800;color:var(--ink);direction:ltr}
.pt-sc-i.ok{border-color:color-mix(in srgb,var(--success) 45%,var(--line));background:color-mix(in srgb,var(--success) 10%,var(--surface))}
.pt-sc-i.no{border-color:color-mix(in srgb,var(--accent-600) 40%,var(--line))}
.pt-res .rv{text-align:start;margin-top:18px}
.pt-rvp{margin-bottom:4px;font-size:.86rem;font-weight:700;line-height:1.9;color:var(--ink-soft)}
.pt-rvp .pt-chip{margin-inline-end:4px}
/* the level test's result */
.pt-pass{margin:12px 0 4px;padding:10px 12px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);font-size:.92rem;font-weight:700;line-height:1.9;color:var(--ink-soft)}
.pt-pass.ok{background:color-mix(in srgb,var(--success) 12%,var(--surface));border-color:color-mix(in srgb,var(--success) 40%,var(--line));color:var(--ink)}
/* grammar lessons in level order */
.lorder{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:4px 0 16px}
.lorder>span{font-size:.84rem;font-weight:700;color:var(--ink-soft)}
.lorder .seg{flex:1 1 260px}
.grp[data-g^="lv-"] .grp-h{gap:10px}
.grp[data-g="lv-A1"] .card-n{background:var(--lvA1-bg);color:var(--lvA1-ink)}.grp[data-g="lv-A2"] .card-n{background:var(--lvA2-bg);color:var(--lvA2-ink)}
.grp[data-g="lv-B1"] .card-n{background:var(--lvB1-bg);color:var(--lvB1-ink)}.grp[data-g="lv-B2"] .card-n{background:var(--lvB2-bg);color:var(--lvB2-ink)}
.grp[data-g="lv-C1"] .card-n{background:var(--lvC1-bg);color:var(--lvC1-ink)}
/* a conversation topic's quiz */
.tk-qcta .lqc-ic{background-image:linear-gradient(180deg,var(--grad-accent-a),var(--grad-accent-b))}
.tk-qcta+.spk-cta{margin-top:12px}
@media (prefers-reduced-motion:reduce){.pt-zero,.pt-task,.pt-step,.pt-pk{transition:none}}
/* ===================== grammar lessons 42–53 (phase 7) ===================== */
:root{--g-spoken:#A04A12;--g-spoken-bg:#FBEBDD;--g-writing:#53601A;--g-writing-bg:#EEF2DC}
[data-theme="dark"]{--g-spoken:#F4A26B;--g-spoken-bg:#2D2017;--g-writing:#C2D36A;--g-writing-bg:#23271A}
.grp[data-g="spoken"] .card-n{background:var(--g-spoken-bg);color:var(--g-spoken)}
.grp[data-g="spoken"] .grp-dot{background:var(--g-spoken)}
.grp[data-g="writing"] .card-n{background:var(--g-writing-bg);color:var(--g-writing)}
.grp[data-g="writing"] .grp-dot{background:var(--g-writing)}
.eb.advanced{background:var(--g-advanced)}
.eb.spoken{background:var(--g-spoken)}
.eb.writing{background:var(--g-writing)}
[data-theme="dark"] .grp[data-g="spoken"] .card-n,[data-theme="dark"] .grp[data-g="writing"] .card-n{background:var(--surface-2)}

/* ===================== phase 8: IPA and part of speech ===================== */
.vw-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px}
.vw-ipa{font-size:.88rem;color:var(--sd);line-height:1.4;overflow-wrap:anywhere}
.pos-chip{display:inline-block;font-size:.7rem;font-weight:700;line-height:1.5;color:var(--ink-soft);
  background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:1px 9px;
  white-space:nowrap;vertical-align:middle}
.vw.tk-v.open .pos-chip{background:var(--surface)}
.fc-ipa{font-size:1.08rem;color:var(--sd);line-height:1.4;text-align:center}
.fc-tags{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:4px}
.fc-tags .fc-theme{margin-top:0}
.fc-tags .pos-chip{font-size:.76rem;padding:4px 11px}
.q-ipa{text-align:center;color:var(--sd);font-size:1rem;line-height:1.4;margin-bottom:3px}
.q-answer-ipa{color:var(--sd);font-size:.95rem;line-height:1.4;margin-top:4px;text-align:left}
.q-answer-fa .pos-chip{margin-inline-start:4px;background:var(--surface)}
.vrow-enw{display:flex;flex-direction:column;align-items:flex-start;flex:none;min-width:0;gap:1px}
.vrow-ipa{font-size:.78rem;color:var(--sd);line-height:1.3}
.gs-res .vrow .vrow-enw{min-width:0;flex:0 1 auto}
/* «(Parts of the Body)» after a Persian heading came out as «Parts of the) … (Body»: an isolated
   span still took the heading's right-to-left direction. plaintext gives the aside the direction of
   its own first letter, so the English asides read left to right and the Persian ones right to left. */
.en-mut{unicode-bidi:plaintext}
/* search mode folded the page title away with display:none, which left the home screen without any
   h1 for screen readers; it now only hides it visually */
html.hsearching .hero-title{display:block;position:absolute!important;width:1px!important;height:1px!important;
  margin:-1px!important;padding:0!important;border:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;white-space:nowrap!important}

/* ===================== phase 9: the core everyday words ===================== */
.grp[data-g="core"] .grp-dot{background:var(--accent)}
.grp[data-g="topics"] .grp-dot{background:var(--brand)}
.tg-sec .tgrid{margin-top:0}
.jmj-sec-p{margin:-4px 0 12px;font-size:.86rem;color:var(--ink-soft);line-height:1.9}
.tg-lead{margin:-4px 0 12px;font-size:.86rem;color:var(--ink-soft);line-height:1.9}
.vg-lead{margin-top:-6px}
.vgrid-words.vg-core{grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.vgrid-words.vg-core > *{contain-intrinsic-size:auto 150px}
.wx{display:flex;flex-direction:column;gap:3px;width:100%}
.wx p{margin:0}
.wx-en{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;font-family:var(--font-en);
  color:var(--ink);line-height:1.55;font-size:.95rem}
.wx-en>span:first-child{flex:1;min-width:0;unicode-bidi:isolate;overflow-wrap:anywhere}
.wx-en>.say-btn{flex:none;margin-top:1px}
.wx-pr{color:var(--pron);font-size:.8rem;line-height:1.8;overflow-wrap:anywhere}
.wx-fa{color:var(--ink-soft);font-size:.9rem;line-height:1.75}
.wx-nt{margin-top:3px!important;font-size:.8rem;line-height:1.85;color:var(--ink-soft);background:var(--surface-2);
  border:1px solid var(--line);border-radius:9px;padding:5px 10px}
.vw-x{padding-top:7px;border-top:1px dashed var(--line)}
.vw.tk-v.open .wx-nt{background:var(--surface)}
.fc-ex{padding-top:9px;border-top:1px dashed var(--line);text-align:start}
.fc-ex .wx-en{font-size:1rem}
.fc-ex .wx-fa{text-align:right}
.q-answer-ex{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.q-answer-ex .wx-pr,.q-answer-ex .wx-fa,.q-answer-ex .wx-nt{text-align:right}
.q-answer-ex .wx-nt{background:var(--surface)}

/* ===================== phases 10-11: examples, collocations, word families ===================== */
.vw-more{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px 20px;
  padding-top:9px;border-top:1px dashed var(--line);width:100%}
.vg-core .vw-more{grid-template-columns:1fr}
.vw-more .vw-x{padding-top:0;border-top:0}
.vgrid-words:not(.vg-core) > .vw.vw-d.open{grid-column:1/-1;contain-intrinsic-size:auto 260px}
.wsec{display:block;font-size:.74rem;font-weight:700;color:var(--ink-faint);margin:0 0 5px}
.vw-more .vw-x::before{content:"جمله‌ی نمونه";display:block;font-size:.74rem;font-weight:700;color:var(--ink-faint);margin:0 0 3px}
.wl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.wl p{margin:0}
.wl-top{display:flex;align-items:center;gap:7px;justify-content:space-between}
.wl-en{flex:1;min-width:0;font-family:var(--font-en);font-weight:600;font-size:.93rem;color:var(--brand);line-height:1.45;
  unicode-bidi:isolate;overflow-wrap:anywhere}
.wl-top .pos-chip{flex:none}
.wl-top .say-btn{flex:none}
.wl-sub{display:flex;flex-wrap:wrap;gap:0 10px;font-size:.84rem;line-height:1.75}
.wl-pr{color:var(--pron)}
.wl-fa{color:var(--ink-soft)}
.vw.tk-v.open .wl-top .pos-chip{background:var(--surface)}
.fc-wl{width:100%;padding-top:9px;border-top:1px dashed var(--line);text-align:start}
.fc-wl .wl-sub{justify-content:flex-start}