/* Noor web reader — reader.css
   Authentic Islamic Sacred Typography & Visual Design System
   Matches Noor App's Gilded Parchment & Candlelight Aesthetic
*/

@font-face {
  font-family: "Marcellus";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/marcellus-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+2000-206F;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/amiri-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Amiri";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/amiri-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Amiri Quran";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/amiri-quran.woff") format("woff");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: "Scheherazade New";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/scheherazade-new.woff") format("woff");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-089F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFC;
}

/* ── Themes & Color Tokens ──────────────────────────────────────── */
:root, body.theme-sepia {
  --bg: #FAF4E8;
  --bg-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%238C6A21' stroke-width='0.65' opacity='0.05'%3E%3Crect x='18' y='18' width='24' height='24'/%3E%3Crect x='18' y='18' width='24' height='24' transform='rotate(45 30 30)'/%3E%3Ccircle cx='30' cy='30' r='3.5'/%3E%3Cline x1='0' y1='30' x2='60' y2='30' stroke-dasharray='2 4' opacity='0.5'/%3E%3Cline x1='30' y1='0' x2='30' y2='60' stroke-dasharray='2 4' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
  --bg-gradient: radial-gradient(ellipse at 50% 12%, #FFFDF8 0%, #FAF4E8 55%, #F0E6D2 100%) fixed;
  --surface: #FFFDF8;
  --surface-raised: #FFFFFF;
  --surface-alt: #F4EBD9;
  --ink: #1E1912;
  --ink-soft: #5C4F3B;
  --ink-faint: #8E7D63;
  --green: #0C2C1D;
  --green-soft: #2D6A4F;
  --green-deep: #061B11;
  --green-wash: #EEF5F1;
  --green-line: #C4E0CC;
  --gold: #9E7422;
  --gold-soft: #DFC785;
  --gold-bright: #C9972E;
  --gold-marker: #D4AF37;
  --gold-deep: #7A5A1A;
  --gold-tint: rgba(184, 138, 40, 0.12);
  --lapis: #1F4E8C;
  --lapis-soft: rgba(31, 78, 140, 0.12);
  --border: rgba(158, 116, 34, 0.18);
  --border-strong: rgba(158, 116, 34, 0.38);
  --radius: 20px;
  --qsize: 1.85rem;
  --shadow: 0 4px 20px rgba(60, 45, 15, 0.06);
  --shadow-lg: 0 16px 48px rgba(60, 45, 15, 0.13);
}

body.theme-light {
  --bg: #FAF8F3;
  --bg-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%230C2C1D' stroke-width='0.65' opacity='0.035'%3E%3Crect x='18' y='18' width='24' height='24'/%3E%3Crect x='18' y='18' width='24' height='24' transform='rotate(45 30 30)'/%3E%3Ccircle cx='30' cy='30' r='3.5'/%3E%3Cline x1='0' y1='30' x2='60' y2='30' stroke-dasharray='2 4' opacity='0.5'/%3E%3Cline x1='30' y1='0' x2='30' y2='60' stroke-dasharray='2 4' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
  --bg-gradient: linear-gradient(180deg, #FCFBF8 0%, #F3F0E6 100%);
  --surface: #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-alt: #F2EFE8;
  --ink: #121A15;
  --ink-soft: #445248;
  --ink-faint: #78857C;
  --green: #0C2C1D;
  --green-soft: #205E3F;
  --green-deep: #061B11;
  --green-wash: #EBF5EF;
  --green-line: #C6E2D0;
  --gold: #9E7422;
  --gold-soft: #DFC785;
  --gold-bright: #C9972E;
  --gold-marker: #D4AF37;
  --gold-deep: #7A5A1A;
  --gold-tint: rgba(166, 125, 34, 0.12);
  --lapis: #1F4E8C;
  --lapis-soft: rgba(31, 78, 140, 0.12);
  --border: rgba(12, 44, 29, 0.1);
  --border-strong: rgba(158, 116, 34, 0.3);
  --shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.09);
}

body.theme-dark {
  --bg: #0E0C09;
  --bg-watermark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23E8CA82' stroke-width='0.65' opacity='0.055'%3E%3Crect x='18' y='18' width='24' height='24'/%3E%3Crect x='18' y='18' width='24' height='24' transform='rotate(45 30 30)'/%3E%3Ccircle cx='30' cy='30' r='3.5'/%3E%3Cline x1='0' y1='30' x2='60' y2='30' stroke-dasharray='2 4' opacity='0.5'/%3E%3Cline x1='30' y1='0' x2='30' y2='60' stroke-dasharray='2 4' opacity='0.5'/%3E%3C/g%3E%3C/svg%3E");
  --bg-gradient: radial-gradient(ellipse at 50% 18%, #1A140E 0%, #0E0C09 60%, #060504 100%) fixed;
  --surface: #16120B;
  --surface-raised: #201A11;
  --surface-alt: #1A140C;
  --ink: #EFE7D5;
  --ink-soft: #B8A888;
  --ink-faint: #7A6D54;
  --green: #D4AF37;
  --green-soft: #F5E096;
  --green-deep: #141008;
  --green-wash: rgba(212, 175, 55, 0.12);
  --green-line: rgba(212, 175, 55, 0.35);
  --gold: #D4AF37;
  --gold-soft: #AA8B36;
  --gold-bright: #F5E096;
  --gold-marker: #F0CF65;
  --gold-deep: #D4AF37;
  --gold-tint: rgba(212, 175, 55, 0.18);
  --lapis: #4A82D1;
  --lapis-soft: rgba(74, 130, 209, 0.2);
  --border: rgba(212, 175, 55, 0.22);
  --border-strong: rgba(212, 175, 55, 0.44);
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.65);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* Custom Sacred Theme Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg);
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) var(--bg);
}

body.reader-page {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background-color: var(--bg);
  background-image: var(--bg-watermark), var(--bg-gradient);
  background-repeat: repeat, no-repeat;
  background-position: center top, center top;
  background-attachment: scroll, fixed;
  color: var(--ink);
  line-height: 1.75;
  font-size: 16px;
  min-height: 100vh;
  padding-bottom: 7.5rem;
  transition: background-color 0.3s ease, color 0.3s ease;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[dir="rtl"] body.reader-page,
body.reader-page [lang="ar"] {
  font-family: "Amiri", "Scheherazade New", "SF Arabic", "Geeza Pro", "Noto Naskh Arabic", serif;
  font-feature-settings: "calt" 1, "liga" 1, "kern" 1, "cv01" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--gold); color: #0A2417; }
a { color: var(--green-soft); text-decoration-thickness: 1px; text-underline-offset: 2px; }
button, input, select { font-family: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* ── Topbar (Liquid Emerald Crystalline Glass) ──────────────────── */
.r-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1.8rem;
  background: linear-gradient(180deg, rgba(16, 52, 35, 0.88) 0%, rgba(10, 36, 24, 0.94) 100%);
  backdrop-filter: blur(28px) saturate(210%) brightness(105%) contrast(102%);
  -webkit-backdrop-filter: blur(28px) saturate(210%) brightness(105%) contrast(102%);
  color: #F8F5EC;
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1.5px solid rgba(212, 175, 55, 0.4);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32),
              inset 0 1.5px 0.5px rgba(255, 255, 255, 0.35),
              inset 0 -1px 0 rgba(0, 0, 0, 0.5),
              0 0 24px rgba(212, 175, 55, 0.12);
}
body.theme-dark .r-topbar {
  background: linear-gradient(180deg, rgba(22, 18, 12, 0.88) 0%, rgba(14, 11, 7, 0.94) 100%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6),
              inset 0 1.5px 0.5px rgba(255, 255, 255, 0.2),
              inset 0 -1px 0 rgba(0, 0, 0, 0.7),
              0 0 24px rgba(212, 175, 55, 0.15);
}

/* Gilded Surah Reading Progress Bar */
.r-reading-progress {
  position: absolute;
  bottom: 0;
  inset-inline: 0;
  height: 2.5px;
  background: rgba(0, 0, 0, 0.25);
  overflow: visible;
  pointer-events: none;
}
.r-reading-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #9E7422 0%, #D4AF37 40%, #FFF1C5 75%, #D4AF37 100%);
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.9), 0 0 20px rgba(255, 241, 197, 0.6);
  transition: width 0.12s ease-out;
  position: relative;
}
.r-reading-progress-fill::after {
  content: "";
  position: absolute;
  inset-inline-end: -3.5px;
  top: -2.5px;
  width: 7.5px;
  height: 7.5px;
  border-radius: 50%;
  background: #FFFDF8;
  box-shadow: 0 0 8px #FFF, 0 0 14px #D4AF37;
}

.r-topbar-start { display: flex; align-items: center; gap: 0.9rem; }
.brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.brand-mark { border-radius: 26%; display: block; box-shadow: 0 2px 10px rgba(0,0,0,0.4); border: 1px solid rgba(212, 175, 55, 0.4); }
.brand-name { font-family: "Marcellus", Georgia, serif; font-size: 1.25rem; color: #F8F5EC; letter-spacing: .05em; }

.r-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Amiri", serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFF9ED;
  background: linear-gradient(180deg, #103B26 0%, #082115 100%) padding-box, linear-gradient(135deg, #FFF1C5 0%, #D4AF37 32%, #8C6A21 68%, #F6E298 100%) border-box;
  border: 1.5px solid transparent;
  border-radius: 999px;
  padding: 0.38rem 1.15rem;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 0 10px rgba(212, 175, 55, 0.3);
}
.r-pill-btn:hover {
  background: linear-gradient(180deg, #164D32 0%, #0C2C1D 100%) padding-box, linear-gradient(135deg, #FFFFFF 0%, #F5E096 30%, #D4AF37 70%, #FFF5D0 100%) border-box;
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.65), 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  color: #FFFFFF;
  transform: translateY(-1.5px);
}
.r-pill-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4), inset 0 2px 5px rgba(0, 0, 0, 0.6);
}

