@import url("https://fonts.googleapis.com/css2?family=Amiri+Quran&family=Cairo:wght@400;500;600;700;800;900&family=Scheherazade+New:wght@400;700&display=swap");

@font-face {
  font-family: "Sadaqah Uthmanic Hafs";
  src: url("../fonts/sadaqah-uthmanic-hafs-v09.otf") format("opentype");
  font-display: block;
}

@font-face {
  font-family: "Sadaqah Uthman TN";
  src: url("../fonts/sadaqah-uthman-tn-v10.otf") format("opentype");
  font-display: block;
}

:root {
  --green-950: #031f17;
  --green-900: #062b20;
  --green-800: #0b4331;
  --gold: #d9b667;
  --gold-soft: #f1dca5;
  --ivory: #fff8e7;
  --muted: rgba(255, 248, 231, 0.72);
  --line: rgba(217, 182, 103, 0.28);
  --panel: rgba(6, 43, 32, 0.76);
  --panel-strong: rgba(3, 31, 23, 0.92);
  --shell-max-width: 860px;
  --pattern-size: 132px;
  --pattern-opacity: 0.06;
  --edge-pattern-opacity: 0;
  --card-radius: 22px;
  --app-top-extra-margin: 0.32cm;
  --quran-reader-top-offset: max(12px, env(safe-area-inset-top));
  --quran-reader-topbar-height: 86px;
  --quran-reader-rotation: 0deg;
  --islamic-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='144' height='144' viewBox='0 0 144 144'%3E%3Cg fill='none' stroke='%23d9b667' stroke-width='1.15' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M72 6 138 72 72 138 6 72Z'/%3E%3Cpath d='M72 24 120 72 72 120 24 72Z'/%3E%3Cpath d='M72 6v132M6 72h132'/%3E%3Cpath d='M30 30h84v84H30z'/%3E%3Cpath d='M30 30 114 114M114 30 30 114'/%3E%3Cpath d='M72 24c17 17 17 79 0 96M72 24c-17 17-17 79 0 96M24 72c17-17 79-17 96 0M24 72c17 17 79 17 96 0'/%3E%3Ccircle cx='72' cy='72' r='18'/%3E%3Cpath d='M72 54 90 72 72 90 54 72Z'/%3E%3C/g%3E%3C/svg%3E");
  --quran-geometry-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23d9b667' stroke-opacity='.18' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M80 8 152 80 80 152 8 80Z'/%3E%3Cpath d='M80 32 128 80 80 128 32 80Z'/%3E%3Cpath d='M32 32h96v96H32z'/%3E%3Cpath d='M80 8v144M8 80h144M32 32l96 96M128 32 32 128'/%3E%3Ccircle cx='80' cy='80' r='20'/%3E%3Cpath d='M80 60 100 80 80 100 60 80Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%23fff8e7' stroke-opacity='.08' stroke-width='.8'%3E%3Cpath d='M80 20c18 18 18 102 0 120M80 20c-18 18-18 102 0 120M20 80c18-18 102-18 120 0M20 80c18 18 102 18 120 0'/%3E%3C/g%3E%3C/svg%3E");
  --quran-geometry-bg:
    var(--quran-geometry-pattern),
    conic-gradient(from 45deg at 50% 50%, rgba(225, 194, 118, 0.11) 0 6.25%, transparent 6.25% 18.75%, rgba(225, 194, 118, 0.08) 18.75% 25%, transparent 25% 43.75%, rgba(225, 194, 118, 0.08) 43.75% 50%, transparent 50% 68.75%, rgba(225, 194, 118, 0.08) 68.75% 75%, transparent 75% 93.75%, rgba(225, 194, 118, 0.11) 93.75% 100%),
    repeating-linear-gradient(45deg, transparent 0 31px, rgba(255, 248, 231, 0.07) 31px 32px, transparent 32px 64px),
    repeating-linear-gradient(-45deg, transparent 0 31px, rgba(89, 132, 72, 0.13) 31px 32px, transparent 32px 64px),
    linear-gradient(180deg, #18270f 0%, #102719 46%, #06140e 100%);
  --quran-geometry-night-bg:
    var(--quran-geometry-pattern),
    conic-gradient(from 45deg at 50% 50%, rgba(225, 194, 118, 0.08) 0 6.25%, transparent 6.25% 18.75%, rgba(225, 194, 118, 0.05) 18.75% 25%, transparent 25% 43.75%, rgba(225, 194, 118, 0.05) 43.75% 50%, transparent 50% 68.75%, rgba(225, 194, 118, 0.05) 68.75% 75%, transparent 75% 93.75%, rgba(225, 194, 118, 0.08) 93.75% 100%),
    repeating-linear-gradient(45deg, transparent 0 31px, rgba(246, 236, 210, 0.035) 31px 32px, transparent 32px 64px),
    repeating-linear-gradient(-45deg, transparent 0 31px, rgba(63, 113, 83, 0.08) 31px 32px, transparent 32px 64px),
    linear-gradient(180deg, #020403 0%, #071108 46%, #000 100%);
  --quran-geometry-size: 160px 160px, 112px 112px, 112px 112px, 112px 112px, auto;
  --quran-geometry-position: center top, center, center, center, center;
  font-size: 17px;
  font-family: "Cairo", "Avenir Next", "Segoe UI", Tahoma, Arial, sans-serif;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html {
  min-height: 100%;
  background: var(--green-950);
  overscroll-behavior-y: contain;
  scroll-behavior: auto;
}

body {
  margin: 0;
  min-height: 100%;
  color: var(--ivory);
  background:
    radial-gradient(circle at 50% -20%, rgba(243, 217, 145, 0.18), transparent 30%),
    radial-gradient(circle at 14% 18%, rgba(19, 118, 96, 0.22), transparent 30%),
    radial-gradient(circle at 88% 74%, rgba(217, 182, 103, 0.12), transparent 34%),
    radial-gradient(circle at 50% 110%, rgba(13, 88, 66, 0.28), transparent 42%),
    linear-gradient(145deg, #02110d 0%, #031f17 42%, #062b20 100%);
  line-height: 1.7;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  touch-action: manipulation;
  -webkit-overflow-scrolling: auto;
}

body.app-ltr {
  text-align: left;
}

body.app-ltr .daily-verse,
body.app-ltr .mushaf-layout,
body.app-ltr .qcf-layout,
body.app-ltr .quran-result,
body.app-ltr .list .card .dedication-text,
body.app-ltr .calm-prayer-card .dedication-text {
  direction: rtl;
}

body.app-ltr .list .card .dedication-text,
body.app-ltr .calm-prayer-card .dedication-text {
  text-align: right;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--pattern-opacity);
  background-image: var(--islamic-pattern);
  background-size: var(--pattern-size) var(--pattern-size);
  background-position: center top;
  background-repeat: repeat;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: var(--edge-pattern-opacity);
  background-image: var(--islamic-pattern);
  background-size: calc(var(--pattern-size) * 1.18) calc(var(--pattern-size) * 1.18);
  background-repeat: repeat;
  background-position: center;
  -webkit-mask-image: linear-gradient(90deg, #000 0 18%, transparent 34% 66%, #000 82% 100%);
  mask-image: linear-gradient(90deg, #000 0 18%, transparent 34% 66%, #000 82% 100%);
}

button,
input,
select {
  font: inherit;
  touch-action: manipulation;
}

button,
.reader-pill,
.quran-tab,
.primary-button,
.ghost-button,
.icon-button,
.back-button,
.app-logo-button,
.quran-icon-button,
.prayer-alert-toggle,
.quran-surah-row,
.tasbeeh-option {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    opacity 0.18s ease;
}

button:where(:hover, :focus-visible),
.reader-pill:where(:hover, :focus-visible),
.quran-tab:where(:hover, :focus-visible),
.primary-button:where(:hover, :focus-visible),
.ghost-button:where(:hover, :focus-visible),
.icon-button:where(:hover, :focus-visible),
.back-button:where(:hover, :focus-visible),
.app-logo-button:where(:hover, :focus-visible),
.quran-icon-button:where(:hover, :focus-visible),
.prayer-alert-toggle:where(:hover, :focus-within),
.quran-surah-row:where(:hover, :focus-visible),
.tasbeeh-option:where(:hover, :focus-visible) {
  transform: translateY(-1px);
}

button:active,
.reader-pill:active,
.quran-tab:active,
.primary-button:active,
.ghost-button:active,
.icon-button:active,
.back-button:active,
.app-logo-button:active,
.quran-icon-button:active,
.prayer-alert-toggle:active,
.quran-surah-row:active,
.tasbeeh-option:active {
  transform: translateY(0) scale(0.985);
}

.app-shell {
  width: min(100%, var(--shell-max-width));
  min-height: 100dvh;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0, rgba(217, 182, 103, 0.12), transparent 40%),
    linear-gradient(180deg, rgba(3, 31, 23, 0.91), rgba(3, 31, 23, 0.84));
  border-inline: 1px solid rgba(217, 182, 103, 0.12);
  box-shadow: 0 0 72px rgba(0, 0, 0, 0.32);
}

.app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image:
    radial-gradient(circle at 50% 2%, rgba(217, 182, 103, 0.26), transparent 28%),
    radial-gradient(circle at 6% 42%, rgba(31, 136, 112, 0.24), transparent 34%),
    radial-gradient(circle at 96% 72%, rgba(217, 182, 103, 0.18), transparent 30%);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: max(18px, env(safe-area-inset-top)) 18px 14px;
  border-bottom: 1px solid var(--line);
  background: rgba(3, 31, 23, 0.96);
  backdrop-filter: blur(18px);
}

body:not(.quran-immersive) .app-shell {
  background:
    linear-gradient(180deg, #031f17 0 178px, rgba(3, 31, 23, 0.96) 178px 224px, rgba(5, 42, 31, 0.8) 224px 100%),
    radial-gradient(circle at 50% 0, rgba(217, 182, 103, 0.08), transparent 32%);
}

body:not(.quran-immersive) .app-shell::before {
  opacity: 0.045;
  background-image:
    radial-gradient(circle at 50% 0, rgba(217, 182, 103, 0.18), transparent 24%),
    radial-gradient(circle at 6% 40%, rgba(31, 136, 112, 0.11), transparent 28%),
    radial-gradient(circle at 96% 72%, rgba(217, 182, 103, 0.12), transparent 26%);
}

.app-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.back-button {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--ivory);
  background: rgba(255, 255, 255, 0.07);
  font-weight: 900;
  cursor: pointer;
}

.back-button[hidden] {
  display: none;
}

.back-button span,
.icon-back::before {
  width: 0.72em;
  height: 0.72em;
  border-block-start: 0.18em solid currentColor;
  border-inline-start: 0.18em solid currentColor;
  transform: rotate(-45deg);
}

[dir="rtl"] .back-button span,
[dir="rtl"] .icon-back::before {
  transform: rotate(135deg);
}

.back-button b {
  font-size: 0.9rem;
  line-height: 1;
}

.app-logo-button {
  border: 0;
  padding: 0;
  color: inherit;
  background: transparent;
  line-height: 0;
  cursor: pointer;
}

.app-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 1px solid rgba(217, 182, 103, 0.58);
  border-radius: 16px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

.eyebrow {
  margin: 0;
  color: var(--gold-soft);
  font-size: 0.86rem;
  font-weight: 800;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 0;
  font-size: 1.35rem;
  line-height: 1.25;
}

h2 {
  color: var(--gold-soft);
  font-size: 1.3rem;
  line-height: 1.35;
}

h3 {
  font-size: 1.05rem;
  line-height: 1.35;
}

.app-content {
  position: relative;
  z-index: 1;
  min-height: calc(100dvh - 142px);
  padding: calc(18px + var(--app-top-extra-margin)) 16px 104px;
}

.card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background:
    radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.075), transparent 34%),
    linear-gradient(145deg, rgba(6, 43, 32, 0.82), rgba(3, 31, 23, 0.88));
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 248, 231, 0.04);
  backdrop-filter: blur(16px);
  padding: 18px;
  margin-bottom: 14px;
}

.card > * {
  position: relative;
  z-index: 1;
}

.card h2 {
  margin-bottom: 8px;
}

.muted {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.9;
}

.hero-card {
  min-height: 220px;
  display: grid;
  place-items: center;
  text-align: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 32px, rgba(217, 182, 103, 0.16) 32px 33px, transparent 33px 64px),
    linear-gradient(145deg, rgba(6, 43, 32, 0.86), rgba(3, 31, 23, 0.96));
}

.hero-card .eyebrow {
  font-size: clamp(1rem, 3.6vw, 1.28rem);
  line-height: 1.55;
  font-weight: 900;
}

.hero-title {
  margin: 0 0 12px;
  color: var(--ivory);
  font-size: clamp(1.8rem, 9vw, 3.4rem);
  line-height: 1.18;
  font-weight: 900;
}

.home-logo {
  width: 112px;
  height: 112px;
  margin: 0 auto 18px;
  display: block;
  border: 1px solid rgba(217, 182, 103, 0.6);
  border-radius: 28px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}

.dedication-text {
  white-space: pre-line;
  color: rgba(255, 248, 231, 0.9);
  font-size: 1.12rem;
  line-height: 2.05;
}

.list .card .dedication-text {
  font-size: 1.15rem;
  line-height: 2.08;
}

.daily-verse {
  color: var(--ivory);
  font-family: "Amiri Quran", "Scheherazade New", "Times New Roman", serif;
  font-size: clamp(1.7rem, 6.25vw, 2.5rem);
  line-height: 1.72;
  text-align: center;
}

.daily-card {
  display: grid;
  min-height: 190px;
  align-content: center;
  justify-items: center;
  gap: 10px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 216, 141, 0.16), transparent 38%),
    linear-gradient(145deg, rgba(6, 43, 32, 0.9), rgba(3, 31, 23, 0.92)),
    repeating-linear-gradient(45deg, transparent 0 42px, rgba(217, 182, 103, 0.08) 42px 43px, transparent 43px 86px);
}

.daily-card h2,
.daily-card p {
  margin: 0;
}

.list-item p,
.selected-verse-card p {
  font-size: 1.09rem;
  line-height: 2.08;
}

.daily-card h2 {
  color: var(--gold-soft);
  font-size: 1.2rem;
  font-weight: 900;
}

.daily-card .daily-verse {
  max-width: 680px;
  color: var(--ivory);
  font-family: inherit;
  font-size: clamp(1.45rem, 5vw, 2.05rem);
  line-height: 1.8;
  font-weight: 900;
}

.daily-card-body {
  display: grid;
  width: 100%;
  justify-items: center;
  gap: 10px;
}

.daily-card .muted {
  color: rgba(255, 248, 231, 0.75);
  font-size: 1rem;
  font-weight: 800;
}

.light-message-card {
  display: grid;
  gap: 8px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(245, 216, 141, 0.16), transparent 38%),
    linear-gradient(145deg, rgba(6, 43, 32, 0.9), rgba(3, 31, 23, 0.92)),
    repeating-linear-gradient(45deg, transparent 0 42px, rgba(217, 182, 103, 0.08) 42px 43px, transparent 43px 86px);
}

.light-message-card span {
  color: var(--gold-soft);
  font-size: 1.2rem;
  font-weight: 900;
}

.light-message-card p {
  margin: 0;
  color: var(--ivory);
  font-size: clamp(1.45rem, 5vw, 2.05rem);
  line-height: 1.8;
  font-weight: 900;
}

.promo-post-card {
  display: grid;
  gap: 16px;
  background:
    radial-gradient(circle at 18% 0%, rgba(245, 216, 141, 0.16), transparent 34%),
    radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.07), transparent 30%),
    linear-gradient(145deg, rgba(6, 43, 32, 0.92), rgba(3, 31, 23, 0.96));
}

.promo-post-header {
  display: grid;
  gap: 6px;
  text-align: center;
}

.promo-post-header span {
  color: rgba(245, 216, 141, 0.86);
  font-size: 1rem;
  font-weight: 900;
}

.promo-post-header h2 {
  margin: 0;
  color: var(--ivory);
  font-size: clamp(1.45rem, 5vw, 2.1rem);
  line-height: 1.45;
}

.promo-post-body {
  overflow: visible;
  border: 1px solid rgba(245, 216, 141, 0.22);
  border-radius: 18px;
  background: rgba(255, 248, 231, 0.055);
  padding: 16px;
  color: rgba(255, 248, 231, 0.92);
  font-size: clamp(0.98rem, 3.3vw, 1.08rem);
  line-height: 2.05;
  white-space: pre-line;
  text-align: start;
}

.promo-post-body p {
  margin: 0;
  white-space: pre-line;
}

.promo-post-body p + p {
  margin-top: 18px;
}

.promo-store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 22px 0;
}

.promo-store-badge {
  display: inline-flex;
  width: min(210px, 100%);
  border-radius: 16px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.promo-store-badge img {
  display: block;
  width: 100%;
  height: auto;
}

.promo-post-card .button-row {
  justify-content: center;
}

.anxiety-card {
  display: grid;
  gap: 12px;
  text-align: center;
}

.anxiety-card[role="button"] {
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.anxiety-card[role="button"]:hover,
.anxiety-card[role="button"]:focus-visible {
  border-color: rgba(245, 216, 141, 0.52);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(245, 216, 141, 0.14);
  transform: translateY(-1px);
}

.anxiety-card[role="button"]:active {
  transform: translateY(0) scale(0.992);
}

.anxiety-card span {
  color: var(--gold-soft);
  font-size: 1.25rem;
  font-weight: 900;
}

.anxiety-card p {
  max-width: 560px;
  margin: 0 auto;
  color: rgba(255, 248, 231, 0.86);
  font-size: 1.08rem;
  line-height: 1.9;
}

.anxiety-card .primary-button {
  width: fit-content;
  margin-inline: auto;
}

.calm-home-banner {
  overflow: hidden;
  border: 1px solid rgba(217, 182, 103, 0.42);
  border-radius: 18px;
  background: rgba(255, 248, 231, 0.08);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 18px 40px rgba(0, 0, 0, 0.2);
}

.calm-home-banner img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1024 / 205;
  object-fit: cover;
}

.daily-card .button-row,
.light-message-card .button-row,
.anxiety-card .button-row {
  justify-content: center;
}

.calm-hero-card,
.calm-prayer-card,
.calm-dhikr-card,
.calm-sound-card {
  display: grid;
  gap: 14px;
  text-align: center;
}

.calm-hero-card {
  background:
    radial-gradient(circle at 50% 38%, rgba(245, 216, 141, 0.18), transparent 42%),
    linear-gradient(145deg, rgba(6, 43, 32, 0.92), rgba(3, 31, 23, 0.94));
}

.calm-breathing {
  min-height: 230px;
  display: grid;
  place-items: center;
}

.calm-breathing-orb {
  width: min(210px, 58vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 4px;
  border: 1px solid rgba(245, 216, 141, 0.62);
  border-radius: 50%;
  color: #09261d;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.58), transparent 30%),
    linear-gradient(145deg, var(--gold), #f7dfa1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), 0 0 42px rgba(217, 182, 103, 0.22);
  animation: calmBreath 8s ease-in-out infinite;
}

.calm-breathing-orb strong {
  font-size: 1.75rem;
  font-weight: 900;
}

.calm-breathing-orb span {
  font-size: 1rem;
  font-weight: 900;
}

.calm-prayer-card .dedication-text {
  color: var(--ivory);
  font-size: clamp(1.55rem, 5.2vw, 2.18rem);
  line-height: 2.15;
  text-align: center;
}

.calm-dhikr-card p {
  margin: 0;
  color: var(--gold-soft);
  font-size: clamp(1.8rem, 7vw, 2.7rem);
  line-height: 1.8;
  font-weight: 900;
}

.calm-sound-card .button-row,
.calm-prayer-card .button-row {
  justify-content: center;
}

@keyframes calmBreath {
  0%, 100% {
    transform: scale(0.88);
    filter: brightness(0.96);
  }

  50% {
    transform: scale(1.08);
    filter: brightness(1.08);
  }
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.tile {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 18px;
  color: var(--ivory);
  text-align: start;
  display: grid;
  align-content: center;
  gap: 4px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.024)),
    radial-gradient(circle at 14% 100%, rgba(217, 182, 103, 0.11), transparent 42%);
  box-shadow: inset 0 1px 0 rgba(255, 248, 231, 0.04);
}

.tile::before,
.list-item::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34px;
  opacity: 0.22;
  background:
    linear-gradient(135deg, transparent 18px, rgba(217, 182, 103, 0.17) 18px 36px, transparent 36px) 0 0 / 72px 34px repeat-x;
}

.tile strong {
  position: relative;
  display: block;
  color: var(--gold-soft);
  font-size: clamp(1rem, 2.2vw, 1.18rem);
  line-height: 1.35;
}

.tile span {
  position: relative;
  line-height: 1.55;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.primary-button,
.ghost-button,
.icon-button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 16px;
  color: var(--ivory);
  background: rgba(255, 255, 255, 0.06);
}

button:disabled {
  opacity: 0.48;
}

.primary-button {
  border-color: rgba(217, 182, 103, 0.74);
  background: linear-gradient(135deg, var(--gold), #f5d88d);
  color: #09261d;
  font-weight: 900;
}

.search-input,
.select-input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 14px;
  color: var(--ivory);
  background: rgba(255, 255, 255, 0.06);
}

.select-input option {
  color: #09261d;
  background: var(--ivory);
}

.dua-filter-card label {
  display: grid;
  gap: 8px;
  color: var(--gold-soft);
  font-weight: 900;
}

.dua-category-field {
  display: grid;
  gap: 10px;
  color: var(--gold-soft);
  font-weight: 900;
}

.dua-category-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  align-items: stretch;
  align-content: start;
  grid-auto-rows: max-content;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid rgba(217, 182, 103, 0.18);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 248, 231, 0.055), rgba(255, 248, 231, 0.025)),
    rgba(2, 31, 23, 0.34);
  scrollbar-color: rgba(217, 182, 103, 0.72) rgba(255, 248, 231, 0.08);
}

.dua-category-option {
  display: block;
  box-sizing: border-box;
  min-height: 48px;
  height: auto;
  min-width: 0;
  border: 1px solid rgba(217, 182, 103, 0.18);
  border-radius: 14px;
  padding: 11px 13px;
  color: rgba(255, 248, 231, 0.88);
  background: rgba(255, 255, 255, 0.045);
  font-size: 1rem;
  font-weight: 850;
  line-height: 1.55;
  text-align: start;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.dua-category-option.is-active {
  border-color: rgba(217, 182, 103, 0.82);
  color: #09261d;
  background: linear-gradient(135deg, var(--gold), #f5d88d);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.dua-filter-card #duaSearch {
  margin-top: 14px;
}

.dua-item-card {
  min-height: auto;
  height: auto;
  overflow: visible;
  gap: 14px;
}

.dua-item-card .dedication-text,
.dua-item-card .muted {
  min-width: 0;
  max-width: 100%;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: normal;
}

.dua-item-card .dedication-text {
  font-size: 1.15rem;
  line-height: 2.08;
}

.dua-item-card .button-row {
  align-items: stretch;
}

.dua-item-card .button-row button {
  min-height: 44px;
  height: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.field-grid label {
  display: grid;
  gap: 6px;
  color: var(--gold-soft);
  font-weight: 800;
}

.status-note {
  margin: 12px 0 0;
  color: rgba(255, 248, 231, 0.84);
  font-size: 0.94rem;
}

.list {
  display: grid;
  gap: 10px;
}

.list-item {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 13px 14px;
  color: var(--ivory);
  font-size: 1.08rem;
  line-height: 2.02;
  text-align: start;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.058), rgba(255, 255, 255, 0.024)),
    rgba(3, 31, 23, 0.24);
}

.list-item strong {
  position: relative;
  color: var(--gold-soft);
}

.quran-page {
  position: relative;
  border: 1px solid rgba(94, 66, 23, 0.34);
  border-radius: 18px;
  max-width: 760px;
  min-height: min(82dvh, 980px);
  margin-inline: auto;
  padding: clamp(20px, 4vw, 42px);
  background:
    radial-gradient(circle at 50% 0, rgba(217, 182, 103, 0.2), transparent 36%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.96), rgba(239, 226, 195, 0.99)),
    repeating-linear-gradient(90deg, rgba(11, 67, 49, 0.035) 0 1px, transparent 1px 38px);
  color: #17251f;
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.22);
}

.quran-page::before {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  border: 4px double rgba(94, 66, 23, 0.36);
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(217, 182, 103, 0.18),
    inset 0 0 38px rgba(94, 66, 23, 0.08);
}

.quran-night {
  border-color: rgba(217, 182, 103, 0.35);
  background:
    linear-gradient(180deg, rgba(17, 28, 22, 0.96), rgba(5, 22, 17, 0.98)),
    repeating-linear-gradient(90deg, rgba(217, 182, 103, 0.035) 0 1px, transparent 1px 38px);
  color: rgba(255, 248, 231, 0.92);
}

.quran-night .mushaf-topline,
.quran-night .mushaf-footer,
.quran-night .quran-verse,
.quran-night .surah-break,
.quran-night .mushaf-layout,
.quran-night .mushaf-surah-title,
.quran-night .mushaf-bismillah {
  color: rgba(255, 248, 231, 0.92);
}

.quran-night .mushaf-end,
.quran-night .end,
.quran-night .ayah-number {
  border-color: rgba(217, 182, 103, 0.62);
  color: var(--gold-soft);
}

.mushaf-page {
  min-height: 62dvh;
  scroll-margin-top: 96px;
  touch-action: pan-y;
  user-select: none;
}

.swipe-hint {
  margin: 10px 0 0;
  color: rgba(255, 248, 231, 0.76);
  font-size: 0.9rem;
  text-align: center;
}

.mushaf-topline,
.mushaf-footer {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: rgba(11, 67, 49, 0.82);
  font-size: 0.92rem;
  font-weight: 900;
}

.mushaf-topline span:first-child {
  text-align: left;
}

.mushaf-topline span:last-child {
  text-align: right;
}

.mushaf-page-badge {
  display: inline-grid;
  place-items: center;
  min-inline-size: 42px;
  block-size: 42px;
  border: 1px solid rgba(94, 66, 23, 0.42);
  border-radius: 50%;
  color: #0b4331;
  background: rgba(217, 182, 103, 0.18);
  font-family: Arial, sans-serif;
  line-height: 1;
}

.mushaf-footer {
  justify-content: center;
  margin-top: 18px;
  grid-template-columns: 1fr;
  text-align: center;
}

.mushaf-footer span {
  display: inline-flex;
  justify-self: center;
  padding: 4px 16px;
  border-radius: 999px;
  color: rgba(11, 67, 49, 0.78);
  background: rgba(217, 182, 103, 0.16);
}

.mushaf-note {
  position: relative;
  z-index: 1;
  margin: 14px 0;
  color: rgba(23, 37, 31, 0.7);
  text-align: center;
  font-weight: 800;
}

.mushaf-body,
.mushaf-layout {
  position: relative;
  z-index: 1;
}

.mushaf-layout {
  min-height: min(68dvh, 770px);
  margin-top: 18px;
  display: grid;
  align-content: space-evenly;
  gap: clamp(5px, 0.9vw, 12px);
  color: #101915;
  font-family: "Amiri Quran", "Scheherazade New", "Times New Roman", serif;
}

.mushaf-line {
  position: relative;
  display: block;
  width: 100%;
  min-height: 1.74em;
  line-height: 1.74;
  direction: rtl;
  text-align: center;
  word-spacing: 0.08em;
  white-space: nowrap;
  overflow: visible;
}

.mushaf-line-short {
  text-align: center;
  word-spacing: 0.12em;
}

.qcf-layout {
  direction: rtl;
  font-family: var(--qcf-font), "Amiri Quran", "Scheherazade New", "Times New Roman", serif;
  font-variant-ligatures: normal;
  text-rendering: optimizeLegibility;
}

.qcf-layout .mushaf-line {
  min-height: 1.42em;
  line-height: 1.42;
  letter-spacing: 0;
  word-spacing: 0;
}

.qcf-layout.tajweed-layout {
  font-family: "Amiri Quran", "Scheherazade New", "Times New Roman", serif;
  grid-template-rows: repeat(var(--mushaf-line-count, 15), minmax(1.22em, 1fr));
  align-content: stretch;
  gap: clamp(2px, 0.42vw, 7px);
}

.qcf-layout.tajweed-layout .mushaf-line {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.22em;
  min-height: 1.34em;
  line-height: 1.42;
  word-spacing: 0;
  white-space: nowrap;
  text-align: initial;
  text-align-last: auto;
}

.qcf-layout.tajweed-layout .mushaf-line-balanced {
  justify-content: space-between;
}

.qcf-layout.tajweed-layout .mushaf-line-short {
  justify-content: center;
  gap: 0.34em;
}

.qcf-layout.tajweed-layout .mushaf-word {
  flex: 0 0 auto;
  font-family: "Amiri Quran", "Scheherazade New", "Times New Roman", serif;
  white-space: nowrap;
}

.qcf-word {
  font-family: var(--qcf-font), "Amiri Quran", "Scheherazade New", serif;
  letter-spacing: 0;
  word-spacing: 0;
}

.mushaf-word {
  border: 0;
  display: inline;
  padding: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  line-height: inherit;
  border-radius: 0.18em;
}

.mushaf-end {
  cursor: pointer;
}

.mushaf-end:hover,
.ayah-action-number:hover {
  color: #0b4331;
  background: rgba(217, 182, 103, 0.14);
}

.mushaf-word:focus-visible,
.quran-verse:focus-visible {
  outline: 2px solid rgba(11, 67, 49, 0.72);
  outline-offset: 3px;
}

.mushaf-end {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.52em;
  block-size: 1.52em;
  min-inline-size: 24px;
  min-block-size: 24px;
  padding: 0;
  margin-inline: 0.16em;
  border: 1px solid rgba(11, 67, 49, 0.52);
  border-radius: 50%;
  color: #0b4331;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  font-size: 0.58em;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  direction: ltr;
}

.qcf-ayah-end {
  display: inline;
  inline-size: auto;
  block-size: auto;
  min-inline-size: 0;
  min-block-size: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  font-family: var(--qcf-font), "Amiri Quran", "Scheherazade New", serif;
  font-size: 1em;
  font-weight: 400;
  line-height: inherit;
  vertical-align: baseline;
}

.qcf-ayah-end:hover,
.qcf-ayah-end:focus-visible {
  color: #0b4331;
  background: rgba(217, 182, 103, 0.18);
  outline: 2px solid rgba(11, 67, 49, 0.45);
  outline-offset: 0.08em;
}

.qcf-layout .qcf-ayah-end.ayah-action-number {
  display: inline;
  inline-size: auto;
  block-size: auto;
  min-inline-size: 0;
  min-block-size: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--qcf-font), "Amiri Quran", "Scheherazade New", serif;
  font-size: 1em;
  font-weight: 400;
  line-height: inherit;
  vertical-align: baseline;
}

.mushaf-surah-title {
  display: grid;
  place-items: center;
  min-height: 2.2em;
  margin-block: 0.25em 0.12em;
  color: #0b4331;
  font-family: "Cairo", system-ui, sans-serif;
  font-size: 0.74em;
  font-weight: 900;
  background:
    linear-gradient(90deg, transparent, rgba(217, 182, 103, 0.22), transparent),
    radial-gradient(circle at center, rgba(11, 67, 49, 0.06), transparent 60%);
}

.mushaf-surah-title span {
  min-width: min(70%, 420px);
  padding: 5px 18px;
  border: 1px solid rgba(94, 66, 23, 0.28);
  border-radius: 999px;
  text-align: center;
}

.mushaf-bismillah {
  color: #0b4331;
  text-align: center;
  font-family: "Amiri Quran", "Scheherazade New", "Times New Roman", serif;
  font-size: 0.88em;
  line-height: 1.9;
}

.quran-verse {
  margin-bottom: 18px;
  text-align: right;
  line-height: 2.35;
  word-spacing: 0.08em;
  overflow-wrap: anywhere;
}

.quran-verse.bismillah {
  text-align: center;
  color: #0b4331;
}

.quran-surah-page {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0, rgba(217, 182, 103, 0.18), transparent 32%),
    linear-gradient(180deg, #fff6df 0%, #f1e4c6 100%),
    repeating-linear-gradient(0deg, rgba(94, 66, 23, 0.025) 0 1px, transparent 1px 9px);
}

.quran-surah-page .mushaf-surah-title-main {
  margin-block: 0 0.35em;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
}

.quran-surah-body {
  position: relative;
  z-index: 1;
  display: block;
  direction: rtl;
  text-align: center;
  font-family: "Amiri Quran", "Scheherazade New", "Times New Roman", serif;
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 2.02;
  word-spacing: 0.03em;
}

.quran-surah-page .quran-verse {
  display: inline;
  margin: 0;
  padding: 0 0.04em;
  font: inherit;
  line-height: inherit;
  text-align: center;
  overflow-wrap: normal;
}

.quran-surah-page .quran-verse.bismillah {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0.2em auto 0.55em;
  font-family: "Amiri Quran", "Scheherazade New", "Times New Roman", serif;
  line-height: 1.8;
}

.quran-surah-page .mushaf-footer {
  margin-top: 22px;
}

.ayah-action-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  inline-size: 1.42em;
  block-size: 1.42em;
  min-inline-size: 24px;
  min-block-size: 24px;
  padding: 0;
  margin-inline: 0.18em;
  border: 1px solid rgba(11, 67, 49, 0.52);
  border-radius: 50%;
  color: #0b4331;
  background: rgba(255, 255, 255, 0.18);
  box-sizing: border-box;
  font-family: Arial, sans-serif;
  font-size: 0.5em;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  direction: ltr;
  cursor: pointer;
}

.ayah-end-number {
  display: block;
  inline-size: 100%;
  font-size: 0.94em;
  line-height: 1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  transform: translateY(0.035em);
}

.focused-ayah {
  border-radius: 14px;
  background: rgba(217, 182, 103, 0.22);
  box-shadow: 0 0 0 8px rgba(217, 182, 103, 0.12);
}

