/* کتاب هوشمند — استایل کتاب‌خوان
   تمرکز: خوانایی بالا، پشتیبانی کامل RTL، و کار درست روی موبایل. */

@font-face {
  font-family: "Vazirmatn";
  src: local("Vazirmatn"), local("Vazir"), local("Tahoma");
  font-display: swap;
}

:root {
  --bg: #eef1f6;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --ink: #131a26;
  --ink-soft: #5b6675;
  --line: #dde3ec;
  --brand: #2f6df6;
  --brand-ink: #ffffff;
  --accent: #0f9d70;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --shadow-md: 0 4px 12px rgba(16, 24, 40, .08), 0 12px 28px rgba(16, 24, 40, .10);
  --radius: 14px;
  --radius-sm: 10px;
  --topbar-h: 56px;
  --bottombar-h: 62px;
  /* ارتفاعِ واقعیِ نوار پایین. با باز شدن ردیف قرائت یا کارتِ راهنما
     بزرگ‌تر می‌شود و جاوااسکریپت آن را به‌روز می‌کند. `--bottombar-h`
     عمداً ثابت می‌ماند تا حلقه‌ی تغییر اندازه نسازیم. */
  --bar-h: var(--bottombar-h);
  --font: "Vazirmatn", "IRANSans", "Segoe UI", Tahoma, system-ui, sans-serif;
}

* { box-sizing: border-box; }

/* هر عنصری که `hidden` دارد باید واقعاً پنهان باشد.
   چرا این قاعده لازم است: بعضی عنصرها `display` صریح دارند
   (مثلاً `.icon-btn { display: grid }`)، و آن، خاصیت `hidden` مرورگر را
   باطل می‌کند؛ نتیجه این بود که دکمه‌ی «حالت معلم» برای دانش‌آموز هم
   دیده می‌شد. این قاعده یک‌بار برای همیشه جلوی این اشتباه را می‌گیرد. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

button, input, select, textarea { font: inherit; color: inherit; }

.app {
  display: grid;
  /* تک‌ستونی و *قابل‌جمع‌شدن*. با `auto` ضمنی، ستون به min-content نوار
     بالا (~۸۲۰ پیکسل) گره می‌خورد و در عرض‌های میانی (تبلت عمودی) نوار
     از لبه‌ی چپ بیرون می‌زد و شماره‌ی صفحه ناپدید می‌شد.
     `minmax(0, 1fr)` می‌گذارد ستون به عرض واقعی صفحه جمع شود. */
  grid-template-columns: minmax(0, 1fr);
  /* ردیف پایین با محتوا بزرگ/کوچک می‌شود (ردیف قرائت در قرآن)؛ اگر
     اندازه‌ی ثابت بماند، در موبایل دکمه‌ی قرائت بریده می‌شود. */
  grid-template-rows: var(--topbar-h) minmax(0, 1fr) auto;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

/* ---------------------------------------------------------------- topbar */
.topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  min-width: 0;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  z-index: 30;
}

.topbar-center {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.topbar-actions { display: flex; gap: 4px; }

.book-picker {
  flex: 1;
  min-width: 0;
  max-width: 340px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-weight: 600;
}

.page-indicator {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--ink-soft);
  white-space: nowrap;
  direction: ltr;
}