body.theme-dark .r-pill-btn {
  background: linear-gradient(180deg, #241D12 0%, #16120B 100%) padding-box, linear-gradient(135deg, #FFF1C5 0%, #D4AF37 32%, #8C6A21 68%, #F6E298 100%) border-box;
  color: #FFF0C2;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
body.theme-dark .r-pill-btn:hover {
  background: linear-gradient(180deg, #322818 0%, #20180D 100%) padding-box, linear-gradient(135deg, #FFFFFF 0%, #F5E096 30%, #D4AF37 70%, #FFF5D0 100%) border-box;
  color: #FFFFFF;
}

.r-actions { display: flex; gap: 0.5rem; align-items: center; }
.r-ghost-btn {
  font-family: "Amiri", "Marcellus", serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: #F0EAE1;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(16, 59, 38, 0.88) 0%, rgba(8, 33, 21, 0.94) 100%) padding-box, linear-gradient(135deg, rgba(212, 175, 55, 0.6) 0%, rgba(212, 175, 55, 0.2) 50%, rgba(212, 175, 55, 0.6) 100%) border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.36rem 0.95rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
body.theme-dark .r-ghost-btn {
  color: #EFE7D5;
  background: linear-gradient(180deg, rgba(34, 27, 17, 0.88) 0%, rgba(20, 16, 10, 0.94) 100%) padding-box, linear-gradient(135deg, rgba(212, 175, 55, 0.5) 0%, rgba(212, 175, 55, 0.15) 50%, rgba(212, 175, 55, 0.5) 100%) border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.r-ghost-btn:hover {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.35) 0%, rgba(184, 138, 40, 0.45) 100%) padding-box, linear-gradient(135deg, #FFF0C2 0%, #D4AF37 50%, #8C6A21 100%) border-box;
  color: #FFFDF8;
  border-color: transparent;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}
.r-ghost-btn.active {
  background: linear-gradient(135deg, #FFF2CB 0%, #D4AF37 38%, #936F1F 80%, #F5E096 100%) !important;
  color: #141008 !important;
  font-weight: 700;
  border: 1px solid #FFEAA0 !important;
  box-shadow: 0 2px 14px rgba(212, 175, 55, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ── Serene Controls Dock (Classical Manuscript Bar) ───────────── */
.r-controls {
  display: flex;
  gap: 0.65rem;
  align-items: center;
  max-width: 50rem;
  margin: 1.25rem auto 0;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  position: relative;
  z-index: 25;
}
body.theme-dark .r-controls {
  background: var(--surface-raised);
  border-color: var(--border-strong);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}

.r-nav-btn {
  font-size: 1.25rem;
  line-height: 1;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid transparent;
  background: linear-gradient(180deg, var(--surface-alt) 0%, var(--surface) 100%) padding-box,
              linear-gradient(135deg, #FFF0C2 0%, #D4AF37 50%, #8C6A21 100%) border-box;
  color: var(--gold-deep);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
}
.r-nav-btn:hover {
  border-color: transparent;
  background: linear-gradient(180deg, var(--surface-raised) 0%, var(--surface-alt) 100%) padding-box,
              linear-gradient(135deg, #FFFFFF 0%, #F5E096 40%, #D4AF37 80%, #FFF0C2 100%) border-box;
  color: var(--gold-bright);
  box-shadow: 0 0 20px var(--gold-tint), 0 4px 14px rgba(0, 0, 0, 0.14);
  transform: scale(1.12);
}
.r-nav-btn:active {
  transform: scale(0.94);
}

.r-search-wrap {
  position: relative;
  flex: 1 1 9rem;
  min-width: 7rem;
}
#surahSearch {
  width: 100%;
  font-size: .92rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  border: 1.2px solid transparent;
  background: linear-gradient(rgba(244, 235, 217, 0.75), rgba(244, 235, 217, 0.75)) padding-box,
              linear-gradient(135deg, rgba(212, 175, 55, 0.45) 0%, rgba(158, 116, 34, 0.2) 100%) border-box;
  color: var(--ink);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}
#surahSearch:focus {
  border-color: transparent;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
              linear-gradient(135deg, #FFF1C5 0%, #D4AF37 50%, #8C6A21 100%) border-box;
  box-shadow: 0 0 0 3.5px rgba(212, 175, 55, 0.3), 0 4px 14px rgba(212, 175, 55, 0.15);
}
body.theme-dark #surahSearch {
  background: linear-gradient(rgba(26, 20, 12, 0.8), rgba(26, 20, 12, 0.8)) padding-box,
              linear-gradient(135deg, rgba(212, 175, 55, 0.4) 0%, rgba(212, 175, 55, 0.15) 100%) border-box;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45);
}
body.theme-dark #surahSearch:focus {
  background: linear-gradient(rgba(32, 26, 17, 0.95), rgba(32, 26, 17, 0.95)) padding-box,
              linear-gradient(135deg, #FFF1C5 0%, #D4AF37 50%, #8C6A21 100%) border-box;
  box-shadow: 0 0 0 3.5px rgba(212, 175, 55, 0.4), 0 4px 16px rgba(0, 0, 0, 0.5);
}

.r-search-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  inset-inline-start: 0;
  width: min(26rem, 92vw);
  max-height: 23rem;
  overflow-y: auto;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.94) 0%, rgba(250, 244, 232, 0.96) 100%) padding-box,
              linear-gradient(135deg, #FFF1C5 0%, #D4AF37 50%, #8C6A21 100%) border-box;
  border: 1.5px solid transparent;
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(60, 45, 15, 0.22),
              inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95),
              0 0 24px rgba(212, 175, 55, 0.18);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  z-index: 100;
  padding: 0.6rem;
  animation: modalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
body.theme-dark .r-search-dropdown {
  background: linear-gradient(180deg, rgba(24, 19, 12, 0.94) 0%, rgba(16, 13, 8, 0.96) 100%) padding-box,
              linear-gradient(135deg, #FFF1C5 0%, #D4AF37 50%, #8C6A21 100%) border-box;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75),
              inset 0 1.5px 0.5px rgba(255, 255, 255, 0.25),
              0 0 28px rgba(212, 175, 55, 0.25);
}
.r-search-dropdown[hidden] { display: none; }

.r-search-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 0.95rem;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
  border-bottom: 1px solid var(--border);
}
.r-search-item:last-child { border-bottom: none; }
.r-search-item:hover, .r-search-item.active {
  background: var(--surface-alt);
  border-color: transparent;
}
.r-search-item.empty {
  cursor: default;
  opacity: 0.7;
  justify-content: center;
  font-size: 0.85rem;
}
.r-search-item.empty:hover {
  background: transparent;
}
.r-search-badge {
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  border-radius: 6px;
  background: var(--gold-tint);
  color: var(--gold);
  border: 1px solid var(--border-strong);
  flex: none;
}
.r-search-item-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.r-search-item-title {
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.r-search-item-sub {
  font-size: 0.8rem;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#surahSelect {
  flex: 2 1 12rem;
  min-width: 10rem;
  font-size: .94rem;
  font-weight: 600;
  padding: .5rem .95rem;
  border-radius: 999px;
  border: 1.2px solid transparent;
  background: linear-gradient(rgba(244, 235, 217, 0.75), rgba(244, 235, 217, 0.75)) padding-box,
              linear-gradient(135deg, rgba(212, 175, 55, 0.45) 0%, rgba(158, 116, 34, 0.2) 100%) border-box;
  color: var(--ink);
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}
#surahSelect:focus {
  border-color: transparent;
  background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
              linear-gradient(135deg, #FFF1C5 0%, #D4AF37 50%, #8C6A21 100%) border-box;
  box-shadow: 0 0 0 3.5px rgba(212, 175, 55, 0.3), 0 4px 14px rgba(212, 175, 55, 0.15);
}
body.theme-dark #surahSelect {
  background: linear-gradient(rgba(26, 20, 12, 0.8), rgba(26, 20, 12, 0.8)) padding-box,
              linear-gradient(135deg, rgba(212, 175, 55, 0.4) 0%, rgba(212, 175, 55, 0.15) 100%) border-box;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45);
}
body.theme-dark #surahSelect:focus {
  background: linear-gradient(rgba(32, 26, 17, 0.95), rgba(32, 26, 17, 0.95)) padding-box,
              linear-gradient(135deg, #FFF1C5 0%, #D4AF37 50%, #8C6A21 100%) border-box;
  box-shadow: 0 0 0 3.5px rgba(212, 175, 55, 0.4), 0 4px 16px rgba(0, 0, 0, 0.5);
}

.r-ayah-jump-box {
  display: flex;
  align-items: center;
  background: linear-gradient(rgba(244, 235, 217, 0.75), rgba(244, 235, 217, 0.75)) padding-box,
              linear-gradient(135deg, rgba(212, 175, 55, 0.45) 0%, rgba(158, 116, 34, 0.2) 100%) border-box;
  border: 1.2px solid transparent;
  border-radius: 999px;
  overflow: hidden;
  padding-inline-start: 0.4rem;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.18s ease;
}
body.theme-dark .r-ayah-jump-box {
  background: linear-gradient(rgba(26, 20, 12, 0.8), rgba(26, 20, 12, 0.8)) padding-box,
              linear-gradient(135deg, rgba(212, 175, 55, 0.4) 0%, rgba(212, 175, 55, 0.15) 100%) border-box;
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.45);
}
#ayahJump {
  width: 3.4rem;
  font-size: 0.92rem;
  padding: 0.42rem 0.35rem;
  border: none;
  background: transparent;
  color: var(--ink);
  text-align: center;
  font-weight: 600;
}
.r-mini-btn {
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.48rem 0.95rem;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(184, 138, 40, 0.35) 100%);
  border: none;
  color: var(--gold-deep);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0 999px 999px 0;
}
html[dir="rtl"] .r-mini-btn {
  border-radius: 999px 0 0 999px;
}
.r-mini-btn:hover {
  background: linear-gradient(135deg, #FFF1C5 0%, #D4AF37 50%, #8C6A21 100%);
  color: #141008;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6);
}

/* ── Main Layout ────────────────────────────────────────────────── */
.r-main { max-width: 56rem; margin: 0 auto; padding: 1.35rem 1.25rem 4rem; }
.r-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem 2.2rem;
  box-shadow: var(--shadow);
}

/* ── Surah Header Card & Illuminated Cartouche ─────────────────── */
.r-head-card {
  text-align: center;
  margin-top: 1rem;
  position: relative;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.r-surah-cartouche {
  position: relative;
  border: 1.5px solid var(--border-strong);
  border-radius: 18px;
  padding: 1.5rem 2rem 1.3rem;
  margin: 0.5rem auto 0;
  background: var(--surface-raised);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  max-width: 42rem;
}
body.theme-dark .r-surah-cartouche {
  border-color: var(--border-strong);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}
.r-cartouche-crest {
  display: flex;
  justify-content: center;
  color: var(--gold);
  margin-bottom: 0.5rem;
  opacity: 0.95;
  filter: drop-shadow(0 1px 3px var(--gold-tint));
}
.r-cartouche-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  color: var(--gold);
  opacity: 0.85;
  filter: drop-shadow(0 0 2px var(--gold-tint));
}
.r-cartouche-corner.tl { top: 7px; left: 7px; }
.r-cartouche-corner.tr { top: 7px; right: 7px; }
.r-cartouche-corner.bl { bottom: 7px; left: 7px; }
.r-cartouche-corner.br { bottom: 7px; right: 7px; }

.r-head-title-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}
.r-surah-badge-wrap {
  grid-column: 1;
  display: flex;
  justify-content: flex-start;
}
#surahName {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  margin: 0;
}
#playSurahBtn {
  grid-column: 3;
  justify-self: flex-end;
}
@media (max-width: 600px) {
  .r-head-title-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
}
.r-surah-badge {
  font-family: "Amiri", serif;
  font-size: 1.25rem;
  font-weight: 700;
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: radial-gradient(circle, var(--gold-tint) 0%, var(--surface-alt) 100%);
  color: var(--gold);
  box-shadow: 0 0 12px var(--gold-tint), inset 0 0 6px var(--gold-tint);
}
#surahName {
  font-family: "Amiri", "Scheherazade New", "SF Arabic", serif;
  font-weight: 700;
  font-size: 2.85rem;
  color: var(--green);
  text-shadow: 0 1px 1px rgba(255,255,255,0.6), 0 2px 6px rgba(0,0,0,0.1), 0 0 28px var(--gold-tint);
  direction: rtl !important;
  unicode-bidi: isolate;
  letter-spacing: 0.02em;
  font-feature-settings: "calt" 1, "liga" 1, "cv01" 1;
}
body.theme-dark #surahName {
  color: #FFF0C2;
  text-shadow: 0 0 28px rgba(212, 175, 55, 0.5), 0 2px 6px rgba(0,0,0,0.8);
}

.r-audio-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Amiri", serif;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #FFF9ED;
  background: var(--green);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 0.35rem 1.15rem;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(12, 44, 29, 0.18);
}
.r-audio-chip:hover {
  background: var(--green-soft);
  box-shadow: 0 4px 14px rgba(12, 44, 29, 0.28);
  transform: translateY(-1px);
}
.r-audio-chip.playing {
  background: var(--gold) !important;
  color: #141008 !important;
  border-color: var(--gold-bright) !important;
  box-shadow: 0 0 16px var(--gold-tint) !important;
}

body.theme-dark .r-audio-chip {
  background: #1C231E;
  border-color: var(--gold);
  color: #FFF0C2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
body.theme-dark .r-audio-chip:hover {
  background: #25332A;
  border-color: var(--gold-bright);
}

.r-cartouche-meta-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
  padding-top: 0.95rem;
  border-top: 1px dashed var(--border-strong);
}
.r-meta-pill {
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.3rem 0.95rem;
  border-radius: 999px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  transition: border-color 0.16s, transform 0.16s, box-shadow 0.16s;
}
.r-meta-pill:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--gold-tint);
}
.r-meta-pill.pill-meccan {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.06) 100%);
  border-color: var(--gold);
  color: var(--gold-bright);
  box-shadow: 0 1px 6px rgba(212, 175, 55, 0.2);
}
.r-meta-pill.pill-medinan {
  background: linear-gradient(135deg, rgba(45, 106, 79, 0.2) 0%, rgba(45, 106, 79, 0.06) 100%);
  border-color: var(--green-soft);
  color: var(--green);
  box-shadow: 0 1px 6px rgba(45, 106, 79, 0.2);
}
body.theme-dark .r-meta-pill.pill-medinan {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.16) 0%, rgba(212, 175, 55, 0.05) 100%);
  border-color: rgba(212, 175, 55, 0.45);
  color: #F5E096;
  box-shadow: 0 1px 6px rgba(212, 175, 55, 0.2);
}
.r-surah-meta { color: var(--ink-faint); font-size: .92rem; margin-top: .4rem; }

