/* =========================================================================
   AI Tajweed Voice Evaluation — v3 design system
   Layer 1 (light): Lessons list, Lesson detail — faithful to the shipping app.
   Layer 2 (dark):  Practice / Recitation Test / Result / My Result — the navy
                    immersive surfaces (#022534 → #063B51) of the real app.
   AI identity: gold ✦ (#E8CD91 → #D9B25F) — premium, distinct from the app's
   orange (tajweed highlights) and blue (actions).
   ========================================================================= */

:root {
  /* real app palette */
  --navy-950: #01161E;
  --navy-900: #011B29;
  --navy-850: #012533;
  --navy-800: #022534;
  --navy-700: #063B51;
  --navy-600: #0E3D4F;
  --navy-500: #0B4F6A;
  --blue: #0775A2;
  --blue-bright: #1389B9;
  --blue-light: #00ABF1;
  --teal-btn: #2175A2;
  --btn-result: #2C7CA0;
  --orange: #FF8800;
  --orange-cta: #FD8107;
  --yellow-rec: #FFC63A;
  /* AI premium gold */
  --gold: #D9B25F;
  --gold-soft: #E8CD91;
  --gold-deep: #A8843B;
  /* severity semantics (match backend web) */
  --jaliy: #E5605E;
  --khofiy: #E2A13C;
  --correct: #4CC38A;
  /* light layer */
  --paper: #F2F2F7;
  --row: #FFFFFF;
  --ink: #1C1C1E;
  --ink-2: #6C6C70;
  --ink-3: #AEAEB2;
  --sep: #E3E3E8;
  /* type */
  --ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --quran: "Scheherazade New", "Amiri Quran", "Noto Naskh Arabic", serif;
  --shadow-sheet: 0 -12px 48px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 4px 20px rgba(1, 22, 30, 0.25);
  --ease-spring: cubic-bezier(0.32, 1.25, 0.4, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ui);
  background: #0B0F14;
  background-image: radial-gradient(1100px 700px at 75% -10%, #12283a66, transparent),
    radial-gradient(900px 600px at -10% 110%, #0d1f2e88, transparent);
  color: #E8EFF4;
  min-height: 100vh;
}
button { font-family: inherit; }

/* ============================== harness rail ============================ */
.proto { display: flex; min-height: 100vh; }
.rail {
  width: 300px; flex: 0 0 300px; padding: 22px 20px 40px;
  background: #0D141C; border-inline-end: 1px solid #1B2733;
  overflow-y: auto; max-height: 100vh; position: sticky; top: 0;
}
.rail h1 { font-size: 15px; margin: 0 0 2px; letter-spacing: 0.2px; }
.rail .sub { font-size: 11.5px; color: #7C8B98; margin: 0 0 18px; line-height: 1.45; }
.rail-group { margin-bottom: 18px; }
.rail-group > .rg-title {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.12em;
  color: #5E7080; margin-bottom: 8px; font-weight: 700;
}
.rail select {
  width: 100%; background: #131D27; color: #E8EFF4; border: 1px solid #243443;
  border-radius: 8px; padding: 7px 10px; font-size: 12.5px;
}
.rail-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rail-chip {
  border: 1px solid #243443; background: #131D27; color: #B9C7D3;
  font-size: 11.5px; padding: 5px 10px; border-radius: 999px; cursor: pointer;
  transition: all 0.15s var(--ease-out);
}
.rail-chip:hover { border-color: #3A5066; }
.rail-chip.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.rail-chip.gold.on { background: var(--gold-deep); border-color: var(--gold-deep); }
.rail-note { font-size: 11px; color: #5E7080; line-height: 1.5; margin-top: 6px; }
.rail-kv { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rail-kv .k { font-size: 12px; color: #9FB0BE; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid #243443;
  background: #131D27; color: #E8EFF4; cursor: pointer; font-size: 14px; line-height: 1;
}
.stepper .v { font-size: 13px; min-width: 16px; text-align: center; font-variant-numeric: tabular-nums; }

/* ================================ device ================================ */
.stage { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 30px 24px 60px; }
.device {
  width: 430px; flex: 0 0 430px; border-radius: 54px; padding: 10px;
  background: linear-gradient(160deg, #2A3138, #14181D 60%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), inset 0 0 0 2px #3A424B, inset 0 0 0 7px #0A0C0F;
  position: sticky; top: 30px;
}
.screen-wrap {
  position: relative; width: 410px; height: 880px; border-radius: 44px; overflow: hidden;
  background: var(--navy-800); isolation: isolate;
}
.island {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 118px; height: 34px; border-radius: 20px; background: #000; z-index: 60;
}
.statusbar {
  position: absolute; top: 0; left: 0; right: 0; height: 54px; z-index: 55;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 30px 0; font-size: 15px; font-weight: 600; color: #fff;
  pointer-events: none;
}
.statusbar .right { display: flex; gap: 6px; align-items: center; }
.screen-wrap.sb-dark .statusbar { color: #fff; }
.home-indicator {
  position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 140px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.55); z-index: 60;
  pointer-events: none;
}
.screen-wrap.sb-light .home-indicator { background: rgba(0, 0, 0, 0.3); }

/* ================================ screens =============================== */
#screenHost { position: absolute; inset: 0; }
.scr {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  overflow: hidden;
}
.scr-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.scr-body::-webkit-scrollbar { display: none; }
.scr.light { background: var(--paper); color: var(--ink); }
.scr.dark { background: linear-gradient(180deg, var(--navy-800) 0%, var(--navy-700) 100%); color: #fff; }
.scr.navy { background: var(--navy-850); color: #fff; }

/* push / pop transitions */
.scr.anim-in { animation: scr-in 0.42s var(--ease-spring); }
.scr.anim-out { animation: scr-out 0.32s var(--ease-out) forwards; }
.scr.anim-back-in { animation: scr-back-in 0.38s var(--ease-out); }
.scr.anim-back-out { animation: scr-back-out 0.34s var(--ease-out) forwards; }
@keyframes scr-in { from { transform: translateX(26%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes scr-out { to { transform: translateX(-14%); opacity: 0.55; } }
@keyframes scr-back-in { from { transform: translateX(-14%); opacity: 0.55; } to { transform: none; opacity: 1; } }
@keyframes scr-back-out { to { transform: translateX(26%); opacity: 0.3; } }
[dir="rtl"] .scr.anim-in { animation-name: scr-in-rtl; }
[dir="rtl"] .scr.anim-out { animation-name: scr-out-rtl; }
[dir="rtl"] .scr.anim-back-in { animation-name: scr-back-in-rtl; }
[dir="rtl"] .scr.anim-back-out { animation-name: scr-back-out-rtl; }
@keyframes scr-in-rtl { from { transform: translateX(-26%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes scr-out-rtl { to { transform: translateX(14%); opacity: 0.55; } }
@keyframes scr-back-in-rtl { from { transform: translateX(14%); opacity: 0.55; } to { transform: none; opacity: 1; } }
@keyframes scr-back-out-rtl { to { transform: translateX(-26%); opacity: 0.3; } }

/* ================================ nav bar =============================== */
.navbar {
  flex: 0 0 auto; padding: 58px 14px 10px; min-height: 104px;
  display: flex; align-items: center; gap: 10px; position: relative; z-index: 5;
}
.navbar.solid { background: var(--navy-850); }
.navbar .nav-title {
  flex: 1; text-align: center; font-size: 17px; font-weight: 700; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.nav-btn {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s;
}
.nav-btn:active { background: rgba(255, 255, 255, 0.28); }
.nav-btn.ghost { background: transparent; }
.nav-btn svg { width: 20px; height: 20px; }
[dir="rtl"] .nav-btn svg.chev { transform: scaleX(-1); }
.nav-spacer { width: 44px; flex: 0 0 44px; }

/* trial chip in nav */
.trial-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, #3A2F14, #2A2210); border: 1px solid var(--gold-deep);
  color: var(--gold-soft); font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.trial-chip.warn { border-color: var(--khofiy); color: var(--khofiy); }
.trial-chip .spark { font-size: 12px; }

/* ============================ badges & pills ============================ */
.badge-new {
  display: inline-block; background: var(--orange-cta); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.08em;
  padding: 2.5px 7px; border-radius: 6px; text-transform: uppercase;
}
.pill-ai {
  display: inline-flex; align-items: center; gap: 3px;
  background: linear-gradient(135deg, #FFF3DC, #F7E3B6); color: #7A5B16;
  font-size: 10px; font-weight: 800; padding: 2.5px 8px; border-radius: 999px;
  letter-spacing: 0.04em;
}
.scr.dark .pill-ai, .scr.navy .pill-ai {
  background: linear-gradient(135deg, #3A2F14, #2A2210);
  color: var(--gold-soft); border: 1px solid var(--gold-deep);
}

/* ============================ lessons (light) =========================== */
.hero-banner {
  margin: 14px 16px 6px; border-radius: 18px; padding: 15px 16px;
  background: linear-gradient(120deg, #073246 0%, #0A4A66 55%, #6E5418 130%);
  color: #fff; cursor: pointer; position: relative; overflow: hidden;
  box-shadow: var(--shadow-card); border: 1px solid rgba(232, 205, 145, 0.35);
}
.hero-banner::after {
  content: ""; position: absolute; inset: -40% -20%;
  background: radial-gradient(280px 160px at 85% 20%, rgba(232, 205, 145, 0.28), transparent 70%);
  pointer-events: none;
}
.hero-banner .hb-top { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.hero-banner .hb-title { font-size: 15.5px; font-weight: 800; }
.hero-banner .hb-sub { font-size: 12.5px; color: #CFE2EC; line-height: 1.45; }
.hero-banner .hb-cta {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 9px;
  color: var(--gold-soft); font-size: 13px; font-weight: 700;
}
.spark-ic { display: inline-flex; width: 18px; height: 18px; color: var(--gold-soft); }

.list-group { margin: 10px 0 0; }
.section-hdr {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 13px 16px; background: var(--paper);
  font-size: 16.5px; font-weight: 700; color: var(--ink);
  border-bottom: 1px solid var(--sep);
}
.section-hdr .chev { margin-inline-start: auto; transition: transform 0.25s var(--ease-out); color: var(--ink-2); }
.section-hdr.open .chev { transform: rotate(180deg); }
.lesson-row {
  display: flex; align-items: center; gap: 12px; padding: 14.5px 16px;
  background: var(--row); border-bottom: 0.5px solid var(--sep);
  cursor: pointer; font-size: 15.5px; color: var(--ink);
  transition: background 0.12s;
}
.lesson-row:active { background: #E9E9EE; }
.lesson-row .num { color: var(--ink); min-width: 20px; }
.lesson-row .lr-title { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lesson-row .chev-r { color: #C7C7CC; flex: 0 0 auto; }
[dir="rtl"] .chev-r svg { transform: scaleX(-1); }

.lwt-float {
  position: absolute; bottom: 26px; left: 0; right: 0; display: flex; justify-content: center;
  z-index: 8; pointer-events: none;
}
.lwt-btn {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 8px;
  background: var(--teal-btn); color: #fff; border: none; cursor: pointer;
  font-size: 15px; font-weight: 700; padding: 13px 22px; border-radius: 26px;
  box-shadow: 0 8px 24px rgba(2, 37, 52, 0.45); text-decoration: none;
}
.lwt-btn:active { background: #083144; }

/* ========================= lesson detail (light) ======================== */
.ld-sec-label {
  padding: 18px 16px 7px; font-size: 13.5px; color: var(--ink-2);
  background: var(--paper);
}
.ld-row {
  display: flex; align-items: center; gap: 13px; padding: 14.5px 16px;
  background: var(--row); border-bottom: 0.5px solid var(--sep); cursor: pointer;
  font-size: 15.5px; color: var(--ink);
}
.ld-row:active { background: #E9E9EE; }
.ld-row .ld-ic { width: 26px; height: 26px; flex: 0 0 26px; color: var(--orange-cta); }
.ld-row .ld-main { flex: 1; min-width: 0; }
.ld-row .ld-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ld-row .ld-helper { font-size: 12px; color: var(--ink-2); margin-top: 3px; line-height: 1.4; }
.ld-row .num { min-width: 20px; }

/* ====================== recite surfaces (dark) ========================== */
.recite-top { padding: 0 16px; }
.mode-seg {
  display: flex; background: rgba(1, 22, 30, 0.55); border-radius: 12px; padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.seg-btn {
  flex: 1; border: none; background: transparent; color: #9DB7C4; cursor: pointer;
  font-size: 13.5px; font-weight: 700; padding: 9px 6px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.22s var(--ease-out); position: relative;
}
.seg-btn.on { background: linear-gradient(135deg, #57431A, #3A2F14); color: var(--gold-soft); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.seg-btn.on.self { background: var(--blue); color: #fff; }
.seg-btn .lock { width: 13px; height: 13px; }
.helper-line {
  display: flex; align-items: center; gap: 6px; min-height: 28px;
  font-size: 12px; color: #9DB7C4; padding: 6px 4px 0; line-height: 1.45;
}
.helper-line b { color: var(--gold-soft); font-weight: 700; }

.arabic-stage {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 22px 16px; position: relative; min-height: 0;
}
.arabic-text {
  font-family: var(--quran); color: #fff; text-align: center; direction: rtl;
  line-height: 1.9; font-size: 56px; word-spacing: 0.08em;
}
.arabic-text.sm { font-size: 44px; }
.arabic-text .hl { color: var(--orange); }
.translit {
  margin-top: 14px; font-size: 16px; color: #8FB6C6; letter-spacing: 0.02em; text-align: center;
  animation: fade-in 0.25s var(--ease-out);
}
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* thumbs (recitation self-check, top — like the shipping app) */
.thumbs-row { display: flex; justify-content: center; gap: 22px; padding: 10px 0 0; }
.thumb-btn {
  width: 64px; height: 64px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--teal-btn); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 18px rgba(1, 22, 30, 0.4); transition: transform 0.15s var(--ease-spring), background 0.15s;
}
.thumb-btn svg { width: 30px; height: 30px; }
.thumb-btn:active { transform: scale(0.92); }
.thumb-btn.sel { background: var(--blue-light); transform: scale(1.08); }

/* AI grade banner replaces thumbs in AI mode */
.ai-grade-chip {
  margin: 10px auto 0; display: flex; align-items: center; gap: 8px; width: fit-content;
  background: rgba(1, 22, 30, 0.6); border: 1px solid var(--gold-deep);
  color: var(--gold-soft); border-radius: 999px; padding: 8px 16px; font-size: 12.5px; font-weight: 600;
}

/* bottom control bar */
.ctl-bar {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  padding: 10px 16px 14px;
}
.ctl-bar.spread { justify-content: space-between; padding-inline: 28px; }
.ctl-cluster { display: flex; gap: 16px; }
.cbtn {
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--teal-btn); color: #fff;
  display: flex; align-items: center; justify-content: center; position: relative;
  box-shadow: 0 6px 16px rgba(1, 22, 30, 0.45);
  transition: transform 0.15s var(--ease-spring), background 0.2s, opacity 0.2s;
}
.cbtn svg { width: 26px; height: 26px; }
.cbtn:active { transform: scale(0.92); }
.cbtn:disabled { opacity: 0.38; cursor: default; }
.cbtn.playing { background: var(--blue-light); }
.cbtn.rec-live { background: #C03B3B; animation: rec-pulse 1.3s ease-in-out infinite; }
.cbtn.mic-ai { background: linear-gradient(150deg, #C49A3F, #8A6B25); }
.cbtn.mic-ai::after {
  content: "✦"; position: absolute; top: -3px; inset-inline-end: -3px;
  width: 19px; height: 19px; border-radius: 50%; background: var(--gold-soft); color: #5A4310;
  font-size: 11px; display: flex; align-items: center; justify-content: center; font-weight: 700;
  border: 2px solid var(--navy-700);
}
@keyframes rec-pulse { 50% { box-shadow: 0 0 0 12px rgba(192, 59, 59, 0.18); } }
.play-ring { position: absolute; inset: -3px; pointer-events: none; }
.play-ring circle { fill: none; stroke: var(--blue-light); stroke-width: 3; stroke-linecap: round; }

/* footer pager (practice) */
.footer-bar {
  flex: 0 0 auto; background: var(--navy-950); padding: 12px 18px 30px;
  display: flex; align-items: center; justify-content: center; gap: 26px;
}
.pg-arrow {
  width: 40px; height: 40px; background: transparent; border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pg-arrow svg { width: 22px; height: 22px; }
.pg-arrow:disabled { opacity: 0.25; cursor: default; }
[dir="rtl"] .pg-arrow svg { transform: scaleX(-1); }
.pg-pill {
  background: var(--blue); color: #fff; border: none; cursor: pointer;
  font-size: 15px; font-weight: 700; padding: 8px 18px; border-radius: 10px;
  font-variant-numeric: tabular-nums;
}
.counter-line { text-align: center; font-size: 15px; font-weight: 600; color: #fff; padding: 4px 0 26px; font-variant-numeric: tabular-nums; }

/* ============================= recording panel ========================== */
.rec-overlay {
  position: absolute; inset: 0; z-index: 30; display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(180deg, rgba(1, 17, 24, 0) 0%, rgba(1, 17, 24, 0.55) 30%, rgba(1, 17, 24, 0.92) 70%);
  animation: fade-in 0.2s;
}
.rec-panel {
  background: var(--navy-950); border-radius: 28px 28px 0 0; padding: 22px 24px 42px;
  box-shadow: var(--shadow-sheet); animation: sheet-up 0.38s var(--ease-spring);
}
.rec-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.rec-title { font-size: 14px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 8px; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; background: #FF5A5A; animation: blink 1.1s infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.rec-timer { font-size: 30px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; text-align: center; margin: 6px 0 2px; }
.rec-timer .lim { font-size: 16px; color: #7E99A8; font-weight: 600; }
.rec-hint { text-align: center; font-size: 12px; color: #7E99A8; min-height: 16px; }
.rec-hint.warn { color: var(--khofiy); font-weight: 600; }
.waveform { display: flex; align-items: center; justify-content: center; gap: 3px; height: 64px; margin: 12px 0 6px; }
.wf-bar {
  width: 4.5px; border-radius: 3px; height: 10px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-deep));
  transition: height 0.1s linear;
}
.wf-bar.idle { background: #2A4456; }
.rec-progress { height: 4px; border-radius: 2px; background: #15303F; margin: 10px 2px 18px; overflow: hidden; }
.rec-progress .fill { height: 100%; width: 0%; border-radius: 2px; background: var(--gold); transition: width 0.2s linear, background 0.3s; }
.rec-progress .fill.warn { background: var(--khofiy); }
.rec-actions { display: flex; align-items: center; justify-content: center; gap: 34px; }
.rec-stop {
  width: 76px; height: 76px; border-radius: 50%; border: 5px solid rgba(255, 255, 255, 0.92);
  background: #E5484D; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s var(--ease-spring);
}
.rec-stop:active { transform: scale(0.93); }
.rec-stop .sq { width: 26px; height: 26px; border-radius: 6px; background: #fff; }
.rec-x {
  background: none; border: none; color: #7E99A8; cursor: pointer; font-size: 13px; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 76px;
}
.rec-x .xc {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: center;
}
.rec-x svg { width: 18px; height: 18px; }

/* ============================== bottom sheet ============================ */
.scrim {
  position: absolute; inset: 0; background: rgba(0, 6, 10, 0.55); z-index: 40;
  opacity: 0; pointer-events: none; transition: opacity 0.28s var(--ease-out);
}
.scrim.on { opacity: 1; pointer-events: auto; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 45;
  background: #0A2836; border-radius: 26px 26px 0 0; box-shadow: var(--shadow-sheet);
  transform: translateY(105%); transition: transform 0.42s var(--ease-spring);
  max-height: 88%; display: flex; flex-direction: column; color: #fff;
}
.sheet.on { transform: none; }
.sheet-grab { padding: 10px 0 2px; display: flex; justify-content: center; flex: 0 0 auto; cursor: grab; }
.sheet-grab i { width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.28); }
.sheet-body { overflow-y: auto; padding: 8px 22px 34px; scrollbar-width: none; }
.sheet-body::-webkit-scrollbar { display: none; }
.sheet h3 { margin: 6px 0 4px; font-size: 19px; font-weight: 800; }
.sheet .sh-sub { font-size: 13px; color: #9DB7C4; line-height: 1.5; margin: 0 0 14px; }

/* consent sheet specifics */
.ctx-card {
  background: rgba(1, 22, 30, 0.55); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 12px;
}
.ctx-card .ctx-label { font-size: 11px; color: #7E99A8; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 5px; }
.ctx-card .ctx-arabic { font-family: var(--quran); font-size: 24px; direction: rtl; text-align: center; color: #F3E9D2; line-height: 1.8; margin: 4px 0; }
.ctx-card .ctx-meta { font-size: 12px; color: #9DB7C4; text-align: center; }

.player {
  display: flex; align-items: center; gap: 12px; background: rgba(1, 22, 30, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 10px 14px; margin-bottom: 12px;
}
.player .pp {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--teal-btn); color: #fff; display: flex; align-items: center; justify-content: center;
}
.player .pp svg { width: 19px; height: 19px; }
.player .trk { flex: 1; }
.player .bar { height: 4px; border-radius: 2px; background: #15303F; overflow: hidden; }
.player .bar .fill { height: 100%; width: 0%; background: var(--blue-light); border-radius: 2px; transition: width 0.15s linear; }
.player .tm { display: flex; justify-content: space-between; font-size: 11px; color: #7E99A8; margin-top: 5px; font-variant-numeric: tabular-nums; }

.cost-line {
  display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--gold-soft);
  background: linear-gradient(135deg, #3A2F1466, #2A221066); border: 1px solid rgba(168, 132, 59, 0.5);
  border-radius: 12px; padding: 10px 13px; margin-bottom: 12px; line-height: 1.45;
}
.cost-line.warn { color: var(--khofiy); border-color: rgba(226, 161, 60, 0.6); }
.cost-line svg { width: 17px; height: 17px; flex: 0 0 17px; }

.collap { border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; margin-bottom: 14px; overflow: hidden; }
.collap > button {
  width: 100%; background: none; border: none; color: #B7CBD6; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 13px; font-size: 13px; font-weight: 600; text-align: start;
}
.collap .chev { transition: transform 0.25s; }
.collap.open .chev { transform: rotate(180deg); }
.collap .cbody { display: none; padding: 0 13px 12px; font-size: 12.5px; color: #9DB7C4; line-height: 1.6; }
.collap.open .cbody { display: block; }

.sheet-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }
.btn {
  border: none; border-radius: 14px; cursor: pointer; font-size: 15.5px; font-weight: 700;
  padding: 15px 18px; display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 0.12s var(--ease-spring), filter 0.15s; width: 100%;
}
.btn:active { transform: scale(0.98); filter: brightness(1.12); }
.btn-gold { background: linear-gradient(135deg, #E3BC6B, #C49A3F); color: #2A1F08; }
.btn-blue { background: var(--teal-btn); color: #fff; }
.btn-result { background: var(--btn-result); color: #fff; }
.btn-ghost { background: rgba(255, 255, 255, 0.1); color: #E8EFF4; }
.btn-outline { background: transparent; border: 1.5px solid rgba(255, 255, 255, 0.35); color: #E8EFF4; }
.btn-sm { padding: 10px 14px; font-size: 13.5px; border-radius: 11px; width: auto; }
.foot-note { text-align: center; font-size: 11.5px; color: #7E99A8; margin-top: 11px; line-height: 1.5; }

/* ======================== evaluating / async pill ======================= */
.eval-card { text-align: center; padding: 8px 0 4px; }
.equalizer { display: flex; align-items: center; justify-content: center; gap: 4px; height: 56px; margin: 10px 0 14px; }
.eq-bar {
  width: 5px; border-radius: 3px; height: 22px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-deep));
  box-shadow: 0 0 10px rgba(217, 178, 95, 0.4);
  animation: eqw 1.05s ease-in-out infinite; transform-origin: center;
}
@keyframes eqw { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.stage-text { font-size: 14.5px; font-weight: 700; color: var(--gold-soft); animation: pulse-soft 1.6s ease-in-out infinite; min-height: 20px; }
@keyframes pulse-soft { 50% { opacity: 0.55; } }
.stage-sub { font-size: 12px; color: #7E99A8; margin-top: 7px; line-height: 1.5; }

.float-pill {
  position: absolute; bottom: 96px; left: 50%; transform: translateX(-50%) translateY(160%);
  z-index: 38; display: flex; align-items: center; gap: 9px;
  background: #143140F2; border: 1px solid var(--gold-deep); border-radius: 999px;
  padding: 9px 16px; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  transition: transform 0.4s var(--ease-spring), opacity 0.3s; white-space: nowrap;
  opacity: 0; pointer-events: none;
}
.float-pill.on { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: auto; }
.float-pill .fp-txt { font-size: 12.5px; font-weight: 700; color: var(--gold-soft); }
.mini-eq { display: inline-flex; gap: 2.5px; align-items: center; height: 16px; }
.mini-eq i { width: 3px; height: 12px; border-radius: 2px; background: currentColor; animation: eqw 1s ease-in-out infinite; }
.float-pill .mini-eq i { background: var(--gold-soft); }
.float-pill.done { border-color: var(--correct); }
.float-pill.done .fp-txt { color: var(--correct); }
.float-pill.fail { border-color: var(--jaliy); }
.float-pill.fail .fp-txt { color: var(--jaliy); }

/* iOS-style notification banner */
.notif-banner {
  position: absolute; top: 14px; left: 12px; right: 12px; z-index: 70;
  background: rgba(22, 40, 52, 0.96); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 18px; padding: 12px 14px;
  display: flex; gap: 11px; align-items: center; cursor: pointer;
  transform: translateY(-130%); transition: transform 0.45s var(--ease-spring);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
}
.notif-banner.on { transform: none; }
.notif-banner .nb-ic {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px;
  background: linear-gradient(135deg, #E3BC6B, #8A6B25); display: flex; align-items: center; justify-content: center;
  color: #2A1F08; font-size: 18px; font-weight: 800;
}
.notif-banner .nb-t { font-size: 13px; font-weight: 700; color: #fff; }
.notif-banner .nb-s { font-size: 12px; color: #B7CBD6; margin-top: 1px; line-height: 1.35; }

/* ============================== result screen =========================== */
.result-scroll { padding: 0 16px 110px; }
.result-hero { text-align: center; padding: 6px 0 4px; }
.ctx-line { font-size: 12px; color: #8FB6C6; margin-bottom: 10px; line-height: 1.5; }
.score-wrap { position: relative; width: 168px; height: 168px; margin: 4px auto 8px; }
.score-wrap svg { transform: rotate(-90deg); }
.score-wrap .ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.09); stroke-width: 11; }
.score-wrap .ring-fg { fill: none; stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 1.1s var(--ease-out), stroke 0.4s; }
.score-num {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.score-num .n { font-size: 52px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.score-num .cap { font-size: 11px; color: #7E99A8; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; margin-top: 4px; }
.verdict-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px;
  font-size: 14.5px; font-weight: 800; margin-top: 2px;
}
.subscores { display: flex; gap: 10px; margin: 16px 0 0; }
.sub-card {
  flex: 1; background: rgba(1, 22, 30, 0.5); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px; padding: 11px 13px; text-align: start;
}
.sub-card .sc-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sub-card .sc-name { font-size: 12px; font-weight: 700; color: #B7CBD6; }
.sub-card .sc-val { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.sub-card .sc-cap { font-size: 10.5px; color: #7E99A8; margin-top: 3px; line-height: 1.4; }
.sub-card .sc-bar { height: 4px; border-radius: 2px; background: #15303F; margin-top: 8px; overflow: hidden; }
.sub-card .sc-bar i { display: block; height: 100%; border-radius: 2px; transition: width 0.9s var(--ease-out); }

.rs-card {
  background: rgba(1, 22, 30, 0.5); border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px; padding: 15px 16px; margin-top: 14px; text-align: start;
}
.rs-card h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; color: #9DB7C4; display: flex; align-items: center; gap: 7px; }
.rs-card h4 .cnt { background: rgba(255, 255, 255, 0.1); border-radius: 999px; font-size: 11px; padding: 1px 8px; }

.ayah-review { font-family: var(--quran); font-size: 34px; direction: rtl; text-align: center; line-height: 2.15; color: #DCE9F0; }
.w-chip {
  display: inline-block; padding: 0 7px; margin: 0 2px; border-radius: 10px; cursor: pointer;
  transition: box-shadow 0.15s, background 0.15s;
}
.w-chip.correct { color: #D6EFE2; }
.w-chip.jaliy { background: rgba(229, 96, 94, 0.2); box-shadow: inset 0 0 0 1.5px var(--jaliy); }
.w-chip.khofiy { background: rgba(226, 161, 60, 0.15); box-shadow: inset 0 0 0 1.2px var(--khofiy); }
.w-chip.active { box-shadow: inset 0 0 0 2px var(--gold-soft) !important; }
.legend { display: flex; justify-content: center; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.legend .lg { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #9DB7C4; }
.legend .dot { width: 9px; height: 9px; border-radius: 3px; }
.word-note {
  margin-top: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px; padding: 10px 13px; font-size: 13px; color: #DCE9F0; line-height: 1.55;
  display: flex; gap: 10px; align-items: flex-start; animation: fade-in 0.2s;
}
.word-note .wn-ar { font-family: var(--quran); font-size: 21px; line-height: 1.4; flex: 0 0 auto; }

.err-item { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
.err-item:last-child { border-bottom: none; padding-bottom: 2px; }
.err-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.err-word { font-family: var(--quran); font-size: 24px; color: #F3E9D2; line-height: 1.4; }
.sev-tag {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2.5px 8px; border-radius: 6px; color: #21160A;
}
.sev-tag.jaliy { background: var(--jaliy); color: #2A0908; }
.sev-tag.moderate { background: var(--khofiy); }
.sev-tag.minor { background: #CBB37C; }
.rule-name { font-size: 13px; font-weight: 700; color: var(--khofiy); }
.heard-vs { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; font-size: 13px; }
.hv-box { background: rgba(255, 255, 255, 0.07); border-radius: 9px; padding: 5px 11px; }
.hv-box b { font-weight: 700; }
.hv-box.exp { color: var(--correct); }
.hv-box.got { color: var(--jaliy); }
.hv-arrow { color: #7E99A8; }
.letter-swap { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ls-chip {
  font-family: var(--quran); font-size: 24px; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; line-height: 1;
}
.ls-chip.exp { background: rgba(76, 195, 138, 0.14); color: var(--correct); box-shadow: inset 0 0 0 1px rgba(76, 195, 138, 0.45); }
.ls-chip.got { background: rgba(229, 96, 94, 0.14); color: var(--jaliy); box-shadow: inset 0 0 0 1px rgba(229, 96, 94, 0.45); }
.err-exp { font-size: 13px; color: #B7CBD6; line-height: 1.6; margin-top: 8px; }
.err-teach { margin-top: 9px; font-size: 12px; }
.err-teach a { color: var(--blue-light); font-weight: 600; text-decoration: none; }
.perfect-line { display: flex; align-items: center; gap: 9px; color: var(--correct); font-size: 14px; font-weight: 600; line-height: 1.5; }

.summary-card {
  margin-top: 14px; border-inline-start: 3px solid var(--gold); background: rgba(1, 22, 30, 0.5);
  border-radius: 14px; padding: 13px 16px; font-size: 14px; color: #DCE9F0; line-height: 1.65; font-style: italic;
}
.lang-note { font-size: 11px; color: #7E99A8; font-style: normal; margin-top: 8px; display: flex; align-items: center; gap: 5px; }

.disclaimer-row {
  display: flex; gap: 9px; align-items: flex-start; margin-top: 14px; padding: 11px 13px;
  background: rgba(255, 255, 255, 0.045); border-radius: 12px; font-size: 12px; color: #9DB7C4; line-height: 1.6;
}
.disclaimer-row svg { width: 15px; height: 15px; flex: 0 0 15px; margin-top: 1px; color: #7E99A8; }
.disclaimer-row a { color: var(--blue-light); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.teacher-card {
  margin-top: 12px; border-radius: 16px; overflow: hidden; position: relative;
  background: linear-gradient(120deg, #0A3A52, #0E5070); border: 1px solid rgba(0, 171, 241, 0.3);
  padding: 15px 16px; display: flex; gap: 13px; align-items: center; text-align: start;
}
.teacher-card .tc-av { width: 50px; height: 50px; flex: 0 0 50px; border-radius: 50%; overflow: hidden; background: #0B4F6A; }
.teacher-card .tc-main { flex: 1; min-width: 0; }
.teacher-card .tc-t { font-size: 14px; font-weight: 800; color: #fff; }
.teacher-card .tc-s { font-size: 12px; color: #B9D9E8; line-height: 1.45; margin-top: 2px; }
.teacher-card .tc-cta {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; color: #fff; background: var(--teal-btn);
  border-radius: 999px; padding: 7px 14px; font-size: 12.5px; font-weight: 700; text-decoration: none;
}

.fb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding: 11px 13px; background: rgba(255, 255, 255, 0.045); border-radius: 12px; }
.fb-row .fb-q { font-size: 12.5px; color: #9DB7C4; }
.fb-row .fb-btns { display: flex; gap: 8px; }
.fb-mini {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18);
  background: transparent; color: #B7CBD6; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.fb-mini svg { width: 16px; height: 16px; }
.fb-mini.sel { background: var(--teal-btn); border-color: var(--teal-btn); color: #fff; }

.meta-foot { margin-top: 14px; font-size: 11px; color: #5F7785; text-align: center; line-height: 1.7; }
.meta-foot code { background: rgba(0, 0, 0, 0.3); padding: 1px 6px; border-radius: 5px; font-size: 10.5px; }

.result-cta {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 20;
  padding: 14px 16px 34px; display: flex; gap: 10px;
  background: linear-gradient(180deg, transparent, rgba(2, 30, 43, 0.92) 38%);
}

/* confetti — excellent only */
.confetti { position: absolute; inset: 0; pointer-events: none; z-index: 25; overflow: hidden; }
.confetti i {
  position: absolute; top: -12px; width: 8px; height: 13px; border-radius: 2px; opacity: 0.9;
  animation: conf-fall 2.6s var(--ease-out) forwards;
}
@keyframes conf-fall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(640px) rotate(540deg); opacity: 0; }
}

/* ====================== test result (end of test) ======================= */
.tr-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 26px 30px; text-align: center; }
.tr-lesson { font-size: 19px; font-weight: 700; color: #fff; }
.tr-label { font-size: 17px; color: #C9DAE3; margin-top: 14px; }
.tr-score { font-size: 84px; font-weight: 800; color: #fff; line-height: 1.1; margin: 8px 0; font-variant-numeric: tabular-nums; }
.tr-counts { font-size: 15.5px; color: #DCE9F0; line-height: 1.9; }
.tr-reco { font-size: 13.5px; color: var(--yellow-rec); margin-top: 12px; line-height: 1.55; max-width: 300px; }
.tr-ai-card {
  margin-top: 18px; width: 100%; background: rgba(1, 22, 30, 0.5); border: 1px solid var(--gold-deep);
  border-radius: 16px; padding: 14px 16px; text-align: start;
}
.tr-ai-card .tra-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tr-ai-card .tra-t { font-size: 13px; font-weight: 800; color: var(--gold-soft); display: flex; gap: 6px; align-items: center; }
.tr-ai-card .tra-avg { font-size: 20px; font-weight: 800; }
.tr-ai-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 12.5px; color: #B7CBD6; }
.tr-ai-row:last-child { border-bottom: none; }
.tr-ai-row .ar { font-family: var(--quran); font-size: 17px; color: #E9DFC8; flex: 1; text-align: end; direction: rtl; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-ai-row .sc { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 30px; text-align: end; }

/* ============================== my result =============================== */
.mr-hero { display: flex; gap: 12px; padding: 12px 16px 4px; }
.mr-ring { flex: 0 0 138px; height: 138px; position: relative; }
.mr-ring svg { transform: rotate(-90deg); }
.mr-ring .c-bg { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 9; }
.mr-ring .c-fg { fill: none; stroke: var(--blue-bright); stroke-width: 9; stroke-linecap: round; }
.mr-ring .mr-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.mr-ring .mr-n { font-size: 21px; font-weight: 800; }
.mr-ring .mr-l { font-size: 10.5px; color: #B7CBD6; margin-top: 2px; text-align: center; line-height: 1.3; padding: 0 10px; }
.mr-cards { flex: 1; display: flex; flex-direction: column; gap: 9px; }
.mr-card {
  flex: 1; border: 1.5px solid rgba(255, 255, 255, 0.65); border-radius: 13px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; padding: 7px;
}
.mr-card .v { font-size: 19px; font-weight: 800; }
.mr-card .k { font-size: 10.5px; color: #B7CBD6; margin-top: 2px; text-align: center; }
.mr-card.gold { border-color: var(--gold-deep); }
.mr-card.gold .v { color: var(--gold-soft); }

.mr-tabs { display: flex; gap: 8px; padding: 14px 16px 10px; }
.mr-tab {
  flex: 1; border: 1px solid rgba(255, 255, 255, 0.16); background: transparent; color: #B7CBD6;
  border-radius: 999px; padding: 9px 10px; font-size: 13px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 7px; transition: all 0.18s;
}
.mr-tab.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.mr-tab .bdg { background: var(--orange-cta); color: #fff; font-size: 10px; border-radius: 999px; padding: 1px 7px; font-weight: 800; }

.mr-thead { display: grid; grid-template-columns: 1fr 64px 64px; gap: 6px; padding: 8px 16px; font-size: 11px; color: #9DB7C4; text-align: center; }
.mr-thead :first-child { text-align: start; }
.mr-row {
  display: grid; grid-template-columns: 1fr 64px 64px; gap: 6px; align-items: center;
  padding: 11px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mr-row .ln { font-size: 14px; color: #DCE9F0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.score-bub {
  width: 46px; height: 46px; border-radius: 50%; margin: 0 auto; position: relative;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff;
}
.score-bub.b-full { background: var(--blue-bright); }
.score-bub.b-part { background: var(--orange); }
.score-bub.b-none { background: #787878; }
.score-bub .sb-ai {
  position: absolute; top: -4px; inset-inline-end: -4px; width: 18px; height: 18px; border-radius: 50%;
  background: linear-gradient(135deg, #E3BC6B, #C49A3F); color: #2A1F08; font-size: 10px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--navy-850);
}

/* AI review list */
.att-row {
  display: flex; gap: 12px; align-items: center; padding: 13px 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; transition: background 0.13s;
}
.att-row:active { background: rgba(255, 255, 255, 0.05); }
.att-ic {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 800;
}
.att-ic.ai { background: linear-gradient(135deg, #3A2F14, #2A2210); border: 1px solid var(--gold-deep); color: var(--gold-soft); }
.att-ic.pending { border-style: dashed; }
.att-main { flex: 1; min-width: 0; }
.att-t { font-size: 13.5px; font-weight: 700; color: #ECF3F7; display: flex; align-items: center; gap: 7px; }
.att-s { font-size: 11.5px; color: #8FA9B8; margin-top: 2px; }
.att-ar { font-family: var(--quran); font-size: 17px; color: #C9BD9F; margin-top: 3px; direction: rtl; text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-end { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.att-score { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.status-chip {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 3px 9px; border-radius: 999px;
}
.status-chip.evaluating { background: rgba(217, 178, 95, 0.16); color: var(--gold-soft); border: 1px solid var(--gold-deep); animation: pulse-soft 1.6s infinite; }
.status-chip.ready { background: rgba(76, 195, 138, 0.16); color: var(--correct); border: 1px solid rgba(76, 195, 138, 0.5); }
.status-chip.failed { background: rgba(229, 96, 94, 0.14); color: var(--jaliy); border: 1px solid rgba(229, 96, 94, 0.5); }
.unseen-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--orange-cta); }

.empty-state { text-align: center; padding: 44px 36px; color: #8FA9B8; font-size: 13.5px; line-height: 1.6; }
.empty-state .es-art { margin-bottom: 14px; display: flex; justify-content: center; }

/* ============================== paywall ================================= */
.pw-hero { text-align: center; padding: 4px 0 8px; }
.pw-crest { display: flex; justify-content: center; margin-bottom: 10px; }
.pw-title { font-size: 21px; font-weight: 800; }
.pw-sub { font-size: 13px; color: #9DB7C4; line-height: 1.55; margin-top: 5px; }
.pw-feats { margin: 14px 0; display: flex; flex-direction: column; gap: 9px; }
.pw-feat { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: #DCE9F0; line-height: 1.45; }
.pw-feat svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--gold-soft); margin-top: 1px; }
.plan-row { display: flex; gap: 10px; margin-bottom: 12px; }
.plan-card {
  flex: 1; border: 1.5px solid rgba(255, 255, 255, 0.16); border-radius: 15px; padding: 12px 12px 11px;
  cursor: pointer; position: relative; text-align: center; transition: border-color 0.15s, background 0.15s;
}
.plan-card.on { border-color: var(--gold); background: rgba(217, 178, 95, 0.08); }
.plan-card .pl-tag {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: #2A1F08; font-size: 9px; font-weight: 800; padding: 2px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}
.plan-card .pl-name { font-size: 12px; font-weight: 700; color: #B7CBD6; }
.plan-card .pl-price { font-size: 17px; font-weight: 800; margin-top: 3px; }
.plan-card .pl-per { font-size: 10.5px; color: #7E99A8; margin-top: 2px; }
.pw-links { display: flex; justify-content: center; gap: 18px; margin-top: 13px; font-size: 11.5px; }
.pw-links a { color: #7E99A8; text-decoration: none; }

/* ============================ settings (dark) =========================== */
.set-group { margin: 14px 16px 0; border-radius: 14px; overflow: hidden; background: rgba(1, 22, 30, 0.5); border: 1px solid rgba(255, 255, 255, 0.07); }
.set-label { padding: 16px 18px 7px; font-size: 12px; color: #8FA9B8; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; }
.set-row {
  display: flex; align-items: center; gap: 12px; padding: 13.5px 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.06); cursor: pointer; min-height: 50px;
}
.set-row:first-child { border-top: none; }
.set-row .sr-main { flex: 1; min-width: 0; }
.set-row .sr-t { font-size: 14.5px; color: #ECF3F7; }
.set-row .sr-s { font-size: 12px; color: #8FA9B8; margin-top: 2px; line-height: 1.45; }
.set-row .sr-val { font-size: 13.5px; color: #8FA9B8; }
.switch { width: 50px; height: 30px; border-radius: 16px; background: #39505E; position: relative; cursor: pointer; transition: background 0.2s; flex: 0 0 50px; border: none; }
.switch::after {
  content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 26px; height: 26px; border-radius: 50%;
  background: #fff; transition: transform 0.22s var(--ease-spring); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.switch.on { background: var(--correct); }
.switch.on::after { transform: translateX(20px); }
[dir="rtl"] .switch.on::after { transform: translateX(-20px); }
.checks-meter { display: flex; gap: 6px; }
.checks-meter i { width: 26px; height: 8px; border-radius: 4px; background: #39505E; }
.checks-meter i.full { background: var(--gold); }

/* mode choice rows (settings) */
.mode-row { display: flex; align-items: center; gap: 12px; padding: 13.5px 15px; border-top: 1px solid rgba(255,255,255,0.06); cursor: pointer; }
.mode-row .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #56707E; flex: 0 0 22px; display: flex; align-items: center; justify-content: center; }
.mode-row.on .radio { border-color: var(--gold); }
.mode-row.on .radio::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); }

/* ============================== onboarding ============================== */
.scr.ob { background: #12354B; }
.ob-skip { position: absolute; top: 62px; inset-inline-end: 20px; z-index: 10; background: none; border: none; color: #9DB7C4; font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px; }
.ob-slides { flex: 1; display: flex; transition: transform 0.45s var(--ease-spring); }
.ob-slide { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 34px 30px; text-align: center; }
.ob-art { margin-bottom: 30px; }
.ob-title { font-size: 23px; font-weight: 800; color: #fff; line-height: 1.3; }
.ob-desc { font-size: 14.5px; color: #B9D0DD; line-height: 1.65; margin-top: 11px; max-width: 300px; }
.ob-foot { flex: 0 0 auto; padding: 10px 28px 46px; }
.dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 20px; }
.dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); transition: all 0.25s; }
.dots i.on { background: #fff; width: 22px; border-radius: 5px; }
/* mocked mini result card on slide 2 */
.ob-mini {
  background: rgba(1, 22, 30, 0.55); border: 1px solid var(--gold-deep); border-radius: 18px; padding: 16px 18px;
  width: 100%; max-width: 290px; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.4);
}
.ob-mini .om-ar { font-family: var(--quran); font-size: 26px; direction: rtl; color: #F3E9D2; line-height: 2; }
.ob-mini .om-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ob-mini .om-score { font-size: 30px; font-weight: 800; color: var(--khofiy); }
.ob-mini .om-note { font-size: 11px; color: #B7CBD6; text-align: start; line-height: 1.5; flex: 1; }

/* trial gift count */
.gift-num { font-size: 64px; font-weight: 800; color: var(--gold-soft); line-height: 1; }

/* ============================== coachmarks ============================== */
.coach-scrim { position: absolute; inset: 0; z-index: 80; background: rgba(0, 5, 9, 0.72); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.coach-scrim.on { opacity: 1; pointer-events: auto; }
.coach-hl {
  position: absolute; z-index: 81; border-radius: 16px; pointer-events: none;
  box-shadow: 0 0 0 4px rgba(232, 205, 145, 0.85), 0 0 0 9999px rgba(0, 5, 9, 0.72);
  transition: all 0.4s var(--ease-spring); display: none;
}
.coach-card {
  position: absolute; z-index: 82; background: #fff; color: #1C2A33; border-radius: 16px; padding: 14px 16px;
  width: 270px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5); display: none;
}
.coach-card .cc-step { font-size: 10.5px; font-weight: 800; color: var(--gold-deep); letter-spacing: 0.08em; text-transform: uppercase; }
.coach-card .cc-t { font-size: 15px; font-weight: 800; margin-top: 4px; }
.coach-card .cc-d { font-size: 12.5px; color: #4A5B66; line-height: 1.55; margin-top: 5px; }
.coach-card .cc-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.coach-card .cc-skip { background: none; border: none; color: #8395A1; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 4px; }
.coach-card .cc-next { background: var(--teal-btn); color: #fff; border: none; border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 700; cursor: pointer; }

/* ============================== toast =================================== */
.toast {
  position: absolute; bottom: 110px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(16, 32, 42, 0.96); color: #ECF3F7; border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px; padding: 11px 18px; border-radius: 18px; z-index: 75; opacity: 0;
  transition: all 0.3s var(--ease-out); pointer-events: none; max-width: 330px; text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); line-height: 1.45;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================ quit confirm (alert) ====================== */
.alert-box {
  position: absolute; inset: 0; z-index: 85; display: none; align-items: center; justify-content: center;
  background: rgba(0, 5, 9, 0.5);
}
.alert-box.on { display: flex; animation: fade-in 0.18s; }
.alert-inner {
  width: 280px; background: rgba(36, 48, 58, 0.98); border-radius: 16px; overflow: hidden; text-align: center;
  backdrop-filter: blur(20px);
}
.alert-inner .al-t { font-size: 16px; font-weight: 700; color: #fff; padding: 18px 18px 4px; }
.alert-inner .al-d { font-size: 13px; color: #C5D2DA; padding: 0 18px 16px; line-height: 1.5; }
.alert-inner .al-btns { display: flex; border-top: 0.5px solid rgba(255, 255, 255, 0.16); }
.alert-inner .al-btns button {
  flex: 1; background: none; border: none; padding: 13px; font-size: 15.5px; color: var(--blue-light); cursor: pointer;
}
.alert-inner .al-btns button + button { border-inline-start: 0.5px solid rgba(255, 255, 255, 0.16); }
.alert-inner .al-btns .danger { color: #FF6B6B; font-weight: 600; }

/* =========================== reduced motion ============================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
}

/* =========================== small screens ============================== */
@media (max-width: 860px) {
  .proto { flex-direction: column; }
  .rail { width: auto; flex: none; position: static; max-height: none; border-inline-end: none; border-bottom: 1px solid #1B2733; }
  .stage { padding: 20px 8px 40px; }
  .device { position: static; }
}