/* کادر شماره‌ی صفحه: با زدن عدد، مستقیم به همان صفحه می‌رود. */
.page-jump {
  width: 3.2em;
  padding: 1px 2px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  font: inherit;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: inherit;
  text-align: center;
}
.page-jump:focus { outline: 2px solid var(--brand); outline-offset: 1px; background: var(--surface); }
.page-jump::placeholder { color: var(--ink-soft); opacity: .6; }
.page-total { color: var(--ink-soft); }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background .15s, border-color .15s;
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--line); }
.icon-btn:active { transform: translateY(1px); }
.icon-btn.accent { color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.icon-btn:focus-visible,
.btn:focus-visible,
.tab:focus-visible,
.grade-card:focus-visible,
.book-card:focus-visible,
.stage:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ----------------------------------------------------------------- stage */
.stage {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  align-items: stretch;
  min-height: 0;
  background:
    radial-gradient(1200px 400px at 50% -80px, rgba(47,109,246,.07), transparent 60%),
    var(--bg);
}

.page-wrap {
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 14px;
  min-height: 0;
  scrollbar-width: thin;
  /* لمس‌های چندانگشتی برای پینچ‌زوم خودمان مدیریت می‌شوند. */
  touch-action: pan-x pan-y;
}

/* در حالت زوم، صفحه‌ی بزرگ‌شده از بالا-وسط شروع می‌شود؛ وگرنه با
   وسط‌چین‌بودنِ گرید، بالای صفحه در ناحیه‌ی اسکرول‌نشده گم می‌شد. */
.page-wrap.is-zoomed {
  place-items: start center;
  cursor: grab;
}

.page-frame {
  margin: 0;
  background: #fff;
  border-radius: 6px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: box-shadow .2s;
  /* لینک‌های خودِ کتاب (QR) روی همین قاب می‌نشینند. */
  position: relative;
}

/* کادرهای کلیک‌پذیر QR/نشانی که از لایه‌ی خود PDF می‌آیند. */
.page-links {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.page-link {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 6px;
  pointer-events: auto;
  cursor: pointer;
  transition: background .15s, box-shadow .15s;
}
.page-link:hover,
.page-link:focus-visible {
  background: color-mix(in srgb, var(--brand) 22%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 65%, transparent);
  outline: none;
}

/* ----------------------------------------------------- لایه‌ی مداد و یادداشت */
/* بوم دقیقاً روی خودِ تصویر صفحه می‌نشیند (قاب position:relative دارد)، پس
   مختصاتِ درصدی‌اش با هر زوم و چرخشی سر جای خود می‌ماند. */
.ink-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* خاموش که هست، کلیک‌ها به کتاب برسند (QR و زوم). */
  pointer-events: none;
  touch-action: auto;
  border-radius: inherit;
}
.ink-canvas.is-on { pointer-events: auto; cursor: crosshair; }
/* ابزار «جابه‌جایی»: بوم کنار می‌رود تا خودِ مرورگر صفحه را نرم بکشد. */
.ink-canvas.is-on.is-hand { pointer-events: none; }
/* در حین یادداشت‌نویسی، QRها نباید کلیک را بدزدند. */
body.is-inking .page-links { pointer-events: none; }

/* کادرِ یادداشت متنی که روی بوم باز می‌شود. */
.ink-text-input {
  position: absolute;
  translate: -100% 0;
  min-width: 120px;
  max-width: 60%;
  padding: 3px 8px;
  border: 1px solid var(--brand);
  border-radius: 7px;
  background: #fff;
  font: inherit;
  font-size: 13px;
  direction: rtl;
  box-shadow: var(--shadow-sm);
  z-index: 5;
}

/* ------------------------------------------------------------ نوارِ مداد */
.ink-bar {
  position: fixed;
  /* روی نوار پایین می‌نشیند، نه رویش. `--bar-h` ارتفاعِ واقعیِ نوار است
     (با باز شدن ردیف قرائت/کارت راهنما بلندتر می‌شود). */
  inset-block-end: calc(var(--bar-h) + 10px);
  /* مثل toast: هر دو لبه صفر و با margin خودکار وسط می‌نشیند. `inset-inline:
     50%` هر دو طرف را روی ۵۰٪ می‌گذاشت و نوار را به چند پیکسل جمع می‌کرد. */
  inset-inline: 0;
  margin-inline: auto;
  width: fit-content;
  z-index: 75;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: min(680px, 94vw);
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow-md);
}
.ink-bar[hidden] { display: none; }
.ink-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-inline: 4px;
}
.ink-group + .ink-group { border-inline-start: 1px solid var(--line); }
.ink-btn {
  min-width: 34px;
  height: 34px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ink-btn:hover { background: var(--surface-2); }
.ink-btn.is-active {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 14%, var(--surface));
}
.ink-btn.ink-done {
  font-size: 13px;
  font-weight: 700;
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.ink-swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid var(--surface);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 0 1px var(--line);
}
.ink-swatch.is-active { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 60%, transparent); }

/* دکمه‌ی خروجی در نوار پایین. */
.btn-export {
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 99px;
  border: 1px solid var(--line);
  background: var(--surface-2);
}

/* منوی شناورِ خروجی (ذخیره/چاپ). */
.export-menu {
  position: fixed;
  inset-block-end: calc(var(--bottombar-h) + 16px);
  inset-inline-end: 12px;
  z-index: 78;
  display: grid;
  gap: 6px;
  width: min(280px, 88vw);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow-lg, var(--shadow-md));
}
.export-menu[hidden] { display: none; }
.export-title { margin: 0; font-weight: 700; font-size: 14px; }
.export-note { margin: 0 0 2px; font-size: 12px; color: var(--ink-soft); line-height: 1.7; }
.btn-ghost { background: var(--surface-2); }
/* روی صفحه‌های لمسی به‌جای هاور، حلقه‌ی ملایمی نشان می‌دهد که کلیک‌پذیر است. */
@media (hover: none) {
  .page-link { box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); }
}

.page-frame[data-zoomed="1"] {
  overflow: visible;
  border-radius: 2px;
  box-shadow: var(--shadow-md), 0 0 0 1px var(--line);
  cursor: grab;
}

.page-frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100dvh - var(--topbar-h) - var(--bar-h) - 40px);
  object-fit: contain;
  background: #fff;
}
/* در حالت زوم، ارتفاع مقید نمی‌شود و قاب خودش اندازه‌ی بزرگ‌شده را دارد؛
   پس `page-wrap` واقعاً اسکرول/پن می‌شود. */
.page-frame[data-zoomed="1"] img { max-height: none; }