.surah-break {
  margin: 28px 0 18px;
  padding: 10px 14px;
  border: 1px solid rgba(11, 67, 49, 0.18);
  border-radius: 16px;
  color: #0b4331;
  text-align: center;
  background: rgba(217, 182, 103, 0.22);
}

.quran-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 10px;
}

.feature-card {
  background:
    linear-gradient(145deg, rgba(6, 43, 32, 0.94), rgba(3, 31, 23, 0.86)),
    radial-gradient(circle at 12% 16%, rgba(217, 182, 103, 0.14), transparent 36%);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.feature-grid article,
.selected-verse-card {
  position: relative;
  border: 1px solid rgba(217, 182, 103, 0.18);
  border-radius: 16px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.045);
}

.feature-grid strong,
.selected-verse-card strong {
  display: block;
  color: var(--gold-soft);
  font-weight: 900;
}

.feature-grid span {
  display: block;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.compact-index {
  min-height: 92px;
}

.bookmark-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.compact-card {
  padding-block: 14px;
}

.quran-toolbar {
  gap: 8px;
}

body.quran-immersive {
  background:
    radial-gradient(circle at 50% -20%, rgba(243, 217, 145, 0.12), transparent 30%),
    radial-gradient(circle at 16% 24%, rgba(19, 118, 96, 0.18), transparent 32%),
    linear-gradient(145deg, #02110d 0%, #031f17 48%, #062b20 100%);
}

body.quran-immersive .app-shell {
  width: 100%;
  max-width: none;
  overflow: visible;
  background:
    radial-gradient(circle at 50% 0, rgba(217, 182, 103, 0.1), transparent 38%),
    linear-gradient(180deg, rgba(3, 31, 23, 0.92), rgba(3, 31, 23, 0.84));
}

body.quran-immersive .app-header,
body.quran-immersive .bottom-nav {
  display: none;
}

body.quran-immersive:not(.quran-page-active) .bottom-nav {
  display: grid;
}

body.quran-page-active .bottom-nav {
  display: none;
}

body.quran-immersive .app-content {
  min-height: 100dvh;
  padding: 0;
}

.quran-reader-screen {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  padding: max(30px, calc(env(safe-area-inset-top) + 12px)) 0 max(18px, env(safe-area-inset-bottom));
  color: #f8f3df;
  background:
    radial-gradient(circle at 50% 18%, rgba(217, 182, 103, 0.1), transparent 30%),
    linear-gradient(180deg, rgba(3, 31, 23, 0.92), rgba(3, 31, 23, 0.82));
}

.quran-reader-screen.reader-has-background::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--reader-bg-image);
  background-size: var(--reader-bg-size, cover);
  background-position: var(--reader-bg-position, center);
  background-repeat: var(--reader-bg-repeat, repeat);
  opacity: var(--reader-bg-opacity, 0.28);
}

.quran-reader-screen > * {
  position: relative;
  z-index: 1;
}

.quran-page-reader {
  min-height: 100dvh;
  padding: 0 0 max(18px, env(safe-area-inset-bottom));
  overflow-x: hidden;
}

body.quran-reader-fullscreen {
  overflow: hidden !important;
  background: var(--quran-geometry-bg) !important;
  background-size: var(--quran-geometry-size) !important;
  background-position: var(--quran-geometry-position) !important;
  background-repeat: repeat !important;
}

body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen {
  --sadaqah-safe-height: 100dvh;
  --sadaqah-fit-width: var(--sadaqah-fullscreen-fit-width, 100dvw);
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  width: 100dvw !important;
  max-width: none !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: var(--quran-geometry-bg) !important;
  background-size: var(--quran-geometry-size) !important;
  background-position: var(--quran-geometry-position) !important;
  background-repeat: repeat !important;
}

body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .quran-page-stage {
  width: 100dvw !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: auto !important;
  place-items: start center !important;
  align-items: start !important;
  justify-items: center !important;
}

body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .quran-reader-exit-button {
  z-index: 1010 !important;
}

body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .reader-mushaf-leaf,
body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .staticMushaf-mushaf-leaf {
  align-self: start !important;
  justify-self: center !important;
  min-height: 0 !important;
  height: auto !important;
}

.quran-reader-exit-button {
  position: fixed;
  inset-block-start: calc(env(safe-area-inset-top, 0px) + 8px);
  inset-inline-start: calc(env(safe-area-inset-left, 0px) + 8px);
  z-index: 92;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(241, 220, 165, 0.34);
  border-radius: 50%;
  color: #f4df9a;
  background: rgba(3, 27, 21, 0.58);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(9px);
  opacity: 0.78;
}

.quran-reader-exit-button::before {
  content: "";
  width: 16px;
  height: 12px;
  background:
    linear-gradient(currentColor 0 0) 0 0 / 16px 2px no-repeat,
    linear-gradient(currentColor 0 0) 0 5px / 16px 2px no-repeat,
    linear-gradient(currentColor 0 0) 0 10px / 16px 2px no-repeat;
}

.quran-reader-exit-button:hover,
.quran-reader-exit-button:focus-visible {
  opacity: 1;
  border-color: rgba(241, 220, 165, 0.64);
}

.quran-page-preparing-screen {
  display: grid;
  place-items: center;
  padding: max(30px, calc(env(safe-area-inset-top) + 12px)) 18px max(24px, env(safe-area-inset-bottom));
}

.quran-page-loading-card {
  width: min(420px, 100%);
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 20px;
  border: 1px solid rgba(241, 220, 165, 0.18);
  border-radius: 18px;
  color: #f8f3df;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0, rgba(226, 194, 117, 0.18), transparent 56%),
    linear-gradient(180deg, rgba(5, 47, 36, 0.94), rgba(2, 24, 18, 0.92));
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.28);
}

.quran-page-loading-card strong {
  font-size: clamp(1.15rem, 4vw, 1.55rem);
  font-weight: 900;
}

.quran-page-loading-card p,
.quran-page-loading-card small {
  margin: 0;
  color: rgba(248, 243, 223, 0.76);
  font-weight: 800;
  line-height: 1.6;
}

.quran-page-loading-spinner {
  width: 42px;
  height: 42px;
  border: 4px solid rgba(248, 243, 223, 0.22);
  border-top-color: #e6c76e;
  border-radius: 50%;
  animation: quran-loading-spin 0.9s linear infinite;
}

@keyframes quran-loading-spin {
  to { transform: rotate(360deg); }
}

.quran-page-reader .quran-topbar,
.quran-page-reader .quran-surah-ribbon,
.quran-page-reader .quran-reader-bottom-panel,
.quran-page-reader .quran-page-dots,
.quran-page-reader .quran-reader-app-menu,
.quran-page-reader .quran-reader-utility,
.quran-page-reader .quran-reader-audio,
.quran-page-reader .reader-dua-action-rail {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

.quran-page-reader .quran-topbar {
  position: fixed;
  inset-inline: 0;
  top: var(--quran-reader-top-offset);
  width: min(100%, 980px);
  margin-inline: auto;
  height: var(--quran-reader-topbar-height);
  border-bottom: 1px solid rgba(217, 182, 103, 0.16);
  background:
    radial-gradient(circle at 50% 0, rgba(217, 182, 103, 0.1), transparent 58%),
    linear-gradient(180deg, rgba(18, 33, 11, 0.98), rgba(16, 29, 10, 0.9));
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
}

.quran-page-reader .quran-surah-ribbon {
  position: fixed;
  inset-inline: 0;
  top: calc(var(--quran-reader-top-offset) + var(--quran-reader-topbar-height));
  z-index: 49;
  width: min(100%, 980px);
  height: 82px;
  margin-inline: auto;
  background: linear-gradient(180deg, rgba(24, 39, 13, 0.78), rgba(24, 39, 13, 0.4));
  backdrop-filter: blur(14px);
}

.quran-page-reader .quran-reader-bottom-panel {
  position: fixed;
  inset-inline: 0;
  bottom: calc(max(8px, env(safe-area-inset-bottom)) + 52px);
  z-index: 50;
  width: min(100%, 860px);
  height: 0;
  margin-inline: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  pointer-events: none;
}

.quran-page-reader .quran-page-dots {
  position: fixed;
  inset-inline: 0;
  bottom: max(8px, env(safe-area-inset-bottom));
  z-index: 48;
  width: min(100%, 860px);
  margin-inline: auto;
  padding: 10px 18px 14px;
  border: 1px solid rgba(241, 220, 165, 0.12);
  border-radius: 12px 12px 28px 28px;
  background:
    linear-gradient(180deg, rgba(11, 30, 24, 0.62), rgba(4, 19, 15, 0.74));
  box-shadow:
    0 -12px 28px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 248, 231, 0.06);
  backdrop-filter: blur(16px);
}

.quran-page-reader .quran-reader-app-menu {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 58;
  box-sizing: border-box;
  width: 100%;
  min-height: 94px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 5px;
  align-items: center;
  padding: 12px 10px max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(241, 220, 165, 0.12);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.1), transparent 18% 82%, rgba(0, 0, 0, 0.1)),
    linear-gradient(180deg, rgba(6, 49, 38, 0.82) 0%, rgba(4, 34, 25, 0.74) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.035),
    0 -10px 22px rgba(0, 0, 0, 0.14);
  backdrop-filter: blur(14px) saturate(108%);
  -webkit-backdrop-filter: blur(14px) saturate(108%);
}

.quran-page-reader .quran-reader-app-menu button {
  min-width: 0;
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  color: rgba(248, 243, 223, 0.72);
  background: transparent;
  font: inherit;
  font-size: clamp(0.72rem, 2.2vw, 0.9rem);
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.quran-page-reader .quran-reader-app-menu button.active {
  color: #09261d;
  background: var(--gold);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
}

.quran-page-reader.reader-tools-open .quran-topbar,
.quran-page-reader.reader-tools-open .quran-surah-ribbon,
.quran-page-reader.reader-tools-open .quran-reader-bottom-panel,
.quran-page-reader.reader-tools-open .quran-page-dots,
.quran-page-reader.reader-tools-open .quran-reader-app-menu,
.quran-page-reader.reader-tools-open .quran-reader-utility,
.quran-page-reader.reader-tools-open .quran-reader-audio,
.quran-page-reader.reader-tools-open .reader-dua-action-rail,
.quran-page-reader.reader-auto-tools .quran-topbar,
.quran-page-reader.reader-auto-tools .quran-surah-ribbon,
.quran-page-reader.reader-auto-tools .quran-reader-bottom-panel,
.quran-page-reader.reader-auto-tools .quran-page-dots,
.quran-page-reader.reader-auto-tools .quran-reader-app-menu,
.quran-page-reader.reader-auto-tools .quran-reader-utility,
.quran-page-reader.reader-auto-tools .quran-reader-audio,
.quran-page-reader.reader-auto-tools .reader-dua-action-rail,
.quran-page-reader.reader-dua-panel-open .reader-dua-action-rail {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.quran-page-reader.reader-tools-open .quran-topbar,
.quran-page-reader.reader-tools-open .quran-surah-ribbon,
.quran-page-reader.reader-tools-open .quran-page-dots,
.quran-page-reader.reader-tools-open .quran-reader-app-menu,
.quran-page-reader.reader-tools-open .quran-reader-utility,
.quran-page-reader.reader-tools-open .quran-reader-audio,
.quran-page-reader.reader-tools-open .reader-dua-action-rail,
.quran-page-reader.reader-auto-tools .quran-topbar,
.quran-page-reader.reader-auto-tools .quran-surah-ribbon,
.quran-page-reader.reader-auto-tools .quran-page-dots,
.quran-page-reader.reader-auto-tools .quran-reader-app-menu,
.quran-page-reader.reader-auto-tools .quran-reader-utility,
.quran-page-reader.reader-auto-tools .quran-reader-audio,
.quran-page-reader.reader-auto-tools .reader-dua-action-rail,
.quran-page-reader.reader-dua-panel-open .reader-dua-action-rail {
  pointer-events: auto;
}

.quran-page-reader.reader-tools-open .quran-reader-bottom-panel,
.quran-page-reader.reader-auto-tools .quran-reader-bottom-panel {
  pointer-events: none;
}

.quran-topbar {
  position: sticky;
  top: 0;
  z-index: 52;
  height: 108px;
  display: grid;
  grid-template-columns: auto minmax(42px, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 18px clamp(16px, 4vw, 56px) 16px;
  background:
    linear-gradient(180deg, rgba(24, 39, 13, 0.96), rgba(24, 39, 13, 0.84));
  backdrop-filter: blur(18px);
}

.quran-tool-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quran-topbar-rule {
  height: 1px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, transparent, rgba(241, 220, 165, 0.35), transparent);
}

.quran-topbar strong {
  justify-self: center;
  color: rgba(255, 255, 255, 0.88);
  font-family: "Amiri Quran", "Scheherazade New", serif;
  font-size: clamp(1.55rem, 4.4vw, 2.35rem);
  font-weight: 400;
  line-height: 1.12;
  white-space: nowrap;
}

.quran-reader-title-stack {
  min-width: 0;
  display: grid;
  place-items: center;
  gap: 4px;
  text-align: center;
}

.quran-reader-title-stack small {
  max-width: min(52vw, 360px);
  padding: 2px 10px;
  border: 1px solid rgba(241, 220, 165, 0.2);
  border-radius: 999px;
  color: rgba(241, 220, 165, 0.88);
  background: rgba(0, 0, 0, 0.18);
  font-family: "Cairo", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quran-index-screen .quran-topbar strong,
.quran-index-screen .quran-index-title,
.quran-index-screen .quran-index-hero h2,
.quran-index-screen .reader-pill,
.quran-index-screen .quran-tab,
.quran-index-screen .quran-surah-table-head {
  font-family: "Cairo", "Avenir Next", "Segoe UI", Tahoma, Arial, sans-serif;
}

.quran-icon-button,
.reader-mini-button,
.reader-round-button,
.ayah-popover-button {
  position: relative;
  display: inline-grid;
  place-items: center;
  border: 0;
  color: #fff;
  background: transparent;
}

.quran-icon-button {
  width: 48px;
  height: 48px;
  opacity: 0.9;
}

.quran-page-reader .quran-icon-button {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(241, 220, 165, 0.18);
  border-radius: 16px;
  color: rgba(241, 220, 165, 0.92);
  background:
    radial-gradient(circle at 50% 0, rgba(241, 220, 165, 0.1), transparent 58%),
    rgba(0, 0, 0, 0.24);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 231, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.18);
  opacity: 1;
}

.quran-index-screen .quran-topbar {
  top: max(9px, env(safe-area-inset-top));
  width: min(calc(100% - 28px), 760px);
  height: auto;
  min-height: 78px;
  margin: 20px auto 18px;
  grid-template-columns: auto minmax(46px, 1fr) auto;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid rgba(217, 182, 103, 0.24);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% -40%, rgba(217, 182, 103, 0.18), transparent 58%),
    linear-gradient(135deg, rgba(11, 67, 49, 0.94), rgba(4, 29, 22, 0.94));
  box-shadow:
    0 16px 34px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 248, 231, 0.08);
}

.quran-index-screen .quran-topbar strong {
  color: var(--gold-soft);
  font-size: clamp(1.08rem, 4.8vw, 1.55rem);
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  white-space: normal;
}

.quran-index-screen .quran-icon-button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(217, 182, 103, 0.22);
  border-radius: 15px;
  color: rgba(255, 248, 231, 0.86);
  background: rgba(255, 255, 255, 0.07);
  opacity: 1;
}

.quran-app-menu {
  position: fixed;
  top: calc(max(12px, env(safe-area-inset-top, 0px)) + 64px);
  left: max(14px, env(safe-area-inset-left, 0px));
  z-index: 92;
  width: min(292px, calc(100vw - 28px));
  display: none;
  gap: 8px;
  padding: 12px;
  border: 1px solid rgba(217, 182, 103, 0.24);
  border-radius: 18px;
  color: #fff8df;
  background:
    radial-gradient(circle at 50% 0, rgba(217, 182, 103, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(9, 58, 43, 0.97), rgba(3, 31, 23, 0.97));
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(14px);
}

.quran-app-menu.is-open {
  display: grid;
}

.quran-app-menu > strong {
  padding: 2px 4px 4px;
  color: #f4df9a;
  font-family: "Cairo", "Avenir Next", system-ui, sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  text-align: right;
}

.quran-app-menu-item {
  display: grid;
  gap: 3px;
  min-height: 54px;
  padding: 9px 12px;
  border: 1px solid rgba(241, 220, 165, 0.18);
  border-radius: 12px;
  color: #fff8df;
  text-align: right;
  background: rgba(255, 255, 255, 0.075);
}

.quran-app-menu-item span {
  font-family: "Cairo", "Avenir Next", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.2;
}

.quran-app-menu-item small {
  color: rgba(255, 248, 223, 0.7);
  font-family: "Cairo", "Avenir Next", system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.35;
}

.quran-app-menu-item:active {
  transform: translateY(1px);
  background: rgba(217, 182, 103, 0.16);
}

.quran-reading-history {
  position: relative;
  display: inline-grid;
  place-items: center;
  direction: rtl;
}

.quran-reading-history-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 96;
  width: min(286px, calc(100vw - 24px));
  display: none;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(217, 182, 103, 0.28);
  border-radius: 16px;
  color: #fff8df;
  text-align: right;
  background:
    radial-gradient(circle at 50% 0, rgba(217, 182, 103, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(9, 58, 43, 0.98), rgba(3, 31, 23, 0.98));
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(14px);
}

.quran-reading-history.is-open .quran-reading-history-menu {
  display: grid;
}

.quran-reading-history-menu > strong {
  padding: 2px 4px;
  color: #f4df9a;
  font-family: "Cairo", "Avenir Next", system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.25;
}

.quran-reading-history-menu p {
  margin: 0;
  padding: 8px 10px;
  color: rgba(255, 248, 223, 0.72);
  font-family: "Cairo", "Avenir Next", system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
}

.quran-reading-history-item {
  display: grid;
  gap: 3px;
  min-height: 52px;
  padding: 9px 11px;
  border: 1px solid rgba(241, 220, 165, 0.18);
  border-radius: 12px;
  color: #fff8df;
  text-align: right;
  background: rgba(255, 255, 255, 0.075);
}

.quran-reading-history-item span {
  font-family: "Cairo", "Avenir Next", system-ui, sans-serif;
  font-size: 0.96rem;
  font-weight: 900;
  line-height: 1.25;
}

.quran-reading-history-item small {
  color: rgba(255, 248, 223, 0.7);
  font-family: "Cairo", "Avenir Next", system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.35;
}

.quran-reading-history-item:active {
  transform: translateY(1px);
  background: rgba(217, 182, 103, 0.16);
}

body.quran-page-active .sadaqah-reader .quran-app-menu {
  top: calc(max(8px, env(safe-area-inset-top, 0px)) + 46px);
}

@media (max-width: 720px) {
  .quran-app-menu {
    width: min(276px, calc(100vw - 24px));
    left: max(12px, env(safe-area-inset-left, 0px));
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  body.quran-page-active .sadaqah-reader .quran-app-menu {
    top: calc(max(6px, env(safe-area-inset-top, 0px)) + 32px);
    width: min(260px, calc(100vw - 24px));
    padding: 10px;
  }

  body.quran-page-active .sadaqah-reader .quran-app-menu-item {
    min-height: 46px;
    padding: 7px 10px;
  }
}

.quran-icon-button::before,
.quran-icon-button::after,
.reader-mini-button::before,
.reader-mini-button::after,
.reader-round-button::before,
.reader-round-button::after,
.ayah-popover-button::before,
.ayah-popover-button::after {
  content: "";
  position: absolute;
}

.icon-book::before {
  width: 25px;
  height: 31px;
  border: 5px solid currentColor;
  border-right-width: 8px;
  border-radius: 4px;
}

.icon-search::before {
  width: 22px;
  height: 22px;
  border: 4px solid currentColor;
  border-radius: 50%;
  opacity: 0.26;
}

.icon-search::after {
  width: 16px;
  height: 4px;
  transform: translate(13px, 13px) rotate(45deg);
  border-radius: 999px;
  background: currentColor;
  opacity: 0.26;
}

.icon-list::before {
  width: 28px;
  height: 24px;
  background:
    linear-gradient(currentColor 0 0) 0 0 / 22px 5px no-repeat,
    linear-gradient(currentColor 0 0) 0 9px / 22px 5px no-repeat,
    linear-gradient(currentColor 0 0) 0 18px / 22px 5px no-repeat;
  border-radius: 5px;
}

.icon-list::after {
  width: 7px;
  height: 7px;
  inset-inline-end: 6px;
  top: 11px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 9px 0 currentColor, 0 -9px 0 currentColor;
}

.icon-settings::before {
  width: 28px;
  height: 28px;
  border: 5px solid currentColor;
  border-radius: 7px;
  opacity: 0.68;
}

.icon-settings::after {
  width: 5px;
  height: 34px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 11px 0 0 currentColor, -11px 0 0 currentColor;
  opacity: 0.68;
}

.quran-page-reader .icon-search::before {
  width: 21px;
  height: 21px;
  border-width: 3px;
  opacity: 0.82;
}

.quran-page-reader .icon-search::after {
  width: 14px;
  height: 3px;
  opacity: 0.82;
}

.quran-page-reader .icon-list::before {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  background:
    linear-gradient(currentColor 0 0) 0 0 / 11px 11px no-repeat,
    linear-gradient(currentColor 0 0) 17px 0 / 11px 11px no-repeat,
    linear-gradient(currentColor 0 0) 0 17px / 11px 11px no-repeat,
    linear-gradient(currentColor 0 0) 17px 17px / 11px 11px no-repeat;
}

.quran-page-reader .icon-list::after {
  display: none;
}

.quran-page-reader .icon-settings::before {
  width: 27px;
  height: 34px;
  border: 3px solid currentColor;
  border-inline-start-width: 7px;
  border-radius: 6px;
  opacity: 0.92;
}

.quran-page-reader .icon-settings::after {
  width: 3px;
  height: 24px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 8px 0 0 currentColor;
  opacity: 0.72;
}

.icon-history::before {
  width: 25px;
  height: 29px;
  border: 3px solid currentColor;
  border-radius: 6px;
  opacity: 0.9;
}

.icon-history::after {
  width: 13px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
  opacity: 0.9;
}

.quran-page-reader .icon-back::before {
  width: 17px;
  height: 17px;
  border-width: 4px 0 0 4px;
}

.quran-surah-ribbon {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.2vw, 16px);
  height: 92px;
  padding: 10px clamp(12px, 3vw, 34px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-padding-inline: 50%;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  background:
    radial-gradient(circle at 50% 0, rgba(241, 220, 165, 0.16), transparent 56%),
    linear-gradient(180deg, rgba(27, 43, 18, 0.93), rgba(11, 30, 24, 0.78));
  border-block: 1px solid rgba(217, 182, 103, 0.18);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 231, 0.08),
    0 16px 34px rgba(0, 0, 0, 0.24);
}

.quran-surah-ribbon::-webkit-scrollbar {
  display: none;
}

.surah-wheel-item {
  position: relative;
  flex: 0 0 clamp(126px, 30vw, 220px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  place-items: center;
  gap: 8px;
  min-height: 54px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  border: 1px solid rgba(255, 248, 231, 0.12);
  border-radius: 999px;
  padding: 7px 14px;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.2);
  font-family: "Amiri Quran", "Scheherazade New", serif;
  text-align: center;
  transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.surah-wheel-item strong {
  font-size: clamp(1.35rem, 3.6vw, 2.25rem);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.surah-wheel-item span {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  border-radius: 50%;
  color: #163d34;
  background: rgba(241, 220, 165, 0.9);
  font-family: "Cairo", system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 900;
  line-height: 1;
}

.surah-wheel-item.current {
  flex-basis: clamp(160px, 34vw, 260px);
  min-height: 66px;
  color: #fff;
  border-color: rgba(241, 220, 165, 0.28);
  background:
    radial-gradient(circle at 50% 0, rgba(241, 220, 165, 0.15), transparent 60%),
    rgba(0, 0, 0, 0.34);
  box-shadow:
    inset 0 0 0 1px rgba(255, 248, 231, 0.08),
    0 8px 20px rgba(0, 0, 0, 0.22);
  transform: scale(1.06);
}

.surah-wheel-item.current strong {
  font-size: clamp(1.65rem, 4.7vw, 2.75rem);
}

.quran-page-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  justify-content: center;
  min-height: 100dvh;
  padding: max(8px, env(safe-area-inset-top)) clamp(6px, 2.2vw, 28px) max(18px, env(safe-area-inset-bottom));
  overflow: visible;
  cursor: grab;
  perspective: 1400px;
  touch-action: pan-y;
  user-select: none;
}

.quran-page-stage.is-dragging {
  cursor: grabbing;
}

.quran-page-reader.reader-zoomed .quran-page-stage {
  align-items: start;
  overflow: auto;
  cursor: zoom-out;
  touch-action: pan-x pan-y;
}

.reader-mushaf-leaf {
  --reader-page-tilt: 0deg;
  --reader-page-origin: center center;
  width: min(calc(100vw - 24px), 980px);
  max-width: none;
  min-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(22px, env(safe-area-inset-bottom)));
  height: auto;
  align-self: center;
  justify-self: center;
  padding: clamp(18px, 3.1vw, 48px);
  border-radius: 18px;
  overflow: hidden;
  transform: translateX(var(--drag-shift, 0px)) rotate(var(--quran-reader-rotation, 0deg)) rotateY(var(--reader-page-tilt));
  transform-origin: var(--reader-page-origin);
  transition: transform 0.16s cubic-bezier(0.2, 0.82, 0.24, 1), box-shadow 0.16s ease, opacity 0.16s ease;
  will-change: transform;
}

.quran-page-reader.reader-zoomed .reader-mushaf-leaf {
  width: min(calc(100vw + 90px), 1080px);
  margin-block: 16px 72px;
}

.quran-page-reader.reader-zoomed .reader-mushaf-leaf .mushaf-layout {
  font-size: clamp(1.68rem, 4.25vw, 2.72rem) !important;
}

.quran-page-reader.reader-zoomed .reader-mushaf-leaf .qcf-layout {
  font-size: clamp(1.9rem, 4.75vw, 3.05rem) !important;
}

.quran-page-stage.is-dragging .reader-mushaf-leaf {
  transition: none;
  box-shadow:
    0 24px 58px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(217, 182, 103, 0.2);
}

.quran-page-stage.drag-left .reader-mushaf-leaf {
  --reader-page-tilt: 0deg;
  --reader-page-origin: center center;
}

.quran-page-stage.drag-right .reader-mushaf-leaf {
  --reader-page-tilt: 0deg;
  --reader-page-origin: center center;
}

.quran-page-stage.turn-next .reader-mushaf-leaf {
  animation: none;
}

.quran-page-stage.turn-prev .reader-mushaf-leaf {
  animation: none;
}

@keyframes quranPageTurnNext {
  to {
    transform: translateX(86px) rotate(var(--quran-reader-rotation, 0deg)) rotateY(12deg);
    opacity: 0.68;
  }
}

@keyframes quranPageTurnPrev {
  to {
    transform: translateX(-86px) rotate(var(--quran-reader-rotation, 0deg)) rotateY(-12deg);
    opacity: 0.68;
  }
}

.reader-side-page {
  display: none;
  align-self: center;
  height: min(68dvh, 860px);
  min-height: 510px;
  border: 0;
  border-radius: 14px;
  color: rgba(20, 26, 19, 0.44);
  background: linear-gradient(180deg, #f8f1df, #eee4cc);
  box-shadow: inset 0 0 0 1px rgba(39, 34, 24, 0.1);
  font-family: "Amiri Quran", "Scheherazade New", serif;
  font-size: 1.5rem;
  overflow: hidden;
}

.reader-side-page.prev {
  transform: translateX(36%);
}

.reader-side-page.next {
  transform: translateX(-36%);
}

.reader-side-page span {
  display: block;
  margin-top: 28px;
  writing-mode: vertical-rl;
}

.reader-side-page strong {
  display: block;
  margin-top: 48px;
}

.reader-mushaf-leaf .mushaf-layout {
  height: auto;
  min-height: 0;
  margin-top: 10px;
  align-content: space-evenly;
  font-size: clamp(1.42rem, 3.55vw, 2.18rem) !important;
  gap: clamp(4px, 0.72vw, 10px);
}

.reader-mushaf-leaf .qcf-layout {
  align-content: space-evenly;
  font-size: clamp(1.72rem, 3.85vw, 2.52rem) !important;
}

.reader-mushaf-leaf .qcf-layout.tajweed-layout {
  align-content: stretch;
}

.reader-mushaf-leaf .mushaf-line {
  line-height: 1.78;
  min-height: 1.68em;
}

.reader-mushaf-leaf .qcf-line {
  line-height: 1.32;
  min-height: 1.32em;
}

.staticMushaf-reader .quran-page-stage {
  align-items: start;
  padding-block: max(10px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-bottom));
}

.staticMushaf-mushaf-leaf {
  width: min(calc(100vw - 20px), 760px);
  min-height: auto;
  padding: clamp(8px, 2vw, 18px);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(252, 249, 239, 0.98), rgba(245, 240, 222, 0.98));
}

.staticMushaf-reader:not(.sadaqah-reader) > .quran-topbar,
.staticMushaf-reader:not(.sadaqah-reader) > .quran-surah-ribbon,
.staticMushaf-reader:not(.sadaqah-reader) > .quran-reader-bottom-panel,
.staticMushaf-reader:not(.sadaqah-reader) > .quran-page-dots,
.staticMushaf-reader:not(.sadaqah-reader) > .quran-reader-utility {
  display: none;
}

.quran-page-reader.reader-has-background .staticMushaf-mushaf-leaf {
  background-image:
    linear-gradient(180deg, rgba(252, 249, 239, 0.72), rgba(224, 205, 143, 0.58)),
    var(--reader-bg-image);
  background-size: cover, var(--reader-bg-size, cover);
  background-position: center, var(--reader-bg-position, center);
  background-repeat: no-repeat, var(--reader-bg-repeat, repeat);
}

.staticMushaf-page-shell {
  display: grid;
  place-items: center;
  width: 100%;
  overflow: auto;
  border-radius: 12px;
  background: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(33, 40, 28, 0.1),
    0 16px 34px rgba(0, 0, 0, 0.2);
}

.staticMushaf-page-image {
  display: block;
  width: min(100%, 699px);
  height: auto;
  max-height: calc(100dvh - 190px);
  object-fit: contain;
  background: #fff;
}

.sadaqah-book-page-image {
  width: min(100%, 720px);
  background: #fff7df;
}

.sadaqah-page-frame {
  position: relative;
  width: min(100%, 720px);
  background: #fff7df;
}

.sadaqah-page-frame .sadaqah-book-page-image {
  position: relative;
  z-index: 2;
  width: 100%;
}

.sadaqah-page-header-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.sadaqah-page-juz-title {
  fill: #11120f;
  font-family: "Sadaqah Uthman TN", "Sadaqah Uthmanic Hafs", "Amiri Quran", serif;
  font-size: 66px;
  font-weight: 400;
  letter-spacing: 0;
}

.sadaqah-opening-page-image {
  background: transparent !important;
}

.sadaqah-opening-decor {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.sadaqah-opening-decor.is-mirrored {
  transform: scaleX(-1);
}

.sadaqah-spread-shell {
  width: 100%;
  background: #fff7df;
}

.sadaqah-spread {
  display: flex;
  direction: rtl;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  background: #fff7df;
}

.sadaqah-spread-page {
  flex: 0 1 min(50%, calc(100dvh * 0.642857));
  min-width: 0;
  background: #fff7df;
}

.sadaqah-spread-page .sadaqah-page-frame {
  width: 100%;
}

.sadaqah-spread-page .sadaqah-book-page-image {
  max-height: none;
}

.sadaqah-spread-page + .sadaqah-spread-page {
  border-inline-start: 1px solid rgba(86, 70, 38, 0.14);
}

.sadaqah-reader .staticMushaf-toolbar,
.sadaqah-reader .staticMushaf-source-note {
  display: none;
}

@media (max-width: 920px), (orientation: portrait) {
  .sadaqah-spread {
    display: block;
  }

  .sadaqah-spread-page {
    display: none;
  }

  .sadaqah-spread-page.is-current,
  .sadaqah-spread-page:only-child {
    display: block;
    width: 100%;
  }

  .sadaqah-spread-page + .sadaqah-spread-page {
    border-inline-start: 0;
  }
}

.sadaqah-ayah-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  touch-action: none;
}

.sadaqah-ayah-highlight-layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.sadaqah-ayah-highlight {
  position: absolute;
  display: block;
  border-radius: 12px;
  background: rgba(143, 190, 127, 0.2);
  box-shadow: 0 0 0 1px rgba(78, 129, 77, 0.18);
}

.sadaqah-ayah-zone {
  position: absolute;
  display: block;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: transparent;
  cursor: pointer;
  pointer-events: auto;
  touch-action: none;
}

.sadaqah-ayah-zone span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.sadaqah-ayah-zone:hover,
.sadaqah-ayah-zone:focus-visible {
  border-color: rgba(217, 176, 86, 0.52);
  background: rgba(255, 246, 208, 0.16);
  outline: none;
}

.quran-page-reader.reader-zoomed .staticMushaf-page-image {
  width: min(122%, 860px);
  max-width: none;
  max-height: none;
}

.quran-page-reader.reader-zoomed .sadaqah-book-page-image {
  width: 100%;
}

.quran-page-reader.reader-zoomed .sadaqah-page-frame {
  width: min(138%, 980px);
}

.staticMushaf-toolbar {
  width: 100%;
  display: grid;
  gap: 9px;
  margin: 10px auto 0;
  padding: 10px;
  border: 1px solid rgba(255, 248, 231, 0.18);
  border-radius: 20px;
  background:
    linear-gradient(135deg, rgba(2, 22, 18, 0.74), rgba(9, 45, 37, 0.58));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 14px 28px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
}

