/* ============================================================================
   DAZZLE.CSS — لایهٔ سراسری یکپارچه (فاز ۱ بازآرایی استایل‌ها)
   ============================================================================
   این فایل «تنها منبع سراسری» استایل‌های مشترک است و به همین ترتیب ساخته شده:

     §0  TOKENS      — توکن‌های طراحی (برگرفته از landing/tokens.css، که کامل‌ترین
                       نسخه بود) + aliasهای موقت نام‌های قدیمی برای گذار
     §1  RESET       — پورت وفادار preflight تیلویند (که تا امروز روی همهٔ
                       صفحات لود می‌شد)؛ بدون متغیرهای --tw-*
     §2  BASE        — پایهٔ ادغام‌شدهٔ foundation.css + learning.css
                       (فونت بدنه، رنگ متن، رفتار لینک/تصویر)
     §3  COMPONENTS  — پورت ui.css (دکمه، کارت، فرم، هشدار، بج، چیپ، صفحه‌بندی،
                       …) — همان نام کلاس‌ها، همان مقادیر؛ فقط توکنیزه‌شده
     §4  UTILITIES   — کمکی‌های عمومی (sr-only، تراز متن، فونت)

   قواعد:
   · هیچ مقدار raw (رنگ/فاصله/شعاع) خارج از §0 نوشته نمی‌شود.
   · نام کلاس‌های کامپوننتی عمداً همان نام‌های قبلی است تا مهاجرت قالب‌ها
     بدون تغییر مارک‌پ انجام شود.
   · aliasهای §0-LEGACY فقط برای دورهٔ گذارند و در فاز ۶ حذف می‌شوند.
   ============================================================================ */
/* ============================================================================
   §0 — TOKENS
   ============================================================================ */
:root {
  /* ---------- 0.1  COLOR — brand (بنفش/لیمویی = هویت رسمی) ---------- */
  --landing-purple: #7c58fd;
  --landing-purple-deep: #7350f6;
  --landing-purple-dark: #5a3db0;
  --landing-purple-light: #efe9ff;   /* tint for backgrounds/badges */
  --landing-ink: #1a1028;
  --landing-lime: #c2ff45;
  --landing-lime-hover: #a8e638;
  --landing-lime-light: #f3ffdd;     /* tint for backgrounds/badges */
  --landing-surface: #efeff1;
  --landing-white: #ffffff;
  --landing-reference-ink: #111111;  /* pure-black hero copy, kept local on purpose */

  /* نام‌های رو‌به‌جلو (مستقل از پیشوند landing) — کامپوننت‌های جدید از این‌ها
     استفاده می‌کنند تا در فاز ۵ فقط مقدار توکن عوض شود، نه ارجاع‌ها */
  --brand-purple: var(--landing-purple);
  --brand-purple-dark: var(--landing-purple-dark);
  --brand-lime: var(--landing-lime);
  --brand-lime-hover: var(--landing-lime-hover);
  --brand-ink: var(--landing-ink);
  --brand-surface: var(--landing-surface);

  /* اجزای RGB برای ساخت تینت‌های آلفادار بدون تکرار هگز */
  --purple-rgb: 124, 88, 253;
  --lime-rgb: 194, 255, 69;
  --ink-rgb: 26, 16, 40;

  /* تینت‌های خاکستری‌-بنفش پرتکرار پروژه (قبلاً هاردکد بودند) */
  --purple-muted: #4d3d72;   /* متن ثانویهٔ بنفش‌فام (۴۱ کاربرد قبلی) */
  --purple-quiet: #8a7ab0;   /* متن کم‌اهمیت بنفش‌فام */
  --purple-soft: #b8aed4;    /* placeholder / حالت غیرفعال */
  --purple-wash: #6a5a8a;    /* بنفش خاکستری قدیمی متن — فاز ۵: نگاشت به gray */
  --lime-ink: #4a6418;       /* متن روی تینت لیمویی */

  /* پله‌های بنفش خنثی (از پورت صفحات auth) — کاندید یکدست‌سازی در فاز ۵ */
  --purple-200: #c8bede;     /* placeholder اینپوت OTP */
  --purple-300: #9a8bbf;     /* متن کم‌اهمیت کارت‌های کتاب (taxonomy/collection) */
  --purple-400: #7a6aa0;     /* لینک‌های فوتر auth */
  --purple-600: #5a4a7a;     /* زیرعنوان auth */
  --purple-700: #4a4160;     /* متن بدنهٔ پیش‌نمایش قوانین */
  --lavender-50: #f3f0ff;    /* ایست میانی گرادیانت پس‌زمینهٔ auth */

  /* ---------- 0.2  COLOR — neutral scale (10 steps, white → ink) ---------- */
  --gray-0: #ffffff;
  --gray-50: #f7f6fb;
  --gray-100: #efeff1;
  --gray-200: #e2e0ea;
  --gray-300: #c9c5d6;
  --gray-400: #9c96b0;
  --gray-500: #766f8c;
  --gray-600: #564f6d;
  --gray-700: #3a3450;
  --gray-800: #251c38;
  --gray-900: #1a1028; /* == --landing-ink */

  /* ---------- 0.3  COLOR — semantic ---------- */
  --color-success: #1a7a4a;
  --color-success-light: #f0faf4;
  --color-success-border: #b8e6cc;
  --color-error: #b3403a;
  --color-error-light: #fef3f2;
  --color-error-border: #f5c6c0;
  --color-warning: #a8730a;
  --color-warning-light: #fff8e6;
  --color-warning-border: #f2dca0;
  --color-info: #1c6ea4;
  --color-info-light: #eaf6ff;
  --color-info-border: #bfe2f7;

  /* رنگ متن بدنهٔ میراث foundation — در فاز ۵ با --gray-800 یکدست می‌شود */
  --color-body-ink: #182c35;

  /* Text-on-color pairs (pre-validated ≥4.5:1) */
  --on-purple: #ffffff;       /* white on #7c58fd ≈ 4.6:1 */
  --on-lime: #1a1028;         /* ink on #c2ff45 ≈ 14.8:1 */
  --on-ink: #ffffff;

  /* ---------- 0.4  TYPOGRAPHY ---------- */
  --font-display: 'Literata', Georgia, serif;       /* logo + LTR hero */
  --font-heading-fa: 'Estedad', Tahoma, sans-serif; /* nav / sidebar, fa */
  --font-body-fa: 'Vazirmatn', Tahoma, sans-serif;  /* body copy, fa */
  --font-body-en: Arial, Helvetica, sans-serif;

  /* مقیاس مدولار 1.25 — سیال با clamp() */
  --text-display: clamp(2.25rem, 1.7rem + 2.2vw, 3rem);   /* 36–48px */
  --text-h1:      clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); /* 28–40px */
  --text-h2:      clamp(1.5rem, 1.25rem + 1vw, 2rem);     /* 24–32px */
  --text-h3:      1.5rem;    /* 24px */
  --text-h4:      1.25rem;   /* 20px */
  --text-body-lg: 1.125rem;  /* 18px */
  --text-body:    1rem;      /* 16px */
  --text-body-sm: 0.875rem;  /* 14px — کوچک‌ترین سایز پاراگراف/لیبل */
  --text-caption: 0.75rem;   /* 12px — کوچک‌ترین سایز (لیبل/حقوقی) */

  --leading-display: 1.08;
  --leading-heading: 1.25;
  --leading-body: 1.6;
  --leading-caption: 1.5;

  --tracking-heading: -0.02em;
  --tracking-body: 0;
  --tracking-caption: 0.02em;

  /* ---------- 0.5  SPACING — شبکهٔ 8px (نیم‌قدم 4px) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ---------- 0.6  RADIUS ---------- */
  --radius-sm: 8px;     /* inputs, small buttons */
  --radius-md: 12px;    /* cards, buttons */
  --radius-lg: 16px;    /* modals, large cards */
  --radius-xl: 24px;    /* hero sections */
  --radius-full: 999px; /* pills, badges */

  /* ---------- 0.7  SHADOW — elevation ---------- */
  --shadow-1: 0 1px 2px rgba(26, 16, 40, 0.05);
  --shadow-2: 0 4px 6px rgba(26, 16, 40, 0.07), 0 2px 4px rgba(26, 16, 40, 0.06);
  --shadow-3: 0 10px 15px rgba(26, 16, 40, 0.10), 0 4px 6px rgba(26, 16, 40, 0.05);
  --shadow-4: 0 20px 25px rgba(26, 16, 40, 0.10), 0 10px 10px rgba(26, 16, 40, 0.04);
  --shadow-5: 0 25px 50px rgba(26, 16, 40, 0.25);
  --shadow-purple: 0 12px 28px rgba(124, 88, 253, 0.22); /* brand-tinted, for CTAs */

  /* ---------- 0.8  MOTION ---------- */
  --duration-micro: 150ms;
  --duration-page: 300ms;
  --duration-complex: 500ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- 0.9  TOUCH / FOCUS ---------- */
  --touch-target-min: 44px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;

  /* ---------- 0.10  LAYOUT / CONTAINER ---------- */
  --max: 1280px;            /* نام قدیمی کانتینر عمومی — فاز ۶: به --container-lg منتقل */
  --container-md: 720px;
  --container-lg: 1140px;
  --container-xl: 1320px;

  /* ثابت‌های چیدمان موبایل (قبلاً در mobile.css بودند — اینجا مالکیت واحد) */
  --app-mobile-header-height: 64px;
  --reader-mobile-bar-height: 58px;

  /* ---------- 0.11  LEGACY ALIASES — فقط برای دورهٔ گذار ----------
     مقادیر، عین مقادیر فعلی‌اند (هیچ تغییر بصری). هر صفحه که مهاجرت شد،
     ارجاع‌هایش به توکن اصلی وصل می‌شود و در فاز ۶ این بلاک حذف می‌شود. */
  --green: #2ee081;             /* foundation (نسل سبز) — فاز ۵: نگاشت به برند */
  --green-dark: #20bc68;
  --ink: #033049;               /* foundation */
  --muted: #66757d;             /* foundation */
  --soft: #f1f6f4;              /* foundation */
  --line: #dce5e1;              /* foundation */
  --dazzle-blue: #0b6fc2;       /* learning */
  --dazzle-deep: #10384a;       /* learning */
  --dazzle-green: #29d67c;      /* learning */
  --dazzle-yellow: #ffd15a;     /* learning */
  --dazzle-soft: #f3faf7;       /* learning */
  --dazzle-soft-blue: #edf6fc;  /* learning */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-micro: 0ms;
    --duration-page: 0ms;
    --duration-complex: 0ms;
  }
}