/* نشانگر درصد زوم: با کلیک، به حالت «جای‌کامل» برمی‌گردد. */
.zoom-badge {
  position: fixed;
  inset-block-start: calc(var(--topbar-h) + 10px);
  inset-inline-start: 10px;
  z-index: 40;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.page-spinner {
  position: absolute;
  inset-block-start: 18px;
  inset-inline-start: 50%;
  translate: 50% 0;
  width: 22px;
  height: 22px;
  border: 3px solid var(--line);
  border-block-start-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { rotate: 1turn; } }

.nav-zone {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink-soft);
  font-size: 30px;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
  /* تیرهای ورق‌زدن باید *زیرِ پرده* (`.scrim`, z-index ۵۰) و زیر کشوها
     (۶۰) بنشینند. چرا زیر پرده و نه بالای آن: تیرِ «صفحه‌ی بعد» در
     چیدمان راست‌به‌چپ دقیقاً روی لبه‌ی چپ می‌نشیند — همان‌جا که کشوی
     جست‌وجو/چت/نمونه‌سؤال باز می‌شود. پیش‌تر z-index آن ۷۰ بود و روی کشو
     می‌افتاد؛ پیامدش این بود که لمس و اسکرول در آن نوار ۵۶ پیکسلی به‌جای
     نمونه‌سؤال، صفحه را ورق می‌زد.

     با ۴۵ (زیر پرده) وقتی کشویی باز است، لمس آن ناحیه به پرده می‌رسد و
     کشو بسته می‌شود — همان انتظاری که کاربر دارد. وقتی کشویی باز نیست،
     پرده `visibility: hidden` است و کلیک‌ها را نمی‌گیرد، پس تیرها
     عادی کار می‌کنند. */
  position: relative;
  z-index: 45;
}
.nav-zone:hover { background: rgba(47,109,246,.07); color: var(--brand); }
.nav-zone:disabled { opacity: .3; cursor: default; }

/* -------------------------------------------------------------- bottombar */
.bottombar {
  background: var(--surface);
  border-block-start: 1px solid var(--line);
  padding: 6px 12px 8px;
  z-index: 30;
  /* در کتاب‌های آیه‌دار ردیف «قرائت» هم زیر همین نوار اضافه می‌شود؛
     بدون این، ارتفاع ثابت نوار باعث می‌شد دکمه‌ی قرائت زیر لبه‌ی صفحه
     بریده شود. grid ردیف را با محتوا بزرگ می‌کند. */
  min-height: var(--bottombar-h);
  box-sizing: border-box;
}

.progress-track {
  position: relative;
  height: 6px;
  border-radius: 99px;
  background: var(--line);
  cursor: pointer;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 55%, var(--accent)));
  transition: width .12s ease-out;
}

.progress-marks { position: absolute; inset: 0; pointer-events: none; }
.progress-marks i {
  position: absolute;
  inset-block: 0;
  width: 2px;
  background: rgba(19,26,38,.28);
}

.bottombar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-block-start: 6px;
  min-height: 24px;
}
.spacer { flex: 1; }

