/* ============================================================
   style.css — Мактабат, Richtung A «Бумага» mit Liquid Glass (v1)
   Verbindliche Spezifikation: docs/DESIGN.md. Gleiche Papierfarbe,
   gleiche Schriften, gleiche Sammlungsfarben wie maktabat.app; schwebende
   Bedienelemente (Tab-Leiste, Zurück, Aktionen) sind Milchglas.
   ============================================================ */

/* ------------------------------------------------------------
   Arabische Schriften — UNVERÄNDERT (Commit 458f3b6, vom Nutzer
   abgenommen). Selbst gehostet aus webapp/fonts/, kein Google-Fonts-
   Request. Die Dateien sind bytegleich mit maktabat/static/fonts/.
   ------------------------------------------------------------ */

/* «Uthman Taha Naskh» (KFGQPC, UthmanTN1) — die Schrift, die shamela.ws für
   das arabische Original nutzt. Primärschrift in allen Hadith-Readern. */
@font-face {
  font-family: 'Uthman Taha Naskh';
  src: url('fonts/uthman-taha-naskh.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* «Noto Naskh Arabic» — Fallback und Trägerschrift für arabische Prosa.
   Echtes Komma-Glyph «،» (die Quran-Schrift rendert es als Ornament-Punkt). */
@font-face {
  font-family: 'Noto Naskh Arabic';
  src: url('fonts/noto-naskh-arabic.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Naskh Arabic';
  src: url('fonts/noto-naskh-arabic-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* «KFGQPC Uthmanic Script HAFS» — nur für Koran-Verse und die Basmala. */
@font-face {
  font-family: 'KFGQPC HAFS';
  src: url('fonts/kfgqpc-hafs.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Satzzeichen-Patch: KFGQPC rendert «،» (U+060C) als fetten Ornament-Punkt.
   Diese Face zieht NUR diese Codepoints aus Noto Naskh und steht in der
   --font-quran-Kaskade vorne — Buchstaben bleiben KFGQPC. */
@font-face {
  font-family: 'Arabic Punct';
  src: url('fonts/noto-naskh-arabic.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+060C, U+061B, U+061F, U+06D4;
}

/* ------------------------------------------------------------
   UI-Schriften «Source Serif 4» und «JetBrains Mono» — wörtlich aus
   maktabat/src/app.css übernommen (DESIGN.md §2), nur url('/fonts/…')
   zu url('fonts/…') geändert (relativ, wie die arabischen Faces oben).
   Variable Fonts (wght 400–600), Subsets nach unicode-range getrennt,
   damit ein Browser nur lädt, was der Text braucht.
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/source-serif-4-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/source-serif-4-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/source-serif-4-cyrillic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/source-serif-4-cyrillic-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/source-serif-4-latin-italic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/source-serif-4-cyrillic-italic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-cyrillic-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------
   Tokens (DESIGN.md §1). Telegram-Theme-Variablen (--tg-theme-*) werden
   für Farben nicht mehr benutzt, nur noch als Signal hell/dunkel — das
   Ergebnis landet als Klasse `dark` auf <html> (§7), NICHT hier.
   ------------------------------------------------------------ */
:root {
  --bg: #fbfaf7;
  --bg-elevated: #ffffff;
  --bg-soft: #f4f2ee;
  --text: #1a1816;
  --text-soft: #4a4642;
  --text-muted: #8a847e;
  --rule: #e8e4dd;
  --accent-app: #7c1d2e;
  --destructive: #b85454;

  /* Sammlungs-Akzent: withAccent() setzt --accent-light/--accent-dark je
     Karte/Reader (DESIGN.md §1, §9); ohne Sammlungskontext (Home-Kopf,
     Einstellungen) fällt --accent auf --accent-app zurück. */
  --accent-light: var(--accent-app);
  --accent-dark: #d6818d;
  --accent: var(--accent-light);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Abstände/Radien (§6) */
  --page-pad: 16px;
  --card-gap: 10px;
  --radius-card: 14px;
  --radius-cover: 5px;
  --radius-num: 12px;
  --radius-pill: 999px;
  --tab-bar-h: 56px;      /* Platz im App-Shell-Padding; die Kapsel selbst ist 62px hoch (§5.1) */

  /* Schrift-Kaskaden (§2) */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;

  /* Schrift-Kaskaden wie auf maktabat.app (--font-arabic / --font-quran dort) —
     UNVERÄNDERT. --font-arabic gilt für Hadith-Prosa, --font-quran für
     Koran-Verse und die Basmala. */
  --font-arabic: 'Uthman Taha Naskh', 'Noto Naskh Arabic', 'Amiri', serif;
  --font-quran: 'Arabic Punct', 'KFGQPC HAFS', 'Noto Naskh Arabic', 'Amiri', serif;
}

/* Dunkel — Hauptmechanismus ist die Klasse `dark` auf <html>, gesetzt von
   app.js aus tg.colorScheme bzw. prefers-color-scheme (§7), NICHT mehr
   @media direkt: so nehmen Telegram-Schema und Browser-Schema denselben
   Pfad. Werte aus der Spalte "Dunkel" in §1. */
html.dark {
  --bg: #14110e;
  --bg-elevated: #1f1c18;
  --bg-soft: #2a2622;
  --text: #f5f1eb;
  --text-soft: #c4bfb8;
  --text-muted: #807a72;
  --rule: #322d27;
  --accent-app: #d6818d;
  --destructive: #d47272;

  --accent-dark: #d6818d;
  --accent: var(--accent-dark);
}

/* Fallback NUR für den Fall, dass das Schema-Erkennungsskript noch nicht
   gelaufen ist und <html> weder `dark` noch eine helle Markierung trägt
   (`light`, vorsorglich — aktuell ungenutzt). Dieselben Dunkel-Werte wie
   oben, damit ein System-Dark-Mode nie unstyled aufblitzt. */
@media (prefers-color-scheme: dark) {
  html:not(.dark):not(.light) {
    --bg: #14110e;
    --bg-elevated: #1f1c18;
    --bg-soft: #2a2622;
    --text: #f5f1eb;
    --text-soft: #c4bfb8;
    --text-muted: #807a72;
    --rule: #322d27;
    --accent-app: #d6818d;
    --destructive: #d47272;

    --accent-dark: #d6818d;
    --accent: var(--accent-dark);
  }
}

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.45;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

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

/* --- Schriftgrößen-Stufen (Settings → data-font auf <html>) — UNVERÄNDERT.
   Glas-Kapseln bleiben in px und skalieren bewusst nicht mit. --- */
html[data-font="s"] { font-size: 14px; }
html[data-font="m"] { font-size: 16px; }
html[data-font="l"] { font-size: 18px; }
html[data-font="xl"] { font-size: 20px; }

/* ------------------------------------------------------------
   App-Shell
   ------------------------------------------------------------ */
.app-shell {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  /* Die schwebende Tab-Leiste liegt über dem Inhalt (§4) — unten genug
     Luft lassen, damit sie nichts dauerhaft verdeckt. */
  padding-bottom: calc(var(--tab-bar-h) + var(--safe-bottom) + 24px);
}

/* ============================================================
   §4 — Liquid Glass (v1)
   ============================================================ */
/* .btn (ohne .primary/.ghost) ist selbst ein Glas-Knopf (§5.4 Kapitel-Nav,
   §5.7 Fehlerzustand: „Knopf .btn (Glas)") — trägt die Glas-Optik deshalb
   direkt, ohne dass die Ansicht zusätzlich .glass anfügen muss. */
.glass,
.btn {
  position: relative;
  background: rgba(255, 255, 255, 0.42);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--radius-pill);
  box-shadow:
    0 12px 32px rgba(26, 24, 22, 0.16),
    0 1px 2px rgba(26, 24, 22, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(26, 24, 22, 0.05);
}
.glass::before,
.btn::before {
  /* Glanzlicht oben links */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.22) 100%);
}
.glass > *,
.btn > * { position: relative; }

.lens {
  /* aktiver Tab / aktives Segment innerhalb einer Glaskapsel */
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  box-shadow: 0 3px 10px rgba(26, 24, 22, 0.12), inset 0 1px 0 #ffffff, inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

html.dark .glass,
html.dark .btn {
  background: rgba(30, 27, 24, 0.50);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}
html.dark .glass::before,
html.dark .btn::before {
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.20) 0%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0.07) 100%);
}
html.dark .lens {
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30), 0 3px 10px rgba(0, 0, 0, 0.35);
}

/* Fallback ohne backdrop-filter (alte Android-WebViews): deckender */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass, .btn { background: rgba(255, 255, 255, 0.92); }
  html.dark .glass, html.dark .btn { background: rgba(30, 27, 24, 0.94); }
}

/* Runder Glasknopf (Zurück, Favoriten-Rund im Reader-Kopf, …) */
.icon-btn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-pill);
  color: var(--text);
  cursor: pointer;
}
.icon-btn .ic { flex-shrink: 0; }