/* راهنمای نقاط شکست (فقط مستندات — custom property نمی‌تواند media query نگه دارد):
     Mobile        320px – 767px   (پیش‌فرض، بدون media query)
     Tablet        768px – 1023px
     Desktop       1024px – 1439px
     Large Desktop 1440px+
   کانتینر: mobile 100% - 32px · tablet 720px · desktop 1140px · large 1320px */


/* ============================================================================
   §1 — RESET
   پورت وفادار preflight تیلویند v3.4 (تا امروز روی همهٔ صفحات فعال بود).
   تنها تفاوت: متغیرهای --tw-* حذف شده و رنگ‌های ثابت توکنیزه‌اند
   (مقادیر یکی است: #e2e0ea == var(--gray-200) و #9c96b0 == var(--gray-400)).
   ============================================================================ */

*,
:after,
:before {
  box-sizing: border-box;
  border: 0 solid var(--gray-200);
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

b, strong {
  font-weight: bolder;
}

code, kbd, pre, samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button, select {
  text-transform: none;
}

button,
input:where([type="button"]),
input:where([type="reset"]),
input:where([type="submit"]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

:-moz-focusring { outline: auto; }
:-moz-ui-invalid { box-shadow: none; }

progress { vertical-align: baseline; }

::-webkit-inner-spin-button,
::-webkit-outer-spin-button { height: auto; }

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration { -webkit-appearance: none; }

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary { display: list-item; }

blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
  margin: 0;
}

fieldset { margin: 0; }
fieldset, legend { padding: 0; }

menu, ol, ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

dialog { padding: 0; }

textarea { resize: vertical; }

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: var(--gray-400);
}

[role="button"], button { cursor: pointer; }
:disabled { cursor: default; }

audio, canvas, embed, iframe, img, object, svg, video {
  display: block;
  vertical-align: middle;
}