.chip {
  padding: 3px 9px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: color-mix(in srgb, var(--brand) 80%, #000);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 34vw;
}
.chip-muted {
  background: var(--surface-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.chip:empty { display: none; }

/* ردیفِ «قرائت عربی» — فقط در کتاب قرآن و روی صفحه‌های دارای متن عربی. */
.guide-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block-start: 6px;
}
.guide-row[hidden] { display: none; }
.btn-guide {
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: color-mix(in srgb, var(--accent) 85%, #000);
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 99px;
}
.btn-guide:disabled { opacity: .6; }

/* منوی «کدام تمرین؟» که پیش از راهنما باز می‌شود. */
.guide-menu {
  display: flex;
  flex-direction: column;
  gap: 6px;
  inline-size: 100%;
  padding: 8px;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}
.guide-menu .guide-menu-head {
  font-size: 12.5px;
  color: var(--ink-soft);
}
.guide-menu button {
  text-align: start;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.guide-menu button:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.guide-menu button.is-primary {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  font-weight: 700;
}

/* کارتِ راهنما: جواب همان‌جا کنار کتاب می‌آید و بچه مجبور نیست کشوی چت
   را خودش باز کند. */
.guide-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block-start: 6px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  /* سقفِ ارتفاع تا خودِ صفحه‌ی کتاب از قاب بیرون نرود؛ بدنه‌ی کارت
     جداگانه اسکرول می‌شود. */
  max-height: min(34vh, 280px);
}
.guide-card[hidden] { display: none; }
.guide-card.is-error { border-color: #f5c2c2; background: #fdecec; }
.guide-card.is-error .guide-card-title { color: #8a1c1c; }
.guide-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.guide-card-head .icon-btn { width: 26px; height: 26px; font-size: 13px; margin-inline-start: auto; }
.guide-card-title {
  font-weight: 700;
  font-size: 13px;
  color: color-mix(in srgb, var(--accent) 80%, #000);
}
.guide-card-body {
  overflow-y: auto;
  font-size: 13.5px;
  line-height: 1.85;
  white-space: pre-wrap;
  color: var(--ink);
  /* در حالت انتظار، نقطه‌چین متحرک حس «دارم کار می‌کنم» می‌دهد. */
  min-height: 1.4em;
}
.guide-card-body.is-waiting { color: var(--ink-soft); }
.guide-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.guide-card-foot .btn { font-size: 12.5px; padding: 4px 10px; }
.guide-card-foot[hidden] { display: none; }

/* ردیفِ «قرائت عربی» — فقط در کتاب قرآن و روی صفحه‌های دارای متن عربی. */
.recite-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-block-start: 6px;
}
.recite-row[hidden] { display: none; }
.btn-recite {
  border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--line));
  background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  color: color-mix(in srgb, var(--brand) 85%, #000);
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 99px;
}
.btn-recite.is-playing {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.btn-recite:disabled { opacity: .6; }

.recite-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-soft);
}
.recite-pick-label { white-space: nowrap; }
.recite-pick select {
  max-width: min(44vw, 320px);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: var(--surface);
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
}

/* ------------------------------------------------------------ بخش معلم */
/* --------------------------------------------------------- صفحه‌ی شروع
   دو گام: انتخاب پایه، بعد قفسه‌ی جلد کتاب‌ها. کل صفحه را می‌گیرد و
   وقتی کتابی انتخاب شد کنار می‌رود. `overflow:auto` لازم است چون در
   موبایل قفسه‌ی هشت کتاب بلندتر از صفحه می‌شود. */
.start-screen {
  position: absolute;
  inset: 0;
  z-index: 100;
  background:
    radial-gradient(1200px 500px at 50% -10%,
      color-mix(in srgb, var(--brand) 16%, var(--bg)), var(--bg));
  overflow: auto;
  display: flex;
  justify-content: center;
}
/* `display:flex` خاصیت `hidden` را باطل می‌کند؛ این قاعده جلویش را
   می‌گیرد (همان باگی که در پنجره‌ی معلم پیش آمد). */
.start-screen[hidden] { display: none; }

.start-inner {
  inline-size: min(760px, 100%);
  padding: 26px 16px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.start-head { text-align: center; }
/* لوگو در صفحه‌ی شروع.
   چرا «عرض ثابت + ارتفاع خودکار»: لوگو یک نشان افقی است (نسبت ۲٫۷:۱)،
   نه مربع. اگر ارتفاع ثابت بدهیم، نشان کشیده یا له می‌شود. پس فقط عرض
   محدود می‌شود و ارتفاع خودش حساب می‌شود. */
.start-logo {
  display: block;
  inline-size: min(230px, 62vw);
  block-size: auto;
  margin: 0 auto 12px;
  border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.start-head h1 {
  margin: 0 0 6px;
  font-size: clamp(22px, 6vw, 30px);
  letter-spacing: -.3px;
}
.start-sub { margin: 0; color: var(--ink-soft); font-size: 14px; line-height: 1.9; }

/* نشان‌های کوتاهِ زیر عنوان: دانش‌آموز در یک نگاه بفهمد داخل نرم‌افزار
   چه چیزی هست. روی گوشی زیر هم می‌روند و راست‌چین می‌مانند. */
.start-badges {
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}
.start-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.start-foot {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  text-align: center;
}

.start-step { display: flex; flex-direction: column; gap: 12px; }
.start-step.is-hidden { display: none; }
.start-label { margin: 0; font-size: 16px; font-weight: 700; }
.step-head { display: flex; align-items: center; gap: 10px; }

/* یک خط خلاصه بالای قفسه: «۸ کتاب • ۹۶۸ صفحه». */
.shelf-summary {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12.5px;
}

/* دکمه‌های پایه: کارت‌های بزرگ و لمس‌پذیر. پایه‌های آماده‌نشده کِدر و
   غیرفعال‌اند تا معلوم باشد بعداً می‌آیند. */
.grade-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.grade-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 18px 14px 16px;
  cursor: pointer;
  text-align: start;
  box-shadow: var(--shadow-sm);
  transition: translate .15s, box-shadow .15s, border-color .15s;
  font: inherit;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* نوارِ رنگیِ بالای کارتِ پایه‌های آماده؛ پایه‌های غیرفعال بدون نوار می‌مانند. */
.grade-card.is-ready::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 4px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
}
.grade-card:hover:not(:disabled) {
  translate: 0 -2px;
  border-color: var(--brand);
  box-shadow: var(--shadow-md);
}
.grade-card:disabled { opacity: .5; cursor: not-allowed; }
.grade-card .num {
  display: block;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
}
.grade-card .note { font-size: 12.5px; color: var(--ink-soft); }
.grade-card .stack {
  display: flex;
  gap: 3px;
  margin-block-start: 8px;
}
/* چند «جلد» کوچک به‌عنوان نماد کتاب‌های آن پایه. */
.grade-card .stack i {
  inline-size: 13px;
  block-size: 17px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--brand) 55%, var(--surface-2));
  box-shadow: inset -3px 0 0 color-mix(in srgb, var(--brand) 85%, #000);
}
.grade-card:disabled .stack i { background: var(--line); box-shadow: none; }
.grade-card.is-ready { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }

/* قفسه‌ی کتاب: جلدها با نسبت واقعی کتاب. */
.shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: 14px;
}
.book-card {
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: translate .15s;
}
.book-card:hover { translate: 0 -3px; }
.book-cover {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}
.book-cover img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
/* روبانِ رنگی هر درس روی لبه‌ی جلد، تا در قفسه از هم زود تشخیص داده شوند. */
.book-cover::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0;
  inline-size: 5px;
  block-size: 100%;
  background: var(--spine, var(--brand));
}
.book-name { font-size: 13px; font-weight: 700; text-align: center; }
.book-meta { font-size: 11.5px; color: var(--ink-soft); text-align: center; }

.shelf-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-soft);
  padding: 24px 0;
}

