/* ============================================================
   القرآن الكريم — visual system
   A quiet, editorial glass interface inspired by modern Qur'an apps.
   ============================================================ */

@font-face {
  font-family: "Readex Pro";
  src: url("fonts/readex-pro-ar.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Readex Pro";
  src: url("fonts/readex-pro-latin.woff2") format("woff2");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Noto Naskh Arabic";
  src: url("fonts/noto-naskh-arabic-ar.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Noto Naskh Arabic Local";
  src: local("Noto Naskh Arabic"), local("NotoNaskhArabic-Regular");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Amiri";
  src: url("fonts/amiri-400-ar.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: "Amiri";
  src: url("fonts/amiri-700-ar.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

:root {
  color-scheme: dark;
  --paper: #08090a;
  --paper-soft: #0d0f11;
  --ink: #f3f1eb;
  --ink-soft: #d7d4cc;
  --muted: #9b9d99;
  --muted-2: #737673;
  --faint: rgba(243, 241, 235, .14);
  --rule: rgba(243, 241, 235, .09);
  --wash: rgba(243, 241, 235, .05);
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025));
  --glass-border: rgba(255, 255, 255, .115);
  --glass-shadow: 0 18px 54px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .09);
  --glass-strong: rgba(11, 13, 15, .9);
  --accent: #e5cb92;
  --accent-strong: #f6e3b6;
  --accent-ink: #19140a;
  --accent-rgb: 229, 203, 146;
  --green: #8bd8b5;
  --blue: #9ed5e6;
  --rose: #e6a6a0;
  --blur: 22px;
  --page-bg:
    radial-gradient(ellipse at 50% -8%, rgba(229, 203, 146, .075), transparent 58%),
    linear-gradient(155deg, #121416 0%, #0c0e10 54%, #111315 100%);
  --page-ink: #f0eadc;
  --page-muted: rgba(240, 234, 220, .62);
  --page-border: rgba(229, 203, 146, .28);
  --page-glow: rgba(229, 203, 146, .045);
  --page-number: #e5cb92;
  --shadow: 0 32px 90px rgba(0, 0, 0, .48);
  --sans: "Readex Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --serif: "Amiri", "Noto Naskh Arabic", Georgia, serif;
  --quran: "Noto Naskh Arabic", "Noto Naskh Arabic Local", serif;
  font-family: var(--sans);
  font-weight: 300;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  padding-bottom: 116px;
  color: var(--ink);
  background:
    radial-gradient(ellipse 62% 42% at 50% -12%, rgba(229, 203, 146, .085), transparent 66%),
    radial-gradient(ellipse 44% 38% at 98% 30%, rgba(110, 160, 180, .055), transparent 64%),
    radial-gradient(ellipse 46% 36% at 2% 78%, rgba(140, 120, 180, .04), transparent 62%),
    var(--paper);
  background-attachment: fixed;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .22;
  background-image: radial-gradient(rgba(255, 255, 255, .14) .45px, transparent .55px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 10%, transparent 78%);
}
::selection { background: var(--accent); color: var(--accent-ink); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
[hidden] { display: none !important; }
body.dialog-open { overflow: hidden; }

.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mirror-icon { transform: scaleX(-1); }

/* ------------------------------------------------------------
   Shared surfaces
   ------------------------------------------------------------ */
.glass-panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.45);
  backdrop-filter: blur(var(--blur)) saturate(1.45);
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .035em;
  line-height: 1.6;
}
.eyebrow-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px rgba(var(--accent-rgb), .8); }
.btn {
  min-height: 46px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--faint);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 400;
  cursor: pointer;
  transition: background-color .22s, border-color .22s, color .22s, transform .22s, box-shadow .22s;
}
.btn svg { width: 17px; height: 17px; }
.btn:hover { background: var(--wash); border-color: rgba(var(--accent-rgb), .42); transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--paper); font-weight: 500; }
.btn-primary:hover { background: #fff; border-color: #fff; color: #0b0c0d; box-shadow: 0 12px 32px rgba(0, 0, 0, .22); }
.btn-ghost { color: var(--ink-soft); }
.btn-ghost svg { color: var(--accent); }
.btn-listen { min-height: 40px; padding: 0 15px; background: var(--ink); border-color: var(--ink); color: var(--paper); font-size: 11px; font-weight: 500; }
.btn-listen:hover { background: #fff; border-color: #fff; color: #0b0c0d; }
.btn-listen svg { width: 14px; height: 14px; fill: currentColor; stroke: none; }
.icon-btn {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--faint);
  border-radius: 12px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.icon-btn:hover { background: var(--wash); border-color: rgba(var(--accent-rgb), .42); color: var(--accent-strong); transform: translateY(-1px); }
.icon-btn svg { width: 17px; height: 17px; }
.setting-button {
  min-width: 36px;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--faint);
  border-radius: 10px;
  background: transparent;
  color: var(--ink-soft);
  font-size: 11px;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.font-reset { min-width: 34px; font-size: 16px; line-height: 1; }
.setting-button:hover, .setting-button[aria-pressed="true"] { background: rgba(var(--accent-rgb), .09); border-color: rgba(var(--accent-rgb), .42); color: var(--accent-strong); }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px rgba(139, 216, 181, .75); flex: 0 0 6px; }

/* ------------------------------------------------------------
   Top bar
   ------------------------------------------------------------ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 45;
  border-bottom: 1px solid transparent;
  background: rgba(8, 9, 10, .54);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  transition: background-color .3s, border-color .3s;
}
.topbar.scrolled { background: rgba(8, 9, 10, .86); border-bottom-color: var(--rule); }
.topbar-inner {
  width: min(1440px, calc(100% - 48px));
  min-height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 176px; }
.brand-logo { width: 46px; height: 46px; filter: drop-shadow(0 0 18px rgba(var(--accent-rgb), .25)); }
.brand-copy { display: grid; line-height: 1.3; }
.brand-copy strong { color: var(--ink); font-family: var(--serif); font-size: 25px; font-weight: 400; letter-spacing: .02em; }
.brand-copy small { color: var(--muted); font-size: 8.5px; font-weight: 300; letter-spacing: .12em; }
.main-nav { display: flex; align-items: center; gap: 3px; margin-inline: auto; }
.nav-link {
  position: relative;
  min-height: 36px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 300;
  cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s;
}
.nav-link:hover { color: var(--ink); background: var(--wash); }
.nav-link.active { color: var(--ink); background: rgba(255, 255, 255, .055); border-color: var(--faint); }
.nav-about { color: var(--accent); }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.glass-icon, .glass-action {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--faint);
  border-radius: 12px;
  background: var(--wash);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
}
.glass-icon { width: 40px; }
.glass-action { padding: 0 12px; font-size: 11px; }
.glass-icon:hover, .glass-action:hover { border-color: rgba(var(--accent-rgb), .42); color: var(--accent-strong); background: rgba(var(--accent-rgb), .07); }
.glass-action kbd { padding: 2px 5px; border: 1px solid var(--rule); border-radius: 5px; color: var(--muted-2); font: 8px var(--sans); direction: ltr; }
.mobile-menu { display: none; }
.search-action svg { color: var(--accent); }

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */
.page-shell { width: min(1440px, calc(100% - 48px)); margin: 0 auto; }
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .88fr);
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
  min-height: 390px;
  padding: 46px 6px 42px;
  border-bottom: 1px solid var(--rule);
}
.hero-copy { position: relative; z-index: 1; }
.hero h1 {
  margin: 14px 0 0;
  font-family: var(--serif);
  font-size: clamp(68px, 8.2vw, 118px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.015em;
  color: var(--ink);
  text-shadow: 0 0 70px rgba(var(--accent-rgb), .09);
}
.accent-dot { color: var(--accent); }
.hero-subtitle { margin: 5px 0 0; color: var(--accent); font-family: var(--serif); font-size: clamp(20px, 2vw, 27px); line-height: 1.4; }
.hero-lede { max-width: 540px; margin: 14px 0 0; color: var(--muted); font-size: 13px; font-weight: 300; line-height: 1.95; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 11px; margin-top: 22px; color: var(--muted); font-size: 10.5px; }
.hero-meta strong { color: var(--ink); font-size: 12px; font-weight: 500; }
.hero-meta i { color: var(--faint); font-style: normal; }
.hero-art { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 340px; }
.hero-aura {
  position: absolute;
  width: min(360px, 82%);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), .15) 0%, rgba(var(--accent-rgb), .045) 38%, transparent 70%);
  filter: blur(14px);
  animation: aura-breathe 7s ease-in-out infinite;
}
.hero-logo { position: relative; width: clamp(140px, 15vw, 205px); height: auto; filter: drop-shadow(0 0 34px rgba(var(--accent-rgb), .18)); }
.hero-quote { position: relative; max-width: 420px; margin: 0; color: var(--muted); font-family: var(--quran); font-size: clamp(15px, 1.5vw, 19px); line-height: 1.95; text-align: center; }
.hero-card {
  position: relative;
  width: min(300px, 100%);
  margin-top: 4px;
  padding: 12px 16px;
  display: grid;
  gap: 3px;
  border-radius: 16px;
  color: var(--ink);
}
.hero-card::before { content: ""; position: absolute; inset-inline-start: 0; top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: linear-gradient(var(--accent), transparent); }
.hero-card-label { color: var(--muted); font-size: 8.5px; letter-spacing: .06em; }
.hero-card strong { font-size: 11.5px; font-weight: 400; }
.hero-card small { color: var(--muted); font-size: 9px; }
.hero-card > svg { position: absolute; inset-inline-end: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%) scaleX(-1); color: var(--accent); }
@keyframes aura-breathe { 0%, 100% { opacity: .72; transform: scale(.98); } 50% { opacity: 1; transform: scale(1.04); } }

