/* ============================================================
   Huffadh — vanilla UI design system
   Calm, reading-first. Emerald/parchment, proper Uthmani script.
   Themes: [data-theme=light|dark] and [data-kids=true].
   ============================================================ */

@font-face {
  font-family: "UthmanicHafs";
  src: url("../assets/fonts/UthmanicHafs1_Ver13.otf") format("opentype");
  font-display: swap;
}
@font-face {
  font-family: "MeQuran";
  src: url("../assets/fonts/me_quran.ttf") format("truetype");
  font-display: swap;
}
/* Scheherazade New (SIL, OFL) — self-hosted Arabic subset. Used by the YusrQuran
   reading mode (#/quran) + vocabulary deck to match its exact typographic look. */
@font-face {
  font-family: "Scheherazade New";
  src: url("../assets/fonts/ScheherazadeNew-400.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Scheherazade New";
  src: url("../assets/fonts/ScheherazadeNew-600.woff2") format("woff2");
  font-weight: 500 700; font-display: swap;
}

:root {
  --brand: #0f766e;          /* teal-green */
  --brand-strong: #115e59;
  --brand-soft: #ccfbf1;
  --gold: #b4884d;
  --bg: #f7f5ef;             /* warm parchment */
  --surface: #ffffff;
  --surface-2: #f1efe7;
  --text: #1f2723;
  --text-soft: #5b6660;
  --border: #e4e0d5;
  --danger: #b3261e;
  --ok: #1f7a4d;
  --radius: 14px;
  --shadow: 0 1px 3px rgba(20, 30, 25, .06), 0 8px 24px rgba(20, 30, 25, .05);
  --maxw: 760px;
  --arabic: "UthmanicHafs", "MeQuran", serif;
  --scheher: "Scheherazade New", "UthmanicHafs", "Amiri", serif;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
:root[data-theme="dark"] {
  --brand: #2dd4bf;
  --brand-strong: #5eead4;
  --brand-soft: #0b3b37;
  --gold: #d6b988;
  --bg: #0f1512;
  --surface: #17201c;
  --surface-2: #1c2723;
  --text: #e7ede9;
  --text-soft: #9db0a7;
  --border: #263229;
  --shadow: 0 1px 3px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
}
:root[data-kids="true"] {
  --brand: #7c3aed;
  --brand-strong: #6d28d9;
  --brand-soft: #ede9fe;
  --gold: #f59e0b;
  --bg: #fff7fb;
  --surface: #ffffff;
  --radius: 24px;
  --shadow: 0 4px 0 #f0d9ff, 0 10px 30px rgba(124,58,237,.18);
  --ui: "Comic Sans MS", "Baloo 2", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ui);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand-strong); text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ---------- Header ---------- */
.app-header {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.app-header .brand {
  font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em;
  color: var(--brand-strong); display: flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.app-header .brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gold); }
.app-header .spacer { flex: 1; }
.icon-btn {
  border: 1px solid var(--border); background: var(--surface);
  width: 40px; height: 40px; border-radius: 12px; font-size: 1.1rem;
  display: inline-flex; align-items: center; justify-content: center; color: var(--text);
}
.icon-btn:hover { border-color: var(--brand); color: var(--brand-strong); }

/* ---------- Layout ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding: 20px 16px 96px; }
.page-title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 16px; }
.muted { color: var(--text-soft); }

/* ---------- Surah list ---------- */
.surah-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.surah-card {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow);
  transition: transform .12s ease, border-color .12s ease;
}
.surah-card:hover { transform: translateY(-2px); border-color: var(--brand); }
.surah-num {
  flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand-strong); font-weight: 800;
  border-radius: 10px; transform: rotate(0deg);
}
.surah-meta { flex: 1; min-width: 0; }
.surah-meta .en { font-weight: 700; }
.surah-meta .sub { font-size: .82rem; color: var(--text-soft); }
.surah-ar { font-family: var(--arabic); font-size: 1.5rem; color: var(--text); }

/* ---------- Reading view ---------- */
.reader-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 16px;
}
.reader-head .titles .ar { font-family: var(--arabic); font-size: 2rem; color: var(--brand-strong); }
.reader-head .titles .en { font-weight: 700; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 12px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 7px 14px; border-radius: 9px; color: var(--text-soft); font-weight: 600; }
.seg button.active { background: var(--surface); color: var(--brand-strong); box-shadow: var(--shadow); }

.ayah-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.ayah-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ayah-badge {
  font-size: .78rem; font-weight: 700; color: var(--brand-strong);
  background: var(--brand-soft); padding: 4px 10px; border-radius: 999px;
}
.ayah-actions { display: flex; gap: 6px; }
.ayah-actions .icon-btn { width: 34px; height: 34px; font-size: .95rem; }
.ayah-actions .icon-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }

.ayah-arabic {
  font-family: var(--arabic);
  font-size: var(--ar-size, 34px);
  line-height: 2.15;
  text-align: right;
  direction: rtl;
  color: var(--text);
  margin: 4px 0 10px;
}
.ayah-translation {
  font-size: var(--tr-size, 16px);
  color: var(--text-soft);
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}

/* Word-by-word */
.wbw { display: flex; flex-wrap: wrap; gap: 10px; direction: rtl; justify-content: flex-start; }
.wbw-word {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 10px; border-radius: 12px; background: var(--surface-2);
  border: 1px solid transparent; cursor: pointer; min-width: 54px;
}
.wbw-word:hover { border-color: var(--brand); }
.wbw-word.marked { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.wbw-ar { font-family: var(--arabic); font-size: var(--word-size, 22px); }
.wbw-tr { font-size: .72rem; color: var(--text-soft); direction: ltr; }
/* POS coloring (quran.com-style) toggled by body[data-colored=true] */
body[data-colored="true"] .pos-N { color: #1f7a4d; }  /* noun */
body[data-colored="true"] .pos-V { color: #c2410c; }  /* verb */
body[data-colored="true"] .pos-P { color: #2563eb; }  /* particle/preposition */
body[data-colored="true"] .pos-PN { color: #7c3aed; } /* proper noun */
body[data-colored="true"] .pos-PRON, body[data-colored="true"] .pos-DEM { color: #b45309; }

/* ---------- Quiz ---------- */
.quiz-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); text-align: center; }
.quiz-word { font-family: var(--arabic); font-size: 3rem; margin: 10px 0; }
.quiz-translit { color: var(--text-soft); margin-bottom: 20px; }
.choices { display: grid; gap: 10px; }
.choice {
  padding: 14px; border-radius: 12px; border: 1px solid var(--border);
  background: var(--surface); font-size: 1rem; font-weight: 600; color: var(--text);
  transition: all .1s ease;
}
.choice:hover { border-color: var(--brand); }
.choice.correct { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); border-color: var(--ok); color: var(--ok); }
.choice.wrong { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: var(--danger); color: var(--danger); }

/* ---------- Buttons / forms ---------- */
.btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  padding: 11px 18px; border-radius: 12px; border: 1px solid transparent;
  font-weight: 700; font-size: .95rem; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-strong); }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 6px; color: var(--text-soft); }
.field input, .field select {
  width: 100%; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font-size: 1rem; font-family: inherit;
}
.row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.row:last-child { border-bottom: 0; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(10,15,12,.45); backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: var(--surface); border-radius: 18px; box-shadow: var(--shadow);
  width: 100%; max-width: 420px; padding: 22px; border: 1px solid var(--border);
  position: relative;
}
.modal h2 { margin: 0 0 16px; font-size: 1.25rem; padding-right: 34px; }
.modal .close { position: absolute; top: 14px; right: 14px; z-index: 3; }