.ic { flex-shrink: 0; }

/* ============================================================
   §2 — Kicker (überall: Sektionsköpfe, Meta-Zeilen, Buch-Kicker)
   ============================================================ */
.kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
a.kicker { color: var(--accent, var(--accent-app)); }
.kicker.accent { color: var(--accent, var(--accent-app)); }

/* Sektions-Kicker („Недавно прочитанное" / „Все сборники") */
h2.kicker, h3.kicker {
  padding: 18px 20px 8px;
}

/* Kicker-Zeile mit vorangestelltem 6px-Punkt in --accent (Sammlungs-Karte,
   Favoriten-Gruppenkopf). */
.kicker.dot {
  display: flex;
  align-items: center;
  gap: 6px;
}
.kicker.dot::before {
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent, var(--accent-app));
}

/* ============================================================
   §5.7 — Header (Kapitel, Favoriten, Einstellungen)
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(var(--safe-top) + 16px) var(--page-pad) 8px;
  background: transparent;
}
/* Nur wenn die Seite tatsächlich scrollt, bekommt der Kopf einen
   deckenden Grund (JS toggelt diese Klasse anhand des Scroll-Zustands),
   sonst bleibt er wie auf Home ohne Balken. */
.header.scrolled { background: var(--bg); }

.header-back { color: var(--text); }