@media (max-width: 420px) {
  .start-inner { padding: 20px 12px 32px; }
  .shelf { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .grade-list { grid-template-columns: repeat(2, 1fr); }
}

/* پنل معلم روی کل صفحه می‌نشیند (نه کشو) چون پاسخ‌نامه متنِ بلندی است و
   معلم باید بی‌زحمت بخواند و چاپ کند. در حالت دانش‌آموز این پنل هرگز
   باز نمی‌شود و دکمه‌ی 🎓 هم پنهان است. */
.teacher-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  z-index: 80;
  overflow: hidden;
}
/* همان داستان پنجره‌ی ورود: بدون این، پنلِ بسته هم روی صفحه می‌ماند. */
.teacher-panel[hidden] { display: none; }
.teacher-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-block-end: 1px solid var(--line);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
  flex: 0 0 auto;
}
.teacher-badge {
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
}
.teacher-title { font-weight: 700; font-size: 14px; }
.teacher-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 12px 14px 28px;
  min-height: 0;
  overscroll-behavior: contain;
}
.teacher-body.is-hidden { display: none; }
.teacher-panel .tabs { flex: 0 0 auto; }

/* کارتِ هر تمرین: صورت تمرین، بعد جواب و نکته و دام. */
.tp-item {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  padding: 9px 11px;
  margin-block-end: 9px;
}
.tp-head { display: flex; align-items: center; gap: 7px; margin-block-end: 6px; }
.tp-number {
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: 7px;
  min-inline-size: 22px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  padding: 1px 6px;
}
.tp-section {
  font-size: 11.5px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}