img, video {
  max-width: 100%;
  height: auto;
}

[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}


/* ============================================================================
   §2 — BASE
   پایهٔ ادغام‌شدهٔ foundation.css + learning.css (همان حالت محاسبه‌شدهٔ فعلی).
   ============================================================================ */

html {
  scroll-behavior: smooth;
}

/* گیرفتن افقی در WebView موبایل (میراث learning.css v1.17) */
html, body {
  max-width: 100%;
  overflow-x: clip;
}

body {
  background: var(--gray-0);
  color: var(--color-body-ink);
  font-family: var(--font-display); /* Literata — پایهٔ میراث foundation؛ صفحات فارسی با .lang-fa جایگزین می‌کنند */
}

/* بدنهٔ فارسی (body در base.html کلاس lang-{{ lang }} دارد) */
.lang-fa {
  font-family: var(--font-body-fa);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}


/* ============================================================================
   §3 — COMPONENTS
   پورت کامل ui.css — همان کلاس‌ها، همان مقادیر محاسبه‌شده؛ فقط توکنیزه‌شده.
   این لایه «تنها خانهٔ» الگوهای مشترک است: دکمه، کارت، فرم، هشدار، بج،
   چیپ، صفحه‌بندی، حالت خالی، breadcrumb، eyebrow، اورلی، بج زبان، لوگو.
   ============================================================================ */

/* ----------------------------------------------
   3.1  BUTTONS
   ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  padding: var(--space-2) var(--space-5);
  border: 0;
  border-radius: var(--radius-md);
  font-weight: 800;
  font-size: var(--text-body-sm);
  cursor: pointer;
  transition: all var(--duration-page) var(--ease-standard);
  text-decoration: none;
  white-space: nowrap;
  font-family: inherit;
  line-height: 1;
}
.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--brand-purple);
  outline-offset: var(--focus-ring-offset);
}
.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none !important;
}

/* Primary (بنفش) */
.btn-primary {
  background: var(--brand-purple);
  color: var(--on-purple);
  box-shadow: var(--shadow-purple);
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(var(--purple-rgb), 0.40);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

/* Outline (حاشیهٔ بنفش) */
.btn-outline {
  border: 1.5px solid var(--brand-purple);
  background: transparent;
  color: var(--brand-purple);
}
.btn-outline:hover:not(:disabled) {
  background: rgba(var(--purple-rgb), 0.06);
  transform: translateY(-1px);
}

/* Danger (خروج / حذف) */
.btn-danger {
  border: 1.5px solid var(--color-error-border);
  background: var(--gray-0);
  color: var(--color-error);
}
.btn-danger:hover:not(:disabled) {
  background: var(--color-error-light);
  border-color: var(--color-error);
  transform: translateY(-1px);
}

/* Lime CTA (لندینگ/قیمت) */
.btn-lime {
  background: var(--brand-lime);
  color: var(--on-lime);
  box-shadow: 0 6px 20px rgba(var(--lime-rgb), 0.25);
}
.btn-lime:hover:not(:disabled) {
  background: var(--brand-lime-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(var(--lime-rgb), 0.35);
}

/* تمام‌عرض */
.btn-block {
  width: 100%;
  justify-content: center;
  padding-inline: var(--space-3);
}

/* بزرگ (صفحات احراز هویت، CTA اصلی) */
.btn-lg {
  min-height: 52px;
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-body);
  border-radius: var(--radius-lg);
}

/* ----------------------------------------------
   3.2  CARDS
   ---------------------------------------------- */
.card {
  background: var(--gray-0);
  border: 1px solid rgba(var(--purple-rgb), 0.10);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 6px 20px rgba(var(--purple-rgb), 0.05);
  transition: box-shadow var(--duration-page) var(--ease-standard);
}

.card-compact {
  padding: var(--space-4);
}

.card-hover {
  transition: transform var(--duration-page) var(--ease-standard),
              box-shadow var(--duration-page) var(--ease-standard);
}
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 36px rgba(var(--purple-rgb), 0.12);
}

/* کارت شیشه‌ای (auth و کارت‌های لندینگ) */
.card-glass {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(var(--purple-rgb), 0.10);
}

/* ----------------------------------------------
   3.3  FORM INPUTS
   ---------------------------------------------- */
.input {
  width: 100%;
  height: 48px;
  border: 1.5px solid rgba(var(--purple-rgb), 0.15);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.9);
  padding: 0 var(--space-3);
  color: var(--landing-ink);
  font: inherit;
  font-size: var(--text-body-sm);
  outline: none;
  transition: all var(--duration-page) var(--ease-standard);
}
.input:focus {
  border-color: var(--brand-purple);
  background: var(--gray-0);
  box-shadow: 0 0 0 4px rgba(var(--purple-rgb), 0.10);
}
.input::placeholder {
  color: var(--purple-soft);
}
.input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* اینپوت با آیکون (wrapper فلکسی — الگوی HTML در مستندات) */
.input-wrap {
  position: relative;
}
.input-wrap .input {
  padding-inline-start: 44px; /* برای LTR */
}
.input-wrap .input-icon {
  position: absolute;
  inset-inline-start: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-purple);
  opacity: 0.55;
  pointer-events: none;
  transition: opacity var(--duration-page) var(--ease-standard);
}
.input-wrap:focus-within .input-icon {
  opacity: 1;
}

/* بازنویسی RTL برای آیکون اینپوت */
html[dir="rtl"] .input-wrap .input {
  padding-inline-start: var(--space-3);
  padding-inline-end: 44px;
}
html[dir="rtl"] .input-wrap .input-icon {
  inset-inline-start: auto;
  inset-inline-end: var(--space-4);
}

/* اینپوت بزرگ (صفحات auth) */
.input-lg {
  height: 52px;
  font-size: var(--text-body);
  border-radius: var(--radius-md);
}

/* Textarea */
.textarea {
  width: 100%;
  border: 1.5px solid rgba(var(--purple-rgb), 0.15);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.9);
  padding: var(--space-3);
  color: var(--landing-ink);
  font: inherit;
  font-size: var(--text-body-sm);
  outline: none;
  resize: vertical;
  transition: all var(--duration-page) var(--ease-standard);
  min-height: 120px;
  line-height: 1.8;
}
.textarea:focus {
  border-color: var(--brand-purple);
  background: var(--gray-0);
  box-shadow: 0 0 0 4px rgba(var(--purple-rgb), 0.10);
}