.header-body { flex: 1; min-width: 0; }

.header-title {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-sub {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================
   §5.1 — Tab-Leiste (alle Screens)
   ============================================================ */
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-bottom) + 18px);
  z-index: 100;
  display: flex;
  justify-content: center;
}

/* Der Inhalt der Kapsel selbst trägt zusätzlich .glass (DESIGN.md §5.1). */
.tab-bar .glass {
  display: flex;
  align-items: center;
  height: 62px;
  padding: 5px;
  gap: 4px;
}

.tab {
  width: 96px;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: none;
  background: none;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  cursor: pointer;
}
.tab .ic { width: 22px; height: 22px; }
.tab-label {
  font-family: var(--font-sans);
  font-size: 0.65625rem; /* 10.5px */
  font-weight: 500;
}
.tab.lens { color: var(--text); }

/* ============================================================
   §5.2 — Home
   ============================================================ */
.home-head {
  /* Wortmarke links, Such-Knopf rechts (§5.2 + §5.8). `flex-start` hält den
     Knopf auf Höhe der Wortmarke statt ihn am Kicker auszurichten. */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: calc(var(--safe-top) + 24px) var(--page-pad) 4px;
}
.home-wordmark {
  font-family: var(--font-serif);
  font-size: 1.75rem; /* 28px */
  font-weight: 700;
  line-height: 1.1;
  color: var(--text);
}
.home-head .kicker { margin-top: 4px; }

/* Continue- und Sammlungs-Karte teilen sich Basis, Kartenabstand 10px,
   Seitenrand 16px (§6). */
.continue-card,
.collection-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 var(--page-pad) var(--card-gap);
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  cursor: pointer;
}
.continue-card:active,
.collection-card:active { background: var(--bg-soft); }

.continue-card {
  gap: 12px;
  padding: 12px 14px 12px 16px;
  border-left: 2px solid var(--accent, var(--accent-app));
}
.collection-card { padding: 14px 16px; }

/* Cover (§8): echtes Bild ODER — fehlt die Datei — ein getöntes Rechteck
   mit dem Anfangsbuchstaben der Sammlung. */