/* ---------- Bottom nav ---------- */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-around;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px); border-top: 1px solid var(--border);
}
.bottom-nav a {
  flex: 1; text-align: center; padding: 10px 0 12px; color: var(--text-soft);
  font-size: .72rem; font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.bottom-nav a .ico { font-size: 1.25rem; }
.bottom-nav a.active { color: var(--brand-strong); }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; top: 70px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--text); color: var(--surface); padding: 10px 16px; border-radius: 10px; font-size: .9rem; box-shadow: var(--shadow); animation: pop .2s ease; }
.toast.err { background: var(--danger); color: #fff; }
@keyframes pop { from { transform: translateY(-6px); opacity: 0; } }

.loading { text-align: center; padding: 40px; color: var(--text-soft); }
.spinner { width: 26px; height: 26px; border: 3px solid var(--border); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; margin: 0 auto 10px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
  .reader-head { flex-direction: column; align-items: stretch; }
  .quiz-word { font-size: 2.4rem; }
}

/* ============================================================
   Mushaf reader — faithful to live huffadh.app /#/s/:surah/:ayah
   ============================================================ */
@font-face {
  font-family: "KFGQPC Uthman Taha Naskh";
  src: url("../assets/fonts/KFGQPC_Uthman_Taha_Naskh_Regular.ttf") format("truetype");
  font-display: swap;
}

.mushaf {
  position: relative; left: 50%; transform: translateX(-50%);
  width: 100vw; min-height: calc(100vh - 64px);
  margin-top: -20px; padding: 14px 20px 120px;
  background: #f6f4de;
}
:root[data-theme="dark"] .mushaf { background: #14150f; }

.mushaf-toolbar {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 8px 0 30px; position: relative; flex-wrap: wrap;
}
.mushaf-toolbar .menu-dots { position: absolute; left: 10px; top: 6px; font-size: 1.5rem; cursor: pointer; color: #2a2a2a; line-height: 1; }
:root[data-theme="dark"] .mushaf-toolbar .menu-dots { color: #e8e8df; }
.rbtn {
  width: 46px; height: 46px; border-radius: 50%; background: #1c1c1c; color: #fff;
  border: 0; display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.1rem;
}
.rbtn[hidden] { display: none; }
.rbtn:hover { background: #000; }
.rbtn:disabled { opacity: .3; }
.rbtn.on { background: var(--brand); }
.rbtn.plain { background: transparent; color: #1c1c1c; width: auto; font-size: 1.6rem; }
.rbtn.plain.on { color: var(--brand); filter: drop-shadow(0 0 1px color-mix(in srgb, var(--brand) 60%, transparent)); }
.ic { display: block; flex: 0 0 auto; }
.btn-ic { display: inline-flex; align-items: center; gap: 7px; }
.btn-ic .ic { width: 1em; height: 1em; }
:root[data-theme="dark"] .rbtn.plain { color: #e8e8df; }
.mushaf-toolbar .ref { font-weight: 800; font-size: 1.2rem; min-width: 70px; text-align: center; color: #1c1c1c; }
.mushaf-toolbar .ref-pagenum { align-self: center; font-size: .7rem; font-weight: 600; color: var(--text-soft); white-space: nowrap; }
:root[data-theme="dark"] .mushaf-toolbar .ref { color: #e8e8df; }

.mushaf-words {
  display: flex; flex-wrap: wrap; direction: rtl; justify-content: center;
  gap: 4px 2px; max-width: 1240px; margin: 0 auto; padding: 6px 0 26px;
}
.mword { display: flex; flex-direction: column; align-items: center; padding: 4px 14px; border-radius: 12px; cursor: pointer; }
.mword:hover { background: rgba(0,0,0,.045); }
.mword.dim { opacity: .1; }
.mword.marked { background: rgba(180,136,77,.18); }
.mword .ar {
  font-family: "UthmanicHafs", "KFGQPC Uthman Taha Naskh", "MeQuran", serif;
  font-size: var(--ar-size, 40px); line-height: 1.75; color: #131313;
}
:root[data-theme="dark"] .mword .ar { color: #f1efe4; }
.mword .gl { font-size: .82rem; color: #8b8b7f; direction: ltr; margin-top: 1px; text-align: center; max-width: 130px; }
.mushaf.hide-gloss .mword .gl { display: none; }

/* Floating, draggable + resizable mini mushaf-page panel in the reader. It overlays
   the reader (does NOT reshape the ayah layout); the current ayah is highlighted.
   Position/size persist in localStorage. */
.read-mini { position: absolute; top: 62px; left: 10px; z-index: 6;
  width: 150px; height: 236px; min-width: 70px; min-height: 90px; max-width: 92vw;
  resize: both; overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow); }
.read-mini:empty { display: none; }
.read-mini.dragging { opacity: .93; box-shadow: 0 6px 16px rgba(20,30,25,.2), 0 20px 44px rgba(20,30,25,.14); }
.read-mini-body { flex: 1 1 auto; min-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
  cursor: move; touch-action: none; }
.read-mini .mpage-mini { box-sizing: border-box; background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; padding: 6px; overflow: hidden; font-size: 9px; }
.read-mini .mpage-mini .mpage-line { line-height: 1.7; overflow: hidden; }
.read-mini .mpage-mini .mpage-w.hl { background: rgba(96, 165, 250, .42); border-radius: 2px; }
/* Controls (open full / hide) — only on hover. */
.read-mini-ctrls { position: absolute; top: 3px; right: 3px; z-index: 3; display: flex; gap: 3px; opacity: 0; transition: opacity .12s ease; }
.read-mini:hover .read-mini-ctrls { opacity: 1; }
.read-mini-ctrls button { width: 19px; height: 19px; border: 0; border-radius: 5px; cursor: pointer;
  background: rgba(20,25,22,.55); color: #fff; font-size: .66rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
.read-mini-ctrls button:hover { background: rgba(20,25,22,.82); }
/* Page number as a centered footer line below the last ayah in the thumbnail. */
.mpage-pagenum { direction: ltr; text-align: center; font-family: var(--ui); font-size: .8em; font-weight: 700;
  color: #b4b4b4; line-height: 1.6; margin-top: .35em; white-space: nowrap; }

.mushaf-parts { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; max-width: 1240px; margin: 8px auto 0; padding: 0 4px;
  opacity: .5; transition: opacity .25s ease; }
.mushaf-parts:hover, .mushaf-parts:focus-within { opacity: 1; }
.part-dot { width: 31px; height: 31px; border-radius: 50%; background: #1c1c1c; color: #fff; border: 0; font-weight: 700; font-size: .74rem; }
.part-dot.active { background: var(--brand); }
.part-dot:hover { background: #000; }

.mushaf-translation { max-width: 940px; margin: 30px auto 0; text-align: center; font-size: var(--tr-size, 18px); line-height: 1.85; color: #232320; padding: 0 12px; }
:root[data-theme="dark"] .mushaf-translation { color: #d6d6cb; }
.mushaf.hide-tr .mushaf-translation { display: none; }

/* ⋮ dropdown in the mushaf toolbar */
.menu-wrap { position: absolute; left: 10px; top: 2px; }
.menu-pop {
  position: absolute; left: 0; top: 34px; z-index: 30;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); padding: 6px; min-width: 160px; display: flex; flex-direction: column;
}
.menu-pop[hidden] { display: none; }
.menu-pop button {
  text-align: left; background: transparent; border: 0; padding: 10px 12px;
  border-radius: 8px; font-size: .92rem; font-weight: 600; color: var(--text);
}
.menu-pop button:hover { background: var(--surface-2); color: var(--brand-strong); }

/* ---- Ayah fill-in-the-blank quiz ---- */
.quiz-timer { position: absolute; left: 12px; top: 8px; font-weight: 800; font-size: 1.3rem; color: #2a2a2a; }
:root[data-theme="dark"] .quiz-timer { color: #e8e8df; }
.quiz-ayah {
  display: flex; flex-wrap: wrap; direction: rtl; justify-content: center; align-items: center;
  gap: 10px 12px; max-width: 1100px; margin: 20px auto 0; padding: 10px;
  font-family: "UthmanicHafs", "MeQuran", serif; font-size: var(--ar-size, 38px); line-height: 2.1; color: #131313;
}
:root[data-theme="dark"] .quiz-ayah { color: #f1efe4; }
.quiz-ayah .q-word { }
.quiz-ayah .q-blank {
  display: inline-block; min-width: 120px; border-bottom: 3px solid #1c1c1c;
  text-align: center; color: var(--brand-strong); min-height: 1.6em;
}
:root[data-theme="dark"] .quiz-ayah .q-blank { border-color: #e8e8df; }
.quiz-ayah .q-blank.filled { border-bottom-color: var(--ok); color: var(--ok); }
.quiz-ayah .q-blank.revealed { border-bottom-color: var(--danger); color: var(--danger); }

.quiz-bank {
  display: flex; flex-wrap: wrap; direction: rtl; justify-content: center; gap: 12px;
  max-width: 900px; margin: 40px auto 0; padding: 20px; border-top: 2px solid var(--border);
}
.q-chip {
  font-family: "UthmanicHafs", "MeQuran", serif; font-size: calc(var(--ar-size, 38px) * .72);
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 18px; color: #131313; box-shadow: var(--shadow); transition: transform .1s, background .1s;
}
:root[data-theme="dark"] .q-chip { color: #f1efe4; }
.q-chip:hover { border-color: var(--brand); transform: translateY(-2px); }
.q-chip.used { opacity: 0; pointer-events: none; }
.q-chip.wrong { background: color-mix(in srgb, var(--danger) 20%, var(--surface)); border-color: var(--danger); animation: shake .4s; }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.quiz-status { text-align: center; margin: 26px auto 0; font-size: 1.1rem; font-weight: 700; display: flex; gap: 14px; align-items: center; justify-content: center; }
.quiz-status .q-win { color: var(--ok); }
.quiz-status .q-lose { color: var(--danger); }

/* Waqf/pause separators — shown small, never selectable */
.msep {
  font-family: "UthmanicHafs", "MeQuran", serif;
  font-size: calc(var(--ar-size, 40px) * .5);
  color: #9a9a8c; align-self: flex-start; padding: 0 1px; line-height: 1;
}
.q-sep {
  font-family: "UthmanicHafs", "MeQuran", serif;
  font-size: .55em; color: #9a9a8c; vertical-align: super; padding: 0 1px;
}
:root[data-theme="dark"] .msep, :root[data-theme="dark"] .q-sep { color: #6f6f64; }

/* Home top row (replaces removed header) */
.page-top { display: flex; align-items: center; justify-content: space-between; }
.page-actions { display: flex; gap: 8px; }

/* POS colors (quran.com-ish) — active only under a .colored / .wv-word ancestor */
.colored .pos-N,   .wv-word.pos-N   { color: #2e7d32; } /* noun - green */
.colored .pos-V,   .wv-word.pos-V   { color: #e0651b; } /* verb - orange */
.colored .pos-PN,  .wv-word.pos-PN  { color: #7b1fa2; } /* proper noun - purple */
.colored .pos-P,   .wv-word.pos-P   { color: #1565c0; } /* preposition/particle - blue */
.colored .pos-PRON,.colored .pos-DEM,.colored .pos-REL,
.wv-word.pos-PRON, .wv-word.pos-DEM, .wv-word.pos-REL { color: #b8860b; } /* pronouns/relatives - gold */
.colored .pos-ADJ, .wv-word.pos-ADJ { color: #00838f; }
.colored .pos-CONJ,.wv-word.pos-CONJ { color: #6d4c41; }

/* Word view flashcard */
.wordview .wv-focus { text-align: center; padding: 44px 10px 20px; }
.wv-translit { color: var(--text-soft); font-size: 1rem; margin-bottom: 6px; direction: ltr; }
.wv-word { font-family: "UthmanicHafs","MeQuran",serif; font-size: clamp(64px, 13vw, 140px); line-height: 1.35; color: #131313; }
:root[data-theme="dark"] .wv-word { color: #f1efe4; }
.wv-gloss { font-size: 1.25rem; color: var(--text-soft); margin-top: 14px; }
.wv-context {
  display: flex; flex-wrap: wrap; direction: rtl; justify-content: center; gap: 6px 10px;
  max-width: 1100px; margin: 26px auto 0; padding: 16px; border-top: 1px solid var(--border);
  font-family: "UthmanicHafs","MeQuran",serif; font-size: 26px; line-height: 1.9; color: #131313;
}
:root[data-theme="dark"] .wv-context { color: #e9e7dc; }
.wv-ctx { cursor: pointer; padding: 0 2px; border-radius: 6px; }
.wv-ctx:hover { background: rgba(0,0,0,.05); }
.wv-ctx.current { text-decoration: underline; text-decoration-color: var(--danger); text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* Full-ayah (flowing) reading mode — W toggle */
.ayah-flow {
  font-family: "UthmanicHafs","MeQuran",serif;
  font-size: var(--ar-size, 40px); line-height: 2.3; direction: rtl; text-align: center;
  color: #131313; max-width: 1000px; margin: 24px auto; padding: 0 16px;
}
:root[data-theme="dark"] .ayah-flow { color: #f1efe4; }

/* ============================================================
   Rounded inset panel (all mushaf views) + parts restyle + ref
   (overrides earlier rules) — matches live huffadh.app
   ============================================================ */
.container { padding: 12px; }
.mushaf {
  width: calc(100vw - 24px);
  min-height: calc(100vh - 24px);
  margin: 0;
  padding: 18px 22px 40px;
  border: 1px solid #e7e4cb;
  border-radius: 22px;
  box-shadow: 0 2px 18px rgba(30, 30, 15, .06);
}
:root[data-theme="dark"] .mushaf { border-color: #2a2b20; }
.mushaf-toolbar .ref { cursor: pointer; }
.mushaf-toolbar .ref:hover { text-decoration: underline; }

/* Parts: filled black = selected (default); empty w/ black border = unselected */
.part-dot { background: #1c1c1c; color: #fff; border: 2px solid #1c1c1c; }
.part-dot:hover { background: #000; }
.part-dot.off { background: transparent; color: #1c1c1c; }
.part-dot.off:hover { background: rgba(0, 0, 0, .06); }
:root[data-theme="dark"] .part-dot { background: #e8e8df; color: #14150f; border-color: #e8e8df; }
:root[data-theme="dark"] .part-dot.off { background: transparent; color: #e8e8df; }

/* Idle auto-hide (ayah + quiz): fade toolbar + parts, keep the ayah number (grayed) */
.mushaf.auto-hide .mushaf-toolbar > *,
.mushaf.auto-hide .mushaf-parts { transition: opacity .5s ease; }
.mushaf.auto-hide.idle .mushaf-toolbar > *:not(.ref) { opacity: 0; pointer-events: none; }
.mushaf.auto-hide.idle .mushaf-parts { opacity: 0; pointer-events: none; }
.mushaf.auto-hide.idle .mushaf-toolbar .ref { color: #bcb9a2; }
:root[data-theme="dark"] .mushaf.auto-hide.idle .mushaf-toolbar .ref { color: #55564a; }

/* Ayah number (2:255) shown larger on all views (double size) */
.mushaf-toolbar .ref { font-size: 2.4rem; }

/* Word-by-word gloss uses the configurable word-translation size */
.mword .gl { font-size: var(--wordtr-size, 13px); }

/* Quiz completion message shown next to the timer */
.quiz-done { position: absolute; left: 118px; top: 16px; font-weight: 800; font-size: 1.1rem; white-space: nowrap; }
.quiz-done.win { color: var(--ok); }
.quiz-done.lose { color: var(--danger); }

/* Mark a word "I don't know this": tap its translation → red underline */
.mword .gl { cursor: pointer; }
.mword.marked { background: transparent; }
/* Keep the hover highlight working on marked words (this rule would otherwise win). */
.mword.marked:hover { background: rgba(0,0,0,.045); }
:root[data-theme="dark"] .mword.marked:hover { background: rgba(255,255,255,.07); }
.mword.marked .gl {
  color: #cc1111;
  text-decoration: underline;
  text-decoration-color: #cc1111;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* Word view: root + lemma shown top-right */
.wv-root {
  position: absolute; right: 26px; top: 64px; text-align: center;
  direction: rtl; font-family: "UthmanicHafs", "MeQuran", serif; line-height: 1.35;
}
.wv-root-r { font-size: 1.5rem; color: var(--text-soft); }
.wv-root-l { font-size: 2.2rem; color: #131313; }
:root[data-theme="dark"] .wv-root-l { color: #f1efe4; }

/* Vocabulary trainer card */
.train-card { max-width: 560px; margin: 46px auto 0; text-align: center; }
.train-q { color: var(--text-soft); font-size: 1rem; margin-bottom: 8px; }
.train-word { font-family: "UthmanicHafs","MeQuran",serif; font-size: clamp(56px,11vw,120px); color: #131313; line-height: 1.3; }
:root[data-theme="dark"] .train-word { color: #f1efe4; }
.train-translit { color: var(--text-soft); margin: 4px 0 26px; }
.train-choices { display: grid; gap: 12px; }
.train-choice { padding: 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); font-size: 1.05rem; font-weight: 600; color: var(--text); transition: all .1s; }
.train-choice:hover { border-color: var(--brand); }
.train-choice.correct { background: color-mix(in srgb, var(--ok) 15%, var(--surface)); border-color: var(--ok); color: var(--ok); }
.train-choice.wrong { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: var(--danger); color: var(--danger); }
.train-src { display: inline-block; margin-top: 22px; color: var(--text-soft); font-size: .9rem; }

/* Tafsir modal */
.modal.modal-wide { max-width: 680px; }
.modal.modal-settings { max-width: 760px; }
/* Multi-column settings so the many options fit without a long scroll. */
.settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 2px 22px; align-items: start; }
.settings-grid .field { margin-bottom: 8px; }
.settings-grid .row { border-bottom: 0; padding: 7px 0; }
.settings-grid .field select, .settings-grid .field input[type="range"] { width: 100%; }
.tafsir-body { max-height: 64vh; overflow-y: auto; line-height: 1.9; font-size: 1.02rem; color: var(--text); }
.tafsir-body p { margin: 0 0 12px; }
.tafsir-body h1, .tafsir-body h2, .tafsir-body h3 { font-size: 1.06rem; margin: 14px 0 6px; }
.tafsir-body arabic, .tafsir-body .arabic { font-family: "UthmanicHafs", "MeQuran", serif; font-size: 1.3em; }

/* 2nd word-by-word gloss (shown together, distinguished) */
.mword .gl2 { color: #9a8f80; font-style: italic; }
:root[data-theme="dark"] .mword .gl2 { color: #8a8f80; }
.mword .gl3 { color: #7d8fa1; }
:root[data-theme="dark"] .mword .gl3 { color: #7f93a6; }

/* ============================================================
   KIDS MODE — a complete, playful reader layout for children.
   Toggled by [data-kids="true"] on <html> (Settings → Kids mode).
   CSS-only: big colorful word cards, chunky buttons, bouncy taps.
   ============================================================ */
:root[data-kids="true"] body { background: linear-gradient(160deg, #fff7fb 0%, #eefcff 55%, #fef9ec 100%); }
:root[data-kids="true"] .mushaf {
  background: linear-gradient(180deg, #ffffff 0%, #fdf4ff 100%);
  border: 3px solid #f0d9ff; border-radius: 28px;
  box-shadow: 0 10px 0 #f0d9ff, 0 24px 50px rgba(124,58,237,.16);
}
:root[data-theme="dark"][data-kids="true"] .mushaf { background: linear-gradient(180deg,#1a1230,#241a3d); border-color:#3a2a5a; box-shadow:0 10px 0 #2a1e46,0 24px 50px rgba(0,0,0,.5); }

/* Chunky, colourful toolbar buttons */
:root[data-kids="true"] .rbtn {
  width: 58px; height: 58px; font-size: 1.35rem; font-weight: 800;
  border-radius: 20px; box-shadow: 0 4px 0 rgba(0,0,0,.18);
  transition: transform .12s, box-shadow .12s;
}
:root[data-kids="true"] .rbtn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }
:root[data-kids="true"] .mushaf-toolbar .rbtn:nth-of-type(1) { background:#7c3aed; }
:root[data-kids="true"] .mushaf-toolbar .rbtn:nth-of-type(2) { background:#0ea5e9; }
:root[data-kids="true"] .mushaf-toolbar .rbtn:nth-of-type(3) { background:#f59e0b; }
:root[data-kids="true"] .mushaf-toolbar .rbtn:nth-of-type(4) { background:#10b981; }
:root[data-kids="true"] .mushaf-toolbar .rbtn:nth-of-type(5) { background:#f97316; }
:root[data-kids="true"] .mushaf-toolbar .rbtn:nth-of-type(6) { background:#06b6d4; }
:root[data-kids="true"] .rbtn.on { background:#ec4899 !important; }
:root[data-kids="true"] .rbtn.plain { background: transparent !important; box-shadow:none; color:#7c3aed; }
:root[data-kids="true"] .mushaf-toolbar .ref { font-size: 1.7rem; font-weight: 900; color:#7c3aed; }
:root[data-kids="true"] .mushaf-toolbar .menu-dots { font-size: 2rem; color:#7c3aed; }

/* Each word on its own bright, rounded, tappable card */
:root[data-kids="true"] .mushaf-words { gap: 14px; }
:root[data-kids="true"] .mword {
  padding: 14px 20px 10px; border-radius: 22px; border: 3px solid transparent;
  box-shadow: 0 5px 0 rgba(0,0,0,.10); transition: transform .12s, box-shadow .12s;
}
:root[data-kids="true"] .mword:hover, :root[data-kids="true"] .mword:active {
  transform: translateY(-4px) scale(1.04); box-shadow: 0 9px 0 rgba(0,0,0,.12);
}
:root[data-kids="true"] .mword:nth-child(6n+1) { background:#ffe3ef; border-color:#ffb8d6; }
:root[data-kids="true"] .mword:nth-child(6n+2) { background:#e3f2ff; border-color:#9ecbff; }
:root[data-kids="true"] .mword:nth-child(6n+3) { background:#fff4d6; border-color:#ffd77a; }
:root[data-kids="true"] .mword:nth-child(6n+4) { background:#e2fbe8; border-color:#8fe3a6; }
:root[data-kids="true"] .mword:nth-child(6n+5) { background:#f0e6ff; border-color:#c9a9ff; }
:root[data-kids="true"] .mword:nth-child(6n)   { background:#ffe9dc; border-color:#ffbf99; }
:root[data-kids="true"] .mword .ar { font-size: calc(var(--ar-size, 34px) * 1.15); color:#241a3d; }
:root[data-kids="true"] .mword .gl { font-size: 1rem; font-weight: 700; color:#5b21b6; max-width: 150px; }
:root[data-kids="true"] .mword .gl2 { color:#0e7490; }
:root[data-kids="true"] .mword .gl3 { color:#b45309; }
:root[data-kids="true"] .mword.marked { background:#fef08a !important; border-color:#f59e0b !important; }

/* Progress dots become gold star-buttons */
:root[data-kids="true"] .part-dot {
  width: 52px; height: 52px; border-radius: 50%; background:#f59e0b; color:#fff;
  border: 3px solid #d97706; box-shadow: 0 4px 0 #b45309; font-size:1.2rem;
}
:root[data-kids="true"] .part-dot.off { background:#fff; color:#f59e0b; }

/* Friendly, bigger full-ayah translation */
:root[data-kids="true"] .mushaf-translation {
  font-size: calc(var(--tr-size, 18px) * 1.15); font-weight: 700; color:#3b0764;
  background:#fdf4ff; border-radius: 20px; padding: 18px 22px; max-width: 760px;
  border: 3px dashed #d8b4fe;
}
:root[data-theme="dark"][data-kids="true"] .mushaf-translation { color:#e9d5ff; background:#241a3d; border-color:#5b3fa0; }

/* ============================================================
   SMART REVIEW — FSRS spaced-repetition + hifz (Sabaq/Sabqi/Manzil)
   ============================================================ */
.rv-topbar { position: relative; justify-content: center; padding: 8px 0 4px; }
.rv-home { max-width: 720px; margin: 8px auto 40px; padding: 0 16px; }
.rv-intro { color: var(--text-soft); line-height: 1.6; text-align: center; margin: 6px 0 20px; }
.rv-scope { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.rv-scope-lbl { font-weight: 700; color: var(--text-soft); }
.rv-chip { padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; }
.rv-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.rv-scope-cur { margin-left: auto; font-weight: 700; color: var(--brand-strong); }

.rv-buckets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.rv-bucket { border: 1.5px solid var(--border); border-radius: var(--radius); padding: 14px; background: var(--surface); border-left-width: 5px; }
.rv-bucket.b-manzil { border-left-color: #2f9e6f; }
.rv-bucket.b-sabqi  { border-left-color: #d6a13b; }
.rv-bucket.b-sabaq  { border-left-color: #6d7bd6; }
.rv-b-head { display: flex; align-items: baseline; gap: 6px; }
.rv-b-name { font-weight: 800; font-size: 1.05rem; }
.rv-b-sub { font-size: .75rem; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; }
.rv-b-count { font-size: 1.4rem; margin: 6px 0 2px; color: var(--text); }
.rv-b-count b { color: var(--brand-strong); }
.rv-b-count span { font-size: .95rem; color: var(--text-soft); }
.rv-b-desc { font-size: .82rem; color: var(--text-soft); line-height: 1.4; }

.rv-start { width: 100%; padding: 16px; font-size: 1.1rem; font-weight: 800; }
.rv-empty, .rv-alldone { text-align: center; }
.rv-alldone { padding: 20px; background: var(--brand-soft); border-radius: var(--radius); font-weight: 600; }
.rv-cram { margin-top: 12px; }

/* Session */
.rv-session { min-height: 70vh; }
.rv-progress { max-width: 560px; margin: 4px auto; height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.rv-progress-bar { height: 100%; background: var(--brand); border-radius: 999px; transition: width .25s; }
.rv-meta { max-width: 560px; margin: 8px auto; display: flex; justify-content: space-between; align-items: center; padding: 0 4px; }
.rv-tag { font-weight: 800; font-size: .8rem; padding: 3px 10px; border-radius: 999px; color: #fff; }
.rv-tag.b-manzil { background: #2f9e6f; } .rv-tag.b-sabqi { background: #d6a13b; } .rv-tag.b-sabaq { background: #6d7bd6; }
.rv-counter { color: var(--text-soft); font-weight: 700; }
.rv-card { max-width: 560px; margin: 20px auto; text-align: center; padding: 0 16px; }
.rv-word { font-family: var(--arabic); font-size: 3.4rem; color: var(--text); cursor: pointer; padding: 24px 0; line-height: 1.4; }
.rv-translit { color: var(--text-soft); font-style: italic; margin-bottom: 6px; }
.rv-answer { font-size: 1.5rem; font-weight: 700; color: var(--brand-strong); margin-bottom: 10px; }
.rv-actions { margin-top: 10px; }
.rv-show { width: 100%; max-width: 320px; padding: 14px; font-size: 1.05rem; }
.rv-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.rv-grade { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-radius: 12px; border: 0; color: #fff; font-size: .95rem; }
.rv-grade span { font-size: .72rem; opacity: .85; font-weight: 600; }
.rv-grade.g-again { background: #d64545; } .rv-grade.g-hard { background: #d6912f; }
.rv-grade.g-good  { background: #2f9e6f; } .rv-grade.g-easy { background: #3b82d6; }
.rv-grade:active { transform: translateY(1px); }

.rv-done { max-width: 480px; margin: 40px auto; text-align: center; padding: 0 16px; }
.rv-done-emoji { font-size: 3rem; }
.rv-done-stats { font-size: 1.05rem; }
.rv-done-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }

:root[data-theme="dark"] .rv-bucket, :root[data-theme="dark"] .rv-chip { background: var(--surface); }
@media (max-width: 560px) {
  .rv-buckets { grid-template-columns: 1fr; }
  .rv-word { font-size: 2.8rem; }
}

/* Kids mode: brighter, chunkier review */
:root[data-kids="true"] .rv-word { color: #241a3d; }
:root[data-kids="true"] .rv-grade { border-radius: 18px; box-shadow: 0 4px 0 rgba(0,0,0,.15); font-weight: 800; }
:root[data-kids="true"] .rv-bucket { border-radius: 22px; }

/* AI tafsir summary */
.tf-gen { display: flex; align-items: center; gap: 10px; color: var(--text-soft); padding: 8px 0; }
.tf-ai-note { margin-top: 14px; font-size: .8rem; color: var(--text-soft); font-style: italic; }

.tf-sum-btn { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; font-weight: 700; }

/* Transliteration (word + full ayah) */
.mword .translit { font-size: .74rem; color: var(--brand-strong); font-style: italic; margin-top: 1px; direction: ltr; text-align: center; max-width: 130px; }
.mushaf-translit { max-width: 940px; margin: 22px auto 0; text-align: center; font-style: italic; color: var(--text-soft); font-size: calc(var(--tr-size, 16px) * .95); line-height: 1.8; padding: 0 12px; direction: ltr; }
.mushaf.hide-tr .mushaf-translit { display: none; }
:root[data-kids="true"] .mword .translit { color: #0e7490; }

/* Word morphology dialog */
.mph-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 2px; }
.mph-ar { font-family: var(--arabic); font-size: 2.6rem; color: var(--text); }
.mph-play { flex: 0 0 auto; }
.mph-sub { color: var(--text-soft); font-style: italic; }
.mph-ref { font-style: normal; font-weight: 700; color: var(--brand-strong); }
.mph-tr { font-size: 1.15rem; font-weight: 600; margin: 6px 0 14px; }
.mph-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.mph-row { display: flex; justify-content: space-between; padding: 8px 12px; background: var(--surface-2); border-radius: 10px; }
.mph-row span { color: var(--text-soft); }
.ar-inline { font-family: var(--arabic); font-size: 1.25rem; }
.mph-segs-title { font-weight: 700; color: var(--text-soft); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; }
.mph-segs { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.mph-seg { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.mph-seg-ar { font-family: var(--arabic); font-size: 1.5rem; }
.mph-seg-pos { color: var(--text); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.mph-seg-pos em { color: var(--text-soft); font-weight: 400; font-size: .82rem; }
.mph-pos-info { vertical-align: middle; }
.mph-link { display: inline-block; font-weight: 700; }

/* Play repeat-count button */
.rbtn.plain.rep { font-size: 1rem; font-weight: 800; min-width: 42px; color: var(--brand-strong); }
:root[data-theme="dark"] .rbtn.plain.rep { color: var(--brand); }

/* Full morphology page */
.mph-page { max-width: 760px; margin: 0 auto 60px; padding: 0 16px; }
.mph-hero { text-align: center; padding: 18px 0 20px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.mph-hero-ar { font-family: var(--arabic); font-size: 3.4rem; color: var(--text); line-height: 1.5; }
.mph-hero-tl { color: var(--text-soft); font-style: italic; font-size: 1.1rem; margin-top: 4px; }
.mph-hero-tr { font-size: 1.3rem; font-weight: 700; color: var(--brand-strong); margin-top: 6px; }
.mph-hero-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.mph-hero-actions .btn.on { background: var(--gold); color: #fff; border-color: var(--gold); }
.mph-ctx { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 12px; background: var(--surface-2); border-radius: var(--radius); margin-bottom: 20px; }
.mph-ctx-w { font-family: var(--arabic); font-size: 1.7rem; cursor: pointer; padding: 2px 8px; border-radius: 8px; color: var(--text-soft); }
.mph-ctx-w:hover { background: var(--surface); color: var(--text); }
.mph-ctx-w.current { background: var(--brand); color: #fff; }
.mph-h { font-size: 1.05rem; font-weight: 800; margin: 22px 0 12px; }
.mph-h-sub { font-weight: 500; color: var(--text-soft); font-size: .9rem; }
/* AI everyday-life example sentence panel */
.mph-sample { margin: 4px 0 18px; padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(16,185,129,.12), rgba(59,130,246,.10));
  border: 1px solid rgba(16,185,129,.28); }
:root[data-theme="dark"] .mph-sample { background: linear-gradient(135deg, rgba(16,185,129,.18), rgba(59,130,246,.14)); border-color: rgba(16,185,129,.35); }
.mph-sample.gen { display: flex; align-items: center; gap: 10px; color: var(--text-soft); }
.mph-sample-head { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--brand-strong); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.mph-sample-head .ar-inline { font-size: 1.25rem; text-transform: none; }
.mph-sample-head .mph-sample-del { margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 1rem; opacity: .55; padding: 2px 4px; line-height: 1; }
.mph-sample-head .mph-sample-del:hover { opacity: 1; }
.mph-sample-ar { font-family: var(--arabic); font-size: 1.7rem; line-height: 1.9; text-align: right; margin-bottom: 4px; }
.mph-sample-translit { color: var(--text-soft); font-style: italic; font-size: .92rem; text-align: right; margin-bottom: 12px; }
.mph-sample-trs { display: flex; flex-direction: column; gap: 7px; }
.mph-sample-tr { line-height: 1.5; }
.mph-sample-lbl { display: inline-block; min-width: 26px; font-size: .68rem; font-weight: 700;
  color: #fff; background: var(--brand-strong); border-radius: 6px; padding: 1px 6px; margin-right: 6px; text-align: center; }
.mph-sample-hint { margin: 0 0 12px; color: var(--text-soft); font-size: .9rem; }
/* Similar-in-meaning (near-synonyms) section */
.mph-sim { margin-top: 10px; }
.mph-sim.gen { display: flex; align-items: center; gap: 10px; color: var(--text-soft); padding: 12px 0; }
.mph-sim-head { display: flex; align-items: center; gap: 8px; }
.mph-sim-head .mph-h { margin-bottom: 0; }
.mph-sim-head .mph-sample-del { margin-left: auto; background: none; border: none; cursor: pointer; font-size: 1rem; opacity: .55; }
.mph-sim-head .mph-sample-del:hover { opacity: 1; }
.mph-sim-item { align-items: flex-start; }
.mph-sim-item .ar-inline { line-height: 1.6; }
.mph-sim-note { font-size: .74rem; color: var(--text-soft); font-style: italic; line-height: 1.35; }
.mph-facts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.mph-fact { flex: 1; min-width: 140px; display: flex; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--surface-2); border-radius: 10px; }
.mph-fact span { color: var(--text-soft); }
.mph-fact-vf { min-width: 100%; }
.mph-fact-vf b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; text-align: right; }
.mph-vcat { font-style: normal; font-weight: 400; color: var(--text-soft); font-size: .82rem; }
.mph-info { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; border: none;
  background: var(--brand-strong); color: #fff; font-style: italic; font-weight: 700;
  font-size: .78rem; line-height: 20px; text-align: center; cursor: pointer; font-family: Georgia, serif; }
.mph-info:hover { filter: brightness(1.1); }
/* Verb-form explainer dialog */
.vf-pattern { font-size: 2.4rem; text-align: center; margin: 6px 0 14px; color: var(--brand-strong);
  font-family: var(--ar, "Amiri", serif); }
.vf-fn { margin: 0 0 14px; line-height: 1.55; }
.vf-ex, .vf-cat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface-2); border-radius: 10px; margin-bottom: 10px; }
.vf-ex-lbl { color: var(--text-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.vf-ex-ar { font-size: 1.6rem; }
.vf-ex-gl { color: var(--text-soft); }
.pos-code { color: var(--text-soft); font-weight: 400; font-size: .9rem; }
.pos-ex-list { margin-bottom: 4px; }
.pos-ex-list .vf-ex { justify-content: flex-start; }
.vf-note { font-size: .82rem; color: var(--text-soft); line-height: 1.5; margin: 12px 0 0; }
.mph-fact-lemma b { display: flex; align-items: center; gap: 8px; }
/* Extended explainer prose (verb-form + lemma dialogs) */
.vf-prose { margin: 14px 0 0; }
.vf-prose p { font-size: .9rem; line-height: 1.6; margin: 0 0 10px; color: var(--text); }
.vf-prose .ar-inline { font-size: 1.05em; }
/* All-forms reference table */
.vf-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: .84rem; }
.vf-table th { text-align: left; color: var(--text-soft); font-weight: 600; font-size: .74rem;
  text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; border-bottom: 1px solid var(--border); }
.vf-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.vf-table tr.on td { background: var(--surface-2); font-weight: 600; }
.vf-t-rn { width: 2.6em; font-weight: 700; color: var(--brand-strong); }
.vf-t-pat { font-size: 1.15rem; white-space: nowrap; }
.vf-t-gl { color: var(--text-soft); }
.vf-table tr.on .vf-t-gl { color: var(--text); }
/* Root → lemma → surface chain */
.lm-chain { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin: 4px 0 4px; }
.lm-step { flex: 1; min-width: 120px; display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-align: center; padding: 12px 10px; background: var(--surface-2); border-radius: 10px; }
.lm-step.on { outline: 2px solid var(--brand-strong); outline-offset: -2px; }
.lm-ar { font-size: 1.7rem; }
.lm-cap { font-size: .72rem; color: var(--text-soft); line-height: 1.3; }
.lm-arrow { display: flex; align-items: center; color: var(--text-soft); font-size: 1.2rem; }
.mph-forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.mph-form { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.mph-form .ar-inline { font-size: 1.4rem; flex: 0 0 auto; }
.mph-form-gls { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mph-form-tr { font-size: .82rem; color: var(--text-soft); min-width: 0; }
.mph-form-tr .glang { display: inline-block; min-width: 22px; font-size: .58rem; font-weight: 700;
  color: var(--brand-strong); letter-spacing: .03em; vertical-align: middle; }
.mph-form-n { flex: 0 0 auto; font-weight: 700; color: var(--brand-strong); font-size: .82rem; }
/* Root header language chips */
.mph-root-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mph-root-langs { display: inline-flex; gap: 6px; flex: 0 0 auto; }

/* AI summary language chips (right-aligned above the text) */
.tf-sum-chips { display: flex; gap: 6px; justify-content: flex-end; margin-bottom: 10px; }
.tf-chip { padding: 4px 12px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-soft); font-weight: 700; font-size: .82rem; }
.tf-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.tf-sum-text { font-size: 1.02rem; line-height: 1.7; }

/* ============================================================
   CUSTOM DUAS
   ============================================================ */
.duas-page { max-width: 720px; margin: 8px auto 60px; padding: 0 16px; }
.dua-add-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.dua-add { flex: 1 1 auto; margin-bottom: 0; }
.dua-import { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.dua-import.busy { opacity: .65; pointer-events: none; }
.dua-form { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 18px; }
.dua-input { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font-family: inherit; font-size: 1rem; }
.dua-input[dir="rtl"] { font-family: var(--arabic); font-size: 1.6rem; }
.dua-form-actions { display: flex; gap: 10px; }
.dua-list { display: flex; flex-direction: column; gap: 10px; }
.dua-card { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); }
.dua-card-main { flex: 1; min-width: 0; cursor: pointer; }
.dua-card-ar { font-family: var(--arabic); font-size: 1.5rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dua-card-title { font-weight: 700; color: var(--brand-strong); margin-top: 2px; }
.dua-del { flex: 0 0 auto; }

.dua-modes { display: flex; gap: 8px; justify-content: center; margin: 8px 0 4px; }
/* Learn: one flex row per pasted line, word cards flow within it. */
.dua-lines { display: flex; flex-direction: column; gap: 6px; margin: 18px 0; }
.dua-line-block { padding: 4px 0; }
.dua-line-words { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; direction: rtl; }
.dua-line-tr { text-align: center; color: var(--text-soft); font-size: calc(var(--tr-size, 16px) * .95); margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
/* Quiz: one centered line per pasted line. */
.dua-quiz-lines { max-width: 900px; margin: 24px auto; padding: 0 16px; }
.dua-quiz-line { text-align: center; direction: rtl; font-family: var(--arabic); font-size: var(--ar-size, 34px); line-height: 2.1; margin-bottom: 4px; }
.dua-quiz-words { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; max-width: 900px; margin: 24px auto; padding: 0 16px; font-family: var(--arabic); font-size: var(--ar-size, 34px); line-height: 2; }
.dua-fixed { color: var(--text); }
.dua-blank { display: inline-block; min-width: 90px; border-bottom: 3px solid var(--brand); color: var(--brand-strong); text-align: center; }
.dua-blank.done { border-bottom-color: var(--ok); color: var(--ok); }
.dua-quiz-status { text-align: center; min-height: 28px; }
.dua-win { color: var(--ok); font-weight: 800; font-size: 1.15rem; }
/* Word bank floats as a rounded card near the bottom of the screen (stays reachable
   on long duas), hovering above the content with a gap from the edge. */
.dua-bank {
  position: sticky; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  padding: 14px 16px; margin: 20px auto 0; max-width: 640px;
}
:root[data-theme="dark"] .dua-bank { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.dua-bank-w { font-family: var(--arabic); font-size: 1.6rem; padding: 8px 16px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text); }
.dua-bank-w:hover:not(:disabled) { border-color: var(--brand); }
.dua-bank-w:disabled { opacity: .25; }
.dua-bank-w.shake { animation: shake .35s; border-color: var(--danger); }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }
.dua-reload { display: block; margin: 20px auto 0; }

/* ============================================================
   MEDINA MUSHAF PAGE VIEW (QCF V1 per-page fonts)
   ============================================================ */
/* Mushaf uses more of the screen (the narrow app container is widened for this view). */
.container:has(.mushaf-page-view) { max-width: 960px; padding-left: 8px; padding-right: 8px; }
.mushaf-page-view { max-width: 920px; margin: 0 auto; padding: 0 4px 50px; }
.mpage {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 20px; margin: 12px 0; box-shadow: var(--shadow); overflow: hidden;
}
/* Continuous QCF glyphs; per-page V1 fonts fill each full line at a single uniform
   size (JS picks the size so full lines span the width — like the printed mushaf). */
.mpage { font-size: 26px; }
.mpage-line {
  direction: rtl; white-space: nowrap; text-align: center;
  font-size: 1em; line-height: 2.4; color: var(--text);
}
.mpage-w { cursor: pointer; transition: color .1s; }
.mpage-w:hover { color: var(--brand); }
.mpage-w.end { color: var(--gold); }
.mpage-surah {
  text-align: center; font-family: var(--ui); font-weight: 800; font-size: .9rem;
  color: var(--brand-strong); background: var(--brand-soft);
  border: 1px solid var(--gold); border-radius: 8px; padding: 7px 10px; margin: 10px 0;
}
/* Basmala shown before a surah's first ayah on mushaf views (rendered in the Uthmani
   text font since the per-page glyph set doesn't include it). Sized in em to scale. */
.mpage-bism { direction: rtl; text-align: center; font-family: var(--arabic); font-size: .8em; line-height: 2.1; color: var(--text); white-space: nowrap; }
.read-mini .mpage-bism { line-height: 1.7; }
.mpage-foot { text-align: center; color: var(--text-soft); font-size: .82rem; margin-top: 6px; }
:root[data-theme="dark"] .mpage { background: #14150f; }

/* 2nd full-ayah translation (shown together, subtly separated) */
.mushaf-translation2 { margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--border); color: var(--text-soft); }

/* Highlighted ayah when jumping from the reader into the Mushaf page */
.mpage-w.hl { background: rgba(96, 165, 250, .30); border-radius: 3px; }
:root[data-theme="dark"] .mpage-w.hl { background: rgba(96, 165, 250, .34); }

/* ============================================================
   ISLAMIC BOOKS library
   ============================================================ */
.books-page { max-width: 760px; margin: 8px auto 60px; padding: 0 16px; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.book-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); cursor: pointer; transition: transform .12s, border-color .12s; }
.book-card:hover { transform: translateY(-2px); border-color: var(--brand); }
.book-title { font-family: var(--arabic); font-size: 1.8rem; color: var(--brand-strong); line-height: 1.5; }
.book-en { font-weight: 800; margin-top: 4px; }
.book-meta { font-size: .8rem; color: var(--text-soft); margin: 4px 0; }
.book-desc { font-size: .85rem; color: var(--text-soft); line-height: 1.4; }
.book-h { font-family: var(--arabic); font-size: 2.2rem; text-align: center; color: var(--brand-strong); margin: 10px 0 2px; line-height: 1.6; }
.book-h-sub { text-align: center; color: var(--text-soft); margin: 0 0 18px; }
.section-list { display: flex; flex-direction: column; gap: 8px; }
.section-card { display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.section-card.done { border-color: var(--ok); }
.section-n { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-strong); font-weight: 800; border-radius: 8px; }
.section-prev { flex: 1; min-width: 0; font-family: var(--arabic); font-size: 1.3rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section-check { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface); color: var(--ok); font-weight: 800; }
.section-card.done .section-check { background: var(--ok); color: #fff; border-color: var(--ok); }

/* Dua attachments & links */
.dua-file-btn { display: inline-block; padding: 11px 14px; border: 1.5px dashed var(--border); border-radius: 10px; cursor: pointer; color: var(--text-soft); font-weight: 600; }
.dua-file-btn:hover { border-color: var(--brand); color: var(--brand-strong); }
.de-attach { margin-top: 4px; }
.de-attach:empty { display: none; }
.dua-attach-view { max-width: 720px; margin: 16px auto 6px; padding: 0 16px; text-align: center; }
.dua-attach-view img { max-width: 100%; max-height: 300px; border-radius: 10px; border: 1px solid var(--border); display: block; margin: 0 auto 4px; }
.dua-attach-view a, .dua-attach-doc { font-weight: 700; color: var(--brand-strong); }
.dua-attach-x { display: inline-block; background: none; border: 0; color: var(--danger); font-weight: 700; cursor: pointer; padding: 6px 0; margin-top: 4px; }
.dua-links { display: flex; flex-direction: column; gap: 6px; max-width: 720px; margin: 12px auto 0; padding: 0 16px; }
.dua-link { color: var(--brand-strong); font-weight: 600; word-break: break-all; }
.dua-edit, .dua-del { flex: 0 0 auto; }

/* Ayah-end medallion: the font's ۝ ornate frame with the number centered inside */
.mpage-end { position: relative; display: inline-block; }
.mpage-end-n { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--ui); font-size: 0.30em; font-weight: 600; color: var(--brand-strong); line-height: 1; }

/* ============================================================
   Quran reading mode (#/quran) — word-by-word reader + moving marker
   ============================================================ */
.qr-page { max-width: 860px; margin: 8px auto 60px; padding: 0 16px; }
.qr-intro { color: var(--text-soft); font-size: .92rem; margin: 6px 2px 16px; }
/* Surah list */
.qr-surah-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.qr-surah-card { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  cursor: pointer; text-align: left; transition: background .15s; }
.qr-surah-card:hover { background: var(--surface-2); }
.qr-surah-num { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 9px; background: var(--surface-2); color: var(--text-soft);
  font-weight: 600; font-size: .85rem; }
.qr-surah-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.qr-surah-meta b { font-weight: 600; }
.qr-surah-meta small { color: var(--text-soft); font-size: .76rem; }
.qr-surah-ar { flex: 0 0 auto; font-family: var(--scheher); font-size: 1.5rem; color: var(--text-soft); }
/* Reader header */
.qr-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 6px 2px 18px; }
.qr-head-title h2 { margin: 0; font-size: 1.5rem; }
.qr-head-title h2 .ar-inline { font-family: var(--scheher); margin-inline-start: 6px; }
.qr-head-sub { margin: 3px 0 0; color: var(--text-soft); font-size: .85rem; text-transform: capitalize; }
.qr-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.qr-toggle { background: var(--surface-2); color: var(--text); }
.qr-toggle.on { background: var(--brand); color: #fff; }
/* Ayah cards */
.qr-ayahs { display: flex; flex-direction: column; gap: 16px; }
.qr-ayah { padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); scroll-margin-top: 70px; }
.qr-ayah.playing { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: -1px; }
.qr-ayah-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.qr-ay-play { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--surface-2); color: var(--text-soft); font-size: .8rem; }
.qr-ay-play:hover { background: var(--brand); color: #fff; }
.qr-ayah.playing .qr-ay-play { background: var(--brand); color: #fff; }
.qr-ay-ref { color: var(--text-soft); font-size: .78rem; font-variant-numeric: tabular-nums; }
/* Word-by-word interlinear */
.qr-ayah-words { display: flex; flex-wrap: wrap; gap: 3px 2px; align-items: flex-start; }
.qr-word { display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 7px; border: 0; background: none; border-radius: 9px; cursor: pointer; transition: background .12s; }
.qr-word:hover { background: var(--surface-2); }
.qr-word:hover .qr-w-ar { color: var(--brand); }
.qr-w-ar { font-family: var(--scheher); font-size: 1.9rem; line-height: 1.7; color: var(--text); }
.qr-w-gl { max-width: 8rem; text-align: center; font-size: .68rem; line-height: 1.2; color: var(--text-soft); }
.qr-word.active { background: color-mix(in srgb, var(--brand) 15%, transparent); }
.qr-word.active .qr-w-ar { color: var(--brand-strong); }
.qr-ay-num { align-self: center; font-family: var(--scheher); font-size: 1.4rem; color: var(--text-soft); }
.qr-reader:not(.show-gl) .qr-w-gl { display: none; }
.qr-reader:not(.show-tr) .qr-ay-tr { display: none; }
.qr-ay-tr { margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); color: var(--text-soft); font-size: .92rem; line-height: 1.55; }
/* Tafsir expander */
.qr-tafsir { margin-top: 10px; }
.qr-tafsir-btn { background: none; border: 0; cursor: pointer; color: var(--text-soft); font-size: .8rem; font-weight: 600; padding: 0; }
.qr-tafsir-btn:hover { color: var(--brand); }
.qr-tafsir-body { margin-top: 8px; max-height: 20rem; overflow-y: auto; padding: 14px; border-radius: 11px;
  background: var(--surface-2); font-size: .88rem; line-height: 1.6; }
.qr-tafsir-text b { font-weight: 600; }
.qr-tafsir-src { margin: 10px 0 0; color: var(--text-soft); font-size: .76rem; }
/* Word tap sheet */
.qw-hero { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.qw-ar { font-family: var(--scheher); font-size: 2.6rem; line-height: 1.5; }
.qw-gloss { font-size: 1.1rem; font-weight: 600; }
.qw-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.qw-badge { font-size: .78rem; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-soft); }
.qw-badge .ar-inline { font-family: var(--scheher); margin-inline-end: 4px; }
.qw-badge.coral { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand-strong); }
.qw-badge.info { background: color-mix(in srgb, #3b82f6 15%, transparent); color: #2563eb; }
.qw-badge.warn { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.qw-freq { color: var(--text-soft); font-size: .82rem; margin: 6px 0; font-variant-numeric: tabular-nums; }
.qw-explain-text { margin: 12px 0 0; padding: 12px; border-radius: 10px; background: var(--surface-2); font-size: .9rem; line-height: 1.55; }
.qw-actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }

/* Vocabulary deck (#/vocab) — lemma FSRS flashcards */
.vd-page { max-width: 620px; }
.vd-stage { margin-top: 10px; }
.vd-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vd-chip { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-soft); background: var(--surface-2); padding: 3px 10px; border-radius: 999px; }
.vd-chip.new { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand-strong); }
.vd-count { color: var(--text-soft); font-size: .8rem; font-variant-numeric: tabular-nums; }
.vd-card { padding: 26px 20px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); text-align: center; }
.vd-lemma { font-family: var(--scheher); font-size: 3.4rem; line-height: 1.5; }
.vd-freq { color: var(--text-soft); font-size: .82rem; margin-top: 4px; font-variant-numeric: tabular-nums; }
.vd-ex { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.vd-ex-words { display: flex; flex-wrap: wrap; gap: 5px 2px; justify-content: center; direction: rtl; }
.vd-ex-w { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; padding: 3px 5px; border-radius: 8px; }
.vd-ex-w.hit { background: color-mix(in srgb, var(--brand) 16%, transparent); }
.vd-ex-w.hit .vd-ex-ar { color: var(--brand-strong); }
.vd-ex-ar { font-family: var(--scheher); font-size: 1.7rem; line-height: 1.7; }
.vd-ex-gl { direction: ltr; font-size: .62rem; line-height: 1.15; color: var(--text-soft); max-width: 7rem; text-align: center; }
.vd-ex-ref { margin-top: 10px; color: var(--text-soft); font-size: .78rem; font-variant-numeric: tabular-nums; }
.vd-back { margin-top: 16px; }
.vd-gloss { font-size: 1.5rem; font-weight: 600; }
.vd-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.vd-irab { margin-top: 12px; color: var(--text-soft); font-size: .9rem; }
.vd-show { width: 100%; margin-top: 14px; }
.vd-rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; }
.vd-grade { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border: 0;
  border-radius: 11px; cursor: pointer; color: #fff; font-size: .9rem; }
.vd-grade span { font-size: .68rem; opacity: .85; font-variant-numeric: tabular-nums; }
.vd-grade.g1 { background: #dc2626; } .vd-grade.g2 { background: #d97706; }
.vd-grade.g3 { background: var(--brand); } .vd-grade.g4 { background: #475569; }
.vd-grade:hover { filter: brightness(1.08); }
.vd-done { text-align: center; padding: 50px 20px; }
.vd-done-emoji { font-size: 2.6rem; }
.vd-done h3 { margin: 10px 0 4px; }

/* Hifz (ayah memorization) — #/hifz dashboard + review */
.hz-page { max-width: 720px; }
.hz-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 16px; }
.hz-stat { text-align: center; padding: 14px 6px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.hz-stat b { display: block; font-size: 1.7rem; font-variant-numeric: tabular-nums; line-height: 1; }
.hz-stat span { font-size: .7rem; color: var(--text-soft); }
.hz-stat-due { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }
.hz-stat-due b { color: var(--brand-strong); }
.hz-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hz-actions .btn { flex: 1 1 auto; }
.hz-surahs { display: flex; flex-direction: column; gap: 8px; }
.hz-srow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: 11px; background: var(--surface); cursor: pointer; }
.hz-srow:hover { background: var(--surface-2); }
.hz-srow-r { display: flex; align-items: center; gap: 10px; }
.hz-srow-r small { color: var(--text-soft); font-size: .78rem; }
.hz-badge { font-size: .72rem; font-weight: 700; color: #fff; background: var(--brand); padding: 2px 8px; border-radius: 999px; }
/* add-surah picker */
.hz-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 60vh; overflow-y: auto; }
.hz-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; text-align: left; }
.hz-pick:hover { background: var(--surface-2); }
.hz-pick small { color: var(--text-soft); font-size: .72rem; }
/* reader per-ayah memorize toggle */
.qr-ay-right { display: flex; align-items: center; gap: 10px; }
.qr-ay-hifz { border: 1px solid var(--border); background: var(--surface); color: var(--text-soft);
  font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px; cursor: pointer; }
.qr-ay-hifz:hover { border-color: var(--brand); color: var(--brand); }
.qr-ay-hifz.on { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-strong); border-color: transparent; cursor: default; }
/* hifz review card */
.hz-card { text-align: center; }
.hz-ref { display: flex; flex-direction: column; gap: 3px; align-items: center; }
.hz-ref .ar-inline { font-family: var(--scheher); font-size: 2rem; }
.hz-ref-en { color: var(--text-soft); font-size: .82rem; }
.hz-prompt { margin: 14px auto 0; max-width: 34ch; color: var(--text-soft); font-size: .95rem; line-height: 1.5; }
.hz-reveal { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.hz-ayah { font-family: var(--scheher); font-size: 2.2rem; line-height: 2.2; }
.hz-w { padding: 1px 3px; border-radius: 6px; }
.hz-w.active { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand-strong); }
.hz-end { color: var(--text-soft); }
.hz-play { margin-top: 14px; }
.hz-controls { margin-top: 14px; }

/* Offline download modal */
.off-intro { color: var(--text-soft); font-size: .92rem; line-height: 1.55; margin: 0 0 14px; }
.off-status { margin: 10px 0; }
.off-prog { height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.off-bar { height: 100%; width: 0; background: var(--brand); transition: width .2s ease; }
.off-pct { display: block; margin-top: 6px; font-size: .82rem; color: var(--text-soft); }
.off-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.off-note { margin-top: 12px; color: var(--text-soft); font-size: .8rem; font-variant-numeric: tabular-nums; }

/* Compact tafsir dialog header: Tafsir · 2:220 · <selector> · [AI] */
.tf-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 34px 12px 0; }
.tf-head .tf-title { font-size: 1.1rem; font-weight: 600; color: var(--text); white-space: nowrap; }
.tf-sel {
  flex: 1 1 160px; min-width: 130px; max-width: 100%;
  border: none; background: transparent; padding: 2px 22px 2px 4px;
  font-size: .95rem; color: var(--brand); font-weight: 600; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%230f766e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 4px center; background-size: 12px;
  border-radius: 6px; transition: background-color .15s;
}
.tf-sel:hover { background-color: var(--surface-2); }
.tf-sel:focus { outline: none; background-color: var(--surface-2); }
.tf-head .tf-sum-btn { flex: 0 0 auto; padding: 4px 10px; font-size: .85rem; }