/* ----------------------------------------------
   3.4  ALERTS / NOTICES
   ---------------------------------------------- */
.alert {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-body-sm);
  font-weight: 700;
  line-height: 1.7;
  animation: alertFadeIn var(--duration-page) ease both;
}
.alert svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.alert-success {
  background: var(--color-success-light);
  border: 1px solid var(--color-success-border);
  color: var(--color-success);
}
.alert-error {
  background: var(--color-error-light);
  border: 1px solid var(--color-error-border);
  color: var(--color-error);
}

@keyframes alertFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ----------------------------------------------
   3.5  BADGES / CHIPS
   ---------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-caption);
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.lang-fa .badge {
  text-transform: none;
  letter-spacing: 0;
}

.badge-purple {
  background: rgba(var(--purple-rgb), 0.10);
  color: var(--brand-purple-dark);
}
.badge-lime {
  background: rgba(var(--lime-rgb), 0.20);
  color: var(--lime-ink);
}
.badge-success {
  background: var(--color-success-light);
  color: var(--color-success);
}
.badge-danger {
  background: var(--color-error-light);
  color: var(--color-error);
}

/* چیپ دسته‌بندی (تعاملی) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(var(--purple-rgb), 0.10);
  background: rgba(var(--purple-rgb), 0.03);
  color: var(--purple-muted);
  font-weight: 700;
  font-size: var(--text-body-sm);
  transition: all var(--duration-page) var(--ease-standard);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover {
  border-color: rgba(var(--purple-rgb), 0.30);
  background: rgba(var(--purple-rgb), 0.08);
  color: var(--brand-purple-dark);
  transform: translateY(-2px);
}
.chip-active {
  background: var(--brand-purple);
  border-color: var(--brand-purple);
  color: var(--gray-0) !important;
  box-shadow: 0 4px 16px rgba(var(--purple-rgb), 0.25);
}
.chip-active:hover {
  color: var(--gray-0) !important;
  background: var(--brand-purple-dark);
}

/* چیپ دسته‌بندی (.category-chip) — پایهٔ فعلی میراث foundation است (تا گام ۸
   سراسری می‌ماند). این قواعد فقط hover/focus بنفش را اضافه می‌کردند (پورت از
   discovery.css) و چون بخش‌هایشان در صفحات مختلف‌اند، اینجا نشستند. */
.categories-section .category-chip,
.book-detail-categories .category-chip,
.collection-about-section .category-chip {
  cursor: pointer;
}
.categories-section .category-chip:hover,
.book-detail-categories .category-chip:hover,
.collection-about-section .category-chip:hover {
  border-color: rgba(var(--purple-rgb), 0.30);
  color: var(--brand-purple-dark);
  background: rgba(var(--purple-rgb), 0.08);
}
.categories-section .category-chip:focus-visible,
.book-detail-categories .category-chip:focus-visible,
.collection-about-section .category-chip:focus-visible {
  outline: var(--focus-ring-width) solid var(--brand-purple);
  outline-offset: var(--focus-ring-offset);
}

/* ----------------------------------------------
   3.6  PAGINATION
   (برندهٔ فعلیِ سه تعریف تکراری: ui.css — discovery/library در فاز ۲ حذف)
   ---------------------------------------------- */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin: var(--space-7) 0 var(--space-2);
}
.pagination a,
.pagination span {
  min-width: 40px;
  min-height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid rgba(var(--purple-rgb), 0.15);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  font-size: var(--text-body-sm);
  font-weight: 700;
  color: var(--purple-wash);
  background: var(--gray-0);
  text-decoration: none;
  transition: all var(--duration-page) var(--ease-standard);
}
.pagination a:hover {
  border-color: var(--brand-purple);
  background: rgba(var(--purple-rgb), 0.06);
  color: var(--brand-purple);
  transform: translateY(-1px);
}
.pagination a.active {
  background: var(--brand-purple);
  border-color: var(--brand-purple);
  color: var(--gray-0);
  box-shadow: 0 4px 12px rgba(var(--purple-rgb), 0.20);
}
.pagination a:focus-visible {
  outline: var(--focus-ring-width) solid var(--brand-purple);
  outline-offset: var(--focus-ring-offset);
}
.pagination-gap {
  min-width: 32px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--purple-quiet);
  font-weight: 700;
}

/* ----------------------------------------------
   3.7  EMPTY STATE
   ---------------------------------------------- */
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 120px;
  padding: var(--space-5);
  border: 1.5px dashed rgba(var(--purple-rgb), 0.25);
  border-radius: var(--radius-md);
  background: rgba(var(--purple-rgb), 0.03);
  color: var(--purple-quiet);
  text-align: center;
}
.empty-state span {
  font-size: var(--text-h3);
  opacity: 0.6;
}
.empty-state p {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: 1.7;
}
.empty-state img {
  width: 52px;
  height: 52px;
  opacity: 0.5;
}

/* ----------------------------------------------
   3.8  BREADCRUMB
   ---------------------------------------------- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-caption);
  color: var(--purple-quiet);
  margin: 0 0 var(--space-5);
}
.breadcrumb a {
  color: var(--brand-purple);
  font-weight: 700;
  transition: color var(--duration-micro) var(--ease-standard);
}
.breadcrumb a:hover {
  color: var(--brand-purple-dark);
}
.breadcrumb a:focus-visible {
  outline: var(--focus-ring-width) solid var(--brand-purple);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}
.breadcrumb span:last-child {
  color: var(--landing-ink);
  font-weight: 700;
}
/* جداکنندهٔ breadcrumb در RTL/LTR */
html[dir="rtl"] .breadcrumb span:not(:last-child)::after {
  content: "‹";
  margin-inline: var(--space-1);
}
html[dir="ltr"] .breadcrumb span:not(:last-child)::after {
  content: "›";
  margin-inline: var(--space-1);
}

/* بردکرامب تاکسونومی — واریانت «کارتی» که در ۳ گروه استفاده می‌شود
   (taxonomy، library، highlights) → کامپوننت مشترک (پورت از discovery.css) */