.cover {
  flex-shrink: 0;
  width: 56px;
  height: 80px;
  border-radius: var(--radius-cover);
  object-fit: cover;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(26, 24, 22, 0.18);
  background: color-mix(in srgb, var(--accent, var(--accent-app)) 12%, transparent);
  color: var(--accent, var(--accent-app));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 600;
}
.continue-card .cover { width: 40px; height: 57px; }

.continue-card-body,
.collection-card-body { flex: 1; min-width: 0; }

.continue-card-title {
  font-family: var(--font-serif);
  font-size: 1.0625rem; /* 17px */
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}
.continue-card-detail {
  font-family: var(--font-sans);
  font-size: 0.8125rem; /* 13px */
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.continue-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  color: var(--accent, var(--accent-app));
}
.continue-card-link .ic { width: 12px; height: 12px; }

.collection-card-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent, var(--accent-app));
  margin-bottom: 2px;
}
.collection-card-kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent, var(--accent-app));
}
.collection-card-title {
  font-family: var(--font-serif);
  font-size: 1.125rem; /* 18px */
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}
.collection-card-sub {
  font-family: var(--font-sans);
  font-size: 0.8125rem; /* 13px */
  color: var(--text-muted);
  margin-top: 2px;
}
.collection-card-chevron {
  flex-shrink: 0;
  color: #c4bdb4;
}
html.dark .collection-card-chevron { color: #5a544d; }

/* ============================================================
   §5.3 — Kapitelliste
   ============================================================ */
.chapter-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 var(--page-pad) var(--card-gap);
  padding: 10px 14px 10px 10px;
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  cursor: pointer;
}
.chapter-item:active { background: var(--bg-soft); }
.chapter-item.is-current { background: color-mix(in srgb, var(--accent, var(--accent-app)) 8%, transparent); }

.chapter-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-num);
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent, var(--accent-app)) 12%, transparent);
  color: var(--accent, var(--accent-app));
  font-family: var(--font-serif);
  font-size: 1.0625rem; /* 17px */
  font-weight: 600;
}

.chapter-item-body { flex: 1; min-width: 0; }
.chapter-item-kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent, var(--accent-app));
  margin-bottom: 2px;
}
.chapter-item-title {
  font-family: var(--font-serif);
  font-size: 1.0625rem; /* 17px */
  font-weight: 600;
  line-height: 1.2;
  color: var(--text);
}
.chapter-item-chevron { flex-shrink: 0; color: #c4bdb4; }
html.dark .chapter-item-chevron { color: #5a544d; }

/* ============================================================
   §5.4 — Reader
   ============================================================ */
.reader-topbar {
  position: sticky;
  top: calc(var(--safe-top) + 14px);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--page-pad);
  margin-bottom: 84px;
}
.reader-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 6px 0 14px;
}
/* Ohne Zurück-Knopf (Telegram, oder Depth 1 im Browser) ist die Kapsel
   das einzige Kind von .reader-topbar — justify-content: space-between
   verhält sich dann wie flex-start (Spezifikationsverhalten bei genau
   einem Flex-Item) und die Kapsel klebt links. margin-left: auto hält
   sie rechts, ohne den Zwei-Elemente-Fall zu berühren. */
.reader-progress:only-child { margin-left: auto; }
.reader-progress .lens {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  cursor: pointer;
}
.reader-progress .lens .ic { width: 18px; height: 18px; }

.reader-title {
  text-align: center;
  padding: 0 24px;
}
.reader-title .kicker { color: var(--accent, var(--accent-app)); margin-bottom: 8px; }
.reader-chapter-title {
  font-family: var(--font-serif);
  font-size: 1.625rem; /* 26px */
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
}

/* Ornament unter dem Kapiteltitel: zwei 56px-Verlaufslinien mit
   6px-Raute in --accent. */
.reader-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
.reader-ornament::before,
.reader-ornament::after {
  content: '';
  width: 56px;
  height: 1px;
  background: linear-gradient(to left, color-mix(in srgb, var(--accent, var(--accent-app)) 45%, transparent), transparent);
}
.reader-ornament::after { transform: scaleX(-1); }
.reader-ornament-dot {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  background: var(--accent, var(--accent-app));
  transform: rotate(45deg);
}

.block { margin: 0 var(--page-pad); }

