:root {
  --bg: #F5EDE6;
  --page-bg: #FBF6F2;
  --surface: #FFFFFF;
  --ink: #5A2B26;
  --ink-soft: #7C4138;
  --muted: #8C6A60;
  --hint: #B89A8F;
  --line: #E8D9D0;
  --line-soft: #F0E3DA;
  --accent: #C4604B;
  --accent-soft: #F5E3DC;
  --accent-strong: #9C4A38;
  --primary: #9C4A38;
  --success: #4A7C3C;
  --danger: #A33124;
  --learn: #2A9D8F;
  --learn-soft: #E2F1EE;
  --learn-strong: #1F7A6E;
  --test: #1F7A2A;
  --shadow-1: 0 1px 4px rgba(122, 64, 50, 0.06);
  --shadow-2: 0 6px 24px rgba(122, 64, 50, 0.12);
}

body.dark, body[data-theme="dark"] {
  --bg: #07060B;
  --page-bg: #0A0813;
  --surface: #110C1D;
  --ink: #F4E4BC;
  --ink-soft: #D6C49A;
  --muted: #9A8770;
  --hint: #6E5F4E;
  --line: #1F1830;
  --line-soft: #14102A;
  --accent: #E0B860;
  --accent-soft: #1F1730;
  --accent-strong: #F4D58E;
  --primary: #E0B860;
  --success: #6BD27A;
  --danger: #F08989;
  --learn: #3FB8A6;
  --learn-soft: #10312C;
  --learn-strong: #7FE0D2;
  --test: #2A9B3A;
  --shadow-1: 0 2px 6px rgba(0,0,0,0.55);
  --shadow-2: 0 8px 32px rgba(0,0,0,0.75);
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    --bg: #07060B;
    --page-bg: #0A0813;
    --surface: #110C1D;
    --ink: #F4E4BC;
    --ink-soft: #D6C49A;
    --muted: #9A8770;
    --hint: #6E5F4E;
    --line: #1F1830;
    --line-soft: #14102A;
    --accent: #E0B860;
    --accent-soft: #1F1730;
    --accent-strong: #F4D58E;
    --primary: #E0B860;
    --success: #6BD27A;
    --danger: #F08989;
    --learn: #3FB8A6;
    --learn-soft: #10312C;
    --learn-strong: #7FE0D2;
    --test: #2A9B3A;
    --shadow-1: 0 2px 6px rgba(0,0,0,0.55);
    --shadow-2: 0 8px 32px rgba(0,0,0,0.75);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: "Amiri", "Scheherazade New", "Geeza Pro", -apple-system, "Segoe UI", system-ui, sans-serif;
  min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden;
}

.topbar {
  position: sticky; top: 0; z-index: 50;
  /* v113: tighter gaps/padding so the page pill always fits on 360px-wide
     Androids — when it didn't, the pill got squeezed and its buttons spilled
     out of the rounded border. */
  padding: max(8px, env(safe-area-inset-top, 0px) + 4px) 8px 8px;
  display: flex; gap: 6px; align-items: center; justify-content: space-between;
  background: rgba(250, 247, 240, 0.96);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--line);
}
body.dark .topbar, body[data-theme="dark"] .topbar {
  background: rgba(21, 17, 10, 0.92);
}

/* Top "اختبر نفسك" green pill — primary call-to-action in the topbar */
.btn-test-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  border: 0;
  background: #1F7A2A;
  color: #fff;
  font: inherit; font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.1s, background 0.12s;
  box-shadow: 0 1px 3px rgba(31, 122, 42, 0.30);
}
.btn-test-pill:active { transform: scale(0.96); background: #176421; }
body.dark .btn-test-pill, body[data-theme="dark"] .btn-test-pill {
  background: #2A9B3A;
  box-shadow: 0 1px 4px rgba(42, 155, 58, 0.40);
}

/* Section divider inside the combined sheet */
.section-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 28px 0 14px;
  color: var(--muted);
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
}
.section-divider::before,
.section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.section-divider span {
  padding: 0 8px;
  background: var(--page-bg);
}

.iconbtn {
  width: 44px; height: 44px; border: 0; background: transparent;
  color: var(--ink); cursor: pointer; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}
.iconbtn:active { background: var(--line-soft); }

.page-pill {
  display: flex; align-items: center; gap: 0;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 4px;
  /* v113: NEVER shrink — shrinking pushed the buttons out of the border.
     direction:ltr + explicit DOM order = same layout on every engine. */
  flex: 0 0 auto;
  direction: ltr;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
}
/* v113: ultra-narrow screens (e.g. folded covers) — drop the «/ 604» (the
   page header already says «صفحة N من 604») so the icons keep a usable size.
   Extra selector depth beats the later `.page-pill .of` display rule. */
@media (max-width: 340px) {
  .page-pill .page-num .of { display: none; }
}
/* Group the input and the "/ 604" label so they stay together on one line
   regardless of how tight the topbar gets. direction:ltr keeps the slash
   between the two numbers visually (Arabic RTL would otherwise reorder it).
   v112: every piece is a FLEX-CENTERED box of the same 28px height —
   baseline alignment of <input> vs <span> drifted per engine (Android). */