/* ------------------------------------------------------------
   Workspace and library
   ------------------------------------------------------------ */
.workspace { display: grid; grid-template-columns: 292px minmax(0, 1fr); align-items: start; gap: 20px; padding-top: 26px; }
.library-panel {
  position: sticky;
  top: 94px;
  max-height: calc(100vh - 124px);
  min-height: 600px;
  padding: 20px 14px 14px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 26px;
}
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; padding: 0 3px; }
.panel-heading h2 { margin: 3px 0 0; color: var(--ink); font-family: var(--serif); font-size: 23px; font-weight: 400; line-height: 1.3; }
.surah-count { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 50%; background: rgba(var(--accent-rgb), .06); color: var(--accent); font-size: 11px; }
.library-close { display: none; }
.library-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; border: 1px solid var(--rule); border-radius: 13px; background: rgba(0, 0, 0, .18); }
.library-tab { min-height: 36px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--muted); font-size: 10.5px; cursor: pointer; transition: .2s; }
.library-tab:hover { color: var(--ink); }
.library-tab.active { border-color: var(--faint); background: rgba(255, 255, 255, .07); color: var(--ink); }
.library-tab span { color: var(--accent); padding-inline-start: 2px; }
.search-field {
  height: 42px;
  margin: 12px 0;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(0, 0, 0, .16);
  color: var(--muted-2);
  transition: border-color .2s, background-color .2s;
}
.search-field:focus-within { border-color: rgba(var(--accent-rgb), .4); background: rgba(0, 0, 0, .24); }
.search-field svg { width: 15px; height: 15px; flex: 0 0 15px; }
.search-field input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 10.5px; }
.search-field input::placeholder { color: var(--muted-2); }
.surah-list { flex: 1; overflow-y: auto; padding-inline-end: 2px; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), .25) transparent; }
.surah-item {
  width: 100%;
  padding: 8px 7px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: var(--ink-soft);
  text-align: right;
  cursor: pointer;
  transition: background-color .18s, border-color .18s, color .18s;
}
.surah-item:hover { background: var(--wash); border-color: var(--rule); }
.surah-item.active { background: rgba(var(--accent-rgb), .08); border-color: rgba(var(--accent-rgb), .26); color: var(--ink); }
.surah-number { width: 31px; height: 31px; flex: 0 0 31px; display: grid; place-items: center; border: 1px solid var(--faint); border-radius: 50%; color: var(--accent); font-size: 10px; }
.surah-item.active .surah-number { border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .1); }
.surah-item-copy { flex: 1; min-width: 0; display: grid; line-height: 1.45; }
.surah-item-copy strong { overflow: hidden; color: inherit; font-family: var(--serif); font-size: 14px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.surah-item-copy small { overflow: hidden; color: var(--muted-2); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right; }
.surah-item-meta { flex: 0 0 auto; color: var(--muted-2); font-size: 8px; white-space: nowrap; }
.library-footer { margin-top: 10px; padding-top: 12px; display: flex; align-items: center; justify-content: center; gap: 7px; border-top: 1px solid var(--rule); color: var(--muted-2); font-size: 9px; }
.saved-item .surah-number { color: var(--accent); }

/* ------------------------------------------------------------
   Reader chrome
   ------------------------------------------------------------ */
.reader-column { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.reader-top { padding: 11px 14px; display: flex; align-items: center; gap: 12px; border-radius: 20px; }
.reader-position { display: flex; align-items: center; gap: 10px; min-width: 0; }
.position-emblem { width: 37px; height: 37px; flex: 0 0 37px; display: grid; place-items: center; border: 1px solid rgba(var(--accent-rgb), .25); border-radius: 12px; background: rgba(var(--accent-rgb), .06); color: var(--accent); font-size: 22px; }
.reader-position div { display: grid; gap: 2px; min-width: 0; }
.reader-position small { color: var(--muted-2); font-size: 8.5px; }
.reader-position strong { overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.reader-tools { margin-inline-start: auto; display: flex; align-items: center; gap: 5px; }
.tool-group { display: flex; gap: 3px; }
.translation-button { padding: 0 10px; }
.reader-tools .icon-btn { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
.reader-tools .icon-btn svg { width: 15px; height: 15px; }
.page-jump { display: flex; align-items: center; gap: 5px; color: var(--muted-2); font-size: 9px; white-space: nowrap; }
.page-jump input, .focus-page-jump input {
  width: 45px;
  height: 32px;
  border: 1px solid var(--faint);
  border-radius: 9px;
  background: rgba(0, 0, 0, .16);
  color: var(--accent-strong);
  text-align: center;
  font-size: 11px;
  outline: 0;
}
.page-jump input::-webkit-inner-spin-button, .focus-page-jump input::-webkit-inner-spin-button { appearance: none; }
.recitation-bar { padding: 8px 10px 8px 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 20px; }
.reciter-current {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 4px 6px 4px 4px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  color: inherit;
  text-align: right;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.reciter-current:hover { background: var(--wash); border-color: var(--rule); }
.avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid hsla(var(--hue, 42), 55%, 68%, .36);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 20%, hsla(var(--hue, 42), 80%, 80%, .24), transparent 62%),
    rgba(255, 255, 255, .045);
  color: hsl(var(--hue, 42), 58%, 80%);
  font-family: var(--serif);
  font-size: 19px;
}
.reciter-current-copy { display: grid; gap: 1px; min-width: 0; line-height: 1.4; }
.reciter-current-copy small { color: var(--muted-2); font-size: 8px; }
.reciter-current-copy strong { overflow: hidden; color: var(--ink); font-size: 11.5px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.reciter-current-copy em { overflow: hidden; color: var(--muted); font: 8px var(--sans); font-style: normal; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right; }
.chevron { width: 16px; height: 16px; color: var(--muted-2); transform: scaleX(-1); }
.recitation-actions { display: flex; align-items: center; gap: 12px; }
.live-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 8.5px; white-space: nowrap; }
.live-badge > span { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(139, 216, 181, .7); }
.reader-message { padding: 10px 14px; border: 1px solid rgba(var(--accent-rgb), .26); border-radius: 13px; background: rgba(var(--accent-rgb), .07); color: var(--accent-strong); font-size: 10.5px; line-height: 1.8; }

/* ------------------------------------------------------------
   Mushaf page
   ------------------------------------------------------------ */
.mushaf-stage { padding: 6px 0 4px; display: flex; justify-content: center; }
.mushaf-page {
  position: relative;
  isolation: isolate;
  width: min(100%, 840px);
  min-height: 1040px;
  padding: 24px clamp(24px, 4.8vw, 58px) 58px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--page-border);
  border-radius: 10px;
  color: var(--page-ink);
  background: var(--page-bg);
  box-shadow:
    0 32px 90px rgba(0, 0, 0, .52),
    0 0 0 1px rgba(255, 255, 255, .025) inset,
    0 0 80px var(--page-glow) inset;
}
.mushaf-page::before, .mushaf-page::after { content: ""; position: absolute; pointer-events: none; border: 1px solid rgba(var(--accent-rgb), .16); border-radius: 5px; }
.mushaf-page::before { inset: 10px; }
.mushaf-page::after { inset: 15px; border-color: rgba(var(--accent-rgb), .07); }
.mushaf-topline { position: relative; z-index: 1; margin: 0 6px 13px; padding-bottom: 9px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(var(--accent-rgb), .14); color: rgba(var(--accent-rgb), .58); font-family: var(--quran); font-size: 13px; }
.mushaf-ornament { font-size: 15px; }
.mushaf-page-heading { display: none; }
.mushaf-basmalah { position: relative; z-index: 1; padding: 0 0 6px; color: var(--accent-strong); font-family: var(--quran); font-size: clamp(24px, 3vw, 32px); line-height: 1.9; text-align: center; }
.mushaf-basmalah[hidden] { display: none; }
.quran-content {
  position: relative;
  z-index: 1;
  direction: rtl;
  color: var(--page-ink);
  font-family: var(--quran);
  font-size: calc(clamp(1.55rem, 1.8vw + .7rem, 2rem) * var(--quran-zoom, 1));
  font-weight: 400;
  font-style: normal;
  font-kerning: normal;
  font-synthesis: none;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "mark" 1, "mkmk" 1;
  line-height: 2.5;
  text-align: center;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: auto;
  word-spacing: 0;
  letter-spacing: 0;
  unicode-bidi: isolate;
  overflow-wrap: normal;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.mushaf-line { display: block; flex: 0 0 auto; width: 100%; min-height: 2.5em; direction: rtl; text-align: center; line-height: 2.5; }
.mushaf-line .ayah-unit { display: inline; margin: 0 .015em; white-space: nowrap; }
.quran-word {
  position: relative;
  display: inline;
  padding: 0 .012em;
  border-radius: .24em;
  color: var(--page-ink);
  font-family: var(--quran);
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
  transition: color .12s, background-color .12s, box-shadow .12s, text-shadow .12s;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.quran-word:hover { color: var(--accent-strong); }
.quran-word.word-active {
  z-index: 2;
  color: var(--accent-ink);
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  box-shadow: 0 0 0 .1em rgba(var(--accent-rgb), .13), 0 0 20px rgba(var(--accent-rgb), .3);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
.quran-word.ayah-word-active { color: var(--accent-strong); background: rgba(var(--accent-rgb), .13); box-shadow: inset 0 -1px 0 rgba(var(--accent-rgb), .48); }
.verse-end {
  display: inline-flex;
  flex: 0 0 1.35em;
  align-items: center;
  justify-content: center;
  width: 1.35em;
  min-width: 1.35em;
  height: 1.35em;
  margin: 0 .03em;
  vertical-align: middle;
  border: 1px solid rgba(var(--accent-rgb), .46);
  border-radius: 50%;
  background: rgba(var(--accent-rgb), .045);
  color: var(--accent);
  font-family: var(--serif);
  font-size: .54em;
  line-height: 1;
  transition: background-color .15s, color .15s;
}
.ayah-unit.active-ayah .verse-end { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.mushaf-surah-title-row { display: flex; align-items: center; justify-content: center; min-height: 2.3em; margin: .22em 0 .1em; color: var(--accent-strong); font-family: var(--serif); font-size: 1.1em; text-align: center; }
.mushaf-surah-title-row span {
  display: inline-block;
  min-width: min(78%, 340px);
  padding: .04em 1.4em;
  border: 1px solid rgba(var(--accent-rgb), .3);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), .04), rgba(var(--accent-rgb), .1), rgba(var(--accent-rgb), .04));
  box-shadow: inset 0 1px rgba(255, 255, 255, .045);
}
.mushaf-basmala-line { min-height: 2.1em; padding: .02em 0 .08em; color: var(--accent); font-family: var(--quran); font-size: 1.12em; line-height: 2.1; text-align: center; }
.fallback-line { display: block; min-height: 0; white-space: normal; text-align: justify; line-height: 2.5; font-weight: 400; }
.translation-panel { display: none; margin: 18px 0 4px; padding-top: 13px; border-top: 1px solid rgba(var(--accent-rgb), .18); direction: ltr; text-align: left; font-family: var(--sans); }
.show-translation .translation-panel { display: block; }
.translation-row { padding: 8px 3px; border-bottom: 1px solid rgba(var(--accent-rgb), .08); color: var(--page-muted); }
.translation-row strong { color: var(--accent); font: 400 11px var(--serif); }
.translation-row p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.75; }
.translation-text { display: none; direction: ltr; margin: 0 0 14px; color: var(--page-muted); font-size: 11px; line-height: 1.8; }
.show-translation .translation-text { display: block; }
.mushaf-page-footer { position: absolute; z-index: 2; bottom: 13px; left: 50%; transform: translateX(-50%); }
.mushaf-page-number {
  min-width: 42px;
  height: 27px;
  padding: 0 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .44);
  border-radius: 999px;
  background: rgba(var(--accent-rgb), .055);
  color: var(--accent);
  font-size: 10px;
}
.loading-state, .loading-line, .empty-state, .search-empty { padding: 26px 10px; color: var(--muted); font-size: 11px; line-height: 1.9; text-align: center; }

/* ------------------------------------------------------------
   Page tools
   ------------------------------------------------------------ */
.page-actions { padding: 7px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; border-radius: 18px; }
.page-tool {
  min-height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--muted);
  font-size: 9.5px;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.page-tool svg { width: 15px; height: 15px; }
.page-tool:hover { border-color: rgba(var(--accent-rgb), .28); background: rgba(var(--accent-rgb), .06); color: var(--accent-strong); transform: translateY(-1px); }
.page-tool:disabled { opacity: .3; pointer-events: none; }
.page-tool.repeat-page[aria-pressed="true"] { border-color: rgba(var(--accent-rgb), .48); background: rgba(var(--accent-rgb), .1); color: var(--accent-strong); }
.page-tool.download-audio { color: var(--blue); }
.page-tool.download-audio:hover { border-color: rgba(158, 213, 230, .4); color: #d8f6ff; }
.page-tool.next-page { color: var(--accent); }
.page-status { display: flex; align-items: center; justify-content: center; gap: 9px; padding-bottom: 2px; color: var(--muted-2); font-size: 8.5px; }
.page-status-separator { color: var(--accent); }

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */
.site-footer {
  margin: 26px 0 22px;
  padding: 17px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  border-radius: 22px;
}
.footer-brand { display: flex; align-items: center; gap: 8px; }
.footer-brand img { width: 34px; height: 34px; }
.footer-brand div { display: grid; line-height: 1.35; }
.footer-brand strong { color: var(--ink); font-family: var(--serif); font-size: 18px; font-weight: 400; }
.footer-brand small { color: var(--muted-2); font-size: 7.5px; letter-spacing: .08em; }
.footer-dua { flex: 1; min-width: 220px; margin: 0; color: var(--muted); font-family: var(--quran); font-size: 12.5px; line-height: 1.8; }
.footer-links { display: flex; gap: 14px; }
.footer-links a { color: var(--muted); font-size: 9.5px; }
.footer-links a:hover { color: var(--accent); }
.footer-credit { display: flex; align-items: center; gap: 6px; color: var(--muted-2); font-size: 9px; }
.footer-credit strong { color: var(--accent); font-size: 11px; font-weight: 400; letter-spacing: .08em; }
.footer-credit i { color: var(--faint); font-style: normal; }
.footer-credit a { color: var(--muted); }
.footer-credit a:hover { color: var(--accent); }
.footer-sources { width: 100%; padding-top: 11px; border-top: 1px solid var(--rule); color: var(--muted-2); font-size: 8px; text-align: center; }
.footer-sources a { color: var(--muted); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .3); text-underline-offset: 3px; }
.footer-about-bottom { width: 100%; padding-top: 12px; border-top: 1px solid var(--rule); display: flex; justify-content: center; }
.footer-about-bottom a { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 16px; border: 1px solid rgba(var(--accent-rgb), .3); border-radius: 999px; color: var(--accent); font-size: 12px; transition: background .18s, border-color .18s; }
.footer-about-bottom a:hover { background: rgba(var(--accent-rgb), .1); border-color: rgba(var(--accent-rgb), .58); }
.footer-about-bottom svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------
   Player dock
   ------------------------------------------------------------ */
.player-dock {
  position: fixed;
  z-index: 50;
  bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 28px));
  min-height: 78px;
  padding: 10px 18px;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(320px, 1.25fr) minmax(150px, .9fr);
  align-items: center;
  gap: 18px;
  border-radius: 22px;
  background: linear-gradient(120deg, rgba(13, 15, 18, .92), rgba(17, 19, 23, .9));
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .09);
  -webkit-backdrop-filter: blur(30px) saturate(1.4);
  backdrop-filter: blur(30px) saturate(1.4);
}
.player-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.player-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(var(--accent-rgb), .3);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 20%, rgba(var(--accent-rgb), .18), transparent 65%), rgba(255, 255, 255, .04);
  color: var(--accent);
  font-family: var(--serif);
  font-size: 19px;
}
.player-track { display: grid; gap: 2px; min-width: 0; }
.player-track strong { overflow: hidden; color: var(--ink); font-size: 10.5px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.player-track span { overflow: hidden; color: var(--muted); font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.player-center { display: grid; gap: 6px; }
.player-controls { display: flex; align-items: center; justify-content: center; gap: 18px; }
.player-control, .player-main { display: grid; place-items: center; border: 0; cursor: pointer; transition: .18s; }
.player-control { width: 29px; height: 29px; border-radius: 50%; background: transparent; color: var(--muted); }
.player-control:hover { background: var(--wash); color: var(--accent); }
.player-main {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  color: #19140a;
  background: linear-gradient(135deg, var(--accent-strong), var(--accent));
  box-shadow: 0 0 22px rgba(var(--accent-rgb), .25);
}
.player-main:hover { box-shadow: 0 0 30px rgba(var(--accent-rgb), .42); }
.player-main svg { width: 17px; height: 17px; fill: currentColor; stroke: none; }
.progress-row { display: flex; align-items: center; gap: 8px; color: var(--muted-2); font-size: 8.5px; font-variant-numeric: tabular-nums; }
.progress-row input { width: 100%; height: 4px; accent-color: var(--accent); cursor: pointer; }
.player-extra { display: flex; align-items: center; justify-content: flex-end; gap: 15px; }
.speed-wrap { display: flex; align-items: center; gap: 6px; color: var(--muted-2); font-size: 8.5px; }
.speed-wrap select { padding: 5px 6px; border: 1px solid var(--faint); border-radius: 7px; background: rgba(255, 255, 255, .055); color: var(--ink); font-size: 8.5px; }
.speed-wrap option { background: #15171a; color: var(--ink); }
.stream-badge { display: flex; align-items: center; gap: 5px; color: var(--green); font-size: 8px; white-space: nowrap; }
.stream-badge > span { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }

/* ------------------------------------------------------------
   Search
   ------------------------------------------------------------ */
.search-overlay { position: fixed; z-index: 110; inset: 0; display: grid; place-items: start center; padding: 10vh 16px 24px; }
.search-overlay[hidden] { display: none; }
.search-backdrop { position: absolute; inset: 0; background: rgba(4, 5, 6, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.search-dialog {
  position: relative;
  width: min(680px, 100%);
  max-height: 78vh;
  padding: 22px;
  overflow: hidden;
  border-radius: 26px;
  background: var(--glass-strong);
}
.search-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.search-dialog h2 { margin: 4px 0 0; color: var(--ink); font-family: var(--serif); font-size: 27px; font-weight: 400; line-height: 1.3; }
.global-search-box { height: 50px; padding: 0 15px; display: flex; align-items: center; gap: 10px; border: 1px solid rgba(var(--accent-rgb), .28); border-radius: 999px; background: rgba(0, 0, 0, .2); color: var(--accent); }
.global-search-box input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 12px; }
.global-search-box input::placeholder { color: var(--muted-2); }
.search-hint { margin: 10px 4px 12px; color: var(--muted-2); font-size: 9px; }
.search-hint kbd { padding: 1px 5px; border: 1px solid var(--rule); border-radius: 4px; font-size: 8px; direction: ltr; }
.search-results { max-height: 52vh; overflow: auto; }
.search-result { width: 100%; margin-bottom: 7px; padding: 12px; display: block; border: 1px solid var(--rule); border-radius: 14px; background: var(--wash); color: var(--ink); text-align: right; cursor: pointer; transition: .2s; }
.search-result:hover { border-color: rgba(var(--accent-rgb), .36); background: rgba(var(--accent-rgb), .06); }
.search-result-head { display: flex; justify-content: space-between; gap: 12px; color: var(--accent); font-size: 9px; }
.search-result-head span { color: var(--muted-2); }
.search-result p { margin: 7px 0 4px; font-family: var(--quran); font-size: 19px; line-height: 1.8; }
.search-result small { display: block; color: var(--muted); font-size: 9px; line-height: 1.6; direction: ltr; text-align: left; }

/* ------------------------------------------------------------
   Dialogs: reciters and page index
   ------------------------------------------------------------ */
.modal-layer { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; }
.modal-layer[hidden] { display: none; }
.modal-scrim { position: absolute; inset: 0; background: rgba(4, 5, 6, .68); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }
.modal-card {
  position: relative;
  width: min(760px, 100%);
  max-height: min(82vh, 760px);
  padding: 22px;
  overflow: auto;
  border-radius: 28px;
  background: var(--glass-strong);
  animation: modal-in .32s cubic-bezier(.2, .7, .1, 1) both;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.modal-head h2 { margin: 4px 0 0; color: var(--ink); font-family: var(--serif); font-size: 29px; font-weight: 400; line-height: 1.3; }
.modal-head p { max-width: 540px; margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.8; }
.modal-note { margin: 14px 2px 0; display: flex; align-items: center; gap: 7px; color: var(--muted-2); font-size: 8.5px; line-height: 1.7; }
.reciter-picker { margin-top: 16px; display: grid; gap: 14px; }
.reciter-group { display: grid; gap: 6px; }
.reciter-group-head { padding: 0 3px 6px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--rule); color: var(--muted); font-size: 8.5px; }
.reciter-group-head small { color: var(--muted-2); font-size: 8px; }
.reciter-grid-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.reciter-chip {
  position: relative;
  min-height: 62px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--wash);
  color: var(--ink);
  text-align: right;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, transform .2s;
}
.reciter-chip:hover { border-color: rgba(var(--accent-rgb), .3); background: rgba(var(--accent-rgb), .05); transform: translateY(-1px); }
.reciter-chip.active { border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .08); }
.reciter-chip .avatar { width: 36px; height: 36px; flex-basis: 36px; font-size: 17px; }
.reciter-chip-copy { min-width: 0; flex: 1; display: grid; gap: 2px; line-height: 1.35; }
.reciter-chip-copy strong { overflow: hidden; font-family: var(--serif); font-size: 14px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.reciter-chip-copy small { overflow: hidden; color: var(--muted-2); font-size: 8px; letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right; }
.reciter-chip-badge { align-self: flex-start; padding: 2px 6px; border: 1px solid var(--rule); border-radius: 999px; color: var(--muted-2); font-size: 7px; line-height: 1.4; white-space: nowrap; }
.reciter-chip-badge.timed { border-color: rgba(139, 216, 181, .24); color: var(--green); }
.reciter-chip .check { width: 17px; height: 17px; color: var(--accent); flex: 0 0 17px; }
.page-index-card { width: min(880px, 100%); }
.page-index-search { margin: 16px 0 12px; background: rgba(0, 0, 0, .18); }
.page-index-grid { max-height: 57vh; overflow: auto; padding-inline-end: 4px; scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), .25) transparent; }
.page-juz { padding: 12px 0 10px; border-top: 1px solid var(--rule); }
.page-juz:first-child { border-top: 0; padding-top: 0; }
.page-juz h3 { margin: 0 0 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--ink); font-family: var(--serif); font-size: 17px; font-weight: 400; }
.page-juz h3 small { color: var(--muted-2); font-family: var(--sans); font-size: 8px; font-weight: 300; }
.page-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 5px; }
.page-btn { height: 36px; border: 1px solid var(--rule); border-radius: 10px; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; transition: .18s; }
.page-btn:hover { border-color: rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .07); color: var(--accent-strong); }
.page-btn.current { border-color: rgba(var(--accent-rgb), .55); background: rgba(var(--accent-rgb), .12); color: var(--accent-strong); }
.page-btn[hidden] { display: none; }
.page-juz[hidden] { display: none; }