.staticMushaf-page-controls {
  display: grid;
  grid-template-columns: minmax(82px, 0.72fr) minmax(174px, 1.38fr) minmax(82px, 0.72fr);
  align-items: center;
  gap: 8px;
}

.staticMushaf-tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.staticMushaf-toolbar .reader-pill {
  min-width: 0;
  min-height: 40px;
  padding: 8px 10px;
  font-size: clamp(0.76rem, 2.25vw, 0.92rem);
  color: #fff;
  border-color: rgba(255, 248, 231, 0.22);
  background: rgba(0, 0, 0, 0.32);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.48);
  box-shadow: 0 7px 15px rgba(0, 0, 0, 0.16);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.staticMushaf-toolbar .primary-reader-pill {
  color: #0e2f27;
  background: rgba(232, 204, 126, 0.92);
  text-shadow: none;
}

.staticMushaf-toolbar .reader-pill:disabled {
  opacity: 0.48;
}

.staticMushaf-page-jump {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(56px, 72px) auto;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 4px;
  border: 1px solid rgba(255, 248, 231, 0.2);
  border-radius: 999px;
  color: #fff;
  background: rgba(0, 0, 0, 0.28);
  font-weight: 900;
}

.staticMushaf-page-jump span {
  padding-inline-start: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(0.72rem, 2.05vw, 0.9rem);
}

.staticMushaf-page-jump input {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  padding: 5px 8px;
  color: #163d34;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  font: inherit;
}

.staticMushaf-source-note {
  margin: 10px 0 0;
  color: rgba(22, 61, 52, 0.66);
  text-align: center;
}

.sadaqah-reader .staticMushaf-page-shell {
  overflow: auto;
  border-radius: 0;
  background: #fff7df;
  box-shadow:
    inset 0 0 0 0 transparent,
    0 0 0 transparent;
}

.sadaqah-reader .staticMushaf-toolbar {
  border-color: rgba(232, 204, 126, 0.28);
  background:
    linear-gradient(135deg, rgba(4, 36, 28, 0.86), rgba(79, 58, 20, 0.64));
}

.sadaqah-reader .staticMushaf-source-note {
  color: rgba(79, 58, 20, 0.82);
  font-weight: 800;
}

.sadaqah-reader,
.sadaqah-reader .quran-page-stage,
.sadaqah-reader .reader-mushaf-leaf,
.sadaqah-reader .staticMushaf-mushaf-leaf {
  background: #fff7df;
}

.sadaqah-reader .staticMushaf-mushaf-leaf {
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

@media (max-width: 680px) {
  .staticMushaf-reader .quran-page-stage {
    padding-block: max(8px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-bottom));
  }

  .staticMushaf-mushaf-leaf {
    width: min(calc(100vw - 14px), 760px);
    padding: 8px;
    border-radius: 16px;
  }

  .staticMushaf-page-shell {
    border-radius: 10px;
  }

  .staticMushaf-page-image {
    max-height: calc(100dvh - 168px);
  }

  .staticMushaf-toolbar {
    gap: 8px;
    margin-top: 8px;
    padding: 9px;
    border-radius: 18px;
  }

  .staticMushaf-page-controls {
    grid-template-columns: minmax(70px, 0.7fr) minmax(146px, 1.55fr) minmax(70px, 0.7fr);
    gap: 6px;
  }

  .staticMushaf-tool-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .staticMushaf-toolbar .reader-pill {
    min-height: 38px;
    padding: 7px 7px;
  }

  .staticMushaf-page-jump {
    grid-template-columns: minmax(0, 1fr) minmax(48px, 58px) auto;
    gap: 4px;
    min-height: 38px;
  }

  .staticMushaf-page-jump span {
    padding-inline-start: 5px;
  }

  .staticMushaf-page-jump input {
    min-height: 31px;
    padding: 4px 6px;
  }

  .staticMushaf-source-note {
    margin-top: 8px;
    font-size: 0.88rem;
    line-height: 1.65;
  }
}

@media (max-width: 390px) {
  .staticMushaf-page-controls {
    grid-template-columns: 1fr;
  }

  .staticMushaf-tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.reader-mushaf-leaf .mushaf-topline {
  font-family: "Amiri Quran", "Scheherazade New", serif;
  font-size: clamp(1rem, 2.4vw, 1.5rem);
  font-weight: 400;
}

.reader-mushaf-leaf .mushaf-footer {
  margin-top: 8px;
  font-family: "Amiri Quran", "Scheherazade New", serif;
  font-size: 1.35rem;
}

.mushaf-theme-olive {
  border-color: rgba(158, 146, 93, 0.28);
}

.mushaf-theme-teal {
  border-color: rgba(20, 121, 113, 0.34);
}

.mushaf-theme-burgundy {
  border-color: rgba(94, 16, 20, 0.36);
}

.mushaf-theme-navy {
  border-color: rgba(25, 42, 68, 0.34);
}

.mushaf-theme-brown {
  border-color: rgba(61, 38, 20, 0.34);
}

.mushaf-style-classic::before {
  border-color: rgba(86, 70, 38, 0.36);
  box-shadow:
    inset 0 0 0 1px rgba(217, 182, 103, 0.24),
    inset 0 0 0 8px rgba(255, 248, 231, 0.18),
    inset 0 0 40px rgba(94, 66, 23, 0.12);
}

.reader-mushaf-leaf.mushaf-style-classic {
  width: min(calc(100vw - 28px), 900px);
  border: 1px solid rgba(145, 118, 61, 0.5);
  border-radius: 14px;
  color: #1b2419;
  background:
    linear-gradient(180deg, rgba(255, 252, 242, 0.99), rgba(246, 238, 216, 0.99)),
    #fbf5e6;
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.reader-mushaf-leaf.mushaf-style-classic::before {
  inset: 13px;
  border: 2px solid rgba(145, 118, 61, 0.34);
  border-radius: 9px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.62),
    inset 0 0 0 5px rgba(217, 182, 103, 0.08);
}

.reader-mushaf-leaf.mushaf-style-classic .mushaf-topline,
.reader-mushaf-leaf.mushaf-style-classic .mushaf-footer {
  color: rgba(62, 82, 55, 0.86);
}

.reader-mushaf-leaf.mushaf-style-classic .mushaf-page-badge {
  border-color: rgba(145, 118, 61, 0.52);
  color: #264d40;
  background: rgba(250, 244, 224, 0.9);
}

.reader-mushaf-leaf.mushaf-style-classic .mushaf-footer span {
  color: rgba(62, 82, 55, 0.84);
  background: rgba(217, 182, 103, 0.18);
}

.reader-mushaf-leaf.mushaf-style-classic .mushaf-surah-title {
  color: #173f36;
  border-color: rgba(145, 118, 61, 0.28);
  background: rgba(255, 252, 242, 0.58);
  box-shadow: none;
}

.reader-mushaf-leaf.mushaf-style-classic .mushaf-layout,
.reader-mushaf-leaf.mushaf-style-classic .mushaf-line,
.reader-mushaf-leaf.mushaf-style-classic .qcf-layout {
  color: #142519;
}

.reader-mushaf-leaf.mushaf-design-calm {
  width: min(calc(100vw - 28px), 900px);
  border: 1px solid rgba(182, 174, 151, 0.58);
  border-radius: 12px;
  color: #142019;
  background:
    linear-gradient(180deg, rgba(255, 254, 249, 0.995), rgba(250, 247, 238, 0.995)),
    #fffdf6;
  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.84);
}

.reader-mushaf-leaf.mushaf-design-calm::before {
  inset: 12px;
  border: 1px solid rgba(174, 164, 137, 0.34);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.reader-mushaf-leaf.mushaf-design-calm .mushaf-topline,
.reader-mushaf-leaf.mushaf-design-calm .mushaf-footer {
  color: rgba(62, 78, 68, 0.78);
}

.reader-mushaf-leaf.mushaf-design-calm .mushaf-page-badge,
.reader-mushaf-leaf.mushaf-design-calm .end,
.reader-mushaf-leaf.mushaf-design-calm .ayah-number,
.reader-mushaf-leaf.mushaf-design-calm .mushaf-end {
  border-color: rgba(104, 148, 139, 0.52);
  color: #2e776b;
  background: rgba(245, 252, 249, 0.92);
}

.reader-mushaf-leaf.mushaf-design-calm .mushaf-footer span {
  color: rgba(62, 78, 68, 0.78);
  background: rgba(232, 227, 211, 0.44);
}

.reader-mushaf-leaf.mushaf-design-calm .mushaf-surah-title {
  color: #235c54;
  border-color: rgba(174, 164, 137, 0.22);
  background: rgba(255, 255, 255, 0.58);
  box-shadow: none;
}

.reader-mushaf-leaf.mushaf-design-calm .mushaf-layout,
.reader-mushaf-leaf.mushaf-design-calm .mushaf-line,
.reader-mushaf-leaf.mushaf-design-calm .qcf-layout {
  color: #142019;
}

.reader-mushaf-leaf.mushaf-design-emerald {
  width: min(calc(100vw - 28px), 900px);
  border: 2px solid rgba(21, 89, 73, 0.72);
  border-radius: 16px;
  color: #141b16;
  background:
    linear-gradient(90deg, rgba(19, 96, 76, 0.12), transparent 9%, transparent 91%, rgba(19, 96, 76, 0.12)),
    radial-gradient(circle at 50% 0, rgba(214, 178, 82, 0.2), transparent 34%),
    linear-gradient(180deg, rgba(255, 250, 238, 0.99), rgba(242, 233, 209, 0.99)),
    #fbf4df;
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.24),
    inset 0 0 0 1px rgba(255, 255, 255, 0.76),
    inset 0 0 36px rgba(21, 89, 73, 0.08);
}

.reader-mushaf-leaf.mushaf-design-emerald::before {
  inset: 12px;
  border: 2px double rgba(173, 138, 58, 0.56);
  border-radius: 10px;
  box-shadow:
    inset 0 0 0 5px rgba(21, 89, 73, 0.045),
    inset 0 0 32px rgba(173, 138, 58, 0.12);
}

.reader-mushaf-leaf.mushaf-design-emerald .mushaf-topline,
.reader-mushaf-leaf.mushaf-design-emerald .mushaf-footer {
  color: rgba(25, 87, 75, 0.88);
}

.reader-mushaf-leaf.mushaf-design-emerald .mushaf-page-badge,
.reader-mushaf-leaf.mushaf-design-emerald .end,
.reader-mushaf-leaf.mushaf-design-emerald .ayah-number,
.reader-mushaf-leaf.mushaf-design-emerald .mushaf-end {
  border-color: rgba(173, 138, 58, 0.68);
  color: #155949;
  background: rgba(255, 248, 224, 0.94);
  box-shadow: inset 0 0 0 1px rgba(21, 89, 73, 0.08);
}

.reader-mushaf-leaf.mushaf-design-emerald .mushaf-footer span {
  color: #155949;
  background: rgba(214, 178, 82, 0.2);
}

.reader-mushaf-leaf.mushaf-design-emerald .mushaf-surah-title {
  color: #f7ecd0;
  border-color: rgba(214, 178, 82, 0.4);
  background: linear-gradient(180deg, #1c6756, #12483f);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 10px 22px rgba(18, 72, 63, 0.18);
}

.reader-mushaf-leaf.mushaf-design-emerald .mushaf-layout,
.reader-mushaf-leaf.mushaf-design-emerald .mushaf-line,
.reader-mushaf-leaf.mushaf-design-emerald .qcf-layout {
  color: #121912;
}

.reader-mushaf-leaf.mushaf-design-parchment {
  width: min(calc(100vw - 30px), 900px);
  border: 1px solid rgba(119, 82, 39, 0.58);
  border-radius: 10px;
  color: #241b12;
  background:
    linear-gradient(90deg, rgba(107, 72, 30, 0.14), transparent 7%, transparent 93%, rgba(107, 72, 30, 0.14)),
    radial-gradient(circle at 50% 8%, rgba(255, 246, 222, 0.96), transparent 44%),
    linear-gradient(180deg, rgba(250, 239, 210, 0.995), rgba(230, 211, 165, 0.995)),
    #efe0b6;
  box-shadow:
    0 18px 44px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 250, 232, 0.72),
    inset 0 0 54px rgba(107, 72, 30, 0.12);
}