/* Bismillah with decorative divider */
.r-bismillah-wrap {
  margin-top: 1.8rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.bismillah-ornament {
  color: var(--gold);
  width: min(340px, 88%);
  height: 28px;
  filter: drop-shadow(0 1px 3px var(--gold-tint));
}
.r-bismillah {
  font-family: "Amiri Quran", "Amiri", "Scheherazade New", serif;
  font-size: calc(var(--qsize) * 1.25);
  color: var(--ink);
  line-height: 2.4;
  direction: rtl !important;
  unicode-bidi: isolate;
  text-align: center;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 1px rgba(255,255,255,0.4), 0 0 20px var(--gold-tint);
}
body.theme-dark .r-bismillah {
  color: #FFF0C2;
  text-shadow: 0 0 24px rgba(212, 175, 55, 0.45);
}
.r-bismillah-wrap[hidden] { display: none !important; }
.r-fatiha-intro {
  color: var(--ink);
  font-family: "Amiri Quran", "Amiri", "Scheherazade New", serif;
  font-size: var(--qsize);
  line-height: 2;
  text-align: center;
  margin: 0 0 1.25rem;
}

/* Explicit visibility guarantees for hidden elements */
[hidden] { display: none !important; }
.r-mushaf[hidden] { display: none !important; }
.r-ayat-list[hidden] { display: none !important; }
.r-books-wrap[hidden] { display: none !important; }

/* ── Calm Segmented Reading Mode Bar & Options ────────────────────── */
.r-view-bar-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  margin: 1.25rem auto 1.4rem;
  max-width: 44rem;
}
.r-view-mode-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.3rem 0.4rem;
  margin: 0;
  max-width: 24rem;
}
body.theme-dark .r-view-mode-bar {
  background: var(--surface-raised);
  border-color: var(--border-strong);
}
.r-options-bar {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.r-option-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--ink-soft);
  font-family: "Amiri", serif;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.r-option-pill-btn:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
  background: var(--surface-alt);
}
.r-option-pill-btn.active,
.r-option-pill-btn[aria-pressed="true"] {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.12);
  color: var(--gold-deep);
  font-weight: 800;
}
body.theme-dark .r-option-pill-btn {
  background: var(--surface-raised);
  border-color: var(--border-strong);
  color: var(--ink-soft);
}
body.theme-dark .r-option-pill-btn:hover {
  border-color: var(--gold);
  color: #FFF0C2;
}
body.theme-dark .r-option-pill-btn.active,
body.theme-dark .r-option-pill-btn[aria-pressed="true"] {
  background: rgba(212, 175, 55, 0.22);
  border-color: var(--gold);
  color: #FFF0C2;
}
.r-view-mode-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.45rem 1.1rem;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: "Amiri", serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.r-view-mode-btn:hover {
  color: var(--gold-deep);
  background: rgba(212, 175, 55, 0.08);
}
.r-view-mode-btn.active,
.r-view-mode-btn[aria-selected="true"] {
  background: var(--surface-raised);
  color: var(--green) !important;
  font-weight: 800;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
body.theme-dark .r-view-mode-btn.active,
body.theme-dark .r-view-mode-btn[aria-selected="true"] {
  background: rgba(212, 175, 55, 0.18);
  color: #FFF0C2 !important;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

/* ── Tafseer Book Selection Shelf (Classical Bookplates) ─────────── */
.r-books-wrap {
  margin: 1.8rem auto 1.3rem;
  max-width: 52rem;
  padding: 0 0.5rem;
}
.r-books-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.95rem;
}
.r-books-header-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-strong), transparent);
}
.r-books-header-title {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Amiri", serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.r-books {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: center;
}
.r-chip {
  font-family: "Amiri", serif;
  font-size: 0.98rem;
  font-weight: 700;
  padding: 0.45rem 1.25rem;
  border-radius: 12px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--surface), var(--surface)) padding-box, linear-gradient(135deg, rgba(212, 175, 55, 0.45) 0%, rgba(158, 116, 34, 0.2) 50%, rgba(212, 175, 55, 0.45) 100%) border-box;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: 0.01em;
}
.r-chip:hover {
  background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, linear-gradient(135deg, #FFF0C2 0%, #D4AF37 50%, #8C6A21 100%) border-box;
  color: var(--gold-deep);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px var(--gold-tint), 0 0 0 1px var(--gold);
}
.r-chip[aria-pressed="true"] {
  background: linear-gradient(135deg, rgba(12, 44, 29, 0.08) 0%, rgba(212, 175, 55, 0.18) 100%), var(--surface-raised) !important;
  border-color: var(--gold) !important;
  color: var(--green) !important;
  font-weight: 800;
  box-shadow: 0 0 0 1.5px var(--gold), 0 4px 18px var(--gold-tint), inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}
body.theme-dark .r-chip[aria-pressed="true"] {
  color: var(--gold-bright) !important;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.28) 0%, rgba(140, 106, 33, 0.25) 100%), var(--surface-raised) !important;
}

/* ── Mode 1: Continuous Mushaf Flow (Illuminated Manuscript Folio) ─ */
.r-mushaf {
  position: relative;
  font-family: "Amiri Quran", "Amiri", "Scheherazade New", "SF Arabic", serif;
  font-size: var(--qsize);
  line-height: 2.75;
  text-align: justify;
  text-align-last: center;
  direction: rtl !important;
  unicode-bidi: isolate;
  color: var(--ink);
  padding: 3.4rem 3.2rem;
  background: radial-gradient(ellipse at 50% 20%, #FFFDF9 0%, var(--surface) 75%), var(--surface);
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 6px var(--gold-soft), 0 16px 48px rgba(60, 45, 15, 0.1), 0 0 40px var(--gold-tint);
}
body.theme-dark .r-mushaf {
  background: radial-gradient(ellipse at 50% 20%, #1D1710 0%, var(--surface) 80%), var(--surface);
  box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 6px rgba(212, 175, 55, 0.35), 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 36px rgba(212, 175, 55, 0.15);
}
.r-mushaf::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid var(--gold-soft);
  border-radius: calc(var(--radius) - 8px);
  pointer-events: none;
  opacity: 0.75;
}
.r-mushaf::after {
  content: "";
  position: absolute;
  inset: 16px;
  border: 0.75px dashed var(--border-strong);
  border-radius: calc(var(--radius) - 10px);
  pointer-events: none;
  opacity: 0.75;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1.1' opacity='0.85'%3E%3Cpath d='M2 12 L12 2 L22 12 L12 22 Z'/%3E%3Crect x='5' y='5' width='14' height='14'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23D4AF37' opacity='0.35'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1.1' opacity='0.85'%3E%3Cpath d='M2 12 L12 2 L22 12 L12 22 Z'/%3E%3Crect x='5' y='5' width='14' height='14'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23D4AF37' opacity='0.35'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1.1' opacity='0.85'%3E%3Cpath d='M2 12 L12 2 L22 12 L12 22 Z'/%3E%3Crect x='5' y='5' width='14' height='14'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23D4AF37' opacity='0.35'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23D4AF37' stroke-width='1.1' opacity='0.85'%3E%3Cpath d='M2 12 L12 2 L22 12 L12 22 Z'/%3E%3Crect x='5' y='5' width='14' height='14'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23D4AF37' opacity='0.35'/%3E%3C/g%3E%3C/svg%3E");
  background-position: top 4px left 4px, top 4px right 4px, bottom 4px left 4px, bottom 4px right 4px;
  background-repeat: no-repeat;
}
.ayah {
  display: inline;
  direction: rtl !important;
  unicode-bidi: isolate;
  border-radius: 10px;
  padding: 0.14em 0.32em;
  transition: background 0.22s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.ayah:hover {
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.05) 70%, transparent 100%),
              rgba(212, 175, 55, 0.08);
  box-shadow: 0 2px 14px rgba(212, 175, 55, 0.2);
  cursor: pointer;
}
.ayah.selected {
  background: radial-gradient(ellipse at center, rgba(12, 44, 29, 0.1) 0%, rgba(212, 175, 55, 0.18) 100%),
              rgba(212, 175, 55, 0.12);
  box-shadow: 0 0 0 2px var(--gold), 0 4px 18px rgba(212, 175, 55, 0.28);
}
.ayah.playing {
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.3) 0%, rgba(212, 175, 55, 0.12) 100%),
              rgba(212, 175, 55, 0.2) !important;
  box-shadow: 0 0 0 2.5px var(--gold-marker), 0 0 24px rgba(212, 175, 55, 0.55);
}
body.theme-dark .ayah:hover {
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.08) 70%, transparent 100%),
              rgba(212, 175, 55, 0.12);
  box-shadow: 0 2px 18px rgba(212, 175, 55, 0.35);
}
body.theme-dark .ayah.selected {
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.3) 0%, rgba(212, 175, 55, 0.15) 100%),
              rgba(212, 175, 55, 0.2);
  box-shadow: 0 0 0 2px var(--gold-bright), 0 4px 20px rgba(212, 175, 55, 0.45);
}
body.theme-dark .ayah.playing {
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.4) 0%, rgba(212, 175, 55, 0.18) 100%),
              rgba(212, 175, 55, 0.28) !important;
  box-shadow: 0 0 0 2.5px #FFEAA0, 0 0 28px rgba(212, 175, 55, 0.7);
}

/* ── Word Tokens (Interactive Clickable Words) ─────────────────── */
.q-word {
  display: inline-block;
  direction: rtl !important;
  unicode-bidi: isolate;
  cursor: pointer;
  padding: 0 0.16em;
  border-radius: 6px;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.q-word:hover {
  background: radial-gradient(ellipse at center, var(--gold-tint) 0%, transparent 85%), var(--gold-tint);
  color: var(--green-soft);
  transform: translateY(-1px);
  box-shadow: 0 2px 10px var(--gold-tint);
}
body.theme-dark .q-word:hover {
  color: var(--gold-bright);
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.25) 0%, transparent 85%), rgba(212, 175, 55, 0.15);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);
}

/* ── Tajweed Spans ─────────────────────────────────────────────── */
.noor-tj {
  display: inline;
  font-weight: inherit;
  transition: filter 0.15s ease, opacity 0.15s ease;
  cursor: pointer;
}
.noor-tj:hover {
  filter: brightness(1.28);
}

/* ── Gilded Ayah Marker (AyahMark) ──────────────────────────────── */
.ayah-mark {
  display: inline-flex;
  direction: rtl !important;
  unicode-bidi: isolate;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  position: relative;
  margin: 0 0.45em;
  vertical-align: middle;
  cursor: pointer;
  color: var(--gold);
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease, filter 0.2s ease;
}
.ayah-mark:hover {
  transform: scale(1.26);
  color: var(--gold-bright);
  filter: drop-shadow(0 0 10px var(--gold-bright)) drop-shadow(0 0 3px var(--gold));
}
.ayah-mark-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.ayah-mark-lapis {
  stroke: var(--lapis);
}
body.theme-dark .ayah-mark-lapis {
  stroke: var(--lapis);
}
.ayah-mark-num {
  position: relative;
  font-family: "Amiri", serif;
  font-size: 0.64em;
  font-weight: 700;
  line-height: 1;
  color: inherit;
  margin-top: -1px;
}
.ayah.selected .ayah-mark,
.r-verse-card.selected .ayah-mark {
  color: var(--gold-bright);
  filter: drop-shadow(0 0 8px var(--gold-bright));
}
.ayah.playing .ayah-mark,
.r-verse-card.playing .ayah-mark {
  color: var(--gold-bright);
  animation: goldPulse 2s infinite;
}