/* ------------------------------------------------------------
   Full-page mushaf focus mode
   ------------------------------------------------------------ */
.focus-bar {
  position: fixed;
  z-index: 92;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(1180px, calc(100% - 24px));
  min-height: 58px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 18px;
  background: rgba(11, 13, 15, .9);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.focus-title { min-width: 0; display: grid; gap: 1px; line-height: 1.35; }
.focus-title strong { color: var(--ink); font-size: 10.5px; font-weight: 400; white-space: nowrap; }
.focus-controls { margin-inline-start: auto; display: flex; align-items: center; gap: 5px; }
.focus-controls .icon-btn, .focus-controls .setting-button { width: 34px; height: 34px; flex-basis: 34px; border-radius: 10px; }
.focus-controls .icon-btn svg { width: 15px; height: 15px; }
.focus-divider { width: 1px; height: 22px; margin: 0 4px; background: var(--rule); }
.focus-page-jump { display: flex; align-items: center; gap: 4px; color: var(--muted-2); font-size: 8px; }
.focus-page-jump input { width: 42px; height: 32px; }
.focus-chip { min-height: 34px; padding: 0 10px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--faint); border-radius: 10px; background: transparent; color: var(--ink-soft); font-size: 9px; cursor: pointer; }
.focus-chip:hover { color: var(--accent); border-color: rgba(var(--accent-rgb), .35); }
.focus-chip svg { width: 14px; height: 14px; }
body.mushaf-focus { overflow: hidden; padding-bottom: 0; }
body.mushaf-focus .topbar, body.mushaf-focus .hero, body.mushaf-focus .library-panel, body.mushaf-focus .reader-top, body.mushaf-focus .recitation-bar, body.mushaf-focus .page-actions, body.mushaf-focus .page-status, body.mushaf-focus .site-footer, body.mushaf-focus .reader-message { display: none !important; }
body.mushaf-focus .mushaf-stage {
  position: fixed;
  z-index: 70;
  inset: 0;
  padding: 0;
  overflow: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(var(--accent-rgb), .06), transparent 70%),
    var(--paper);
}
body.mushaf-focus .mushaf-page {
  width: 100%;
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  height: auto;
  padding: max(78px, calc(env(safe-area-inset-top) + 70px)) clamp(18px, 4.5vw, 86px) 140px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.mushaf-focus .mushaf-page::before { inset: 8px; }
body.mushaf-focus .mushaf-page::after { inset: 13px; }
body.mushaf-focus .quran-content { font-size: calc(clamp(1.5rem, 1.6vw + .6rem, 2.9rem) * var(--quran-zoom, 1)); }
body.mushaf-focus .player-dock { z-index: 75; width: min(980px, calc(100% - 24px)); }
body.mushaf-focus .search-overlay, body.mushaf-focus .modal-layer { z-index: 110; }
body.mushaf-focus .toast { z-index: 130; }

/* ------------------------------------------------------------
   Toast, drawer, misc
   ------------------------------------------------------------ */
.toast {
  position: fixed;
  z-index: 130;
  bottom: 112px;
  left: 50%;
  max-width: calc(100% - 28px);
  padding: 10px 16px;
  border: 1px solid rgba(var(--accent-rgb), .32);
  border-radius: 999px;
  background: rgba(11, 13, 15, .95);
  box-shadow: var(--shadow);
  color: var(--accent-strong);
  font-size: 10px;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 10px);
  transition: opacity .22s, transform .22s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.drawer-scrim { position: fixed; z-index: 55; inset: 0; border: 0; background: rgba(0, 0, 0, .54); cursor: default; }
.drawer-scrim[hidden] { display: none; }

/* ------------------------------------------------------------
   Light theme
   ------------------------------------------------------------ */
body.light-theme {
  color-scheme: light;
  --paper: #f4f1e9;
  --paper-soft: #fbf8f0;
  --ink: #171a18;
  --ink-soft: #313631;
  --muted: #62675f;
  --muted-2: #858a80;
  --faint: rgba(23, 26, 24, .16);
  --rule: rgba(23, 26, 24, .1);
  --wash: rgba(23, 26, 24, .035);
  --glass-bg: linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .48));
  --glass-border: rgba(23, 26, 24, .12);
  --glass-shadow: 0 18px 50px rgba(40, 45, 38, .08), inset 0 1px 0 rgba(255, 255, 255, .85);
  --glass-strong: rgba(250, 247, 239, .95);
  --accent: #8a6a27;
  --accent-strong: #6f531b;
  --accent-ink: #fffaf0;
  --accent-rgb: 138, 106, 39;
  --green: #2d7c5a;
  --blue: #276c83;
  --page-bg:
    radial-gradient(ellipse at 50% -8%, rgba(255, 255, 255, .92), transparent 62%),
    linear-gradient(155deg, #fffdf7 0%, #fbf5e7 54%, #f7eedb 100%);
  --page-ink: #1e3b32;
  --page-muted: #5b6e66;
  --page-border: rgba(156, 117, 45, .34);
  --page-glow: rgba(156, 117, 45, .035);
  --page-number: #7c5c23;
  background:
    radial-gradient(ellipse 62% 42% at 50% -12%, rgba(197, 157, 75, .16), transparent 66%),
    radial-gradient(ellipse 44% 38% at 98% 30%, rgba(93, 150, 170, .08), transparent 64%),
    var(--paper);
}
body.light-theme::before { opacity: .18; background-image: radial-gradient(rgba(23, 26, 24, .18) .45px, transparent .55px); }
body.light-theme .topbar { background: rgba(244, 241, 233, .65); }
body.light-theme .topbar.scrolled { background: rgba(244, 241, 233, .92); }
body.light-theme .player-dock { background: linear-gradient(120deg, rgba(250, 247, 240, .96), rgba(255, 253, 247, .94)); border-color: rgba(23, 26, 24, .12); }
body.light-theme .focus-bar { background: rgba(250, 247, 240, .95); border-color: rgba(23, 26, 24, .14); }
body.light-theme .search-dialog, body.light-theme .modal-card { background: rgba(250, 247, 240, .97); }
body.light-theme .search-backdrop, body.light-theme .modal-scrim { background: rgba(45, 40, 30, .36); }
body.light-theme .toast { background: rgba(250, 247, 240, .98); color: var(--accent-strong); }
body.light-theme .speed-wrap option { background: #fffdf7; }
body.light-theme .search-result { background: rgba(255, 255, 255, .55); }
body.light-theme .page-btn, body.light-theme .search-field { background: rgba(255, 255, 255, .42); }
body.light-theme .quran-word:hover { color: var(--accent); }
body.light-theme .quran-word.word-active { color: var(--accent-ink); }
body.light-theme .hero-card { background: rgba(255, 255, 255, .6); }
body.light-theme .hero-logo,
body.light-theme .about-logo { filter: brightness(.72) saturate(1.3) drop-shadow(0 0 24px rgba(138, 106, 39, .2)); }
body.light-theme .brand-logo,
body.light-theme .site-footer img { filter: brightness(.74) saturate(1.3) drop-shadow(0 0 14px rgba(138, 106, 39, .18)); }
body.light-theme .library-tabs { background: rgba(255, 255, 255, .38); }
body.light-theme .library-tab.active { background: rgba(255, 255, 255, .85); }
body.light-theme .player-main { color: #fffaf0; }
body.light-theme .btn-primary { background: var(--ink); color: #fdfaf2; }
body.light-theme .btn-listen { background: var(--ink); color: #fdfaf2; }
body.light-theme .btn-primary:hover, body.light-theme .btn-listen:hover { background: #000; color: #fff; }
body.light-theme .mushaf-page { box-shadow: 0 28px 80px rgba(58, 48, 30, .18), 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 0 70px rgba(156, 117, 45, .035) inset; }
body.light-theme .surah-item.active { background: rgba(138, 106, 39, .09); }
body.light-theme .reciter-chip.active { background: rgba(138, 106, 39, .09); }
body.light-theme .hero-aura { background: radial-gradient(circle, rgba(138, 106, 39, .14) 0%, rgba(138, 106, 39, .04) 40%, transparent 70%); }

/* ------------------------------------------------------------
   About page
   ------------------------------------------------------------ */
.about-page { padding-bottom: 40px; }
.about-shell { width: min(1080px, calc(100% - 48px)); margin: 0 auto; }
.about-hero { padding: 54px 0 34px; text-align: center; border-bottom: 1px solid var(--rule); }
.about-hero .about-logo { width: 92px; height: 92px; margin: 0 auto 14px; filter: drop-shadow(0 0 28px rgba(var(--accent-rgb), .2)); }
.about-hero h1 { margin: 8px 0 0; color: var(--ink); font-family: var(--serif); font-size: clamp(48px, 7vw, 82px); font-weight: 400; line-height: 1.05; }
.about-hero h1 span { color: var(--accent); }
.about-hero p { max-width: 620px; margin: 12px auto 0; color: var(--muted); font-size: 13px; line-height: 1.95; }
.about-hero .about-meta { margin-top: 20px; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.about-meta span { padding: 6px 12px; border: 1px solid var(--faint); border-radius: 999px; color: var(--muted); font-size: 9px; }
.about-meta strong { color: var(--accent); font-weight: 400; }
.about-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 24px 0 8px; }
.about-card { padding: 24px; border-radius: 24px; }
.about-card.wide { grid-column: 1 / -1; }
.about-card h2 { margin: 0 0 10px; color: var(--ink); font-family: var(--serif); font-size: 25px; font-weight: 400; line-height: 1.3; }
.about-card h3 { margin: 18px 0 6px; color: var(--ink); font-family: var(--serif); font-size: 18px; font-weight: 400; }
.about-card p { margin: 0 0 10px; color: var(--muted); font-size: 12px; line-height: 2; }
.about-card p:last-child { margin-bottom: 0; }
.about-card ul { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.about-card li { position: relative; padding-inline-start: 20px; color: var(--muted); font-size: 11.5px; line-height: 1.85; }
.about-card li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--accent); box-shadow: 0 0 7px rgba(var(--accent-rgb), .35); }
.about-card a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(var(--accent-rgb), .3); text-underline-offset: 3px; }
.about-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.about-stat { padding: 12px; border: 1px solid var(--rule); border-radius: 14px; text-align: center; }
.about-stat strong { display: block; color: var(--accent); font-family: var(--serif); font-size: 28px; font-weight: 400; line-height: 1.2; }
.about-stat span { color: var(--muted-2); font-size: 8px; }
.dev-card { background: linear-gradient(135deg, rgba(var(--accent-rgb), .1), rgba(255, 255, 255, .02)); }
.dev-signature { margin-top: 16px; display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid var(--rule); }
.dev-avatar { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), .4); background: rgba(var(--accent-rgb), .09); color: var(--accent); font-family: var(--serif); font-size: 22px; }
.dev-signature div { display: grid; gap: 2px; }
.dev-signature strong { color: var(--ink); font-family: var(--serif); font-size: 19px; font-weight: 400; }
.dev-signature a { color: var(--muted); font-size: 10px; direction: ltr; text-decoration: none; }
.dev-signature a:hover { color: var(--accent); }
.about-footer { padding: 20px 0 0; }

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1200px) {
  .hero { grid-template-columns: minmax(0, 1.1fr) minmax(270px, .9fr); }
  .workspace { grid-template-columns: 270px minmax(0, 1fr); }
}
@media (max-width: 1020px) {
  .topbar-inner, .page-shell, .about-shell { width: calc(100% - 32px); }
  .topbar-inner { gap: 14px; }
  .brand { min-width: 154px; }
  .brand-copy strong { font-size: 22px; }
  .nav-link { padding: 0 10px; }
  .workspace { grid-template-columns: 244px minmax(0, 1fr); gap: 14px; }
  .library-panel { padding-inline: 11px; }
  .surah-item-copy strong { font-size: 13px; }
  .hero h1 { font-size: clamp(64px, 8.6vw, 94px); }
  .reader-top { flex-wrap: wrap; }
  .page-jump { margin-inline-start: auto; }
  .player-dock { grid-template-columns: 170px minmax(260px, 1fr) 140px; gap: 12px; padding: 10px 14px; }
  .stream-badge { display: none; }
}
@media (max-width: 860px) {
  .hero { min-height: 0; padding: 36px 2px 32px; grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .hero h1 { font-size: clamp(62px, 13vw, 88px); }
  .hero-lede { max-width: 600px; }
  .workspace { display: block; padding-top: 18px; }
  .library-panel {
    position: fixed;
    z-index: 60;
    top: 82px;
    bottom: 95px;
    right: 10px;
    width: min(330px, calc(100% - 20px));
    max-height: none;
    min-height: 0;
    border-radius: 22px;
    background: var(--glass-strong);
    transform: translateX(calc(100% + 24px));
    transition: transform .28s cubic-bezier(.2, .7, .1, 1);
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
  }
  body.library-open .library-panel { transform: translateX(0); }
  .library-close { display: inline-grid; margin-inline-start: auto; }
  .panel-heading .surah-count { display: none; }
  .mobile-menu { display: inline-grid; }
  .main-nav { display: none; }
  .topbar-actions { margin-inline-start: auto; }
  .reader-column { gap: 10px; }
  .reader-top { padding: 9px 10px; }
  .reader-tools { gap: 4px; }
  .reader-tools .icon-btn { width: 32px; height: 32px; flex-basis: 32px; }
  .recitation-bar { padding: 7px 8px; }
  .reciter-current-copy strong { font-size: 10.5px; }
  .live-badge { display: none; }
  .mushaf-page { min-height: 900px; padding: 20px 20px 50px; }
  .quran-content { font-size: calc(clamp(1.5rem, 6vw, 1.68rem) * var(--quran-zoom, 1)); line-height: 2.5; }
  .mushaf-line { min-height: 2.5em; line-height: 2.5; }
  .page-actions { justify-content: flex-start; }
  .page-tool { flex: 1 1 calc(33.333% - 5px); padding: 0 7px; font-size: 9px; }
  .site-footer { display: grid; grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 10px; padding: 16px; }
  .footer-dua { min-width: 0; }
  .footer-sources { text-align: center; }
  .player-dock {
    bottom: max(7px, env(safe-area-inset-bottom));
    width: calc(100% - 14px);
    min-height: 92px;
    padding: 9px 11px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    gap: 3px 10px;
    border-radius: 18px;
  }
  .player-info { grid-column: 1; grid-row: 1; }
  .player-center { grid-column: 2; grid-row: 1 / span 2; min-width: 112px; }
  .player-extra { grid-column: 1; grid-row: 3; justify-content: flex-start; }
  .player-avatar { width: 34px; height: 34px; flex-basis: 34px; font-size: 16px; }
  .player-track strong { font-size: 9.5px; }
  .player-track span { font-size: 8px; }
  .player-controls { gap: 8px; }
  .player-control { width: 25px; height: 25px; }
  .player-main { width: 36px; height: 36px; }
  .progress-row { grid-column: 1; grid-row: 2; font-size: 7.5px; }
  .toast { bottom: 106px; }
  .focus-bar { top: 8px; width: calc(100% - 14px); flex-wrap: wrap; padding: 7px 8px; gap: 6px; }
  .focus-title { order: 2; }
  .focus-exit { order: 1; }
  .focus-controls { order: 3; width: 100%; justify-content: center; }
  body.mushaf-focus .mushaf-stage { padding: 0; }
  body.mushaf-focus .mushaf-page { padding: 126px 14px 112px; }
  body.mushaf-focus .quran-content { font-size: calc(clamp(1.58rem, 6.2vw, 1.78rem) * var(--quran-zoom, 1)); line-height: 2.55; }
  .about-grid { grid-template-columns: 1fr; }
  .about-card.wide { grid-column: auto; }
}
@media (max-width: 620px) {
  .topbar-inner, .page-shell, .about-shell { width: calc(100% - 20px); }
  .topbar-inner { min-height: 68px; }
  .brand { min-width: 0; gap: 7px; }
  .brand-logo { width: 38px; height: 38px; }
  .brand-copy strong { font-size: 20px; }
  .brand-copy small { font-size: 7px; }
  .glass-action { width: 38px; padding: 0; }
  .glass-action span, .glass-action kbd { display: none; }
  .glass-icon { width: 38px; }
  .search-action svg { margin: 0; }
  .hero { padding: 28px 0 26px; }
  .hero-lede { font-size: 11.5px; line-height: 1.9; }
  .hero-actions .btn { flex: 1 1 auto; padding: 0 14px; font-size: 11px; }
  .hero-meta { gap: 8px; font-size: 9px; }
  .reader-top { gap: 7px; padding: 8px; }
  .position-emblem { width: 32px; height: 32px; flex-basis: 32px; font-size: 19px; }
  .reader-position strong { font-size: 9.5px; }
  .reader-position small { font-size: 7.5px; }
  .reader-tools { order: 3; width: 100%; justify-content: space-between; margin-inline-start: 0; }
  .translation-button { padding: 0 8px; }
  .page-jump { order: 2; font-size: 8px; }
  .page-jump input { width: 40px; height: 29px; }
  .recitation-bar { gap: 6px; }
  .reciter-current { gap: 7px; }
  .reciter-current .avatar { width: 33px; height: 33px; flex-basis: 33px; font-size: 16px; }
  .reciter-current-copy em { display: none; }
  .btn-listen { min-height: 35px; padding: 0 10px; font-size: 9.5px; }
  .mushaf-page { min-height: 760px; padding: 17px 12px 46px; border-radius: 8px; }
  .mushaf-page::before { inset: 7px; }
  .mushaf-page::after { inset: 11px; }
  .mushaf-topline { margin-bottom: 10px; font-size: 12px; }
  .quran-content { font-size: calc(clamp(1.5rem, 6vw, 1.68rem) * var(--quran-zoom, 1)); line-height: 2.5; }
  .mushaf-line { min-height: 2.5em; line-height: 2.5; }
  .mushaf-surah-title-row { font-size: 1.02em; }
  .verse-end { font-size: .52em; }
  .page-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page-tool { min-height: 36px; padding: 0 4px; justify-content: center; }
  .page-tool span { font-size: 8px; }
  .page-status { flex-wrap: wrap; gap: 5px; font-size: 7.5px; }
  .reciter-grid-inner { grid-template-columns: 1fr; }
  .modal-layer { padding: 10px; align-items: end; }
  .modal-card { width: 100%; max-height: 86vh; border-radius: 22px; padding: 18px; }
  .modal-head h2 { font-size: 25px; }
  .page-index-grid { max-height: 50vh; }
  .search-overlay { padding: 6vh 10px 14px; }
  .search-dialog { padding: 17px; border-radius: 22px; }
  .search-dialog h2 { font-size: 23px; }
  .about-hero { padding: 38px 0 26px; }
  .about-hero p { font-size: 13.5px; }
  .about-card { padding: 19px; }
  .about-card h2 { font-size: 23px; }
  .about-card p { font-size: 13px; line-height: 1.95; }
  .about-card li { font-size: 12.5px; line-height: 1.9; }
  .about-stats { grid-template-columns: 1fr; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
}
@media (max-width: 400px) {
  .hero-meta span:nth-of-type(2) { display: none; }
  .hero-meta i:first-of-type { display: none; }
  .quran-content { font-size: calc(clamp(1.5rem, 6.2vw, 1.62rem) * var(--quran-zoom, 1)); }
  .mushaf-line { min-height: 2.5em; }
  .page-tool span { display: none; }
  .page-tool { min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media print {
  @page { size: A4 portrait; margin: 8mm; }
  body { padding: 0 !important; background: #fff !important; }
  .topbar, .hero, .library-panel, .reader-top, .recitation-bar, .page-actions, .page-status, .site-footer, .player-dock, .toast, .focus-bar { display: none !important; }
  .workspace { display: block; padding: 0; }
  .mushaf-page { width: 100% !important; min-height: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
  .mushaf-page::before, .mushaf-page::after { display: none; }
  .mushaf-page-number { color: #785b2b; }
}


/* Mishkat dashboard, surah metadata, tafsir and music-inspired Quran player */
.home-dashboard{display:grid;grid-template-columns:minmax(270px,.82fr) minmax(0,1.55fr);gap:18px;padding:24px 0 18px;align-items:stretch;direction:ltr}.home-dashboard>.home-intro,.home-dashboard>.dashboard-main{direction:rtl}
.home-intro,.dashboard-main{border-radius:28px;padding:24px;min-width:0}
.home-intro{display:flex;flex-direction:column;gap:20px;background:radial-gradient(circle at 12% 5%,rgba(var(--accent-rgb),.12),transparent 42%),var(--glass)}
.home-brand-lockup{display:flex;align-items:center;gap:16px}.home-brand-lockup img{width:100px;height:100px;object-fit:contain;filter:drop-shadow(0 8px 24px rgba(0,0,0,.3))}.home-brand-lockup h1{font-family:var(--serif);font-size:clamp(46px,5vw,68px);font-weight:400;line-height:1.05;margin:2px 0;color:var(--ink)}.home-brand-lockup p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.8}
.daily-verse-box{padding:20px 18px;border:1px solid rgba(var(--accent-rgb),.22);border-radius:22px;background:rgba(255,255,255,.025)}.daily-verse-heading{display:flex;justify-content:space-between;align-items:center}.daily-verse-ornament{color:var(--accent);font-size:22px}.daily-verse-box blockquote{margin:14px 0 10px;color:var(--ink);font:clamp(20px,2.1vw,27px)/2.05 var(--quran);text-align:center}.daily-verse-reference{text-align:center;color:var(--muted);font-size:10px}.daily-verse-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:17px}.daily-verse-actions .btn{min-height:38px}.home-continue{display:grid;grid-template-columns:1fr auto;gap:3px 12px;align-items:center;text-align:right;padding:14px 16px;border:1px solid var(--rule);border-radius:18px;background:rgba(255,255,255,.025);color:var(--ink);cursor:pointer}.home-continue span{color:var(--muted);font-size:10px}.home-continue strong{font-size:12px;font-weight:500}.home-continue svg{grid-column:2;grid-row:1/3;width:18px;height:18px;color:var(--accent)}
.dashboard-main{display:flex;flex-direction:column;gap:16px;background:var(--glass-strong)}.dashboard-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.dashboard-header h2{font-family:var(--serif);font-size:31px;font-weight:400;margin:3px 0 0}.dashboard-date{font-size:10px;color:var(--muted)}.dashboard-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:11px}.dashboard-tab{border:1px solid transparent;border-radius:999px;padding:8px 13px;background:transparent;color:var(--muted);font-size:10px;cursor:pointer;transition:.18s}.dashboard-tab:hover,.dashboard-tab.active{border-color:rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.09);color:var(--accent)}.dashboard-view{display:none;min-width:0;animation:dashboard-in .22s ease-out}.dashboard-view.active{display:block}.dashboard-view[hidden]{display:none!important}@keyframes dashboard-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
.progress-hero-card{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;border:1px solid rgba(var(--accent-rgb),.22);border-radius:20px;background:linear-gradient(120deg,rgba(var(--accent-rgb),.09),rgba(255,255,255,.02))}.progress-hero-card>div:first-child{display:grid;gap:5px}.progress-hero-card strong{font-family:var(--serif);font-size:42px;font-weight:400;color:var(--accent);line-height:1.1}.progress-hero-card small{color:var(--muted);font-size:10px}.progress-ring{width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--accent) var(--progress,0%),rgba(255,255,255,.09) 0);position:relative}.progress-ring:before{content:"";position:absolute;inset:7px;border-radius:50%;background:#121416}.progress-ring span{position:relative;color:var(--ink);font-size:12px}.progress-stats-grid,.progress-detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}.progress-detail-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.progress-stat,.progress-detail{padding:14px;border:1px solid var(--rule);border-radius:17px;background:rgba(255,255,255,.02);min-width:0}.progress-stat span,.progress-detail .eyebrow{display:block;color:var(--muted);font-size:9px;line-height:1.7}.progress-stat strong,.progress-detail strong{display:block;margin-top:7px;color:var(--ink);font-size:14px;font-weight:500;overflow-wrap:anywhere}.progress-detail small{display:block;margin-top:5px;color:var(--muted);font-size:9px}.dashboard-note{margin:12px 0 0;color:var(--muted-2);font-size:9px;line-height:1.9}
.surah-information-head{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px}.surah-information-head h3,.hadith-heading h3{font-family:var(--serif);font-size:31px;font-weight:400;color:var(--ink);margin:4px 0}.surah-information-head p,.hadith-heading p{font-size:10px;color:var(--muted);margin:0}.dashboard-select-label{display:grid;gap:6px;color:var(--muted);font-size:9px;min-width:115px}.dashboard-select-label select,.dashboard-select-label input{min-width:0;width:100%;padding:9px 12px;border:1px solid var(--rule);border-radius:12px;background:#131619;color:var(--ink);font:inherit;font-size:10px;outline:none}.dashboard-select-label option{background:#141719}.surah-info-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:14px 0}.surah-info-cell{padding:15px 12px;border:1px solid var(--rule);border-radius:15px;background:rgba(255,255,255,.022)}.surah-info-cell span{display:block;color:var(--muted);font-size:9px}.surah-info-cell strong{display:block;margin-top:7px;font-size:17px;font-weight:500;color:var(--ink)}
.album-player{display:grid;grid-template-columns:170px minmax(0,1fr);gap:22px;align-items:center;padding:8px 8px 18px}.record-wrap{display:grid;place-items:center}.record-disc{width:154px;height:154px;border-radius:50%;padding:7px;display:grid;place-items:center;background:repeating-radial-gradient(circle,#111 0 3px,#292b2c 4px 5px,#101112 6px 8px);border:1px solid rgba(255,255,255,.18);box-shadow:0 15px 35px rgba(0,0,0,.32),inset 0 0 0 2px rgba(255,255,255,.04)}.record-disc:after{content:"";position:absolute;width:4px;height:4px;border-radius:50%;background:#111}.record-disc .record-label{width:65px;height:65px;border-radius:50%;display:grid;place-items:center;align-content:center;gap:0;border:2px solid #ab8a53;background:radial-gradient(circle,#d8bc7d,#8d6b36);color:#221a0e;overflow:hidden}.record-label img{width:42px;height:42px;object-fit:contain}.record-label span{font-size:8px;margin-top:-4px}.record-disc.spinning{animation:record-spin 8s linear infinite}@keyframes record-spin{to{transform:rotate(360deg)}}.album-player-info h3{font-family:var(--serif);font-size:28px;font-weight:400;margin:6px 0;color:var(--ink)}.album-player-info p{margin:0;color:var(--muted);font-size:11px}.album-actions{display:flex;gap:8px;align-items:center;margin-top:14px}.album-actions .btn{min-height:32px;font-size:9px}.album-playback-controls{display:flex;justify-content:center;align-items:center;gap:24px;padding:2px 0 14px}.album-playback-controls .player-main{width:52px;height:52px}.album-modes{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:14px 0;border-top:1px solid var(--rule)}.mode-pill{border:1px solid var(--rule);border-radius:999px;background:rgba(255,255,255,.025);padding:9px 13px;color:var(--muted);font-size:9px;cursor:pointer}.mode-pill.active{border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.1);color:var(--accent)}.album-modes .dashboard-select-label{max-width:185px}
.tafsir-filters{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:9px;margin-bottom:13px}.tafsir-verse-box,.tafsir-text-card{border:1px solid var(--rule);border-radius:17px;padding:15px;background:rgba(255,255,255,.025);margin-top:9px}.tafsir-verse-box p{font:20px/2 var(--quran);color:var(--ink);margin:9px 0 0}.tafsir-text-card header{display:flex;justify-content:space-between;align-items:center}.tafsir-text-card header .eyebrow{color:var(--accent)}.tafsir-text-card p{font:13px/2.05 var(--quran);color:var(--ink);white-space:pre-wrap;margin:9px 0 0}
.hadith-heading{margin-bottom:14px}.hadith-search-label{max-width:320px;margin-bottom:12px}.hadith-layout{display:grid;grid-template-columns:minmax(125px,.6fr) minmax(0,1.4fr);gap:12px}.hadith-list{max-height:280px;overflow:auto;display:grid;align-content:start;gap:5px}.hadith-item{border:1px solid var(--rule);border-radius:11px;padding:9px 10px;background:rgba(255,255,255,.02);color:var(--muted);font-size:9px;text-align:right;cursor:pointer}.hadith-item.active{border-color:rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.09);color:var(--accent)}.hadith-reading-card{border:1px solid var(--rule);border-radius:17px;padding:16px;background:rgba(255,255,255,.025);min-height:190px}.hadith-reading-card h3{font-family:var(--serif);font-size:22px;font-weight:400;margin:5px 0 12px}.hadith-reading-card p{font:14px/2 var(--quran);color:var(--ink);white-space:pre-wrap;margin:0}.hadith-reading-card small{display:block;margin-top:13px;color:var(--muted);font-size:9px}
.ayah-selection-menu{position:fixed;z-index:140;display:flex;gap:4px;padding:6px;border-radius:12px;box-shadow:0 12px 35px rgba(0,0,0,.4)}.ayah-selection-menu[hidden]{display:none}.ayah-selection-menu button{border:0;background:transparent;color:var(--ink);border-radius:8px;padding:8px 12px;font-size:10px;cursor:pointer}.ayah-selection-menu button:hover{background:rgba(var(--accent-rgb),.12);color:var(--accent)}
body.light-theme .record-disc{box-shadow:0 15px 35px rgba(0,0,0,.2)}body.light-theme .dashboard-select-label select,body.light-theme .dashboard-select-label input{background:#fff;color:#242424}body.light-theme .progress-ring:before{background:#f7f5ef}
@media(max-width:900px){.home-dashboard{grid-template-columns:1fr}.home-intro{display:grid;grid-template-columns:1fr 1fr;align-items:center}.home-brand-lockup{grid-column:1/-1}.home-continue{grid-column:1/-1}}
@media(max-width:640px){.home-dashboard{padding-top:14px;gap:12px}.home-intro,.dashboard-main{padding:16px;border-radius:21px}.home-intro{display:flex;gap:14px}.home-brand-lockup img{width:76px;height:76px}.home-brand-lockup h1{font-size:48px}.daily-verse-box{padding:15px 12px}.daily-verse-box blockquote{font-size:21px}.dashboard-tabs{gap:4px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:9px}.dashboard-tab{flex:0 0 auto;padding:8px 11px}.progress-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.progress-stat:last-child{grid-column:1/-1}.progress-detail-grid{grid-template-columns:1fr 1fr}.surah-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tafsir-filters{grid-template-columns:1fr 1fr}.tafsir-filters label:last-child{grid-column:1/-1}.album-player{grid-template-columns:112px minmax(0,1fr);gap:14px}.record-disc{width:108px;height:108px}.record-disc .record-label{width:52px;height:52px}.record-label img{width:34px;height:34px}.album-player-info h3{font-size:22px}.hadith-layout{grid-template-columns:1fr}.hadith-list{max-height:150px;grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-header h2{font-size:26px}}
@media(max-width:390px){.progress-detail-grid{grid-template-columns:1fr}.album-modes{justify-content:flex-start}.home-brand-lockup p{max-width:190px}.daily-verse-actions .btn{font-size:9px;padding:0 10px}}
@media(hover:none) and (pointer:coarse){.ayah-selection-menu{display:none!important}}


[hidden]{display:none!important}
.live-dot,.studio-live i{width:7px;height:7px;border-radius:50%;background:#80b89b;box-shadow:0 0 0 4px rgba(128,184,155,.1)}
.daily-verse-heading{display:flex;align-items:center;justify-content:space-between}
.orbit-two{width:92%;transform:rotate(25deg) scaleY(.35);border-color:rgba(229,203,146,.09)}
.wave-mark{color:var(--accent);font-size:22px}
.service-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:rgba(var(--accent-rgb),.10);color:var(--accent)}
.service-icon svg,.service-arrow{width:17px;height:17px}
.service-arrow{align-self:flex-end;color:var(--muted-2);margin-top:-4px}
.progress-page-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--rule)}
.progress-page-actions .dashboard-note{margin:0;max-width:640px}
.page-read-confirm{border-color:rgba(127,184,155,.24)!important}
.page-read-confirm.confirmed{background:rgba(101,167,126,.13);border-color:rgba(127,184,155,.55)!important;color:#9bd1a7}
.page-read-confirm.confirmed svg{color:#9bd1a7}
.daily-target-highlight{position:relative!important;border-radius:8px;background:rgba(222,190,113,.2)!important;box-shadow:0 0 0 2px rgba(222,190,113,.32),0 0 22px rgba(222,190,113,.2);animation:daily-pulse 1.1s ease-in-out 2}
@keyframes daily-pulse{50%{background:rgba(222,190,113,.34)!important;box-shadow:0 0 0 4px rgba(222,190,113,.22),0 0 28px rgba(222,190,113,.28)}}
/* Three-column, music-player-inspired Quran audio studio */
.studio-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.studio-heading h3{font-family:var(--serif);font-size:30px;font-weight:400;margin:3px 0}
.studio-heading p{color:var(--muted);font-size:10px;margin:0}
.studio-live{display:inline-flex;align-items:center;gap:9px;color:var(--muted);font-size:9px;white-space:nowrap}
.studio-live i{display:inline-block}
.player-studio-grid{display:grid;grid-template-columns:minmax(190px,.82fr) minmax(300px,1.28fr) minmax(190px,.82fr);grid-template-areas:"reciters center surahs";gap:14px;align-items:stretch;direction:ltr}
.studio-column,.studio-center{direction:rtl;min-width:0;border:1px solid var(--rule);border-radius:18px;background:rgba(255,255,255,.018);padding:13px}
.studio-reciter-column{grid-area:reciters}.studio-center{grid-area:center;display:flex;flex-direction:column;align-items:stretch;gap:14px;padding:20px 18px}.studio-surah-column{grid-area:surahs}
.studio-column-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.studio-column-head strong{font-size:12px;font-weight:500}.studio-column-head span{font-size:8px;color:var(--muted)}
.studio-search{height:36px;display:flex;align-items:center;gap:7px;padding:0 10px;border:1px solid var(--rule);border-radius:11px;background:rgba(0,0,0,.12);color:var(--muted)}
.studio-search svg{width:14px;height:14px;flex:0 0 14px}.studio-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font:10px "Readex Pro",sans-serif}
.studio-list{display:flex;flex-direction:column;gap:5px;max-height:510px;overflow:auto;margin-top:10px;padding-inline-end:2px;scrollbar-width:thin}
.studio-list-item{width:100%;display:flex;align-items:center;gap:9px;min-height:47px;padding:7px 8px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--ink);text-align:right;cursor:pointer;transition:background .16s,border-color .16s}
.studio-list-item:hover{background:rgba(255,255,255,.035)}.studio-list-item.active{border-color:rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.085)}
.studio-item-avatar,.studio-surah-number{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;border-radius:10px;background:rgba(var(--accent-rgb),.10);color:var(--accent);font-size:11px}
.studio-item-copy{flex:1;min-width:0;display:grid;gap:4px}.studio-item-copy strong{font-size:9px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio-item-copy small{font-size:7px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.studio-item-check{color:var(--accent);font-size:12px}.studio-surah-number{font-size:9px;border-radius:50%;background:rgba(255,255,255,.045);color:var(--muted)}
.studio-now-playing{text-align:center;display:flex;align-items:center;flex-direction:column}
.studio-now-playing>.eyebrow{align-self:stretch;text-align:right}
.studio-now-playing .record-wrap{margin:12px auto 7px}.studio-now-playing .record-disc{width:174px;height:174px;box-shadow:0 16px 40px rgba(0,0,0,.35),0 0 0 10px rgba(255,255,255,.018)}
.studio-now-playing .record-label{width:78px;height:78px}.studio-now-playing .record-label img{width:56px;height:56px}
.studio-now-playing h3{font-family:var(--serif);font-size:26px;font-weight:400;margin:5px 0 0;color:var(--ink)}
.studio-now-playing>p{font-size:10px;color:var(--muted);margin:4px 0 0}
.studio-ayah-label{margin-top:9px;color:var(--accent);font-size:9px}
.studio-center .album-actions{margin-top:9px}.studio-progress-block{width:100%;direction:ltr}
.studio-time-row,.studio-progress-caption{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:9px;color:var(--muted);font-variant-numeric:tabular-nums}
.studio-progress-block input[type=range],.studio-volume-row input[type=range]{width:100%;accent-color:var(--accent);cursor:pointer;margin:9px 0}
.studio-progress-block input[type=range]:disabled{opacity:.5;cursor:not-allowed}
.studio-progress-caption{font-size:8px;opacity:.8}
.studio-transport{padding:5px 0 2px;gap:25px}.studio-transport .player-main{width:58px;height:58px}.studio-transport .player-control{width:38px;height:38px}
.studio-volume-row{display:flex;align-items:center;gap:10px;direction:ltr}
.studio-mute{width:32px;height:32px;flex:0 0 32px;border:1px solid var(--rule);border-radius:50%;background:transparent;color:var(--muted);cursor:pointer}
.studio-volume-row input[type=range]{max-width:150px;margin:0}
.speed-wrap{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:8px;white-space:nowrap}
.speed-wrap select{border:1px solid var(--rule);border-radius:8px;background:#121617;color:var(--ink);padding:6px 7px;font:9px "Readex Pro",sans-serif}
.studio-modes{width:100%;padding:11px 0 0;gap:6px}.studio-modes .mode-pill{font-size:8px;padding:8px 10px}
.studio-note{font-size:8px;text-align:center;margin:0}
/* Progress image dialog and selection popover */
.progress-share-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.ayah-selection-menu{max-width:calc(100vw - 16px);flex-wrap:wrap;backdrop-filter:blur(18px);background:rgba(20,24,24,.94);border:1px solid rgba(var(--accent-rgb),.25)}
.ayah-selection-menu button{white-space:nowrap}
.hadith-collection-label{max-width:310px;margin-bottom:10px}
.hadith-search-label{margin-top:0}
.hadith-list{scrollbar-width:thin}
.hadith-reading-card{min-width:0}
body.light-theme .studio-search{background:rgba(0,0,0,.025)}
body.light-theme .studio-column,body.light-theme .studio-center{background:rgba(255,255,255,.44)}
body.light-theme .speed-wrap select{background:#fff;color:#222}

/* Dedicated player page — retains the V8 visual language and the same app engine. */
.player-entry-card{display:flex;align-items:center;gap:22px;padding:22px;border:1px solid var(--rule);border-radius:20px;background:linear-gradient(120deg,rgba(var(--accent-rgb),.08),rgba(255,255,255,.02))}
.player-entry-art{width:86px;height:86px;flex:0 0 86px;display:grid;place-items:center;border:1px solid rgba(var(--accent-rgb),.28);border-radius:50%;background:repeating-radial-gradient(circle,#141718 0 3px,#282b2b 4px 5px,#101213 6px 8px);box-shadow:0 14px 28px rgba(0,0,0,.24);color:var(--accent);font-size:36px}
.player-entry-copy{min-width:0}.player-entry-copy h3{font-family:var(--serif);font-size:25px;font-weight:400;margin:5px 0}.player-entry-copy p{font-size:10px;color:var(--muted);line-height:1.9;margin:0 0 14px}
.footer-links{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:10px}.footer-links a{color:var(--muted);font-size:10px;text-decoration:none}.footer-links a:hover{color:var(--accent)}
body.player-standalone .home-dashboard{display:block;min-height:calc(100vh - 140px);padding-top:20px}
body.player-standalone .home-intro,body.player-standalone #reader,body.player-standalone .site-footer,body.player-standalone #player-dock{display:none!important}
body.player-standalone .dashboard-main{width:100%;min-height:calc(100vh - 190px);padding:clamp(18px,2.5vw,30px)}
body.player-standalone .dashboard-header{margin-bottom:4px}
body.player-standalone .dashboard-header h2{font-size:32px}
body.player-standalone .dashboard-tabs{display:none!important}
body.player-standalone .dashboard-view:not([data-view-panel="player"]){display:none!important}
body.player-standalone .dashboard-view[data-view-panel="player"]{display:block!important}
body.player-standalone .player-studio-grid{min-height:560px}
body.player-standalone .studio-list{max-height:calc(100vh - 340px)}
body.player-standalone .player-studio-page{padding-top:12px}
body.player-standalone .main-nav .nav-link[data-nav="listen"]{border-color:rgba(var(--accent-rgb),.35);background:rgba(var(--accent-rgb),.09);color:var(--accent)}
@media(max-width:760px){body.player-standalone .home-dashboard{padding-top:10px}body.player-standalone .dashboard-main{padding:15px;border-radius:20px}body.player-standalone .player-studio-grid{grid-template-columns:1fr 1fr;grid-template-areas:"center center" "surahs reciters";min-height:0}body.player-standalone .studio-list{max-height:250px}}
@media(max-width:520px){.player-entry-card{padding:16px;gap:13px}.player-entry-art{width:62px;height:62px;flex-basis:62px;font-size:27px}.player-entry-copy h3{font-size:20px}body.player-standalone .player-studio-grid{grid-template-columns:1fr;grid-template-areas:"center" "surahs" "reciters"}body.player-standalone .studio-list{max-height:235px}body.player-standalone .dashboard-header h2{font-size:25px}}