.page-pill .page-num {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  direction: ltr;
  white-space: nowrap;
  padding: 0 3px;
}
.page-pill input {
  width: 34px; height: 28px;
  border: 0; background: transparent;
  text-align: center;
  font: inherit; font-size: 15px; font-weight: 700; line-height: 28px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  padding: 0; margin: 0;
  appearance: textfield;
  /* Strip the browser's native number-input spinner buttons */
  -moz-appearance: textfield;
}
.page-pill input::-webkit-outer-spin-button,
.page-pill input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.page-pill .of {
  display: inline-flex; align-items: center;
  height: 28px;
  font-size: 12px; color: var(--muted);
  white-space: nowrap;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.navbtn {
  width: 26px; height: 28px; min-width: 26px;
  border: 0; background: transparent;
  color: var(--accent-strong); cursor: pointer; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.navbtn svg { display: block; }
.navbtn:active { background: var(--accent-soft); }

main {
  padding: 16px 12px 110px;
  min-height: calc(100vh - 56px - 76px); min-height: calc(100dvh - 56px - 76px);
}

.loading {
  text-align: center; color: var(--muted); padding: 60px 20px;
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 14px;
}

/* --- Mushaf page --- */
.mushaf-page {
  background: var(--page-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 18px 22px;
  box-shadow: var(--shadow-1);
  position: relative;
  touch-action: pan-y pinch-zoom;
}
.mushaf-page::before, .mushaf-page::after {
  content: ''; position: absolute; left: 8px; right: 8px; height: 4px;
  background: repeating-linear-gradient(90deg, var(--line) 0, var(--line) 6px, transparent 6px, transparent 12px);
}
.mushaf-page::before { top: 10px; }
.mushaf-page::after  { bottom: 10px; }

.page-header {
  text-align: center; padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  font-family: -apple-system, "Segoe UI", sans-serif;
}
.page-header .surahs {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  font-family: "Amiri", "Scheherazade New", serif;
  font-size: 18px; font-weight: 700; color: var(--accent-strong);
  margin-bottom: 4px;
}
.page-header .meta {
  color: var(--muted); font-size: 11px;
}

.ayat-body {
  font-size: 24px; line-height: 2.1; text-align: justify;
  text-align-last: center; word-spacing: 1px;
  direction: rtl;
  -webkit-user-select: none; user-select: none;
}
.word {
  display: inline-block; padding: 2px 5px; margin: 0 1px;
  border-radius: 6px; cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.word.sel {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
}
.word:active { background: var(--accent-soft); }
.word.anchor {
  outline: 3px dashed var(--accent-strong);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px rgba(180, 83, 9, 0.12);
}
.word.anchor.just-set {
  animation: anchorPulse 0.55s ease;
}
@keyframes anchorPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

.ayah-num {
  display: inline-block; margin: 0 4px;
  /* Pill that scales to digit count:
     - 1-digit: looks like a circle (min-width == height)
     - 2-digit: slightly wider
     - 3-digit (220, 286...): grows into a horizontal pill
     Box-sizing border-box keeps the border inside the height.
  */
  min-width: 1.7em; height: 1.7em; line-height: 1.45em;
  padding: 0 0.45em;
  box-sizing: border-box;
  text-align: center; border-radius: 999px;
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent-strong);
  font-size: 13px;
  font-family: -apple-system, "Segoe UI", sans-serif; font-weight: 700;
  letter-spacing: 0.5px;
  vertical-align: middle;
  cursor: pointer;
  transition: background 0.12s, transform 0.12s;
}
.ayah-num:active { transform: scale(0.9); }
.ayah-num.fully-selected {
  background: var(--accent); color: var(--page-bg);
}
.ayah-num.has-selection {
  background: var(--accent-soft);
}

.surah-divider-wrap { text-align: center; }
.surah-divider {
  display: inline-block; margin: 18px 0 12px;
  font-family: "Amiri", serif; font-size: 20px; font-weight: 700;
  color: var(--accent-strong);
  border: 2px solid var(--accent); border-radius: 10px;
  padding: 4px 18px; background: var(--accent-soft);
}

/* --- bottom action bar --- */
.actionbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(250, 247, 240, 0.96);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--line);
  display: flex; gap: 8px; align-items: stretch;
  font-family: -apple-system, "Segoe UI", sans-serif;
}
body.dark .actionbar, body[data-theme="dark"] .actionbar {
  background: rgba(21, 17, 10, 0.92);
}

.ab-secondary {
  flex: 0 0 auto; min-width: 72px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 12px;
  padding: 6px 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: inherit; font-size: 11px;
}
.ab-secondary .badge {
  background: var(--accent-soft); color: var(--accent-strong);
  min-width: 24px; padding: 2px 8px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
}
.ab-secondary .badge.highlight {
  background: var(--accent); color: var(--page-bg);
}
.ab-secondary .label { color: var(--muted); font-size: 10px; }
.ab-secondary:disabled { opacity: 0.5; }

.ab-primary {
  flex: 1; background: var(--success); color: white;
  border: 0; border-radius: 12px; padding: 12px;
  cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.15s, opacity 0.15s;
}
.ab-primary:disabled {
  background: var(--line); color: var(--muted); cursor: not-allowed;
}
.ab-primary:active:not(:disabled) { background: #166534; }

/* ===== Bottom tab bar (primary navigation) ===== */
.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: stretch;
  background: rgba(250, 247, 240, 0.97);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
body.dark .tabbar, body[data-theme="dark"] .tabbar { background: rgba(21, 17, 10, 0.94); }
.tab {
  flex: 1; position: relative; border: 0; background: transparent; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 0 7px; color: var(--muted);
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 11px; font-weight: 600;
  transition: color 0.12s;
}
.tab svg { stroke: currentColor; }
.tab.on { color: var(--accent); }
.tab:active { background: var(--line-soft); }
.tab-badge {
  position: absolute; top: 3px; right: 22%;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 17px; text-align: center;
}
.tab-badge[hidden] { display: none; }

/* topbar context title (shown on non-Mushaf tabs in place of the page pill) */
.topbar-title { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 17px; font-weight: 700; color: var(--ink); padding: 0 4px; }
.topbar-title[hidden] { display: none; }

/* ===== بطاقاتي tab view ===== */
#page-host[hidden] { display: none; }
#tab-cards { padding: 16px 14px 120px; min-height: calc(100vh - 56px - 70px); min-height: calc(100dvh - 56px - 70px); }
#tab-cards[hidden] { display: none; }
.cards-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.cards-title { margin: 0; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 20px; font-weight: 700; color: var(--ink); }
.cards-count { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 13px; color: var(--muted); }
.cards-count b { color: var(--accent-strong); }
.cards-block { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 14px; margin-bottom: 14px; box-shadow: var(--shadow-1); }
.cards-sec-label { display: flex; align-items: baseline; justify-content: space-between; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 13px; font-weight: 700; color: var(--accent-strong); margin-bottom: 10px; }
.cards-stats { font-size: 12px; font-weight: 500; color: var(--muted); }
.cards-current-actions { display: flex; gap: 8px; margin-top: 12px; }
.cards-current-actions .btn-primary { flex: 1; }

/* --- bottom sheets --- */
.sheet-bg {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
}
.sheet-bg.show { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--surface); color: var(--ink);
  border-radius: 18px 18px 0 0;
  padding: 8px 18px max(20px, env(safe-area-inset-bottom)) ;
  box-shadow: var(--shadow-2);
  max-height: 85vh; max-height: 85dvh;
  overflow-y: auto;
  transform: translateY(105%); transition: transform 0.25s ease;
  font-family: -apple-system, "Segoe UI", sans-serif;
}
.sheet.show { transform: translateY(0); }
.sheet-handle {
  width: 38px; height: 4px; background: var(--line);
  border-radius: 999px; margin: 6px auto 14px;
}
.brand-strip {
  text-align: center;
  padding: 6px 0 18px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 16px;
}
.brand-strip .brand-name {
  font-family: "Amiri", "Scheherazade New", serif;
  font-size: 20px; font-weight: 700;
  color: var(--accent-strong);
  letter-spacing: 0.01em;
}
.brand-strip .brand-sub {
  font-size: 11px; color: var(--muted);
  margin-top: 2px;
  font-family: -apple-system, "Segoe UI", sans-serif;
}

/* --- Search sheet --- */
.search-seg {
  margin: 6px 0 14px;
}
.search-input-wrap {
  position: relative;
  margin-bottom: 8px;
}
.search-input {
  width: 100%;
  font: inherit; font-size: 16px;
  padding: 12px 42px 12px 36px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  direction: rtl;
  text-align: right;
}
.search-input:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}
.search-input-icon {
  position: absolute;
  right: 12px; top: 50%;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search-clear {
  position: absolute;
  left: 8px; top: 50%;
  transform: translateY(-50%);
  background: var(--line-soft);
  border: 0; border-radius: 50%;
  width: 24px; height: 24px;
  font-size: 13px; line-height: 1;
  color: var(--muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.search-clear[hidden] { display: none; }
.search-hint {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; color: var(--muted);
  margin: 4px 0 12px;
}
.search-results {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 32px;
  max-height: 60vh; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.search-result {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  text-align: right;
}
.search-result:hover, .search-result:active {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.search-result-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13px; color: var(--muted);
  margin-bottom: 4px;
}
.search-result-surah {
  font-weight: 700; color: var(--ink);
}
.search-result-page {
  background: var(--accent); color: var(--page-bg);
  padding: 2px 9px; border-radius: 8px;
  font-size: 11px; font-weight: 700;
}
.search-result-text {
  font-size: 17px; line-height: 1.7;
  color: var(--ink);
  direction: rtl;
}
.search-result-text .hit {
  background: rgba(180, 83, 9, 0.20);
  color: var(--accent-strong);
  border-radius: 3px;
  padding: 0 2px;
}
.search-empty {
  text-align: center;
  font-family: -apple-system, "Segoe UI", sans-serif;
  color: var(--muted);
  font-size: 13px;
  padding: 30px 12px;
}

/* --- Quran index sheet --- */
.sheet-hint {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; color: var(--muted);
  margin: 0 0 12px;
}
.juz-list {
  display: flex; flex-direction: column; gap: 12px;
  padding-bottom: 24px;
}
.juz-card {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 12px 14px;
}
.juz-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
  font-family: -apple-system, "Segoe UI", sans-serif;
}
.juz-head .juz-num {
  background: var(--accent); color: var(--page-bg);
  min-width: 44px; text-align: center;
  padding: 4px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
}
.juz-head .juz-meta {
  flex: 1; line-height: 1.4;
}
.juz-head .juz-title {
  font-family: "Amiri", serif; font-size: 16px;
  font-weight: 700; color: var(--accent-strong);
}
.juz-head .juz-pages {
  color: var(--muted); font-size: 11px;
}
.juz-test-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(31, 122, 42, 0.10);
  color: #1F7A2A;
  border: 1px solid rgba(31, 122, 42, 0.30);
  border-radius: 999px;
  padding: 5px 12px;
  font: inherit; font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: background 0.12s;
}
.juz-test-btn:hover, .juz-test-btn:active {
  background: rgba(31, 122, 42, 0.18);
}
body.dark .juz-test-btn, body[data-theme="dark"] .juz-test-btn {
  background: rgba(31, 122, 42, 0.20);
  color: #6BD27A;
  border-color: rgba(107, 210, 122, 0.30);
}
.page-grid {
  display: grid;
  /* Wider chips to comfortably fit the 3-line content
     (number + surah + first-ayah snippet). On narrow phones (<360px) the
     grid will naturally collapse to 2 columns; on wider screens 3+. */
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 8px;
}
.page-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 8px 10px;
  cursor: pointer;
  text-align: center;
  display: flex; flex-direction: column;
  align-items: center;
  /* Taller so 4-word snippets can wrap to 2 lines without crowding */
  min-height: 96px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  color: var(--ink);
  transition: background 0.1s, transform 0.1s;
  user-select: none;
}
.page-chip:active {
  background: var(--accent-soft);
  transform: scale(0.96);
}
.page-chip.current {
  background: var(--accent);
  color: var(--page-bg);
  border-color: var(--accent-strong);
  font-weight: 700;
}
/* Three-line chip layout: number (prominent) → surah (accent) → snippet (muted) */
.page-chip .chip-num {
  font-size: 15px; font-weight: 700;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 3px;
}
.page-chip .chip-surah {
  font-family: "Amiri", "Scheherazade New", serif;
  font-size: 12px; font-weight: 700;
  color: var(--accent-strong);
  line-height: 1.1;
  margin-bottom: 5px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.page-chip .chip-snippet {
  font-family: "Amiri", "Scheherazade New", serif;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.35;
  width: calc(100% - 2px);
  padding-top: 5px;
  border-top: 1px dashed var(--line-soft);
  /* Allow up to 2 lines so 4-word snippets like "إن الله لا يستحيي"
     or "وإذ قال ربك للملائكة" fit comfortably without truncation. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  direction: rtl;
  text-align: center;
  min-height: 32px;
}
/* When chip is the user's CURRENT page (their reader is on this page) */
.page-chip.current .chip-surah { color: var(--page-bg); opacity: 0.95; }
.page-chip.current .chip-snippet {
  color: var(--page-bg);
  opacity: 0.80;
  border-top-color: rgba(255, 255, 255, 0.20);
}
/* Custom-test selection state — solid green fill */
.page-chip.selected {
  background: #1F7A2A;
  border-color: #176421;
  color: #fff;
}
.page-chip.selected .chip-surah { color: #fff; opacity: 0.95; }
.page-chip.selected .chip-snippet {
  color: #fff;
  opacity: 0.85;
  border-top-color: rgba(255, 255, 255, 0.25);
}
body.dark .page-chip.selected, body[data-theme="dark"] .page-chip.selected {
  background: #2A9B3A;
  border-color: #6BD27A;
}
/* Anchor visual — first-tapped chip waiting for the range-end tap */
.page-chip.anchor {
  outline: 2.5px dashed var(--accent);
  outline-offset: 2px;
}

/* Floating selection bar — sticks to the bottom of the sheet's scroll area.
   This element MUST live inside #index-sheet (otherwise sticky has no
   containing block to anchor against). The sheet has 18px horizontal padding
   and a `max(20px, env(safe-area-inset-bottom))` bottom padding — the
   negative margins cancel both so the bar sits flush at the sheet edge. */
.page-selection-bar {
  position: sticky;
  bottom: 0;
  margin: 14px -18px calc(-1 * max(20px, env(safe-area-inset-bottom, 20px)));
  padding: 14px 18px max(14px, env(safe-area-inset-bottom, 14px));
  background: var(--surface);
  border-top: 1.5px solid var(--accent);
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.25);
  z-index: 10;
}
.page-selection-bar[hidden] { display: none; }
.page-selection-bar .selection-count {
  flex: 1 1 100%;
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.page-selection-bar .selection-count b {
  color: var(--accent-strong);
  font-size: 16px;
  margin: 0 4px;
}
.page-selection-bar button {
  flex: 1;
  padding: 11px 8px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border-radius: 10px;
}
.page-selection-bar .btn-primary {
  color: #fff;
}
/* FIX: [hidden] must win over .btn-primary{display:flex} — otherwise the
   intent-hidden action button stays visible (both buttons showed in v81). */
.page-selection-bar button[hidden] { display: none; }

/* Per-tab quick actions in the range picker (Approach 3 differentiation) */
.index-extra[hidden] { display: none; }
.index-quick-action[hidden] { display: none; }
.index-quick-action {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 44px; padding: 0 16px; margin: 0 0 12px;
  border-radius: 12px; border: 1.5px solid var(--success);
  background: var(--surface); color: var(--success);
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.index-quick-action:active { transform: scale(0.98); }
.index-quick-action.learn { border-color: var(--learn); color: var(--learn-strong); background: var(--learn-soft); }

.sheet h2 {
  margin: 0 0 12px; font-size: 17px; font-weight: 600;
}
/* وصول سريع — shortcut to the customize-scope modal, shown at the top of the
   index sheet in place of the old (redundant) "اختبر نفسك" heading. */
.quick-access-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 18px;
  margin: 0 0 12px;
  border-radius: 999px;
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  font: inherit; font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  -webkit-appearance: none; appearance: none;
}
.quick-access-btn:active { transform: scale(0.96); }

/* ===== احفظ الجديد (learn-new mode) — teal identity ===== */
.index-top-actions { display: flex; gap: 8px; margin: 0 0 12px; }
.index-top-actions .quick-access-btn { margin: 0; flex: 1; justify-content: center; }
.learn-new-btn {
  flex: 1; justify-content: center;
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--learn); background: var(--learn-soft);
  color: var(--learn-strong);
  font: inherit; font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; font-weight: 700; cursor: pointer; white-space: nowrap;
  -webkit-appearance: none; appearance: none;
}
.learn-new-btn:active { transform: scale(0.96); }

#learn-screen {
  position: fixed; inset: 0; z-index: 92;
  background: var(--page-bg);
  display: flex; flex-direction: column; overflow: hidden;
}
#learn-screen[hidden] { display: none; }
.learn-head {
  display: flex; flex-direction: column; gap: 10px;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 12px;
  border-bottom: 1px solid var(--line-soft); background: var(--page-bg);
}
.learn-head-top { display: flex; align-items: center; gap: 12px; }
.learn-close-btn {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
/* v103 CRITICAL: inline-flex above defeats the [hidden] UA rule — without
   this, "hidden" close/star/back buttons still render (bit us on the
   page-review header). */
.learn-close-btn[hidden] { display: none; }
.learn-head-titles { flex: 1; text-align: right; }
.learn-title {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; font-weight: 700; color: var(--learn-strong);
}
.learn-sub { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 12px; color: var(--muted); margin-top: 2px; }
.learn-rail { display: flex; gap: 5px; }
.learn-rail .seg { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.learn-rail .seg.done { background: var(--learn-soft); }
.learn-rail .seg.active { background: var(--learn); }
.learn-counter { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 12px; color: var(--muted); text-align: center; }
.learn-body {
  flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 22px 18px; text-align: center;
}
.learn-step-label {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13px; font-weight: 700; color: var(--learn-strong); margin: 0 0 16px;
}
.learn-ayah {
  font-family: "Amiri", "Scheherazade New", serif;
  font-size: 25px; line-height: 2.0; color: var(--ink); direction: rtl;
}
.learn-ayah-num { font-size: 15px; color: var(--learn-strong); }
.learn-ayah-hl { background: var(--learn-soft); border-radius: 6px; padding: 0 4px; }
.learn-blank {
  display: inline-block; width: 66px; height: 1.1em; margin: 0 4px;
  border-bottom: 2px dashed var(--learn); vertical-align: middle;
}
.learn-firsthint {
  font-family: "Amiri", serif; color: var(--learn-strong);
  border-bottom: 2px dashed var(--learn); padding: 0 6px; margin: 0 3px;
}
.learn-page-img { margin: 16px auto 0; max-width: 320px; }
/* Mushaf PNGs are black text on a TRANSPARENT background — invisible in dark
   mode without a white matte. Force a paper-white background + padding (same
   treatment the test card uses). */
.learn-page-img img {
  width: 100%; box-sizing: border-box;
  background: #ffffff; padding: 14px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}
.learn-ring { display: block; margin: 0 auto; }
.learn-actions {
  display: flex; flex-direction: column; gap: 8px;
  padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
  border-top: 1px solid var(--line-soft); background: var(--page-bg);
}
.learn-btn {
  width: 100%; border: none; border-radius: 12px; padding: 13px;
  font: inherit; font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; font-weight: 700; cursor: pointer;
  background: var(--learn); color: #06241F;
}
.learn-btn:active { transform: scale(0.98); }
.learn-btn-sec { background: transparent; color: var(--learn-strong); border: 1px solid var(--learn); }
.learn-btn-row { display: flex; gap: 8px; }
.learn-btn-row .learn-btn { flex: 1; }
.learn-btn-good { background: var(--success); color: #06210C; }
.learn-btn-bad { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
/* rep counter lives inside its button */
.learn-count { background: var(--learn); color: #06241F; border-radius: 999px; padding: 2px 9px; margin-inline-start: 8px; font-size: 13px; font-weight: 700; }
.learn-page-chip {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13px; font-weight: 700; color: var(--learn-strong);
  background: var(--learn-soft); border: 1px solid var(--learn); border-radius: 999px;
  padding: 10px 20px; cursor: pointer;
}
.learn-page-chip:active { transform: scale(0.97); }
.learn-page-num {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; color: var(--muted); margin: 14px 0 6px;
}
.learn-dots { display: flex; gap: 12px; justify-content: center; align-items: center; font-size: 11px; color: var(--muted); font-family: -apple-system, "Segoe UI", sans-serif; }
.learn-dots .ld-item { display: inline-flex; align-items: center; gap: 4px; }
.learn-dots .ld { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.learn-dots .ld.on { background: var(--learn); }
.learn-back-btn { color: var(--learn-strong); }
/* progressive-segment rebuild */
.learn-rail { justify-content: center; }
.learn-rail .learn-dots { gap: 8px; }
.learn-seg-box {
  display: inline-block; min-width: 56px; height: 1.05em;
  border: 2px dashed var(--learn); border-radius: 6px; background: var(--learn-soft);
  vertical-align: middle; margin: 0 4px;
}
.learn-dots-label { margin-inline-start: 6px; color: var(--muted); font-size: 11px; font-family: -apple-system, "Segoe UI", sans-serif; }
/* cumulative-chaining rebuild */
.learn-chunk-hl { background: var(--learn-soft); border: 1px solid var(--learn); border-radius: 8px; padding: 1px 6px; }
.learn-mask-link {
  display: block; margin: 16px auto 0;
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 12px; font-weight: 700;
  color: var(--muted); background: transparent; border: none; cursor: pointer;
}
.learn-next-prompt {
  display: inline-block;
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 14px; font-weight: 700;
  color: var(--learn-strong); background: var(--learn-soft);
  border: 1px solid var(--learn); border-radius: 999px; padding: 8px 18px;
}
.learn-quick-btn {
  display: block; margin: 14px auto 0;
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 12px; font-weight: 700;
  color: var(--learn-strong); background: var(--learn-soft);
  border: 1px solid var(--learn); border-radius: 999px; padding: 8px 16px; cursor: pointer;
}
.learn-quick-btn:active { transform: scale(0.97); }
.learn-prev-toggle {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 13px; font-weight: 700;
  color: var(--ink-soft); background: transparent; border: none; cursor: pointer;
}
.lpt-box {
  width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--learn);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--learn-strong); font-size: 12px;
}
.lpt-box.on { background: var(--learn-soft); }
.learn-ctx { opacity: 0.45; }
/* tap-to-highlight words in the quick test (yellow / red), persists per session */
.qw { cursor: pointer; border-radius: 4px; padding: 0 1px; }
.qw.hl-y { background: #F2C94C; color: #2a2000; }
.qw.hl-r { background: #EB5757; color: #ffffff; }
.learn-hl-hint {
  margin-top: 12px; font-size: 11px; color: var(--hint);
  font-family: -apple-system, "Segoe UI", sans-serif;
}
.learn-inline-link {
  background: transparent; border: none; color: var(--learn-strong);
  font: inherit; font-weight: 700; cursor: pointer; padding: 0; text-decoration: underline;
}
.learn-range { margin-top: 16px; }
.learn-range-lbl { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 12px; color: var(--muted); }
.learn-range-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.learn-range-btn {
  flex-shrink: 0; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 13px; font-weight: 700;
  color: var(--learn-strong); background: var(--learn-soft); border: 1px solid var(--learn);
  border-radius: 10px; padding: 8px 14px; cursor: pointer;
}
.learn-range-preview {
  flex: 1; font-family: "Amiri", "Scheherazade New", serif; font-size: 15px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: rtl;
}
.learn-full-btn {
  align-self: center; margin-top: 2px;
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 12px; font-weight: 700;
  color: var(--learn-strong); background: var(--learn-soft); border: 1px solid var(--learn);
  border-radius: 999px; padding: 6px 16px; cursor: pointer;
}
.learn-full-btn[hidden] { display: none; }
.learn-word-toggle {
  align-self: center; margin-top: 2px; display: inline-flex; align-items: center; gap: 8px;
  background: transparent; border: none; cursor: pointer;
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 12px; font-weight: 700; color: var(--ink-soft);
}
.learn-word-toggle[hidden] { display: none; }
.wt-track { width: 40px; height: 24px; border-radius: 999px; background: var(--line); position: relative; transition: background 0.15s; }
.wt-track.on { background: var(--learn); }
.wt-knob { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); transition: transform 0.15s; }
.wt-track.on .wt-knob { transform: translateX(-16px); }
.sheet h3 {
  margin: 18px 0 10px; font-size: 14px; font-weight: 600; color: var(--muted);
}
.row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}
.row:last-child { border-bottom: 0; }
.row-label { color: var(--ink); }
.text-input {
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 12px; font: inherit; font-size: 14px; color: var(--ink);
  min-width: 180px; max-width: 220px;
}
.text-input.small { min-width: 80px; max-width: 100px; }

/* segmented control */
.seg {
  display: inline-flex; background: var(--bg); border: 1px solid var(--line);
  border-radius: 10px; padding: 2px; gap: 2px;
}
.seg-btn {
  background: transparent; border: 0; padding: 6px 12px; border-radius: 8px;
  font: inherit; font-size: 12px; color: var(--ink); cursor: pointer;
}
.seg-btn.active { background: var(--accent-soft); color: var(--accent-strong); font-weight: 600; }

/* switch */
.switch { position: relative; width: 44px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; background: var(--line);
  border-radius: 999px; transition: background 0.2s;
}
.switch .slider::before {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; background: white;
  border-radius: 50%; transition: transform 0.2s;
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(18px); }

/* preview-sheet content */
.preview-head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
}
.preview-head .stats { color: var(--muted); font-size: 12px; }
.preview-body {
  font-size: 20px; line-height: 1.9; text-align: justify;
  text-align-last: center; direction: rtl;
  background: var(--bg);
  border: 1px dashed var(--line); border-radius: 10px;
  padding: 14px 16px; min-height: 80px;
  user-select: none;
}
.preview-body .pword {
  display: inline-block; padding: 1px 4px; margin: 0 1px;
  border-radius: 5px;
}
.preview-body .pword.sel {
  background: var(--accent-soft); color: var(--accent-strong);
  font-weight: 700; cursor: pointer;
}
.preview-body .ayah-num-mini {
  display: inline-block; padding: 0 7px;
  border: 1px solid var(--accent); color: var(--accent-strong);
  border-radius: 999px; font-size: 11px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  margin: 0 4px; vertical-align: middle; cursor: pointer;
}
.preview-body .ellipsis { color: var(--muted); font-size: 18px; margin: 0 10px; }

/* saved list */
.saved-list {
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--line-soft); border-radius: 10px;
  background: var(--bg);
}
.saved-item {
  padding: 10px 12px; border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.saved-item:last-child { border-bottom: 0; }
.saved-item .meta { color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.saved-item .prev {
  font-family: "Amiri", serif; font-size: 16px; direction: rtl;
  color: var(--ink); line-height: 1.6;
  max-height: 3em; overflow: hidden;
}
.saved-item .prev .ph {
  background: var(--accent-soft); color: var(--accent-strong);
  padding: 0 4px; border-radius: 3px; font-weight: 700;
}
.saved-item .remove {
  background: none; border: 0; color: var(--danger);
  font-size: 11px; cursor: pointer; padding: 0;
  font-family: inherit;
}
.empty-saved { padding: 16px; text-align: center; color: var(--hint); font-size: 13px; }

.sheet-actions {
  display: flex; gap: 8px; padding: 16px 0 0;
}
.btn-primary {
  flex: 1; background: var(--primary); color: white;
  border: 0; border-radius: 10px; padding: 12px;
  cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-primary.share {
  background: var(--success); padding: 14px;
  font-size: 15px;
}
.btn-primary.share:active { background: #166534; }
.btn-secondary {
  flex: 0 0 auto; background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: 12px 16px;
  cursor: pointer; font: inherit; font-size: 13px;
}
.hint-text {
  margin: 14px 0 4px; color: var(--hint); font-size: 11px;
  line-height: 1.5;
}
.version-stamp {
  margin: 16px 0 8px; padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--hint); font-size: 10px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  text-align: center; opacity: 0.6;
  letter-spacing: 0.5px;
}

/* =========================================================================
   RANGE PICKER SHEET — for auto-quiz
========================================================================== */
.range-panel { margin-bottom: 8px; }
.range-label {
  display: block;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; color: var(--muted);
  margin-bottom: 6px;
}
.range-row {
  display: flex; gap: 10px;
  margin-top: 10px;
}
.range-field { flex: 1; }
select.text-input {
  appearance: none;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit; font-size: 15px;
  direction: rtl; text-align: right;
}
.range-slider-wrap {
  margin: 20px 0 10px;
  padding: 14px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
}
.slider-labels {
  display: flex; justify-content: space-between;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 11px; color: var(--muted);
  margin: 6px 0 10px;
}
.slider-mid {
  color: var(--accent-strong);
  font-weight: 700;
  font-size: 12px;
}
.range-input {
  width: 100%;
  accent-color: var(--accent);
}
.range-summary {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13px; color: var(--muted);
  text-align: center;
  margin: 8px 0;
}

/* =========================================================================
   TEST SCREEN — full-screen overlay above everything else
========================================================================== */
#test-screen {
  position: fixed; inset: 0; z-index: 90;
  background: var(--page-bg);
  display: flex; flex-direction: column;
  overflow: hidden;
}
#test-screen[hidden] { display: none; }

/* =========================================================================
   TEST HEADER — two-row layout (level title on top, progress bar in middle,
   secondary stats on bottom). Each piece has a distinct text label so the
   numbers can't be confused with each other.
========================================================================== */
.test-head {
  display: flex; flex-direction: column;
  padding-top: calc(env(safe-area-inset-top, 0px) + 6px);
  border-bottom: 1px solid var(--line-soft);
  background: var(--page-bg);
}

/* Row 1: exit button + level title */
.test-head-primary {
  display: flex; align-items: center;
  padding: 4px 14px 10px;
  gap: 12px;
}
.test-level-title {
  flex: 1;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; font-weight: 700;
  color: var(--ink);
  margin: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.test-level-title b {
  color: var(--accent-strong);
  font-size: 17px;
  margin: 0 2px;
  font-weight: 800;
}
.test-level-title[hidden] { display: none; }

/* Per-level progress squares — gamified replacement for the progress bar.
   Each question in the current level gets one square. Squares light up as
   questions are mastered. Active streak = soft glow on the most-recent
   filled squares for visceral feedback. */
/* v95 — refined per-question progress: slim rounded segments (iOS-style
   story track). One flat hue, no gradients, no borders — quiet and premium.
   filled = answered, current = breathing outline, streak = warmer tone. */
.test-progress-squares {
  display: flex; gap: 5px;
  padding: 10px 16px 8px;
  width: 100%; box-sizing: border-box;
}
.progress-square {
  flex: 1;
  height: 6px;
  min-width: 0;
  border-radius: 999px;
  background: var(--line-soft);
  transition: background 0.35s ease;
}
.progress-square.filled {
  background: var(--accent);
  animation: seg-fill 0.4s ease;
}
.progress-square.current {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
  animation: seg-breathe 1.6s ease-in-out infinite;
}
.progress-square.streak {
  background: var(--accent-strong);
}
@keyframes seg-fill {
  from { transform: scaleX(0.6); opacity: 0.4; }
  to   { transform: scaleX(1); opacity: 1; }
}
@keyframes seg-breathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

/* Row 2: secondary stats (smaller, muted, wrap gracefully if needed) */
.test-head-secondary {
  display: flex; align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 14px 10px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  color: var(--muted);
}
.test-head-secondary > * { white-space: nowrap; }

/* Counter — primary stat in row 2, slightly stronger weight */
.test-counter {
  color: var(--ink);
  font-weight: 700;
}

/* Streak — small flame chip */
.test-streak {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--accent-strong);
  font-weight: 700;
}
.test-streak[hidden] { display: none; }
.streak-icon { font-size: 13px; }
.test-exit {
  width: 36px; height: 36px; min-width: 36px;
  border-radius: 50%; background: var(--line-soft);
  color: var(--ink); font-size: 16px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 0;
}
.test-progress {
  flex: 1;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13px; color: var(--muted);
  display: flex; align-items: center; gap: 8px;
  justify-content: flex-end;
}
.test-counter { color: var(--ink); font-weight: 700; }
.test-stat-divider { color: var(--line); }
.test-streak[hidden] { display: none; }
.streak-divider[hidden] { display: none; }
/* "الأخطاء N" — red, clickable, opens the mistakes list */
.test-wrong {
  color: #D63030;
  font-weight: 700;
  cursor: pointer;
}
body.dark .test-wrong, body[data-theme="dark"] .test-wrong { color: #F08989; }

/* Right-edge group: full-hide toggle + download button.
   margin-inline-start: auto pushes the whole group to the end (left in RTL). */
.test-actions {
  margin-inline-start: auto;
  display: flex; align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Full-hide difficulty toggle — checkbox-style, lives next to download */
.test-fullhide-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  font: inherit; font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.test-fullhide-btn .fh-check { display: none; }
.test-fullhide-btn.active {
  background: rgba(31, 122, 42, 0.12);
  border-color: #1F7A2A;
  color: #1F7A2A;
}
.test-fullhide-btn.active .fh-check { display: block; }
.test-fullhide-btn:active { transform: scale(0.96); }
body.dark .test-fullhide-btn.active,
body[data-theme="dark"] .test-fullhide-btn.active {
  background: rgba(42, 155, 58, 0.18);
  border-color: #2A9B3A;
  color: #6BD27A;
}

/* Inline "تحميل الأخطاء" button — sits inside the .test-actions group */
.test-download-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(214, 48, 48, 0.40);
  background: rgba(214, 48, 48, 0.10);
  color: #D63030;
  font: inherit; font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, transform 0.1s;
}
.test-download-btn:active { transform: scale(0.95); }
.test-download-btn:hover { background: rgba(214, 48, 48, 0.18); }
.test-download-btn[hidden] { display: none; }
body.dark .test-download-btn, body[data-theme="dark"] .test-download-btn {
  background: rgba(240, 137, 137, 0.14);
  border-color: rgba(240, 137, 137, 0.40);
  color: #F08989;
}

.test-body {
  flex: 1;
  /* v97 CRITICAL: without min-height:0 a flex child refuses to shrink below
     its content, pushing the pinned .test-footer past the screen edge —
     the «زر اكشف الإجابة اختفى» bug. (.learn-body always had this.) */
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 24px 18px 28px;
  display: flex; flex-direction: column;
  align-items: stretch;
}
.test-body > div[hidden] { display: none; }

/* "More below" affordance — fade + bobbing pill shown when the test body
   overflows (e.g. a long ayah pushing the reveal button below the fold). */
.test-scroll-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 96px;
  background: linear-gradient(to top, var(--page-bg) 20%, rgba(0, 0, 0, 0));
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  pointer-events: none;
  z-index: 60;
}
.test-scroll-fade[hidden] { display: none; }
.test-scroll-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; font-weight: 700;
  color: var(--accent-strong);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  box-shadow: var(--shadow-2);
  cursor: pointer;
  pointer-events: auto;
  -webkit-appearance: none; appearance: none;
  animation: hint-bob 1.4s ease-in-out infinite;
}
.test-scroll-pill:active { box-shadow: var(--shadow-1); }
@keyframes hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

/* Loading state */
.test-loading {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
  color: var(--muted);
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
}
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--line-soft);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Question + reveal common styling */
.test-question-meta {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; color: var(--muted);
  text-align: center;
  margin-bottom: 18px;
  letter-spacing: 0.3px;
}
.test-question-text, .test-revealed-text {
  font-family: "Amiri", "Scheherazade New", "Geeza Pro", serif;
  font-size: 26px; line-height: 2.0;
  color: var(--ink);
  direction: rtl;
  text-align: center;
  margin-bottom: 22px;
}
/* v57: when a question block is empty (e.g. #test-question-next when the
   full-hide toggle is off) drop its margin so the layout stays tight. */
.test-question-text:empty { margin-bottom: 0; }

/* Previous-ayah context shown above the cloze on the question side */
.test-context-label {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  color: var(--hint);
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.test-context-text {
  font-family: "Amiri", "Scheherazade New", "Geeza Pro", serif;
  font-size: 20px;
  line-height: 1.85;
  color: var(--ink-soft, var(--muted));
  direction: rtl;
  text-align: center;
  margin: 0 auto 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
  max-width: 92%;
}

/* The hidden phrase placeholder — FIXED size, no content inside.
   The span is empty (see renderClozeAsQuestion in app.js). All dimensions
   come from CSS, so the box looks identical whether the hidden phrase is
   one word or twenty. No length hints leaked, no vertical bloat. */
.cloze-blank {
  display: inline-block;
  width: 90px;
  height: 1.3em;
  padding: 0;
  margin: 0 6px;
  border: 2px dashed var(--accent);
  border-radius: 6px;
  background: var(--accent-soft);
  vertical-align: middle;
  user-select: none;
}
/* Full-question hide — used when the "الإخفاء الكلي للسؤال" toggle is on.
   Single large blank box stands in for the whole ayah; user recalls it
   from previous-ayah context alone. */
.cloze-blank-full {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 110px;
  padding: 24px 18px;
  margin: 6px 0;
  border: 2px dashed var(--accent);
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--muted);
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 500;
  user-select: none;
}
.cloze-revealed {
  background: rgba(180, 83, 9, 0.18);
  color: var(--accent-strong);
  font-weight: 700;
  border-radius: 4px;
  padding: 0 4px;
  animation: reveal-pulse 0.45s ease;
}
@keyframes reveal-pulse {
  0%   { transform: scale(0.9); opacity: 0; }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); opacity: 1; }
}

/* Linking modes (الآية التالية / السابقة) — the prompt shown in place of the
   cloze, and the highlighted answer shown on reveal. */
.link-prompt {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-strong);
  text-align: center;
  padding: 14px 16px;
  margin: 4px auto 0;
  max-width: 92%;
  border: 2px dashed var(--accent);
  border-radius: 12px;
  background: var(--accent-soft);
}
.link-answer {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--ink);
  border-radius: 8px;
  padding: 6px 12px;
  animation: reveal-pulse 0.45s ease;
}

/* Test-type chooser in the count-picker modal */
.qc-modes {
  display: flex;
  gap: 8px;
  margin: 2px 0 8px;
}
.qc-mode-chip {
  flex: 1;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 11px 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.qc-mode-chip.active {
  color: var(--surface);
  background: var(--accent);
  border-color: var(--accent);
}
.qc-mode-hint {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  color: var(--hint);
  text-align: center;
  margin: 0 0 8px;
}

.test-reveal {
  margin-top: 10px;
  /* v57: bottom margin so the button has air around it now that it sits
     between the cloze and the (optional) next-ayah block instead of at
     the very end of the question screen. */
  margin-bottom: 18px;
  padding: 14px 22px;
  font-size: 16px;
  width: 100%;
}

/* Reveal phase — the back of the card */
.test-divider {
  border: 0; border-top: 1px solid var(--line);
  margin: 18px 0 16px;
}
.test-back {
  font-family: "Amiri", serif;
  text-align: center;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 16px;
}
.test-back .back-ref {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13px; color: var(--muted);
  margin-bottom: 10px;
}
.test-back .back-prev-label {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; color: var(--hint);
  margin-bottom: 4px;
}
.test-back .back-prev-text {
  font-size: 19px; line-height: 1.8; color: var(--ink-soft);
  direction: rtl;
}
.test-back .back-page-image {
  margin-top: 18px;
  text-align: center;
}
/* CRITICAL: Mushaf PNGs from GovarJabbar/Quran-PNG have TRANSPARENT
   backgrounds with BLACK text. Without a white matte they're invisible
   in dark mode (black-on-dark-brown). We force a white background and
   padding around the image regardless of theme. */
.test-back .back-page-image img {
  max-width: 100%; height: auto;
  background: #ffffff;
  padding: 14px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  /* box-sizing so padding eats into the displayed width, not adds to it */
  box-sizing: border-box;
}
.test-back .back-page-label {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; color: var(--muted);
  margin-bottom: 8px;
}

/* Self-grade buttons */
.test-grade {
  display: flex; gap: 12px;
  margin-top: 8px;
}
.grade-btn {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 16px; font-weight: 700;
  border-radius: 14px;
  border: 0;
  cursor: pointer;
  transition: transform 0.1s;
}
.grade-btn:active { transform: scale(0.97); }
.grade-icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 16px;
}
.grade-right {
  background: #DFF6E0;
  color: #1F7A2A;
}
.grade-right .grade-icon {
  background: #1F7A2A; color: #fff;
}
.grade-wrong {
  background: #FBE5E5;
  color: #A21F1F;
}
.grade-wrong .grade-icon {
  background: #A21F1F; color: #fff;
}
body.dark .grade-right, body[data-theme="dark"] .grade-right {
  background: rgba(31, 122, 42, 0.20); color: #6BD27A;
}
body.dark .grade-wrong, body[data-theme="dark"] .grade-wrong {
  background: rgba(162, 31, 31, 0.20); color: #F08989;
}

/* Stage-complete checkpoint — quiet "you finished a page" pause */
.test-stage-complete {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
  gap: 10px;
  text-align: center;
  padding: 16px 8px 12px;
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* ============================================================
   Shared completion components — used by both
   #test-stage-complete (between levels) and #test-end (session end)
   v54: title + subtitle + quote (with hadith/Quran preamble) +
        three sectioned report blocks + adaptive actions
   ============================================================ */

/* Header */
.completion-title {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-strong);
  margin: 4px 0 2px;
  letter-spacing: 0.2px;
}
.completion-subtitle {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 4px;
  letter-spacing: 0.4px;
}

/* Quote box — Quranic/Hadith motivation, the visual focal point */
.completion-quote {
  margin: 6px 4px 4px;
  padding: 16px 18px 14px;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 16px;
  text-align: center;
}
.completion-quote.completion-quote-large {
  padding: 18px 18px 16px;
}
.completion-quote-preamble {
  color: var(--accent-strong);
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  margin-bottom: 8px;
  opacity: 0.9;
}
/* ﷺ ligature — needs Amiri so the calligraphic glyph renders properly */
.completion-quote-preamble .saw {
  font-family: "Amiri", "Scheherazade New", serif;
  font-size: 18px;
  vertical-align: -2px;
  margin: 0 1px;
  font-weight: 400;
}
.completion-quote-text {
  font-family: "Amiri", "Scheherazade New", serif;
  font-size: 17px;
  line-height: 1.95;
  color: var(--ink);
  margin-bottom: 8px;
  direction: rtl;
}
.completion-quote-large .completion-quote-text {
  font-size: 19px;
}
.completion-quote-source {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  color: var(--accent-strong);
  font-weight: 600;
  letter-spacing: 0.3px;
}

/* Report card — three sectioned blocks separated by hairlines */
.completion-report {
  margin: 8px 4px;
  padding: 4px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: right;
}
.completion-section {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.completion-section:last-child { border-bottom: 0; }
.completion-section-title {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  color: var(--accent-strong);
  font-weight: 700;
  margin-bottom: 8px;
  text-align: right;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  opacity: 0.85;
}
.completion-data-sentence {
  font-family: "Amiri", "Scheherazade New", serif;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
  margin: 0;
  text-align: right;
  direction: rtl;
}
.completion-data-sentence b {
  color: var(--accent-strong);
  font-weight: 700;
}
.report-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
}
.report-label { color: var(--muted); }
.report-value {
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.report-value.success { color: #1F7A2A; }
.report-value.danger  { color: #A21F1F; }
body.dark .report-value.success, body[data-theme="dark"] .report-value.success { color: #6BD27A; }
body.dark .report-value.danger,  body[data-theme="dark"] .report-value.danger  { color: #F08989; }

/* See-mistakes button (under tafsil block) */
.see-mistakes-btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 12px;
  background: rgba(162, 31, 31, 0.06);
  color: #A21F1F;
  border: 1px solid rgba(162, 31, 31, 0.18);
  border-radius: 10px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
body.dark .see-mistakes-btn, body[data-theme="dark"] .see-mistakes-btn {
  background: rgba(240, 137, 137, 0.08);
  color: #F08989;
  border-color: rgba(240, 137, 137, 0.25);
}
.see-mistakes-btn[hidden] { display: none; }

/* Action row — secondary (إنهاء) + primary (next/restart) */
.completion-actions {
  display: flex;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}
.completion-actions .btn-secondary {
  flex: 1;
  padding: 14px;
  font-size: 14px;
}
.completion-actions .btn-primary {
  flex: 1.5;
  padding: 14px;
  font-size: 15px;
}

.test-stage-complete[hidden] { display: none; }
/* Legacy classes kept hidden so old DOM hooks don't visually leak */
.stage-complete-icon, .stage-complete-page, .stage-complete-title,
.stage-complete-stat, .completion-quote-ornament,
.completion-report-title, .completion-report-rows,
.completion-progress { display: none; }

/* End screen */
.test-end {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
  gap: 12px;
  text-align: center;
  padding: 16px 8px 12px;
  max-width: 460px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
/* Hide the old end-icon (kept in DOM for legacy but not used in new design) */
.test-end-icon { display: none; }
.test-end-icon {
  font-size: 56px;
  line-height: 1;
}
.test-end h2 {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 20px; color: var(--ink); margin: 0;
}
.test-end-stats {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 20px;
  width: 100%;
  max-width: 320px;
  margin: 6px 0 14px;
}
.end-stat-row {
  display: flex; justify-content: space-between;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  padding: 6px 0;
}
.end-stat-label { color: var(--muted); }
.end-stat-value { color: var(--ink); font-weight: 700; }
.end-stat-value.primary {
  color: var(--accent-strong);
  font-size: 17px;
}
.test-end-actions {
  display: flex; gap: 10px;
  width: 100%; max-width: 320px;
}
.test-end-actions > button { flex: 1; padding: 14px; font-size: 15px; }

/* Test exit confirm */
.btn-primary.danger {
  background: #A21F1F;
}
.muted-line {
  display: block;
  font-size: 13px; color: var(--muted);
  margin-top: 6px;
}
/* Mid-test mistake counter — clickable opens the list */
.test-wrong.clickable {
  cursor: pointer;
}

/* "استعد للاختبار!" modal pieces */
.qc-title {
  margin: 0 0 14px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 19px; font-weight: 800;
  color: var(--accent-strong);
  text-align: center;
  letter-spacing: 0.3px;
}

/* Range info card — shows the user what they're about to be tested on */
.qc-info-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1.5px solid rgba(180, 83, 9, 0.25);
  background: var(--accent-soft);
  border-radius: 12px;
  text-align: right;
}
body.dark .qc-info-card, body[data-theme="dark"] .qc-info-card {
  background: rgba(212, 168, 106, 0.08);
  border-color: rgba(212, 168, 106, 0.30);
}
.qc-info-icon {
  flex-shrink: 0;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--page-bg);
}
body.dark .qc-info-icon, body[data-theme="dark"] .qc-info-icon {
  background: #D4A86A; color: #1a1814;
}
.qc-info-body {
  flex: 1; min-width: 0;
}
.qc-info-label {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 11px; color: var(--muted);
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.qc-info-range {
  font-family: "Amiri", "Segoe UI", sans-serif;
  font-size: 17px; font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 3px;
}
.qc-info-stats {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; color: var(--accent-strong);
  font-weight: 600;
}
/* Small "تعديل" button anchored to the side of the range-info card */
.qc-edit-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 4px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(180, 83, 9, 0.40);
  background: var(--page-bg);
  color: var(--accent-strong);
  font: inherit; font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.12s;
}
.qc-edit-btn:active { transform: scale(0.95); }
.qc-edit-btn:hover {
  background: var(--accent-soft);
}
body.dark .qc-edit-btn, body[data-theme="dark"] .qc-edit-btn {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(212, 168, 106, 0.40);
  color: #D4A86A;
}

.qc-sub-label {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--ink);
  text-align: right;
  margin: 0 0 10px;
}

/* Question-count picker — simplified to two clear options */
.qc-option {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  cursor: pointer;
  transition: all 0.15s;
  text-align: right;
}
.qc-option.active {
  border-color: #1F7A2A;
  background: rgba(31, 122, 42, 0.08);
}
body.dark .qc-option.active, body[data-theme="dark"] .qc-option.active {
  background: rgba(42, 155, 58, 0.14);
  border-color: #2A9B3A;
}
.qc-option input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: #1F7A2A;
  flex-shrink: 0;
}
.qc-option-body {
  flex: 1;
  display: flex; flex-direction: column;
  gap: 4px;
}
.qc-option-title {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; font-weight: 700;
  color: var(--ink);
}
.qc-option-sub {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13px;
  color: var(--muted);
}
.qc-custom-input {
  margin-top: 4px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page-bg);
  color: var(--ink);
  font: inherit; font-size: 15px;
  text-align: center;
  direction: ltr;
  width: 100%;
  box-sizing: border-box;
}
.qc-custom-input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.qc-custom-input:focus {
  outline: 2px solid #1F7A2A;
  border-color: #1F7A2A;
}
.qc-explain {
  margin: 14px 4px 0;
  padding: 10px 12px;
  background: rgba(31, 122, 42, 0.06);
  border-radius: 10px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: var(--muted);
  text-align: right;
}
body.dark .qc-explain, body[data-theme="dark"] .qc-explain {
  background: rgba(107, 210, 122, 0.08);
}

/* Mistakes list (mid-test sheet) */
.mistakes-list {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 50vh; overflow-y: auto;
  padding-bottom: 16px;
}
.mistake-item {
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 10px 14px;
  text-align: right;
}
.mistake-ref {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; color: var(--muted);
  margin-bottom: 4px;
}
.mistake-text {
  font-family: "Amiri", serif;
  font-size: 17px; line-height: 1.7;
  color: var(--ink);
  direction: rtl;
}
.mistake-text .hidden-mark {
  background: rgba(180, 83, 9, 0.18);
  color: var(--accent-strong);
  padding: 0 4px; border-radius: 3px;
}
.muted-inline {
  color: var(--muted);
  font-weight: normal;
  font-size: 13px;
  margin-right: 6px;
}

.modal-bg {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(0, 0, 0, 0.45);
}
.modal-bg[hidden] { display: none; }
.modal {
  position: fixed; z-index: 96;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--page-bg);
  border-radius: 14px;
  padding: 22px 22px 18px;
  width: calc(100% - 48px);
  max-width: 360px;
  box-shadow: var(--shadow-2);
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  color: var(--ink);
  text-align: center;
}
.modal[hidden] { display: none; }
.modal-actions {
  display: flex; gap: 10px;
  margin-top: 14px;
}
.modal-actions > button { flex: 1; padding: 12px; }

/* toast */
.toast {
  position: fixed; bottom: calc(90px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  background: var(--ink); color: var(--page-bg);
  padding: 10px 16px; border-radius: 12px;
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 13px;
  box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
  z-index: 200; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; }
body.dark .toast, body[data-theme="dark"] .toast {
  background: var(--page-bg); color: var(--ink);
  border: 1px solid var(--line);
}

/* install hint */
.install-hint {
  position: fixed; bottom: calc(90px + env(safe-area-inset-bottom)); left: 12px; right: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  font-family: -apple-system, sans-serif; font-size: 13px;
  box-shadow: var(--shadow-1); z-index: 90;
}
.install-hint[hidden] { display: none !important; }

/* ===== Per-ayah controls during a test (⋮ menu + focus marker) ===== */
.test-meta-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.test-meta-row .test-question-meta { flex: 1; margin: 0; }
.ayah-menu-btn {
  flex: none; width: 34px; height: 34px; border: 0; background: transparent;
  color: var(--muted); border-radius: 9px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.ayah-menu-btn:active { background: var(--line-soft); }
.ayah-focus-badge {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 11px; font-weight: 700;
  color: var(--success); background: rgba(31, 122, 42, 0.12);
  padding: 3px 9px; border-radius: 999px;
}
.ayah-focus-badge[hidden] { display: none; }

.ayah-menu { max-width: 350px; }
.ayah-menu-title { margin: 0 0 3px; font-family: -apple-system, "Segoe UI", sans-serif; font-size: 16px; font-weight: 700; text-align: right; color: var(--ink); }
.ayah-menu-ref { font-family: "Amiri", serif; font-size: 15px; color: var(--accent-strong); margin-bottom: 12px; text-align: right; }
.ayah-menu-item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: right;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 12px; margin-bottom: 8px; cursor: pointer;
}
.ayah-menu-item:active { background: var(--line-soft); }
.ayah-menu-item:disabled { opacity: 0.5; cursor: default; }
.ami-icon { flex: none; width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.ami-icon.focus { color: var(--success); background: rgba(31, 122, 42, 0.12); }
.ami-icon.exclude { color: var(--danger); background: rgba(163, 49, 36, 0.12); }
.ami-body { display: flex; flex-direction: column; gap: 2px; }
.ami-title { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 14px; font-weight: 700; color: var(--ink); }
.ami-desc { font-family: -apple-system, "Segoe UI", sans-serif; font-size: 12px; color: var(--muted); }

.toast { display: flex; align-items: center; justify-content: center; gap: 12px; }
.toast-action {
  flex: none; background: transparent; border: 0; color: var(--accent-strong);
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 13px; font-weight: 700;
  cursor: pointer; padding: 2px 4px; text-decoration: underline; white-space: nowrap;
}
.toast-action[hidden] { display: none; }

/* «آية معزَّزة» hint above the reveal button (word-by-word mode) */
.test-focus-hint {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin: 4px auto 10px; max-width: 92%;
  font-family: -apple-system, "Segoe UI", sans-serif; font-size: 12px; font-weight: 700;
  color: var(--success);
  background: rgba(31, 122, 42, 0.10); border-radius: 10px; padding: 7px 12px;
}
.test-focus-hint[hidden] { display: none; }
.install-hint span { flex: 1; }
.install-hint button {
  background: var(--primary); color: white; border: 0;
  border-radius: 8px; padding: 6px 12px; cursor: pointer;
  font: inherit; font-size: 13px;
}
.install-hint button[aria-label="إخفاء"] {
  background: transparent; color: var(--muted); padding: 4px 8px;
}

/* swipe-page animation */
.mushaf-page.swiping { transition: transform 0.15s; }

/* --- range-selection first-time tip modal --- */
.range-tip-bg {
  position: fixed; inset: 0; z-index: 170;
  background: rgba(0,0,0,0.55);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.range-tip-bg.show { opacity: 1; pointer-events: auto; }
.range-tip {
  position: fixed; left: 16px; right: 16px;
  top: 50%; z-index: 180;
  background: var(--surface); color: var(--ink);
  border-radius: 18px;
  padding: 26px 22px max(24px, env(safe-area-inset-bottom));
  box-shadow: var(--shadow-2);
  max-width: 480px; margin: 0 auto;
  font-family: "Amiri", "Scheherazade New", -apple-system, "Segoe UI", system-ui, sans-serif;
  transform: translateY(-50%) scale(0.94); opacity: 0;
  pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.range-tip.show {
  opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto;
}
.range-tip-line {
  margin: 0 0 12px; font-size: 16px; line-height: 1.85;
  text-align: center; color: var(--ink);
}
.range-tip-line.lead {
  font-weight: 700; color: var(--accent-strong); font-size: 17px;
  margin-bottom: 16px;
}
.range-tip-ok {
  display: block; width: 100%; margin-top: 12px;
  background: var(--accent); color: var(--page-bg);
  border: 0; border-radius: 12px;
  padding: 14px;
  font-family: "Amiri", serif; font-size: 16px; font-weight: 700;
  cursor: pointer;
}
.range-tip-ok:active { background: var(--accent-strong); }

/* --- post-download how-to modal --- */
.howto-bg {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.howto-bg.show { opacity: 1; pointer-events: auto; }
.howto {
  position: fixed; left: 16px; right: 16px;
  top: 50%; z-index: 160;
  background: var(--surface); color: var(--ink);
  border-radius: 18px;
  padding: 24px 22px max(24px, env(safe-area-inset-bottom));
  box-shadow: var(--shadow-2);
  max-width: 480px; margin: 0 auto;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  transform: translateY(-50%) scale(0.94); opacity: 0;
  pointer-events: none; transition: opacity 0.2s, transform 0.2s;
}
.howto.show {
  opacity: 1; transform: translateY(-50%) scale(1); pointer-events: auto;
}
.howto-head {
  display: flex; gap: 10px; align-items: center;
  color: var(--success); margin-bottom: 12px;
}
.howto-head h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--ink); }
.howto-sub { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
.howto-steps {
  margin: 0 0 14px; padding-inline-start: 24px;
  font-size: 14px; line-height: 1.85;
}
.howto-steps li { margin-bottom: 4px; }
.howto-steps b { color: var(--accent-strong); }
body.dark .howto-steps b, body[data-theme="dark"] .howto-steps b {
  color: var(--accent-strong);
}
.howto-note {
  font-size: 12px; color: var(--muted);
  background: var(--bg); border-radius: 8px;
  padding: 10px 12px; margin: 0 0 12px;
  line-height: 1.7;
}
.howto-dont {
  display: flex; gap: 8px; align-items: center;
  font-size: 12px; color: var(--muted); margin-bottom: 14px;
  cursor: pointer;
}
.howto-ok {
  width: 100%; background: var(--primary); color: white;
  border: 0; border-radius: 10px; padding: 12px;
  font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
}
.howto-ok:active { opacity: 0.85; }


/* =========================================================================
   «جلستك الأخيرة» — resume-last-session modal (opened from the topbar
   history button, right of search). CSS variables only — no raw hex.
========================================================================== */
.resume-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.resume-title {
  margin: 0; font-size: 17px; font-weight: 800;
  color: var(--ink); text-align: right;
}
.resume-kind {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}
.resume-kind.learn {
  color: var(--learn-strong);
  background: var(--learn-soft);
}
.resume-report {
  margin: 0 0 4px;
  text-align: right;
  font-size: 14.5px;
  line-height: 2.05;
  color: var(--ink-soft);
}
.resume-report b { color: var(--ink); }
/* Quranic snippets inside the report — always Amiri, accent-tinted */
.resume-quote {
  font-family: "Amiri", "Scheherazade New", "Geeza Pro", serif;
  font-size: 15.5px;
  color: var(--accent-strong);
}
/* Text color inherits white from .btn-primary; background is set per-kind
   (test green / learn teal) inline by openResumeModal(). */
#resume-continue { font-weight: 700; }


/* =========================================================================
   «مرساة الصفحة» — page-anchor question mode. The question reuses the
   standard context/prompt blocks (cue ayah from the page's middle); only
   the reveal needs a small ref line under the boundary-ayah answer.
========================================================================== */
.anchor-answer-ref {
  margin-top: 8px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13px; color: var(--muted);
}


/* =========================================================================
   JUZ JUMP BAR — sticky strip at the top of the index sheet; tapping a
   number jumps straight to that juz card in the long page index.
========================================================================== */
.juz-jumpbar {
  position: sticky; top: -1px;
  z-index: 5;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 2px 10px;
  margin: 0 0 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--line-soft);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.juz-jumpbar::-webkit-scrollbar { display: none; }
.juz-jump-label {
  flex: 0 0 auto;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 11px; font-weight: 700;
  color: var(--muted);
}
.juz-jump-chip {
  flex: 0 0 auto;
  min-width: 34px; height: 30px;
  padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.juz-jump-chip:active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}
/* Land jumped-to cards just below the sticky bar, not underneath it */
.juz-card { scroll-margin-top: 56px; }


/* =========================================================================
   LEARN LADDER v92 — stage rail, progress dots, recite box, success chip
========================================================================== */
.learn-rail { align-items: flex-start; gap: 0; padding: 4px 6px 0; }
.lr-node { flex: 1; text-align: center; position: relative; }
.lr-bar {
  position: absolute; top: 10px; right: 50%; width: 100%; height: 2px;
  background: var(--line);
}
.lr-bar.on { background: var(--learn); }
.lr-dot {
  position: relative; display: inline-flex; width: 21px; height: 21px;
  border-radius: 50%; align-items: center; justify-content: center;
  background: var(--surface); border: 2px solid var(--line);
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 11px; font-weight: 700; color: var(--muted);
}
.lr-dot.cur { border-color: var(--learn); color: var(--learn-strong); }
.lr-dot.done { background: var(--learn); border-color: var(--learn); color: #06241F; font-size: 12px; }
.lr-lbl {
  margin-top: 3px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 10.5px; color: var(--muted);
}
.lr-lbl.cur { color: var(--learn-strong); font-weight: 700; }

.learn-progress-row {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 16px;
}
.ld-row { display: inline-flex; gap: 7px; }
.ld-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--line); }
.ld-dot.on { background: var(--learn); }
.ld-cap {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; color: var(--muted); font-weight: 700;
}

.learn-seg-hot { outline: 2px solid var(--learn); outline-offset: 1px; }
.learn-peek { opacity: 0.55; }

.learn-done-chip {
  display: inline-block; margin-top: 14px;
  background: var(--learn-soft); color: var(--learn-strong);
  border: 1px solid var(--learn); border-radius: 999px;
  padding: 8px 18px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13px; font-weight: 700;
}


/* =========================================================================
   QUICK-TEST REDESIGN v94 — clean surface: grouped options card above the
   text, whole-row tap targets, no header data
========================================================================== */
.qk-options {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 2px 14px;
  margin: 0 0 16px;
  text-align: right;
}
.qk-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 10px 0;
}
.qk-row.qk-col { flex-direction: column; align-items: stretch; gap: 8px; }
.qk-div { height: 1px; background: var(--line-soft); }
.qk-lbl {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13px; font-weight: 700; color: var(--ink);
}
.qk-sub {
  display: block; margin-top: 2px;
  font-size: 10.5px; font-weight: 400; color: var(--muted);
}
/* Whole row = the switch's tap target (a thin switch alone is easy to miss) */
.qk-row.qk-tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.qk-row.qk-tap:active { background: var(--line-soft); border-radius: 10px; }
.qk-row .wt-track { flex: 0 0 auto; }


/* =========================================================================
   v95 — PINNED TEST ACTION BAR + polish. The reveal / صح-خطأ controls live
   in a fixed footer at the bottom edge, always within thumb reach; the ayah
   content scrolls behind. Also: consistent control heights across the app.
========================================================================== */
.test-footer {
  flex: 0 0 auto;
  display: block;
  padding: 10px 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
  border-top: 1px solid var(--line-soft);
  background: var(--page-bg);
}
.test-footer[hidden] { display: none; }
/* .btn-primary sets display:flex, which beats the [hidden] UA rule —
   explicit resets keep the phase switching airtight. */
.test-footer .test-reveal { margin: 0; min-height: 52px; }
.test-footer .test-reveal[hidden] { display: none; }
.test-footer .test-grade { margin-top: 0; }
.test-footer .test-grade[hidden] { display: none; }

/* The "بقية الآية" fade now overlays the bottom of the scroll area (it used
   to pin to the screen edge, which the action bar occupies now). */
.test-scroll-fade {
  position: relative;
  left: auto; right: auto; bottom: auto;
  margin-top: -96px;
  z-index: 5;
  pointer-events: none;
}
.test-scroll-pill { pointer-events: auto; }

/* Thumb-friendly control heights (HIG minimum 44px, primary actions taller) */
.btn-primary { min-height: 48px; }
.learn-btn { min-height: 48px; }
.grade-btn { min-height: 54px; }


/* =========================================================================
   FAVORITES v98 — star buttons + the المفضلة sheet
========================================================================== */
.test-fav { margin-inline-start: auto; }
.test-fav.on { color: var(--accent-strong); }
.test-fav.on svg { fill: currentColor; }
.learn-fav.on { color: var(--learn-strong); border-color: var(--learn); }
.learn-fav.on svg { fill: currentColor; }

.fav-list {
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 24px;
}
.fav-item {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
}
.fav-item:active { background: var(--line-soft); }
.fav-item-star {
  flex: 0 0 auto;
  fill: var(--accent);
  stroke: var(--accent);
}
.fav-item-main { flex: 1; min-width: 0; }
.fav-item-label {
  font-size: 14.5px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fav-item-meta { margin-top: 4px; font-size: 11.5px; color: var(--muted); }
.fav-kind { color: var(--test); font-weight: 700; }
.fav-kind.learn { color: var(--learn-strong); }
.fav-del {
  flex: 0 0 auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--danger);
  font-size: 12px; font-family: inherit;
  padding: 7px 12px;
  cursor: pointer;
}
.fav-del:active { background: var(--line-soft); }


/* =========================================================================
   MISTAKES REVIEW v99 — «اختبرني في أخطائي» checkpoint button
========================================================================== */
.review-mistakes-btn {
  width: 100%; min-height: 50px;
  margin-top: 4px;
  border: 1px solid rgba(214, 48, 48, 0.45);
  border-radius: 12px;
  background: rgba(214, 48, 48, 0.10);
  color: var(--danger);
  font: inherit;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 15px; font-weight: 700;
  cursor: pointer;
}
.review-mistakes-btn:active { transform: scale(0.98); }
.review-mistakes-btn[hidden] { display: none; }


/* =========================================================================
   PAGE REVIEW v100 — «راجع الصفحة» entry on the card back
========================================================================== */
.back-page-row {
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}
.back-page-row .back-page-label { margin-bottom: 0; }
/* v101: exactly the same scale as the «صفحة N» word next to it */
.page-review-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; font-weight: 400; line-height: 1.4;
  color: var(--learn-strong);
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--learn);
  border-radius: 0;
  padding: 0 1px;
  cursor: pointer;
}
.page-review-btn:active { transform: scale(0.96); }


/* =========================================================================
   PAGE REVIEW v102 — plain corner return text («‹ عودة لجلسة سورة X»)
========================================================================== */
.learn-return {
  display: inline-flex; align-items: center; gap: 3px;
  flex-shrink: 0;
  max-width: 52vw;
  background: transparent; border: none;
  padding: 8px 2px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12.5px; font-weight: 700;
  color: var(--learn-strong);
  cursor: pointer;
}
.learn-return svg { flex-shrink: 0; }
.learn-return span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.learn-return:active { opacity: 0.6; }
.learn-return[hidden] { display: none; }


/* =========================================================================
   RESTRUCTURE v104 — «المراجعة» service (gold identity) + cards MODE
========================================================================== */
/* Review quick action in the index sheet */
.index-quick-action.review {
  color: var(--accent-strong);
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Gold primary button on the review-run surface («الصفحة التالية», «إنهاء») */
.learn-btn-gold { background: var(--accent); color: #fff; }
body.dark .learn-btn-gold, body[data-theme="dark"] .learn-btn-gold { color: #241A05; }
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .learn-btn-gold { color: #241A05; }
}

/* Cards-mode toggle chip — floats above the tabbar on the Mushaf view */
.cards-mode-chip {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
  inset-inline-start: 12px;
  z-index: 55;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; font-weight: 700;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: var(--shadow-1);
}
.cards-mode-chip.on {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}
body.dark .cards-mode-chip.on, body[data-theme="dark"] .cards-mode-chip.on { color: #241A05; }
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .cards-mode-chip.on { color: #241A05; }
}
.cards-mode-chip:active { transform: scale(0.96); }

/* Cards-mode action bar — fixed above the tabbar while the mode is on */
.cards-mode-bar {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 118px);
  inset-inline: 10px;
  z-index: 55;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-radius: 14px;
  padding: 9px 12px;
  box-shadow: var(--shadow-2);
}
.cards-mode-bar[hidden] { display: none; }
.cmb-count {
  flex: 1; min-width: 0;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; color: var(--ink);
  /* v111: never truncate the hint — wrap instead */
  white-space: normal; line-height: 1.5;
}
/* v111: hidden save button must not reserve flex space */
.cards-mode-bar .btn-primary[hidden] { display: none; }
/* v111: while cards mode is on, the fixed bar + chip float over the page —
   give the Mushaf enough bottom space that the LAST line scrolls clear. */
body.cards-mode-on main { padding-bottom: 210px; }
.cards-mode-bar .btn-primary,
.cards-mode-bar .btn-secondary {
  flex: 0 0 auto; min-height: 0;
  padding: 9px 13px; font-size: 12.5px;
}
.cards-mode-bar .btn-primary[disabled] { opacity: 0.5; }
#cmb-open-cards b { color: var(--accent-strong); margin-inline-start: 2px; }


/* =========================================================================
   MUTASHABIHAT v106 — question hint + the comparison table on the back
========================================================================== */
/* five chips now — wrap into rows */
.qc-modes { flex-wrap: wrap; }
.qc-mode-chip { flex: 1 1 30%; }

.mutash-hint {
  display: block;
  margin: 12px auto 0;
  max-width: 94%;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px dashed var(--accent);
  border-radius: 10px;
  padding: 7px 12px;
  text-align: center;
  line-height: 1.7;
}

.mutash-back {
  text-align: right;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.mutash-back-title {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px; font-weight: 700;
  color: var(--accent-strong);
  margin-bottom: 4px;
}
.mutash-sib {
  padding: 9px 0;
  border-top: 1px dashed var(--line-soft);
}
.mutash-sib:first-of-type { border-top: 0; }
.mutash-sib-ref {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 11px; font-weight: 700;
  color: var(--muted);
}
.mutash-sib-text {
  font-family: "Amiri", "Scheherazade New", serif;
  font-size: 18px; line-height: 1.95;
  color: var(--ink-soft);
  direction: rtl;
  margin-top: 2px;
}
.mutash-hl {
  color: var(--accent-strong);
  font-weight: 700;
  background: var(--accent-soft);
  border-radius: 4px;
  padding: 0 3px;
}

/* =========================================================================
   v110: HIGHLIGHTS → QUICK TEST — small pill next to the review title.
   ========================================================================= */
.learn-hl-test {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 6px 11px;
  cursor: pointer;
  white-space: nowrap;
}
.learn-hl-test[hidden] { display: none; }
.learn-hl-test svg { flex-shrink: 0; }
.learn-hl-test:active { opacity: .75; }

/* =========================================================================
   v115: KEYBOARD SHORTCUTS — grade flash chip + settings key chips.
   ========================================================================= */
/* Transient confirmation of «صح/خطأ» — shows for EVERY grading (tap or key) */
.grade-flash {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 152px);
  transform: translateX(-50%) translateY(10px) scale(.96);
  z-index: 120;
  pointer-events: none;
  padding: 10px 24px;
  border-radius: 999px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: #fff;
  opacity: 0;
  box-shadow: var(--shadow-2);
  transition: opacity .14s ease, transform .14s ease;
}
.grade-flash.good { background: var(--test); }
.grade-flash.bad { background: var(--danger); }
.grade-flash.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }

/* Settings: current-binding chip; tapping it arms key capture */
.kb-btn {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 8px 14px;
  min-width: 104px;
  cursor: pointer;
}
.kb-btn.listening {
  background: var(--accent);
  color: #fff;
  animation: kb-pulse 1s ease-in-out infinite;
}
body.dark .kb-btn.listening, body[data-theme="dark"] .kb-btn.listening { color: #241A05; }
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .kb-btn.listening { color: #241A05; }
}
@keyframes kb-pulse { 50% { opacity: .6; } }
.kb-sub { font-size: 11px; color: var(--muted); font-weight: 500; }

/* =========================================================================
   v116: «الاختبار الفوري» — floating pill + reward framing.
   ========================================================================= */
/* One-tap entry: floats opposite the cards-mode chip on the Mushaf view */
.instant-pill {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
  inset-inline-end: 12px;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--test);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  box-shadow: var(--shadow-2);
  font-family: -apple-system, "Segoe UI", sans-serif;
  text-align: start;
}
.instant-pill:active { transform: scale(0.96); }
.instant-pill svg { flex-shrink: 0; }
.ip-txt { display: flex; flex-direction: column; line-height: 1.3; }
.ip-main { font-size: 13px; font-weight: 800; }
.ip-sub { font-size: 10.5px; font-weight: 500; opacity: 0.85; }

/* Reward hadith on the loading beat */
.instant-hadith {
  margin: 18px auto 0;
  max-width: 340px;
  font-family: "Amiri", serif;
  font-size: 16.5px;
  line-height: 1.9;
  color: var(--ink);
}
.instant-hadith[hidden] { display: none; }
.ih-src {
  display: block;
  margin-top: 6px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 11.5px;
  color: var(--muted);
}

/* End-screen reward framing for the instant round */
.end-instant {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: center;
}
.end-instant[hidden] { display: none; }
.end-instant-hadith {
  margin: 0;
  font-family: "Amiri", serif;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink);
}
.end-instant-hadith .ih-src { display: inline; margin-inline-start: 4px; }
.end-instant-tag {
  margin: 8px 0 0;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--test);
}

/* =========================================================================
   v118: «نافس غيرك» — سين جيم.
   ========================================================================= */
/* Entry button inherits .index-quick-action; gold identity for the game */
.index-quick-action.compete { border-color: var(--accent); color: var(--accent-strong); }

/* Pending-competition banner atop the range picker */
.compete-range-banner {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent-strong);
  border-radius: 12px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  margin: 0 0 12px;
}
.compete-range-banner[hidden] { display: none; }