/* ── Mode 2: Verse-by-Verse (Study List) ────────────────────────── */
.r-ayat-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  direction: rtl !important;
}
.r-verse-card {
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-alt) 100%);
  border: 1.2px solid var(--border-strong);
  border-inline-start: 5px solid var(--gold);
  border-radius: 26px;
  padding: 1.8rem 2.4rem;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: all 0.24s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}
.r-verse-card::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed var(--border);
  border-radius: 20px;
  pointer-events: none;
  opacity: 0.35;
}
.r-verse-card:hover {
  border-color: var(--gold);
  border-inline-start-color: var(--gold-bright);
  box-shadow: 0 16px 44px rgba(60, 45, 15, 0.12),
              0 0 28px rgba(212, 175, 55, 0.18),
              inset 0 1.5px 0.5px rgba(255, 255, 255, 0.9);
  transform: translateY(-2.5px);
}
.r-verse-card.selected {
  border-color: var(--gold);
  border-inline-start-color: var(--gold-bright);
  box-shadow: 0 0 0 1px var(--gold), 0 14px 40px var(--gold-tint), var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, var(--surface-alt) 0%, var(--surface) 100%);
}
.r-verse-card.playing {
  border-color: var(--gold);
  border-inline-start-color: var(--gold-bright);
  box-shadow: 0 0 0 2px var(--gold-soft), 0 0 32px var(--gold-tint), var(--shadow-lg), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, var(--gold-tint) 0%, var(--surface) 100%);
}
body.theme-dark .r-verse-card {
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.theme-dark .r-verse-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6),
              0 0 28px rgba(212, 175, 55, 0.25),
              inset 0 1.5px 0.5px rgba(255, 255, 255, 0.15);
}
.r-verse-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
  direction: ltr;
}
html[dir="rtl"] .r-verse-head {
  direction: rtl;
}
.r-verse-badge {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--gold);
  background: linear-gradient(135deg, var(--gold-tint) 0%, transparent 100%);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 0.3rem 1.05rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  letter-spacing: 0.02em;
}
.r-verse-actions { display: flex; gap: 0.5rem; }
.r-action-btn {
  font-family: "Amiri", serif;
  font-size: 0.94rem;
  font-weight: 700;
  border: 1.2px solid transparent;
  background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, linear-gradient(135deg, rgba(212, 175, 55, 0.45) 0%, rgba(158, 116, 34, 0.25) 50%, rgba(212, 175, 55, 0.45) 100%) border-box;
  border-radius: 12px;
  padding: 0.35rem 0.95rem;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  letter-spacing: 0.01em;
}
.r-action-btn:hover {
  border-color: transparent;
  background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, linear-gradient(135deg, #FFF0C2 0%, #D4AF37 50%, #8C6A21 100%) border-box;
  color: var(--gold-deep);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px var(--gold-tint), 0 0 12px var(--gold-tint);
}
.r-action-btn:active {
  transform: translateY(0.5px) scale(0.97);
}
body.theme-dark .r-action-btn {
  background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, linear-gradient(135deg, rgba(212, 175, 55, 0.35) 0%, rgba(212, 175, 55, 0.15) 50%, rgba(212, 175, 55, 0.35) 100%) border-box;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.theme-dark .r-action-btn:hover {
  color: var(--gold-bright);
  background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, linear-gradient(135deg, #FFF0C2 0%, #D4AF37 50%, #8C6A21 100%) border-box;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.35);
}

.r-verse-arabic {
  font-family: "Amiri Quran", "Amiri", "Scheherazade New", serif;
  font-size: calc(var(--qsize) * 1.15);
  line-height: 2.6;
  color: var(--ink);
  margin-bottom: 1.1rem;
  direction: rtl !important;
  unicode-bidi: isolate !important;
  text-align: right !important;
  font-feature-settings: "calt" 1, "liga" 1, "kern" 1;
  text-rendering: optimizeLegibility;
}
.r-verse-trans {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink-soft);
  border-top: 1px dashed var(--border);
  padding-top: 1rem;
  direction: ltr;
  text-align: left;
  letter-spacing: 0.01em;
}

/* ── Embedded Tafseer Box inside Verse Study Card ─────────────── */
.r-verse-tafseer-box {
  margin-top: 1.15rem;
  padding: 1.15rem 1.4rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-inline-start: 3.5px solid var(--gold);
  border-radius: 14px;
  box-shadow: inset 0 0 16px rgba(184, 138, 40, 0.04);
}
.r-verse-tafseer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px dashed var(--border);
}
.r-tafseer-source-tag {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gold);
  background: var(--gold-tint);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
}
.r-tafseer-passage-range {
  font-size: 0.8rem;
  color: var(--ink-faint);
  font-weight: 600;
}
.r-verse-tafseer-text {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.r-verse-tafseer-text .tafseer-p {
  font-family: "Amiri", serif;
  font-size: 1.18rem;
  line-height: 2.2;
  color: var(--ink);
  text-align: justify;
  margin: 0;
  direction: rtl;
}

/* ── Sliding Tafseer Sheet / Drawer ────────────────────────────── */
.r-tafseer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1040;
  transition: opacity 0.25s ease;
}
.r-tafseer-backdrop[hidden] { display: none; }

.r-tafseer-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 85vh;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.96) 0%, rgba(248, 242, 230, 0.98) 100%) padding-box,
              linear-gradient(135deg, #FFF1C5 0%, #D4AF37 35%, #8C6A21 70%, #F6E298 100%) border-box;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.38),
              0 0 36px rgba(212, 175, 55, 0.2),
              inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(32px) saturate(210%);
  -webkit-backdrop-filter: blur(32px) saturate(210%);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}
body.theme-dark .r-tafseer-sheet {
  background: linear-gradient(180deg, rgba(24, 19, 12, 0.96) 0%, rgba(16, 13, 8, 0.98) 100%) padding-box,
              linear-gradient(135deg, #FFF1C5 0%, #D4AF37 35%, #8C6A21 70%, #F6E298 100%) border-box;
  box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.8),
              0 0 40px rgba(212, 175, 55, 0.25),
              inset 0 1.5px 0.5px rgba(255, 255, 255, 0.3);
}
.r-tafseer-sheet[hidden] { display: none; }

@media (min-width: 960px) {
  .r-tafseer-sheet {
    max-width: 56rem;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

.r-sheet-drag-handle {
  width: 48px;
  height: 5px;
  border-radius: 999px;
  background: var(--gold);
  opacity: 0.65;
  margin: 0.75rem auto 0.4rem;
  flex: none;
}

.r-sheet-header {
  padding: 0.5rem 1.6rem 1rem;
  border-bottom: 1.5px solid var(--border-strong);
  background: var(--surface-raised);
  flex: none;
}
.r-sheet-books-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.85rem;
}
.r-sheet-books {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.r-sheet-books::-webkit-scrollbar { display: none; }

.r-sheet-top-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: none;
}
.r-sheet-btn {
  font-size: 0.84rem;
  font-weight: 700;
  padding: 0.32rem 0.7rem;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--surface-alt);
  color: var(--ink);
  transition: all 0.15s ease;
}
.r-sheet-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: var(--surface-raised);
}
.r-sheet-close {
  font-size: 1.1rem;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-alt);
  color: var(--ink-soft);
  transition: all 0.15s ease;
}
.r-sheet-close:hover {
  border-color: var(--gold);
  color: var(--gold-bright);
  background: var(--surface-raised);
  transform: scale(1.08);
}

.r-sheet-subnav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.r-sheet-scope-tabs {
  display: flex;
  background: var(--surface-alt);
  border: 1.5px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.25rem;
}
.r-scope-tab {
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.35rem 1rem;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
}
.r-scope-tab.active {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
  color: #0C2C1D;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35);
}
body.theme-dark .r-scope-tab.active {
  color: #141008;
}

.r-sheet-steppers {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.r-stepper-btn {
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: var(--surface-alt);
  color: var(--gold);
  cursor: pointer;
  transition: all 0.15s;
}
.r-stepper-btn:hover {
  background: var(--gold);
  color: #FFF;
  border-color: var(--gold);
  box-shadow: 0 0 10px var(--gold-tint);
  transform: scale(1.08);
}
.r-location-badge {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--gold);
  padding: 0.3rem 0.75rem;
  background: var(--gold-tint);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
}

.r-sheet-content {
  overflow-y: auto;
  padding: 1.4rem 1.8rem 2.8rem;
  overscroll-behavior: contain;
}

/* Verse Showcase Box inside Sheet */
.r-sheet-verse-box {
  background: linear-gradient(180deg, var(--surface-alt) 0%, var(--surface) 100%);
  border: 1.8px solid var(--gold);
  border-radius: 20px;
  padding: 1.5rem 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 24px var(--gold-tint), inset 0 0 32px rgba(184, 138, 40, 0.06), 0 0 0 3px var(--surface), 0 0 0 4.5px var(--gold-soft);
  position: relative;
}
.r-sheet-verse-box::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px dashed var(--gold-soft);
  border-radius: 15px;
  opacity: 0.5;
  pointer-events: none;
}
.r-sheet-verse-text {
  font-family: "Amiri", "Scheherazade New", serif;
  font-size: calc(var(--qsize) * 1.1);
  line-height: 2.5;
  color: var(--ink);
  text-align: justify;
  direction: rtl !important;
  unicode-bidi: isolate;
  margin-bottom: 0.6rem;
}
.r-sheet-verse-trans {
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink-soft);
  border-top: 1px dashed var(--border-strong);
  padding-top: 0.85rem;
  margin-top: 0.85rem;
  direction: ltr;
}
.r-sheet-passage-note {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold);
  background: var(--gold-tint);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  margin-top: 0.85rem;
  display: inline-block;
}

.r-tafseer-meta-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.15rem;
}
.r-tafseer-book {
  font-weight: 800;
  color: var(--gold);
  font-size: 1.25rem;
  font-family: "Amiri", serif;
  text-shadow: 0 0 1px var(--gold-tint);
}
.r-tafseer-range {
  font-size: 0.92rem;
  color: var(--ink-faint);
  font-weight: 600;
}