.taxonomy-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-caption);
  color: var(--purple-quiet);
  margin: 0 0 var(--space-5);
}
.taxonomy-breadcrumb a {
  color: var(--brand-purple);
  font-weight: 700;
  transition: color var(--duration-micro) var(--ease-standard);
}
.taxonomy-breadcrumb a:hover {
  color: var(--brand-purple-dark);
}
.taxonomy-breadcrumb a:focus-visible {
  outline: var(--focus-ring-width) solid var(--brand-purple);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* ----------------------------------------------
   3.9  EYEBROW (سرتیتر بخش‌ها)
   (برندهٔ فعلی: نسخهٔ ui.css — نسخهٔ سبز foundation عملاً مرده بود)
   ---------------------------------------------- */
.eyebrow {
  display: block;
  font-size: var(--text-caption);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--brand-purple);
  margin: 0 0 var(--space-2);
}
.lang-fa .eyebrow {
  text-transform: none;
  letter-spacing: 0;
}

/* ----------------------------------------------
   3.10  BACKDROP / OVERLAY (مودال و سایدبار)
   ---------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  border: 0;
  padding: 0;
  background: rgba(var(--ink-rgb), 0.35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-complex) var(--ease-standard);
  cursor: pointer;
}
.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

/* ----------------------------------------------
   3.11  LANGUAGE BADGE (جلد کتاب و فیلترها)
   ---------------------------------------------- */
.lang-badge {
  position: absolute;
  inset-inline-start: var(--space-2);
  top: var(--space-2);
  min-width: 28px;
  height: 24px;
  padding: 0 var(--space-2);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--brand-purple-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-caption);
  font-weight: 900;
  letter-spacing: 0.04em;
  direction: ltr;
  box-shadow: 0 3px 9px rgba(var(--purple-rgb), 0.10);
  backdrop-filter: blur(5px);
}

/* ----------------------------------------------
   3.12  BRAND / LOGO
   (برندهٔ فعلی: نسخهٔ ui.css — نسخه‌های learning/landing ادغام شدند)
   ---------------------------------------------- */
.dazzle-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--landing-ink);
}
.dazzle-brand img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 auto;
}
.dazzle-brand > span {
  font: 800 25px/1 var(--font-display);
}
.dazzle-brand-footer {
  color: var(--landing-white);
}
.dazzle-brand-footer > span {
  color: var(--landing-white);
}

/* ----------------------------------------------
   3.13  FOOTER — بخش‌های مشترک فوتر (پورت از public-pages.css)
   فوتر کامپوننت مشترک ۸ صفحه است (home، books، public…)؛ این رول‌ها نباید
   در فایل صفحه‌ای باشند. (.footer-shell پایه و .trust-seals فعلاً در
   foundation/landing-footer سراسری‌اند — در گام ۵ به اینجا می‌آیند.)
   ---------------------------------------------- */
.footer-shell-compact {
  grid-template-columns: 1.5fr repeat(3, 1fr);
}

.footer-trust-section {
  padding: var(--space-5) 0;
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.10);
  margin-bottom: var(--space-4);
  text-align: center;
}

.footer-trust-section h3 {
  font-size: var(--text-body-sm);
  font-weight: 800;
  color: var(--landing-ink);
  margin: 0 0 var(--space-3);
}

.footer-trust-section .trust-seals {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  .footer-trust-section {
    padding: var(--space-4) 0;
  }
}

/* ----------------------------------------------
   3.14  NAVBAR — ناوبری عمومی مشترک
   (پورت از landing/navbar.css = برندهٔ فعلی آبشار + دو رول زندهٔ learning)
   navbar.html در ۸ صفحه include می‌شود (هم لندینگ هم عمومی) → لایهٔ مشترک.
   .site-header-editorial و .nav-shell-editorial فقط مال home‌اند → pages/landing.css
   ---------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.08);
  box-shadow: none; /* آگاهانه: learning سایهٔ سبز foundation را می‌کُشت و برنده بود */
}

.nav-shell {
  max-width: 1220px;
  height: 72px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-inline: auto;
  font-weight: 700;
  font-size: var(--text-body-sm);
  color: var(--landing-ink);
}
.nav-links a {
  position: relative;
  padding: var(--space-4) 0;
  transition: color var(--duration-micro) var(--ease-standard);
}
.nav-links a:hover {
  color: var(--landing-purple);
}
.nav-links a:focus-visible {
  outline: var(--focus-ring-width) solid var(--landing-purple);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}
.nav-links a::after {
  content: "";
  position: absolute;
  inset: auto 0 var(--space-3);
  height: 2px;
  background: var(--landing-lime);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--duration-page) var(--ease-standard);
}
.nav-links a:hover::after {
  transform: scaleX(1);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.nav-actions .btn {
  min-height: 40px;
}

/* برند داخل ناوبار: learning فاصله را ۸px می‌کرد (روی 9px §3.12 می‌برد) */
.brand.dazzle-brand {
  gap: 8px;
}

/* ----- دکمه همبرگر ----- */
.public-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  align-items: center;
  justify-content: center;
}
.public-nav-toggle span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--landing-ink);
  border-radius: var(--radius-full);
  transition: all var(--duration-page) var(--ease-standard);
}
.public-nav-toggle:hover span {
  background: var(--landing-purple);
}
.public-nav-toggle.open {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.7);
}

/* ----- سایدبار لندینگ ----- */
.public-sidebar {
  position: fixed;
  z-index: 1000;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(82vw, 340px);
  max-width: 100%;
  height: 100dvh;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  border-inline-start: 1px solid rgba(var(--purple-rgb), 0.08);
  box-shadow: var(--shadow-5);
  transform: translateX(105%);
  transition: transform var(--duration-complex) var(--ease-standard);
  display: flex;
  flex-direction: column;
  padding: var(--space-5) var(--space-5) var(--space-6);
  overflow-y: auto;
  overscroll-behavior: contain;
}
html[dir="rtl"] .public-sidebar {
  transform: translateX(-105%);
}
.public-sidebar.open,
html[dir="rtl"] .public-sidebar.open {
  transform: translateX(0);
}