.block-heading {
  font-family: var(--font-serif);
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  text-align: center;
  color: var(--accent, var(--accent-app));
  margin: 20px 16px 8px;
}

.block-text {
  padding: 10px 14px;
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--text-soft);
}

.block-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1rem; /* 16px */
  line-height: 1.5;
  text-align: center;
  color: var(--accent, var(--accent-app));
  padding: 22px 28px 0;
}

.block-bismillah {
  text-align: center;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text);
  margin: 16px;
}
/* Trägt die Basmala arabischen Text, entfällt der Kasten des .ar-Blocks. */
.block-bismillah .ar {
  background: none;
  border-radius: 0;
  padding: 0;
}

.block-divider {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 16px 32px;
}

/* Hadith/Ayah-Block: keine Karte mehr — kein Hintergrund, kein Schatten
   auf dem Block selbst. Rhythmus 30px zwischen den Blöcken (§6).
   scroll-margin-top schützt vor dem schwebenden .reader-topbar (§5.4) beim
   Deep-Link-Sprung (reader.js scrollToBlock, block:'start'). Der kritische
   Fall ist NICHT der Zielblock selbst (der landet exakt bei diesem Wert),
   sondern der VORHERIGE Block: dessen Ende liegt danach immer bei
   scroll-margin-top minus dem 30px-Abstand, und seine .block-actions-Leiste
   (44px hoch) sitzt direkt davor — reicht scroll-margin-top nicht, ragt
   diese Leiste in die Topbar-Zone (14–58px) hinein, unabhängig davon, wie
   lang der Zielblock selbst ist. Rechnung: topbar-Ende (58) + Aktionsleiste
   (44) + Blockabstand (30) + Sicherheitsabstand (16) = 148px. */
.block-hadith,
.block-ayah {
  margin-top: 30px;
  scroll-margin-top: 148px;
}

.block-kicker {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Grad-Abzeichen (Sunan at-Tirmizi) neben der Meta-Zeile. */
.badge {
  display: inline-block;
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.59375rem; /* 9.5px */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: color-mix(in srgb, var(--accent, var(--accent-app)) 12%, transparent);
  color: var(--accent, var(--accent-app));
}

/* Arabischer Block. Direction/Familie/Größe/Zeilenhöhe/margin-bottom sind
   UNVERÄNDERT (Commit 458f3b6) — die Kasten-Optik (background/radius/
   padding) ist neu dazugekommen (DESIGN.md §5.4 Punkt 2). Größen in rem,
   damit html[data-font] weiter greift. */
.ar {
  direction: rtl;
  text-align: right;
  font-family: var(--font-arabic);
  font-size: 1.375rem;
  line-height: 2;
  margin-bottom: 10px;
  background: color-mix(in srgb, var(--accent, var(--accent-app)) 5%, transparent);
  border-radius: var(--radius-card);
  padding: 14px 16px;
}
.ar-num {
  color: var(--accent, var(--accent-app));
  font-weight: 700;
}

/* Koran-Verse und Basmala: KFGQPC-Uthmani statt Naskh — UNVERÄNDERT. */
.ar-quran {
  font-family: var(--font-quran);
}
.block-ayah .ar-quran,
.block-bismillah .ar-quran {
  font-size: 1.875rem;
  line-height: 2.15;
}

.tr {
  font-family: var(--font-serif);
  font-size: 1.0625rem; /* 17px */
  line-height: 1.6;
  color: var(--text-soft);
  padding: 0 4px;
}
.tr-num {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.6875rem; /* 11px */
  color: var(--accent, var(--accent-app));
  margin-right: 6px;
}
.rich p { margin-bottom: 0.6em; }
.rich p:last-child { margin-bottom: 0; }
.rich b { font-weight: 600; color: var(--text); }

.details { margin-top: 10px; padding: 0 4px; }
.details summary {
  cursor: pointer;
  color: var(--accent, var(--accent-app));
  font-family: var(--font-sans);
  font-size: 0.875rem;
  list-style: none;
}
.details summary::-webkit-details-marker { display: none; }
.details[open] summary { margin-bottom: 6px; }
.details-body {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  color: var(--text-muted);
}

/* Aufleuchten des Arabisch-Kastens beim Anspringen per Deep-Link. */
.block.highlight .ar { animation: block-glow 1.6s ease-out; }
@keyframes block-glow {
  0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, var(--accent-app)) 55%, transparent); }
  100% { box-shadow: none; }
}