/* Paragraphs & Discourse Typography */
.r-tafseer-paragraphs {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.tafseer-p {
  font-family: "Amiri", serif;
  font-size: 1.28rem;
  line-height: 2.4;
  text-align: justify;
  color: var(--ink);
  margin: 0;
  direction: rtl;
  font-feature-settings: "calt" 1, "liga" 1;
}
.tafseer-quote {
  color: var(--green);
  font-weight: 700;
  padding: 0 0.15em;
}
body.theme-light .tafseer-quote { color: var(--green-deep); }
body.theme-dark .tafseer-quote { color: var(--gold-bright); text-shadow: 0 0 12px rgba(212, 175, 55, 0.35); }

.tafseer-hadith {
  color: var(--gold-bright);
  font-weight: 600;
  padding: 0 0.2em;
}
body.theme-light .tafseer-hadith { color: #8A6510; }
body.theme-dark .tafseer-hadith { color: #F5E096; }

.tafseer-marker {
  display: inline-block;
  font-weight: 700;
  color: var(--gold);
  background: var(--gold-tint);
  border: 1px solid var(--border-strong);
  padding: 0.15em 0.7em;
  border-radius: 8px;
  margin-inline-end: 0.5em;
  font-size: 0.92em;
  letter-spacing: 0.02em;
}

/* Page Tafseer Card List */
.r-sheet-page-list {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.tafseer-page-card {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-inline-start: 4px solid var(--gold);
  border-radius: 16px;
  padding: 1.2rem 1.6rem;
  box-shadow: var(--shadow);
}
.tafseer-page-card-ayah {
  font-family: "Amiri", serif;
  font-size: 1.25rem;
  line-height: 2.2;
  color: var(--gold);
  margin-bottom: 0.7rem;
  border-bottom: 1px dashed var(--border-strong);
  padding-bottom: 0.55rem;
}

.r-hint { text-align: center; color: var(--ink-faint); font-size: .86rem; margin-top: 1.8rem; }
.r-footer { text-align: center; color: var(--ink-faint); font-size: .86rem; margin-top: 2.6rem; }
#footNote { display: none !important; }

/* ── Word Morphology Modal (Illuminated Manuscript Card) ─────────── */
.r-word-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.r-word-modal[hidden] { display: none; }
.r-word-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.r-word-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.95) 0%, rgba(248, 242, 230, 0.97) 100%) padding-box,
              linear-gradient(135deg, #FFF1C5 0%, #D4AF37 35%, #8C6A21 70%, #F6E298 100%) border-box;
  border: 1.8px solid transparent;
  border-radius: 28px;
  width: 100%;
  max-width: 25.5rem;
  box-shadow: 0 24px 64px rgba(60, 45, 15, 0.28),
              inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95),
              0 0 32px rgba(212, 175, 55, 0.22);
  backdrop-filter: blur(32px) saturate(210%);
  -webkit-backdrop-filter: blur(32px) saturate(210%);
  padding: 1.8rem 2rem;
  z-index: 2;
  animation: modalPop 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}
body.theme-dark .r-word-card {
  background: linear-gradient(180deg, rgba(24, 19, 12, 0.95) 0%, rgba(16, 13, 8, 0.97) 100%) padding-box,
              linear-gradient(135deg, #FFF1C5 0%, #D4AF37 35%, #8C6A21 70%, #F6E298 100%) border-box;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.8),
              inset 0 1.5px 0.5px rgba(255, 255, 255, 0.3),
              0 0 36px rgba(212, 175, 55, 0.28);
}
@keyframes modalPop {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.r-word-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.9rem;
}
.r-badge {
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
}
.r-badge.badge-noun { background: var(--green-wash); color: var(--green); border: 1px solid var(--green-line); }
.r-badge.badge-verb { background: var(--gold-tint); color: var(--gold); border: 1px solid var(--gold); }
.r-badge.badge-particle { background: var(--surface-alt); color: var(--ink-soft); border: 1px solid var(--border); }

.r-word-card .r-ghost-btn {
  color: var(--ink-soft);
  border-color: var(--border);
  background: var(--surface-alt);
}

.r-word-arabic {
  font-family: "Amiri", serif;
  font-size: 2.6rem;
  color: var(--green);
  text-align: center;
  margin-bottom: 0.2rem;
  line-height: 1.4;
}
body.theme-dark .r-word-arabic { color: var(--gold); }

.r-word-translit {
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.95rem;
  margin-bottom: 1rem;
  direction: ltr;
}
.r-word-meaning-box {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.1rem;
  text-align: center;
}
.r-meaning-label { font-size: 0.8rem; color: var(--ink-faint); display: block; margin-bottom: 0.2rem; }
.r-word-gloss { font-size: 1.2rem; font-weight: 600; color: var(--ink); }

.r-word-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
.r-word-detail-item {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.6rem 0.85rem;
}
.r-word-detail-item.full { grid-column: span 2; }
.r-detail-label { font-size: 0.76rem; color: var(--ink-faint); display: block; margin-bottom: 0.2rem; }
.r-detail-value { font-size: 0.98rem; font-weight: 600; color: var(--green); }
body.theme-dark .r-detail-value { color: var(--gold); }

/* ── Translation Options Modal ─────────────────────────────────── */
.r-trans-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.r-trans-modal[hidden] { display: none !important; }
.r-trans-modal .r-trans-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  width: 100%;
  max-width: 29rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.16);
  padding: 1.5rem 1.6rem;
  z-index: 2;
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
body.theme-dark .r-trans-modal .r-trans-card {
  background: var(--surface-raised);
  border-color: var(--border-strong);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
}
.r-trans-modal-title-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.r-trans-title {
  font-family: "Amiri", serif;
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--green);
  margin: 0;
}
body.theme-dark .r-trans-title {
  color: var(--gold-soft);
}
.r-trans-desc {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0.35rem 0 1rem;
  line-height: 1.5;
}
.r-trans-options-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.r-trans-group-heading {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0.5rem 0 0.15rem;
  font-weight: 700;
}
.r-trans-opt-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  text-align: inherit;
  padding: 0.7rem 0.95rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.16s ease;
}
.r-trans-opt-btn:hover {
  border-color: var(--gold);
  background: var(--surface-raised);
}
.r-trans-opt-btn.active,
.r-trans-opt-btn[aria-checked="true"] {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.12);
  box-shadow: 0 0 0 1px var(--gold);
}
body.theme-dark .r-trans-opt-btn {
  background: rgba(255, 255, 255, 0.03);
  border-color: var(--border);
}
body.theme-dark .r-trans-opt-btn:hover {
  background: rgba(255, 255, 255, 0.07);
}
body.theme-dark .r-trans-opt-btn.active,
body.theme-dark .r-trans-opt-btn[aria-checked="true"] {
  background: rgba(212, 175, 55, 0.2);
  border-color: var(--gold);
}
.r-trans-opt-info {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.r-trans-opt-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
}
.r-trans-opt-btn.active .r-trans-opt-name {
  color: var(--green);
}
body.theme-dark .r-trans-opt-btn.active .r-trans-opt-name {
  color: var(--gold-soft);
}
.r-trans-opt-sub {
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.r-trans-opt-check {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gold-deep);
  opacity: 0;
  transition: opacity 0.15s ease;
}
.r-trans-opt-btn.active .r-trans-opt-check,
.r-trans-opt-btn[aria-checked="true"] .r-trans-opt-check {
  opacity: 1;
}

/* ── Topbar Option Buttons ─────────────────────────────────────── */
.r-actions .r-option-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: "Amiri", serif;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
}
.r-actions .r-option-btn:hover {
  border-color: var(--gold);
  color: var(--gold-deep);
}
.r-actions .r-option-btn.active,
.r-actions .r-option-btn[aria-pressed="true"] {
  border-color: var(--gold);
  background: rgba(212, 175, 55, 0.14);
  color: var(--gold-deep);
}
body.theme-dark .r-actions .r-option-btn.active,
body.theme-dark .r-actions .r-option-btn[aria-pressed="true"] {
  background: rgba(212, 175, 55, 0.22);
  border-color: var(--gold);
  color: #FFF0C2;
}

/* ── Quran Index Modal (Browse & Exploration) ──────────────────── */
.r-index-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.r-index-modal[hidden] { display: none; }
.r-index-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.r-index-dialog {
  position: relative;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: 24px;
  width: 100%;
  max-width: 44rem;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  z-index: 2;
  overflow: hidden;
  animation: modalPop 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.r-index-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
}
.r-index-tabs { display: flex; gap: 0.5rem; }
.r-tab-btn {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.42rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s;
}
.r-tab-btn.active {
  background: var(--green);
  color: #F2EEDF;
  border-color: var(--green);
  box-shadow: 0 2px 8px rgba(27, 69, 48, 0.3);
}
body.theme-dark .r-tab-btn.active {
  background: var(--gold);
  color: #141008;
  border-color: var(--gold);
}
.r-index-header .r-ghost-btn { color: var(--ink-soft); border-color: var(--border); background: var(--surface); }

.r-index-search-bar { padding: 0.85rem 1.5rem; border-bottom: 1px solid var(--border); }
#indexSearchInput {
  width: 100%;
  padding: 0.65rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--surface-alt);
  color: var(--ink);
  font-size: 0.95rem;
  transition: border-color 0.15s;
}
#indexSearchInput:focus { border-color: var(--gold); background: var(--surface-raised); }
.r-index-body { flex: 1; overflow-y: auto; padding: 1.1rem 1.5rem; }
.r-index-pane[hidden] { display: none; }

/* Surah list items */
.r-surah-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  border-radius: 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.r-surah-item:hover { background: var(--surface-alt); transform: translateX(-2px); }
[dir="ltr"] .r-surah-item:hover { transform: translateX(2px); }

.r-surah-item-start { display: flex; align-items: center; gap: 0.95rem; }

/* 8-pointed star badge */
.r-star-badge {
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--gold);
}
.r-star-badge .star-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.r-star-badge .star-num {
  position: relative;
  font-weight: 700;
  font-size: 0.85rem;
  color: inherit;
}

.r-surah-item-name { font-weight: 700; font-size: 1.1rem; color: var(--ink); }
.r-surah-item-sub { font-size: 0.84rem; color: var(--ink-faint); }
.r-surah-item-meta { display: flex; align-items: center; gap: 0.6rem; }
.r-badge.badge-meccan { background: var(--gold-tint); color: var(--gold); border: 1px solid var(--border); }
.r-badge.badge-medinan { background: var(--green-wash); color: var(--green); border: 1px solid var(--green-line); }

/* Juz grid */
.r-juz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: 0.85rem; }
.r-juz-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 0.95rem 1.1rem;
  cursor: pointer;
  transition: all 0.16s ease;
}
.r-juz-card:hover {
  border-color: var(--gold);
  background: var(--surface-raised);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.r-juz-title { font-weight: 700; color: var(--green); margin-bottom: 0.25rem; font-size: 1rem; }
body.theme-dark .r-juz-title { color: var(--gold); }
.juz-icon { color: var(--gold); font-size: 1.1rem; }
.r-juz-desc { font-size: 0.84rem; color: var(--ink-faint); }

/* Pages grid */
.r-pages-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr)); gap: 0.5rem; }
.r-page-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.92rem;
  font-weight: 600;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.12s;
}
.r-page-cell:hover {
  background: var(--gold);
  color: #FFF;
  border-color: var(--gold);
  transform: scale(1.08);
}

/* ── Sticky Bottom Audio Player Bar ─────────────────────────────── */
.r-player-bar {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  z-index: 50;
  background: linear-gradient(180deg, rgba(14, 46, 31, 0.88) 0%, rgba(8, 28, 18, 0.94) 100%);
  backdrop-filter: blur(30px) saturate(220%) brightness(106%);
  -webkit-backdrop-filter: blur(30px) saturate(220%) brightness(106%);
  color: #F8F5EC;
  border-top: 1.5px solid rgba(212, 175, 55, 0.45);
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.45),
              inset 0 1.5px 0.5px rgba(255, 255, 255, 0.32),
              inset 0 0 35px rgba(12, 44, 29, 0.5),
              0 0 28px rgba(212, 175, 55, 0.2);
  animation: slideUp 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.r-player-bar[hidden] { display: none; }