.public-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.08);
}
.public-sidebar-head .dazzle-brand {
  gap: var(--space-2);
}
.public-sidebar-head .dazzle-brand img {
  width: 32px;
  height: 32px;
}
.public-sidebar-head .dazzle-brand > span {
  font-size: var(--text-h4);
  font-weight: 800;
  color: var(--landing-purple-dark);
}
.public-sidebar-close {
  width: var(--touch-target-min);
  height: var(--touch-target-min);
  border: 0;
  background: rgba(var(--purple-rgb), 0.06);
  font-size: var(--text-h4);
  line-height: 1;
  color: var(--landing-ink);
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: all var(--duration-page) var(--ease-standard);
  display: grid;
  place-items: center;
}
.public-sidebar-close:hover {
  background: rgba(var(--purple-rgb), 0.12);
  transform: scale(1.05);
}
.public-sidebar-close:focus-visible {
  outline: var(--focus-ring-width) solid var(--landing-purple);
  outline-offset: var(--focus-ring-offset);
}

.public-sidebar-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-6);
  flex: 1;
}
.public-sidebar-links a {
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--landing-ink);
  transition: background var(--duration-page) var(--ease-standard), color var(--duration-page) var(--ease-standard);
  text-decoration: none;
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
}
.public-sidebar-links a:hover {
  background: rgba(var(--purple-rgb), 0.06);
  color: var(--landing-purple);
}

.public-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(var(--purple-rgb), 0.08);
}
.public-sidebar-actions .btn {
  min-height: 44px;
}

/* ----- منوی موبایل عمومی ----- */
.public-mobile-menu {
  position: fixed;
  z-index: 1000;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(85vw, 340px);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  border-inline-start: 1px solid rgba(var(--purple-rgb), 0.08);
  box-shadow: var(--shadow-5);
  transform: translateX(105%);
  transition: transform var(--duration-complex) var(--ease-standard);
  padding: var(--space-5) var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
html[dir="rtl"] .public-mobile-menu {
  transform: translateX(-105%);
}
.public-mobile-menu.open,
html[dir="rtl"] .public-mobile-menu.open {
  transform: translateX(0);
}
.public-mobile-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(var(--purple-rgb), 0.08);
}
.public-mobile-menu-head span {
  font-weight: 700;
  color: var(--landing-ink);
}
.public-mobile-menu-head button {
  border: 0;
  background: rgba(var(--purple-rgb), 0.06);
  font-size: 24px;
  line-height: 1;
  color: var(--landing-ink);
  cursor: pointer;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
}
.public-mobile-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-6);
  flex: 1;
}
.public-mobile-links a {
  padding: var(--space-4) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--landing-ink);
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
}
.public-mobile-links a:hover {
  background: rgba(var(--purple-rgb), 0.06);
  color: var(--landing-purple);
}
.public-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(var(--purple-rgb), 0.08);
}
.public-mobile-actions .btn {
  min-height: 44px;
}

/* ----- بک‌دراپ ----- */
.public-nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  border: 0;
  padding: 0;
  background: rgba(var(--ink-rgb), 0.35);
  backdrop-filter: blur(14px) saturate(0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-complex) var(--ease-standard);
  touch-action: none;
  overscroll-behavior: none;
}
.public-nav-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1024px) {
  .nav-links {
    display: none;
  }
  .public-nav-toggle {
    display: flex;
  }
  .nav-shell {
    height: 64px;
    padding: 0 16px;
  }
}