/* Aktionsleiste: eine Glaskapsel mit den .act-Aktionen. */
.block-actions {
  display: flex;
  align-self: flex-start;
  height: 44px;
  padding: 4px;
  margin-top: 12px;
}
.act {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border: none;
  border-left: 1px solid rgba(26, 24, 22, 0.08);
  background: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.75rem; /* 12px */
  color: var(--text-soft);
  cursor: pointer;
}
.act:first-child { border-left: none; }
.act .ic { width: 16px; height: 16px; }
.act.active { color: var(--accent-app); }
.act.destructive { color: var(--destructive); }
html.dark .act { border-left-color: rgba(255, 255, 255, 0.10); }
html.dark .act:first-child { border-left-color: transparent; }

/* Quellenhinweis unter dem letzten Block, über der Kapitel-Navigation. */
.reader-attribution {
  text-align: center;
  margin: 24px var(--page-pad) 0;
}

/* Kapitel-Navigation, NICHT sticky — eine schwebende Leiste würde beim
   Lesen dauerhaft Text verdecken. */
.reader-nav {
  display: flex;
  gap: 10px;
  padding: var(--page-pad);
  margin-top: 16px;
}
/* §5.4 Punkt 3: die Kapitel-Nav-Knöpfe sind jetzt .glass statt .btn
   (kein Primärknopf mehr) — Layout gilt additiv für beide Klassennamen. */
.reader-nav .btn,
.reader-nav .glass {
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
/* .glass trägt (anders als .btn) von sich aus keine Typografie/Breiten-
   verteilung — hier nachgetragen, Werte identisch zu .btn (Sans 15/600
   --text, §5.4 Punkt 3), damit „Предыдущая" / „Следующая" (mit Chevron-
   Icon statt Pfeilzeichen) gleich aussehen wie zuvor und beide Knöpfe
   die Zeile hälftig teilen. */
.reader-nav .glass {
  flex: 1;
  padding: 12px 16px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.reader-nav .glass:active { background: rgba(255, 255, 255, 0.60); }
html.dark .reader-nav .glass:active { background: rgba(30, 27, 24, 0.65); }

/* ============================================================
   §5.5 — Favoriten
   ============================================================ */
.favorites-group-kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 18px 20px 8px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent, var(--accent-app));
}
.favorites-group-kicker::before {
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent, var(--accent-app));
}

.favorite-card {
  margin: 0 var(--page-pad) var(--card-gap);
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
}
.favorite-card .tr { padding: 0; margin-top: 4px; }
.favorite-card .block-actions { margin-top: 12px; }

/* ============================================================
   §5.6 — Einstellungen
   ============================================================ */
/* .card-row: weiße Karte für gruppierte Zeilen (Einstellungen, ggf.
   weitere Listen), Radius 14, Rahmen --rule; enthält .settings-row-Kinder
   mit Hairline dazwischen. */
.card-row {
  margin: 0 var(--page-pad) var(--card-gap);
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
}
.settings-row:last-child { border-bottom: none; }
.settings-row-label {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--text);
}
.settings-row-hint {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.settings-source {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--text-muted);
  padding: 4px var(--page-pad) 0;
}

/* Segmentierter Umschalter (Schriftgröße): Glaskapsel (.glass) mit den
   .seg-Segmenten, aktives Segment .lens. */
.segmented {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 4px;
  gap: 2px;
}
.seg {
  width: 52px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.seg.lens { color: var(--text); }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  /* Größe/Optik der Glasfläche kommt aus dem geteilten .glass-Regelsatz
     oben (§4/§5.4/§5.7) — hier nur Layout, Typografie und Zustände. */
  padding: 12px 16px;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
  cursor: pointer;
  flex: 1;
  text-align: center;
}
.btn:active { background: rgba(255, 255, 255, 0.60); }
html.dark .btn:active { background: rgba(30, 27, 24, 0.65); }
/* .glass:disabled deckt die Kapitel-Nav-Knöpfe ab (§5.4 Punkt 3: disabled
   wie bisher, opacity .4) — additiv zu .btn:disabled, sonst nichts geändert. */
