:root {
  --bg: #f7f8fb;
  --surface: rgba(255,255,255,.82);
  --surface-solid: #ffffff;
  --text: #10131a;
  --muted: #69707d;
  --line: rgba(16,19,26,.09);
  --blue: #2563eb;
  --blue-soft: #eaf1ff;
  --green: #16834b;
  --gold: #a36b00;
  --shadow: 0 20px 70px rgba(16, 24, 40, .08);
  --radius-xl: 28px;
  --radius-lg: 20px;
  --radius-md: 14px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 0%, rgba(37,99,235,.06), transparent 30%),
    radial-gradient(circle at 88% 12%, rgba(16,185,129,.035), transparent 28%),
    var(--bg);
  color: var(--text);
  font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
}
button, audio { font: inherit; }
button { cursor: pointer; }
button:focus-visible { outline: 3px solid rgba(37,99,235,.25); outline-offset: 3px; }
.ambient { position: fixed; pointer-events: none; filter: blur(60px); opacity: .3; z-index: -1; }
.ambient-a { width: 240px; height: 240px; background: #dce8ff; top: 20%; right: -90px; }
.ambient-b { width: 220px; height: 220px; background: #e8f6ef; bottom: 12%; left: -100px; }

.page-shell {
  width: min(1400px, calc(100% - 48px));
  margin: 0 auto;
  padding: 108px 0 80px;
}

.programme-topbar {
  position: fixed;
  z-index: 1000;
  top: 18px;
  left: 50%;
  width: min(1500px, calc(100% - 40px));
  height: 70px;
  transform: translateX(-50%);
  box-sizing: border-box;
  padding: 0 18px 0 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  direction: ltr;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 23px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow: 0 12px 35px rgba(15, 23, 42, 0.065);
}

.programme-brand {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  text-decoration: none;
}

.programme-brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
}

.programme-brand-mark img {
  width: 38px;
  height: 38px;
  display: block;
  object-fit: contain;
}

.programme-brand-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.programme-brand-copy strong {
  font-family: Inter, sans-serif;
  font-size: 1rem;
  line-height: 1;
  font-weight: 800;
}

.programme-brand-copy small {
  color: #64748b;
  font-family: Inter, sans-serif;
  font-size: 0.72rem;
  line-height: 1;
}

.top-switcher {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid #e1e8f1;
  border-radius: 15px;
  background: #edf2f8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.top-switcher .switch-btn {
  height: 44px;
  min-height: 44px;
  min-width: 132px;
  border: 0;
  border-radius: 12px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #64748b;
  background: transparent;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.top-switcher .switch-btn:hover {
  color: #334155;
  background: rgba(255,255,255,.62);
}

.top-switcher .switch-btn.active {
  color: var(--blue);
  background: #fff;
  box-shadow: 0 3px 12px rgba(15,23,42,.07);
}

.top-switcher .switch-btn:active { transform: scale(.985); }

.programme-return {
  justify-self: end;
  min-width: 96px;
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: #eef4ff;
  color: #2563eb;
  font-family: Inter, "IBM Plex Sans Arabic", sans-serif;
  font-size: 14px;
  font-weight: 700;
  transition: background .18s ease, transform .18s ease;
}
.programme-return:hover { background: #e6efff; }
.programme-return:active { transform: scale(.985); }

.top-switcher .switch-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-grid;
  place-items: center;
}

.top-switcher .switch-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}




.view { animation: viewIn .35s ease both; }
.hidden { display: none !important; }
@keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.reader-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
.quran-card, .reciter-panel, .study-index, .study-content {
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}
.quran-card { border-radius: var(--radius-xl); overflow: hidden; }
.reciter-panel {
  border-radius: var(--radius-xl);
  padding: 22px;
  position: sticky;
  top: 104px;
  align-self: start;
  max-height: calc(100vh - 124px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.section-head { padding: 24px 28px 18px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.section-head.compact { padding: 0 0 18px; border-bottom: 0; }
.section-head h2 { margin: 5px 0 0; font-size: 22px; }
.live-dot { color: var(--green); background: rgba(22,131,75,.08); border-radius: 999px; padding: 6px 10px; font-size: 12px; }
.live-dot i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-left: 5px; }
.bismillah {
  font-family: "Amiri Quran", serif; text-align: center; font-size: 34px; line-height: 2.1;
  padding: 30px 24px 12px; color: #111827;
}
.quran-text { padding: 8px 46px 55px; }
.quran-flow {
  direction: rtl;
  text-align: right;
  text-align-last: right;
  font-family: "Amiri Quran", "Amiri", serif;
  font-size: clamp(28px, 2.35vw, 36px);
  line-height: 2.55;
  color: #16181e;
  letter-spacing: 0;
}
.ayah { display: inline; }
.ayah-end {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  vertical-align: baseline;
  margin-inline-start: 0;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.ayah-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 1.42em;
  min-width: 1.42em;
  height: 1.42em;
  margin: 0 .08em;
  padding: 0;
  border: 1px solid rgba(37,99,235,.25);
  color: var(--blue);
  background: #fff;
  border-radius: 50%;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: .32em;
  font-weight: 600;
  line-height: 1;
  direction: ltr;
  transform: translateY(-.06em);
  box-sizing: border-box;
}
.glossary-word {
  color: #2563eb; border-bottom: 1px dashed rgba(37,99,235,.6);
  cursor: help; transition: color .15s, background .15s; border-radius: 4px;
}
.glossary-word:hover, .glossary-word:focus-visible {
  color: #1748b8; background: rgba(37,99,235,.07); outline: none;
}
.loading-state { min-height: 300px; display: grid; place-items: center; gap: 12px; color: var(--muted); }
.spinner { width: 26px; height: 26px; border: 3px solid #e6eaf0; border-top-color: var(--blue); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.reciter-list { display: grid; gap: 9px; }
.reciter-card {
  width: 100%; display: grid; grid-template-columns: 42px 1fr 34px; gap: 11px; align-items: center;
  text-align: right; background: #fff; border: 1px solid var(--line); border-radius: 15px;
  padding: 10px; color: var(--text); transition: border-color .18s, background .18s, box-shadow .18s;
}
.reciter-card:hover { border-color: rgba(37,99,235,.25); box-shadow: 0 8px 22px rgba(16,24,40,.05); }
.reciter-card.active { border-color: rgba(37,99,235,.42); background: #f4f7ff; box-shadow: 0 8px 24px rgba(37,99,235,.07); }
.reciter-avatar, .player-avatar {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: #111827; color: white;
}
.reciter-avatar svg,
.player-avatar svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reciter-info { min-width: 0; }
.reciter-info strong, .reciter-info small { display: block; }
.reciter-info strong { font-size: 14px; }
.reciter-info small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.reciter-action {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px;
  color: var(--blue); background: #f4f7ff;
}
.reciter-card:not(.active) .reciter-action { color: #7a8493; background: #f7f8fa; }
.reciter-action svg, .player-icon-btn svg, .player-play svg, .note-icon svg {
  width: 17px; height: 17px; fill: currentColor; stroke: none;
}
.audio-player { margin-top: 15px; padding: 17px; background: #111827; color: #fff; border-radius: 18px; box-shadow: 0 16px 35px rgba(17,24,39,.12); }
.player-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.player-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.player-avatar { width: 38px; height: 38px; border-radius: 11px; font-size: 21px; background: #202a3d; }
.audio-label { display: block; color: #98a2b3; font-size: 10px; }
.player-head strong { display: block; margin-top: 2px; font-size: 15px; }
.player-icon-btn {
  width: 34px; height: 34px; border: 0; display: grid; place-items: center; border-radius: 10px;
  background: #202a3d; color: #e8edf7;
}
.player-icon-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.player-controls { display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: center; margin-top: 17px; }
.player-play {
  width: 42px; height: 42px; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #111827;
}
.player-play svg { width: 18px; height: 18px; }
.player-progress-wrap { min-width: 0; }
.player-time-row { display: flex; justify-content: space-between; color: #9ea8b8; font-size: 10px; margin-bottom: 6px; direction: ltr; }
.player-progress {
  appearance: none; width: 100%; height: 4px; border-radius: 999px; background: #303a4d; outline: none; cursor: pointer;
}
.player-progress::-webkit-slider-thumb { appearance: none; width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 0; }
.player-progress::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: #fff; border: 0; }
.player-footer { display: flex; justify-content: space-between; gap: 12px; color: #8f9aac; font-size: 10px; margin-top: 13px; }
.audio-hint { margin: 9px 0 0; color: #8f9aac; font-size: 10px; line-height: 1.7; }
.reader-note { margin-top: 14px; display: flex; gap: 9px; align-items: flex-start; color: var(--muted); font-size: 11px; line-height: 1.8; }
.reader-note p { margin: 0; }
.note-icon { color: var(--blue); flex: 0 0 auto; margin-top: 3px; }
.note-icon svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
#quranAudio { display: none; }
.word-tooltip {
  position: fixed; z-index: 1000; max-width: 300px; padding: 11px 13px; border-radius: 12px;
  background: #111827; color: #fff; font-size: 13px; line-height: 1.7; box-shadow: 0 14px 35px rgba(0,0,0,.18);
  pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.word-tooltip.visible { opacity: 1; transform: translateY(0); }

.study-layout { display: grid; grid-template-columns: 340px minmax(0,1fr); gap: 18px; direction: ltr; }
.study-index, .study-content { direction: rtl; border-radius: var(--radius-xl); }
.study-index { padding: 22px; height: max-content; position: sticky; top: 104px; align-self: start; max-height: calc(100vh - 124px); overflow-y: auto; scrollbar-width: thin; }
.study-index h2 { margin: 5px 0 18px; font-size: 21px; }
.index-btn {
  width: 100%; border: 0; border-radius: 12px; padding: 12px; background: transparent;
  color: var(--muted); text-align: right; margin-top: 5px;
}
.index-btn:hover, .index-btn.active { color: var(--text); background: #f0f4fb; }
.index-btn.active { color: var(--blue); font-weight: 600; }
.study-content { padding: 28px; min-height: 650px; }
.study-section { display: none; }
.study-section.active { display: block; animation: viewIn .25s ease both; }
.section-title { display: flex; gap: 14px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.section-title > span {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue); font-weight: 700;
}
.section-title small { color: var(--muted); }
.section-title h2 { margin: 4px 0 0; font-size: 24px; }
.section-intro { color: var(--muted); line-height: 1.9; max-width: 850px; }
.glossary-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.glossary-item { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: 14px 15px; }
.glossary-item strong { color: var(--blue); display: block; margin-bottom: 4px; }
.glossary-item span { color: #555d69; font-size: 13px; line-height: 1.8; }
.timeline-list { display: grid; gap: 12px; margin-top: 22px; }
.timeline-item { display: grid; grid-template-columns: 85px 1fr; gap: 14px; padding: 15px; background: #fff; border: 1px solid var(--line); border-radius: 15px; }
.timeline-range { color: var(--blue); font-weight: 700; font-size: 13px; }
.timeline-item p { margin: 0; line-height: 1.9; color: #4f5662; }

.meaning-body { min-width: 0; }
.meaning-quran {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-family: "Amiri Quran", "Amiri", serif;
  font-size: 24px;
  line-height: 2.15;
  color: #16181e;
  direction: rtl;
  text-align: right;
}
.meaning-ayah-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.55em;
  min-width: 1.55em;
  height: 1.55em;
  margin: 0 .14em;
  border: 1px solid rgba(37,99,235,.20);
  border-radius: 50%;
  background: #fff;
  color: #69707d;
  font-family: "IBM Plex Sans Arabic", sans-serif;
  font-size: .36em;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  direction: ltr;
}
.values-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 22px;
}
.value-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px;
}
.value-quote {
  font-family: "Amiri Quran", "Amiri", serif;
  font-size: 24px;
  line-height: 2.15;
  color: #17191f;
  text-align: right;
  direction: rtl;
  white-space: normal;
}
.value-divider {
  height: 1px;
  background: var(--line);
  margin: 17px 0 13px;
}
.value-label {
  color: #7a828e;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  text-align: right;
  direction: rtl;
}
.value-text {
  margin-top: 5px;
  color: #374151;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.9;
  text-align: right;
  direction: rtl;
}
.lessons-list { display: grid; gap: 10px; margin-top: 22px; }
.lesson-item { padding: 16px 18px; border: 1px solid var(--line); background: #fff; border-radius: 15px; line-height: 1.9; }
.lesson-number { color: var(--blue); font-weight: 700; margin-left: 8px; }

.qcm-shell {
  font-family: Inter, "IBM Plex Sans Arabic", sans-serif;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 38px 0 80px;
}
.qcm-hero {
  position: relative;
  position: relative;
  text-align: center;
  padding: clamp(34px, 5vw, 58px);
  border: 1px solid #e1e8f0;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 16px 45px rgba(15,23,42,.045);
}
.qcm-kicker {
  color: #2563eb;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  margin-bottom: 12px;
}
.qcm-hero h1 {
  max-width: 850px;
  margin: 0 auto 12px;
  font-family: Inter, "IBM Plex Sans Arabic", sans-serif;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.55;
  font-weight: 500;
  color: #0f172a;
}
.qcm-hero > p {
  max-width: 900px;
  margin: 0 auto;
  color: #64748b;
  font-size: 1.05rem;
  line-height: 1.9;
}
.qcm-stats {
  width: min(100%, 980px);
  margin: 30px auto 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.qcm-stat {
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 15px 14px;
  text-align: center;
  border: 1px solid #e3eaf2;
  border-radius: 14px;
  background: #f8fafc;
}
.qcm-stat b { display: block; color: #0f172a; font-family: Inter, sans-serif; font-size: 1.08rem; font-weight: 800; margin-bottom: 3px; }
.qcm-stat span { color: #7b8ba1; font-family: Inter, "IBM Plex Sans Arabic", sans-serif; font-size: .72rem; font-weight: 700; line-height: 1.45; }
.qcm-toolbar {
  width: min(100%, 980px);
  margin: 22px auto 14px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.qcm-coverage {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
}
.qcm-coverage-item, .qcm-coverage-random {
  min-width: 0;
  height: 56px;
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid #e1e8f0;
  border-radius: 14px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-align: center;
  box-shadow: 0 5px 18px rgba(15,23,42,.035);
}
.qcm-coverage-item b { color: #1e293b; font-size: .78rem; }
.qcm-coverage-item small { color: #8190a5; font-size: .68rem; font-weight: 700; line-height: 1.45; }
.qcm-random, .qcm-primary {
  border: 0;
  border-radius: 14px;
  height: 56px;
  min-height: 56px;
  padding: 0 18px;
  background: #2563eb;
  color: #fff;
  font: 800 12px/1.2 Inter, "IBM Plex Sans Arabic", sans-serif;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.qcm-coverage-random {
  width: 100%;
  box-shadow: none;
}
.qcm-random:hover, .qcm-primary:hover { background: #1d4ed8; }
.qcm-random:active, .qcm-primary:active { transform: scale(.985); }
.qcm-secondary {
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  padding: 0 16px;
  min-height: 56px;
  height: 56px;
  background: #fff;
  color: #475569;
  font: 800 12px/1.2 Inter, "IBM Plex Sans Arabic", sans-serif;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.qcm-secondary:hover { background: #f8fafc; }
.qcm-secondary:disabled { opacity: .45; cursor: not-allowed; }
.qcm-progress-line {
  font-family: Inter, "IBM Plex Sans Arabic", sans-serif;
  width: min(100%, 980px);
  margin: 16px auto;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #718096;
  font-size: .76rem;
  font-weight: 800;
}
.qcm-progress-line > div { flex: 1; height: 6px; background: #e9eef5; border-radius: 999px; overflow: hidden; }
.qcm-progress-line > div > span { display: block; width: 0; height: 100%; background: #2563eb; border-radius: inherit; transition: width .18s ease; }
.qcm-card {
  width: min(100%, 980px);
  margin: 0 auto;
  padding: clamp(26px, 4vw, 48px);
  border: 1px solid #e1e8f0;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(15,23,42,.055);
}
.qcm-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid #edf1f6;
}
.qcm-number { color: #94a3b8; font-size: .75rem; font-weight: 800; }
.qcm-question {
  max-width: 1000px;
  margin: 0 0 28px;
  color: #0f172a;
  font-size: clamp(1.3rem, 2.1vw, 1.7rem);
  line-height: 1.75;
  font-weight: 800;
  font-family: Inter, "IBM Plex Sans Arabic", sans-serif;
}
.qcm-question-sub {
  margin: -12px 0 24px;
  color: #64748b;
  font-size: .9rem;
  line-height: 1.8;
}
.qcm-options { display: grid; gap: 12px; }
.qcm-option {
  width: 100%;
  text-align: right;
  direction: rtl;
  border: 1px solid #dfe7f0;
  background: #fff;
  border-radius: 14px;
  padding: 17px 18px;
  color: #334155;
  font: 600 .95rem/1.75 Inter, "IBM Plex Sans Arabic", sans-serif;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.qcm-option.quran-option {
  font-family: "Amiri Quran", "Amiri", serif;
  font-size: 1.08rem;
  line-height: 2.05;
  font-weight: 500;
}
.qcm-option:hover { border-color: #9bbcf8; background: #f8fbff; transform: translateY(-1px); }
.qcm-option.correct { border-color: #86efac; background: #f0fdf4; color: #166534; }
.qcm-option.wrong { border-color: #fda4af; background: #fff1f2; color: #9f1239; }
.qcm-option:disabled { cursor: default; transform: none; }
.qcm-correction {
  margin-top: 22px;
  padding: 19px 20px;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: #f8fbff;
}
.qcm-correction strong { display: block; color: #2563eb; margin-bottom: 5px; font-family: Inter, "IBM Plex Sans Arabic", sans-serif; font-size: .76rem; font-weight: 900; }
.qcm-correction p { margin: 0; color: #475569; font-family: Inter, "IBM Plex Sans Arabic", sans-serif; font-size: .9rem; line-height: 1.9; }
.qcm-actions { width: min(100%, 980px); margin: 14px auto 0; display: flex; direction: ltr; justify-content: space-between; align-items: center; gap: 10px; }
.qcm-actions button { height: 48px; min-height: 48px; }
@media (max-width: 900px) {
  .qcm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qcm-toolbar { width: 100%; align-items: stretch; }
  .qcm-coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .qcm-random { width: 100%; }
  .qcm-progress-line, .qcm-card, .qcm-actions { width: 100%; }
}
@media (max-width: 560px) {
  .qcm-shell { width: calc(100% - 24px); padding-top: 110px; }
  .qcm-stats { grid-template-columns: 1fr; }
  .qcm-coverage { display: grid; grid-template-columns: 1fr; width: 100%; }
  .qcm-coverage-item, .qcm-random { width: 100%; min-width: 0; }
  .qcm-actions button { flex: 1; }
}



@media (max-width: 1000px) {
  .reader-grid { grid-template-columns: 1fr; }
  .reciter-panel { position: static; max-height: none; overflow: visible; }
  .study-layout { grid-template-columns: 1fr; }
  .study-index { position: static; }
}
@media (max-width: 700px) {
  .page-shell { width: min(100% - 24px, 1400px); }
  .programme-topbar {
    top: 10px;
    width: calc(100% - 20px);
    height: 62px;
    border-radius: 18px;
    padding-inline: 10px;
  }
  .programme-brand-copy { display: none; }
  .programme-brand-mark img { width: 34px; height: 34px; }
  .programme-return { min-width: 66px; height: 42px; padding: 0 12px; font-size: 12px; }
  .top-switcher {
    max-width: calc(100% - 140px);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .top-switcher::-webkit-scrollbar { display: none; }
 .top-switcher .switch-btn {
    min-width: auto;
    min-height: 42px;
    padding: 0 10px;
    font-size: 11px;
    gap: 5px;
  }
  .top-switcher .switch-icon,
  .top-switcher .switch-icon svg { width: 15px; height: 15px; }
  .quran-text { padding: 8px 18px 40px; }
    .bismillah { font-size: 27px; }
  .quran-flow { font-size: 25px; line-height: 2.45; text-align: right; }
  .glossary-grid, .values-grid { grid-template-columns: 1fr; }
  .study-content { padding: 20px; }
  .qcm-hero { padding: 30px 20px; }
  .qcm-card { padding: 24px 20px; }
  .qcm-question { font-size: 1.25rem; }
  .player-footer { font-size: 9px; }
}

.audio-hint a { color: #93b5ff; }

/* Clean Quran reading surface: no redundant section badge/title. */
.reader-heading,
.reader-eyebrow,
.reader-badge,
.reader-title,
.reading-heading,
.reading-badge { display: none !important; }
.quran-card > .bismillah { margin-top: 0; }

/* Human-built message — matches the Œuvres page exactly. */
.human-built-message {
  width: 100%;
  margin: 0 auto;
  padding: 0 24px 28px;
  box-sizing: border-box;
  color: #94a3b8;
  font-size: .66rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  direction: ltr;
  font-family: Inter, sans-serif;
}

@media (max-width: 980px) {
  .human-built-message {
    width: 100%;
    padding: 0 12px 24px;
  }
}

@media (max-width: 760px) {
  .human-built-message {
    width: 100%;
    padding: 0 8px 20px;
    font-size: .62rem;
  }
}


/* =========================================================
   QCM CORRECTION / XP REWARD — MATCH ŒUVRES
   Keep Quran text Arabic, only normalize the visual design.
   ========================================================= */

.qcm-correction {
  margin-top: 22px;
  padding: 19px 20px;
  border: 1px solid #bfdbfe;
  border-radius: 16px;
  background: #f8fbff;
  direction: rtl;
  text-align: right;
  box-sizing: border-box;
}

.qcm-correction strong {
  display: block;
  margin-bottom: 6px;
  color: #2563eb;
  font-family: Inter, "IBM Plex Sans Arabic", sans-serif;
  font-size: .76rem;
  font-weight: 900;
  line-height: 1.6;
  direction: rtl;
  text-align: right;
}

.qcm-correction p {
  margin: 0;
  color: #475569;
  font-family: Inter, "IBM Plex Sans Arabic", sans-serif;
  font-size: .9rem;
  line-height: 1.9;
  direction: rtl;
  text-align: right;
}

/* XP reward pill — same compact treatment as Œuvres */
.qcm-xp-reward {
  width: 100%;
  min-height: 50px;
  margin-top: 16px;
  padding: 0 18px;

  display: flex;
  align-items: center;
  justify-content: flex-start;

  box-sizing: border-box;

  border: 1px solid #d6e4ff;
  border-radius: 14px;
  background: #f8fbff;

  color: #2563eb;
  font-family: Inter, "IBM Plex Sans Arabic", sans-serif;
  font-size: .78rem;
  font-weight: 850;
  line-height: 1.5;

  direction: rtl;
  text-align: right;
}

/* The reward itself remains visually clean even when the text is Arabic */
.qcm-correction .qcm-xp-reward {
  direction: rtl;
  text-align: right;
}

/* Already-earned state uses the exact same component geometry */
.qcm-correction .qcm-xp-reward:not(:empty) {
  box-sizing: border-box;
}

@media (max-width: 560px) {
  .qcm-correction {
    padding: 17px 16px;
    border-radius: 15px;
  }

  .qcm-xp-reward {
    min-height: 46px;
    margin-top: 14px;
    padding: 0 15px;
    font-size: .74rem;
    border-radius: 13px;
  }
}


/* =========================================================
   QURAN PAGE — TINY PREMIUM SCROLLBAR
   Matches the slim scrollbar shown in the reference.
   ========================================================= */

html {
  scrollbar-width: thin;
  scrollbar-color: #b8c0cc transparent;
}

body {
  scrollbar-width: thin;
  scrollbar-color: #b8c0cc transparent;
}

/* Chrome / Edge / Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: #b8c0cc;
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: #aab3c0;
  border-radius: 999px;
  border: 1px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
  background: transparent;
}


/* =========================================================
   QCM ACCESS CARD — QURAN
   Match the Œuvres QCM access design.
   Arabic copy stays RTL, French UI labels stay LTR.
   ========================================================= */

/* QCM ACCESS / XP — per-work unlock flow */
.qcm-access-card {
  direction: ltr;
  width: min(980px, 100%);
  margin: 0 auto 18px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 18px;
  border: 1px solid #dfe7f1;
  border-radius: 22px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 38px rgba(15,23,42,.045);
}
.qcm-access-card[hidden] { display:none !important; }

/* Unlocked badge — positioned at the top-left of the QCM hero without changing the existing card layout. */
.qcm-unlocked-badge {
  position: absolute;
  top: 20px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 11px 6px 7px;
  border: 1px solid #dbe7ff;
  border-radius: 14px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 22px rgba(37,99,235,.08);
  direction: ltr;
  z-index: 3;
}
.qcm-unlocked-badge[hidden] { display:none !important; }
.qcm-unlocked-badge-icon {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #2563eb;
  color: #fff;
}
.qcm-unlocked-badge-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.qcm-unlocked-badge-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.1;
  white-space: nowrap;
}
.qcm-unlocked-badge-copy strong {
  color: #2563eb;
  font-size: .76rem;
  font-weight: 850;
}
.qcm-unlocked-badge-copy small {
  color: #64748b;
  font-size: .68rem;
  font-weight: 600;
}
.qcm-access-icon {
  width: 46px; height:46px; display:grid; place-items:center;
  border-radius:14px; background:#eef4ff; color:#2563eb;
}
.qcm-access-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.qcm-access-copy { min-width:0; }
.qcm-access-kicker,.qcm-payment-kicker { display:block; color:#2563eb; font-size:.58rem; font-weight:900; letter-spacing:.15em; }
.qcm-access-copy h2 { margin:5px 0 5px; color:#0f172a; font-size:1rem; }
.qcm-access-copy p { margin:0; color:#64748b; font-size:.78rem; line-height:1.55; }
.qcm-access-meta { display:flex; align-items:center; gap:16px; direction:ltr; }
.qcm-access-meta > div { min-width:76px; text-align:right; }
.qcm-access-meta span { display:block; color:#94a3b8; font-size:.6rem; font-weight:700; }
.qcm-access-meta strong { display:block; margin-top:3px; color:#0f172a; font-size:.9rem; }
.qcm-unlock-button { min-height:44px; padding:0 17px; border:0; border-radius:12px; background:#2563eb; color:#fff; font-size:.73rem; font-weight:850; cursor:pointer; box-shadow:0 8px 20px rgba(37,99,235,.18); transition:transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.qcm-unlock-button:hover { transform:translateY(-1px); box-shadow:0 11px 25px rgba(37,99,235,.23); }
.qcm-unlock-button:disabled { opacity:.48; cursor:not-allowed; transform:none; box-shadow:none; }
.qcm-shell.qcm-is-locked > .qcm-hero,
.qcm-shell.qcm-is-locked > .qcm-toolbar,
.qcm-shell.qcm-is-locked > .qcm-progress-line,
.qcm-shell.qcm-is-locked > .qcm-card,
.qcm-shell.qcm-is-locked > .qcm-actions { display:none !important; }

/* =========================================================
   QCM PAYMENT MODAL — EXACT ŒUVRES STRUCTURE
   ========================================================= */

.qcm-payment-overlay {
  position:fixed; inset:0; z-index:3000; display:grid; place-items:center; padding:24px;
  background:rgba(15,23,42,.38); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  opacity:0; transition:opacity .22s ease;
}
.qcm-payment-overlay[hidden] { display:none !important; }
.qcm-payment-overlay.is-visible { opacity:1; }
.qcm-payment-modal {
  position:relative; width:min(520px,100%); padding:30px;
  border:1px solid rgba(226,232,240,.95); border-radius:24px;
  background:rgba(255,255,255,.98); box-shadow:0 32px 90px rgba(15,23,42,.20), 0 8px 28px rgba(15,23,42,.07);
  transform:translateY(12px) scale(.985); transition:transform .28s cubic-bezier(.2,.8,.2,1);
  font-family:Inter,sans-serif;
}
.qcm-payment-overlay.is-visible .qcm-payment-modal { transform:translateY(0) scale(1); }
.qcm-payment-close {
  position:absolute; top:18px; right:18px; width:36px; height:36px; display:grid; place-items:center;
  border:1px solid #e5eaf1; border-radius:11px; background:#f8fafc; color:#64748b; cursor:pointer;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.qcm-payment-close:hover { background:#eef4ff; border-color:#d8e5ff; color:#2563eb; transform:translateY(-1px); }
.qcm-payment-close svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.qcm-payment-kicker { color:#2563eb; font-size:.64rem; font-weight:850; letter-spacing:.14em; }
.qcm-payment-heading { padding-right:42px; }
.qcm-payment-modal h2 {
  margin:0 0 8px; color:#0f172a; font-family:Inter,sans-serif; font-size:1.72rem; line-height:1.15;
  font-weight:800; letter-spacing:-.035em;
}
.qcm-payment-modal > .qcm-payment-heading p { margin:0; color:#64748b; font-size:.83rem; line-height:1.65; }
.qcm-payment-work {
  margin-top:24px; padding:16px 17px; border:1px solid #e2e8f0; border-radius:15px;
  background:#fbfcfe;
}
.qcm-payment-work-label { margin-bottom:6px; color:#94a3b8; font-size:.59rem; font-weight:800; letter-spacing:.1em; }
.qcm-payment-work strong { color:#172033; font-size:.92rem; font-weight:800; }
.qcm-payment-balance { margin-top:10px; border:1px solid #e2e8f0; border-radius:15px; overflow:hidden; }
.qcm-payment-balance > div {
  min-height:48px; padding:0 16px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  border-bottom:1px solid #edf1f5;
}
.qcm-payment-balance > div:last-child { border-bottom:0; }
.qcm-payment-balance span { color:#7b8aa0; font-size:.72rem; font-weight:600; }
.qcm-payment-balance strong { color:#172033; font-size:.8rem; font-weight:800; }
.qcm-payment-cost strong { color:#2563eb; }

.qcm-payment-warning {
  display:flex; align-items:flex-start; gap:11px; margin-top:12px; padding:12px 13px;
  border:1px solid #e8edf4; border-radius:13px; background:#fafbfd;
}
.qcm-payment-warning-icon {
  flex:0 0 24px; width:24px; height:24px; display:grid; place-items:center;
  border:1px solid #d7e0eb; border-radius:50%; background:#f1f5f9; color:#64748b;
  font-size:.72rem; font-weight:900; line-height:1;
}
.qcm-payment-warning strong { display:block; color:#334155; font-size:.7rem; font-weight:850; }
.qcm-payment-warning span { display:block; margin-top:2px; color:#64748b; font-size:.68rem; line-height:1.5; }
.qcm-payment-success[hidden] { display:none !important; }

.qcm-payment-actions { display:grid; grid-template-columns:auto 1fr; gap:10px; margin-top:18px; }
.qcm-payment-actions .qcm-secondary,.qcm-payment-actions .qcm-primary { min-height:46px; border-radius:12px; font-family:Inter,sans-serif; font-size:.74rem; font-weight:800; }
.qcm-payment-actions .qcm-primary { box-shadow:0 8px 20px rgba(37,99,235,.16); transition:transform .16s ease,box-shadow .16s ease,opacity .16s ease; }
.qcm-payment-actions .qcm-primary:hover { transform:translateY(-1px); box-shadow:0 11px 26px rgba(37,99,235,.21); }
.qcm-payment-confirm.is-processing { pointer-events:none; opacity:.72; }
.qcm-payment-success {
  display:flex; align-items:center; gap:13px; margin-top:16px; padding:14px;
  border:1px solid #dbe7ff; border-radius:15px; background:#f7faff; animation:qcmSuccessIn .4s ease both;
}
.qcm-success-mark {
  flex:0 0 42px; width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  background:#2563eb; color:#fff; box-shadow:0 8px 18px rgba(37,99,235,.18); animation:qcmSuccessPop .5s cubic-bezier(.2,.9,.2,1.25) both;
}
.qcm-success-mark svg { width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.qcm-payment-success strong { display:block; color:#172033; font-size:.82rem; font-weight:800; }
.qcm-payment-success span { display:block; margin-top:3px; color:#64748b; font-size:.7rem; line-height:1.45; }
@keyframes qcmSuccessPop { 0%{transform:scale(.55);opacity:0} 70%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
@keyframes qcmSuccessIn { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:none} }
.qcm-xp-reward { margin-top:14px; padding:12px 14px; border:1px solid #dbe7ff; border-radius:13px; background:#f7faff; color:#2563eb; font-size:.74rem; font-weight:800; animation:qcmSuccessIn .3s ease both; }

/* Reduce the empty gutter between the fixed sidebar and the main reading/understanding card. */
@media (min-width:981px) {
  .reader-shell { padding-left:294px !important; }
  .reader-document { margin-left:0 !important; }
  body.understanding-view-active .understand-document { width:calc(100% - 294px) !important; margin-left:294px !important; }
  body.reading-view-active .human-built-message { width:calc(100% - 294px) !important; margin-left:294px !important; }
  body.understanding-view-active .human-built-message { width:calc(100% - 294px) !important; margin-left:294px !important; }
}

html.dark .qcm-access-card, html.dark .qcm-payment-modal { background:#111827; border-color:#263449; }
html.dark .qcm-access-copy h2, html.dark .qcm-access-meta strong, html.dark .qcm-payment-modal h2, html.dark .qcm-payment-summary strong, html.dark .qcm-payment-success strong { color:#f8fafc; }
html.dark .qcm-access-copy p, html.dark .qcm-access-meta span, html.dark .qcm-payment-modal > p, html.dark .qcm-payment-summary span, html.dark .qcm-payment-success span { color:#94a3b8; }
html.dark .qcm-payment-summary { border-color:#263449; }
html.dark .qcm-payment-warning { border-color:#263449; background:#151f2f; }
html.dark .qcm-payment-warning-icon { border-color:#334155; background:#1e293b; color:#cbd5e1; }
html.dark .qcm-payment-warning strong { color:#e2e8f0; }
html.dark .qcm-payment-warning span { color:#94a3b8; }
html.dark .qcm-payment-summary div { border-color:#263449; }
html.dark .qcm-payment-close { background:#172033; color:#cbd5e1; }

@media (max-width: 560px) {
  .qcm-payment-modal {
    padding: 22px 18px;
  }

  .qcm-payment-balance {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   QCM PAYMENT MODAL — EXACT ŒUVRES PRESENTATION
   Scoped overrides only. Keeps Quran content/XP logic unchanged.
   ============================================================ */
.qcm-payment-overlay,
.qcm-payment-modal {
  direction: ltr !important;
  text-align: left !important;
}

.qcm-payment-modal {
  width: min(520px, 100%) !important;
  padding: 30px !important;
  border-radius: 24px !important;
}

.qcm-payment-actions {
  display: grid !important;
  grid-template-columns: auto 1fr !important;
  gap: 10px !important;
  margin-top: 18px !important;
}

.qcm-payment-actions .qcm-secondary,
.qcm-payment-actions .qcm-primary {
  width: auto !important;
  height: auto !important;
  min-height: 46px !important;
  padding: 11px 16px !important;
  border-radius: 12px !important;
  font: 800 12px/1.2 Inter, sans-serif !important;
  box-sizing: border-box !important;
}

.qcm-payment-actions .qcm-primary {
  width: 100% !important;
}

.qcm-payment-actions .qcm-secondary {
  min-width: 0 !important;
}

@media (max-width: 760px) {
  .qcm-payment-modal {
    padding: 26px 20px !important;
    border-radius: 22px !important;
  }
}


/* ============================================================
   BACTRUTH WEB DARK MODE
   Uses the same global BacTruth dark theme:
   #0b0b0b / #0c1118 surfaces / #1c2633 borders /
   #f8fafc text / #94a3b8 muted / #2563eb accent.
   ============================================================ */

html.dark {
  --bg: #0b0b0b;
  --surface: rgba(12, 17, 24, .88);
  --surface-solid: #0c1118;
  --text: #f8fafc;
  --muted: #94a3b8;
  --line: #1c2633;
  --blue: #2563eb;
  --blue-soft: #172554;
  --green: #22c55e;
  --gold: #f59e0b;
  --shadow: 0 25px 70px rgba(0, 0, 0, .25);
}

html.dark body {
  background:
    radial-gradient(circle at 10% 0%, rgba(37, 99, 235, .09), transparent 25rem),
    #0b0b0b;
  color: #f8fafc;
}

html.dark .ambient-a {
  background: #172554;
  opacity: .24;
}

html.dark .ambient-b {
  background: #0f2a20;
  opacity: .16;
}

html.dark .programme-topbar {
  border-color: rgba(28, 38, 51, .95);
  background: rgba(12, 17, 24, .88);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .28);
}

html.dark .programme-brand-copy small {
  color: #64748b;
}

html.dark .top-switcher {
  border-color: #1c2633;
  background: #111923;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

html.dark .top-switcher .switch-btn {
  color: #94a3b8;
}

html.dark .top-switcher .switch-btn:hover {
  color: #e2e8f0;
  background: #151e2e;
}

html.dark .top-switcher .switch-btn.active {
  color: #60a5fa;
  background: #0c1118;
  box-shadow: 0 3px 12px rgba(0,0,0,.22);
}

html.dark .programme-return {
  background: #172554;
  color: #60a5fa;
}

html.dark .programme-return:hover {
  background: #1e3a8a;
}

html.dark .quran-card,
html.dark .reciter-panel,
html.dark .study-index,
html.dark .study-content {
  background: #0c1118;
  border-color: #1c2633;
  box-shadow: 0 25px 70px rgba(0,0,0,.25);
}

html.dark .section-head {
  border-color: #1c2633;
}

html.dark .section-head h2,
html.dark .section-title h2,
html.dark .study-index h2 {
  color: #f8fafc;
}

html.dark .section-kicker,
html.dark .section-title small {
  color: #60a5fa;
}

html.dark .bismillah,
html.dark .quran-flow {
  color: #f8fafc;
}

html.dark .ayah-number {
  color: #60a5fa;
  background: #111923;
  border-color: rgba(96,165,250,.35);
}

html.dark .glossary-word {
  color: #60a5fa;
  border-color: rgba(96,165,250,.6);
}

html.dark .glossary-word:hover,
html.dark .glossary-word:focus-visible {
  color: #93c5fd;
  background: rgba(37,99,235,.12);
}

html.dark .spinner {
  border-color: #263449;
  border-top-color: #2563eb;
}

html.dark .reciter-card {
  background: #0f161f;
  border-color: #1c2633;
  color: #f8fafc;
}

html.dark .reciter-card:hover {
  border-color: #263548;
  box-shadow: 0 8px 22px rgba(0,0,0,.20);
}

html.dark .reciter-card.active {
  border-color: rgba(37,99,235,.55);
  background: #111c31;
  box-shadow: 0 8px 24px rgba(37,99,235,.10);
}

html.dark .reciter-info small {
  color: #64748b;
}

html.dark .reciter-action {
  color: #60a5fa;
  background: #172554;
}

html.dark .reciter-card:not(.active) .reciter-action {
  color: #94a3b8;
  background: #151e2e;
}

html.dark .reciter-avatar {
  background: #1e293b;
  color: #f8fafc;
}

html.dark .study-index {
  background: #0c1118;
}

html.dark .index-btn {
  color: #94a3b8;
}

html.dark .index-btn:hover,
html.dark .index-btn.active {
  color: #f8fafc;
  background: #111923;
}

html.dark .index-btn.active {
  color: #60a5fa;
}

html.dark .section-intro {
  color: #94a3b8;
}

html.dark .glossary-item,
html.dark .timeline-item,
html.dark .value-card,
html.dark .lesson-card {
  background: #0f161f;
  border-color: #1c2633;
}

html.dark .glossary-item span,
html.dark .timeline-item p,
html.dark .value-card p,
html.dark .lesson-card p {
  color: #94a3b8;
}

html.dark .glossary-item strong,
html.dark .timeline-item strong,
html.dark .value-card strong,
html.dark .lesson-card strong {
  color: #f8fafc;
}

html.dark .section-title {
  border-color: #1c2633;
}

html.dark .section-title > span {
  background: #172554;
  color: #60a5fa;
}

html.dark .qcm-shell {
  color: #f8fafc;
}

html.dark .qcm-access-card,
html.dark .qcm-hero,
html.dark .qcm-card {
  background: #0c1118;
  border-color: #1c2633;
  box-shadow: 0 25px 70px rgba(0,0,0,.25);
}

html.dark .qcm-access-copy h2,
html.dark .qcm-hero h1 {
  color: #f8fafc;
}

html.dark .qcm-access-copy p,
html.dark .qcm-hero p {
  color: #94a3b8;
}

html.dark .qcm-access-kicker,
html.dark .qcm-kicker {
  color: #60a5fa;
}

html.dark .qcm-access-icon {
  background: #172554;
  color: #60a5fa;
}

html.dark .qcm-access-meta > div span,
html.dark .qcm-coverage-item small,
html.dark .qcm-progress-line,
html.dark .qcm-card small {
  color: #94a3b8;
}

html.dark .qcm-access-meta > div strong,
html.dark .qcm-coverage-item b,
html.dark .qcm-card h2,
html.dark .qcm-card strong {
  color: #f8fafc;
}

html.dark .qcm-unlock-button,
html.dark .qcm-primary,
html.dark .qcm-random {
  background: #2563eb;
  color: #fff;
}

html.dark .qcm-unlock-button:hover,
html.dark .qcm-primary:hover,
html.dark .qcm-random:hover {
  background: #1d4ed8;
}

html.dark .qcm-secondary {
  background: #151e2e;
  color: #e2e8f0;
  border-color: #263449;
}

html.dark .qcm-secondary:hover {
  background: #1a2639;
}

html.dark .qcm-coverage-item {
  background: #0f161f;
  border-color: #1c2633;
}

html.dark .qcm-progress-line > div {
  background: #1c2633;
}

html.dark .qcm-progress-line > div > span {
  background: #2563eb;
}

html.dark .qcm-unlocked-badge {
  background: #0f1d33;
  border-color: #1e3a5f;
  color: #60a5fa;
}

html.dark .qcm-unlocked-badge-copy small {
  color: #94a3b8;
}

html.dark .qcm-payment-overlay {
  background: rgba(2, 6, 23, .72);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

html.dark .qcm-payment-modal {
  background: #0c1118;
  border-color: #1c2633;
  box-shadow: 0 30px 80px rgba(0,0,0,.48);
}

html.dark .qcm-payment-heading h2 {
  color: #f8fafc;
}

html.dark .qcm-payment-heading p {
  color: #94a3b8;
}

html.dark .qcm-payment-close {
  background: #111923;
  border-color: #263449;
  color: #94a3b8;
}

html.dark .qcm-payment-close:hover {
  background: #172554;
  border-color: #405777;
  color: #60a5fa;
}

html.dark .qcm-payment-work {
  border-color: #263449;
  background: #0f172a;
}

html.dark .qcm-payment-work-label {
  color: #64748b;
}

html.dark .qcm-payment-work strong {
  color: #f8fafc;
}

html.dark .qcm-payment-balance {
  border-color: #263449;
}

html.dark .qcm-payment-balance > div {
  border-color: #263449;
}

html.dark .qcm-payment-balance span {
  color: #94a3b8;
}

html.dark .qcm-payment-balance strong {
  color: #f8fafc;
}

html.dark .qcm-payment-cost strong {
  color: #60a5fa;
}

html.dark .qcm-payment-warning {
  border-color: #263449;
  background: #151f2f;
}

html.dark .qcm-payment-warning-icon {
  border-color: #334155;
  background: #1e293b;
  color: #cbd5e1;
}

html.dark .qcm-payment-warning strong {
  color: #e2e8f0;
}

html.dark .qcm-payment-warning span {
  color: #94a3b8;
}

html.dark .qcm-payment-success {
  border-color: #1e3a5f;
  background: #0f1d33;
}

html.dark .qcm-xp-reward {
  border-color: #1e3a5f;
  background: #0f1d33;
  color: #60a5fa;
}

html.dark .human-built-message {
  color: #64748b;
}

/* BacTruth logo: white mark on the dark topbar. */
html.dark .programme-brand-mark img {
  filter: brightness(0) invert(1) !important;
}

/* ============================================================
   BACTRUTH — FINAL GLOBAL DARK MODE
   This page follows the exact dark palette used by the current
   BacTruth web UI. Keep this block last so legacy Quran styles
   cannot override the global theme.
   ============================================================ */

html.dark {
  --quran-dark-bg: #0b111a;
  --quran-dark-surface: #111923;
  --quran-dark-surface-2: #101822;
  --quran-dark-border: #263445;
  --quran-dark-border-soft: #29384b;
  --quran-dark-text: #f8fafc;
  --quran-dark-muted: #94a3b8;
  --quran-dark-faint: #64748b;
  --quran-dark-blue: #2563eb;
  --quran-dark-blue-text: #60a5fa;
  --quran-dark-blue-soft: #172230;
}

html.dark body {
  color: var(--quran-dark-text) !important;
  background:
    radial-gradient(
      circle at 91% 7%,
      rgba(37, 99, 235, .10),
      transparent 31%
    ),
    radial-gradient(
      circle at 2% 88%,
      rgba(37, 99, 235, .07),
      transparent 35%
    ),
    var(--quran-dark-bg) !important;
}

/* Ambient background */
html.dark .ambient-a {
  background: #172554 !important;
  opacity: .20 !important;
}

html.dark .ambient-b {
  background: #0f2a20 !important;
  opacity: .12 !important;
}

/* Top navigation */
html.dark .programme-topbar {
  background: rgba(13, 20, 30, .88) !important;
  border-color: rgba(38, 52, 68, .95) !important;
  box-shadow: 0 15px 45px rgba(0, 0, 0, .24) !important;
}

html.dark .programme-brand-copy strong {
  color: #f8fafc !important;
}

html.dark .programme-brand-copy small {
  color: #94a3b8 !important;
}

html.dark .top-switcher {
  background: #101722 !important;
  border-color: #29384b !important;
}

html.dark .top-switcher .switch-btn {
  color: #94a3b8 !important;
}

html.dark .top-switcher .switch-btn:hover {
  background: #172230 !important;
  color: #e2e8f0 !important;
}

html.dark .top-switcher .switch-btn.active {
  background: #0c1118 !important;
  color: #60a5fa !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .22) !important;
}

html.dark .programme-return {
  background: #172230 !important;
  color: #60a5fa !important;
  border-color: #263445 !important;
}

html.dark .programme-return:hover {
  background: #203044 !important;
  color: #f8fafc !important;
  border-color: #3b82f6 !important;
}

/* Main cards / surfaces */
html.dark .quran-card,
html.dark .reciter-panel,
html.dark .study-index,
html.dark .study-content,
html.dark .qcm-access-card,
html.dark .qcm-hero,
html.dark .qcm-card {
  background: rgba(17, 25, 35, .92) !important;
  border-color: #263445 !important;
  box-shadow: 0 22px 65px rgba(0, 0, 0, .22) !important;
}

/* Headings */
html.dark .section-head,
html.dark .section-title {
  border-color: #263445 !important;
}

html.dark .section-head h2,
html.dark .section-title h2,
html.dark .study-index h2,
html.dark .qcm-access-copy h2,
html.dark .qcm-hero h1,
html.dark .qcm-card h2 {
  color: #f8fafc !important;
}

html.dark .section-kicker,
html.dark .section-title small,
html.dark .qcm-access-kicker,
html.dark .qcm-kicker {
  color: #60a5fa !important;
}

/* Quran reading area */
html.dark .bismillah,
html.dark .quran-flow {
  color: #f8fafc !important;
}

html.dark .quran-ayah-circle,
html.dark .ayah-number {
  color: #60a5fa !important;
  border-color: rgba(96, 165, 250, .38) !important;
  background: #101722 !important;
}

html.dark .glossary-word {
  color: #60a5fa !important;
  border-color: rgba(96, 165, 250, .60) !important;
}

html.dark .glossary-word:hover,
html.dark .glossary-word:focus-visible {
  color: #93c5fd !important;
  background: rgba(37, 99, 235, .12) !important;
}

/* Reciters */
html.dark .reciter-card {
  background: #101822 !important;
  border-color: #29384b !important;
  color: #f8fafc !important;
}

html.dark .reciter-card:hover {
  background: #111923 !important;
  border-color: #35506f !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .20) !important;
}

html.dark .reciter-card.active {
  background: #11203a !important;
  border-color: rgba(77, 128, 201, .72) !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, .10) !important;
}

html.dark .reciter-info small {
  color: #64748b !important;
}

html.dark .reciter-action {
  color: #60a5fa !important;
  background: #172230 !important;
}

html.dark .reciter-card:not(.active) .reciter-action {
  color: #94a3b8 !important;
  background: #151e2e !important;
}

html.dark .reciter-avatar {
  background: #1e293b !important;
  color: #f8fafc !important;
}

/* Study navigation / cards */
html.dark .index-btn {
  color: #94a3b8 !important;
}

html.dark .index-btn:hover {
  background: #172230 !important;
  color: #e2e8f0 !important;
}

html.dark .index-btn.active {
  background: #172230 !important;
  color: #60a5fa !important;
}

html.dark .section-intro,
html.dark .glossary-item span,
html.dark .timeline-item p,
html.dark .value-card p,
html.dark .lesson-card p {
  color: #94a3b8 !important;
}

html.dark .glossary-item,
html.dark .timeline-item,
html.dark .value-card,
html.dark .lesson-card {
  background: #101822 !important;
  border-color: #29384b !important;
}

html.dark .glossary-item strong,
html.dark .timeline-item strong,
html.dark .value-card strong,
html.dark .lesson-card strong {
  color: #f8fafc !important;
}

html.dark .section-title > span {
  background: #172a47 !important;
  color: #60a5fa !important;
}

/* QCM */
html.dark .qcm-access-copy p,
html.dark .qcm-hero p,
html.dark .qcm-access-meta > div span,
html.dark .qcm-coverage-item small,
html.dark .qcm-progress-line,
html.dark .qcm-card small {
  color: #94a3b8 !important;
}

html.dark .qcm-access-meta > div strong,
html.dark .qcm-coverage-item b,
html.dark .qcm-card strong {
  color: #f8fafc !important;
}

html.dark .qcm-access-icon {
  background: #172a47 !important;
  color: #60a5fa !important;
}

html.dark .qcm-coverage-item {
  background: #101822 !important;
  border-color: #29384b !important;
}

html.dark .qcm-unlock-button,
html.dark .qcm-primary,
html.dark .qcm-random {
  background: linear-gradient(135deg, #397ff1, #2f6fe2) !important;
  color: #fff !important;
}

html.dark .qcm-unlock-button:hover,
html.dark .qcm-primary:hover,
html.dark .qcm-random:hover {
  background: linear-gradient(135deg, #4b8cf4, #397ff1) !important;
}

html.dark .qcm-secondary {
  background: #151e2e !important;
  color: #e2e8f0 !important;
  border-color: #263445 !important;
}

html.dark .qcm-secondary:hover {
  background: #1a2639 !important;
}

html.dark .qcm-progress-line > div {
  background: #263445 !important;
}

html.dark .qcm-progress-line > div > span {
  background: #2563eb !important;
}

html.dark .qcm-unlocked-badge {
  background: #0f1d33 !important;
  border-color: #1e3a5f !important;
  color: #60a5fa !important;
}

/* QCM payment modal */
html.dark .qcm-payment-overlay {
  background: rgba(4, 8, 14, .62) !important;
}

html.dark .qcm-payment-modal {
  background: #111923 !important;
  border-color: #263445 !important;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .42) !important;
}

html.dark .qcm-payment-heading h2 {
  color: #f8fafc !important;
}

html.dark .qcm-payment-heading p,
html.dark .qcm-payment-work-label,
html.dark .qcm-payment-balance span,
html.dark .qcm-payment-warning span {
  color: #94a3b8 !important;
}

html.dark .qcm-payment-close {
  background: #1a2431 !important;
  border-color: #263445 !important;
  color: #94a3b8 !important;
}

html.dark .qcm-payment-close:hover {
  background: #243246 !important;
  color: #f8fafc !important;
}

html.dark .qcm-payment-work {
  background: #101822 !important;
  border-color: #263445 !important;
}

html.dark .qcm-payment-balance {
  border-color: #263445 !important;
}

html.dark .qcm-payment-balance > div {
  border-color: #263445 !important;
}

html.dark .qcm-payment-cost strong,
html.dark .qcm-xp-reward {
  color: #60a5fa !important;
}

html.dark .qcm-payment-warning {
  background: #151f2b !important;
  border-color: #263445 !important;
}

html.dark .qcm-payment-warning-icon {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #cbd5e1 !important;
}

html.dark .qcm-payment-success {
  background: #0f1d33 !important;
  border-color: #1e3a5f !important;
}

/* Loader must also be dark immediately */
html.dark .quran-page-loader {
  background: #0b111a !important;
}

html.dark .quran-loader-topbar,
html.dark .quran-loader-reader,
html.dark .quran-loader-reciter {
  background: #111923 !important;
  border-color: #263445 !important;
}

html.dark .quran-loader-skeleton {
  background: #172230 !important;
}

/* Logo */
html.dark .programme-brand-mark img {
  filter: brightness(0) invert(1) !important;
}

/* =========================================================
   BACTRUTH DARK MODE — FINAL COMPONENT NORMALIZATION
   These overrides intentionally come last so every Quran
   component uses the same dark palette as the rest of BacTruth.
   ========================================================= */

html.dark .study-content,
html.dark .study-section,
html.dark .meaning-body,
html.dark .qcm-shell {
  color: #f8fafc !important;
}

/* Understanding / meanings */
html.dark .meaning-quran,
html.dark .value-quote {
  color: #f8fafc !important;
}

html.dark .meaning-ayah-number {
  background: #101822 !important;
  color: #94a3b8 !important;
  border-color: #29384b !important;
}

html.dark .value-card,
html.dark .glossary-item,
html.dark .timeline-item,
html.dark .lesson-item,
html.dark .lesson-card {
  background: #111923 !important;
  border-color: #263445 !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

html.dark .value-quote,
html.dark .lesson-item,
html.dark .lesson-card,
html.dark .glossary-item,
html.dark .timeline-item {
  color: #f8fafc !important;
}

html.dark .value-label,
html.dark .value-text,
html.dark .glossary-item span,
html.dark .timeline-item p,
html.dark .lesson-item p,
html.dark .lesson-card p,
html.dark .section-intro {
  color: #94a3b8 !important;
}

html.dark .value-text,
html.dark .lesson-item,
html.dark .lesson-card {
  color: #cbd5e1 !important;
}

html.dark .value-text strong,
html.dark .lesson-item strong,
html.dark .lesson-card strong,
html.dark .glossary-item strong,
html.dark .timeline-item strong {
  color: #f8fafc !important;
}

html.dark .lessons-list {
  color: #f8fafc !important;
}

/* QCM overview / statistics */
html.dark .qcm-hero,
html.dark .qcm-card {
  background: #111923 !important;
  border-color: #263445 !important;
  color: #f8fafc !important;
  box-shadow: 0 18px 48px rgba(0,0,0,.20) !important;
}

html.dark .qcm-stat,
html.dark .qcm-coverage-item,
html.dark .qcm-coverage-random {
  background: #101822 !important;
  border-color: #29384b !important;
  color: #f8fafc !important;
  box-shadow: none !important;
}

html.dark .qcm-stat b,
html.dark .qcm-coverage-item b {
  color: #f8fafc !important;
}

html.dark .qcm-stat span,
html.dark .qcm-coverage-item small,
html.dark .qcm-hero > p,
html.dark .qcm-question-sub,
html.dark .qcm-number {
  color: #94a3b8 !important;
}

html.dark .qcm-card-top {
  border-bottom-color: #263445 !important;
}

html.dark .qcm-question {
  color: #f8fafc !important;
}

/* QCM answer buttons — remove the white cards in dark mode */
html.dark .qcm-option,
html.dark .qcm-option.quran-option {
  background: #111923 !important;
  border-color: #29384b !important;
  color: #e5edf7 !important;
  box-shadow: none !important;
}

html.dark .qcm-option:hover {
  background: #172230 !important;
  border-color: #35506f !important;
  color: #f8fafc !important;
}

html.dark .qcm-option.correct {
  background: #10251b !important;
  border-color: #2f8f5b !important;
  color: #86efac !important;
}

html.dark .qcm-option.wrong {
  background: #2a151a !important;
  border-color: #a33b4b !important;
  color: #fda4af !important;
}

/* QCM correction / XP result — also remove the white card */
html.dark .qcm-correction {
  background: #111923 !important;
  border-color: #263445 !important;
  color: #e5edf7 !important;
}

html.dark .qcm-correction strong {
  color: #60a5fa !important;
}

html.dark .qcm-correction p {
  color: #cbd5e1 !important;
}

html.dark .qcm-xp-reward,
html.dark .qcm-correction .qcm-xp-reward {
  background: #0f1d33 !important;
  border-color: #1e3a5f !important;
  color: #60a5fa !important;
}

/* QCM navigation buttons */
html.dark .qcm-secondary {
  background: #151e2e !important;
  border-color: #263445 !important;
  color: #cbd5e1 !important;
}

html.dark .qcm-secondary:hover:not(:disabled) {
  background: #1a2639 !important;
  color: #f8fafc !important;
}

html.dark .qcm-primary,
html.dark .qcm-random,
html.dark .qcm-unlock-button {
  color: #fff !important;
}

/* Reading / context cards */
html.dark .reader-document,
html.dark .understand-document,
html.dark .reader-note {
  color: #cbd5e1 !important;
}

html.dark .reader-document,
html.dark .understand-document {
  background: #111923 !important;
  border-color: #263445 !important;
}

html.dark .reader-eyebrow,
html.dark .reader-badge,
html.dark .reading-badge {
  color: #60a5fa !important;
}

html.dark .reader-heading,
html.dark .reader-title,
html.dark .reading-heading {
  color: #f8fafc !important;
}

/* Any remaining plain white surfaces inside dark mode */
html.dark .study-content [style*="background: #fff"],
html.dark .study-content [style*="background:#fff"],
html.dark .qcm-shell [style*="background: #fff"],
html.dark .qcm-shell [style*="background:#fff"] {
  background: #111923 !important;
}

html.dark .study-content [style*="color: #0f172a"],
html.dark .study-content [style*="color:#0f172a"],
html.dark .qcm-shell [style*="color: #0f172a"],
html.dark .qcm-shell [style*="color:#0f172a"] {
  color: #f8fafc !important;
}