@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.r-player-inner {
  max-width: 54rem;
  margin: 0 auto;
  padding: 0.8rem 1.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.r-player-meta { display: flex; align-items: center; gap: 0.85rem; min-width: 9.5rem; }
.r-player-text { display: flex; flex-direction: column; }
.r-player-title { font-weight: 700; font-size: 1.02rem; color: #FFF; }
.r-player-sub { font-size: 0.84rem; color: var(--gold-bright); font-weight: 600; }

/* Recitation Live Equalizer Wave Bars */
.r-equalizer {
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 20px;
  padding: 0 4px;
}
.eq-bar {
  width: 3px;
  height: 4px;
  border-radius: 2px;
  background: var(--gold-soft);
  transition: height 0.15s ease;
}
.r-equalizer.playing .eq-bar:nth-child(1) {
  background: #D4AF37;
  animation: eqBounce 0.75s ease-in-out infinite alternate;
}
.r-equalizer.playing .eq-bar:nth-child(2) {
  background: #F5E096;
  animation: eqBounce 0.55s ease-in-out 0.15s infinite alternate;
}
.r-equalizer.playing .eq-bar:nth-child(3) {
  background: #D4AF37;
  animation: eqBounce 0.85s ease-in-out 0.35s infinite alternate;
}
@keyframes eqBounce {
  0% { height: 4px; opacity: 0.5; }
  100% { height: 20px; opacity: 1; }
}

.r-player-controls { display: flex; align-items: center; gap: 0.85rem; }
.r-player-btn {
  background: linear-gradient(180deg, rgba(16, 59, 38, 0.85) 0%, rgba(8, 33, 21, 0.92) 100%) padding-box, linear-gradient(135deg, rgba(212, 175, 55, 0.6) 0%, rgba(212, 175, 55, 0.2) 50%, rgba(212, 175, 55, 0.6) 100%) border-box;
  border: 1.2px solid transparent;
  color: #FFF8E7;
  border-radius: 50%;
  width: 2.55rem;
  height: 2.55rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.r-player-btn:hover {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.35) 0%, rgba(184, 138, 40, 0.45) 100%) padding-box, linear-gradient(135deg, #FFF0C2 0%, #D4AF37 50%, #8C6A21 100%) border-box;
  border-color: transparent;
  color: #FFFFFF;
  transform: scale(1.1);
  box-shadow: 0 0 18px rgba(212, 175, 55, 0.5), 0 4px 12px rgba(0, 0, 0, 0.35);
}
.r-player-btn.main {
  width: 3.45rem;
  height: 3.45rem;
  background: linear-gradient(135deg, #FFF2CB 0%, #D4AF37 35%, #936F1F 75%, #F5E096 100%);
  color: #061B11;
  border: 2px solid #FFE9A0;
  font-size: 1.35rem;
  font-weight: 700;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45), 0 0 26px rgba(212, 175, 55, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.r-player-btn.main:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 28px rgba(212, 175, 55, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.r-player-btn.main.playing {
  animation: goldPulse 2.4s infinite ease-in-out;
}
@keyframes goldPulse {
  0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.75); }
  70% { box-shadow: 0 0 0 16px rgba(212, 175, 55, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

.r-player-btn.mini { width: 1.8rem; height: 1.8rem; font-size: 0.8rem; border: none; background: transparent; color: var(--gold-soft); }
.r-player-btn.toggle { border-radius: 999px; width: auto; padding: 0.32rem 0.85rem; font-size: 0.82rem; gap: 0.3rem; }

.r-player-settings { display: flex; align-items: center; gap: 0.6rem; }
.r-player-select {
  background: linear-gradient(180deg, rgba(16, 50, 34, 0.75) 0%, rgba(8, 26, 17, 0.85) 100%) padding-box,
              linear-gradient(135deg, rgba(212, 175, 55, 0.5) 0%, rgba(158, 116, 34, 0.25) 100%) border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  color: #F8F5EC;
  padding: 0.42rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.18s ease;
}
.r-player-select:focus {
  border-color: transparent;
  background: linear-gradient(180deg, rgba(20, 64, 43, 0.85) 0%, rgba(10, 34, 22, 0.92) 100%) padding-box,
              linear-gradient(135deg, #FFF1C5 0%, #D4AF37 50%, #8C6A21 100%) border-box;
  outline: none;
  box-shadow: 0 0 0 2.5px rgba(212, 175, 55, 0.4);
}

/* ── Volume Control in Audio Player ─────────────────────────────── */
.r-player-volume-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(180deg, rgba(16, 50, 34, 0.75) 0%, rgba(8, 26, 17, 0.85) 100%) padding-box,
              linear-gradient(135deg, rgba(212, 175, 55, 0.5) 0%, rgba(158, 116, 34, 0.25) 100%) border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.25rem 0.6rem 0.25rem 0.35rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 2px 6px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.r-vol-step-btn {
  width: 1.55rem;
  height: 1.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: var(--gold-soft);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all 0.12s ease;
}
.r-vol-step-btn:hover {
  background: var(--gold);
  color: #141008;
  border-color: var(--gold);
  transform: scale(1.08);
}

body.theme-dark .r-player-bar {
  background: linear-gradient(180deg, rgba(20, 16, 10, 0.95) 0%, rgba(13, 10, 6, 0.98) 100%);
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.75),
              inset 0 1.5px 0.5px rgba(255, 255, 255, 0.12),
              inset 0 0 35px rgba(0, 0, 0, 0.7),
              0 0 28px rgba(212, 175, 55, 0.2);
}
body.theme-dark .r-player-btn {
  background: linear-gradient(180deg, rgba(36, 29, 18, 0.9) 0%, rgba(20, 16, 10, 0.95) 100%) padding-box,
              linear-gradient(135deg, rgba(212, 175, 55, 0.6) 0%, rgba(212, 175, 55, 0.2) 50%, rgba(212, 175, 55, 0.6) 100%) border-box;
}
body.theme-dark .r-player-btn.main {
  color: #141008;
}
body.theme-dark .r-player-select,
body.theme-dark .r-player-volume-wrap {
  background: linear-gradient(180deg, rgba(36, 29, 18, 0.85) 0%, rgba(20, 16, 10, 0.92) 100%) padding-box,
              linear-gradient(135deg, rgba(212, 175, 55, 0.5) 0%, rgba(158, 116, 34, 0.25) 100%) border-box;
}
body.theme-dark .r-player-select:focus {
  background: linear-gradient(180deg, rgba(46, 37, 23, 0.9) 0%, rgba(26, 21, 13, 0.96) 100%) padding-box,
              linear-gradient(135deg, #FFF1C5 0%, #D4AF37 50%, #8C6A21 100%) border-box;
}
.r-vol-step-btn:active {
  transform: scale(0.92);
}
.r-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  outline: none;
  cursor: pointer;
  accent-color: var(--gold);
  transition: opacity 0.15s ease, width 0.2s ease;
}
.r-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.r-volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.r-volume-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--gold-soft);
  min-width: 2.2rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  user-select: none;
}

/* ── PWA Install Buttons & Standalone App Mode ──────────────────── */
.r-install-top-btn {
  background: var(--gold-tint);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.8rem;
  transition: all 0.15s ease;
}
.r-install-top-btn:hover {
  background: var(--gold);
  color: #141008;
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.35);
}

body.is-standalone .r-topbar {
  padding-top: calc(0.6rem + env(safe-area-inset-top, 0px));
}
body.is-standalone .r-footer {
  padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

/* ── iOS Install Instructions Modal ─────────────────────────────── */
.r-ios-install-card {
  max-width: 27rem;
  padding: 1.85rem 1.4rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 24px;
}
.r-ios-install-icon {
  margin-bottom: 0.85rem;
  filter: drop-shadow(0 8px 24px rgba(212, 175, 55, 0.3));
}
.r-ios-install-icon img {
  border-radius: 18px;
}
.r-ios-install-title {
  font-size: 1.22rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.r-ios-install-sub {
  font-size: 0.86rem;
  color: var(--ink-faint);
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.r-ios-steps {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  width: 100%;
  text-align: start;
  margin-bottom: 1.5rem;
}
.r-ios-step {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}
.r-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gold-tint);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-weight: 700;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 0.15rem;
}
.r-step-content {
  font-size: 0.86rem;
  color: var(--ink);
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.r-step-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.65rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--gold);
  width: fit-content;
}
.r-modal-action-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold));
  border: none;
  border-radius: 999px;
  color: #141008;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s;
}
.r-modal-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35);
}

/* ── Mobile Nav Hidden on Desktop ───────────────────────────────── */
.r-mobile-nav {
  display: none !important;
}