.btn:disabled,
.glass:disabled { opacity: 0.4; cursor: default; }
.btn.ghost {
  background: none;
  border-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  color: var(--accent, var(--accent-app));
}
.btn.ghost:active { background: var(--bg-soft); }

/* Getönter Primärknopf (§4) — z. B. „Открыть бота" (Label + icon('arrow-right'),
   §5.6). display:flex nur zur Ausrichtung von Icon und Label — bei reinem
   Text (z. B. Reader-Kapitel-Navigation) identisch zum vorherigen
   text-align:center, da ein einzelner Textknoten als Flex-Item genauso
   zentriert wird. */
.btn.primary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.38);
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--accent, var(--accent-app)) 80%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent, var(--accent-app)) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}
html.dark .btn.primary {
  color: var(--text);
  background: color-mix(in srgb, var(--accent, var(--accent-app)) 55%, transparent);
}

/* ============================================================
   §5.7 — Zustände
   ============================================================ */
.loading-spinner { display: flex; justify-content: center; padding: 40px 0; }
.spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--bg-soft);
  border-top-color: var(--accent, var(--accent-app));
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 24px;
  text-align: center;
}
.empty-state-icon { width: 40px; height: 40px; color: var(--text-muted); }
.empty-state-text {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  color: var(--text);
}
.empty-state-hint {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + 92px);
  transform: translateX(-50%);
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  color: var(--text);
  z-index: 200;
  animation: toast-in 0.15s ease-out;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ============================================================
   §5.8 — Suche (Schritt J)
   ============================================================ */

/* Kopf: liegt über der Trefferliste und bleibt beim Scrollen stehen. Der
   Hintergrund ist deckend, sonst scheinen die Karten durch das Suchfeld. */
.search-head {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(var(--safe-top) + 14px) var(--page-pad) 8px;
  background: var(--bg);
}
.search-bar {
  flex: 1;
  min-width: 0;              /* sonst sprengt das Eingabefeld die Zeile */
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 8px 0 14px;
  color: var(--text-muted);
}
.search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: none;
  -webkit-appearance: none;
  appearance: none;
  font-family: var(--font-sans);
  font-size: 1rem;           /* 16px — darunter zoomt iOS beim Fokus hinein */
  color: var(--text);
}
.search-input::placeholder { color: var(--text-muted); }
/* Die native Kreuz-Schaltfläche von type=search entfernen — wir haben eine eigene. */
.search-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.search-clear { width: 32px; height: 32px; color: var(--text-muted); }
/* `.icon-btn` setzt `display: flex` und schlägt damit das `display: none`, das
   der Browser dem hidden-Attribut gibt — ohne diese Zeile bliebe das Kreuz bei
   leerem Feld sichtbar. */
.search-clear[hidden] { display: none; }

/* Filter-Chips: eigene horizontale Scrollfläche, damit die SEITE nicht
   seitlich scrollt, wenn die Namen breiter sind als der Bildschirm. */