.tp-text { margin: 0 0 8px; line-height: 1.85; }
/* هر سه سطر جواب با رنگ جدا می‌شوند تا معلم سریع پیدایشان کند. */
.tp-answer, .tp-hint, .tp-trap {
  border-radius: var(--radius-sm);
  padding: 6px 9px;
  margin-block-start: 6px;
  line-height: 1.85;
  font-size: 13.5px;
}
.tp-answer { background: color-mix(in srgb, #16a34a 12%, transparent); }
.tp-hint   { background: color-mix(in srgb, #2563eb 10%, transparent); }
.tp-trap   { background: color-mix(in srgb, #d97706 12%, transparent); }
.tp-label { font-weight: 700; }

/* جزوه‌ی تدریس: هر بخش با تیتر و فهرست. */
.tp-pack { margin-block-end: 14px; }
.tp-pack h3 { margin: 0 0 6px; font-size: 14px; }
.tp-pack ul { margin: 0; padding-inline-start: 18px; line-height: 2; }
.tp-pack-note {
  background: var(--surface-2);
  border-inline-start: 3px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: 7px 10px;
  margin-block-end: 16px;
  line-height: 1.9;
  font-size: 13.5px;
}

/* پنجره‌ی ورود معلم */
.modal {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, .45);
  z-index: 90;
  padding: 16px;
}
/* `display: flex` خاصیت `hidden` مرورگر را باطل می‌کند، پس پنجره‌ی بسته
   با اینکه `hidden` داشت روی صفحه می‌مانْد و کل رابط را قفل می‌کرد
   (کلیک روی ☰ به‌جای فهرست، به این لایه می‌رسید). این قاعده جلوی آن را
   می‌گیرد و باید *بعد* از `display: flex` بیاید. */
.modal[hidden] { display: none; }
.modal-box {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 16px;
  inline-size: min(420px, 100%);
  max-height: 90vh;
  overflow: auto;
}
.modal-box h2 { margin: 0 0 8px; font-size: 17px; }
.modal-note { color: var(--ink-soft); font-size: 13px; line-height: 1.95; margin: 0 0 12px; }
.modal-box input {
  inline-size: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font: inherit;
  background: var(--surface-2);
  color: var(--ink);
}
.modal-error { color: #b91c1c; font-size: 13px; margin: 8px 0 0; }
.modal-foot { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 14px; }

/* ردیفِ نقش در ته فهرست: «حالت دانش‌آموز» + دکمه‌ی ورود معلم. */
.role-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-block-start: 1px solid var(--line);
  flex: 0 0 auto;
}

/* چاپِ پاسخ‌نامه: فقط خودِ پنل معلم روی کاغذ می‌آید. */
@media print {
  body > .app > *:not(.teacher-panel) { display: none !important; }
  .teacher-panel { position: static; }
  .teacher-panel .tabs, .teacher-head .icon-btn { display: none !important; }
  .teacher-body { overflow: visible; }
  .tp-item, .tp-pack-note { break-inside: avoid; }
}

/* ---------------------------------------------------------------- drawers */
.drawer {
  position: absolute;
  inset-block: 0;
  inline-size: min(420px, 92vw);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  /* کشو یک ستونِ منعطف است، نه گریدِ سه‌ردیفه.
     کشوی نمونه‌سؤال پنج فرزند دارد (سر، تب‌ها، نوارابزار، پنل فصل، پنل
     جمع‌بندی) ولی گرید فقط سه ردیف تعریف کرده بود؛ ردیف `1fr` نصیبِ
     نوارابزار می‌شد و پنل سؤال‌ها `auto` می‌ماند. نتیجه این بود که
     نوارابزار له می‌شد و پنلِ سؤال‌ها با `overflow:auto` هرگز ارتفاعِ
     محدود نمی‌گرفت، پس **اسکرول نمی‌شد** و سؤال‌ها زیر لبه‌ی صفحه گم
     می‌شدند. با flex هر تعداد فرزند درست چیده می‌شود و تنها بدنه‌ی مرئی
     فضای باقی‌مانده را جذب می‌کند. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 60;
  visibility: hidden;          /* کشوی بسته نباید کلیک‌ها را بگیرد */
  transition: translate .24s ease, visibility .24s;
}

/* در چیدمان راست‌به‌چپ، فهرست سمت راست و جست‌وجو/چت سمت چپ می‌نشینند.
   کشوی بسته باید به سمت بیرونِ همان لبه برود. */
.drawer-start { inset-inline-start: 0; translate: 100% 0; }
.drawer-end   { inset-inline-end: 0;   translate: -100% 0; }
.drawer.is-open { translate: 0 0; visibility: visible; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-block-end: 1px solid var(--line);
}
.drawer-head h2 { margin: 0; font-size: 16px; }

.tabs { display: flex; gap: 4px; padding: 8px 12px 0; }
.tab {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-block-end: 0;
  border-start-start-radius: var(--radius-sm);
  border-start-end-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-soft);
}
.tab.is-active {
  background: var(--surface);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--brand);
}

/* سر، تب‌ها و نوارابزار ارتفاع طبیعی خودشان را نگه می‌دارند
   (`flex: 0 0 auto`) و تنها بدنه فضای باقی‌مانده را می‌گیرد و اسکرول
   می‌شود (`flex: 1 1 auto` + `min-height: 0`). بدون `min-height: 0`
   یک فرزندِ flex زیر محتوای بزرگ خودش را نمی‌فشارد و اسکرول نمی‌شود. */
.drawer-head, .tabs, .quiz-toolbar, .search-box, .chat-scope,
.model-cost, .chat-foot {
  flex: 0 0 auto;
}
.drawer-body, .chat-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 10px 12px 20px;
  min-height: 0;
  overscroll-behavior: contain;
}
.drawer-body.is-hidden { display: none; }

/* درخت دانش */
.chapter {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  margin-block-end: 8px;
  overflow: hidden;
  background: var(--surface);
}
.chapter > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-2);
}
.chapter > summary::-webkit-details-marker { display: none; }
.chapter > summary .num {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 12px;
}
.lesson {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-block-start: 1px solid var(--line);
  background: transparent;
  text-align: start;
  cursor: pointer;
  font-size: 14px;
}
.lesson:hover { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.lesson.is-current { background: color-mix(in srgb, var(--brand) 11%, transparent); font-weight: 700; }
.lesson .pg {
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  direction: ltr;
}
.lesson .kind {
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 99px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}

/* بندانگشتی‌ها */
.thumbs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.thumb {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 4px;
  cursor: pointer;
  position: relative;
}
.thumb img { display: block; width: 100%; border-radius: 5px; }
.thumb span {
  display: block;
  text-align: center;
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  margin-block-start: 2px;
}
.thumb.is-current { outline: 2px solid var(--brand); outline-offset: 1px; }

/* جست‌وجو */
.search-box { display: flex; gap: 6px; padding: 10px 12px; }
.search-box input {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.btn {
  padding: 9px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  cursor: pointer;
  font-weight: 600;
}
.btn:hover { background: var(--surface); border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); }
.btn-primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn-primary:hover { background: color-mix(in srgb, var(--brand) 88%, #000); }

.hint { color: var(--ink-soft); font-size: 13px; line-height: 1.9; }

.result {
  display: block;
  width: 100%;
  text-align: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 10px 12px;
  margin-block-end: 8px;
  cursor: pointer;
}
.result:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); }
.result .meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-block-end: 4px;
  font-size: 12px;
  color: var(--ink-soft);
}
.result mark { background: #ffe9a8; border-radius: 3px; padding: 0 2px; }

/* ------------------------------------------------- نمونه‌سؤال فصل */
.quiz-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.quiz-toolbar .btn { font-size: 12.5px; padding: 5px 12px; }
/* شمار سؤال‌ها: به دانش‌آموز می‌گوید چند سؤال در این تب هست. */
.quiz-count {
  font-size: 11.5px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
/* تب‌های نمونه‌سؤال کمی جمع‌تر از تب‌های فهرست‌اند تا هر دو در عرض
   گوشی جا شوند («این فصل» / «جمع‌بندی کل کتاب»). */
#drawer-quiz .tab { padding: 8px 6px; font-size: 12.5px; }
.quiz-item {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--surface);
}
.quiz-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.quiz-number {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
  font-weight: 700;
  font-size: 12.5px;
}
.quiz-level {
  font-size: 11.5px;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--line) 45%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}