/* ── Mobile Responsive Overhaul ─────────────────────────────────── */
@media (max-width: 768px) {
  /* 0. Prevent Horizontal Page Blowout */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* 1. Global Containers & Body */
  .r-main {
    max-width: 100%;
    padding: 0.45rem 0.55rem calc(5.5rem + env(safe-area-inset-bottom, 0px)) 0.55rem;
    box-sizing: border-box !important;
  }
  .r-card {
    padding: 1.15rem 0.85rem;
    border-radius: 20px;
    box-sizing: border-box !important;
  }

  /* 2. Topbar & Brand */
  .r-topbar {
    padding: 0.4rem 0.6rem !important;
    gap: 0.35rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .r-topbar-start {
    flex-shrink: 0 !important;
  }
  .brand {
    gap: 0.35rem !important;
  }
  .brand-name {
    font-size: 0.88rem !important;
  }
  #themeToggleBtn,
  #openIndexBtn,
  #modeToggleBtn,
  #installAppBtn {
    display: none !important;
  }
  .r-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .r-actions::-webkit-scrollbar {
    display: none !important;
  }
  .r-trans-pill-wrap {
    padding: 0.18rem 0.35rem !important;
    font-size: 0.72rem !important;
    max-width: 6.2rem !important;
    flex-shrink: 1 !important;
  }
  .r-trans-select {
    font-size: 0.72rem !important;
    max-width: 4.8rem !important;
  }
  .r-ghost-btn {
    padding: 0.26rem 0.45rem !important;
    font-size: 0.78rem !important;
    flex-shrink: 0 !important;
  }
  #fontMinus, #fontPlus {
    padding: 0.22rem 0.35rem !important;
    font-size: 0.76rem !important;
    min-width: 26px !important;
  }
  #tajweedToggleBtn, .tajweed-btn {
    padding: 0.22rem 0.45rem !important;
    font-size: 0.76rem !important;
    flex-shrink: 0 !important;
  }

  /* 3. Ergonomic 2-Row Controls Dock (Flexbox Architecture) */
  .r-controls {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.45rem !important;
    padding: 0.55rem 0.65rem !important;
    border-radius: 20px !important;
    margin: 0.4rem auto 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  /* Row 1: Symmetrical Surah Navigator */
  #prevSurah {
    order: 1 !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.35rem !important;
    border-radius: 12px !important;
    touch-action: manipulation !important;
  }
  #surahSelect {
    order: 2 !important;
    flex: 1 1 calc(100% - 108px) !important;
    min-width: 0 !important;
    width: auto !important;
    height: 44px !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    text-align: center !important;
    touch-action: manipulation !important;
  }
  #nextSurah {
    order: 3 !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 1.35rem !important;
    border-radius: 12px !important;
    touch-action: manipulation !important;
  }
  /* Row 2: Search Input & Ayah Jumper */
  .r-search-wrap {
    order: 4 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    position: relative !important;
  }
  #surahSearch {
    height: 42px !important;
    font-size: 16px !important; /* Prevents iOS Safari input auto-zoom */
    border-radius: 12px !important;
    padding: 0 0.85rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .r-search-dropdown {
    width: min(24rem, calc(100vw - 2rem)) !important;
    max-height: 18rem !important;
  }
  .r-ayah-jump-box {
    order: 5 !important;
    flex: 0 0 auto !important;
    height: 42px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
  }
  #ayahJump {
    height: 100% !important;
    width: 2.8rem !important;
    font-size: 16px !important; /* Prevents iOS Safari input auto-zoom */
    padding: 0 0.25rem !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  #ayahJumpGo {
    height: 100% !important;
    padding: 0 0.75rem !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    touch-action: manipulation !important;
  }

  /* 4. Single-Layer Surah Cartouche (Zero Card Nesting Overhead) */
  .r-head-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 0.25rem;
    margin-bottom: 0.75rem;
    box-sizing: border-box !important;
  }
  .r-surah-cartouche {
    padding: 1.15rem 0.85rem 1rem !important;
    border-radius: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    box-shadow: inset 0 0 24px rgba(212, 175, 55, 0.1), 0 4px 18px rgba(0, 0, 0, 0.25) !important;
  }
  .r-head-title-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.45rem !important;
    width: 100% !important;
  }
  .r-surah-badge {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.05rem;
  }
  #surahName {
    font-size: clamp(1.55rem, 6vw, 2.2rem) !important;
    line-height: 1.35 !important;
    text-align: center !important;
    word-break: break-word !important;
    max-width: 100% !important;
    overflow: visible !important;
    direction: inherit !important;
    unicode-bidi: normal !important;
  }
  html[dir="ltr"] #surahName,
  html[lang="en"] #surahName {
    direction: ltr !important;
  }
  #playSurahBtn {
    margin-top: 0.2rem;
    padding: 0.35rem 1.15rem;
    font-size: 0.92rem;
    touch-action: manipulation;
  }
  .r-cartouche-meta-pills {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    gap: 0.35rem;
  }
  .r-meta-pill {
    font-size: 0.78rem;
    padding: 0.22rem 0.55rem;
    gap: 0.28rem;
  }
  .r-bismillah-wrap {
    margin-top: 1.25rem;
    gap: 0.5rem;
  }
  .bismillah-ornament {
    width: min(260px, 80%);
    height: 22px;
  }
  .r-bismillah {
    font-size: clamp(1.35rem, 5.2vw, 1.85rem);
  }

  /* 5. Reading Mode Switcher Bar */
  .r-view-mode-bar {
    margin: 0.85rem auto 0.85rem;
    padding: 0.22rem;
    gap: 0.35rem;
    width: 100%;
    max-width: 22rem;
  }
  .r-view-mode-btn {
    padding: 0.38rem 0.65rem;
    font-size: 0.85rem;
    flex: 1;
    justify-content: center;
    touch-action: manipulation;
  }

  /* 6. Mushaf Folio Reading Space Optimization */
  .r-mushaf {
    padding: 1.25rem 0.75rem !important;
    border-radius: 18px !important;
    border-width: 1.5px !important;
    box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3.5px var(--gold-soft), 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    line-height: 2.6 !important;
    text-align: justify !important;
    text-align-last: center !important;
    font-size: clamp(1.45rem, 5.4vw, 1.85rem) !important;
  }
  body.theme-dark .r-mushaf {
    box-shadow: inset 0 0 0 2px var(--surface), inset 0 0 0 3.5px rgba(212, 175, 55, 0.35), 0 8px 28px rgba(0, 0, 0, 0.5) !important;
  }
  .r-mushaf::before {
    inset: 5px !important;
    border-radius: 13px !important;
  }
  .r-mushaf::after {
    inset: 8px !important;
    border-radius: 11px !important;
    background-size: 14px 14px !important;
  }
  .q-word {
    padding: 0.12em 0.14em;
    border-radius: 5px;
    touch-action: manipulation;
  }
  .ayah-mark {
    width: 28px !important;
    height: 28px !important;
    margin: 0 0.28em !important;
    vertical-align: middle;
  }
  .ayah-mark-num {
    font-size: 0.75rem !important;
  }

  /* 7. Study Mode Verse Cards */
  .r-verse-card {
    padding: 1.15rem 0.95rem;
    border-radius: 20px;
    border-inline-start-width: 4px;
    margin-bottom: 1rem;
  }
  .r-verse-head {
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    padding-bottom: 0.55rem;
  }
  .r-verse-text {
    font-size: clamp(1.4rem, 5.2vw, 1.8rem);
    line-height: 2.3;
  }
  .r-verse-trans {
    font-size: 0.95rem;
    line-height: 1.65;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
  }
  .r-verse-actions {
    gap: 0.4rem;
    margin-top: 0.85rem;
    padding-top: 0.65rem;
    flex-wrap: wrap;
  }
  .r-action-btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.82rem;
    touch-action: manipulation;
  }

  /* 8. Ergonomic Symmetrical Page Stepper Bar */
  .r-page-stepper-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.5rem 0.65rem !important;
    gap: 0.5rem 0.35rem !important;
    border-radius: 20px !important;
    margin: 0.5rem auto 0.9rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .r-page-info-tablet {
    order: -1 !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 0.25rem 0.55rem 0.45rem !important;
    border-bottom: 1px dashed rgba(212, 175, 55, 0.25);
    border-radius: 0;
    touch-action: manipulation;
  }
  .r-page-number {
    font-size: 0.98rem;
  }
  .r-page-range-badge {
    font-size: 0.75rem;
  }
  .r-page-stepper-wing {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }
  .r-page-stepper-wing.r-page-stepper-right {
    order: 1 !important;
    justify-content: flex-start !important;
  }
  .r-page-stepper-wing.r-page-stepper-left {
    order: 2 !important;
    justify-content: flex-end !important;
  }
  .r-page-nav-btn {
    padding: 0.32rem 0.6rem !important;
    font-size: 0.84rem !important;
    min-height: 38px;
    touch-action: manipulation;
  }
  .r-paging-pill {
    padding: 0.2rem 0.42rem !important;
    font-size: 0.76rem !important;
    min-height: 34px;
    touch-action: manipulation;
  }
  .r-index-pill {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.78rem !important;
    min-height: 36px;
    touch-action: manipulation;
  }

  /* 9. Manuscript Jadwal Running Header & Bottom Medallion Frame */
  .r-page-header-jadwal {
    font-size: 0.88rem;
    padding: 0.45rem 0.65rem;
    margin: -0.35rem -0.25rem 1rem -0.25rem;
  }
  .r-jadwal-side {
    font-size: 0.82rem;
    gap: 0.25rem;
  }
  .r-jadwal-surah-title {
    font-size: 0.98rem;
  }
  .r-page-footer-frame {
    gap: 0.5rem;
    margin-top: 1.6rem;
    padding-top: 1rem;
  }
  .r-page-bottom-btn {
    padding: 0.35rem 0.65rem;
    font-size: 0.82rem;
    gap: 0.3rem;
    touch-action: manipulation;
  }
  .r-page-bottom-medallion {
    padding: 0.3rem 0.85rem;
    font-size: 0.98rem;
  }

  /* 10. Sticky Mobile Bottom Nav & Docked Audio Player */
  .r-mobile-nav {
    display: flex;
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    height: auto;
    min-height: 3.5rem;
    padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom, 0px)) 0.5rem;
    background: var(--surface-raised);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 95;
    justify-content: space-around;
    align-items: center;
  }
  .r-mnav-item {
    background: none;
    border: none;
    color: var(--ink-faint);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.35rem 0.5rem;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s, transform 0.1s, background 0.15s;
    flex: 1;
    min-width: 0;
    touch-action: manipulation;
  }
  .r-mnav-item:active {
    transform: scale(0.92);
    background: var(--surface-alt);
  }
  .r-mnav-item:hover, .r-mnav-item.active {
    color: var(--gold);
  }
  .r-mnav-icon {
    font-size: 1.18rem;
    line-height: 1;
  }
  .r-mnav-text {
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }
  .r-mnav-install {
    color: var(--gold);
    font-weight: 700;
  }

  body.player-open .r-main {
    padding-bottom: calc(10.2rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.player-open .r-footer {
    padding-bottom: calc(10.2rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Audio player docks above mobile bottom nav */
  .r-player-bar {
    bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)) !important;
    border-radius: 20px 20px 0 0;
    border-inline: none;
    border-bottom: 1px solid var(--border);
    padding: 0.3rem 0.6rem;
  }
  .r-player-inner {
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.2rem 0;
  }
  .r-player-meta {
    width: 100%;
    justify-content: space-between;
    min-width: 0;
  }
  .r-player-title {
    font-size: 0.92rem;
  }
  .r-player-sub {
    font-size: 0.78rem;
  }
  .r-player-controls {
    width: 100%;
    justify-content: center;
    gap: 1.2rem;
  }
  .r-player-btn.main {
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
    touch-action: manipulation;
  }
  .r-player-settings {
    width: 100%;
    justify-content: space-between;
    gap: 0.4rem;
  }
  .r-player-select {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    padding: 0.35rem 0.5rem;
  }
  .r-volume-slider {
    width: 38px;
  }
  .r-volume-badge {
    display: none;
  }
  .r-vol-step-btn {
    width: 1.35rem;
    height: 1.35rem;
    font-size: 0.82rem;
  }

  /* 11. Tafseer bottom sheet mobile height & scrolling */
  .r-drawer {
    max-height: 88vh;
    border-radius: 24px 24px 0 0;
  }
  .r-drawer-body {
    padding: 1rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .r-modal-card {
    margin: 1rem;
    max-height: 85vh;
  }
  .r-tafseer-sheet {
    max-height: 90vh;
    border-radius: 24px 24px 0 0 !important;
    border-inline: none !important;
    border-bottom: none !important;
    inset-inline: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .r-sheet-header {
    padding: 0.45rem 0.85rem 0.75rem;
  }
  .r-sheet-books-row {
    gap: 0.45rem !important;
  }
  .r-sheet-books {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    display: flex !important;
    gap: 0.4rem !important;
  }
  .r-sheet-books .r-chip {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 0.35rem 0.85rem !important;
    font-size: 0.88rem !important;
  }
  .r-sheet-top-actions {
    flex-shrink: 0 !important;
    display: flex !important;
    gap: 0.3rem !important;
  }
  .r-sheet-top-actions .r-sheet-btn {
    padding: 0.28rem 0.5rem !important;
    font-size: 0.78rem !important;
  }
  .r-sheet-content {
    padding: 1rem 0.9rem calc(2rem + env(safe-area-inset-bottom, 0px));
  }

  /* 12. Quran Index & Word Inspector Mobile Bottom Sheets */
  .r-index-modal,
  .r-word-modal {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .r-index-dialog {
    max-height: 92vh;
    border-radius: 24px 24px 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-inline: none !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
  }
  .r-index-header {
    padding: 0.85rem 1rem;
  }
  .r-index-search-bar {
    padding: 0.65rem 1rem;
  }
  .r-index-body {
    padding: 0.85rem 0.75rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }
  .r-surah-item {
    padding: 0.75rem 0.65rem !important;
    gap: 0.55rem !important;
  }
  .r-surah-item-start {
    gap: 0.65rem !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  .r-surah-item-name {
    font-size: 1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .r-surah-item-sub {
    font-size: 0.78rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .r-surah-item-meta {
    flex-shrink: 0 !important;
    gap: 0.35rem !important;
  }
  .r-star-badge {
    width: 2.25rem !important;
    height: 2.25rem !important;
    flex: 0 0 2.25rem !important;
  }
  .r-star-badge .star-num {
    font-size: 0.78rem !important;
  }
  .r-juz-grid {
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)) !important;
    gap: 0.55rem !important;
  }
  .r-juz-card {
    padding: 0.75rem 0.85rem !important;
  }
  .r-pages-grid {
    grid-template-columns: repeat(auto-fill, minmax(2.8rem, 1fr)) !important;
    gap: 0.35rem !important;
  }
  .r-word-card {
    max-height: 88vh;
    border-radius: 24px 24px 0 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-inline: none !important;
    border-bottom: none !important;
    box-sizing: border-box !important;
    padding: 1.4rem 1.1rem calc(2rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* 13. Mushaf translation bar mobile docking */
  .r-mushaf-trans-bar {
    bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0.65rem 0.85rem !important;
    border-radius: 20px 20px 0 0 !important;
    border-inline: none !important;
    border-bottom: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    z-index: 92 !important;
  }
  body.player-open .r-mushaf-trans-bar {
    bottom: calc(8.6rem + env(safe-area-inset-bottom, 0px)) !important;
  }
  .r-mtrans-text {
    font-size: 0.94rem;
    line-height: 1.65;
  }
  .r-trans-pill-wrap {
    padding: 0.15rem 0.45rem;
    font-size: 0.76rem;
  }
  .r-trans-select {
    font-size: 0.76rem;
    max-width: 7.5rem;
  }
}

/* ── Instant Font Size & Feedback Toast ─────────────────────────── */
.r-font-toast {
  position: fixed;
  top: 4.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  background: var(--surface-raised);
  color: var(--gold);
  border: 1.5px solid var(--gold);
  padding: 0.45rem 1.25rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25), 0 0 16px var(--gold-tint);
  z-index: 200;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
}
.r-font-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Translation Topbar Pill ────────────────────────────────────── */
.r-trans-pill-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: linear-gradient(180deg, rgba(16, 59, 38, 0.85) 0%, rgba(8, 33, 21, 0.92) 100%) padding-box,
              linear-gradient(135deg, rgba(212, 175, 55, 0.6) 0%, rgba(212, 175, 55, 0.2) 50%, rgba(212, 175, 55, 0.6) 100%) border-box;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.28rem 0.8rem;
  color: #F0EAE1;
  font-size: 0.84rem;
  font-weight: 600;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.r-trans-pill-wrap:hover {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.35) 0%, rgba(184, 138, 40, 0.45) 100%) padding-box,
              linear-gradient(135deg, #FFF0C2 0%, #D4AF37 50%, #8C6A21 100%) border-box;
  color: #FFFDF8;
  border-color: transparent;
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.5), 0 2px 8px rgba(0, 0, 0, 0.25);
  transform: translateY(-1px);
}
.r-trans-icon {
  font-size: 0.95rem;
  line-height: 1;
}
.r-trans-select {
  background: transparent;
  border: none;
  color: inherit;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  outline: none;
  padding: 0.1rem 0;
}
.r-trans-select option {
  background: var(--surface-raised, #1b261e);
  color: var(--ink, #fff);
}
body.theme-dark .r-trans-pill-wrap {
  background: linear-gradient(180deg, rgba(36, 29, 18, 0.9) 0%, rgba(20, 16, 10, 0.95) 100%) padding-box,
              linear-gradient(135deg, rgba(212, 175, 55, 0.6) 0%, rgba(212, 175, 55, 0.2) 50%, rgba(212, 175, 55, 0.6) 100%) border-box;
}
body.theme-dark .r-trans-select option {
  background: #18130B;
  color: #FFF0C2;
}

/* ── Word Modal: Complete Verse Translation ─────────────────────── */
.r-word-verse-box {
  margin-top: 1.15rem;
  padding: 1.1rem 1.3rem;
  background: var(--surface-alt);
  border: 1.5px solid var(--gold-soft);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), inset 0 0 16px var(--gold-tint);
}
.r-word-verse-box[hidden] {
  display: none !important;
}
.r-word-verse-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}
.r-word-trans-edition {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gold);
  background: var(--gold-tint);
  border: 1px solid var(--gold-soft);
  border-radius: 999px;
  padding: 0.18rem 0.65rem;
}
.r-word-verse-trans {
  font-size: 1.02rem;
  line-height: 1.85;
  color: var(--ink);
  margin: 0;
}

/* ── Mushaf Interactive Ayah Translation Subtitle Bar ──────────── */
.r-mushaf-trans-bar {
  position: fixed;
  bottom: 0;
  inset-inline: 0;
  max-width: 56rem;
  margin: 0 auto;
  padding: 1.1rem 1.8rem;
  background: linear-gradient(180deg, rgba(255, 253, 248, 0.92) 0%, rgba(246, 239, 226, 0.96) 100%) padding-box,
              linear-gradient(135deg, #FFF1C5 0%, #D4AF37 35%, #8C6A21 70%, #F6E298 100%) border-box;
  border-top: 2.5px solid transparent;
  border-inline: 1.5px solid transparent;
  border-bottom: none;
  border-radius: 28px 28px 0 0;
  box-shadow: 0 -16px 56px rgba(60, 45, 15, 0.22),
              0 0 36px rgba(212, 175, 55, 0.2),
              inset 0 1.5px 0.5px rgba(255, 255, 255, 0.95),
              inset 0 0 20px rgba(212, 175, 55, 0.04);
  backdrop-filter: blur(30px) saturate(210%);
  -webkit-backdrop-filter: blur(30px) saturate(210%);
  z-index: 85;
  transition: bottom 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease, opacity 0.2s ease;
}
body.theme-dark .r-mushaf-trans-bar {
  background: linear-gradient(180deg, rgba(24, 19, 12, 0.92) 0%, rgba(16, 13, 8, 0.96) 100%) padding-box,
              linear-gradient(135deg, #FFF1C5 0%, #D4AF37 35%, #8C6A21 70%, #F6E298 100%) border-box;
  box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.8),
              0 0 40px rgba(212, 175, 55, 0.25),
              inset 0 1.5px 0.5px rgba(255, 255, 255, 0.25);
}
.r-mushaf-trans-bar[hidden] {
  display: none !important;
}
body.player-open .r-mushaf-trans-bar {
  bottom: 5.4rem;
}
.r-mtrans-inner {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.r-mtrans-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.r-mtrans-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.r-mtrans-badge {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--gold-bright);
  background: var(--gold-tint);
  border: 1.2px solid var(--gold);
  padding: 0.22rem 0.8rem;
  border-radius: 999px;
  box-shadow: 0 0 8px var(--gold-tint);
}
.r-mtrans-edition-tag {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-faint);
  border: 1px solid var(--border-strong);
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  background: var(--surface-alt);
}
.r-mtrans-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.r-mtrans-btn {
  font-family: "Amiri", serif;
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--ink-soft);
  border: 1.2px solid transparent;
  background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, linear-gradient(135deg, rgba(212, 175, 55, 0.45) 0%, rgba(158, 116, 34, 0.25) 50%, rgba(212, 175, 55, 0.45) 100%) border-box;
  padding: 0.32rem 0.85rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  letter-spacing: 0.01em;
}
.r-mtrans-btn:hover {
  border-color: transparent;
  background: linear-gradient(var(--surface-raised), var(--surface-raised)) padding-box, linear-gradient(135deg, #FFF0C2 0%, #D4AF37 50%, #8C6A21 100%) border-box;
  color: var(--gold-deep);
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px var(--gold-tint);
}
.r-mtrans-close {
  background: transparent;
  border: none;
  color: var(--ink-faint);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem 0.55rem;
  border-radius: 50%;
  line-height: 1;
  transition: all 0.15s ease;
}
.r-mtrans-close:hover {
  color: var(--gold);
  transform: scale(1.1);
}
.r-mtrans-body {
  padding-top: 0.25rem;
}
.r-mtrans-text {
  font-size: 1.08rem;
  line-height: 1.8;
  color: var(--ink);
  margin: 0;
  text-align: justify;
}

/* ═══════════════════════════════════════════════════════════════════
   MADINAH MUSHAF PAGINATION & DUAL NAVIGATION (604 PAGES)
   ═══════════════════════════════════════════════════════════════════ */

.r-page-stepper-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  max-width: 52rem;
  margin: 0 auto 1.25rem auto;
  padding: 0.4rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  position: relative;
  z-index: 15;
  transition: all 0.2s ease;
}

body.theme-dark .r-page-stepper-bar {
  background: var(--surface-raised);
  border-color: var(--border-strong);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.r-page-stepper-wing {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.r-page-stepper-wing.r-page-stepper-right {
  justify-content: flex-start;
}

.r-page-stepper-wing.r-page-stepper-left {
  justify-content: flex-end;
}

.r-page-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1.2px solid rgba(212, 175, 55, 0.4);
  background: linear-gradient(var(--surface), var(--surface));
  color: var(--ink);
  font-family: "Amiri", serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

.r-page-nav-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #FFF4D0 0%, #E6C466 40%, #C2962C 80%, #F0D47C 100%);
  color: #0C2C1D !important;
  border-color: #FFEAA0;
  transform: translateY(-1.5px);
  box-shadow: 0 4px 14px rgba(184, 138, 40, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.theme-dark .r-page-nav-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #FFF0C2 0%, #D4AF37 40%, #8C6A21 80%, #F5E096 100%);
  color: #141008 !important;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.5);
}
body.theme-dark .r-page-nav-btn:hover:not(:disabled) .r-page-arrow {
  color: #141008;
}

.r-page-nav-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.r-page-arrow {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 800;
  color: var(--gold-deep);
}
.r-page-nav-btn:hover:not(:disabled) .r-page-arrow {
  color: #0C2C1D;
}

.r-page-info-tablet {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
  justify-self: center;
  text-align: center;
}

.r-page-info-tablet:hover {
  background: rgba(212, 175, 55, 0.12);
  transform: scale(1.02);
}

.r-page-rosette {
  font-size: 1.15rem;
  color: var(--gold);
  line-height: 1;
  filter: drop-shadow(0 0 4px var(--gold-tint));
}

.r-page-info-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
}

.r-page-number {
  font-family: "Amiri", serif;
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--gold-dark);
  letter-spacing: 0.02em;
}

body.theme-dark .r-page-number {
  color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.r-page-range-badge {
  font-size: 0.78rem;
  color: var(--ink-faint);
  font-weight: 600;
}

body.theme-dark .r-page-range-badge {
  color: rgba(255, 240, 194, 0.78);
}

/* Quick Index Shortcut Pill in Stepper Wing */
.r-index-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(212, 175, 55, 0.35);
  background: rgba(212, 175, 55, 0.08);
  color: var(--gold-dark);
  padding: 0.38rem 0.75rem;
  font-size: 0.85rem;
}

body.theme-dark .r-index-pill {
  color: var(--gold-bright);
  border-color: rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.12);
}

.r-index-pill:hover {
  background: linear-gradient(135deg, #FFF4D0 0%, #E6C466 40%, #C2962C 80%, #F0D47C 100%);
  color: #0C2C1D !important;
  transform: translateY(-1px);
}
body.theme-dark .r-index-pill:hover {
  background: linear-gradient(135deg, #FFF0C2 0%, #D4AF37 40%, #8C6A21 80%, #F5E096 100%);
  color: #141008 !important;
}

/* Segmented Paging Toggle (صفحات / السورة) */
.r-paging-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 999px;
  padding: 0.18rem;
  gap: 0.15rem;
}

body.theme-dark .r-paging-toggle {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(212, 175, 55, 0.3);
}

.r-paging-pill {
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: "Amiri", serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}

.r-paging-pill:hover {
  color: var(--gold-bright);
}

.r-paging-pill.active {
  background: linear-gradient(135deg, #FFF4D0 0%, #E6C466 40%, #C2962C 80%, #F0D47C 100%);
  color: #0C2C1D !important;
  font-weight: 800;
  box-shadow: 0 2px 8px rgba(184, 138, 40, 0.4);
}

body.theme-dark .r-paging-pill.active {
  background: linear-gradient(135deg, #FFF0C2 0%, #D4AF37 40%, #8C6A21 80%, #F5E096 100%);
  color: #141008 !important;
}

/* ── Page Header Jadwal (Arch Frame in Page Mode) ─────────────────── */
.r-page-header-jadwal {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.65rem 1.4rem;
  margin: -0.5rem -0.5rem 1.4rem -0.5rem;
  border-bottom: 1.5px solid transparent;
  border-image: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.45) 20%, rgba(212, 175, 55, 0.7) 50%, rgba(212, 175, 55, 0.45) 80%, transparent) 1;
  font-family: "Amiri", serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--gold-dark);
  user-select: none;
}

body.theme-dark .r-page-header-jadwal {
  color: var(--gold-bright);
}

.r-jadwal-side {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.r-jadwal-side:first-child {
  justify-self: start;
}

.r-jadwal-side:last-child {
  grid-column: 3;
  justify-self: end;
}

body.theme-dark .r-jadwal-side {
  color: rgba(255, 240, 194, 0.82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.r-jadwal-surah-title {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  font-size: 1.12rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--gold-dark);
}

body.theme-dark .r-jadwal-surah-title {
  color: var(--gold-bright);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.35);
}

/* ── Page Footer Frame with Gold Medallion & Quick Nav ──────────── */
.r-page-footer-frame {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1.5px solid transparent;
  border-image: linear-gradient(to right, transparent, rgba(212, 175, 55, 0.45) 20%, rgba(212, 175, 55, 0.7) 50%, rgba(212, 175, 55, 0.45) 80%, transparent) 1;
}

.r-page-bottom-btn:first-child {
  justify-self: start;
}

.r-page-bottom-medallion {
  grid-column: 2;
  justify-self: center;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.35rem 1.2rem;
  border-radius: 999px;
  background: linear-gradient(var(--surface-alt), var(--surface-alt)) padding-box,
              linear-gradient(135deg, rgba(212, 175, 55, 0.5) 0%, rgba(158, 116, 34, 0.3) 50%, rgba(212, 175, 55, 0.5) 100%) border-box;
  border: 1px solid transparent;
  font-family: "Amiri", serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gold-dark);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

body.theme-dark .r-page-bottom-medallion {
  color: var(--gold-bright);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.r-medallion-crest {
  font-size: 1.1rem;
  color: var(--gold);
}

.r-page-bottom-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  border: 1.2px solid rgba(212, 175, 55, 0.35);
  background: linear-gradient(var(--surface), var(--surface));
  color: var(--ink-soft);
  font-family: "Amiri", serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

.r-page-bottom-btn:last-child {
  grid-column: 3;
  justify-self: end;
}

.r-page-bottom-btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold-dark);
  background: rgba(212, 175, 55, 0.1);
  transform: translateY(-1px);
}

body.theme-dark .r-page-bottom-btn:hover:not(:disabled) {
  color: var(--gold-bright);
}

.r-page-bottom-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* Multi-Surah Divider inside a single Mushaf Page */
.r-page-surah-divider {
  margin: 2.2rem 0 1.8rem 0;
  text-align: center;
  position: relative;
}

.r-page-surah-divider .r-surah-cartouche {
  margin: 0 auto;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}