/* Setup sheet controls */
.cs-stepper {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 7px 10px;
  margin-top: 6px;
}
.cs-stepper b { font-size: 15.5px; color: var(--ink); }
.cs-step {
  width: 38px; height: 38px;
  border: 0; border-radius: 10px;
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: 20px; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cs-step:active { transform: scale(0.94); }
.cs-name-row { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.cs-dot { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; }
.cs-name { flex: 1; }

/* Compete header: scoreboard + turn banner */
.compete-head { padding: 2px 0 4px; }
.compete-head[hidden] { display: none; }
.compete-scorebar { display: flex; gap: 6px; }
.cp-chip {
  flex: 1; min-width: 0;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 6px 4px 5px;
  text-align: center;
}
.cp-chip .cp-nm {
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 11px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cp-chip .cp-sc { font-size: 17px; font-weight: 800; margin-top: 1px; }
.cp-chip.turn { border-color: var(--accent); background: var(--accent-soft); }
.cp-chip.turn .cp-nm { color: var(--accent-strong); font-weight: 700; }
.compete-turn {
  margin-top: 8px;
  background: var(--accent);
  color: #fff;
  border-radius: 999px;
  padding: 7px;
  text-align: center;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 13.5px; font-weight: 800;
}
body.dark .compete-turn, body[data-theme="dark"] .compete-turn { color: #241A05; }
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .compete-turn { color: #241A05; }
}
/* While a game runs, the normal header rows disappear — the scoreboard rules */
.test-head.compete-on .test-progress-squares,
.test-head.compete-on .test-head-secondary,
.test-head.compete-on #test-stage-label,
.test-head.compete-on .test-fav { display: none; }

/* One-time question swap link in the pinned footer */
.compete-skip {
  width: 100%;
  margin-top: 8px;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  text-decoration: underline dashed;
  cursor: pointer;
  padding: 6px;
}
.compete-skip[hidden] { display: none; }

/* Winner screen */
.test-winner { padding: 26px 18px 30px; overflow-y: auto; }
.test-winner[hidden] { display: none; }
.winner-trophy { text-align: center; font-size: 56px; margin: 10px 0 6px; }
.winner-name {
  text-align: center;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 22px; font-weight: 800; color: var(--accent-strong);
}
.winner-sub {
  text-align: center;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 12.5px; color: var(--muted); margin-top: 6px;
}
.winner-rank { margin-top: 18px; }
.wr-row {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 14px;
  margin-top: 7px;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 14px; color: var(--ink);
}
.wr-row b { margin-inline-start: auto; font-size: 16px; }
.wr-medal { font-size: 17px; }

/* Compete flash reuses #grade-flash; give it room for longer messages */
.grade-flash.compete { max-width: 88vw; text-align: center; line-height: 1.6; }

/* =========================================================================
   v120: «على قدر وقتك» — time-based session options in the count picker.
   ========================================================================= */
#qc-sessions { margin-top: 2px; }
#qc-sessions[hidden] { display: none; }
.qc-session {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 11px 13px;
  margin-top: 8px;
  cursor: pointer;
  color: var(--muted);
  text-align: start;
  font-family: -apple-system, "Segoe UI", sans-serif;
}
.qc-session svg { flex-shrink: 0; }
.qc-session.on {
  border-color: var(--test);
  background: rgba(42, 155, 58, 0.12);
  color: var(--test);
}
.qc-session .qs-txt { display: flex; flex-direction: column; min-width: 0; }
.qc-session .qs-t { font-size: 14px; font-weight: 800; color: var(--ink); }
.qc-session.on .qs-t { color: var(--ink); }
.qc-session .qs-s { font-size: 11px; color: var(--muted); margin-top: 2px; }
.qc-session:active { transform: scale(0.985); }

/* =========================================================================
   v121: the picker outgrew phone screens — compact 2×2 session grid + a
   scrollable modal as the universal safety net.
   ========================================================================= */
.modal {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#qc-sessions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.qc-session {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  margin-top: 0;
  padding: 11px 8px 10px;
}
.qc-session .qs-txt { align-items: center; }
.qc-session .qs-t { font-size: 13px; }
.qc-session .qs-s { font-size: 10.5px; line-height: 1.5; }

/* v123: three sessions — the last (open) spans the full grid width */
#qc-sessions .qc-session:last-child { grid-column: 1 / -1; }

/* v125: transfer pick mode — non-turn chips invite a tap */
.compete-head.pick .cp-chip:not(.turn) {
  border-color: var(--accent);
  cursor: pointer;
  animation: kb-pulse 1s ease-in-out infinite;
}
.compete-head.pick .compete-turn { background: var(--accent-soft); color: var(--accent-strong); }

/* =========================================================================
   v126: THE [hidden] RULE. Elements whose class forces a display value kept
   defeating the hidden attribute (v95 grade bar, v103 learn ✕, v111 cmb-save,
   and now the end-screen «زدني» button leaking into every test's report).
   One global rule ends this bug family permanently.
   ========================================================================= */
[hidden] { display: none !important; }

/* =========================================================================
   v127: measured dopamine — micro-motion, rare gold moments, decisive pulse.
   Ordinary feedback stays quiet and quick; only rare moments look different.
   ========================================================================= */
/* Pop-in bounce for the grade chip (felt, not read — never wears out) */
@keyframes gf-pop { 0% { transform: translateX(-50%) translateY(10px) scale(.9); }
  60% { transform: translateX(-50%) translateY(0) scale(1.07); }
  100% { transform: translateX(-50%) translateY(0) scale(1); } }
.grade-flash.show { animation: gf-pop .2s ease-out; }

/* Rare golden milestone flash (streak 5, then every 10) */
.grade-flash.gold { background: var(--accent); color: #fff; }
body.dark .grade-flash.gold, body[data-theme="dark"] .grade-flash.gold { color: #241A05; }
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .grade-flash.gold { color: #241A05; }
}

/* Compete: the scorer's digit jumps once on the fresh scoreboard */
@keyframes sc-bump { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }
.cp-sc.bump { display: inline-block; animation: sc-bump .4s ease; }

/* Compete: «نقطة الحسم» — the turn banner pulses when a win is one answer away */
@keyframes decisive-pulse { 50% { box-shadow: 0 0 14px 2px rgba(212, 168, 106, .55); } }
.compete-turn.decisive { animation: decisive-pulse 1.1s ease-in-out infinite; }

/* The ONE big celebration — full range covered */
@keyframes erc-shimmer { 0% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
.end-range-complete {
  margin: 4px 0 14px;
  padding: 13px 16px;
  border-radius: 14px;
  text-align: center;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 15.5px;
  font-weight: 800;
  color: #241A05;
  background: linear-gradient(100deg, var(--accent) 35%, var(--accent-strong) 50%, var(--accent) 65%);
  background-size: 220% 100%;
  animation: erc-shimmer 2.4s ease-in-out 2;
  box-shadow: var(--shadow-2);
}

/* Compete winner: a gentle golden glow on the trophy */
@keyframes trophy-glow { from { filter: drop-shadow(0 0 4px rgba(212, 168, 106, .35)); }
  to { filter: drop-shadow(0 0 16px rgba(244, 213, 142, .75)); } }
.winner-trophy { animation: trophy-glow 1.5s ease-in-out infinite alternate; }

/* =========================================================================
   v137: CAR MODE («الوضع البسيط») — reading surface redesigned per user spec
   + open-source guidance (NHTSA glance ≤2s; Google driving min type 24dp →
   floor 26px here; targets ≥76dp; WCAG contrast ≥4.5:1 — palette measured
   17.7:1 ink / 14.3:1 gold). Scoped tokens, deliberately theme-independent.
   Layout is MEASURED, not word-counted (carLayoutFit): the stage fills
   before the text is cut; question blank = small fixed chip; the reveal
   shows THE ANSWER ALONE in gold. Auto-advance pulses, swipe grading,
   silent 3px progress bar, rare golden streak glow.
   ========================================================================= */
#car-screen {
  --cbg: #06040D; --csurf: #14101E; --cink: #F5EEDF; --cmut: #9A91A8;
  --cline: #2A2438; --cgold: #D4A86A; --cgold-s: #F4D58E;
  --cgood: #2E9E40; --cbad: #C94A3D;
  position: fixed; inset: 0; z-index: 110;
  background: var(--cbg); color: var(--cink);
  display: flex; flex-direction: column;
  font-family: -apple-system, "Segoe UI", sans-serif;
}
#car-screen[hidden] { display: none; }

/* v137: silent 3px progress bar — no numbers, fills right→left (RTL flow) */
.car-bar { height: 3px; margin-top: env(safe-area-inset-top, 0px); flex: none; }
#car-bar-fill { display: block; height: 100%; width: 0%; background: var(--cgold); transition: width .5s ease; }

/* top row: ✕ + question prompt SIDE BY SIDE (user: prompt at the very top) */
.car-top { display: flex; align-items: center; gap: 10px; padding: 10px 14px 4px; }
.car-x {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  background: var(--csurf); color: var(--cmut);
  border: 1px solid var(--cline); font-size: 20px; cursor: pointer;
}
.car-x.arm { background: var(--cbad); color: #fff; border-color: var(--cbad); }
.car-x:active { filter: brightness(1.3); }
.car-prompt {
  flex: 1; min-width: 0;
  padding: 12px 14px; border-radius: 14px;
  background: var(--csurf); border: 1px solid var(--cline);
  color: var(--cgold-s); font-size: 17px; font-weight: 700;
  text-align: center; line-height: 1.5;
}

/* stage — measured fill; single-page content centers vertically */
.car-stage {
  flex: 1; position: relative; min-height: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 12px 24px 26px;
}
.car-stage.single { align-items: center; }
.car-text {
  width: 100%;
  font-family: "Amiri", serif;
  /* v137: 2.35 keeps stacked diacritics of adjacent lines apart (user note) */
  line-height: 2.35;
  text-align: right; /* project rule: right-align ONLY — justify makes rivers */
  color: var(--cink);
  max-height: 100%; overflow: hidden;
}
.car-text.ans { color: var(--cgold-s); }
.car-text.enter { animation: car-enter .3s ease; }
@keyframes car-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* question blank: SMALL fixed chip — no answer-length hint, never wraps */
.car-blank {
  display: inline-block; width: 96px; height: .72em;
  border: 2.5px dashed var(--cgold); border-radius: 12px;
  background: rgba(212, 168, 106, .10);
  vertical-align: middle; margin: 0 5px;
}
.car-blank.pop { animation: car-blank-pop .28s ease; }
@keyframes car-blank-pop {
  0% { transform: scale(1); }
  55% { transform: scale(1.14); box-shadow: 0 0 18px rgba(244, 213, 142, .5); }
  100% { transform: scale(1); }
}

/* edge tap zones: full halves (v132); glyphs pinned PHYSICALLY (v136 lesson) */
.car-edge {
  position: absolute; top: 0; bottom: 0; width: 50%;
  border: 0; cursor: pointer; background: transparent;
  color: var(--cgold); font-size: 34px; opacity: .85;
  display: flex; align-items: center;
  direction: ltr;
  font-family: inherit;
}
.car-edge-next { left: 0; justify-content: flex-start; padding-left: 12px; }
.car-edge-prev { right: 0; justify-content: flex-end; padding-right: 12px; }
.car-edge:active { color: var(--cgold-s); }
.car-dots { position: absolute; bottom: 8px; inset-inline: 0; display: flex; justify-content: center; gap: 8px; }
.car-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cline); transition: width .18s ease, background .18s ease; }
.car-dot.on { width: 22px; border-radius: 6px; background: var(--cgold); }

/* action bar floats ABOVE the system home indicator (user: safe area) */
.car-action {
  display: flex; gap: 8px; padding: 0 12px; flex: none;
  margin-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
.car-action.col { flex-direction: column; gap: 10px; padding: 0 16px; }
.car-btn { border: 0; font-weight: 800; cursor: pointer; font-family: inherit; border-radius: 22px; }
.car-btn:active { filter: brightness(1.18); }
.car-reveal { flex: 1; height: 88px; background: var(--cgold); color: #241A05; font-size: 23px; }
.car-good, .car-bad {
  flex: 1; height: 96px; font-size: 30px; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.car-good { background: var(--cgood); }
.car-bad { background: var(--cbad); }
.car-good span, .car-bad span { font-size: 15px; }
.car-action.col .car-btn { height: 64px; border-radius: 18px; font-size: 19px; flex: none; }
.car-mist { background: transparent; border: 2px solid var(--cbad); color: #F08989; }
.car-redo { background: var(--csurf); color: var(--cink); border: 1px solid var(--cline); }
.car-more { background: var(--cgood); color: #fff; }

/* end report (v131 geometry lessons kept: explicit sizes, full width) */
#car-screen.end .car-stage { padding: 8px 20px; }
#car-screen.end .car-text { font-size: 20px; }
.car-rep {
  display: flex; flex-direction: column; gap: 14px; width: 100%;
  font-family: -apple-system, "Segoe UI", sans-serif;
  font-size: 20px; line-height: 1.6;
}
.car-rep-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  background: var(--csurf); border: 1px solid var(--cline);
  border-radius: 18px; padding: 18px 22px;
  font-size: 19px; width: 100%; min-width: 0; box-sizing: border-box;
}
.car-rep-row span { min-width: 0; }
.car-rep-row b { font-size: 30px; line-height: 1; flex-shrink: 0; }
.car-rep-row.good b { color: #7FC97F; }
.car-rep-row.bad b { color: #F08989; }

/* v137: color pulses on grading — result felt without reading anything */
#car-screen::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 5; }
#car-screen.pulse-good::after {
  background: radial-gradient(ellipse at 50% 60%, rgba(46, 158, 64, .28), transparent 72%);
  animation: car-pulse .7s ease;
}
#car-screen.pulse-bad::after {
  background: radial-gradient(ellipse at 50% 60%, rgba(201, 74, 61, .30), transparent 72%);
  animation: car-pulse .7s ease;
}
@keyframes car-pulse { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* v137: golden streak glow (5 then every 10) — edges shimmer, visual only */
#car-screen.glow::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 6;
  box-shadow: inset 0 0 64px 14px rgba(244, 213, 142, .38);
  animation: car-glow 1.5s ease;
}
@keyframes car-glow { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }

/* v137: suppress the app's small overlays under the car surface — the grade
   flash chip and toasts used to leak onto the end-report buttons */
body.car-on #grade-flash, body.car-on #toast { display: none !important; }

/* topbar toggle active state */
#btn-car.on { color: var(--accent-strong); background: var(--accent-soft); }

/* =========================================================================
   v140: CAR MODE HOME — the mode is a standalone mini-app now. Toggling it
   opens this range picker instantly (juz/sura/page, two-tap ranges, typed
   page jump), a giant start button runs an OPEN cloze session on the v137
   test surface, and ✕ closes the whole mode back to the full app.
   ========================================================================= */
#car-home { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#car-home[hidden] { display: none; }
.car-seg { display: flex; gap: 8px; padding: 8px 14px 2px; flex: none; }
.car-seg button {
  flex: 1; height: 54px; border-radius: 16px;
  border: 1.5px solid var(--cline); background: var(--csurf); color: var(--cink);
  font-size: 17px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.car-seg button.on { border-color: var(--cgold); color: var(--cgold-s); background: rgba(212, 168, 106, .12); }
.car-pgin-wrap { padding: 10px 14px 0; flex: none; }
.car-pgin {
  width: 100%; height: 58px; border-radius: 16px;
  border: 1.5px solid var(--cline); background: var(--csurf); color: var(--cink);
  font-family: inherit; font-size: 20px; font-weight: 700; text-align: center;
  -moz-appearance: textfield;
}
.car-pgin::-webkit-outer-spin-button, .car-pgin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.car-pgin::placeholder { color: var(--cmut); font-size: 16px; font-weight: 600; }
.car-pgin:focus { outline: none; border-color: var(--cgold); }
.car-pick { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 14px 16px; }
.car-juz-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; }
.car-jz {
  height: 62px; border-radius: 16px; border: 1.5px solid var(--cline);
  background: var(--csurf); color: var(--cink);
  font-size: 22px; font-weight: 800; font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.car-row-list { display: flex; flex-direction: column; gap: 8px; }
.car-sr {
  min-height: 60px; border-radius: 16px; border: 1.5px solid var(--cline);
  background: var(--csurf); color: var(--cink); cursor: pointer;
  display: flex; align-items: center; gap: 12px; padding: 0 16px;
  font-family: inherit; font-size: 18px; font-weight: 700; text-align: right;
}
.car-sr .n { width: 34px; color: var(--cmut); font-size: 14px; font-weight: 600; flex: none; }
.car-pg {
  min-height: 64px; border-radius: 16px; border: 1.5px solid var(--cline);
  background: var(--csurf); color: var(--cink); cursor: pointer;
  display: flex; align-items: center; gap: 14px; padding: 6px 16px;
  font-family: inherit; text-align: right;
}
.car-pg .num { font-size: 24px; font-weight: 800; width: 56px; flex: none; }
.car-pg .info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.car-pg .info .s { font-size: 13px; font-weight: 600; color: var(--cmut); }
.car-pg .info .a { font-size: 11.5px; color: var(--cmut); opacity: .75; }
.car-jz.sel, .car-sr.sel, .car-pg.sel {
  background: rgba(212, 168, 106, .18); border-color: var(--cgold); color: var(--cgold-s);
}
.car-jz.edge, .car-sr.edge, .car-pg.edge {
  background: var(--cgold); border-color: var(--cgold); color: #241A05;
}
.car-sr.edge .n, .car-pg.edge .info .s, .car-pg.edge .info .a { color: #241A05; opacity: .85; }
.car-go-wrap { flex: none; padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
.car-go {
  width: 100%; height: 88px; border: 0; border-radius: 22px; cursor: pointer;
  background: var(--cgood); color: #fff; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
}
.car-go b { font-size: 23px; font-weight: 800; }
.car-go span { font-size: 14.5px; opacity: .92; }
.car-go[disabled] { background: var(--csurf); color: var(--cmut); border: 1.5px dashed var(--cline); cursor: default; }
.car-go:not([disabled]):active { filter: brightness(1.15); }

/* v140: test-surface reference — surah light above, ayah number at the bottom */
.car-ref-surah { flex: none; text-align: center; color: var(--cmut); font-size: 14px; font-weight: 600; padding: 6px 16px 0; }
.car-ref-ayah { position: absolute; bottom: 8px; inset-inline: 0; text-align: center; color: var(--cmut); font-size: 13.5px; }
#car-screen .car-dots { bottom: 32px; }   /* dots sit above the ayah ref line */
.car-newrange { background: var(--csurf); color: var(--cgold-s); border: 1.5px solid var(--cgold); }

/* =========================================================================
   v142: «نبض الورق» — motion system for the NORMAL test surface (mockup
   quran-cloze-test-motion-mockup.html approved). Four moves only, all
   transform/opacity (60fps, no reflow), none blocks input:
   1) question entrance rise+fade 260ms; 2) fluid reveal: blank pop 220ms
   then answer section rise 240ms (the dopamine beat — the existing
   .cloze-revealed reveal-pulse keeps highlighting the words themselves);
   3) grade wash: transient green/red radial over the test screen 450ms +
   a pop on the progress square that just filled; 4) rare golden streak
   glow (5 then every 10). Curve = deceleration cubic-bezier(.2,.8,.2,1)
   (NN/g + Material ranges). Car mode keeps its own system (v137).
   ========================================================================= */
:root { --m-ease: cubic-bezier(.2, .8, .2, 1); }

.test-q-enter { animation: qc-q-enter .26s var(--m-ease); }
.test-rev-enter { animation: qc-rev-enter .24s var(--m-ease); }
@keyframes qc-q-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes qc-rev-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.cloze-blank.pop, .cloze-blank-full.pop { animation: qc-blank-pop .22s ease; }
@keyframes qc-blank-pop {
  55% { transform: scale(1.12); box-shadow: 0 0 12px rgba(196, 96, 75, .45); }
}

/* grade wash — hosted on the fixed test screen, above content, no hits */
#test-screen::after {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; opacity: 0; z-index: 60;
}
#test-screen.wash-good::after {
  background: radial-gradient(ellipse at 50% 45%, rgba(31, 122, 42, .12), transparent 70%);
  animation: qc-wash .45s ease;
}
#test-screen.wash-bad::after {
  background: radial-gradient(ellipse at 50% 45%, rgba(163, 49, 36, .13), transparent 70%);
  animation: qc-wash .45s ease;
}
@keyframes qc-wash { 30% { opacity: 1; } 100% { opacity: 0; } }

/* the square that JUST filled pops once (dopamine tick) */
.progress-square.justfilled { animation: qc-seg-pop .3s var(--m-ease); }
@keyframes qc-seg-pop { 45% { transform: scaleY(1.7); } }

/* rare golden streak glow — soft vignette, visual only */
#test-screen.glow::before {
  content: ''; position: absolute; inset: 0;
  pointer-events: none; opacity: 0; z-index: 61;
  box-shadow: inset 0 0 54px 10px rgba(212, 168, 106, .4);
  animation: qc-glow 1.2s ease;
}
@keyframes qc-glow { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* accessibility: reduced motion kills the WHOLE system (normal + car) */
@media (prefers-reduced-motion: reduce) {
  .test-q-enter, .test-rev-enter,
  .cloze-blank.pop, .cloze-blank-full.pop,
  #test-screen.wash-good::after, #test-screen.wash-bad::after,
  #test-screen.glow::before, .progress-square.justfilled,
  .car-text.enter, .car-blank.pop,
  #car-screen.pulse-good::after, #car-screen.pulse-bad::after,
  #car-screen.glow::before {
    animation: none !important;
  }
}

/* =========================================================================
   v143: verdict colors — on a real tap the revealed answer itself flips
   green (صح) or red (خطأ) for a 420ms beat before the next question. The
   anticipation of "what color will it turn" is the dopamine hook (user's
   idea). Keyboard/car/compete stay instant (choreography in qcGradeChoreo).
   ========================================================================= */
.cloze-revealed { transition: background .16s ease, color .16s ease; }
.cloze-revealed.rev-good,
.cloze-revealed.rev-bad { display: inline-block; animation: qc-rev-tick .3s var(--m-ease); }
.cloze-revealed.rev-good { background: rgba(31, 122, 42, .22); color: var(--test); }
.cloze-revealed.rev-bad { background: rgba(163, 49, 36, .18); color: var(--danger); }
body.dark .cloze-revealed.rev-good, body[data-theme="dark"] .cloze-revealed.rev-good { color: #6BD27A; }
body.dark .cloze-revealed.rev-bad, body[data-theme="dark"] .cloze-revealed.rev-bad { color: #F08989; }
@keyframes qc-rev-tick { 45% { transform: scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  .cloze-revealed.rev-good, .cloze-revealed.rev-bad { animation: none !important; }
}

/* =========================================================================
   BETA b1 — المرحلة 1 من التدرج: الرئيسية «ثلاث بوابات» بلا مصحف.
   يُخفى: المصحف وتصفحه (الغطاء يغطيه + كبسولة الترقيم + البحث)، وضع
   البطاقات وAnki. يبقى: زر الاختبار الفوري في مكانه، وأيقونات الشريط
   (إعدادات · جلستك الأخيرة · المفضلة · القيادة)، وكل المحرك كما هو.
   ========================================================================= */
body.b1 .tabbar { display: none !important; }
body.b1 .page-pill { display: none !important; }
body.b1 #btn-search { display: none !important; }
body.b1 #cards-mode-chip { display: none !important; }
body.b1 .topbar { position: relative; z-index: 45; }

#b1-home {
  position: fixed; inset: 0; z-index: 40;
  background: var(--page-bg);
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top, 0px) + 74px) 18px
           calc(env(safe-area-inset-bottom, 0px) + 132px);
  gap: 14px;
}
.b1-bsm {
  text-align: center; font-family: "Amiri", serif;
  font-size: 19px; color: var(--muted);
  padding-bottom: 4px;
}
.b1-card {
  flex: 1; min-height: 0;
  border: 0; border-radius: 22px; cursor: pointer;
  font-family: inherit; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  box-shadow: var(--shadow-2);
  padding: 12px;
}
.b1-card b { font-size: 21px; font-weight: 800; }
.b1-card span { font-size: 12.5px; opacity: .92; }
.b1-card:active { filter: brightness(1.08); transform: scale(.99); }
.b1-test { background: var(--test); }
.b1-learn { background: var(--learn); }
.b1-review { background: var(--accent); }