@media (max-width: 760px) {
  /* Mobile browsers/WebViews may render the page underneath the Android/iOS
     system status bar. Keep public chrome comfortably below that area even
     when the reported safe-area inset is zero. */
  .site-header {
    padding-top: max(10px, env(safe-area-inset-top));
  }

  .nav-shell {
    padding-inline-start: max(14px, env(safe-area-inset-left));
    padding-inline-end: max(14px, env(safe-area-inset-right));
  }

  /* The public drawers live outside the header, so they need their own safe
     space. Android WebViews can report a zero CSS safe-area even while the
     system status/navigation bars overlap the viewport; the pixel fallbacks
     keep the close button and bottom CTA clear in that case. */
  .public-sidebar,
  .public-mobile-menu {
    padding-block-start: calc(var(--space-5) + max(20px, env(safe-area-inset-top)));
    padding-block-end: calc(var(--space-6) + max(44px, env(safe-area-inset-bottom)));
  }

  .nav-actions {
    gap: 8px; /* بازماندهٔ زندهٔ learning.css */
  }
  .nav-actions .btn-outline {
    display: none;
  }
  .dazzle-brand > span {
    font-size: 21px;
  }
  .dazzle-brand img {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 480px) {
  .public-sidebar {
    width: 85vw;
    /* Keep the block-axis safe spacing from the <=760px rule. */
    padding-inline: var(--space-4);
  }
  .public-sidebar-links a {
    font-size: var(--text-body-sm);
    padding: var(--space-3) var(--space-3);
  }
  .public-mobile-menu {
    width: 85vw;
    /* Keep the block-axis safe spacing from the <=760px rule. */
    padding-inline: var(--space-4);
  }
}

/* ----------------------------------------------
   3.15  FOOTER — فوتر معمولی (سبز میراث) مشترک بین صفحات عمومی
   (پورت از foundation.css = پایه + learning.css = بازنویسی‌های برنده)
   واریانت editorial فوتر فقط مال home است → pages/landing.css
   (.footer-shell-compact و .footer-trust-section از قبل در §3.13‌اند)
   ---------------------------------------------- */
.site-footer {
  background: #f6faf8; /* learning بر foundation (#f4f8f6) برنده بود */
  border-top: 1px solid #d9e2df;
  padding: 50px 24px 24px;
}

.footer-shell {
  max-width: var(--max);
  margin: auto;
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 50px;
}

.footer-brand p {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
}
.footer-brand .dazzle-brand-footer {
  margin-bottom: 14px;
}
.footer-brand .dazzle-brand-footer > span {
  font-size: 25px;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.footer-column h3 {
  font-size: 17px;
  margin: 0 0 5px;
}
.footer-column a {
  min-height: 34px;
  display: flex;
  align-items: center;
}
.footer-column a:hover {
  color: #1cb86c; /* legacy سبز — بازنویسی‌نشده؛ فاز ۵ نگاشت به برند */
}

.footer-bottom {
  max-width: var(--max);
  margin: 40px auto 0;
  border-top: 1px solid #d3deda;
  padding-top: 18px;
  display: flex;
  justify-content: flex-start; /* learning بر foundation (space-between) برنده بود */
  align-items: center;
  color: #76847e;
  font-size: 13px;
}
.footer-bottom p {
  margin: 0;
}

/* سیل‌های اعتماد — پایهٔ مشترک هر دو واریانت فوتر (پورت از landing/footer.css) */
.trust-seals {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.trust-seals a {
  display: inline-block;
  transition: transform var(--duration-micro) var(--ease-standard),
              opacity var(--duration-micro) var(--ease-standard);
}
.trust-seals a:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}
.trust-seals img {
  width: 80px;
  height: auto;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  padding: var(--space-1);
  border: 1px solid rgba(var(--purple-rgb), 0.10);
}
html[dir="rtl"] .trust-seals {
  flex-direction: row-reverse;
}
@media (max-width: 768px) {
  .trust-seals {
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .footer-shell {
    grid-template-columns: 1fr;
  }
  .site-footer {
    padding-inline: 17px;
  }
  .footer-column a {
    min-height: 40px;
  }
}


/* ============================================================================
   §4 — UTILITIES
   کمکی‌های عمومی. کلاس‌های حالت (مثل hidden-by-search) عمداً اینجا نیستند —
   مالکشان فایل CSS همان صفحه‌اند.
   ============================================================================ */

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

.text-center { text-align: center; }
.text-start  { text-align: start; }
.text-end    { text-align: end; }

/* فونت صریح برای بخش‌های چندزبانه (جایگزین ltr:font-body-en تیلویند در فاز ۳) */
.font-body-en { font-family: var(--font-body-en); }
.font-body-fa { font-family: var(--font-body-fa); }


/* ----------------------------------------------
   3.16  DISCOVERY & BOOK CARDS — کامپوننت‌های مکرو (گام ۸ → v2.6)
   (از app-shell.css به اینجا آمدند چون عمومی‌اند: مکروهای discovery_macros،
   کامپوننت کاتالوگ home و صفحهٔ عمومی کتاب هم مصرفشان می‌کنند. پایهٔ
   .category-chip/.category-icon از foundation می‌آید — رنگش به توکن‌های بنفش
   نگاشت شد و hover سبزِ قدیمی حذف شد؛ ابعاد ۱:۱.)
   ---------------------------------------------- */

.category-icon {
display:inline-flex;
width:17px;
height:17px;
}

.category-icon svg {
max-width:100%;
max-height:100%;
}

.category-icon-dot {
border-radius:50%;
background:linear-gradient(135deg,#2ee081,#087ca7);
box-shadow:inset 0 0 0 4px rgba(255,255,255,.65);
}

/* ===== گرید کتاب‌ها ===== */
.book-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: var(--space-5);
margin-top: var(--space-5);
}

.book-card {
min-width: 0;
transition: transform var(--duration-page) var(--ease-standard);
}

.book-card:hover {
transform: translateY(-4px);
}

.book-card:focus-visible {
outline: var(--focus-ring-width) solid var(--landing-purple);
outline-offset: var(--focus-ring-offset);
border-radius: var(--radius-md);
}

.book-cover-wrap {
position: relative;
aspect-ratio: 2/3;
border-radius: var(--radius-md);
overflow: hidden;
background: rgba(124, 88, 253, 0.06);
box-shadow: 0 8px 24px rgba(124, 88, 253, 0.10);
transition: box-shadow var(--duration-page) var(--ease-standard);
}

.book-card:hover .book-cover-wrap {
box-shadow: 0 14px 32px rgba(124, 88, 253, 0.18);
}

.book-cover {
width: 100%;
height: 100%;
object-fit: cover;
}

.book-cover.placeholder {
display: grid;
place-items: center;
background: linear-gradient(145deg, var(--landing-purple), var(--landing-purple-dark));
color: #ffffff;
font-weight: 800;
font-size: var(--text-body-lg);
}

.audio-badge {
position: absolute;
bottom: var(--space-2);
inset-inline-end: var(--space-2);
width: 32px;
height: 32px;
border-radius: 50%;
display: grid;
place-items: center;
background: rgba(255, 255, 255, 0.94);
color: var(--landing-purple);
font-weight: 900;
font-size: var(--text-body-sm);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.book-meta {
padding-top: var(--space-3);
}

.book-meta h3 {
font-size: var(--text-body-sm);
line-height: 1.55;
margin: 0 0 var(--space-1);
color: var(--landing-ink);
font-weight: 700;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.book-meta p {
font-size: var(--text-caption);
color: #6a5a8a;
margin: var(--space-1) 0 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}


/* ===== Discovery Sections ===== */
.discovery-section {
margin: 0 0 var(--space-7);
}

.discovery-heading {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-5);
margin-bottom: var(--space-5);
}

.discovery-heading h2 {
font-size: var(--text-h3);
color: var(--landing-ink);
margin: 0 0 var(--space-1);
font-weight: 800;
}

.discovery-heading p {
color: #6a5a8a;
margin: 0;
font-size: var(--text-body-sm);
}

.scroller-controls {
display: flex;
gap: var(--space-2);
/* Keep physical arrow order stable inside RTL pages: ‹ on the left, › on the right. */
direction: ltr;
}

.scroller-controls button {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(124, 88, 253, 0.15);
background: rgba(124, 88, 253, 0.04);
color: var(--landing-purple);
cursor: pointer;
font-size: 24px;
line-height: 1;
display: grid;
place-items: center;
transition: all var(--duration-page) var(--ease-standard);
}

.scroller-controls button:hover {
background: rgba(124, 88, 253, 0.10);
border-color: rgba(124, 88, 253, 0.30);
}

.scroller-controls button:focus-visible {
outline: var(--focus-ring-width) solid var(--landing-purple);
outline-offset: var(--focus-ring-offset);
}

/* ===== Book Scroller ===== */
.book-scroller,
.collection-scroller {
display: flex;
gap: var(--space-5);
overflow-x: auto;
scrollbar-width: thin;
scroll-snap-type: x proximity;
padding: var(--space-1) var(--space-1) var(--space-3);
overscroll-behavior-inline: contain;
}

.discover-book-card {
flex: 0 0 166px;
min-width: 0;
scroll-snap-align: start;
text-decoration: none;
color: inherit;
}

.discover-cover-wrap {
position: relative;
width: 154px;
aspect-ratio: 2/3;
border-radius: var(--radius-md);
overflow: hidden;
background: rgba(124, 88, 253, 0.06);
box-shadow: 0 7px 18px rgba(124, 88, 253, 0.08);
transition: transform var(--duration-page) var(--ease-standard),
box-shadow var(--duration-page) var(--ease-standard);
}

.discover-book-card:hover .discover-cover-wrap {
transform: translateY(-3px);
box-shadow: 0 12px 28px rgba(124, 88, 253, 0.14);
}

.discover-cover-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}

.discover-book-copy {
padding: var(--space-3) var(--space-1) 0;
}

.discover-book-copy h3 {
font-size: var(--text-body-sm);
line-height: 1.55;
margin: 0 0 var(--space-1);
color: var(--landing-ink);
font-weight: 700;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.book-author {
font-size: var(--text-caption) !important;
color: #6a5a8a !important;
margin: 0 0 var(--space-1) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.book-subtitle {
font-size: var(--text-caption) !important;
line-height: 1.55 !important;
color: #8a7ab0 !important;
margin: 0 !important;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.book-rating {
display: inline-block;
margin-top: var(--space-2);
color: var(--landing-purple);
font-size: var(--text-caption);
font-weight: 700;
}

/* ===== Collection Scroller ===== */
.collection-scroller {
gap: var(--space-5);
}

.discover-collection-card {
flex: 0 0 190px;
scroll-snap-align: start;
text-decoration: none;
color: inherit;
}

/* ------------------------------------------------------------
   مکروی book_grid (discovery_macros) — گام ۷ از pages/discover.css
   به اینجا آمد چون علاوه بر taxonomy/topic، کتابخانه (index/saved/
   finished) هم مصرفش می‌کند. تک‌تعریف در کل پروژه → انتقال امن.
   ------------------------------------------------------------ */
.taxonomy-book-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.taxonomy-book-card {
display: flex;
gap: var(--space-4);
border: 1px solid rgba(var(--purple-rgb), 0.10);
border-radius: var(--radius-md);
padding: var(--space-3);
background: var(--gray-0);
min-width: 0;
transition: all var(--duration-page) var(--ease-standard);
}
.taxonomy-book-card:hover {
border-color: rgba(var(--purple-rgb), 0.25);
box-shadow: 0 8px 24px rgba(var(--purple-rgb), 0.08);
transform: translateY(-2px);
}
.taxonomy-book-card:focus-visible {
outline: var(--focus-ring-width) solid var(--landing-purple);
outline-offset: var(--focus-ring-offset);
}
.taxonomy-book-card > img {
width: 92px;
height: 128px;
object-fit: cover;
border-radius: var(--radius-sm);
background: rgba(var(--purple-rgb), 0.05);
flex: 0 0 auto;
}
.taxonomy-book-card > div {
min-width: 0;
}
.taxonomy-book-card h3 {
font-size: var(--text-body-sm);
margin: var(--space-1) 0 var(--space-1);
line-height: 1.55;
color: var(--landing-ink);
font-weight: 700;
}
.taxonomy-book-card p {
font-size: var(--text-caption);
margin: 0 0 var(--space-1);
color: var(--purple-wash);
}
.taxonomy-book-card small {
font-size: var(--text-caption);
line-height: 1.55;
color: var(--purple-300);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.taxonomy-book-meta {
display: flex;
gap: var(--space-3);
margin-top: var(--space-3);
font-size: var(--text-caption);
color: var(--purple-quiet);
font-weight: 600;
}

.collection-art {
height: 172px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, rgba(124, 88, 253, 0.06), rgba(194, 255, 69, 0.04));
position: relative;
display: grid;
place-items: center;
overflow: hidden;
margin-bottom: var(--space-3);
}

.collection-art img {
width: 105px;
height: 138px;
object-fit: cover;
border-radius: var(--radius-sm);
position: relative;
z-index: 2;
box-shadow: 0 7px 18px rgba(124, 88, 253, 0.12);
background: #ffffff;
}

.collection-stack {
position: absolute;
width: 105px;
height: 138px;
border-radius: var(--radius-sm);
background: #ffffff;
transform: translate(12px, -7px) rotate(5deg);
box-shadow: 0 5px 12px rgba(124, 88, 253, 0.08);
}

.lang-fa .collection-stack {
transform: translate(-12px, -7px) rotate(-5deg);
}

.discover-collection-card h3 {
font-size: var(--text-body-sm);
line-height: 1.5;
margin: 0;
color: var(--landing-ink);
font-weight: 700;
}

.discover-collection-card > p {
font-size: var(--text-caption);
line-height: 1.55;
color: #8a7ab0;
margin: var(--space-1) 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}

.collection-count {
font-size: var(--text-caption);
color: #9a8bbf;
}

/* ===== Category Chips ===== */
.category-chip-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 8px 12px;
    height: 110px;
    max-height: 110px;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
}

/* Explore uses three independent horizontal rows. This keeps every chip at its
   intrinsic width, so a long label in one row cannot create extra space in another. */
.categories-section .category-chip-grid {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 8px;
    height: auto;
    max-height: none;
}

.categories-section .category-chip-row {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    width: max-content;
}

.categories-section .category-chip-row > .chip {
    flex: 0 0 auto;
    width: max-content;
    max-width: none;
}
.category-icon svg {
width: 100%;
height: 100%;
}


.app-empty-state {
min-height: 120px;
border: 1px dashed rgba(124, 88, 253, 0.25);
border-radius: var(--radius-md);
background: rgba(124, 88, 253, 0.03);
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
color: #8a7ab0;
}

.book-detail-not-found {
min-height: 55vh;
display: grid;
place-items: center;
align-content: center;
text-align: center;
gap: var(--space-3);
}
.book-detail-not-found img {
width: 78px;
}
.book-detail-not-found h1 {
font-size: var(--text-h4);
color: #6a5a8a;
margin: 0;
}
.book-detail-not-found a {
color: var(--landing-purple);
font-weight: 700;
}

.discover-book-card {
flex-basis: 132px;
}

.discover-cover-wrap {
width: 126px;
}

@media (prefers-reduced-motion: reduce) {
.book-card,
.discover-cover-wrap,
.scroller-controls button {
transition: none !important;
}
}