.search-filters {
  display: flex;
  gap: 8px;
  padding: 4px var(--page-pad) 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.search-filters::-webkit-scrollbar { display: none; }
.chip {
  flex-shrink: 0;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  background: var(--bg-elevated);
  font-family: var(--font-sans);
  font-size: 0.8125rem;      /* 13px */
  font-weight: 500;
  color: var(--text-soft);
  white-space: nowrap;
  cursor: pointer;
}
.chip.active {
  background: color-mix(in srgb, var(--accent, var(--accent-app)) 12%, transparent);
  border-color: var(--accent, var(--accent-app));
  color: var(--accent, var(--accent-app));
}

.search-meta { padding: 8px 20px; }
.search-fuzzy {
  margin-top: 4px;
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Trefferkarte: Basis wie .favorite-card, zusätzlich die Sammlungsfarbe als
   linke Kante (die Liste mischt Sammlungen, anders als die Favoriten-Gruppen). */
.search-hit {
  margin: 0 var(--page-pad) var(--card-gap);
  padding: 14px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent, var(--accent-app));
  border-radius: var(--radius-card);
  cursor: pointer;
}
.search-hit-text {
  margin-top: 4px;
  font-family: var(--font-serif);
  font-size: 0.9375rem;      /* 15px */
  line-height: 1.5;
  color: var(--text-soft);
  /* Höchstens vier Zeilen — ein Ausschnitt darf die Liste nicht dominieren. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hl {
  background: color-mix(in srgb, var(--accent, var(--accent-app)) 22%, transparent);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}
.search-direct-title {
  margin-top: 2px;
  font-family: var(--font-serif);
  font-size: 1.0625rem;      /* 17px */
  font-weight: 600;
  color: var(--text);
}
.search-direct .tr { padding: 0; margin-top: 4px; }

/* Sprungziel aus der Suche. Zitierbare Blöcke leuchten am Arabisch-Kasten auf
   (weiter oben); Überschriften und Fließtext haben keinen — dort liegt der
   Schein auf dem Element selbst. Dasselbe scroll-margin-top wie .block-hadith,
   sonst rutschen sie unter den schwebenden Reader-Kopf. */
.block-heading,
.block-text,
.block-quote {
  scroll-margin-top: 148px;
}
.block-heading.highlight,
.block-text.highlight,
.block-quote.highlight {
  border-radius: var(--radius-card);
  animation: block-glow 1.6s ease-out;
}

/* ============================================================
   §5.9 — Tafsir je Koranvers (Schritt K)
   ============================================================ */

/* Die Ausgabe-Akkordeons sitzen unter der Übersetzung und hängen an einer
   Akzentkante, damit sie sichtbar zum Vers gehören und nicht wie ein neuer
   Block wirken. */
.tafsir {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid color-mix(in srgb, var(--accent, var(--accent-app)) 30%, transparent);
}
.tafsir > summary {
  font-family: var(--font-mono);
  font-size: 0.6875rem;              /* 11px */
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.tafsir > .details-body { color: var(--text-soft); }
.tafsir-note {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Russischer Tafsir. `pre-line` erhält die Absätze der Quelle, ohne dass wir
   den Text zerschneiden — dieselbe Entscheidung wie auf maktabat.app. */
.tafsir-ru {
  font-family: var(--font-serif);
  font-size: 0.9375rem;              /* 15px */
  line-height: 1.65;
  color: var(--text-soft);
  white-space: pre-line;
  text-align: justify;
  hyphens: auto;
}

/* Arabisches Zitat auf eigener Zeile. BEWUSST OHNE die Klasse `.ar`: die
   bringt den getönten Kasten des Vers-Blocks mit (Hintergrund, Polsterung,
   22px) — bei Dutzenden Zitaten je Tafsir zerfiele der Fließtext dadurch in
   lauter Kacheln. Hier nur Schrift und Laufrichtung.
   `display: block` trennt es vom russischen Satz, `unicode-bidi: isolate`
   kapselt es: sonst verdreht der Bidi-Algorithmus Wortreihenfolge und
   Satzzeichen an der Grenze zwischen beiden Schriften. */
.tafsir-ar-block {
  display: block;
  direction: rtl;
  text-align: right;
  unicode-bidi: isolate;
  font-family: var(--font-arabic);
  font-size: 1.125rem;
  line-height: 1.95;
  margin: 10px 0;
  color: var(--text);
}
/* Koranzitat — die für die Anzeige entfernten Klammern ﴾﴿ ersetzt die Farbe. */
.tafsir-ar-block.is-quran {
  font-family: var(--font-quran);
  color: var(--accent, var(--accent-app));
}
/* Einzelne arabische Glosse mitten im Satz: inline, aber bidi-isoliert. */
.tafsir-ar-inline {
  unicode-bidi: isolate;
  direction: rtl;
  font-family: var(--font-arabic);
  font-size: 1.0625rem;
  line-height: 1.4;
}

/* Arabisches Original eine Ebene tiefer. */
.tafsir-ar { margin-top: 10px; padding-left: 0; border-left: none; }
.tafsir-ar > summary { font-size: 0.625rem; }
.tafsir-ar-para {
  direction: rtl;
  text-align: justify;
  font-family: var(--font-arabic);
  font-size: 1.125rem;
  line-height: 1.95;
  margin: 0 0 8px;
  color: var(--text-soft);
}