.reader-mushaf-leaf.mushaf-design-parchment::before {
  inset: 12px;
  border: 1px solid rgba(107, 72, 30, 0.42);
  border-radius: 8px;
  box-shadow:
    inset 0 0 0 3px rgba(255, 248, 224, 0.36),
    inset 0 0 0 8px rgba(122, 83, 35, 0.055),
    inset 0 0 36px rgba(107, 72, 30, 0.12);
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-topline,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-footer {
  color: rgba(83, 63, 38, 0.88);
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-page-badge,
.reader-mushaf-leaf.mushaf-design-parchment .end,
.reader-mushaf-leaf.mushaf-design-parchment .ayah-number,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end {
  border-color: rgba(118, 97, 52, 0.58);
  color: #285b4a;
  background: rgba(255, 246, 219, 0.9);
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number {
  position: relative;
  isolation: isolate;
  inline-size: 1.46em;
  block-size: 1.46em;
  min-inline-size: 25px;
  min-block-size: 25px;
  margin-inline: 0.2em;
  border: 0;
  border-radius: 0;
  color: #255746;
  background: transparent;
  box-shadow: none;
  transform: none;
  vertical-align: -0.13em;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number::before {
  content: "";
  position: absolute;
  inset: 0.09em;
  z-index: -1;
  border: 1px solid rgba(118, 97, 52, 0.72);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 250, 231, 0.96) 0 39%, rgba(226, 203, 147, 0.9) 40% 100%);
  box-shadow:
    0 0 0 1px rgba(255, 250, 231, 0.5),
    inset 0 0 0 1px rgba(93, 64, 30, 0.08);
  transform: rotate(45deg);
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number:hover {
  color: #123e31;
  background: transparent;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number:hover::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 251, 235, 1) 0 39%, rgba(216, 184, 105, 0.96) 40% 100%);
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number .ayah-end-number {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  line-height: 1;
  text-align: center;
  transform: translateY(-0.015em);
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number,
.reader-mushaf-leaf.mushaf-design-calm .mushaf-end.ayah-action-number,
.reader-mushaf-leaf.mushaf-design-emerald .mushaf-end.ayah-action-number,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  inline-size: 1.42em;
  block-size: 1.42em;
  min-inline-size: 25px;
  min-block-size: 25px;
  margin-inline: 0.16em;
  border: 1.5px solid rgba(116, 95, 48, 0.74);
  border-radius: 50%;
  padding: 0;
  color: #245444;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 252, 236, 0.98) 0 43%, rgba(228, 204, 144, 0.95) 44% 100%);
  box-shadow:
    0 0 0 1px rgba(255, 249, 226, 0.62),
    inset 0 0 0 2px rgba(255, 255, 255, 0.28),
    inset 0 0 0 4px rgba(116, 95, 48, 0.055);
  font-family: "Amiri Quran", "Scheherazade New", Arial, sans-serif;
  font-size: 0.48em;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-shadow: none;
  transform: translateY(-0.22em);
  vertical-align: 0.12em;
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number.ayah-digits-2,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number.ayah-digits-2 {
  inline-size: 1.58em;
  min-inline-size: 29px;
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number.ayah-digits-3,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number.ayah-digits-3 {
  inline-size: 1.82em;
  min-inline-size: 36px;
  border-radius: 999px;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number::before {
  content: none;
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number:hover,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number:hover {
  color: #173f36;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 254, 240, 1) 0 43%, rgba(220, 184, 101, 0.98) 44% 100%);
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number .ayah-end-number,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number .ayah-end-number {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  line-height: 1;
  text-align: center;
  transform: translateY(0.01em);
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number,
.reader-mushaf-leaf.mushaf-design-calm .mushaf-end.ayah-action-number,
.reader-mushaf-leaf.mushaf-design-emerald .mushaf-end.ayah-action-number,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number {
  inline-size: 1.34em;
  block-size: 1.34em;
  min-inline-size: 24px;
  min-block-size: 24px;
  margin-inline: 0.14em;
  border: 0;
  border-radius: 0;
  color: #184937;
  background: transparent;
  box-shadow: none;
  font-size: 0.47em;
  transform: translateY(-0.16em);
  vertical-align: 0.06em;
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number::before,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number::before {
  content: "";
  position: absolute;
  inset: 0.1em;
  z-index: -1;
  border: 1px solid rgba(110, 87, 42, 0.72);
  border-radius: 7px;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 253, 236, 0.98) 0 42%, rgba(222, 196, 130, 0.95) 43% 100%);
  box-shadow:
    0 0 0 1px rgba(255, 248, 225, 0.55),
    inset 0 0 0 1px rgba(112, 79, 35, 0.08);
  transform: rotate(45deg);
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number.ayah-digits-2,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number.ayah-digits-2 {
  inline-size: 1.5em;
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number.ayah-digits-3,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number.ayah-digits-3 {
  inline-size: 1.72em;
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number .ayah-end-number,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number .ayah-end-number {
  transform: translateY(-0.015em);
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number,
.reader-mushaf-leaf.mushaf-design-calm .mushaf-end.ayah-action-number,
.reader-mushaf-leaf.mushaf-design-emerald .mushaf-end.ayah-action-number,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number {
  --ayah-marker-width: 1.62em;
  --ayah-marker-height: 1.62em;
  position: relative;
  isolation: isolate;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: var(--ayah-marker-width);
  block-size: var(--ayah-marker-height);
  min-inline-size: 27px;
  min-block-size: 27px;
  margin-inline: 0.13em;
  padding: 0;
  border: 1px solid rgba(119, 93, 43, 0.78);
  border-radius: 999px;
  box-sizing: border-box;
  color: #204f40;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 253, 239, 0.98) 0 38%, transparent 39%),
    radial-gradient(circle at 50% 50%, rgba(235, 211, 151, 0.98) 0 69%, rgba(167, 125, 54, 0.96) 70% 100%);
  box-shadow:
    0 0 0 1px rgba(255, 249, 225, 0.7),
    inset 0 0 0 2px rgba(255, 250, 231, 0.42),
    inset 0 0 0 5px rgba(108, 80, 36, 0.08),
    0 1px 3px rgba(78, 52, 19, 0.18);
  font-family: "Cairo", "Amiri Quran", "Scheherazade New", Arial, sans-serif;
  font-size: 0.52em;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255, 250, 230, 0.55);
  transform: none;
  vertical-align: middle;
  overflow: visible;
}

.reader-mushaf-leaf .mushaf-line .mushaf-end.ayah-action-number {
  align-self: center;
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number::before,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number::before {
  content: "";
  position: absolute;
  inset: 0.18em;
  z-index: 0;
  border: 1px solid rgba(113, 86, 38, 0.62);
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 252, 236, 0.95), rgba(231, 205, 140, 0.72));
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 231, 0.55),
    0 0 0 1px rgba(139, 105, 48, 0.12);
  transform: none;
  pointer-events: none;
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number.ayah-digits-2,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number.ayah-digits-2 {
  --ayah-marker-width: 1.88em;
  inline-size: var(--ayah-marker-width);
  min-inline-size: 32px;
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number.ayah-digits-3,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number.ayah-digits-3 {
  --ayah-marker-width: 2.22em;
  inline-size: var(--ayah-marker-width);
  min-inline-size: 39px;
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number .ayah-end-number,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number .ayah-end-number {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  padding: 0;
  margin: 0;
  line-height: 1;
  direction: rtl;
  unicode-bidi: isolate;
  transform: translateY(0);
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number:hover,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number:hover {
  color: #123e31;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 254, 242, 1) 0 38%, transparent 39%),
    radial-gradient(circle at 50% 50%, rgba(241, 219, 164, 1) 0 69%, rgba(188, 141, 58, 0.98) 70% 100%);
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number:focus-visible {
  outline: 2px solid rgba(32, 79, 64, 0.72);
  outline-offset: 0.12em;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-footer span {
  color: rgba(83, 63, 38, 0.88);
  background: rgba(107, 72, 30, 0.12);
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-surah-title {
  position: relative;
  min-height: 2.65em;
  margin-block: 0.18em 0.16em;
  color: #f7ecd0;
  border: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 248, 222, 0.2), transparent 62%);
  box-shadow: none;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-surah-title::before,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-surah-title::after {
  display: none;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-surah-title::before {
  inset-inline-start: 9%;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-surah-title::after {
  inset-inline-end: 9%;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-surah-title > span {
  min-width: min(76%, 460px);
  padding: 0.3em 1.9em 0.22em;
  border: 1px solid rgba(132, 92, 38, 0.68);
  border-radius: 999px;
  color: #6b451f;
  background:
    radial-gradient(circle at 50% 35%, rgba(255, 251, 234, 0.88), transparent 54%),
    linear-gradient(180deg, rgba(245, 224, 170, 0.92), rgba(218, 184, 103, 0.84));
  box-shadow:
    inset 0 0 0 1px rgba(255, 250, 230, 0.62),
    0 6px 18px rgba(107, 72, 30, 0.14);
  font-size: 0.92em;
  line-height: 1.12;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-surah-title small {
  display: block;
  margin-top: 0.18em;
  color: rgba(83, 63, 38, 0.78);
  font-family: "Cairo", system-ui, sans-serif;
  font-size: 0.34em;
  font-weight: 900;
  line-height: 1;
  text-align: center;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-layout,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-line,
.reader-mushaf-leaf.mushaf-design-parchment .qcf-layout {
  color: #1d1710;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-layout {
  inline-size: min(100%, 760px);
  margin-inline: auto;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-line:not(.mushaf-line-short) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: clamp(0.08em, 0.5vw, 0.22em);
  inline-size: 100%;
  max-inline-size: 100%;
  text-align: initial;
  text-align-last: auto;
  white-space: nowrap;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-line-balanced .mushaf-word {
  flex: 0 0 auto;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-line-balanced .mushaf-end.ayah-action-number {
  align-self: center;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-line-short {
  text-align: center;
  text-align-last: center;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-section-marker {
  position: absolute;
  inset-inline-start: auto;
  inset-inline-end: auto;
  left: -78px;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 72px;
  min-block-size: 58px;
  padding: 8px 7px;
  border: 0;
  border-radius: 0;
  color: #5b3d18;
  background: transparent;
  text-shadow: 0 1px 0 rgba(255, 248, 225, 0.55);
  font-family: "Cairo", system-ui, sans-serif;
  font-size: 0.29em;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  white-space: normal;
  transform: translateY(-50%);
  pointer-events: none;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-section-marker::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(50% 0, 78% 13%, 100% 50%, 78% 87%, 50% 100%, 22% 87%, 0 50%, 22% 13%);
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 252, 235, 0.92), transparent 54%),
    linear-gradient(180deg, rgba(231, 205, 139, 0.96), rgba(198, 154, 68, 0.92));
  box-shadow:
    0 0 0 1px rgba(112, 79, 35, 0.34),
    inset 0 0 0 3px rgba(255, 249, 225, 0.34),
    0 6px 18px rgba(83, 56, 20, 0.18);
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-section-marker-juz,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-section-marker-hizb {
  color: #f8eed4;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.38);
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-section-marker-juz::before,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-section-marker-hizb::before {
  background:
    radial-gradient(circle at 50% 36%, rgba(241, 220, 165, 0.24), transparent 54%),
    linear-gradient(180deg, #7b5528, #4d3014);
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-section-marker-rub,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-section-marker-half,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-section-marker-three-quarter {
  color: #245244;
}

.reader-mushaf-leaf.mushaf-design-parchment .mushaf-section-marker-rub::before,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-section-marker-half::before,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-section-marker-three-quarter::before {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 252, 235, 0.92), transparent 54%),
    linear-gradient(180deg, rgba(230, 207, 145, 0.96), rgba(196, 163, 84, 0.94));
}

.mushaf-style-modern::before {
  border-width: 2px;
  border-radius: 16px;
}

.reader-night .quran-page,
.reader-night .reader-side-page,
.quran-night {
  background:
    radial-gradient(circle at 50% 0, rgba(255, 255, 255, 0.06), transparent 36%),
    linear-gradient(180deg, #171918, #101211);
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.75);
}

.reader-night .mushaf-page::before {
  border-color: rgba(0, 0, 0, 0.75);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.quran-reader-bottom-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0;
  padding: 0 clamp(22px, 6vw, 58px);
}

.reader-round-button {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  color: rgba(255, 248, 231, 0.92);
  border: 1px solid rgba(241, 220, 165, 0.22);
  background:
    radial-gradient(circle at 50% 0, rgba(241, 220, 165, 0.12), transparent 58%),
    rgba(0, 0, 0, 0.36);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 231, 0.08),
    0 10px 18px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
  pointer-events: auto;
}

.moon-toggle::before {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: currentColor;
}

.moon-toggle::after {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  transform: translateX(-8px);
  background: #18270d;
}

.reader-night .moon-toggle {
  color: #060606;
  background: rgba(255, 255, 255, 0.82);
}

.reader-night .moon-toggle::after {
  background: rgba(255, 255, 255, 0.82);
}

.bookmark-toggle::before {
  inset: 50% auto auto 50%;
  width: 24px;
  height: 32px;
  border: 0;
  border-radius: 5px 5px 2px 2px;
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%);
  transform: translate(-50%, -50%);
}

.bookmark-toggle::after {
  display: none;
}

.reader-page-info {
  display: grid;
  place-items: center;
  gap: 4px;
  color: rgba(241, 220, 165, 0.96);
  font-family: "Amiri Quran", "Scheherazade New", serif;
  font-size: clamp(1.7rem, 5vw, 2.55rem);
}

.reader-page-info span {
  font-family: "Cairo", sans-serif;
  color: rgba(255, 248, 231, 0.68);
  font-size: 0.9rem;
}

.quran-page-dots {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 13px;
  margin-block: 8px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc(50% - 36px);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  direction: rtl;
}

.quran-page-dots::-webkit-scrollbar {
  display: none;
}

.page-wheel-item {
  flex: 0 0 42px;
  inline-size: 42px;
  block-size: 42px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 9px;
  transform: rotate(45deg);
  scroll-snap-align: center;
  color: rgba(5, 36, 29, 0.78);
  background: rgba(241, 220, 165, 0.82);
  box-shadow:
    5px 5px 0 rgba(98, 76, 34, 0.54),
    inset 0 0 0 1px rgba(255, 248, 231, 0.25);
  cursor: pointer;
  transition: flex-basis 0.18s ease, inline-size 0.18s ease, block-size 0.18s ease, transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
  opacity: 0.78;
}

.page-wheel-item .quran-page-number-text {
  display: grid;
  place-items: center;
  inline-size: 100%;
  block-size: 100%;
  transform: rotate(-45deg);
  font-family: "Cairo", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.page-wheel-item:hover,
.page-wheel-item:focus-visible {
  opacity: 1;
  outline: 0;
  box-shadow:
    5px 5px 0 rgba(98, 76, 34, 0.72),
    inset 0 0 0 2px rgba(255, 248, 231, 0.42);
}

.page-wheel-item.current {
  flex-basis: 72px;
  inline-size: 72px;
  block-size: 72px;
  color: #0b2d25;
  border: 4px solid rgba(255, 248, 231, 0.72);
  outline: 3px solid rgba(130, 98, 40, 0.86);
  background: linear-gradient(180deg, #f8f1df, #dcc476);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
  opacity: 1;
}

.page-wheel-item.current .quran-page-number-text {
  font-size: 1.75rem;
}

.quran-reader-utility {
  position: fixed;
  inset-inline: 0;
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 34;
  pointer-events: none;
  width: min(100%, 980px);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  padding-inline: 24px;
}

.reader-mini-button {
  pointer-events: auto;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}

.icon-index::before {
  width: 30px;
  height: 30px;
  background:
    radial-gradient(circle, currentColor 0 42%, transparent 45%) 0 0 / 14px 14px,
    radial-gradient(circle, currentColor 0 42%, transparent 45%) 16px 0 / 14px 14px,
    radial-gradient(circle, currentColor 0 42%, transparent 45%) 0 16px / 14px 14px,
    radial-gradient(circle, currentColor 0 42%, transparent 45%) 16px 16px / 14px 14px;
}

.icon-sync::before {
  width: 28px;
  height: 36px;
  border: 5px solid currentColor;
  border-inline-start-width: 2px;
  border-radius: 6px;
}

.icon-sync::after {
  width: 15px;
  height: 15px;
  border: 4px solid currentColor;
  border-radius: 50%;
  transform: translate(8px, 8px);
}

.quran-reader-audio {
  position: fixed;
  inset-inline: 14px;
  bottom: 112px;
  z-index: 36;
  width: min(calc(100% - 28px), 620px);
  margin-inline: auto;
  opacity: 0.92;
}

.quran-index-screen {
  background: transparent;
  font-family: "Cairo", "Avenir Next", "Segoe UI", Tahoma, Arial, sans-serif;
  padding-top: max(12px, env(safe-area-inset-top, 0px));
  padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

.quran-index-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(88px, 24vw, 132px);
  align-items: center;
  gap: clamp(14px, 4vw, 26px);
  width: min(calc(100% - 28px), 760px);
  margin: 0 auto 14px;
  padding: clamp(18px, 4.6vw, 28px);
  border: 1px solid rgba(217, 182, 103, 0.28);
  border-radius: 28px;
  background:
    radial-gradient(circle at 18% 14%, rgba(217, 182, 103, 0.2), transparent 34%),
    linear-gradient(135deg, rgba(28, 70, 52, 0.88), rgba(4, 33, 25, 0.94));
  box-shadow:
    0 18px 42px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 248, 231, 0.08);
}

.quran-index-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.12;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 0 32px, rgba(217, 182, 103, 0.2) 32px 34px, transparent 34px 72px),
    var(--islamic-pattern);
  background-size: 96px 52px, 132px 132px;
}

.quran-hero-copy,
.quran-book-cover {
  position: relative;
  z-index: 1;
}

.quran-hero-kicker {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  padding: 5px 10px;
  border: 1px solid rgba(217, 182, 103, 0.28);
  border-radius: 999px;
  color: var(--gold-soft);
  background: rgba(0, 0, 0, 0.12);
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1.35;
}

.quran-book-cover {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  aspect-ratio: 0.76;
  display: grid;
  place-items: center;
  justify-self: end;
  border: 2px solid rgba(217, 182, 103, 0.74);
  border-inline-start-width: 8px;
  border-radius: 11px 20px 20px 11px;
  color: var(--gold-soft);
  background:
    radial-gradient(circle at 50% 24%, rgba(217, 182, 103, 0.2), transparent 34%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent 20%),
    linear-gradient(145deg, #123c2d, #061d16);
  font-family: "Cairo", "Avenir Next", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: clamp(1rem, 3.6vw, 1.25rem);
  font-weight: 900;
  line-height: 1.75;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    9px 9px 0 rgba(0, 0, 0, 0.18),
    inset 0 0 0 5px rgba(255, 248, 231, 0.05);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.quran-book-cover:hover,
.quran-book-cover:focus-visible {
  border-color: rgba(247, 219, 135, 0.94);
  box-shadow:
    7px 7px 0 rgba(0, 0, 0, 0.2),
    0 0 0 3px rgba(247, 219, 135, 0.16),
    inset 0 0 0 5px rgba(255, 248, 231, 0.07);
  outline: none;
  transform: translateY(-1px);
}

.quran-book-cover:active {
  transform: translateY(1px);
}

.quran-index-hero h2 {
  margin: 0 0 8px;
  color: #fff;
  font-family: "Cairo", "Avenir Next", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: clamp(2rem, 7.4vw, 3.2rem);
  font-weight: 900;
  line-height: 1.12;
}

.quran-index-hero p,
.quran-source-note {
  margin: 0;
  color: rgba(255, 255, 255, 0.68);
}

.quran-index-hero p {
  font-weight: 800;
}

.quran-hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}

.quran-hero-stats span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(217, 182, 103, 0.25);
  border-radius: 999px;
  padding: 5px 10px;
  color: rgba(255, 248, 231, 0.88);
  background: rgba(255, 255, 255, 0.07);
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1.3;
}

.quran-index-menu,
.quran-quick-jump {
  width: min(calc(100% - 28px), 760px);
  margin-inline: auto;
}

.quran-index-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
  overflow-x: visible;
  margin-top: 0;
  margin-bottom: 12px;
  padding: 8px;
  border: 1px solid rgba(217, 182, 103, 0.2);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(12, 65, 49, 0.86), rgba(4, 29, 22, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 231, 0.06),
    0 10px 22px rgba(0, 0, 0, 0.16);
}

.quran-menu-divider {
  flex: 0 0 1px;
  align-self: stretch;
  min-height: 34px;
  margin-inline: 2px;
  background: rgba(241, 220, 165, 0.22);
}

.reader-pill,
.quran-menu-item {
  flex: 0 0 auto;
  min-height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 15px;
  padding: 8px 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  font-weight: 800;
}

.quran-index-menu .quran-menu-item {
  flex: 1 1 auto;
  justify-content: center;
}

.primary-reader-pill,
.quran-menu-primary,
.quran-tab.active {
  color: #15210d;
  background: #d1bd72;
  border-color: rgba(241, 220, 165, 0.65);
  box-shadow: inset 0 1px 0 rgba(255, 248, 231, 0.24);
}

.quran-search-band {
  width: min(calc(100% - 28px), 760px);
  margin: 4px auto 12px;
}

.quran-index-search {
  width: 100%;
  min-height: 52px;
  border: 1px solid rgba(209, 189, 114, 0.52);
  border-radius: 18px;
  padding: 10px 16px;
  color: #1f1e16;
  background: #f5efd9;
  font: inherit;
}

.quran-quick-jump {
  display: grid;
  grid-template-columns: 1.35fr 0.8fr 0.8fr auto;
  gap: 8px;
  margin-bottom: 12px;
}

.quran-index-panel {
  width: min(calc(100% - 0px), 860px);
  margin: 0 auto;
  overflow: visible;
  border-radius: 0;
  color: #111;
  background: transparent;
}

.quran-index-title {
  position: sticky;
  top: 108px;
  z-index: 46;
  min-height: 58px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #9e9461;
  font-family: "Cairo", "Avenir Next", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: clamp(1.3rem, 5vw, 2rem);
  font-weight: 900;
  border-radius: 0;
  box-shadow: 0 12px 18px rgba(10, 13, 8, 0.14);
}

.quran-surah-table {
  overflow: clip;
  background: #f3eedc;
  border-radius: 0;
}

.quran-surah-table-head {
  position: sticky;
  top: 166px;
  z-index: 44;
  min-height: 42px;
  display: grid;
  grid-template-columns: 58px minmax(160px, 1fr) 92px 128px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid rgba(60, 53, 34, 0.18);
  color: rgba(36, 38, 37, 0.54);
  background: #ebe4cf;
  font-size: 0.92rem;
  font-weight: 900;
}

.quran-surah-row {
  width: 100%;
  min-height: 92px;
  display: grid;
  grid-template-columns: 58px minmax(160px, 1fr) 92px 128px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border: 0;
  border-bottom: 1px solid rgba(60, 53, 34, 0.16);
  color: #101010;
  background: #f3eedc;
  border-radius: 0;
  text-align: right;
  cursor: pointer;
}

.quran-surah-row:hover,
.quran-surah-row:focus-visible {
  background: #eee5cf;
  outline: 0;
}

.surah-number {
  font-size: 1.8rem;
}

.surah-name {
  font-family: "Amiri Quran", "Scheherazade New", serif;
  font-size: clamp(1.9rem, 6vw, 2.7rem);
}

.surah-meta,
.surah-page-meta {
  color: rgba(36, 38, 37, 0.48);
  font-size: 1rem;
}

.surah-page-meta {
  display: grid;
  text-align: left;
}

.surah-page-meta small {
  font-size: 0.82rem;
}

.quran-page-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: 1px;
  background: rgba(60, 53, 34, 0.16);
}

.quran-page-range-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  color: #101010;
  background: #f3eedc;
  border-bottom: 1px solid rgba(60, 53, 34, 0.16);
}

.quran-page-range-panel > div:first-child {
  display: grid;
  gap: 2px;
}

.quran-page-range-panel strong {
  font-size: 1.08rem;
  font-weight: 900;
}

.quran-page-range-panel span {
  color: rgba(36, 38, 37, 0.58);
  font-size: 0.88rem;
  font-weight: 800;
}

.quran-page-range-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.quran-page-range-actions .reader-pill {
  min-height: 38px;
  padding: 7px 12px;
  color: #fdf8e8;
  background: #183f32;
  border-color: rgba(24, 63, 50, 0.28);
}

.quran-page-range-actions .reader-pill:disabled {
  opacity: 0.42;
}

.quran-page-range-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 12px;
  background: #ebe4cf;
  scrollbar-width: thin;
}

.quran-page-range-chip {
  flex: 0 0 auto;
  min-height: 36px;
  border: 1px solid rgba(60, 53, 34, 0.15);
  border-radius: 999px;
  padding: 6px 12px;
  color: rgba(16, 16, 16, 0.68);
  background: rgba(255, 255, 255, 0.48);
  font-weight: 900;
}

.quran-page-range-chip.active {
  color: #112f25;
  background: var(--gold);
  border-color: rgba(60, 53, 34, 0.12);
}

.quran-page-index-grid-limited {
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
}

.quran-page-cell {
  min-height: 84px;
  display: grid;
  place-items: center;
  gap: 2px;
  border: 0;
  color: #101010;
  background: #f3eedc;
}

.quran-page-cell strong {
  font-size: 1.5rem;
}

.quran-page-cell span {
  color: rgba(36, 38, 37, 0.54);
  font-size: 0.78rem;
}

.quran-search-result-row {
  display: grid;
  gap: 8px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(60, 53, 34, 0.16);
  padding: 16px;
  color: #101010;
  background: transparent;
  text-align: right;
}

.quran-empty-note,
.quran-source-note {
  width: min(calc(100% - 28px), 760px);
  margin: 14px auto;
  text-align: center;
}

.quran-source-panel {
  width: min(calc(100% - 28px), 760px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin: 0 auto 14px;
  padding: 14px 16px;
  border: 1px solid rgba(217, 182, 103, 0.24);
  border-radius: 18px;
  color: rgba(255, 248, 231, 0.9);
  background:
    linear-gradient(135deg, rgba(11, 67, 49, 0.84), rgba(4, 29, 22, 0.84));
}

.quran-source-panel span {
  color: rgba(255, 248, 231, 0.62);
  font-size: 0.9rem;
}

.quran-source-panel strong {
  display: block;
  margin-block: 2px;
  color: var(--gold-soft);
  font-size: 1.08rem;
}

.quran-source-panel p {
  margin: 0;
  color: rgba(255, 248, 231, 0.72);
  font-size: 0.92rem;
  line-height: 1.7;
}

.reader-dialog-host[hidden] {
  display: none;
}

.reader-dialog-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(0, 0, 0, 0.72);
}

.reader-dialog {
  position: fixed;
  inset: 50% auto auto 50%;
  z-index: 81;
  width: min(calc(100% - 56px), 560px);
  max-height: min(86dvh, 720px);
  overflow-y: auto;
  transform: translate(-50%, -50%);
  border-radius: 22px;
  color: #0d0d0d;
  background: #f3eedc;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
}

.reader-dialog-title {
  min-height: 72px;
  display: grid;
  place-items: center;
  color: #fff;
  background: #8e8147;
  font-size: clamp(1.4rem, 5vw, 2rem);
  font-weight: 900;
}

.reader-form-label {
  display: grid;
  gap: 10px;
  padding: 18px 28px 0;
  color: #0d0d0d;
  font-size: 1.25rem;
  font-weight: 900;
}

.reader-text-input {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 12px;
  padding: 10px 18px;
  color: #111;
  background: #fff;
  font: inherit;
}

.mushaf-theme-picker {
  display: flex;
  gap: 18px;
  justify-content: center;
  padding: 16px 28px;
}

.theme-dot {
  width: 58px;
  height: 58px;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.theme-dot.active::after {
  content: "";
  display: block;
  width: 18px;
  height: 28px;
  margin: 10px auto 0;
  border: solid #fff;
  border-width: 0 7px 7px 0;
  transform: rotate(45deg);
}

.theme-teal { background: #003f3c; }
.theme-burgundy { background: #4a0004; }
.theme-navy { background: #16243b; }
.theme-brown { background: #312111; }
.theme-olive { background: #1d3211; }

.reader-background-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 12px 28px 4px;
}

.reader-background-option {
  display: grid;
  gap: 8px;
  min-height: 108px;
  border: 2px solid rgba(19, 61, 52, 0.12);
  border-radius: 16px;
  padding: 8px;
  color: #163d34;
  background: rgba(255, 255, 255, 0.6);
  font-weight: 900;
  text-align: center;
}

.reader-background-option.active {
  border-color: #b4943c;
  box-shadow:
    0 0 0 3px rgba(180, 148, 60, 0.16),
    0 8px 18px rgba(0, 0, 0, 0.12);
}

.reader-background-preview {
  min-height: 64px;
  border-radius: 12px;
  background-image:
    var(--preview-bg, var(--quran-geometry-pattern)),
    conic-gradient(from 45deg at 50% 50%, rgba(225, 194, 118, 0.16) 0 12.5%, transparent 12.5% 37.5%, rgba(225, 194, 118, 0.13) 37.5% 50%, transparent 50% 87.5%, rgba(225, 194, 118, 0.16) 87.5% 100%),
    linear-gradient(135deg, rgba(11, 67, 49, 0.94), rgba(4, 29, 22, 0.96));
  background-size: var(--preview-size, 80px 80px), 64px 64px, auto;
  background-position: var(--preview-position, center), center, center;
  background-repeat: var(--preview-repeat, repeat), repeat, no-repeat;
  box-shadow: inset 0 0 0 1px rgba(19, 61, 52, 0.12);
}

.reader-background-option strong {
  font-size: 0.86rem;
  line-height: 1.35;
}

.reader-range-label {
  padding-top: 12px;
}

.reader-segment {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 12px 28px 22px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(17, 17, 17, 0.08);
}

.reader-segment button {
  min-height: 56px;
  border: 0;
  border-radius: 12px;
  color: #111;
  background: transparent;
  font-weight: 900;
}

.reader-segment button.active {
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.reader-offline-panel {
  display: grid;
  gap: 10px;
  margin: 0 28px 22px;
  padding: 16px;
  border: 1px solid rgba(22, 61, 52, 0.14);
  border-radius: 16px;
  color: #163d34;
  background:
    radial-gradient(circle at 100% 0, rgba(217, 182, 103, 0.22), transparent 38%),
    rgba(255, 255, 255, 0.72);
}

.reader-offline-panel strong {
  color: #102d27;
  font-size: 1.02rem;
  font-weight: 900;
}

.reader-offline-panel p {
  margin: 0;
  color: rgba(17, 17, 17, 0.66);
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.65;
}

.reader-offline-button {
  min-height: 48px;
  border: 0;
  border-radius: 999px;
  color: #102d27;
  background: linear-gradient(180deg, #efd486, #d6ad4f);
  font: inherit;
  font-weight: 900;
}

.reader-offline-button:disabled {
  opacity: 0.62;
}

.reader-offline-status {
  color: rgba(22, 61, 52, 0.78) !important;
}

.reader-save-button,
.reader-danger-button {
  width: calc(100% - 56px);
  min-height: 62px;
  margin: 18px 28px 28px;
  border: 0;
  border-radius: 16px;
  color: #fff;
  background: #7ec6bd;
  font-size: 1.2rem;
  font-weight: 900;
}

.reader-danger-button {
  background: #f51d1d;
}

.reader-qr {
  width: min(62vw, 300px);
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 48px auto 24px;
  padding: 12px;
  background: #fff;
}

.reader-qr span {
  background: #fff;
}

.reader-qr span.on {
  background: #000;
}

.reader-dialog-note {
  padding-inline: 28px;
  color: rgba(17, 17, 17, 0.62);
  text-align: center;
  font-weight: 800;
}

.reader-verse-tools {
  bottom: 118px;
  pointer-events: none;
}

.ayah-reader-popover {
  position: fixed;
  top: var(--ayah-popover-top, clamp(90px, calc(var(--ayah-popover-y, 50vh) + 18px), calc(100dvh - 290px)));
  left: var(--ayah-popover-left, 50%);
  z-index: 70;
  width: min(360px, calc(100vw - 20px));
  max-height: calc(100dvh - 20px);
  display: grid;
  justify-items: stretch;
  gap: 8px;
  transform: translate(calc(-50% + var(--ayah-popover-shift-x, 0px)), var(--ayah-popover-shift-y, 0px));
  pointer-events: none;
}

.ayah-reader-popover.ayah-mode-tafsir {
  top: var(--ayah-popover-top-inset, 12px) !important;
  bottom: auto !important;
  width: min(520px, calc(100vw - 24px));
  height: var(--ayah-popover-max-height, calc(100dvh - var(--ayah-popover-top-inset, 12px) - var(--ayah-popover-bottom-inset, 12px)));
  max-height: var(--ayah-popover-max-height, calc(100dvh - var(--ayah-popover-top-inset, 12px) - var(--ayah-popover-bottom-inset, 12px)));
  grid-template-rows: auto minmax(0, 1fr);
  transform: translateX(-50%);
  pointer-events: auto;
  touch-action: pan-y;
}

.ayah-popover-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-self: center;
  gap: 6px;
  width: min(216px, calc(100vw - 20px));
  min-height: 60px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 13px;
  background: rgba(143, 190, 127, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 11px 27px rgba(0, 0, 0, 0.28);
  pointer-events: auto;
}

.ayah-popover-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1.2px solid rgba(255, 255, 255, 0.52);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(78, 129, 77, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.ayah-popover-button::before,
.ayah-popover-button::after {
  display: none;
  content: none;
}

.ayah-popover-svg {
  display: block;
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ayah-popover-svg-fill {
  width: 21px;
  height: 21px;
  fill: currentColor;
  stroke: none;
  transform: translateX(1px);
}

.icon-play::before {
  width: 0;
  height: 0;
  border-block: 10px solid transparent;
  border-inline-start: 16px solid currentColor;
  transform: translateX(3px);
}

.icon-doc::before {
  width: 17px;
  height: 21px;
  border: 3px solid currentColor;
  border-radius: 3px;
  background:
    linear-gradient(currentColor 0 0) 4px 6px / 7px 2px no-repeat,
    linear-gradient(currentColor 0 0) 4px 12px / 8px 2px no-repeat;
}

.icon-doc::after {
  width: 8px;
  height: 8px;
  border-inline-start: 3px solid currentColor;
  border-block-end: 3px solid currentColor;
  transform: translate(7px, -10px);
}

.icon-bookmark::before {
  width: 17px;
  height: 24px;
  border: 3px solid currentColor;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 73%, 0 100%);
}

.icon-share::before {
  width: 7px;
  height: 7px;
  border: 3px solid currentColor;
  border-radius: 50%;
  box-shadow: 15px -11px 0 -1px currentColor, 15px 11px 0 -1px currentColor;
  transform: translateX(-8px);
}

.icon-share::after {
  width: 20px;
  height: 20px;
  border-block: 3px solid currentColor;
  transform: translateX(4px) skewY(-35deg);
}

.icon-copy::before {
  width: 19px;
  height: 22px;
  border: 3px solid currentColor;
  border-radius: 4px;
  transform: translate(4px, -4px);
}

.icon-copy::after {
  width: 19px;
  height: 22px;
  border: 3px solid currentColor;
  border-radius: 4px;
  transform: translate(-4px, 4px);
}

.icon-close::before,
.icon-close::after {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

.icon-close::before {
  transform: rotate(45deg);
}

.icon-close::after {
  transform: rotate(-45deg);
}

.ayah-popover-details {
  width: 100%;
  max-height: var(--ayah-popover-details-max-height, min(48dvh, 420px));
  padding: 10px;
  border: 1px solid rgba(217, 182, 103, 0.22);
  border-radius: 16px;
  color: var(--ivory);
  background: rgba(3, 31, 23, 0.9);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  pointer-events: auto;
}

.ayah-reader-popover.ayah-mode-tafsir .ayah-popover-details {
  min-height: 0;
  height: 100%;
  max-height: var(--ayah-popover-details-max-height, 70dvh) !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y !important;
}

.ayah-reader-popover.ayah-mode-tafsir .tafsir-text {
  min-height: 0;
  padding-bottom: 28px;
  overflow: visible;
}

.ayah-compact-audio {
  width: min(100%, 260px);
  height: 32px;
  min-height: 32px;
  justify-self: end;
  margin-top: 8px;
  accent-color: var(--gold);
}

.ayah-hidden-audio {
  display: none;
}

.reader-panel {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.reader-panel label {
  display: grid;
  gap: 6px;
  color: var(--gold-soft);
  font-weight: 800;
}

.reciter-picker {
  position: relative;
  display: grid;
  justify-items: end;
  gap: 8px;
}

.reciter-label {
  justify-self: end;
  color: var(--gold-soft);
  font-weight: 900;
}

.reciter-trigger {
  width: min(100%, 430px);
  min-height: 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(217, 182, 103, 0.48);
  border-radius: 999px;
  padding: 9px 14px;
  color: var(--ivory);
  background: rgba(255, 255, 255, 0.065);
  text-align: right;
}

.reciter-trigger[aria-expanded="true"] {
  border-color: rgba(217, 182, 103, 0.86);
  box-shadow: 0 0 0 3px rgba(217, 182, 103, 0.14);
}

.reciter-trigger span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reciter-chevron {
  color: var(--gold-soft);
  font-size: 1.1rem;
  line-height: 1;
}

.reciter-menu {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 8px);
  z-index: 60;
  width: min(100%, 430px);
  max-height: 238px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(217, 182, 103, 0.46);
  border-radius: 18px;
  background: rgba(5, 31, 23, 0.98);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
}

.reciter-menu[hidden] {
  display: none;
}

.reciter-option {
  min-height: 48px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(217, 182, 103, 0.16);
  border-radius: 13px;
  padding: 8px 10px;
  color: var(--ivory);
  background: rgba(255, 255, 255, 0.045);
  text-align: right;
}

.reciter-option strong {
  color: var(--ivory);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reciter-option span {
  color: var(--muted);
  font-size: 0.82rem;
}

.reciter-option.active {
  border-color: rgba(217, 182, 103, 0.78);
  color: #09261d;
  background: linear-gradient(135deg, var(--gold), #f5d88d);
}

.reciter-option.active strong,
.reciter-option.active span {
  color: #09261d;
}

.quran-audio {
  width: 100%;
  min-height: 42px;
  accent-color: var(--gold);
}

.quran-reader-audio.quran-audio {
  width: min(calc(100% - 28px), 620px);
  max-width: 620px;
}

.verse-tools {
  position: fixed;
  inset-inline: 12px;
  bottom: 86px;
  z-index: 45;
  display: grid;
  max-width: 760px;
  max-height: min(58dvh, 520px);
  margin-inline: auto;
  overflow-y: auto;
  gap: 8px;
}

.quran-page-reader .reader-verse-tools {
  inset: 0;
  bottom: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  overflow: visible;
  pointer-events: none;
}

.quran-page-reader .quran-reader-audio {
  display: none;
}

.ayah-action-sheet {
  max-width: 640px;
  justify-self: center;
  width: 100%;
  backdrop-filter: blur(18px);
}

.selected-verse-card p {
  margin: 8px 0;
  color: rgba(255, 248, 231, 0.9);
  line-height: 1.9;
}

.sheet-close {
  position: absolute;
  inset-inline-start: 12px;
  top: 10px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(217, 182, 103, 0.28);
  border-radius: 50%;
  color: var(--gold-soft);
  background: rgba(255, 255, 255, 0.06);
  font-size: 1.45rem;
  line-height: 1;
}

.tafsir-text {
  margin-top: 12px;
  padding: 13px 14px 16px;
  border-radius: 12px;
  color: rgba(255, 248, 231, 0.92);
  background: rgba(2, 25, 19, 0.44);
  font-size: clamp(0.98rem, 0.94rem + 0.16vw, 1.08rem);
  line-height: 2.05;
  text-align: start;
  overflow-wrap: anywhere;
}

.tafsir-text p {
  margin: 0;
}

.tafsir-text p + p {
  margin-top: 0.9em;
  padding-top: 0.9em;
  border-top: 1px solid rgba(217, 182, 103, 0.14);
}

.tafsir-text .green,
.tafsir-text .blue {
  color: var(--gold-soft);
  font-weight: 800;
}

.quran-result {
  margin-top: 8px;
  color: rgba(255, 248, 231, 0.9);
  line-height: 1.9;
}

tajweed {
  display: inline;
  font-weight: inherit;
}

tajweed.ham_wasl,
tajweed.laam_shamsiyah,
tajweed.custom-alef-maksora,
tajweed[class*="ham_wasl"],
tajweed[class*="laam_shamsiyah"] {
  color: #16834f;
}

tajweed.madda_normal,
tajweed.madda_permissible,
tajweed.madda_necessary,
tajweed.madda_obligatory,
tajweed[class*="madda"] {
  color: #d48600;
}

tajweed.ikhafa,
tajweed.ikhafa_shafawi,
tajweed.iqlab,
tajweed[class*="ikhafa"],
tajweed[class*="iqlab"] {
  color: #009c9a;
}

tajweed.idgham_ghunnah,
tajweed.idgham_wo_ghunnah,
tajweed.idgham_shafawi,
tajweed.ghunnah,
tajweed[class*="idgham"],
tajweed[class*="ghunnah"] {
  color: #aa2b91;
}

tajweed.qalqala,
tajweed.qalaqah,
tajweed[class*="qal"],
tajweed[class*="qlaq"] {
  color: #d9382d;
}

tajweed.slnt,
tajweed[class*="slnt"] {
  color: #4b76b5;
}

tajweed.tafkheem,
tajweed[class*="tafkh"],
tajweed[class*="tfkh"] {
  color: #7a3dc0;
}

tajweed.tarqeeq,
tajweed[class*="tarq"],
tajweed[class*="trq"] {
  color: #2c8f64;
}

.end {
  display: inline-grid;
  place-items: center;
  min-width: 1.65em;
  height: 1.65em;
  padding-inline: 0.15em;
  margin-inline: 6px 4px;
  border: 1px solid rgba(11, 67, 49, 0.5);
  border-radius: 50%;
  color: #0b4331;
  font-family: Arial, sans-serif;
  font-size: 0.54em;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
}

.ayah-number {
  display: inline-grid;
  place-items: center;
  inline-size: 1.55em;
  block-size: 1.55em;
  min-inline-size: 28px;
  min-block-size: 28px;
  margin-inline: 6px 4px;
  border: 1px solid rgba(11, 67, 49, 0.5);
  border-radius: 50%;
  font-size: 0.54em;
  font-weight: 800;
  line-height: 1;
  vertical-align: middle;
  transform: translateY(-0.08em);
  direction: ltr;
  unicode-bidi: isolate;
  font-family: Arial, sans-serif;
  text-align: center;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.045);
}

.chip.active {
  color: #09261d;
  background: var(--gold);
  font-weight: 900;
}

.prayer-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(217, 182, 103, 0.16);
}

.prayer-row:last-child {
  border-bottom: 0;
}

.prayer-date-card {
  text-align: center;
}

.location-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  color: #09261d;
  background: var(--gold);
  font-weight: 900;
}

.week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-top: 14px;
}

.week-strip span {
  display: grid;
  place-items: center;
  min-height: 58px;
  border: 1px solid rgba(217, 182, 103, 0.18);
  border-radius: 14px;
  color: var(--muted);
}

.week-strip span.active {
  color: #09261d;
  background: var(--gold);
  font-weight: 900;
}

.week-strip small {
  font-size: 0.72rem;
}

.enhanced-prayer-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
}

.prayer-icon {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border-radius: 50%;
  color: var(--gold-soft);
  background: rgba(255, 255, 255, 0.06);
  font-size: 0.78rem;
  font-weight: 900;
}

.prayer-icon::before,
.prayer-icon::after {
  content: "";
  grid-area: 1 / 1;
}

.prayer-icon-sun::before {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff1b4 0 32%, var(--gold) 34% 100%);
  box-shadow:
    0 -12px 0 -6px var(--gold-soft),
    0 12px 0 -6px var(--gold-soft),
    12px 0 0 -6px var(--gold-soft),
    -12px 0 0 -6px var(--gold-soft),
    8px 8px 0 -6px var(--gold-soft),
    -8px -8px 0 -6px var(--gold-soft),
    8px -8px 0 -6px var(--gold-soft),
    -8px 8px 0 -6px var(--gold-soft);
}

.prayer-icon-moon::before {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold-soft);
}

.prayer-icon-moon::after {
  width: 22px;
  height: 22px;
  transform: translateX(-6px);
  border-radius: 50%;
  background: #0b2f24;
}

.prayer-alert-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 92px;
  min-height: 48px;
  border: 1px solid rgba(217, 182, 103, 0.28);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--gold-soft);
  background: rgba(255, 255, 255, 0.055);
  cursor: pointer;
}

.prayer-alert-toggle.muted {
  color: rgba(255, 248, 231, 0.58);
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.035);
}

.prayer-bell {
  font-size: 1.05rem;
  line-height: 1;
}

.prayer-alert-toggle input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0.01;
  accent-color: var(--gold);
  cursor: pointer;
}

.monthly-card {
  text-align: center;
}

.monthly-table-card {
  overflow-x: auto;
}

.monthly-table {
  min-width: 620px;
  display: grid;
  gap: 4px;
}

.monthly-head,
.monthly-row {
  display: grid;
  grid-template-columns: 1.2fr repeat(5, 1fr);
  gap: 6px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(217, 182, 103, 0.12);
}

.monthly-head {
  color: var(--gold-soft);
  font-weight: 900;
}

.qibla-card {
  display: grid;
  gap: 18px;
  padding-block: clamp(20px, 4vw, 34px);
  overflow-x: clip;
}

.qibla-heading {
  max-width: 660px;
  margin-inline: auto;
  text-align: center;
}

.qibla-compass-shell {
  width: min(420px, 88vw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 4px auto 0;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 248, 231, 0.11) 0 38%, transparent 39%),
    conic-gradient(from 45deg, rgba(217, 182, 103, 0.22), transparent 12%, rgba(217, 182, 103, 0.2), transparent 25%, rgba(217, 182, 103, 0.2), transparent 38%, rgba(217, 182, 103, 0.2), transparent 50%, rgba(217, 182, 103, 0.2), transparent 63%, rgba(217, 182, 103, 0.2), transparent 76%, rgba(217, 182, 103, 0.22), transparent 100%);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.34),
    inset 0 0 0 1px rgba(217, 182, 103, 0.18);
}

.qibla-compass {
  position: relative;
  width: 88%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 2px solid rgba(217, 182, 103, 0.65);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 248, 231, 0.12) 0 7%, transparent 8%),
    radial-gradient(circle at 50% 50%, transparent 0 47%, rgba(217, 182, 103, 0.28) 47.5% 48.5%, transparent 49%),
    repeating-conic-gradient(from 0deg, rgba(217, 182, 103, 0.55) 0deg 1.2deg, transparent 1.2deg 9deg),
    conic-gradient(from 0deg, rgba(217, 182, 103, 0.18), rgba(255, 255, 255, 0.05), rgba(217, 182, 103, 0.18), rgba(255, 255, 255, 0.04), rgba(217, 182, 103, 0.18)),
    radial-gradient(circle, #103f31 0 24%, #082b21 61%, #031f17 100%);
  box-shadow:
    inset 0 0 0 10px rgba(255, 248, 231, 0.035),
    inset 0 0 48px rgba(0, 0, 0, 0.45);
}

.qibla-cardinal {
  position: absolute;
  z-index: 2;
  color: rgba(255, 248, 231, 0.82);
  font-size: 0.76rem;
  font-weight: 900;
}

.qibla-north { top: 14px; }
.qibla-south { bottom: 14px; }
.qibla-east { right: 16px; top: 50%; transform: translateY(-50%); }
.qibla-west { left: 16px; top: 50%; transform: translateY(-50%); }

.qibla-kaaba-marker {
  position: absolute;
  inset: 11%;
  z-index: 4;
  display: grid;
  justify-items: center;
  align-items: start;
  transform-origin: 50% 50%;
  transition: transform 0.35s ease;
  pointer-events: none;
}

.qibla-kaaba-marker::before {
  content: "";
  width: 0;
  height: 0;
  border-inline: 18px solid transparent;
  border-bottom: 76px solid var(--gold);
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.38));
}

.qibla-kaaba-marker::after {
  content: "";
  width: 6px;
  height: 42%;
  margin-top: -2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(217, 182, 103, 0.9), rgba(217, 182, 103, 0.12));
}

.qibla-kaaba-marker span {
  position: absolute;
  top: 58px;
  min-width: 74px;
  padding: 4px 10px;
  border: 1px solid rgba(217, 182, 103, 0.58);
  border-radius: 999px;
  color: #031f17;
  background: linear-gradient(135deg, var(--gold), #f5d88d);
  font-size: 0.72rem;
  font-weight: 900;
  transform: rotate(calc(-1 * var(--qibla-label-rotation, 0deg)));
}

.qibla-center {
  position: relative;
  z-index: 5;
  width: min(38%, 138px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  border: 1px solid rgba(217, 182, 103, 0.55);
  border-radius: 50%;
  color: var(--ivory);
  background:
    radial-gradient(circle at 50% 25%, rgba(255, 248, 231, 0.14), transparent 38%),
    linear-gradient(145deg, rgba(3, 31, 23, 0.94), rgba(6, 43, 32, 0.96));
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.34);
}

.qibla-kaaba-icon {
  width: 34px;
  height: 28px;
  display: block;
  border: 3px solid var(--gold);
  border-top-width: 8px;
  border-radius: 4px;
  background: #111;
  box-shadow: inset 0 -5px 0 rgba(217, 182, 103, 0.5);
}

.qibla-center strong {
  color: var(--gold-soft);
  font-size: clamp(1.2rem, 5vw, 2.1rem);
  line-height: 1;
}

.qibla-center small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.qibla-status-grid {
  width: min(100%, 620px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-inline: auto;
}

.qibla-status-grid div {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 14px;
  border: 1px solid rgba(217, 182, 103, 0.22);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.045);
  text-align: center;
}

.qibla-status-grid span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.qibla-status-grid strong {
  color: var(--gold-soft);
  font-size: 1.32rem;
  font-weight: 900;
}

.qibla-status-note {
  width: min(100%, 620px);
  margin-inline: auto;
  text-align: center;
}

.phone-permission-card {
  display: grid;
  gap: 14px;
}

.phone-permission-card.compact {
  margin-block: 12px;
}

.phone-permission-panel {
  width: min(100%, 620px);
  margin-inline: auto;
  padding: 14px;
  border: 1px solid rgba(217, 182, 103, 0.2);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(255, 248, 231, 0.07), rgba(255, 255, 255, 0.025));
}

.phone-permission-copy {
  display: grid;
  gap: 4px;
}

.phone-permission-copy h2 {
  margin: 0;
  color: var(--ivory);
  font-size: clamp(1.08rem, 3.6vw, 1.42rem);
}

.phone-permission-copy .muted {
  margin: 0;
}

.phone-permission-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(188px, 1fr));
  gap: 10px;
}

.phone-permission-status {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 3px;
  padding: 12px;
  border: 1px solid rgba(217, 182, 103, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

.phone-permission-status span,
.phone-permission-status small {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.phone-permission-status strong {
  color: var(--gold-soft);
  font-size: 1.02rem;
  font-weight: 900;
}

.phone-permission-status.permission-granted,
.phone-permission-status.permission-active {
  border-color: rgba(120, 210, 152, 0.45);
  background: rgba(45, 138, 86, 0.14);
}

.phone-permission-status.permission-denied,
.phone-permission-status.permission-unsupported {
  border-color: rgba(228, 112, 92, 0.42);
  background: rgba(145, 57, 41, 0.14);
}

.phone-permission-status.permission-default,
.phone-permission-status.permission-available {
  border-color: rgba(241, 220, 165, 0.34);
  background: rgba(217, 182, 103, 0.1);
}

.tasbeeh-card {
  display: grid;
  gap: 16px;
  text-align: center;
}

.tasbeeh-card .muted {
  max-width: 560px;
  margin-inline: auto;
}

.tasbeeh-current {
  color: var(--gold-soft);
  font-weight: 900;
}

.tasbeeh-count {
  margin: 4px 0 0;
  color: var(--gold-soft);
  font-size: clamp(4rem, 24vw, 7rem);
  line-height: 1;
  text-align: center;
  font-weight: 900;
}

.tasbeeh-button {
  width: 190px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  margin: 0 auto;
  border: 1px solid rgba(217, 182, 103, 0.68);
  border-radius: 50%;
  color: #09261d;
  background: linear-gradient(145deg, var(--gold), #f5d88d);
  font-size: 1.35rem;
  font-weight: 900;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22), inset 0 0 24px rgba(255, 255, 255, 0.22);
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.tasbeeh-button:active {
  transform: scale(0.97);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.26), inset 0 0 20px rgba(255, 255, 255, 0.2);
}

.tasbeeh-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.tasbeeh-option {
  min-height: 82px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid rgba(217, 182, 103, 0.24);
  border-radius: 18px;
  color: var(--ivory);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  text-align: start;
  cursor: pointer;
}

.tasbeeh-option strong {
  color: var(--gold-soft);
  font-size: 1.05rem;
  line-height: 1.35;
}

.tasbeeh-option span {
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
}

.tasbeeh-option.active {
  border-color: rgba(217, 182, 103, 0.86);
  background: linear-gradient(135deg, rgba(217, 182, 103, 0.22), rgba(255, 255, 255, 0.055));
  box-shadow: inset 0 0 0 1px rgba(217, 182, 103, 0.16), 0 10px 22px rgba(0, 0, 0, 0.18);
}

.tasbeeh-option:focus-visible,
.tasbeeh-button:focus-visible {
  outline: 3px solid rgba(245, 216, 141, 0.72);
  outline-offset: 3px;
}

@media (max-width: 460px) {
  .tasbeeh-options {
    grid-template-columns: 1fr;
  }

  .tasbeeh-button {
    width: min(72vw, 210px);
  }
}

.settings-hero {
  text-align: center;
}

.settings-section {
  padding: 0;
}

.settings-section h2 {
  margin: 0;
  padding: 14px 18px;
  color: var(--ivory);
  background: rgba(217, 182, 103, 0.16);
  border-bottom: 1px solid var(--line);
}

.settings-stack {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.settings-accordion {
  padding-bottom: calc(88px + env(safe-area-inset-bottom));
}

.settings-accordion .settings-details:last-child {
  scroll-margin-bottom: calc(112px + env(safe-area-inset-bottom));
}

.settings-about-actions {
  gap: 8px;
}

.settings-about-actions .ghost-button {
  flex: 1 1 190px;
  justify-content: center;
}

.settings-status-note {
  padding: 10px 12px;
  border: 1px solid rgba(217, 182, 103, 0.22);
  border-radius: 14px;
  background: rgba(255, 248, 231, 0.07);
}

.settings-backup-output {
  width: 100%;
  min-height: 160px;
  padding: 12px;
  border: 1px solid rgba(217, 182, 103, 0.28);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.2);
  color: var(--ivory);
  direction: ltr;
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  resize: vertical;
}

.language-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  direction: ltr;
}

.language-settings-grid .setting-field {
  direction: rtl;
}

.setting-row,
.setting-field {
  display: grid;
  gap: 8px;
  min-height: 44px;
  color: var(--gold-soft);
  font-weight: 900;
}

.setting-row {
  grid-template-columns: 1fr auto;
  align-items: center;
  padding-block: 4px;
}

.setting-toggle {
  appearance: none;
  width: 68px;
  height: 44px;
  border: 1px solid rgba(217, 182, 103, 0.38);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
}

.setting-toggle::before {
  content: "";
  position: absolute;
  width: 32px;
  height: 32px;
  top: 5px;
  inset-inline-start: 5px;
  border-radius: 50%;
  background: var(--ivory);
  transition: transform 0.18s ease;
}

.setting-toggle:checked {
  background: var(--gold);
}

.setting-toggle:checked::before {
  transform: translateX(-31px);
  background: #09261d;
}

@media (max-width: 620px) {
  .quran-source-panel {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .reader-background-grid {
    grid-template-columns: 1fr;
  }

  .language-settings-grid {
    grid-template-columns: 1fr;
    direction: rtl;
  }
}

.range-input {
  width: 100%;
  min-height: 44px;
  padding-block: 12px;
  accent-color: var(--gold);
}

.settings-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.settings-check-grid span {
  padding: 10px 12px;
  border: 1px solid rgba(217, 182, 103, 0.16);
  border-radius: 14px;
  color: rgba(255, 248, 231, 0.88);
  background: rgba(255, 255, 255, 0.045);
}

.adhan-preview-card {
  display: grid;
  gap: 8px;
  padding: 13px;
  border: 1px solid rgba(217, 182, 103, 0.2);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.045);
}

.adhan-preview-card strong {
  color: var(--gold-soft);
}

.adhan-preview-card span {
  color: var(--muted);
}

.block-button {
  width: 100%;
  justify-content: center;
}

.danger-lite {
  border-color: rgba(190, 64, 64, 0.5);
  color: #ffd7d7;
}

.bottom-nav {
  position: fixed;
  inset: auto 0 0;
  z-index: 20;
  width: min(100%, var(--shell-max-width));
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 9px 10px max(9px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: rgba(3, 31, 23, 0.92);
  backdrop-filter: blur(18px);
}

.bottom-nav button {
  min-height: 52px;
  border: 0;
  border-radius: 16px;
  color: var(--muted);
  background: transparent;
  font-size: clamp(0.72rem, 2.45vw, 0.9rem);
  font-weight: 800;
}

.bottom-nav button.active {
  color: #09261d;
  background: var(--gold);
}

@media (min-width: 721px) {
  :root {
    --shell-max-width: 920px;
    --pattern-size: 150px;
    --pattern-opacity: 0.08;
    --edge-pattern-opacity: 0.06;
  }

  .app-content {
    padding-inline: 22px;
  }

  .card {
    padding: 22px;
    margin-bottom: 18px;
  }
}

@media (min-width: 1180px) {
  :root {
    --shell-max-width: 1040px;
    --pattern-size: 168px;
    --pattern-opacity: 0.1;
    --edge-pattern-opacity: 0.14;
  }

  body {
    background:
      radial-gradient(circle at 50% -18%, rgba(243, 217, 145, 0.22), transparent 28%),
      radial-gradient(circle at 12% 18%, rgba(19, 118, 96, 0.24), transparent 30%),
      radial-gradient(circle at 88% 76%, rgba(217, 182, 103, 0.16), transparent 34%),
      radial-gradient(circle at 50% 112%, rgba(13, 88, 66, 0.32), transparent 42%),
      linear-gradient(145deg, #020f0b 0%, #031f17 44%, #073326 100%);
  }

  .app-shell {
    box-shadow: 0 0 96px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(217, 182, 103, 0.08);
  }

  .app-content {
    padding-inline: 28px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 720px) {
  :root {
    --quran-reader-topbar-height: 88px;
  }

  .quran-page-reader .quran-topbar {
    height: var(--quran-reader-topbar-height);
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 14px 12px 12px;
  }

  .quran-page-reader .quran-reader-title-stack {
    gap: 6px;
  }

  .quran-page-reader .quran-tool-cluster {
    gap: 6px;
  }

  .quran-page-reader .quran-reader-title-stack strong {
    max-width: 36vw;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: clamp(1.18rem, 5.2vw, 1.75rem);
  }

  .quran-page-reader .quran-reader-title-stack small {
    max-width: 38vw;
    padding-inline: 7px;
    font-size: 0.62rem;
  }

  .quran-page-reader .quran-surah-ribbon {
    top: calc(var(--quran-reader-top-offset) + var(--quran-reader-topbar-height));
    height: 74px;
    gap: 8px;
    padding-inline: 14px;
  }

  .quran-page-reader .surah-wheel-item {
    flex-basis: clamp(122px, 38vw, 172px);
    min-height: 50px;
    padding: 6px 10px;
    gap: 5px;
  }

  .quran-page-reader .surah-wheel-item span {
    inline-size: 24px;
    block-size: 24px;
    font-size: 0.72rem;
  }

  .quran-page-reader .surah-wheel-item strong {
    font-size: clamp(1.05rem, 4.2vw, 1.45rem);
  }

  .quran-page-reader .surah-wheel-item.current strong {
    font-size: clamp(1.28rem, 5.6vw, 1.92rem);
  }

  .quran-page-reader .surah-wheel-item.current {
    flex-basis: clamp(150px, 46vw, 214px);
  }

  .quran-page-stage {
    padding-inline: 4px;
  }

  .reader-mushaf-leaf {
    width: calc(100vw - 8px);
    min-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - max(14px, env(safe-area-inset-bottom)));
    padding: clamp(12px, 3vw, 18px) clamp(8px, 2.6vw, 14px);
    border-radius: 13px;
  }

  .reader-mushaf-leaf .mushaf-layout {
    font-size: clamp(1.18rem, 5.05vw, 1.78rem) !important;
    gap: 2px;
  }

  .reader-mushaf-leaf .qcf-layout {
    font-size: clamp(1.25rem, 5.45vw, 1.9rem) !important;
  }

  .reader-mushaf-leaf .mushaf-line {
    gap: 0.05em;
    line-height: 1.84;
  }

  .reader-mushaf-leaf .qcf-line {
    line-height: 1.35;
    min-height: 1.35em;
  }

  .mushaf-end {
    inline-size: 1.42em;
    block-size: 1.42em;
    min-inline-size: 19px;
    min-block-size: 19px;
    padding: 0;
    margin-inline: 0.08em;
    font-size: 0.52em;
  }

  .quran-index-title {
    top: 76px;
  }

  .quran-surah-table-head {
    top: 134px;
    grid-template-columns: 48px minmax(120px, 1fr) 72px 92px;
    font-size: 0.78rem;
  }

  .quran-surah-row {
    grid-template-columns: 48px minmax(120px, 1fr) 72px 92px;
    min-height: 78px;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  body.quran-page-active .sadaqah-reader.reader-tools-open,
  body.quran-page-active .sadaqah-reader.reader-auto-tools {
    --tmkeen-nav-top-space: 88px;
    --tmkeen-nav-bottom-space: 102px;
  }

  body.quran-page-active .sadaqah-reader .tmkeen-reader-topbar {
    min-height: 52px;
    padding-block: 4px;
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.quran-page-active .sadaqah-reader .tmkeen-reader-topbar .quran-icon-button {
    width: 44px;
    height: 44px;
  }

  body.quran-page-active .sadaqah-reader .tmkeen-search-pill {
    min-height: 44px;
  }

  body.quran-page-active .sadaqah-reader .tmkeen-search-glyph::before {
    top: 6px;
    width: 10px;
    height: 10px;
  }

  body.quran-page-active .sadaqah-reader .tmkeen-search-glyph::after {
    top: 17px;
    inset-inline-start: 21px;
  }

  body.quran-page-active .sadaqah-reader .quran-surah-ribbon {
    top: 34px !important;
    height: 54px !important;
    padding-block: 5px 7px !important;
    gap: 12px !important;
  }

  body.quran-page-active .sadaqah-reader .quran-surah-ribbon::before,
  body.quran-page-active .sadaqah-reader .quran-surah-ribbon::after {
    flex-basis: clamp(24px, 6vw, 72px);
  }

  body.quran-page-active .sadaqah-reader .surah-wheel-item {
    flex-basis: clamp(126px, 19vw, 180px);
    min-height: 40px;
    padding: 4px 10px;
  }

  body.quran-page-active .sadaqah-reader .surah-wheel-item.current {
    flex-basis: clamp(212px, 32vw, 292px);
    min-height: 46px;
  }

  body.quran-page-active .sadaqah-reader .surah-wheel-item strong {
    font-size: clamp(1rem, 3.2vh, 1.36rem);
    line-height: 1.1;
  }

  body.quran-page-active .sadaqah-reader .surah-wheel-item.current strong {
    font-size: clamp(1.12rem, 3.8vh, 1.55rem);
  }

  body.quran-page-active .sadaqah-reader .quran-quarter-label {
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 66px);
    font-size: clamp(1.05rem, 4.4vh, 1.45rem);
  }

  body.quran-page-active .sadaqah-reader .quran-page-dots.quran-quarter-wheel {
    height: 78px;
    padding-block: 17px 18px !important;
    gap: 20px;
  }

  body.quran-page-active .sadaqah-reader .quran-quarter-wheel::before,
  body.quran-page-active .sadaqah-reader .quran-quarter-wheel::after {
    flex-basis: clamp(34px, 8vw, 68px);
  }

  body.quran-page-active .sadaqah-reader .quarter-wheel-item,
  body.quran-page-active .sadaqah-reader .quarter-wheel-item.current,
  body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-centered {
    flex-basis: 34px;
    inline-size: 34px;
    block-size: 34px;
  }

  body.quran-page-active .sadaqah-reader .quarter-wheel-item.current,
  body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-centered {
    margin-inline: 12px;
  }

  body.quran-page-active .sadaqah-reader .quarter-wheel-item.current::before,
  body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-centered::before {
    inset: -29px;
  }

  body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-juz-start::before {
    inset: -11px;
    border-width: 2px;
  }

  body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-juz-start::after {
    inset: -8px;
    border-width: 2px;
  }

  body.quran-page-active .sadaqah-reader .quran-quarter-wheel.is-previewing .quarter-wheel-item.current:not(.is-centered) {
    flex-basis: 34px;
    inline-size: 34px;
    block-size: 34px;
  }

  body.quran-page-active .sadaqah-reader .quran-reader-bottom-panel {
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 112px) !important;
  }

  body.quran-page-active .sadaqah-reader .reader-round-button {
    width: 46px;
    height: 46px;
  }
}

@media (orientation: landscape) {
  body.quran-page-active .sadaqah-reader {
    --sadaqah-fit-width: min(var(--sadaqah-safe-width), calc(var(--sadaqah-safe-height) * var(--sadaqah-spread-ratio)));
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread {
    display: flex !important;
    direction: rtl;
    align-items: center;
    justify-content: center;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page {
    display: block !important;
    flex: 0 0 50% !important;
    width: 50% !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page.is-current,
  body.quran-page-active .sadaqah-reader .sadaqah-spread-page:only-child {
    display: block !important;
    width: 50% !important;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  :root {
    --shell-max-width: 100vw;
    --card-radius: 16px;
  }

  body:not(.quran-immersive) {
    overflow-y: auto;
  }

  body:not(.quran-immersive) .app-shell {
    width: 100%;
    min-height: 100dvh;
    overflow: visible;
    border-inline: 0;
  }

  body:not(.quran-immersive) .app-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
  }

  body:not(.quran-immersive) .app-logo {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  body:not(.quran-immersive) .app-brand {
    gap: 9px;
  }

  body:not(.quran-immersive) .app-brand .eyebrow {
    font-size: 0.74rem;
    line-height: 1.1;
  }

  body:not(.quran-immersive) h1 {
    font-size: 1.03rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  body:not(.quran-immersive) .back-button {
    min-width: 40px;
    min-height: 40px;
    padding: 7px 10px;
  }

  body:not(.quran-immersive) .back-button b {
    display: none;
  }

  body:not(.quran-immersive) .icon-button {
    min-height: 40px;
    padding: 7px 12px;
  }

  body:not(.quran-immersive) .app-content {
    min-height: calc(100dvh - 112px);
    padding: calc(10px + var(--app-top-extra-margin)) 12px 74px;
  }

  body:not(.quran-immersive) .card {
    padding: 14px;
    margin-bottom: 10px;
  }

  body:not(.quran-immersive) .hero-card {
    min-height: 150px;
  }

  body:not(.quran-immersive) .home-logo {
    width: 68px;
    height: 68px;
    margin-bottom: 8px;
    border-radius: 18px;
  }

  body:not(.quran-immersive) .hero-title {
    font-size: clamp(1.55rem, 5vw, 2.35rem);
    margin-bottom: 8px;
  }

  body:not(.quran-immersive) .muted {
    font-size: 0.95rem;
    line-height: 1.65;
  }

  body:not(.quran-immersive) .grid,
  body:not(.quran-immersive) .field-grid,
  body:not(.quran-immersive) .language-settings-grid,
  body:not(.quran-immersive) .settings-check-grid,
  body:not(.quran-immersive) .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.quran-immersive) .quran-index-menu {
    gap: 6px;
    padding: 7px;
  }

  body:not(.quran-immersive) .quran-index-menu .quran-menu-item {
    min-height: 40px;
    padding: 7px 9px;
    font-size: 0.82rem;
  }

  body:not(.quran-immersive) .quran-index-menu .quran-tab {
    flex-basis: calc(50% - 6px);
  }

  body:not(.quran-immersive) .quran-page-range-panel {
    align-items: stretch;
    flex-direction: column;
  }

  body:not(.quran-immersive) .quran-page-range-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body:not(.quran-immersive) .quran-page-range-actions .reader-pill {
    width: 100%;
    justify-content: center;
  }

  body:not(.quran-immersive) .bottom-nav {
    padding: 6px 8px max(6px, env(safe-area-inset-bottom));
  }

  body:not(.quran-immersive) .bottom-nav button {
    min-height: 42px;
    border-radius: 12px;
    font-size: 0.8rem;
  }
}

@media (orientation: landscape) and (max-height: 680px) {
  body.quran-immersive {
    overflow-y: auto;
  }

  .quran-page-reader {
    min-height: auto;
    overflow-y: auto;
  }

  .quran-page-stage {
    min-height: auto;
    align-items: start;
    padding-block: 8px 128px;
  }

  .reader-mushaf-leaf {
    width: min(calc(100vw - 54px), 980px);
    min-height: auto;
    margin-block: 0 120px;
    padding: clamp(14px, 2.2vw, 28px);
  }

  .reader-mushaf-leaf .mushaf-layout {
    font-size: clamp(1.1rem, 2.45vw, 1.78rem) !important;
    align-content: start;
    gap: 1px;
  }

  .reader-mushaf-leaf .qcf-layout {
    font-size: clamp(1.08rem, 2.85vw, 1.92rem) !important;
  }

  .reader-mushaf-leaf .mushaf-line {
    line-height: 1.72;
    min-height: 1.5em;
  }

  .reader-mushaf-leaf .qcf-line {
    line-height: 1.32;
    min-height: 1.32em;
  }
}

@media (max-width: 460px) {
  .field-grid,
  .feature-grid,
  .settings-check-grid {
    grid-template-columns: 1fr;
  }

  .quran-page {
    padding: 18px 14px;
  }

  .quran-page::before {
    inset: 7px;
  }

  .mushaf-line {
    gap: 0.14em;
    font-size: 0.88em;
  }
}

@media (max-width: 360px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .bottom-nav button {
    font-size: 0.82rem;
  }
}

.quran-page-reader:not(.staticMushaf-reader) .quran-page-stage {
  min-height: 100dvh;
  align-items: center;
  justify-items: center;
  padding: max(6px, env(safe-area-inset-top)) 0 max(8px, env(safe-area-inset-bottom));
  overflow: hidden;
  touch-action: none;
}

.reader-mushaf-leaf.quran-source-digital {
  width: min(calc(100vw - 18px), calc((100dvh - 18px) * 0.624107), 740px);
  min-height: 0;
  height: auto;
  aspect-ratio: 699 / 1120;
  align-self: center;
  justify-self: center;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  row-gap: clamp(4px, min(0.8vw, 0.7vh), 9px);
  margin: 0 auto;
  padding:
    clamp(24px, min(3.8vw, 3.2vh), 42px)
    clamp(34px, min(5vw, 4.4vh), 58px)
    clamp(18px, min(3vw, 2.6vh), 34px);
  overflow: visible;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-topline,
.reader-mushaf-leaf.quran-source-digital .mushaf-footer {
  min-height: auto;
  margin: 0;
  font-size: clamp(0.66rem, min(1.75vw, 1.42vh), 0.94rem);
  line-height: 1.2;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-layout {
  height: 100%;
  min-height: 0;
  margin: 0;
  align-content: stretch;
  gap: 0;
  font-size: clamp(1.08rem, min(4.25vw, 3.05vh), 2.02rem) !important;
}

.reader-mushaf-leaf.quran-source-digital .qcf-layout {
  height: 100%;
  min-height: 0;
  align-content: stretch;
  gap: 0;
  font-size: clamp(1.16rem, min(4.58vw, 3.25vh), 2.22rem) !important;
}

.reader-mushaf-leaf.quran-source-digital .qcf-layout.tajweed-layout {
  grid-template-rows: repeat(var(--mushaf-row-count, var(--mushaf-line-count, 15)), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout {
  font-family: var(--qcf-font), "Amiri Quran", "Scheherazade New", serif;
  grid-template-rows: repeat(var(--mushaf-row-count, var(--mushaf-line-count, 15)), minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
}

.reader-mushaf-leaf.quran-source-digital .mushaf-line,
.reader-mushaf-leaf.quran-source-digital .qcf-line,
.reader-mushaf-leaf.quran-source-digital .qcf-layout.tajweed-layout .mushaf-line,
.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .mushaf-line {
  min-height: 0;
  line-height: 1.28;
  white-space: nowrap;
  overflow: visible;
}

.reader-mushaf-leaf.quran-source-digital .qcf-layout.tajweed-layout .mushaf-line,
.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .mushaf-line {
  align-items: center;
  gap: 0.08em;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .mushaf-word {
  font-family: var(--qcf-font), "Amiri Quran", "Scheherazade New", serif;
  font-size: 1em;
  font-weight: 400;
  line-height: inherit;
  color: inherit;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .qcf-ayah-end.ayah-action-number,
.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .mushaf-end.qcf-ayah-end.ayah-action-number {
  display: inline;
  inline-size: auto;
  block-size: auto;
  min-inline-size: 0;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: inherit;
  background: transparent;
  box-shadow: none;
  font: inherit;
  line-height: inherit;
  text-align: inherit;
  text-shadow: none;
  transform: none;
  vertical-align: baseline;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .qcf-ayah-end.ayah-action-number::before,
.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .mushaf-end.qcf-ayah-end.ayah-action-number::before {
  content: none;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-line-balanced {
  justify-content: space-between;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-line-short {
  justify-content: center;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title {
  min-height: 1.8em;
  margin-block: 0.04em;
  font-size: 0.56em;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-bismillah {
  min-height: 1.25em;
  margin-block: 0.04em;
  font-size: 0.82em;
  line-height: 1.2;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-footer span {
  padding: 0.22em 1.05em;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker {
  left: clamp(3px, 1vw, 10px);
  inline-size: clamp(40px, min(6.2vw, 4.8vh), 58px);
  min-block-size: clamp(42px, min(6.4vw, 5vh), 58px);
  padding: 6px 5px;
  font-size: 0.24em;
}

.quran-page-reader.reader-zoomed .quran-page-stage {
  align-items: start;
  padding-block: max(4px, env(safe-area-inset-top)) max(112px, env(safe-area-inset-bottom));
  overflow: auto;
  touch-action: pan-x pan-y;
}

.quran-page-reader.reader-zoomed .reader-mushaf-leaf.quran-source-digital {
  width: min(calc(100vw - 4px), 1040px);
  min-height: 0;
  margin-block: 0 96px;
  padding:
    clamp(22px, min(3.4vw, 3.5vh), 46px)
    clamp(26px, min(4.6vw, 4.2vh), 60px)
    clamp(18px, min(2.6vw, 2.8vh), 36px);
}

.quran-page-reader.reader-zoomed .reader-mushaf-leaf.quran-source-digital .mushaf-layout {
  font-size: clamp(1.35rem, min(5.35vw, 4.35vh), 2.85rem) !important;
}

.quran-page-reader.reader-zoomed .reader-mushaf-leaf.quran-source-digital .qcf-layout {
  font-size: clamp(1.5rem, min(5.75vw, 4.7vh), 3.08rem) !important;
}

.quran-page-reader.reader-zoomed .reader-mushaf-leaf.quran-source-digital .mushaf-section-marker {
  display: none;
}

.reader-mushaf-leaf.quran-source-digital.quran-night {
  color: #f5ead0;
  border-color: rgba(225, 194, 124, 0.32);
  background:
    radial-gradient(circle at 50% 5%, rgba(225, 194, 124, 0.11), transparent 38%),
    linear-gradient(180deg, rgba(22, 31, 23, 0.98), rgba(9, 16, 13, 0.995));
  box-shadow:
    0 18px 48px rgba(0, 0, 0, 0.42),
    inset 0 0 0 1px rgba(245, 231, 191, 0.12),
    inset 0 0 46px rgba(0, 0, 0, 0.3);
}

.reader-mushaf-leaf.quran-source-digital.quran-night::before {
  border-color: rgba(225, 194, 124, 0.26);
  box-shadow:
    inset 0 0 0 2px rgba(255, 248, 224, 0.08),
    inset 0 0 34px rgba(0, 0, 0, 0.28);
}

.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-topline,
.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-footer,
.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-layout,
.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-line,
.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-word,
.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-bismillah {
  color: #f5ead0;
}

.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-surah-title > span,
.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-footer span {
  color: #f5ead0;
  border-color: rgba(225, 194, 124, 0.38);
  background: rgba(225, 194, 124, 0.1);
}

.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-page-badge {
  color: #10231d;
  background: linear-gradient(180deg, #f5e7ba, #caa65d);
}

.reader-mushaf-leaf.quran-source-digital.quran-night tajweed.ham_wasl,
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed.laam_shamsiyah,
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed.custom-alef-maksora,
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed[class*="ham_wasl"],
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed[class*="laam_shamsiyah"] {
  color: #2fd69f;
}

.reader-mushaf-leaf.quran-source-digital.quran-night tajweed.madda_normal,
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed.madda_permissible,
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed.madda_necessary,
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed.madda_obligatory,
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed[class*="madda"] {
  color: #f0ad3d;
}

.reader-mushaf-leaf.quran-source-digital.quran-night tajweed.ikhafa,
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed.ikhafa_shafawi,
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed.iqlab,
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed[class*="ikhafa"],
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed[class*="iqlab"] {
  color: #2bd6e3;
}

.reader-mushaf-leaf.quran-source-digital.quran-night tajweed.idgham_ghunnah,
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed.idgham_wo_ghunnah,
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed.idgham_shafawi,
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed.ghunnah,
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed[class*="idgham"],
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed[class*="ghunnah"] {
  color: #e86add;
}

.reader-mushaf-leaf.quran-source-digital.quran-night tajweed.qalqala,
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed.qalaqah,
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed[class*="qal"],
.reader-mushaf-leaf.quran-source-digital.quran-night tajweed[class*="qlaq"] {
  color: #ff6f61;
}

/* Reference-style digital mushaf page. The QCF glyph lines must remain
   continuous; spacing changes here should not reflow individual words. */
.reader-mushaf-leaf.quran-source-digital .mushaf-topline-reference {
  direction: ltr;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-block: 0 0.2em;
  color: #171713;
  font-family: "Amiri Quran", "Scheherazade New", "Times New Roman", serif;
  font-size: clamp(0.9rem, min(3.05vw, 2.15vh), 1.42rem);
  font-weight: 400;
  line-height: 1.35;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-topline-reference span {
  direction: rtl;
  min-width: 0;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-topline-surah {
  justify-self: start;
  text-align: left;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-topline-juz {
  justify-self: end;
  text-align: right;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference {
  position: relative;
  isolation: isolate;
  inline-size: min(96%, 27.5em);
  min-height: 2.08em;
  margin: 0.05em auto 0.1em;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: #1b1a15;
  font-family: "Amiri Quran", "Scheherazade New", "Times New Roman", serif;
  font-size: 0.76em;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference::before {
  content: "";
  position: absolute;
  inset: 0.26em 0;
  z-index: -2;
  border: 1px solid rgba(153, 119, 35, 0.86);
  border-radius: 2px;
  background:
    radial-gradient(ellipse at 10% 50%, transparent 0 16%, rgba(74, 132, 88, 0.82) 17% 21%, transparent 22% 35%, rgba(214, 184, 90, 0.82) 36% 42%, transparent 43%),
    radial-gradient(ellipse at 90% 50%, transparent 0 16%, rgba(74, 132, 88, 0.82) 17% 21%, transparent 22% 35%, rgba(214, 184, 90, 0.82) 36% 42%, transparent 43%),
    linear-gradient(45deg, transparent 0 13%, rgba(75, 130, 88, 0.78) 13% 18%, transparent 18% 31%, rgba(220, 190, 91, 0.9) 31% 37%, transparent 37%),
    linear-gradient(-45deg, transparent 0 13%, rgba(75, 130, 88, 0.72) 13% 18%, transparent 18% 31%, rgba(220, 190, 91, 0.82) 31% 37%, transparent 37%),
    repeating-linear-gradient(90deg, rgba(250, 244, 215, 0.9) 0 0.42em, rgba(227, 199, 109, 0.88) 0.42em 0.84em),
    linear-gradient(90deg, #d7bd63 0 26%, transparent 26% 74%, #d7bd63 74% 100%);
  box-shadow:
    inset 0 0 0 2px rgba(250, 237, 178, 0.72),
    inset 0 0 0 5px rgba(79, 132, 90, 0.12);
}

.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference::after {
  content: "";
  position: absolute;
  inset-block: 0.08em;
  inset-inline: 22%;
  z-index: -1;
  border: 2px solid rgba(171, 134, 44, 0.82);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(212, 179, 82, 0.42), transparent 12% 88%, rgba(212, 179, 82, 0.42)),
    linear-gradient(180deg, #fff9e6, #eee2bd);
  box-shadow:
    0 0 0 0.1em rgba(231, 202, 111, 0.72),
    inset 0 0 0 1px rgba(255, 252, 236, 0.8);
}

.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference .mushaf-surah-title-main {
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #151510;
  background: transparent;
  box-shadow: none;
  font: inherit;
  font-size: 1.18em;
  line-height: 1.2;
  text-align: center;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-bismillah {
  position: relative;
  width: min(80%, 18em);
  margin: 0 auto 0.08em;
  color: #171713;
  font-size: 0.72em;
  line-height: 1.25;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-bismillah::before,
.reader-mushaf-leaf.quran-source-digital .mushaf-bismillah::after {
  content: "";
  position: absolute;
  top: 54%;
  width: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, currentColor);
  opacity: 0.68;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-bismillah::before {
  right: 0;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-bismillah::after {
  left: 0;
  transform: scaleX(-1);
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .mushaf-line {
  display: block !important;
  text-align: center;
  text-align-last: center;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  white-space: nowrap;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .mushaf-word {
  display: inline !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .qcf-ayah-end.ayah-action-number,
.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .mushaf-word.mushaf-end.qcf-word.qcf-ayah-end.ayah-action-number {
  appearance: none;
  -webkit-appearance: none;
  display: inline !important;
  inline-size: auto !important;
  block-size: auto !important;
  min-inline-size: 0 !important;
  min-block-size: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  font: inherit !important;
  line-height: inherit !important;
  text-align: inherit !important;
  text-shadow: none !important;
  transform: none !important;
  vertical-align: baseline !important;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .qcf-ayah-end.ayah-action-number:hover,
.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .qcf-ayah-end.ayah-action-number:focus-visible {
  color: inherit !important;
  background: transparent !important;
  outline: 1px solid rgba(23, 23, 19, 0.24);
  outline-offset: 0.08em;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker {
  left: clamp(-6px, -0.8vw, 4px);
  inline-size: clamp(32px, min(5.2vw, 4.4vh), 46px);
  min-block-size: clamp(54px, min(7vw, 6.2vh), 72px);
  padding: 0.38em 0.28em;
  border: 0;
  border-radius: 0;
  color: #355d49;
  background: transparent;
  font-family: "Cairo", system-ui, sans-serif;
  font-size: 0.19em;
  font-weight: 900;
  line-height: 1.05;
  text-shadow: 0 1px 0 rgba(255, 249, 226, 0.86);
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker::before {
  content: "";
  position: absolute;
  inset: -0.18em -0.22em;
  z-index: -1;
  border: 1px solid rgba(153, 122, 49, 0.58);
  border-radius: 999px 999px 10px 10px;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 248, 220, 0.95) 0 24%, transparent 25%),
    repeating-linear-gradient(45deg, rgba(55, 119, 86, 0.35) 0 0.15em, transparent 0.15em 0.35em),
    linear-gradient(180deg, #e9d486, #f8f1ce 52%, #d1b45e);
  box-shadow:
    inset 0 0 0 2px rgba(255, 249, 224, 0.5),
    0 3px 9px rgba(88, 62, 26, 0.14);
}

.quran-page-reader:not(.staticMushaf-reader) .quran-surah-ribbon,
.quran-page-reader:not(.staticMushaf-reader) .quran-page-dots {
  background:
    linear-gradient(180deg, rgba(9, 25, 19, 0.82), rgba(7, 20, 15, 0.72));
  border-color: rgba(225, 194, 124, 0.2);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 248, 224, 0.08);
  backdrop-filter: blur(14px);
}

.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-topline-reference,
.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-surah-title-reference .mushaf-surah-title-main,
.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-bismillah {
  color: #f5ead0;
}

.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-surah-title-reference::before {
  border-color: rgba(225, 194, 124, 0.42);
  background:
    repeating-linear-gradient(45deg, rgba(69, 134, 96, 0.28) 0 0.14em, transparent 0.14em 0.35em),
    repeating-linear-gradient(-45deg, rgba(69, 134, 96, 0.22) 0 0.14em, transparent 0.14em 0.35em),
    linear-gradient(90deg, rgba(147, 119, 52, 0.75) 0 26%, transparent 26% 74%, rgba(147, 119, 52, 0.75) 74% 100%);
}

.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-surah-title-reference::after {
  border-color: rgba(225, 194, 124, 0.42);
  background: linear-gradient(180deg, rgba(31, 38, 30, 0.94), rgba(18, 27, 22, 0.94));
}

.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference::before,
.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference::after {
  display: block !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference::before {
  inset-block: 0.22em;
  border-width: 1px;
  background:
    radial-gradient(ellipse at 8% 50%, transparent 0 14%, rgba(68, 125, 84, 0.78) 15% 19%, transparent 20% 35%, rgba(211, 181, 89, 0.88) 36% 42%, transparent 43%),
    radial-gradient(ellipse at 92% 50%, transparent 0 14%, rgba(68, 125, 84, 0.78) 15% 19%, transparent 20% 35%, rgba(211, 181, 89, 0.88) 36% 42%, transparent 43%),
    linear-gradient(45deg, transparent 0 14%, rgba(62, 122, 85, 0.68) 14% 19%, transparent 19% 31%, rgba(209, 177, 80, 0.8) 31% 37%, transparent 37%),
    linear-gradient(-45deg, transparent 0 14%, rgba(62, 122, 85, 0.62) 14% 19%, transparent 19% 31%, rgba(209, 177, 80, 0.74) 31% 37%, transparent 37%),
    repeating-linear-gradient(90deg, rgba(252, 246, 218, 0.86) 0 0.36em, rgba(224, 194, 103, 0.88) 0.36em 0.72em),
    linear-gradient(90deg, #d6bb61 0 26%, transparent 26% 74%, #d6bb61 74% 100%);
}

.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference::after {
  inset-inline: 22%;
  background:
    linear-gradient(90deg, rgba(211, 181, 92, 0.58), transparent 12% 88%, rgba(211, 181, 92, 0.58)),
    linear-gradient(180deg, #fcf8e8, #efe3c3);
}

.reader-mushaf-leaf.quran-source-digital .mushaf-footer span {
  padding: 0;
  border-radius: 0;
  color: #171713;
  background: transparent;
  font-family: "Amiri Quran", "Scheherazade New", "Times New Roman", serif;
  font-size: clamp(0.72rem, min(2.35vw, 1.7vh), 1.08rem);
  font-weight: 400;
  line-height: 1.15;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker {
  left: clamp(-2px, -0.25vw, 2px);
  inline-size: clamp(34px, min(5.4vw, 4.4vh), 46px);
  min-block-size: clamp(82px, min(10.8vw, 8.8vh), 108px);
  padding: clamp(31px, min(4.2vw, 3.4vh), 42px) 0.28em 0.5em;
  color: #1e2017;
  font-size: 0.16em;
  line-height: 1.06;
  text-shadow: 0 1px 0 rgba(255, 250, 226, 0.82);
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker::before {
  inset: 0.58em 0.05em 0;
  border: 1px solid rgba(151, 118, 42, 0.78);
  border-radius: 0;
  clip-path: none;
  background:
    linear-gradient(90deg, transparent 0 17%, rgba(217, 186, 94, 0.95) 17% 21%, transparent 21% 79%, rgba(217, 186, 94, 0.95) 79% 83%, transparent 83%),
    radial-gradient(circle at 50% 9%, #f9f0bf 0 5%, transparent 5.6%),
    radial-gradient(circle at 29% 24%, rgba(75, 130, 88, 0.72) 0 8%, transparent 8.6%),
    radial-gradient(circle at 71% 24%, rgba(75, 130, 88, 0.72) 0 8%, transparent 8.6%),
    radial-gradient(circle at 30% 42%, rgba(211, 180, 87, 0.76) 0 7%, transparent 7.6%),
    radial-gradient(circle at 70% 42%, rgba(211, 180, 87, 0.76) 0 7%, transparent 7.6%),
    linear-gradient(135deg, transparent 0 28%, rgba(68, 128, 89, 0.72) 28% 32%, transparent 32% 42%, rgba(207, 176, 82, 0.84) 42% 47%, transparent 47%),
    linear-gradient(-135deg, transparent 0 28%, rgba(68, 128, 89, 0.68) 28% 32%, transparent 32% 42%, rgba(207, 176, 82, 0.78) 42% 47%, transparent 47%),
    linear-gradient(180deg, #f5edc8, #fbf7df 55%, #ead27b);
  box-shadow:
    inset 0 0 0 2px rgba(255, 250, 226, 0.48),
    0 2px 5px rgba(74, 52, 20, 0.12);
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker::after {
  content: "";
  position: absolute;
  top: -0.35em;
  left: 50%;
  z-index: -1;
  width: 0.28em;
  height: 2.2em;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, #d1b55d, #8c702d);
  transform: translateX(-50%);
}

.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-footer span {
  color: #f5ead0;
  background: transparent;
}

.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-section-marker {
  color: #f8eed4;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

.reader-mushaf-leaf.quran-source-digital .mushaf-bismillah {
  width: auto;
  min-height: 0;
  margin: -0.08em auto 0.02em;
  color: #151510;
  font-family: "Amiri Quran", "Scheherazade New", "Times New Roman", serif;
  font-size: 0.88em;
  font-weight: 400;
  line-height: 1.34;
  text-align: center;
  white-space: nowrap;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-bismillah::before,
.reader-mushaf-leaf.quran-source-digital .mushaf-bismillah::after {
  display: none !important;
  content: none !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker {
  position: absolute !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  left: clamp(-68px, -5.6vw, -42px) !important;
  top: 50% !important;
  z-index: 3;
  inline-size: clamp(34px, min(5.2vw, 4.3vh), 45px);
  min-block-size: clamp(84px, min(10.4vw, 8.4vh), 106px);
  padding: clamp(31px, min(4vw, 3.2vh), 40px) 0.24em 0.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  pointer-events: none;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .mushaf-line {
  overflow: visible;
}

.quran-page-reader:not(.staticMushaf-reader) .quran-surah-ribbon {
  display: flex;
  gap: clamp(8px, 2vw, 14px);
  height: 96px;
  padding: 8px clamp(18px, 5vw, 54px);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-padding-inline: 50%;
  scroll-snap-type: x mandatory;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 26% 74%, rgba(0, 0, 0, 0.22)),
    linear-gradient(180deg, rgba(26, 45, 16, 0.9), rgba(18, 35, 12, 0.86));
}

.quran-page-reader:not(.staticMushaf-reader) .surah-wheel-item {
  flex: 0 0 clamp(140px, 28vw, 230px);
  grid-template-columns: minmax(0, 1fr);
  min-height: 72px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  border: 0;
  border-radius: 24px;
  padding: 8px 14px;
  color: rgba(255, 255, 255, 0.9);
  background:
    linear-gradient(90deg, rgba(7, 19, 12, 0.1), rgba(8, 23, 13, 0.42), rgba(7, 19, 12, 0.1));
  box-shadow: none;
}

.quran-page-reader:not(.staticMushaf-reader) .surah-wheel-item span {
  display: none;
}

.quran-page-reader:not(.staticMushaf-reader) .surah-wheel-item strong {
  font-size: clamp(1.55rem, 4.3vw, 2.6rem);
  line-height: 1.05;
}

.quran-page-reader:not(.staticMushaf-reader) .surah-wheel-item strong::before {
  content: "سورة ";
}

.quran-page-reader:not(.staticMushaf-reader) .surah-wheel-item.current {
  flex-basis: clamp(170px, 34vw, 270px);
  min-height: 78px;
  border: 0;
  color: #fff;
  background: transparent;
  clip-path: none;
  overflow: visible;
  transform: scale(1.04);
}

.quran-page-reader:not(.staticMushaf-reader) .surah-wheel-item.current::before {
  content: "";
  position: absolute;
  inset: 8px 10px;
  z-index: -1;
  border: 3px solid rgba(255, 255, 255, 0.27);
  background:
    radial-gradient(circle at 50% 0, rgba(255, 248, 224, 0.06), transparent 58%),
    rgba(48, 67, 31, 0.78);
  clip-path: polygon(0 28%, 36% 28%, 50% 0, 64% 28%, 100% 28%, 100% 72%, 64% 72%, 50% 100%, 36% 72%, 0 72%);
}

.quran-page-reader:not(.staticMushaf-reader) .surah-wheel-item.current strong {
  position: relative;
  z-index: 1;
  font-size: clamp(1.6rem, 4.5vw, 2.65rem);
}

/* Premium Mushaf reference frame overrides */
.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference {
  inline-size: min(94%, 28em) !important;
  min-height: 2.22em !important;
  margin: 0.02em auto 0.08em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #171713 !important;
  font-size: 0.78em !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0.28em 0.1em !important;
  z-index: -2 !important;
  border: 1px solid rgba(154, 119, 35, 0.86) !important;
  border-radius: 2px !important;
  background:
    radial-gradient(circle at 7% 50%, #f9f1c9 0 0.26em, transparent 0.28em),
    radial-gradient(circle at 13% 36%, rgba(82, 132, 83, 0.82) 0 0.24em, transparent 0.26em),
    radial-gradient(circle at 13% 64%, rgba(82, 132, 83, 0.82) 0 0.24em, transparent 0.26em),
    radial-gradient(circle at 19% 50%, rgba(211, 180, 86, 0.9) 0 0.28em, transparent 0.3em),
    radial-gradient(circle at 93% 50%, #f9f1c9 0 0.26em, transparent 0.28em),
    radial-gradient(circle at 87% 36%, rgba(82, 132, 83, 0.82) 0 0.24em, transparent 0.26em),
    radial-gradient(circle at 87% 64%, rgba(82, 132, 83, 0.82) 0 0.24em, transparent 0.26em),
    radial-gradient(circle at 81% 50%, rgba(211, 180, 86, 0.9) 0 0.28em, transparent 0.3em),
    linear-gradient(38deg, transparent 0 9%, rgba(67, 121, 80, 0.76) 9% 12%, transparent 12% 18%, rgba(208, 176, 81, 0.8) 18% 21%, transparent 21%),
    linear-gradient(-38deg, transparent 0 9%, rgba(67, 121, 80, 0.7) 9% 12%, transparent 12% 18%, rgba(208, 176, 81, 0.74) 18% 21%, transparent 21%),
    linear-gradient(90deg, #d5bb65 0 27%, transparent 27% 73%, #d5bb65 73% 100%) !important;
  box-shadow:
    inset 0 0 0 2px rgba(252, 240, 183, 0.72),
    inset 0 0 0 5px rgba(72, 123, 81, 0.08) !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset-block: 0.07em !important;
  inset-inline: 23% !important;
  z-index: -1 !important;
  border: 2px solid rgba(170, 130, 40, 0.86) !important;
  border-radius: 999px !important;
  background:
    radial-gradient(circle at 0 50%, rgba(206, 173, 73, 0.24) 0 18%, transparent 19%),
    radial-gradient(circle at 100% 50%, rgba(206, 173, 73, 0.24) 0 18%, transparent 19%),
    linear-gradient(180deg, #fff9e7, #eee1ba) !important;
  box-shadow:
    0 0 0 0.08em rgba(235, 205, 112, 0.72),
    inset 0 0 0 1px rgba(255, 252, 236, 0.9),
    inset 0 0.14em 0.42em rgba(255, 255, 255, 0.55) !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference .mushaf-surah-title-main {
  position: relative !important;
  z-index: 1 !important;
  padding: 0 0.5em !important;
  color: #11110d !important;
  font-family: "Sadaqah Uthmanic Hafs", "Amiri Quran", "Scheherazade New", "Times New Roman", serif !important;
  font-size: 1.25em !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  text-shadow: 0 1px 0 rgba(255, 248, 224, 0.75) !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker {
  position: absolute !important;
  left: clamp(-76px, -6.1vw, -48px) !important;
  top: 50% !important;
  z-index: 3 !important;
  inline-size: clamp(44px, min(6.3vw, 5.2vh), 58px) !important;
  min-block-size: clamp(104px, min(12.4vw, 10vh), 130px) !important;
  padding: clamp(34px, min(4.4vw, 3.7vh), 45px) 0.28em 0.58em !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.04em !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #171713 !important;
  background: transparent !important;
  font-family: "Sadaqah Uthman TN", "Cairo", system-ui, sans-serif !important;
  font-size: clamp(0.38rem, min(1.08vw, 0.82vh), 0.54rem) !important;
  font-weight: 900 !important;
  line-height: 1.02 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 249, 224, 0.92) !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker span {
  display: block !important;
  white-space: nowrap !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker::before {
  content: "" !important;
  position: absolute !important;
  inset: 0.82em 0.02em 0.02em !important;
  z-index: -2 !important;
  border: 1px solid rgba(146, 112, 36, 0.82) !important;
  border-radius: 0 !important;
  clip-path: polygon(50% 0, 88% 17%, 88% 100%, 12% 100%, 12% 17%) !important;
  background:
    radial-gradient(circle at 50% 16%, #f9f0bd 0 0.24em, transparent 0.26em),
    radial-gradient(circle at 32% 29%, rgba(75, 128, 85, 0.82) 0 0.22em, transparent 0.24em),
    radial-gradient(circle at 68% 29%, rgba(75, 128, 85, 0.82) 0 0.22em, transparent 0.24em),
    linear-gradient(42deg, transparent 0 34%, rgba(68, 121, 80, 0.7) 34% 39%, transparent 39% 47%, rgba(209, 177, 80, 0.82) 47% 52%, transparent 52%),
    linear-gradient(-42deg, transparent 0 34%, rgba(68, 121, 80, 0.64) 34% 39%, transparent 39% 47%, rgba(209, 177, 80, 0.76) 47% 52%, transparent 52%),
    linear-gradient(180deg, #f8efc7, #fff9df 56%, #e7cf78) !important;
  box-shadow:
    inset 0 0 0 2px rgba(255, 250, 226, 0.5),
    0 2px 6px rgba(62, 43, 15, 0.15) !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker::after {
  content: "" !important;
  position: absolute !important;
  top: -0.42em !important;
  left: 50% !important;
  z-index: -3 !important;
  width: 0.34em !important;
  height: 2.7em !important;
  border-radius: 999px 999px 0 0 !important;
  background: linear-gradient(180deg, #e1c96b, #8a6d28) !important;
  transform: translateX(-50%) !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker-juz,
.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker-hizb {
  font-size: clamp(0.42rem, min(1.18vw, 0.9vh), 0.6rem) !important;
}

.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-surah-title-reference::before {
  border-color: rgba(217, 185, 100, 0.44) !important;
  filter: brightness(0.82) saturate(0.9) !important;
}

.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-surah-title-reference::after {
  border-color: rgba(217, 185, 100, 0.48) !important;
  background: linear-gradient(180deg, rgba(39, 43, 31, 0.95), rgba(20, 29, 23, 0.95)) !important;
}

.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-section-marker {
  color: #f7efd7 !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55) !important;
}

/* User-provided Mushaf ornament mockups */
.reader-mushaf-leaf.quran-source-digital {
  --mushaf-side-marker-width: clamp(54px, min(6.8vw, 5.7vh), 68px);
  --mushaf-side-marker-gap: clamp(12px, min(1.8vw, 1.45vh), 18px);
  --mushaf-side-marker-guard: 3mm;
  --mushaf-page-padding-inline: clamp(8px, min(1.7vw, 1.55vh), 18px);
  --mushaf-side-padding: calc(var(--mushaf-side-marker-width) + var(--mushaf-side-marker-gap) + var(--mushaf-side-marker-guard));
  width: min(calc(100vw - 18px), calc((100dvh - 18px) * 0.632353), 930px);
  aspect-ratio: 860 / 1360;
  padding:
    clamp(24px, min(3.8vw, 3.2vh), 42px)
    var(--mushaf-page-padding-inline)
    calc(clamp(18px, min(3vw, 2.6vh), 34px) + 1cm);
}

.reader-mushaf-leaf.quran-source-digital.mushaf-page-side-left {
  padding-left: var(--mushaf-side-padding) !important;
  padding-right: var(--mushaf-page-padding-inline) !important;
}

.reader-mushaf-leaf.quran-source-digital.mushaf-page-side-right {
  padding-left: var(--mushaf-page-padding-inline) !important;
  padding-right: var(--mushaf-side-padding) !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  box-sizing: border-box !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  aspect-ratio: 1036 / 126 !important;
  margin: -0.03em auto 0.04em !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("../images/mushaf-surah-frame-v38.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference::after {
  display: none !important;
  content: none !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference .mushaf-surah-title-main {
  position: relative !important;
  z-index: 1 !important;
  min-inline-size: 0 !important;
  padding: 0 0.6em !important;
  color: #11100b !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: "Amiri Quran", "Scheherazade New", "Times New Roman", serif !important;
  font-size: clamp(0.92rem, min(2.75vw, 2.35vh), 1.35rem) !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 248, 224, 0.8) !important;
  transform: translateY(-2mm) !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-bismillah {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-block-size: 1.35em !important;
  block-size: 1.35em !important;
  margin-block: 0 !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-bismillah-gap {
  display: block !important;
  min-block-size: 0 !important;
  pointer-events: none !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker {
  position: absolute !important;
  left: calc(-1 * (var(--mushaf-side-marker-width) + var(--mushaf-side-marker-gap))) !important;
  right: auto !important;
  top: 50% !important;
  z-index: 3 !important;
  box-sizing: border-box !important;
  inline-size: var(--mushaf-side-marker-width) !important;
  block-size: calc(var(--mushaf-side-marker-width) * 2.2456) !important;
  min-block-size: 0 !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
  display: block !important;
  color: #17130d !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Sadaqah Uthman TN", "Cairo", system-ui, sans-serif !important;
  font-size: clamp(0.54rem, min(1.35vw, 1.12vh), 0.82rem) !important;
  font-weight: 900 !important;
  line-height: 0.98 !important;
  text-align: center !important;
  text-shadow: 0 1px 0 rgba(255, 250, 229, 0.9) !important;
  transform: translateY(-50%) !important;
  pointer-events: none !important;
  isolation: isolate !important;
}

.reader-mushaf-leaf.quran-source-digital.mushaf-page-side-right .mushaf-section-marker {
  left: auto !important;
  right: calc(-1 * (var(--mushaf-side-marker-width) + var(--mushaf-side-marker-gap))) !important;
}

.reader-mushaf-leaf.quran-source-digital.mushaf-page-side-left .mushaf-section-marker {
  left: calc(-1 * (var(--mushaf-side-marker-width) + var(--mushaf-side-marker-gap))) !important;
  right: auto !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  background: url("../images/mushaf-side-marker-frame-v45.png") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  pointer-events: none !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker::after {
  display: none !important;
  content: none !important;
  pointer-events: none !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker .mushaf-section-marker-label {
  position: absolute !important;
  z-index: 2 !important;
  left: 13% !important;
  right: 13% !important;
  top: 62.4% !important;
  bottom: 4.6% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  max-inline-size: none !important;
  overflow: hidden !important;
  text-align: center !important;
  pointer-events: none !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker .mushaf-section-marker-label span {
  display: block !important;
  max-inline-size: 100% !important;
  line-height: 0.86 !important;
  white-space: nowrap !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker-juz,
.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker-hizb,
.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker-sajdah {
  font-size: clamp(0.6rem, min(1.48vw, 1.24vh), 0.9rem) !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-section-marker-sajdah .mushaf-section-marker-label {
  top: 61.5% !important;
  bottom: 5.3% !important;
}

.reader-mushaf-leaf.quran-source-digital .qcf-layout {
  font-size: var(--qcf-auto-font-size, clamp(1.42rem, min(5.18vw, 3.85vh), 2.72rem)) !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
}

@media (max-width: 460px) {
  .reader-mushaf-leaf.quran-source-digital .qcf-layout {
    font-size: var(--qcf-auto-font-size, clamp(1.02rem, 5vw, 1.42rem)) !important;
  }
}

.quran-page-reader.reader-zoomed .reader-mushaf-leaf.quran-source-digital {
  width: min(calc(100vw - 4px), calc((100dvh - 4px) * 0.632353), 1080px) !important;
  aspect-ratio: 860 / 1360 !important;
  padding-block:
    clamp(22px, min(3.4vw, 3.5vh), 46px)
    calc(clamp(18px, min(2.6vw, 2.8vh), 36px) + 1cm) !important;
}

.quran-page-reader.reader-zoomed .reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  aspect-ratio: 1036 / 126 !important;
}

.quran-page-reader.reader-zoomed .reader-mushaf-leaf.quran-source-digital .qcf-layout {
  font-size: clamp(1.32rem, min(4.85vw, 4.1vh), 3rem) !important;
  min-inline-size: 0 !important;
  max-inline-size: 100% !important;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .mushaf-line {
  direction: rtl !important;
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  min-inline-size: 0 !important;
  justify-self: stretch !important;
  text-align: right !important;
  text-align-last: right !important;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .mushaf-fixed-line {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .qcf-line-run {
  display: inline-block !important;
  direction: rtl !important;
  unicode-bidi: isolate !important;
  white-space: nowrap !important;
  font-family: var(--qcf-font), "Sadaqah Uthmanic Hafs", "Amiri Quran", serif !important;
  font-size: 1em !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  word-spacing: 0 !important;
  color: #13291f !important;
  text-rendering: geometricPrecision !important;
  -webkit-font-smoothing: antialiased !important;
  font-synthesis: none !important;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .qcf-page-start-word {
  display: inline-block !important;
  margin-inline-end: 0.105em !important;
}

.reader-mushaf-leaf.quran-source-digital.mushaf-opening-page .fixed-qcf-layout .mushaf-line {
  text-align: center !important;
  text-align-last: center !important;
}

.reader-mushaf-leaf.quran-source-digital.mushaf-opening-page .fixed-qcf-layout .mushaf-fixed-line {
  justify-content: center !important;
}

.reader-mushaf-leaf.quran-source-digital.mushaf-opening-page .mushaf-layout,
.reader-mushaf-leaf.quran-source-digital.mushaf-opening-page .qcf-layout {
  align-content: center !important;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout.qcf-font-pending {
  opacity: 0 !important;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout.qcf-font-ready {
  opacity: 1 !important;
  transition: opacity 80ms ease-out;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout {
  grid-template-rows: repeat(var(--mushaf-row-count, 15), minmax(0, 1fr)) !important;
  grid-auto-rows: unset !important;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout > .mushaf-surah-title-reference,
.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout > .mushaf-bismillah,
.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout > .mushaf-fixed-line {
  align-self: center !important;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout > .mushaf-surah-title-reference {
  block-size: min(100%, 4.9em) !important;
  max-block-size: 100% !important;
  margin: 0 auto !important;
}

.reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout > .mushaf-bismillah {
  inline-size: 100% !important;
  max-inline-size: 100% !important;
  justify-self: stretch !important;
  min-block-size: 0 !important;
  block-size: auto !important;
  margin: 0 auto !important;
  transform: none !important;
  text-align: center !important;
  text-align-last: center !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-topline-reference,
.reader-mushaf-leaf.quran-source-digital .mushaf-bismillah,
.reader-mushaf-leaf.quran-source-digital .mushaf-footer {
  font-family: "Sadaqah Uthmanic Hafs", "Amiri Quran", "Scheherazade New", "Times New Roman", serif !important;
}

.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-surah-title-reference::before,
.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-section-marker::before {
  filter: brightness(0.9) saturate(0.9) !important;
}

.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-surah-title-reference .mushaf-surah-title-main,
.reader-mushaf-leaf.quran-source-digital.quran-night .mushaf-section-marker {
  color: #17130d !important;
  text-shadow: 0 1px 0 rgba(255, 250, 229, 0.85) !important;
}

/* Mobile mushaf recovery pass: keep every ornament inside the paper and keep
   QCF lines continuous on narrow phones and foldables. */
.reader-mushaf-leaf.quran-source-digital .mushaf-topline-reference {
  box-sizing: border-box !important;
  padding-inline: clamp(12px, 4.2%, 34px) !important;
  font-family: "Sadaqah Uthmanic Hafs", "Amiri Quran", "Scheherazade New", "Times New Roman", serif !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-topline-reference span {
  white-space: nowrap !important;
}

.reader-mushaf-leaf.quran-source-digital .mushaf-bismillah::before,
.reader-mushaf-leaf.quran-source-digital .mushaf-bismillah::after {
  display: none !important;
  content: none !important;
}

.reader-mushaf-leaf.quran-source-digital::before {
  display: none !important;
  content: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.quran-page-reader.reader-zoomed .reader-mushaf-leaf.quran-source-digital.mushaf-page-side-left,
.quran-page-reader.reader-zoomed .reader-mushaf-leaf.quran-source-digital.mushaf-page-side-right {
  --mushaf-side-marker-width: 0px !important;
  --mushaf-side-marker-gap: 0px !important;
  --mushaf-side-marker-guard: 0px !important;
  padding-inline: clamp(10px, min(2.1vw, 2.1vh), 24px) !important;
}

.quran-page-reader.reader-zoomed .reader-mushaf-leaf.quran-source-digital .mushaf-section-marker {
  display: none !important;
}

.reader-mushaf-leaf.quran-source-digital.mushaf-page-side-left:not(.mushaf-has-side-marker),
.reader-mushaf-leaf.quran-source-digital.mushaf-page-side-right:not(.mushaf-has-side-marker) {
  padding-left: var(--mushaf-page-padding-inline) !important;
  padding-right: var(--mushaf-page-padding-inline) !important;
}

@media (max-width: 720px) {
  .reader-mushaf-leaf.quran-source-digital {
    --mushaf-side-marker-width: clamp(42px, 9.8vw, 54px);
    --mushaf-side-marker-gap: clamp(2px, 0.75vw, 5px);
    --mushaf-side-marker-guard: clamp(5px, 1.6vw, 9px);
    --mushaf-page-padding-inline: clamp(18px, 5vw, 26px);
    --mushaf-side-padding: calc(var(--mushaf-side-marker-width) + var(--mushaf-side-marker-gap) + var(--mushaf-side-marker-guard));
    width: min(calc(100vw - 10px), calc((100dvh - 10px) * 0.632353), 930px);
  }

  .reader-mushaf-leaf.quran-source-digital .mushaf-topline-reference {
    padding-inline: clamp(10px, 4.8vw, 20px) !important;
    font-size: clamp(0.78rem, min(3.75vw, 2.15vh), 1.16rem) !important;
  }

  .reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference {
    inline-size: min(100%, 27em) !important;
  }

  .reader-mushaf-leaf.quran-source-digital .mushaf-surah-title-reference .mushaf-surah-title-main {
    font-size: clamp(0.78rem, min(3.25vw, 1.95vh), 1.05rem) !important;
    transform: translateY(-1.45mm) !important;
  }

  .reader-mushaf-leaf.quran-source-digital .mushaf-section-marker {
    font-size: clamp(0.48rem, 2.05vw, 0.68rem) !important;
    line-height: 0.92 !important;
  }

  .reader-mushaf-leaf.quran-source-digital .mushaf-section-marker-juz,
  .reader-mushaf-leaf.quran-source-digital .mushaf-section-marker-hizb,
  .reader-mushaf-leaf.quran-source-digital .mushaf-section-marker-sajdah {
    font-size: clamp(0.5rem, 2.18vw, 0.7rem) !important;
  }

  .reader-mushaf-leaf.quran-source-digital .mushaf-section-marker .mushaf-section-marker-label span {
    line-height: 0.82 !important;
  }
}

@media (orientation: portrait) {
  body.app-standalone.quran-page-active,
  body.app-standalone.quran-page-active .app-shell,
  body.app-standalone.quran-page-active .app-content,
  body.app-standalone.quran-page-active .quran-reader-screen,
  body.app-standalone.quran-page-active .quran-page-reader {
    width: 100vw !important;
    width: 100dvw !important;
    max-width: none !important;
    margin-inline: auto !important;
  }

  body.app-standalone.quran-page-active .quran-page-stage,
  body.app-standalone.quran-page-active .quran-page-reader:not(.staticMushaf-reader) .quran-page-stage,
  body.app-standalone.quran-page-active .staticMushaf-reader .quran-page-stage {
    width: 100vw !important;
    width: 100dvw !important;
    max-width: 100dvw !important;
    padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px) !important;
    place-items: center !important;
    justify-content: center !important;
    justify-items: center !important;
  }

  body.app-standalone.quran-page-active .reader-mushaf-leaf,
  body.app-standalone.quran-page-active .reader-mushaf-leaf.quran-source-digital,
  body.app-standalone.quran-page-active .staticMushaf-mushaf-leaf {
    margin-inline: auto !important;
    align-self: center !important;
    justify-self: center !important;
    transform-origin: center center !important;
  }

  body.app-standalone.quran-page-active .reader-mushaf-leaf.quran-source-digital {
    width: min(
      calc(100dvw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 18px),
      calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 18px) * 0.624107),
      740px
    ) !important;
  }

  body.app-standalone.quran-page-active .staticMushaf-page-shell,
  body.app-standalone.quran-page-active .staticMushaf-page-image {
    margin-inline: auto !important;
  }
}

/* Landscape reading mode: the active Quran page fills the viewport, vertical
   movement scrolls the page, and horizontal touch swipes turn pages. */
@media (orientation: landscape) {
  body.quran-page-active {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  body.quran-page-active .quran-reader-exit-button {
    inset-block-start: calc(env(safe-area-inset-top, 0px) + 6px);
    inset-inline-start: calc(env(safe-area-inset-left, 0px) + 6px);
    width: 44px;
    height: 44px;
    opacity: 0.72;
  }

  body.quran-page-active .app-shell,
  body.quran-page-active .app-content,
  body.quran-page-active .quran-reader-screen,
  body.quran-page-active .quran-page-reader {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  body.quran-page-active .quran-page-reader:not(.sadaqah-reader) > .quran-topbar,
  body.quran-page-active .quran-page-reader:not(.sadaqah-reader) > .quran-surah-ribbon,
  body.quran-page-active .quran-page-reader:not(.sadaqah-reader) > .quran-reader-bottom-panel,
  body.quran-page-active .quran-page-reader:not(.sadaqah-reader) > .quran-page-dots,
  body.quran-page-active .quran-page-reader:not(.sadaqah-reader) > .quran-reader-utility,
  body.quran-page-active .quran-page-reader:not(.sadaqah-reader) > .quran-reader-audio {
    display: none !important;
  }

  body.quran-page-active .quran-page-stage,
  body.quran-page-active .quran-page-reader:not(.staticMushaf-reader) .quran-page-stage,
  body.quran-page-active .staticMushaf-reader .quran-page-stage {
    width: 100vw !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    padding: 0 !important;
    align-items: start !important;
    justify-items: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y !important;
    scroll-behavior: smooth;
    cursor: grab;
  }

  body.quran-page-active .reader-side-page {
    display: none !important;
  }

  body.quran-page-active .reader-mushaf-leaf,
  body.quran-page-active .reader-mushaf-leaf.quran-source-digital,
  body.quran-page-active .staticMushaf-mushaf-leaf {
    width: 100vw !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    align-self: start !important;
    justify-self: center !important;
    border-radius: 0 !important;
  }

  body.quran-page-active .reader-mushaf-leaf.quran-source-digital {
    aspect-ratio: 860 / 1360 !important;
  }

  body.quran-page-active .staticMushaf-page-shell {
    width: 100% !important;
    max-width: none !important;
    border-radius: 0 !important;
  }

  body.quran-page-active .staticMushaf-mushaf-leaf {
    padding: 0 !important;
  }

  body.quran-page-active .staticMushaf-page-image {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
  }

  body.quran-page-active .reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout {
    justify-items: stretch !important;
  }

  body.quran-page-active .reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .mushaf-line {
    text-align: center !important;
    text-align-last: center !important;
  }

  body.quran-page-active .reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .mushaf-fixed-line {
    justify-content: center !important;
  }

  body.quran-page-active .reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout .qcf-line-run {
    margin-inline: auto !important;
  }

  body.quran-page-active .reader-mushaf-leaf.quran-source-digital .fixed-qcf-layout > .mushaf-bismillah {
    inline-size: 100% !important;
    max-inline-size: 100% !important;
    justify-self: stretch !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-align-last: center !important;
    font-size: clamp(1.75rem, min(5.2vw, 6vh), 3.2rem) !important;
    line-height: 1.12 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  body.quran-page-active.quran-landscape-rotated .quran-page-stage,
  body.quran-page-active.quran-landscape-rotated .quran-page-reader:not(.staticMushaf-reader) .quran-page-stage,
  body.quran-page-active.quran-landscape-rotated .staticMushaf-reader .quran-page-stage {
    align-items: center !important;
    justify-items: center !important;
    place-items: center !important;
    overflow: hidden !important;
    touch-action: none !important;
  }

  body.quran-page-active.quran-landscape-rotated .reader-mushaf-leaf,
  body.quran-page-active.quran-landscape-rotated .reader-mushaf-leaf.quran-source-digital {
    width: min(calc(100dvh - 8px), calc(100vw * 0.632353), 930px) !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 860 / 1360 !important;
    margin: 0 auto !important;
    align-self: center !important;
    justify-self: center !important;
    border-radius: 0 !important;
  }

  body.quran-page-active.quran-landscape-rotated .staticMushaf-mushaf-leaf {
    width: min(calc(100dvh - 8px), calc(100vw * 0.635455), 760px) !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 auto !important;
    align-self: center !important;
    justify-self: center !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
}

body.quran-page-active,
body.quran-page-active .app-shell,
body.quran-page-active .app-content,
body.quran-page-active .sadaqah-reader,
body.quran-page-active .sadaqah-reader .quran-page-stage {
  background: var(--quran-geometry-bg) !important;
  background-size: var(--quran-geometry-size) !important;
  background-position: var(--quran-geometry-position) !important;
  background-repeat: repeat !important;
  background-color: #102719 !important;
}

body.quran-page-active .sadaqah-reader .reader-mushaf-leaf,
body.quran-page-active .sadaqah-reader .staticMushaf-mushaf-leaf,
body.quran-page-active .sadaqah-reader .staticMushaf-page-shell,
body.quran-page-active .sadaqah-reader .sadaqah-spread,
body.quran-page-active .sadaqah-reader .sadaqah-spread-shell {
  background: transparent !important;
}

body.quran-page-active .sadaqah-reader .sadaqah-page-frame,
body.quran-page-active .sadaqah-reader .sadaqah-spread-page,
body.quran-page-active .sadaqah-reader .sadaqah-book-page-image {
  background: #fff7df !important;
}

body.quran-page-active .sadaqah-reader .reader-mushaf-leaf,
body.quran-page-active .sadaqah-reader .reader-mushaf-leaf.mushaf-style-classic,
body.quran-page-active .sadaqah-reader .staticMushaf-mushaf-leaf,
body.quran-page-active .sadaqah-reader .staticMushaf-page-shell {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.quran-page-active .sadaqah-reader .reader-mushaf-leaf.mushaf-style-classic::before {
  display: none !important;
}

body.quran-page-active .sadaqah-reader .sadaqah-opening-page-image {
  background: transparent !important;
}

body.quran-page-active .sadaqah-reader {
  --sadaqah-page-ratio: 0.6428571429;
  --sadaqah-spread-ratio: 1.2857142858;
  --tmkeen-page-top-gap: 14px;
  --sadaqah-safe-width: calc(100dvw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  --sadaqah-safe-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  --sadaqah-fit-width: min(var(--sadaqah-safe-width), calc(var(--sadaqah-safe-height) * var(--sadaqah-page-ratio)));
  width: 100dvw !important;
  max-width: none !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  padding: 0 !important;
  overflow: hidden !important;
}

body.quran-page-active .sadaqah-reader.reader-tools-open,
body.quran-page-active .sadaqah-reader.reader-auto-tools {
  --tmkeen-nav-top-space: 156px;
  --tmkeen-nav-bottom-space: 184px;
  --sadaqah-safe-height: calc(
    100dvh
    - var(--tmkeen-nav-top-space)
    - var(--tmkeen-page-top-gap)
    - var(--tmkeen-nav-bottom-space)
    - env(safe-area-inset-top, 0px)
    - env(safe-area-inset-bottom, 0px)
  );
}

body.quran-page-active .app-shell,
body.quran-page-active .app-content {
  width: 100dvw !important;
  max-width: none !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
}

body.quran-page-active .sadaqah-reader .quran-page-stage {
  min-height: 100dvh !important;
  height: 100dvh !important;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important;
  place-items: center !important;
  align-items: center !important;
  justify-items: center !important;
  overflow: hidden !important;
}

body.quran-page-active .sadaqah-reader.reader-tools-open .quran-page-stage,
body.quran-page-active .sadaqah-reader.reader-auto-tools .quran-page-stage {
  padding:
    calc(var(--tmkeen-nav-top-space) + var(--tmkeen-page-top-gap) + env(safe-area-inset-top, 0px))
    env(safe-area-inset-right, 0px)
    calc(var(--tmkeen-nav-bottom-space) + env(safe-area-inset-bottom, 0px))
    env(safe-area-inset-left, 0px) !important;
}

body.quran-page-active .sadaqah-reader .reader-mushaf-leaf,
body.quran-page-active .sadaqah-reader .staticMushaf-mushaf-leaf,
body.quran-page-active .sadaqah-reader .staticMushaf-page-shell,
body.quran-page-active .sadaqah-reader .sadaqah-spread-shell,
body.quran-page-active .sadaqah-reader .sadaqah-spread {
  width: var(--sadaqah-fit-width) !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 auto !important;
  overflow: visible !important;
}

body.quran-page-active .sadaqah-reader .sadaqah-spread-page,
body.quran-page-active .sadaqah-reader .sadaqah-page-frame,
body.quran-page-active .sadaqah-reader .sadaqah-book-page-image {
  width: 100% !important;
  max-width: none !important;
}

body.quran-page-active .sadaqah-reader .sadaqah-page-frame {
  aspect-ratio: 1800 / 2800;
}

body.quran-page-active .sadaqah-reader .sadaqah-book-page-image {
  display: block;
  height: auto !important;
  max-height: none !important;
}

@media (min-width: 921px) {
  body.quran-page-active .sadaqah-reader {
    --sadaqah-fit-width: min(var(--sadaqah-safe-width), calc(var(--sadaqah-safe-height) * var(--sadaqah-spread-ratio)));
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread {
    display: flex !important;
    direction: rtl;
    align-items: center;
    justify-content: center;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page {
    display: block !important;
    flex: 0 0 50% !important;
    width: 50% !important;
  }
}

@media (max-width: 920px) and (orientation: portrait) {
  body.quran-page-active .sadaqah-reader .sadaqah-spread {
    display: block !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page {
    display: none !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page.is-current,
  body.quran-page-active .sadaqah-reader .sadaqah-spread-page:only-child {
    display: block !important;
    width: 100% !important;
  }
}

body.quran-page-active .sadaqah-reader > .quran-reader-exit-button {
  display: none !important;
}

body.quran-page-active .sadaqah-reader .tmkeen-reader-topbar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 62;
  display: grid;
  direction: ltr;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 4px max(12px, env(safe-area-inset-left)) 4px max(12px, env(safe-area-inset-right));
  border: 0;
  border-radius: 0;
  background:
    linear-gradient(180deg, rgba(48, 64, 38, 0.96), rgba(34, 50, 26, 0.98));
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04);
  backdrop-filter: none;
}

body.quran-page-active .sadaqah-reader .tmkeen-reader-topbar .quran-icon-button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.94);
  background: rgba(255, 255, 255, 0.035);
  box-shadow: none;
}

body.quran-page-active .sadaqah-reader .tmkeen-reader-topbar .quran-icon-button:hover,
body.quran-page-active .sadaqah-reader .tmkeen-reader-topbar .quran-icon-button:focus-visible {
  background: rgba(255, 255, 255, 0.08);
}

body.quran-page-active .sadaqah-reader .tmkeen-search-pill {
  position: relative;
  display: block;
  width: 100%;
  height: 32px;
  border: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.075);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
}

body.quran-page-active .sadaqah-reader .tmkeen-search-glyph::before,
body.quran-page-active .sadaqah-reader .tmkeen-search-glyph::after {
  content: "";
  position: absolute;
  opacity: 0.38;
}

body.quran-page-active .sadaqah-reader .tmkeen-search-glyph::before {
  top: 8px;
  inset-inline-start: 12px;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(1, 8, 3, 0.78);
  border-radius: 50%;
}

body.quran-page-active .sadaqah-reader .tmkeen-search-glyph::after {
  top: 20px;
  inset-inline-start: 23px;
  width: 8px;
  height: 2px;
  border-radius: 999px;
  background: rgba(1, 8, 3, 0.78);
  transform: rotate(45deg);
}

body.quran-page-active .sadaqah-reader .quran-surah-ribbon {
  top: 46px !important;
  z-index: 61;
  width: 100% !important;
  height: 110px !important;
  padding: 12px max(12px, env(safe-area-inset-left)) 14px max(12px, env(safe-area-inset-right)) !important;
  gap: clamp(14px, 3.8vw, 40px) !important;
  border: 0 !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.12), transparent 18% 82%, rgba(0, 0, 0, 0.12)),
    linear-gradient(180deg, rgba(23, 39, 15, 0.76) 0%, rgba(19, 35, 12, 0.68) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18) !important;
  backdrop-filter: blur(12px) saturate(108%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(108%) !important;
  scroll-padding-inline: 50%;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  user-select: none;
  cursor: grab;
}

body.quran-page-active .sadaqah-reader .quran-surah-ribbon.is-navigator-dragging,
body.quran-page-active .sadaqah-reader .quran-quarter-wheel.is-navigator-dragging {
  scroll-behavior: auto;
  cursor: grabbing;
}

body.quran-page-active .sadaqah-reader .quran-surah-ribbon::before,
body.quran-page-active .sadaqah-reader .quran-surah-ribbon::after {
  content: "";
  flex: 0 0 clamp(42px, 12vw, 130px);
}

body.quran-page-active .sadaqah-reader .surah-wheel-item {
  flex: 0 0 clamp(160px, 24vw, 250px);
  grid-template-columns: minmax(0, 1fr);
  min-height: 68px;
  padding: 10px 16px;
  border: 0;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.78);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.12), rgba(4, 17, 7, 0.34), rgba(0, 0, 0, 0.12));
  box-shadow: none;
  opacity: 0.94;
  transform: none;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transition: flex-basis 0.18s ease, min-height 0.18s ease, color 0.18s ease, opacity 0.18s ease, background 0.18s ease;
}

body.quran-page-active .sadaqah-reader .surah-wheel-item span {
  display: none;
}

body.quran-page-active .sadaqah-reader .surah-wheel-item strong {
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  font-family: "Sadaqah Uthmanic Hafs", "Sadaqah Uthman TN", "Amiri Quran", serif;
  font-size: clamp(1.19rem, min(2.45vw, 3.36vh), 1.78rem);
  font-weight: 400;
  line-height: 1.24;
  letter-spacing: 0;
  white-space: nowrap;
}

body.quran-page-active .sadaqah-reader .surah-wheel-item strong::before {
  content: none;
}

body.quran-page-active .sadaqah-reader .surah-wheel-item.current {
  flex-basis: clamp(281px, calc(44vw + 6px), 402px);
  min-height: 92px;
  color: #fff;
  background: transparent;
  opacity: 1;
  transform: none;
}

body.quran-page-active .sadaqah-reader .surah-wheel-item.is-centered:not(.current) {
  color: rgba(255, 255, 255, 0.92);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.1), rgba(12, 35, 20, 0.28), rgba(0, 0, 0, 0.1));
  opacity: 1;
}

body.quran-page-active .sadaqah-reader .surah-wheel-item.current::before {
  content: "";
  position: absolute;
  inset: -3px 5px;
  z-index: -1;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 132'%3E%3Cpath d='M10 38H190L260 4L330 38H510V94H330L260 128L190 94H10Z' fill='%232b3d20' fill-opacity='.76' stroke='%2375846b' stroke-width='8' stroke-linejoin='miter'/%3E%3Cpath d='M18 46H196L260 16L324 46H502V86H324L260 116L196 86H18Z' fill='none' stroke='%23ffffff' stroke-opacity='.10' stroke-width='2'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

body.quran-page-active .sadaqah-reader .surah-wheel-item.current strong {
  overflow: visible;
  text-overflow: clip;
  font-size: clamp(1.42rem, min(2.88vw, 3.94vh), 2.1rem);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
}

body.quran-page-active .sadaqah-reader .quran-surah-ribbon.is-previewing .surah-wheel-item.current:not(.is-centered) {
  flex-basis: clamp(150px, 18vw, 232px);
  min-height: 66px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.08);
  opacity: 0.92;
}

body.quran-page-active .sadaqah-reader .quran-surah-ribbon.is-previewing .surah-wheel-item.current:not(.is-centered)::before {
  content: none;
}

body.quran-page-active .sadaqah-reader .quran-surah-ribbon.is-previewing .surah-wheel-item.current:not(.is-centered) strong {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(1.29rem, min(2.78vw, 3.65vh), 1.94rem);
}

body.quran-page-active .sadaqah-reader .quran-reader-bottom-panel {
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 144px) !important;
  z-index: 63;
  width: 100% !important;
  padding-inline: 18px !important;
}

body.quran-page-active .sadaqah-reader .reader-round-button {
  width: 58px;
  height: 58px;
  border: 0;
  color: #fffdf1;
  background: rgba(255, 255, 255, 0.095);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    0 8px 18px rgba(0, 0, 0, 0.16);
}

body.quran-page-active .sadaqah-reader .bookmark-toggle {
  display: none;
}

body.quran-page-active .sadaqah-reader .reader-dua-action-rail {
  position: fixed;
  left: 0;
  top: 52%;
  z-index: 66;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 56px;
  padding: 14px 7px;
  border-radius: 0 12px 12px 0;
  background: rgba(124, 151, 101, 0.72);
  box-shadow: none;
  backdrop-filter: blur(6px);
  transform: translateY(-50%) translateX(-8px);
}

body.quran-page-active .sadaqah-reader.reader-tools-open .reader-dua-action-rail,
body.quran-page-active .sadaqah-reader.reader-auto-tools .reader-dua-action-rail,
body.quran-page-active .sadaqah-reader.reader-dua-panel-open .reader-dua-action-rail {
  transform: translateY(-50%) translateX(0);
}

body.quran-page-active .sadaqah-reader .reader-dua-action-rail::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid rgba(124, 151, 101, 0.72);
  transform: translateY(-50%);
}

body.quran-page-active .sadaqah-reader .reader-dua-action-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  color: #fffdf1;
  background: rgba(255, 255, 255, 0.17);
  box-shadow: none;
}

body.quran-page-active .sadaqah-reader .reader-dua-action-button.is-active,
body.quran-page-active .sadaqah-reader .reader-dua-action-button:active {
  background: rgba(255, 255, 255, 0.27);
}

body.quran-page-active .sadaqah-reader .reader-dua-action-button svg {
  width: 28px;
  height: 28px;
  overflow: visible;
}

body.quran-page-active .sadaqah-reader .reader-dua-next svg path {
  fill: currentColor;
  stroke: none;
}

body.quran-page-active .sadaqah-reader .reader-dua-next svg path:last-child {
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
}

body.quran-page-active .sadaqah-reader .reader-dua-toggle svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.quran-page-active .sadaqah-reader .reader-dua-panel {
  position: fixed;
  left: 66px;
  top: 132px;
  z-index: 65;
  width: clamp(294px, 14.5vw, 360px);
  max-height: calc(100dvh - 190px);
  overflow: auto;
  border-radius: 8px;
  background: #fff9e8;
  color: #11120f;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

body.quran-page-active .sadaqah-reader.reader-dua-panel-open .reader-dua-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

body.quran-page-active .sadaqah-reader .reader-dua-panel h2 {
  margin: 0;
  padding: 7px 14px 8px;
  border-radius: 8px 8px 0 0;
  background: #a79a6d;
  color: #fff;
  font-family: "Amiri Quran", "Scheherazade New", serif;
  font-size: 1.42rem;
  font-weight: 800;
  line-height: 1.05;
  text-align: center;
  letter-spacing: 0;
}

body.quran-page-active .sadaqah-reader .reader-dua-panel ul {
  display: grid;
  gap: 26px;
  margin: 0;
  padding: 12px 24px 26px 14px;
  list-style-position: outside;
}

body.quran-page-active .sadaqah-reader .reader-dua-panel li {
  padding-inline-start: 2px;
  font-family: "Amiri Quran", "Scheherazade New", serif;
  font-size: 1.22rem;
  font-weight: 500;
  line-height: 1.75;
  text-align: right;
}

body.quran-page-active .sadaqah-reader .reader-dua-panel li::marker {
  font-size: 0.82em;
  color: #11120f;
}

body.quran-page-active .sadaqah-reader .reader-dua-action-rail,
body.quran-page-active .sadaqah-reader .reader-dua-panel {
  display: none !important;
}

body.quran-page-active .sadaqah-reader .quran-quarter-label {
  position: fixed;
  inset-inline: 0;
  bottom: calc(max(12px, env(safe-area-inset-bottom)) + 122px);
  z-index: 59;
  box-sizing: border-box;
  padding-inline: clamp(28px, 4vw, 72px);
  color: rgba(255, 255, 255, 0.94);
  font-family: "Sadaqah Uthman TN", "Sadaqah Uthmanic Hafs", "Amiri Quran", serif;
  font-size: clamp(1.56rem, min(3.6vw, 4.4vh), 2.42rem);
  font-weight: 400;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.36);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease;
}

body.quran-page-active .sadaqah-reader.reader-tools-open .quran-quarter-label,
body.quran-page-active .sadaqah-reader.reader-auto-tools .quran-quarter-label {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

body.quran-page-active .sadaqah-reader .quran-page-dots.quran-quarter-wheel {
  bottom: max(0px, env(safe-area-inset-bottom)) !important;
  z-index: 58;
  width: 100% !important;
  height: 118px;
  margin: 0 !important;
  padding: 24px 0 28px !important;
  gap: 26px;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 18% 82%, rgba(0, 0, 0, 0.18)),
    linear-gradient(180deg, #18270f 0%, #14240c 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.025),
    0 -10px 22px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: none !important;
  scroll-padding-inline: calc(50% - 38px);
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  user-select: none;
  cursor: grab;
}

body.quran-page-active .sadaqah-reader .quran-quarter-wheel::before,
body.quran-page-active .sadaqah-reader .quran-quarter-wheel::after {
  content: "";
  flex: 0 0 clamp(46px, 9vw, 74px);
}

body.quran-page-active .sadaqah-reader .quarter-wheel-item {
  position: relative;
  flex: 0 0 40px;
  inline-size: 40px;
  block-size: 40px;
  margin-inline: 0;
  border: 0;
  border-radius: 8px;
  color: #07180e;
  background: linear-gradient(180deg, #fffdf0, #f7efd2);
  box-shadow:
    7px 0 0 rgba(210, 190, 113, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.62);
  opacity: 1;
  overflow: visible;
  isolation: isolate;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  transition: flex-basis 0.18s ease, inline-size 0.18s ease, block-size 0.18s ease, border-color 0.18s ease, outline-color 0.18s ease, box-shadow 0.18s ease;
}

body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-juz-start {
  outline: 0;
}

body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-juz-start::before {
  content: "";
  position: absolute;
  inset: -13px;
  z-index: -2;
  border: 3px solid rgba(45, 124, 53, 0.86);
  border-radius: 7px;
  transform: rotate(-45deg);
  pointer-events: none;
}

body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-juz-start::after {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border: 3px solid rgba(212, 194, 105, 0.95);
  border-radius: 8px;
  pointer-events: none;
}

body.quran-page-active .sadaqah-reader .quarter-wheel-item .quran-page-number-text {
  position: relative;
  z-index: 2;
  font-family: "Amiri Quran", "Scheherazade New", serif;
  font-size: 1.15rem;
  font-weight: 700;
}

body.quran-page-active .sadaqah-reader .quarter-wheel-item.current,
body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-centered {
  flex-basis: 40px;
  inline-size: 40px;
  block-size: 40px;
  margin-inline: 15px;
  border: 0;
  outline: 0;
  color: #07180e;
  background: linear-gradient(180deg, #fffdf0, #f7efd2);
  box-shadow:
    7px 0 0 rgba(210, 190, 113, 0.9),
    inset 0 0 0 1px rgba(255, 255, 255, 0.62);
}

body.quran-page-active .sadaqah-reader .quarter-wheel-item.current::before,
body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-centered::before {
  content: "";
  position: absolute;
  inset: -35px;
  z-index: -2;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M0 28H36L50 0L64 28H100V72H64L50 100L36 72H0Z' fill='none' stroke='white' stroke-width='5' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-45deg);
  pointer-events: none;
}

body.quran-page-active .sadaqah-reader .quarter-wheel-item.current::after,
body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-centered::after {
  display: none;
  content: none;
}

body.quran-page-active .sadaqah-reader .quarter-wheel-item.current .quran-page-number-text,
body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-centered .quran-page-number-text {
  font-size: 1.15rem;
}

body.quran-page-active .sadaqah-reader .quran-quarter-wheel.is-previewing .quarter-wheel-item.current:not(.is-centered) {
  flex-basis: 40px;
  inline-size: 40px;
  block-size: 40px;
  margin-inline: 0;
  border: 0;
  outline: 0;
  outline-offset: 0;
  box-shadow: 7px 0 0 rgba(211, 194, 128, 0.92);
}

body.quran-page-active .sadaqah-reader .quran-quarter-wheel.is-previewing .quarter-wheel-item.current.is-juz-start:not(.is-centered) {
  outline: 0;
}

@media (max-width: 720px) {
  body.quran-page-active .sadaqah-reader .tmkeen-reader-topbar {
    height: 44px;
    padding: 6px 8px;
  }

  body.quran-page-active .sadaqah-reader.reader-tools-open,
  body.quran-page-active .sadaqah-reader.reader-auto-tools {
    --tmkeen-nav-top-space: 136px;
    --tmkeen-nav-bottom-space: 180px;
  }

  body.quran-page-active .sadaqah-reader .quran-surah-ribbon {
    top: 44px !important;
    height: 92px !important;
    padding-block: 9px 12px !important;
    gap: 14px !important;
  }

  body.quran-page-active .sadaqah-reader .surah-wheel-item {
    flex-basis: clamp(128px, 36vw, 180px);
    min-height: 58px;
    padding-inline: 12px;
  }

  body.quran-page-active .sadaqah-reader .surah-wheel-item.current {
    flex-basis: clamp(252px, calc(68vw + 6px), 342px);
    min-height: 80px;
  }

  body.quran-page-active .sadaqah-reader .surah-wheel-item strong {
    font-size: clamp(1.04rem, 4.52vw, 1.56rem);
  }

  body.quran-page-active .sadaqah-reader .surah-wheel-item.current strong {
    font-size: clamp(1.23rem, 5.18vw, 1.82rem);
  }

  body.quran-page-active .sadaqah-reader .quran-quarter-label {
    bottom: calc(max(8px, env(safe-area-inset-bottom)) + 124px);
    padding-inline: clamp(24px, 6.8vw, 46px);
    font-size: clamp(1.35rem, 6.6vw, 2rem);
  }

  body.quran-page-active .sadaqah-reader .quran-reader-bottom-panel {
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 138px) !important;
    padding-inline: 16px !important;
  }

  body.quran-page-active .sadaqah-reader .reader-round-button {
    width: 54px;
    height: 54px;
  }

  body.quran-page-active .sadaqah-reader .reader-dua-action-rail {
    top: 48%;
    width: clamp(76px, 15vw, 108px);
    padding: 18px 9px;
    gap: 28px;
  }

  body.quran-page-active .sadaqah-reader .reader-dua-action-button {
    width: clamp(58px, 11vw, 80px);
    height: clamp(58px, 11vw, 80px);
  }

  body.quran-page-active .sadaqah-reader .reader-dua-action-button svg {
    width: 38px;
    height: 38px;
  }

  body.quran-page-active .sadaqah-reader .reader-dua-panel {
    top: max(40px, env(safe-area-inset-top));
    right: max(0px, env(safe-area-inset-right));
    bottom: max(10px, env(safe-area-inset-bottom));
    left: clamp(82px, 18vw, 128px);
    width: auto;
    max-height: none;
    border-radius: 16px;
  }

  body.quran-page-active .sadaqah-reader .reader-dua-panel h2 {
    padding-block: 11px 10px;
    border-radius: 16px 16px 0 0;
    font-size: 2rem;
  }

  body.quran-page-active .sadaqah-reader .reader-dua-panel ul {
    gap: 54px;
    padding: 18px 34px 44px 18px;
  }

  body.quran-page-active .sadaqah-reader .reader-dua-panel li {
    font-size: 2rem;
    line-height: 1.72;
  }

  body.quran-page-active .sadaqah-reader .quran-page-dots.quran-quarter-wheel {
    height: 112px;
    padding-block: 24px 28px !important;
    gap: 26px;
  }

  body.quran-page-active .sadaqah-reader .quarter-wheel-item {
    flex-basis: 40px;
    inline-size: 40px;
    block-size: 40px;
  }

  body.quran-page-active .sadaqah-reader .quarter-wheel-item.current,
  body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-centered {
    flex-basis: 40px;
    inline-size: 40px;
    block-size: 40px;
    margin-inline: 15px;
  }

  body.quran-page-active .sadaqah-reader .quran-quarter-wheel.is-previewing .quarter-wheel-item.current:not(.is-centered) {
    flex-basis: 40px;
    inline-size: 40px;
    block-size: 40px;
    margin-inline: 0;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  body.quran-page-active .sadaqah-reader.reader-tools-open,
  body.quran-page-active .sadaqah-reader.reader-auto-tools {
    --tmkeen-nav-top-space: 76px;
    --tmkeen-nav-bottom-space: 82px;
  }

  body.quran-page-active .sadaqah-reader .tmkeen-reader-topbar {
    height: 30px;
    padding-block: 3px;
    grid-template-columns: auto minmax(0, 1fr);
  }

  body.quran-page-active .sadaqah-reader .tmkeen-reader-topbar .quran-icon-button {
    width: 26px;
    height: 26px;
  }

  body.quran-page-active .sadaqah-reader .tmkeen-search-pill {
    height: 24px;
  }

  body.quran-page-active .sadaqah-reader .quran-surah-ribbon {
    top: 30px !important;
    height: 46px !important;
    padding-block: 4px 6px !important;
    gap: 12px !important;
  }

  body.quran-page-active .sadaqah-reader .quran-surah-ribbon::before,
  body.quran-page-active .sadaqah-reader .quran-surah-ribbon::after {
    flex-basis: clamp(24px, 6vw, 72px);
  }

  body.quran-page-active .sadaqah-reader .surah-wheel-item {
    flex-basis: clamp(126px, 19vw, 180px);
    min-height: 34px;
    padding: 3px 10px;
  }

  body.quran-page-active .sadaqah-reader .surah-wheel-item.current {
    flex-basis: clamp(218px, calc(32vw + 6px), 298px);
    min-height: 46px;
  }

  body.quran-page-active .sadaqah-reader .surah-wheel-item strong {
    font-size: clamp(0.96rem, 3.08vh, 1.31rem);
    line-height: 1.1;
  }

  body.quran-page-active .sadaqah-reader .surah-wheel-item.current strong {
    font-size: clamp(1.08rem, 3.65vh, 1.49rem);
  }

  body.quran-page-active .sadaqah-reader .quran-quarter-label {
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 50px);
    font-size: clamp(1rem, 4vh, 1.36rem);
  }

  body.quran-page-active .sadaqah-reader .quran-page-dots.quran-quarter-wheel {
    height: 64px;
    padding-block: 14px 15px !important;
    gap: 18px;
  }

  body.quran-page-active .sadaqah-reader .quran-quarter-wheel::before,
  body.quran-page-active .sadaqah-reader .quran-quarter-wheel::after {
    flex-basis: clamp(34px, 8vw, 68px);
  }

  body.quran-page-active .sadaqah-reader .quarter-wheel-item,
  body.quran-page-active .sadaqah-reader .quarter-wheel-item.current,
  body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-centered {
    flex-basis: 30px;
    inline-size: 30px;
    block-size: 30px;
  }

  body.quran-page-active .sadaqah-reader .quarter-wheel-item.current,
  body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-centered {
    margin-inline: 12px;
  }

  body.quran-page-active .sadaqah-reader .quarter-wheel-item.current::before,
  body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-centered::before {
    inset: -29px;
  }

  body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-juz-start::before {
    inset: -11px;
    border-width: 2px;
  }

  body.quran-page-active .sadaqah-reader .quarter-wheel-item.is-juz-start::after {
    inset: -8px;
    border-width: 2px;
  }

  body.quran-page-active .sadaqah-reader .quran-quarter-wheel.is-previewing .quarter-wheel-item.current:not(.is-centered) {
    flex-basis: 30px;
    inline-size: 30px;
    block-size: 30px;
  }

  body.quran-page-active .sadaqah-reader .quran-reader-bottom-panel {
    bottom: calc(max(6px, env(safe-area-inset-bottom)) + 84px) !important;
  }

  body.quran-page-active .sadaqah-reader .reader-round-button {
    width: 42px;
    height: 42px;
  }
}

@media (orientation: landscape) {
  body.quran-page-active .sadaqah-reader {
    --sadaqah-fit-width: var(--sadaqah-safe-width);
  }

  body.quran-page-active .sadaqah-reader .quran-page-stage {
    align-items: start !important;
    justify-items: center !important;
    place-items: start center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread {
    display: block !important;
    direction: rtl;
    width: var(--sadaqah-fit-width) !important;
    max-width: none !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page {
    display: none !important;
    flex: none !important;
    width: 100% !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page.is-current,
  body.quran-page-active .sadaqah-reader .sadaqah-spread-page:only-child {
    display: block !important;
    width: 100% !important;
  }
}

@media (min-width: 921px) {
  body.quran-page-active .sadaqah-reader {
    --sadaqah-fit-width: min(
      var(--sadaqah-safe-width),
      calc(var(--sadaqah-safe-height) * var(--sadaqah-spread-ratio))
    );
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread {
    display: flex !important;
    direction: rtl;
    align-items: center;
    justify-content: center;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page,
  body.quran-page-active .sadaqah-reader .sadaqah-spread-page.is-current,
  body.quran-page-active .sadaqah-reader .sadaqah-spread-page:only-child {
    display: block !important;
    flex: 0 0 50% !important;
    width: 50% !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page + .sadaqah-spread-page {
    margin-inline-start: 0 !important;
  }
}

@media (min-width: 1200px) and (min-aspect-ratio: 3 / 2) {
  body.quran-page-active .sadaqah-reader {
    --sadaqah-fit-width: var(--sadaqah-safe-width);
  }

  body.quran-page-active .sadaqah-reader .quran-page-stage {
    align-items: start !important;
    justify-items: center !important;
    place-items: start center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread {
    display: block !important;
    width: var(--sadaqah-fit-width) !important;
    max-width: none !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page {
    display: none !important;
    flex: none !important;
    width: 100% !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page.is-current,
  body.quran-page-active .sadaqah-reader .sadaqah-spread-page:only-child {
    display: block !important;
    width: 100% !important;
  }
}

@media (orientation: landscape) {
  body.quran-page-active .sadaqah-reader {
    --sadaqah-fit-width: var(--sadaqah-safe-width);
  }

  body.quran-page-active .sadaqah-reader .quran-page-stage {
    align-items: start !important;
    justify-items: center !important;
    place-items: start center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread {
    display: block !important;
    direction: rtl;
    width: var(--sadaqah-fit-width) !important;
    max-width: none !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page {
    display: none !important;
    flex: none !important;
    width: 100% !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page.is-current,
  body.quran-page-active .sadaqah-reader .sadaqah-spread-page:only-child {
    display: block !important;
    width: 100% !important;
  }
}

body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .quran-page-stage,
body.quran-page-active.quran-landscape-reading .quran-page-stage,
body.quran-page-active.quran-landscape-flat .quran-page-stage,
body.quran-page-active.quran-landscape-rotated .quran-page-stage {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  touch-action: pan-y !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-y: contain !important;
}

body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread-shell,
body.quran-page-active.quran-landscape-reading .sadaqah-reader .sadaqah-spread-shell,
body.quran-page-active.quran-landscape-flat .sadaqah-reader .sadaqah-spread-shell,
body.quran-page-active.quran-landscape-rotated .sadaqah-reader .sadaqah-spread-shell {
  align-self: start !important;
  justify-self: center !important;
}

body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread-shell,
body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-page-frame,
body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .staticMushaf-page-shell {
  min-height: calc(var(--sadaqah-fit-width) / var(--sadaqah-page-ratio)) !important;
  height: calc(var(--sadaqah-fit-width) / var(--sadaqah-page-ratio)) !important;
}

@media (orientation: landscape) {
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen {
    --sadaqah-safe-width: 100dvw;
    --sadaqah-safe-height: 100dvh;
    --sadaqah-fit-width: var(--sadaqah-fullscreen-fit-width, 100dvw);
  }

  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread {
    display: block !important;
    direction: rtl;
    width: var(--sadaqah-fit-width) !important;
    max-width: none !important;
  }

  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread-page {
    display: none !important;
    flex: none !important;
    width: 100% !important;
  }

  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread-page.is-current,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread-page:only-child {
    display: block !important;
    width: 100% !important;
  }

  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread-shell,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-page-frame,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .staticMushaf-page-shell {
    width: var(--sadaqah-fit-width) !important;
    min-height: calc(var(--sadaqah-fit-width) / var(--sadaqah-page-ratio)) !important;
    height: calc(var(--sadaqah-fit-width) / var(--sadaqah-page-ratio)) !important;
  }

  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread-shell,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .staticMushaf-page-shell {
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    margin-inline: 0 !important;
    transform: translateX(-50%) !important;
  }
}

@media (orientation: landscape) and (max-height: 680px) {
  body.quran-page-active .sadaqah-reader:not(.reader-app-fullscreen) {
    --sadaqah-safe-width: calc(100dvw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
    --sadaqah-fit-width: var(--sadaqah-safe-width);
  }

  body.quran-page-active .sadaqah-reader:not(.reader-app-fullscreen) .quran-page-stage {
    align-items: start !important;
    justify-items: center !important;
    place-items: start center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.quran-page-active .sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread {
    display: block !important;
    direction: rtl;
    width: var(--sadaqah-fit-width) !important;
    max-width: none !important;
  }

  body.quran-page-active .sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread-page {
    display: none !important;
    flex: none !important;
    width: 100% !important;
  }

  body.quran-page-active .sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread-page.is-current,
  body.quran-page-active .sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread-page:only-child {
    display: block !important;
    width: 100% !important;
  }

  body.quran-page-active .sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread-shell,
  body.quran-page-active .sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-page-frame,
  body.quran-page-active .sadaqah-reader:not(.reader-app-fullscreen) .staticMushaf-page-shell {
    width: var(--sadaqah-fit-width) !important;
    min-height: calc(var(--sadaqah-fit-width) / var(--sadaqah-page-ratio)) !important;
    height: calc(var(--sadaqah-fit-width) / var(--sadaqah-page-ratio)) !important;
  }
}

body.quran-page-active.quran-reader-night,
body.quran-page-active.quran-reader-night .app-shell,
body.quran-page-active.quran-reader-night .app-content,
body.quran-page-active .sadaqah-reader.reader-night,
body.quran-page-active .sadaqah-reader.reader-night .quran-page-stage {
  background: var(--quran-geometry-night-bg) !important;
  background-size: var(--quran-geometry-size) !important;
  background-position: var(--quran-geometry-position) !important;
  background-repeat: repeat !important;
  color: #f6ecd2 !important;
  color-scheme: dark;
}

body.quran-page-active.quran-reader-night .bottom-nav,
body.quran-page-active .sadaqah-reader.reader-night .quran-topbar,
body.quran-page-active .sadaqah-reader.reader-night .quran-surah-ribbon,
body.quran-page-active .sadaqah-reader.reader-night .quran-reader-bottom-panel,
body.quran-page-active .sadaqah-reader.reader-night .quran-page-dots {
  background: #000 !important;
  color: #f6ecd2 !important;
  color-scheme: dark;
}

body.quran-page-active .sadaqah-reader.reader-night .surah-wheel-item,
body.quran-page-active .sadaqah-reader.reader-night .quran-reading-history-trigger,
body.quran-page-active .sadaqah-reader.reader-night .reader-part-title,
body.quran-page-active .sadaqah-reader.reader-night .sadaqah-page-juz-title {
  color: #f6ecd2 !important;
  fill: #f6ecd2 !important;
}

body.quran-page-active .sadaqah-reader.reader-night .surah-wheel-item.current {
  color: #fff5da !important;
  text-shadow: 0 1px 8px rgba(246, 236, 210, 0.2);
}

body.quran-page-active .sadaqah-reader.reader-night .staticMushaf-page-shell,
body.quran-page-active .sadaqah-reader.reader-night .sadaqah-spread,
body.quran-page-active .sadaqah-reader.reader-night .sadaqah-spread-shell,
body.quran-page-active .sadaqah-reader.reader-night .sadaqah-spread-page,
body.quran-page-active .sadaqah-reader.reader-night .sadaqah-page-frame,
body.quran-page-active .sadaqah-reader.reader-night .sadaqah-book-page-image {
  background: #000 !important;
  box-shadow: none !important;
}

body.quran-page-active .sadaqah-reader.reader-night .sadaqah-book-page-image,
body.quran-page-active .sadaqah-reader.reader-night .sadaqah-opening-decor {
  filter: grayscale(1) invert(1) sepia(0.18) saturate(0.72) brightness(0.94) contrast(1.18) !important;
}

body.quran-page-active .sadaqah-reader.reader-night .sadaqah-ayah-highlight {
  background: rgba(246, 236, 210, 0.22) !important;
  box-shadow: 0 0 0 1px rgba(246, 236, 210, 0.32) inset;
}

body.quran-page-active .sadaqah-reader.reader-night .reader-round-button {
  color: #f6ecd2;
  border-color: rgba(246, 236, 210, 0.24);
  background:
    radial-gradient(circle at 50% 0, rgba(246, 236, 210, 0.14), transparent 58%),
    rgba(246, 236, 210, 0.08);
}

body.quran-page-active .sadaqah-reader.reader-night .moon-toggle {
  color: #050505;
  background: rgba(246, 236, 210, 0.9) !important;
}

body.quran-page-active .sadaqah-reader.reader-night .moon-toggle::after {
  background: rgba(246, 236, 210, 0.9) !important;
}

body.quran-immersive:not(.quran-page-active) {
  background: var(--quran-geometry-bg) !important;
  background-size: var(--quran-geometry-size) !important;
  background-position: var(--quran-geometry-position) !important;
  background-repeat: repeat !important;
}

body.quran-immersive:not(.quran-page-active) .app-shell {
  background:
    linear-gradient(180deg, rgba(3, 31, 23, 0.78), rgba(3, 31, 23, 0.54)),
    var(--quran-geometry-bg) !important;
  background-size: auto, var(--quran-geometry-size) !important;
  background-position: center, var(--quran-geometry-position) !important;
  background-repeat: no-repeat, repeat !important;
}

body.quran-immersive:not(.quran-page-active) .quran-index-screen {
  width: 100%;
  min-height: 100dvh;
  padding-top: max(14px, env(safe-area-inset-top, 0px));
  background: transparent !important;
}

body.quran-immersive:not(.quran-page-active) .quran-index-hero {
  grid-template-columns: minmax(0, 1fr) clamp(92px, 22vw, 138px);
  gap: clamp(12px, 3.4vw, 24px);
  width: min(calc(100% - 24px), 820px);
  margin: 0 auto 12px;
  padding: clamp(18px, 4.2vw, 30px);
  border-radius: 18px;
  border-color: rgba(219, 198, 118, 0.34);
  background:
    linear-gradient(135deg, rgba(12, 61, 46, 0.94), rgba(2, 30, 23, 0.98)),
    radial-gradient(circle at 74% 8%, rgba(219, 198, 118, 0.18), transparent 32%) !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 248, 231, 0.08);
}

body.quran-immersive:not(.quran-page-active) .quran-index-hero::before {
  opacity: 0.16;
  background:
    linear-gradient(135deg, transparent 0 34px, rgba(219, 198, 118, 0.22) 34px 36px, transparent 36px 76px),
    var(--islamic-pattern);
  background-size: 104px 58px, 144px 144px;
}

body.quran-immersive:not(.quran-page-active) .quran-hero-copy {
  display: grid;
  align-content: center;
  min-width: 0;
}

body.quran-immersive:not(.quran-page-active) .quran-hero-kicker {
  margin: 0 0 10px;
  border-radius: 0;
  border-inline: 0;
  border-block-color: rgba(219, 198, 118, 0.36);
  padding: 5px 0;
  color: #f2d88b;
  background: transparent;
  font-size: clamp(0.84rem, 2.6vw, 1rem);
}

body.quran-immersive:not(.quran-page-active) .quran-index-hero h2 {
  margin: 0 0 12px;
  color: #fff9e8;
  font-size: clamp(2.15rem, 8.2vw, 4.1rem);
  line-height: 1;
  text-wrap: balance;
}

body.quran-immersive:not(.quran-page-active) .quran-last-position-card {
  display: grid;
  gap: 2px;
  width: min(100%, 310px);
  max-width: 100%;
  margin-block: 0 12px;
  border: 1px solid rgba(219, 198, 118, 0.34);
  border-radius: 12px;
  padding: 8px 12px;
  color: #fff8e3;
  background: rgba(0, 0, 0, 0.16);
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 248, 231, 0.05);
}

body.quran-immersive:not(.quran-page-active) .quran-last-position-card span {
  color: rgba(255, 248, 231, 0.68);
  font-size: 0.78rem;
  font-weight: 800;
}

body.quran-immersive:not(.quran-page-active) .quran-last-position-card strong {
  color: #f5df9d;
  font-size: clamp(0.96rem, 3vw, 1.2rem);
  font-weight: 900;
  line-height: 1.35;
}

body.quran-immersive:not(.quran-page-active) .quran-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}

body.quran-immersive:not(.quran-page-active) .quran-hero-stats span {
  min-width: 0;
  min-height: 48px;
  display: grid;
  place-items: center;
  gap: 0;
  border-radius: 12px;
  padding: 7px 8px;
  color: #fff8e3;
  background: rgba(255, 248, 231, 0.07);
}

body.quran-immersive:not(.quran-page-active) .quran-hero-stats b {
  display: block;
  color: #fff;
  font-size: clamp(1rem, 3.4vw, 1.32rem);
  line-height: 1.05;
}

body.quran-immersive:not(.quran-page-active) .quran-hero-stats small {
  display: block;
  color: rgba(255, 248, 231, 0.68);
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.2;
}

body.quran-immersive:not(.quran-page-active) .quran-book-cover {
  width: clamp(92px, 22vw, 138px);
  border-radius: 10px 18px 18px 10px;
  border-color: rgba(219, 198, 118, 0.78);
  border-inline-start-width: 9px;
  color: #f3dd99;
  background:
    radial-gradient(circle at 50% 18%, rgba(243, 221, 153, 0.23), transparent 38%),
    linear-gradient(90deg, rgba(255, 255, 255, 0.14), transparent 22%),
    linear-gradient(145deg, #0d4935, #031b14) !important;
  font-size: clamp(1rem, 3.2vw, 1.24rem);
  box-shadow:
    7px 7px 0 rgba(0, 0, 0, 0.22),
    inset 0 0 0 4px rgba(255, 248, 231, 0.06);
}

body.quran-immersive:not(.quran-page-active) .quran-book-cover span {
  display: block;
}

body.quran-immersive:not(.quran-page-active) .quran-book-cover em {
  display: block;
  margin-top: 4px;
  color: rgba(255, 248, 231, 0.7);
  font-size: 0.58em;
  font-style: normal;
  line-height: 1.35;
}

body.quran-immersive:not(.quran-page-active) .quran-search-band {
  width: min(calc(100% - 24px), 820px);
  margin: 0 auto 10px;
}

body.quran-immersive:not(.quran-page-active) .quran-index-search {
  min-height: 54px;
  border-radius: 14px;
  border-color: rgba(219, 198, 118, 0.46);
  padding-inline: 16px;
  color: #17251f;
  background: #f5efd9;
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

body.quran-immersive:not(.quran-page-active) .quran-index-title {
  min-height: 54px;
  top: 0;
  background: #a79d6b;
  color: #fffdf3;
  font-size: clamp(1.25rem, 5vw, 1.85rem);
}

@media (max-width: 430px) {
  body.quran-immersive:not(.quran-page-active) .quran-index-hero {
    grid-template-columns: minmax(0, 1fr) 92px;
    width: min(calc(100% - 18px), 820px);
    padding: 14px;
    border-radius: 16px;
  }

  body.quran-immersive:not(.quran-page-active) .quran-book-cover {
    width: 92px;
    font-size: 0.94rem;
  }

  body.quran-immersive:not(.quran-page-active) .quran-index-hero h2 {
    font-size: clamp(2rem, 10vw, 2.65rem);
  }

  body.quran-immersive:not(.quran-page-active) .quran-last-position-card {
    width: min(100%, 260px);
    margin-bottom: 10px;
    padding: 7px 10px;
  }

  body.quran-immersive:not(.quran-page-active) .quran-hero-stats {
    gap: 6px;
  }

  body.quran-immersive:not(.quran-page-active) .quran-hero-stats span {
    min-height: 44px;
    padding-inline: 5px;
  }
}

.quran-surah-table-head {
  display: none !important;
}

body.quran-page-active .sadaqah-reader .surah-wheel-item.current::before {
  background: linear-gradient(180deg, #17270f 0%, #13230c 100%) !important;
  clip-path: polygon(2% 31%, 37% 31%, 50% 2%, 63% 31%, 98% 31%, 98% 69%, 63% 69%, 50% 98%, 37% 69%, 2% 69%);
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.13),
    inset 0 0 0 8px rgba(117, 132, 107, 0.22);
}

@media (min-width: 900px) {
  body.quran-page-active .sadaqah-reader {
    --sadaqah-fit-width: min(
      var(--sadaqah-safe-width),
      calc(var(--sadaqah-safe-height) * var(--sadaqah-spread-ratio))
    ) !important;
  }

  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen {
    --sadaqah-fit-width: min(
      100dvw,
      calc(100dvh * var(--sadaqah-spread-ratio))
    ) !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-shell,
  body.quran-page-active .sadaqah-reader .staticMushaf-page-shell,
  body.quran-page-active .sadaqah-reader .sadaqah-spread,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread-shell,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .staticMushaf-page-shell,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread {
    width: var(--sadaqah-fit-width) !important;
    min-height: calc(var(--sadaqah-fit-width) / var(--sadaqah-spread-ratio)) !important;
    height: calc(var(--sadaqah-fit-width) / var(--sadaqah-spread-ratio)) !important;
    max-width: 100dvw !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread {
    display: flex !important;
    direction: rtl;
    align-items: stretch !important;
    justify-content: center !important;
    background: transparent !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page,
  body.quran-page-active .sadaqah-reader .sadaqah-spread-page.is-current,
  body.quran-page-active .sadaqah-reader .sadaqah-spread-page:only-child,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread-page,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread-page.is-current,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread-page:only-child {
    display: block !important;
    flex: 0 0 50% !important;
    width: 50% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-page-frame,
  body.quran-page-active .sadaqah-reader .sadaqah-book-page-image,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-page-frame,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-book-page-image {
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
  }

  body.quran-page-active .sadaqah-reader .quran-page-stage,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .quran-page-stage {
    align-items: center !important;
    justify-items: center !important;
    place-items: center !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

/* Phone reading crops only the SVG's empty side margins. The Quran artwork,
   ayah hit zones and highlights remain in one aligned coordinate layer. */
.sadaqah-page-crop-content {
  position: relative;
  width: 100%;
  height: 100%;
}

@media (max-width: 899px) {
  body.quran-page-active .sadaqah-reader .sadaqah-page-frame {
    aspect-ratio: var(--sadaqah-page-crop-width, 1800) / 2800 !important;
    overflow: hidden !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-page-crop-content {
    position: absolute;
    inset-block: 0;
    left: var(--sadaqah-page-content-left, 0%);
    width: var(--sadaqah-page-content-width, 100%);
    height: 100%;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-page-crop-content > .sadaqah-book-page-image {
    width: 100% !important;
    height: 100% !important;
  }
}

body.quran-page-active .quran-page-reader.sadaqah-reader .sadaqah-opening-page-image {
  background: transparent !important;
}

body.quran-page-active .ayah-reader-popover.ayah-mode-tafsir {
  inset-inline: auto !important;
  left: 50% !important;
  right: auto !important;
  width: min(620px, calc(100dvw - 12px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))) !important;
  max-width: none !important;
  margin-inline: 0 !important;
  transform: translate(-50%, var(--ayah-popover-shift-y, 0px)) !important;
}

@media (min-width: 900px) {
  body.quran-page-active .bottom-nav {
    display: none !important;
  }

  body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .quran-topbar,
  body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .quran-surah-ribbon,
  body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .quran-reader-bottom-panel,
  body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .quran-page-dots,
  body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .quran-reader-app-menu,
  body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .quran-reader-utility,
  body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .quran-reader-audio,
  body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .reader-dua-action-rail {
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .quran-page-stage {
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px) !important;
  }

  body.quran-page-active.quran-landscape-reading .quran-page-reader.staticMushaf-reader.sadaqah-reader,
  body.quran-page-active.quran-landscape-flat .quran-page-reader.staticMushaf-reader.sadaqah-reader,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) {
    --sadaqah-wide-spread-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    --sadaqah-fit-width: min(
      var(--sadaqah-safe-width),
      calc(var(--sadaqah-wide-spread-height) * var(--sadaqah-spread-ratio))
    ) !important;
  }

  body.quran-page-active.quran-landscape-reading .quran-page-reader.staticMushaf-reader.sadaqah-reader .reader-mushaf-leaf,
  body.quran-page-active.quran-landscape-flat .quran-page-reader.staticMushaf-reader.sadaqah-reader .reader-mushaf-leaf,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .reader-mushaf-leaf,
  body.quran-page-active.quran-landscape-reading .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-shell,
  body.quran-page-active.quran-landscape-flat .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-shell,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread-shell,
  body.quran-page-active.quran-landscape-reading .quran-page-reader.staticMushaf-reader.sadaqah-reader .staticMushaf-page-shell,
  body.quran-page-active.quran-landscape-flat .quran-page-reader.staticMushaf-reader.sadaqah-reader .staticMushaf-page-shell,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .staticMushaf-page-shell,
  body.quran-page-active.quran-landscape-reading .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread,
  body.quran-page-active.quran-landscape-flat .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread {
    width: var(--sadaqah-fit-width) !important;
    min-height: calc(var(--sadaqah-fit-width) / var(--sadaqah-spread-ratio)) !important;
    height: calc(var(--sadaqah-fit-width) / var(--sadaqah-spread-ratio)) !important;
    max-width: 100dvw !important;
  }

  body.quran-page-active.quran-landscape-reading .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread,
  body.quran-page-active.quran-landscape-flat .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread {
    display: flex !important;
    direction: rtl;
    align-items: stretch !important;
    justify-content: center !important;
  }

  body.quran-page-active.quran-landscape-reading .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-page,
  body.quran-page-active.quran-landscape-reading .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-page.is-current,
  body.quran-page-active.quran-landscape-reading .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-page:only-child,
  body.quran-page-active.quran-landscape-flat .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-page,
  body.quran-page-active.quran-landscape-flat .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-page.is-current,
  body.quran-page-active.quran-landscape-flat .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-page:only-child,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread-page,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread-page.is-current,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread-page:only-child {
    display: block !important;
    flex: 0 0 50% !important;
    width: 50% !important;
    height: 100% !important;
    min-height: 0 !important;
  }

  body.quran-page-active.quran-landscape-reading .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-page .sadaqah-page-frame,
  body.quran-page-active.quran-landscape-flat .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-page .sadaqah-page-frame,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread-page .sadaqah-page-frame,
  body.quran-page-active.quran-landscape-reading .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-page .sadaqah-book-page-image,
  body.quran-page-active.quran-landscape-flat .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-page .sadaqah-book-page-image,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread-page .sadaqah-book-page-image,
  body.quran-page-active.quran-landscape-reading .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-page .sadaqah-opening-decor,
  body.quran-page-active.quran-landscape-flat .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-page .sadaqah-opening-decor,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread-page .sadaqah-opening-decor {
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    aspect-ratio: auto !important;
  }

  body.quran-page-active.quran-landscape-reading .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-page .sadaqah-page-frame,
  body.quran-page-active.quran-landscape-flat .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-page .sadaqah-page-frame,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread-page .sadaqah-page-frame {
    overflow: hidden !important;
  }
}
/* Production UI/UX polish: v2.0.1-r12 */
:root {
  --green-950: #031d16;
  --green-900: #062b20;
  --green-800: #0b4937;
  --gold: #d8b761;
  --gold-soft: #f1dca5;
  --ivory: #fff8e7;
  --muted: rgba(255, 248, 231, 0.76);
  --line: rgba(216, 183, 97, 0.3);
  --surface: rgba(6, 43, 32, 0.9);
  --surface-raised: rgba(9, 58, 43, 0.9);
  --surface-quiet: rgba(255, 248, 231, 0.055);
  --control-radius: 8px;
  --card-radius: 8px;
  --control-height: 46px;
  --reader-paper: #f4efde;
  --reader-paper-warm: #fff7df;
  --reader-safe-edge: 1mm;
}

body:not(.quran-immersive) {
  background: linear-gradient(145deg, #02120d 0%, #03241a 48%, #07503c 100%);
}

body:not(.quran-immersive) .app-shell,
body:not(.quran-immersive) .app-shell::before {
  background-image: none;
}

body:not(.quran-immersive) .app-shell {
  background: linear-gradient(180deg, #031f17 0 184px, #052f23 184px 100%);
  border-color: rgba(216, 183, 97, 0.18);
}

.app-header {
  gap: 10px;
  border-bottom-color: rgba(216, 183, 97, 0.24);
  background: rgba(3, 31, 23, 0.97);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.card {
  border-radius: var(--card-radius);
  border-color: rgba(216, 183, 97, 0.28);
  background: linear-gradient(145deg, var(--surface-raised), var(--surface));
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 248, 231, 0.045);
}

.primary-button,
.ghost-button,
.icon-button,
.back-button,
.search-input,
.select-input,
.quran-tab,
.quran-menu-item,
.quran-menu-item .quran-tab,
.dua-category-option,
.tasbeeh-option,
.prayer-alert-toggle,
.phone-permission-panel,
.phone-permission-status,
.settings-status-note,
.settings-backup-output,
.reader-background-option,
.reader-segment,
.reader-segment button {
  border-radius: var(--control-radius);
}

.primary-button,
.ghost-button,
.icon-button,
.back-button,
.quran-tab,
.quran-menu-item,
.dua-category-option,
.prayer-alert-toggle {
  min-height: var(--control-height);
}

.prayer-alert-toggle {
  min-width: 92px;
  min-height: 48px;
}

.primary-button {
  background: linear-gradient(180deg, #efd487, var(--gold));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.ghost-button,
.icon-button,
.back-button,
.search-input,
.select-input {
  background: rgba(255, 248, 231, 0.065);
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}

.settings-details {
  overflow: clip;
}

.settings-details > summary {
  min-height: 68px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  color: var(--ivory);
  background: linear-gradient(180deg, rgba(255, 248, 231, 0.07), rgba(255, 248, 231, 0.025));
  cursor: pointer;
  list-style: none;
}

.settings-details > summary::-webkit-details-marker {
  display: none;
}

.settings-details > summary::after {
  content: "+";
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--gold-soft);
  background: rgba(255, 248, 231, 0.055);
  font-size: 1.22rem;
  line-height: 1;
}

.settings-details[open] > summary {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(216, 183, 97, 0.15), rgba(255, 248, 231, 0.035));
}

.settings-details[open] > summary::after {
  content: "−";
}

.settings-details > summary strong,
.settings-details > summary small {
  display: block;
}

.settings-details > summary small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.bottom-nav {
  min-height: calc(72px + env(safe-area-inset-bottom));
  gap: 4px;
  padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  border-top-color: rgba(216, 183, 97, 0.3);
  background: rgba(3, 31, 23, 0.97);
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
}

.bottom-nav button {
  min-width: 0;
  min-height: 52px;
  border-radius: var(--control-radius);
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.bottom-nav button.active {
  background: linear-gradient(180deg, #edd183, var(--gold));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.quran-index-menu,
.quran-index-panel,
.quran-index-hero,
.quran-last-position-card,
.quran-index-search,
.quran-surah-row {
  border-radius: var(--card-radius);
}

.quran-index-menu .quran-menu-item,
.quran-index-menu .quran-tab {
  min-height: 48px;
  border: 1px solid rgba(216, 183, 97, 0.24);
  background: rgba(255, 248, 231, 0.055);
}

.quran-index-menu .quran-tab.active {
  color: #08271d;
  border-color: rgba(216, 183, 97, 0.88);
  background: linear-gradient(180deg, #efd487, var(--gold));
}

.dua-category-list,
.dua-item-card,
.prayer-date-card,
.monthly-table-card,
.qibla-card,
.tasbeeh-card,
.settings-section {
  border-radius: var(--card-radius);
}

.prayer-row,
.enhanced-prayer-row {
  min-height: 62px;
  align-items: center;
}

.phone-permission-status.permission-granted,
.phone-permission-status.permission-active {
  border-color: rgba(112, 205, 148, 0.5);
  background: rgba(34, 125, 79, 0.2);
}

.phone-permission-status.permission-denied,
.phone-permission-status.permission-unsupported {
  border-color: rgba(231, 128, 102, 0.5);
  background: rgba(128, 50, 36, 0.2);
}

/* The Quran sheet itself owns the reading viewport. Hidden controls never reserve space. */
body.quran-page-active,
body.quran-page-active .app-shell,
body.quran-page-active .app-content,
body.quran-page-active .sadaqah-reader,
body.quran-page-active .sadaqah-reader .quran-page-stage {
  background: var(--quran-geometry-bg) !important;
  background-size: var(--quran-geometry-size) !important;
  background-position: var(--quran-geometry-position) !important;
  background-repeat: repeat !important;
  background-color: #102719 !important;
}

body.quran-page-active .sadaqah-reader {
  --sadaqah-safe-width: calc(100dvw - (2 * var(--reader-safe-edge)) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  --sadaqah-safe-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  --sadaqah-fit-width: var(--sadaqah-safe-width);
  --reader-vertical-balance-gap: max(14px, env(safe-area-inset-top, 0px), env(safe-area-inset-bottom, 0px));
}

body.quran-page-active .sadaqah-reader.reader-tools-open,
body.quran-page-active .sadaqah-reader.reader-auto-tools {
  --sadaqah-safe-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}

body.quran-page-active .sadaqah-reader .quran-page-stage,
body.quran-page-active .sadaqah-reader.reader-tools-open .quran-page-stage,
body.quran-page-active .sadaqah-reader.reader-auto-tools .quran-page-stage {
  min-height: 100dvh !important;
  height: 100dvh !important;
  padding:
    env(safe-area-inset-top, 0px)
    calc(var(--reader-safe-edge) + env(safe-area-inset-right, 0px))
    env(safe-area-inset-bottom, 0px)
    calc(var(--reader-safe-edge) + env(safe-area-inset-left, 0px)) !important;
  place-items: start center !important;
  align-items: start !important;
  justify-items: center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y pinch-zoom !important;
  scrollbar-color: rgba(71, 118, 94, 0.48) transparent;
}

body.quran-page-active .sadaqah-reader .reader-mushaf-leaf,
body.quran-page-active .sadaqah-reader .staticMushaf-mushaf-leaf,
body.quran-page-active .sadaqah-reader .staticMushaf-page-shell,
body.quran-page-active .sadaqah-reader .sadaqah-spread-shell,
body.quran-page-active .sadaqah-reader .sadaqah-spread {
  width: var(--sadaqah-fit-width) !important;
  margin: 0 auto !important;
}

body.quran-page-active .sadaqah-reader .sadaqah-page-frame,
body.quran-page-active .sadaqah-reader .sadaqah-book-page-image {
  background: var(--reader-paper) !important;
}

body.quran-page-active .sadaqah-reader .sadaqah-book-page-image {
  object-fit: contain;
}

body.quran-page-active .sadaqah-reader.reader-night,
body.quran-page-active.quran-reader-night,
body.quran-page-active.quran-reader-night .app-shell,
body.quran-page-active.quran-reader-night .app-content {
  background: var(--quran-geometry-night-bg) !important;
  background-size: var(--quran-geometry-size) !important;
  background-position: var(--quran-geometry-position) !important;
  background-repeat: repeat !important;
}

body.quran-page-active .sadaqah-reader.reader-night .sadaqah-page-frame,
body.quran-page-active .sadaqah-reader.reader-night .sadaqah-spread {
  background: #050705 !important;
}

/* Fixed inner clearance keeps textual ayah numbers away from their ornament. */
.reader-mushaf-leaf .mushaf-end.ayah-action-number .ayah-end-number,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number .ayah-end-number {
  box-sizing: border-box;
  padding: 1.2mm;
  font-size: 0.84em;
  line-height: 0.92;
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number {
  overflow: hidden;
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number.ayah-digits-2 .ayah-end-number,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number.ayah-digits-2 .ayah-end-number {
  font-size: 0.8em;
}

.reader-mushaf-leaf .mushaf-end.ayah-action-number.ayah-digits-3 .ayah-end-number,
.reader-mushaf-leaf.mushaf-design-parchment .mushaf-end.ayah-action-number.ayah-digits-3 .ayah-end-number {
  font-size: 0.72em;
}

.ayah-reader-popover {
  width: min(430px, calc(100dvw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  border-radius: var(--control-radius);
  border-color: rgba(216, 183, 97, 0.42);
  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.34);
}

.ayah-reader-popover.ayah-mode-tafsir {
  inset-inline: max(8px, env(safe-area-inset-left, 0px)) max(8px, env(safe-area-inset-right, 0px));
  width: auto;
  max-width: 620px;
  margin-inline: auto;
  overflow: hidden !important;
}

.ayah-popover-actions {
  border-radius: var(--control-radius);
}

.ayah-popover-button {
  width: 42px;
  height: 42px;
}

.ayah-reader-popover.ayah-mode-tafsir .ayah-popover-details {
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  touch-action: pan-y !important;
  scrollbar-gutter: stable;
}

@media (max-width: 899px) {
  body.quran-page-active .sadaqah-reader .sadaqah-spread {
    display: block !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page {
    display: none !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page.is-current,
  body.quran-page-active .sadaqah-reader .sadaqah-spread-page:only-child {
    display: block !important;
    width: 100% !important;
  }
}

@media (min-width: 900px) {
  body.quran-page-active .sadaqah-reader,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen {
    --sadaqah-fit-width: var(--sadaqah-safe-width) !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-shell,
  body.quran-page-active .sadaqah-reader .staticMushaf-page-shell,
  body.quran-page-active .sadaqah-reader .sadaqah-spread,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread-shell,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .staticMushaf-page-shell,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread {
    width: var(--sadaqah-fit-width) !important;
    min-height: calc(var(--sadaqah-fit-width) / var(--sadaqah-spread-ratio)) !important;
    height: calc(var(--sadaqah-fit-width) / var(--sadaqah-spread-ratio)) !important;
    max-width: none !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread {
    display: flex !important;
    direction: rtl;
    align-items: stretch !important;
    justify-content: center !important;
    background: transparent !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-spread-page,
  body.quran-page-active .sadaqah-reader .sadaqah-spread-page.is-current,
  body.quran-page-active .sadaqah-reader .sadaqah-spread-page:only-child,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread-page,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread-page.is-current,
  body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread-page:only-child {
    display: block !important;
    flex: 0 0 50% !important;
    width: 50% !important;
    height: 100% !important;
  }

  body.quran-page-active .sadaqah-reader .sadaqah-page-frame,
  body.quran-page-active .sadaqah-reader .sadaqah-book-page-image {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
  }
}

@media (max-width: 420px) {
  :root {
    --reader-safe-edge: 1mm;
    --control-height: 44px;
  }

  .app-content {
    padding-inline: 12px;
  }

  .card {
    padding: 14px;
  }

  .bottom-nav {
    gap: 2px;
    padding-inline: 4px;
  }

  .bottom-nav button {
    padding-inline: 3px;
    font-size: clamp(0.63rem, 2.8vw, 0.76rem);
  }

  .ayah-reader-popover.ayah-mode-tafsir {
    inset-inline: 6px;
  }
}

@media (orientation: landscape) and (max-height: 620px) {
  body:not(.quran-immersive) .app-content {
    padding-bottom: 72px;
  }

  body:not(.quran-immersive) .bottom-nav {
    min-height: 62px;
  }

  body:not(.quran-immersive) .bottom-nav button {
    min-height: 44px;
  }
}

/* Immersive reading: the paper owns the viewport until the reader asks for tools. */
body.quran-page-active .sadaqah-reader .reader-mushaf-leaf,
body.quran-page-active .sadaqah-reader .staticMushaf-mushaf-leaf {
  align-self: start !important;
}

body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .quran-topbar,
body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .quran-surah-ribbon,
body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .quran-reader-bottom-panel,
body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .quran-page-dots,
body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .quran-reader-app-menu,
body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .quran-reader-utility,
body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .quran-reader-audio,
body.quran-page-active .quran-page-reader.reader-auto-tools:not(.reader-tools-open) .reader-dua-action-rail {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (min-width: 900px) {
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen),
  body.quran-reader-fullscreen .quran-page-reader.staticMushaf-reader.sadaqah-reader.reader-app-fullscreen {
    --sadaqah-safe-width: calc(100dvw - (2 * var(--reader-safe-edge)) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)) !important;
    --sadaqah-fit-width: var(--sadaqah-safe-width) !important;
  }

  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader .reader-mushaf-leaf,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-shell,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader .staticMushaf-page-shell,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread,
  body.quran-reader-fullscreen .quran-page-reader.staticMushaf-reader.sadaqah-reader.reader-app-fullscreen .reader-mushaf-leaf,
  body.quran-reader-fullscreen .quran-page-reader.staticMushaf-reader.sadaqah-reader.reader-app-fullscreen .sadaqah-spread-shell,
  body.quran-reader-fullscreen .quran-page-reader.staticMushaf-reader.sadaqah-reader.reader-app-fullscreen .staticMushaf-page-shell,
  body.quran-reader-fullscreen .quran-page-reader.staticMushaf-reader.sadaqah-reader.reader-app-fullscreen .sadaqah-spread {
    width: var(--sadaqah-fit-width) !important;
    min-height: calc(var(--sadaqah-fit-width) / var(--sadaqah-spread-ratio)) !important;
    height: calc(var(--sadaqah-fit-width) / var(--sadaqah-spread-ratio)) !important;
    max-width: none !important;
    max-height: none !important;
  }

  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-page .sadaqah-page-frame,
  body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader .sadaqah-spread-page .sadaqah-book-page-image,
  body.quran-reader-fullscreen .quran-page-reader.staticMushaf-reader.sadaqah-reader.reader-app-fullscreen .sadaqah-spread-page .sadaqah-page-frame,
  body.quran-reader-fullscreen .quran-page-reader.staticMushaf-reader.sadaqah-reader.reader-app-fullscreen .sadaqah-spread-page .sadaqah-book-page-image {
    width: 100% !important;
    min-height: 0 !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: auto !important;
  }
}

/* Final gesture overrides must remain after the responsive reader rules. */
body.quran-page-active .sadaqah-reader .sadaqah-page-frame,
body.quran-page-active .sadaqah-reader .sadaqah-page-crop-content,
body.quran-page-active .sadaqah-reader .sadaqah-book-page-image,
body.quran-page-active .sadaqah-reader .sadaqah-ayah-zone {
  touch-action: pan-y pinch-zoom !important;
}

body.quran-page-active .sadaqah-reader.reader-tools-open .quran-page-stage,
body.quran-page-active .sadaqah-reader.reader-auto-tools .quran-page-stage {
  padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
  scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
}

body.quran-page-active .sadaqah-reader.reader-auto-tools:not(.reader-tools-open) .quran-page-stage {
  padding-top: var(--reader-vertical-balance-gap) !important;
  padding-bottom: var(--reader-vertical-balance-gap) !important;
  scroll-padding-top: var(--reader-vertical-balance-gap) !important;
  scroll-padding-bottom: var(--reader-vertical-balance-gap) !important;
  align-items: center !important;
  place-items: center !important;
}

body.quran-page-active .sadaqah-reader .quran-page-stage,
body.quran-page-active .sadaqah-reader.reader-tools-open .quran-page-stage,
body.quran-page-active .sadaqah-reader.reader-auto-tools .quran-page-stage {
  align-content: center !important;
  justify-items: center !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch;
}

body.quran-page-active .sadaqah-reader .reader-mushaf-leaf,
body.quran-page-active .sadaqah-reader .staticMushaf-mushaf-leaf,
body.quran-page-active .sadaqah-reader .staticMushaf-page-shell,
body.quran-page-active .sadaqah-reader .sadaqah-spread-shell,
body.quran-page-active .sadaqah-reader .sadaqah-spread {
  align-self: center !important;
  justify-self: center !important;
}

/* Final single-page reader policy: every drag advances or returns exactly one page. */
body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader,
body.quran-reader-fullscreen .quran-page-reader.staticMushaf-reader.sadaqah-reader.reader-app-fullscreen {
  --sadaqah-current-page-ratio: 0.6428571429;
  --sadaqah-fit-height: max(
    320px,
    calc(
      min(100vh, 100dvh)
      - var(--reader-vertical-balance-gap)
      - var(--reader-vertical-balance-gap)
      - env(safe-area-inset-top, 0px)
      - env(safe-area-inset-bottom, 0px)
    )
  );
  --sadaqah-fit-width: min(
    var(--sadaqah-safe-width),
    calc(var(--sadaqah-fit-height) / 1.5555555556)
  ) !important;
}

body.quran-page-active .sadaqah-reader .sadaqah-spread.is-single-page,
body.quran-page-active .sadaqah-reader .sadaqah-spread.is-single-page .sadaqah-spread-page,
body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread.is-single-page,
body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread.is-single-page .sadaqah-spread-page {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  max-width: none !important;
}

body.quran-page-active .sadaqah-reader .sadaqah-spread-shell,
body.quran-page-active .sadaqah-reader .staticMushaf-page-shell,
body.quran-page-active .sadaqah-reader .sadaqah-spread.is-single-page,
body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread-shell,
body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .staticMushaf-page-shell,
body.quran-reader-fullscreen .quran-page-reader.reader-app-fullscreen .sadaqah-spread.is-single-page {
  width: var(--sadaqah-fit-width) !important;
  min-height: calc(var(--sadaqah-fit-width) / var(--sadaqah-current-page-ratio)) !important;
  height: calc(var(--sadaqah-fit-width) / var(--sadaqah-current-page-ratio)) !important;
  max-height: var(--sadaqah-fit-height) !important;
}

/* r40: the static Sadaqah source is a single-page reader on every viewport. */
body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader,
body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen),
body.quran-reader-fullscreen .quran-page-reader.staticMushaf-reader.sadaqah-reader.reader-app-fullscreen {
  --sadaqah-current-page-ratio: 0.6428571429;
  --sadaqah-fit-height: max(
    320px,
    calc(
      min(100vh, 100dvh)
      - var(--reader-vertical-balance-gap)
      - var(--reader-vertical-balance-gap)
      - env(safe-area-inset-top, 0px)
      - env(safe-area-inset-bottom, 0px)
    )
  );
  --sadaqah-fit-width: min(
    var(--sadaqah-safe-width),
    calc(var(--sadaqah-fit-height) / 1.5555555556)
  ) !important;
}

body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .reader-mushaf-leaf,
body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread-shell,
body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .staticMushaf-page-shell,
body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread.is-single-page,
body.quran-reader-fullscreen .quran-page-reader.staticMushaf-reader.sadaqah-reader.reader-app-fullscreen .reader-mushaf-leaf,
body.quran-reader-fullscreen .quran-page-reader.staticMushaf-reader.sadaqah-reader.reader-app-fullscreen .sadaqah-spread-shell,
body.quran-reader-fullscreen .quran-page-reader.staticMushaf-reader.sadaqah-reader.reader-app-fullscreen .staticMushaf-page-shell,
body.quran-reader-fullscreen .quran-page-reader.staticMushaf-reader.sadaqah-reader.reader-app-fullscreen .sadaqah-spread.is-single-page {
  width: var(--sadaqah-fit-width) !important;
  min-height: calc(var(--sadaqah-fit-width) / var(--sadaqah-current-page-ratio)) !important;
  height: calc(var(--sadaqah-fit-width) / var(--sadaqah-current-page-ratio)) !important;
  max-height: var(--sadaqah-fit-height) !important;
  max-width: none !important;
}

body.quran-page-active .quran-page-reader.staticMushaf-reader.sadaqah-reader:not(.reader-app-fullscreen) .sadaqah-spread.is-single-page .sadaqah-spread-page,
body.quran-reader-fullscreen .quran-page-reader.staticMushaf-reader.sadaqah-reader.reader-app-fullscreen .sadaqah-spread.is-single-page .sadaqah-spread-page {
  display: block !important;
  flex: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
}