.quiz-page {
  font-size: 11.5px;
  padding: 3px 9px;
}
.quiz-question { margin: 0 0 8px; line-height: 1.75; }
.quiz-options {
  margin: 0 0 8px;
  padding-inline-start: 20px;
  line-height: 1.9;
}
.quiz-options li.is-correct {
  color: #1c7a3e;
  font-weight: 700;
}
.quiz-answer {
  margin: 0;
  padding: 7px 10px;
  border-radius: 9px;
  background: color-mix(in srgb, #1c7a3e 8%, transparent);
  border-inline-start: 3px solid #1c7a3e;
  line-height: 1.8;
}

/* چت */
.chat-scope {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  border-block-end: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
}
.scope-field {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 150px;
}
.scope-field label { white-space: nowrap; }
.chat-scope select {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.model-cost {
  margin: 0;
  padding: 6px 12px;
  font-size: 11.5px;
  color: var(--ink-soft);
  background: var(--surface-2);
  border-block-end: 1px solid var(--line);
}

.chat-body { overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.msg {
  max-width: 92%;
  padding: 10px 12px;
  border-radius: 12px;
  line-height: 1.95;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}
.msg p { margin: 0 0 6px; }
.msg p:last-child { margin-block-end: 0; }
.msg-user { align-self: flex-start; background: var(--brand); color: var(--brand-ink); border-end-start-radius: 4px; }
.msg-ai   { align-self: flex-end; background: var(--surface-2); border: 1px solid var(--line); border-end-end-radius: 4px; }
.msg-error { align-self: center; background: #fdecec; border: 1px solid #f5c2c2; color: #8a1c1c; font-size: 13px; }

/* تأکیدها: به‌جای ستاره‌های خام، پس‌زمینه‌ی ملایم + وزنِ سنگین تا چشم
   بچه به نکته‌ی مهم بیفتد. */
.msg strong, .guide-card-body strong {
  font-weight: 800;
  color: color-mix(in srgb, var(--brand) 70%, #111);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  border-radius: 4px;
  padding: 0 3px;
}

.sources { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 8px; }

/* میان‌برهای موضوعی پس از انتخاب درس. */
.source-group { display: flex; flex-direction: column; gap: 4px; margin-block-start: 8px; }
.source-sub {
  align-self: flex-start;
  border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 3px 9px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.source-sub:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 99px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: color-mix(in srgb, var(--accent) 75%, #000);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.source:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

/* دکمه‌ی «با صدای بلند بخوان» زیر هر پاسخ دستیار. */
.msg-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-block-start: 8px; }
.speak-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--line));
  border-radius: 99px;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: color-mix(in srgb, var(--brand) 80%, #000);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.speak-btn:hover { background: color-mix(in srgb, var(--brand) 18%, transparent); }
.speak-btn.is-playing { background: color-mix(in srgb, var(--brand) 26%, transparent); }
.speak-btn:disabled { opacity: 0.6; cursor: progress; }

.chat-foot {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 10px 12px;
  border-block-start: 1px solid var(--line);
}
.chat-foot textarea {
  flex: 1;
  min-width: 0;
  resize: none;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  line-height: 1.7;
}

.scrim {
  position: absolute;
  inset: 0;
  background: rgba(19, 26, 38, .38);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s;
  z-index: 50;
}
.scrim.is-open { opacity: 1; visibility: visible; }

.toast {
  position: absolute;
  inset-block-end: calc(var(--bottombar-h) + 14px);
  inset-inline: 0;
  margin-inline: auto;
  width: fit-content;
  max-width: 90vw;
  padding: 8px 14px;
  border-radius: 99px;
  background: rgba(19, 26, 38, .92);
  color: #fff;
  font-size: 13px;
  z-index: 80;
}

/* در کتاب‌های آیه‌دار یک ردیف قرائت زیر نوار پایین اضافه می‌شود؛
   پیام toast بالاتر می‌نشیند تا روی همان دکمه نیفتد. */
body.has-recite .toast { inset-block-end: calc(var(--bottombar-h) + 60px); }
body.has-guide .toast { inset-block-end: calc(var(--bottombar-h) + 60px); }

/* ------------------------------------------------------------ موبایل */
/* موبایل عمودی: نوار بالا در یک ردیف جا نمی‌شود (۷ دکمه + انتخابگر کتاب
   حدود ۵۳۰ پیکسل می‌خواهند ولی صفحه ۳۹۰ پیکسل است) و دکمه‌ها از لبه‌ی
   چپ بیرون می‌افتادند. این‌جا نوار به سه ردیف تبدیل می‌شود:
   دکمه‌ها / انتخابگر کتاب / شماره‌ی صفحه. */
@media (max-width: 640px) {
  :root {
    /* سه ردیف: دکمه‌ها، انتخابگر کتاب، شماره‌ی صفحه. */
    --topbar-h: 110px;
    --bottombar-h: 58px;
  }

  .topbar {
    display: grid;
    /* چیدمان عمودی گوشی:
         ردیف ۱: خانه و فهرست (راست) + همه‌ی دکمه‌های ابزار (چپ)
         ردیف ۲: انتخابگر کتاب، تمام‌عرض تا نام درس کامل خوانده شود
         ردیف ۳: شماره‌ی صفحه
       پیش‌تر انتخابگر کتاب در ردیف اول بود و چون ۷ دکمه‌ی ابزار جا
       می‌گرفت، عرض مفید انتخابگر به چند پیکسل می‌رسید و «هوش مصنوعی/
       بزرگ‌نمایی» از لبه بیرون می‌افتاد. */
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas:
      "home menu actions"
      "center center center"
      "page page  page";
    grid-template-rows: 38px 32px 26px;
    align-content: center;
    row-gap: 2px;
    column-gap: 6px;
    padding: 4px 8px;
    /* اگر روزی دکمه‌ای اضافه شد، از لبه بیرون نزند و آیکون‌ها را قایم نکند. */
    overflow: hidden;
  }

  /* دکمه‌ها کمی جمع‌تر تا همه در نوار بمانند. */
  .icon-btn { width: 34px; height: 34px; font-size: 16px; }
  .topbar-actions { gap: 2px; }

  /* هر فرزندِ نوار باید grid-area داشته باشد. هر فرزندِ بدون area یک ردیفِ
     ناخواسته می‌سازد و مجموع ارتفاع از --topbar-h بیشتر می‌شود؛ آن‌وقت
     align-content:center ردیف‌ها را بالا می‌بَرد و دکمه‌ها پشت لبه پنهان
     می‌شوند (همان باگِ ناپدیدشدن دکمه‌ها در حالت عمودی). */
  #btn-home { grid-area: home; justify-self: start; }
  #btn-menu { grid-area: menu; justify-self: start; }
  .topbar-center { grid-area: center; }
  /* ابزارها در RTL ته ردیف (سمت چپ) می‌نشینند. */
  .topbar-actions { grid-area: actions; justify-self: end; }
  .page-indicator { grid-area: page; }

  .topbar-center { gap: 0; min-width: 0; }
  .book-picker { max-width: none; width: 100%; }
  .page-indicator { text-align: center; }
  .page-indicator { justify-content: center; width: 100%; }
  .page-jump { width: 3.6em; }

  .stage { grid-template-columns: 34px 1fr 34px; }
  .nav-zone { font-size: 24px; }
  .book-picker { font-size: 12.5px; }
  .chip { max-width: 30vw; font-size: 11px; }
  .page-wrap { padding: 8px; }

  /* ردیف قرائت در موبایل: انتخابگر تمام‌عرض تا نام قاری کامل دیده شود. */
  .recite-row { gap: 6px; }
  .recite-pick { flex: 1 1 100%; }
  .recite-pick select { max-width: none; width: 100%; }
  /* ردیف راهنمای هوشمند: دکمه تمام‌عرض و منو زیرش. */
  .guide-row { gap: 6px; }
  .btn-guide { flex: 1 1 100%; }
  .guide-menu button { font-size: 12.5px; }
  /* کارتِ راهنما روی گوشی کوچک‌تر می‌شود؛ وگرنه کل صفحه را می‌پوشاند و
     خودِ کتاب دیده نمی‌شود. */
  .guide-card { max-height: min(26vh, 190px); padding: 7px 8px; }
  .guide-card-body { font-size: 12.5px; line-height: 1.75; }
  .guide-card-foot .btn { flex: 1 1 auto; }

  /* نوارِ مداد روی گوشی: نوار پایین ممکن است بلند باشد (قرائت/راهنما)، پس
     دکمه‌ها جمع‌وجور می‌شوند و کم‌ارتفاع تا خودِ صفحه دیده شود. */
  .ink-bar {
    inset-block-end: calc(var(--bar-h) + 8px);
    max-width: 96vw;
    padding: 5px 6px;
    gap: 4px;
    border-radius: 12px;
  }
  .ink-group { gap: 3px; padding-inline: 3px; }
  .ink-btn { min-width: 30px; height: 30px; padding: 0 5px; font-size: 14px; }
  .ink-btn.ink-done { font-size: 12px; }
  .ink-swatch { width: 22px; height: 22px; }
  .btn-export { font-size: 11px; padding: 2px 8px; }
  .export-menu {
    inset-inline: 10px;
    inset-block-end: calc(var(--bottombar-h) + 12px);
    width: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

.release-note{padding:7px 12px;text-align:center;font:12px Tahoma,sans-serif;line-height:1.8;background:#e7f8f7;color:#164851}.release-note a{color:#086a78}