/* ============================================================
   CALM DEPTH — Sakina Unified Design System
   "A prayer rug unrolled in a quiet room, lit by candlelight."
   --------------------------------------------------------------
   Dark navy → black base, emerald + soft gold accents, calligraphy.
   Inspired by Apple polish, Nike emotion, Tesla restraint.
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root,
:root:has(*) {
  /* — Surfaces (deep navy → black gradient) — */
  --cd-ink-0:      #02060d;   /* deepest void */
  --cd-ink-1:      #060d1a;   /* base bg */
  --cd-ink-2:      #0a1424;   /* navy bg */
  --cd-ink-3:      #0e1b30;   /* slightly lighter navy */

  /* — Glass surfaces — */
  --cd-glass-1:    rgba(255,255,255,0.035);
  --cd-glass-2:    rgba(255,255,255,0.06);
  --cd-glass-3:    rgba(255,255,255,0.10);
  --cd-glass-edge: rgba(255,255,255,0.08);
  --cd-glass-edge-strong: rgba(255,255,255,0.14);

  /* — Text — */
  --cd-text-1:     rgba(255, 250, 240, 0.96); /* off-white */
  --cd-text-2:     rgba(255, 250, 240, 0.66); /* secondary */
  --cd-text-3:     rgba(255, 250, 240, 0.40); /* muted */
  --cd-text-4:     rgba(255, 250, 240, 0.22); /* faint */

  /* — Accents — */
  --cd-emerald:        #1ab394;   /* slightly brighter for dark bg */
  --cd-emerald-deep:   #0d6b5e;
  --cd-emerald-soft:   rgba(26, 179, 148, 0.18);
  --cd-emerald-glow:   rgba(26, 179, 148, 0.45);
  --cd-gold:           #c9a84c;
  --cd-gold-soft:      rgba(201, 168, 76, 0.14);
  --cd-gold-glow:      rgba(201, 168, 76, 0.30);

  /* — Prayer-time tint overlays (very subtle) — */
  --cd-tint-fajr:    rgba(80, 130, 200, 0.06);   /* cool blue */
  --cd-tint-dhuhr:   rgba(255, 255, 255, 0.00);  /* neutral */
  --cd-tint-asr:     rgba(220, 160, 90, 0.04);   /* warm */
  --cd-tint-maghrib: rgba(255, 150, 60, 0.07);   /* golden */
  --cd-tint-isha:    rgba(20, 25, 60, 0.08);     /* deep */

  /* — Shadows / glows — */
  --cd-shadow-soft:  0 8px 32px rgba(0,0,0,0.45);
  --cd-shadow-deep:  0 24px 64px rgba(0,0,0,0.60);
  --cd-glow-emerald: 0 0 32px rgba(26,179,148,0.18), 0 0 80px rgba(26,179,148,0.08);
  --cd-glow-gold:    0 0 24px rgba(201,168,76,0.14);
  --cd-inset-edge:   inset 0 1px 0 rgba(255,255,255,0.06);

  /* — Radii — */
  --cd-r-xs: 6px;
  --cd-r-sm: 10px;
  --cd-r-md: 14px;
  --cd-r-lg: 20px;
  --cd-r-xl: 28px;
  --cd-r-pill: 999px;

  /* — Motion (calm, slow, intentional) — */
  --cd-ease-out:    cubic-bezier(0.22, 1, 0.36, 1);     /* gentle expo */
  --cd-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);     /* balanced */
  --cd-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);   /* soft overshoot */
  --cd-dur-quick:  240ms;
  --cd-dur-normal: 480ms;
  --cd-dur-slow:   800ms;
  --cd-dur-breath: 5200ms;

  /* — Spacing scale — */
  --cd-sp-1: 4px;
  --cd-sp-2: 8px;
  --cd-sp-3: 12px;
  --cd-sp-4: 16px;
  --cd-sp-5: 20px;
  --cd-sp-6: 24px;
  --cd-sp-8: 32px;
  --cd-sp-10: 40px;
  --cd-sp-12: 48px;
  --cd-sp-16: 64px;
}

/* Force dark mode app-wide so legacy variables match Calm Depth */
:root {
  --bg: var(--cd-ink-1);
  --surface: var(--cd-ink-2);
  --surface-el: var(--cd-ink-3);
  --text: var(--cd-text-1);
  --text2: var(--cd-text-2);
  --text3: var(--cd-text-3);
  --emerald: var(--cd-emerald);
  --emerald-lt: var(--cd-emerald-soft);
  --gold: var(--cd-gold);
  --gold-lt: var(--cd-gold-soft);
  --border: var(--cd-glass-edge);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-md: var(--cd-shadow-soft);
  --shadow-lg: var(--cd-shadow-deep);
}

/* Disable the prefers-color-scheme dark override so we stay consistent */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--cd-ink-1);
    --surface: var(--cd-ink-2);
    --surface-el: var(--cd-ink-3);
    --text: var(--cd-text-1);
    --text2: var(--cd-text-2);
    --text3: var(--cd-text-3);
    --emerald: var(--cd-emerald);
    --gold: var(--cd-gold);
    --border: var(--cd-glass-edge);
  }
}

/* ============================================================
   2. GLOBAL APP SHELL — phone frame + screen container
   ============================================================ */
body {
  background: #000 !important;
  color: var(--cd-text-1);
}

.phone-screen {
  background: var(--cd-ink-1) !important;
}

/* Dark scrollbars everywhere */
.screen,
.v5-content,
.surah-list,
.quran-verses,
.stories-list,
.profile-screen,
.qibla-screen {
  scrollbar-width: none;
}
.screen::-webkit-scrollbar,
.v5-content::-webkit-scrollbar,
.surah-list::-webkit-scrollbar,
.quran-verses::-webkit-scrollbar,
.stories-list::-webkit-scrollbar { width: 0; height: 0; }

/* Default screen background = Calm Depth gradient */
.screen {
  background: linear-gradient(175deg, var(--cd-ink-2) 0%, var(--cd-ink-1) 45%, var(--cd-ink-0) 100%) !important;
  color: var(--cd-text-1);
}

/* ============================================================
   3. DYNAMIC ATMOSPHERE — persistent base layer
   Single instance attached to .phone-screen at runtime
   ============================================================ */
.cd-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* Center glow behind main content */
.cd-atmosphere__glow {
  position: absolute;
  top: 18%;
  left: 50%;
  width: 520px;
  height: 520px;
  transform: translate(-50%, -20%);
  background:
    radial-gradient(circle, rgba(26,179,148,0.10) 0%, rgba(26,179,148,0.04) 30%, transparent 65%);
  filter: blur(2px);
  animation: cdGlowBreathe var(--cd-dur-breath) ease-in-out infinite;
}
@keyframes cdGlowBreathe {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -20%) scale(1); }
  50%      { opacity: 1.0; transform: translate(-50%, -20%) scale(1.06); }
}

/* Prayer-time tint overlay — applied to <body data-prayer-time="..."> */
.cd-atmosphere__tint {
  position: absolute;
  inset: 0;
  background: var(--cd-tint-now, transparent);
  transition: background 1800ms var(--cd-ease-in-out);
  mix-blend-mode: screen;
  opacity: 0.85;
}

body[data-prayer-time="fajr"]    { --cd-tint-now: var(--cd-tint-fajr); }
body[data-prayer-time="dhuhr"]   { --cd-tint-now: var(--cd-tint-dhuhr); }
body[data-prayer-time="asr"]     { --cd-tint-now: var(--cd-tint-asr); }
body[data-prayer-time="maghrib"] { --cd-tint-now: var(--cd-tint-maghrib); }
body[data-prayer-time="isha"]    { --cd-tint-now: var(--cd-tint-isha); }

/* Floating particle field */
.cd-atmosphere__particles {
  position: absolute;
  inset: 0;
}
.cd-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  box-shadow: 0 0 4px rgba(255,255,255,0.4);
  animation: cdParticleFloat var(--dur, 18s) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}
.cd-particle--lg { width: 3px; height: 3px; background: rgba(255,255,255,0.7); }
.cd-particle--gold { background: rgba(201,168,76,0.5); box-shadow: 0 0 6px rgba(201,168,76,0.4); }
@keyframes cdParticleFloat {
  0%   { transform: translateY(20px); opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { transform: translateY(-120vh); opacity: 0; }
}

/* Twinkling stars (still ones) */
.cd-star {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(255,255,255,0.55);
  animation: cdTwinkle var(--dur, 4s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}
.cd-star--lg { width: 3px; height: 3px; background: rgba(255,255,255,0.75); }
@keyframes cdTwinkle {
  0%, 100% { opacity: 0.25; }
  50%      { opacity: 0.95; }
}

/* Subtle Islamic geometric pattern overlay */
.cd-atmosphere__pattern {
  position: absolute;
  inset: 0;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><g fill='none' stroke='%23ffffff' stroke-width='0.6'><path d='M80 10 L150 80 L80 150 L10 80 Z'/><path d='M80 30 L130 80 L80 130 L30 80 Z'/><circle cx='80' cy='80' r='28'/><path d='M80 52 L108 80 L80 108 L52 80 Z'/><path d='M40 40 L120 40 L120 120 L40 120 Z'/></g></svg>");
  background-size: 320px 320px;
  mix-blend-mode: screen;
}

/* Vignette to soften edges */
.cd-atmosphere__vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}

/* Make screens render above the atmosphere */
.screen { position: absolute; z-index: 1; }
.cd-atmosphere { z-index: 0; }

/* Reduced motion: stop heavy animations */
@media (prefers-reduced-motion: reduce) {
  .cd-particle, .cd-star, .cd-atmosphere__glow { animation: none; }
}

/* ============================================================
   4. UNIVERSAL TYPOGRAPHY POLISH
   ============================================================ */
.screen h1, .screen h2, .screen h3, .screen h4 {
  color: var(--cd-text-1);
  letter-spacing: -0.02em;
}
.screen p, .screen span, .screen li {
  color: var(--cd-text-2);
}

/* ============================================================
   5. UNIVERSAL HEADER (back-button + title pattern)
   ============================================================ */
.screen-header {
  background: transparent !important;
  border-bottom: 1px solid var(--cd-glass-edge) !important;
  padding: 16px 20px 14px !important;
  position: relative;
  z-index: 2;
}
.screen-header__title {
  font-family: var(--f-display);
  color: var(--cd-text-1) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.screen-header__sub {
  color: var(--cd-text-3) !important;
  font-size: 12px;
  margin-top: 2px;
}

.back-btn,
.icon-btn {
  background: var(--cd-glass-1) !important;
  color: var(--cd-text-2) !important;
  border: 1px solid var(--cd-glass-edge) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  transition: all var(--cd-dur-quick) var(--cd-ease-out);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.back-btn:hover, .icon-btn:hover {
  background: var(--cd-glass-2) !important;
  border-color: var(--cd-glass-edge-strong) !important;
  color: var(--cd-text-1) !important;
}
.back-btn:active, .icon-btn:active {
  transform: scale(0.92);
}

/* ============================================================
   6. UNIVERSAL TAB BAR
   ============================================================ */
.tab-bar {
  background: linear-gradient(180deg, rgba(6,13,26,0.55) 0%, rgba(2,6,13,0.92) 80%) !important;
  border-top: 1px solid var(--cd-glass-edge) !important;
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  z-index: 10;
}
.tab-bar::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(26,179,148,0.30), transparent);
}
.tab {
  color: var(--cd-text-3) !important;
  background: none !important;
  font-family: var(--f-body);
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  transition: color var(--cd-dur-quick) var(--cd-ease-out);
  position: relative;
}
.tab span { color: inherit !important; }
.tab.active { color: var(--cd-emerald) !important; }
.tab.active::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cd-emerald-soft) 0%, transparent 70%);
  z-index: -1;
}

/* ============================================================
   7. UNIVERSAL CARD / GLASS COMPONENTS
   ============================================================ */
.cd-card,
.cd-glass {
  background: var(--cd-glass-1);
  border: 1px solid var(--cd-glass-edge);
  border-radius: var(--cd-r-md);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--cd-inset-edge), 0 4px 24px rgba(0,0,0,0.25);
  transition: all var(--cd-dur-quick) var(--cd-ease-out);
}
.cd-card:hover {
  background: var(--cd-glass-2);
  border-color: var(--cd-glass-edge-strong);
}

.cd-card--gold {
  border-color: rgba(201,168,76,0.18);
  box-shadow: var(--cd-inset-edge), 0 4px 24px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(201,168,76,0.04);
}
.cd-card--emerald {
  border-color: rgba(26,179,148,0.20);
  box-shadow: var(--cd-inset-edge), 0 0 24px rgba(26,179,148,0.06);
}

/* ============================================================
   8. CALLIGRAPHY MOTIF — used as decoration
   ============================================================ */
.cd-calligraphy {
  font-family: var(--f-arabic), 'Amiri', serif;
  color: rgba(255,250,240,0.06);
  user-select: none;
  pointer-events: none;
}
.cd-calligraphy--accent {
  color: rgba(201,168,76,0.10);
}
.cd-calligraphy--watermark {
  position: absolute;
  font-size: 220px;
  line-height: 1;
  letter-spacing: -0.05em;
  filter: blur(0.5px);
}

/* Geometric ornament divider */
.cd-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0;
}
.cd-divider::before,
.cd-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cd-glass-edge-strong), transparent);
}
.cd-divider__star {
  width: 10px; height: 10px;
  background: var(--cd-gold);
  opacity: 0.4;
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(201,168,76,0.35);
}

/* ============================================================
   9. HOME — refined V5 with halo progress ring
   ============================================================ */
.home--v5 {
  background: transparent !important; /* atmosphere shows through */
}

/* Hide the legacy stars/glow — atmosphere replaces them */
.home--v5 .v5-stars { display: none; }
.home--v5 .v5-glow { display: none; }

/* Greeting refinements */
.v5-greeting__salaam {
  font-size: 24px !important;
  letter-spacing: -0.015em !important;
  color: var(--cd-text-1) !important;
}
.v5-greeting__progress {
  color: var(--cd-text-3) !important;
  font-size: 12px !important;
  letter-spacing: 0.01em;
}

/* Hero — refined hierarchy */
.v5-hero {
  position: relative;
  padding: 28px 0 8px;
  margin-bottom: 28px !important;
}

.v5-hero__label {
  color: var(--cd-emerald) !important;
  letter-spacing: 0.20em !important;
  font-size: 10px !important;
  margin-bottom: 14px !important;
  display: inline-block;
  position: relative;
}
.v5-hero__label::before,
.v5-hero__label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 16px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cd-emerald-soft));
}
.v5-hero__label::before { right: calc(100% + 10px); transform: scaleX(-1); }
.v5-hero__label::after  { left: calc(100% + 10px); }

/* Halo progress ring around prayer name + time */
.cd-halo {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 280px;
  transform: translate(-50%, -54%);
  pointer-events: none;
  z-index: 0;
}
.cd-halo__ring,
.cd-halo__progress {
  fill: none;
  stroke-linecap: round;
}
.cd-halo__ring {
  stroke: rgba(255,255,255,0.06);
  stroke-width: 1;
}
.cd-halo__progress {
  stroke: var(--cd-emerald);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 8px var(--cd-emerald-glow));
  transition: stroke-dashoffset 1200ms var(--cd-ease-out);
}
.cd-halo__inner {
  fill: url(#cdHaloGradient);
  opacity: 0.5;
}
/* Animated breathing glow inside halo */
.cd-halo__breath {
  fill: none;
  stroke: var(--cd-emerald);
  stroke-width: 0.5;
  opacity: 0.18;
  animation: cdHaloBreath 4.5s ease-in-out infinite;
}
@keyframes cdHaloBreath {
  0%, 100% { opacity: 0.10; transform-origin: center; }
  50%      { opacity: 0.28; }
}

.v5-hero__name {
  position: relative;
  z-index: 1;
  font-size: 60px !important;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.78) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 12px rgba(255,255,255,0.06));
}
.v5-hero__time {
  position: relative;
  z-index: 1;
  color: var(--cd-text-2) !important;
  font-size: 15px !important;
  margin-top: 6px !important;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.v5-countdown { position: relative; z-index: 1; margin-top: 24px !important; gap: 8px !important; }
.v5-cd__num {
  color: var(--cd-text-1) !important;
  font-size: 26px !important;
  font-feature-settings: 'tnum';
}
.v5-cd__label {
  color: var(--cd-text-4) !important;
  letter-spacing: 0.16em !important;
  font-size: 8px !important;
}
.v5-cd__sep { color: var(--cd-text-4) !important; }

/* Mark-as-Prayed CTA — premium glow */
.v5-cta {
  position: relative;
  background: linear-gradient(180deg, var(--cd-emerald) 0%, var(--cd-emerald-deep) 100%) !important;
  box-shadow:
    0 8px 28px rgba(26,179,148,0.35),
    0 0 50px rgba(26,179,148,0.18),
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.20) !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em;
  margin-top: 26px !important;
  padding: 15px 38px !important;
  overflow: hidden;
  z-index: 1;
}
.v5-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.20) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 600ms var(--cd-ease-out);
}
.v5-cta:hover::before { transform: translateX(100%); }
.v5-cta:active { transform: scale(0.96); }

/* Shimmer pulse when a prayer is marked complete */
.v5-cta--shimmer::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: radial-gradient(circle at center, rgba(26,179,148,0.6), transparent 60%);
  animation: cdShimmerPulse 700ms var(--cd-ease-out);
  pointer-events: none;
}
@keyframes cdShimmerPulse {
  0%   { opacity: 0.9; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* Prayer dots — refined glass */
.v5-tracker__row { gap: 18px !important; }
.v5-dot__circle {
  background: var(--cd-glass-1) !important;
  border-color: var(--cd-glass-edge) !important;
  width: 40px !important;
  height: 40px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.v5-dot__name {
  color: var(--cd-text-3) !important;
  font-size: 10px !important;
  letter-spacing: 0.04em;
}
.v5-dot--done .v5-dot__circle {
  border-color: var(--cd-emerald) !important;
  box-shadow: 0 0 16px rgba(26,179,148,0.30);
}
.v5-dot--done .v5-dot__fill { background: var(--cd-emerald) !important; }
.v5-dot--done .v5-dot__name { color: var(--cd-emerald) !important; }
.v5-dot--current .v5-dot__circle {
  border-color: var(--cd-emerald) !important;
  box-shadow: 0 0 0 4px rgba(26,179,148,0.10), 0 0 20px rgba(26,179,148,0.18);
}
.v5-dot--current .v5-dot__name { color: var(--cd-emerald) !important; }

.v5-tracker__msg {
  color: var(--cd-text-3) !important;
  font-style: italic;
  font-size: 12px !important;
  margin-top: 16px !important;
}

/* Today's Dua / Verse card — premium glass */
.v5-card {
  background: var(--cd-glass-1) !important;
  border: 1px solid var(--cd-glass-edge) !important;
  padding: 18px 20px !important;
  border-radius: var(--cd-r-md) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  box-shadow: var(--cd-inset-edge), 0 4px 28px rgba(0,0,0,0.30);
  position: relative;
  overflow: hidden;
}
.v5-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cd-emerald-soft), transparent);
}
.v5-card:hover {
  background: var(--cd-glass-2) !important;
  border-color: var(--cd-glass-edge-strong) !important;
}
.v5-card__icon {
  background: linear-gradient(135deg, rgba(26,179,148,0.20), rgba(26,179,148,0.08)) !important;
  color: var(--cd-emerald) !important;
  width: 38px !important;
  height: 38px !important;
  border: 1px solid rgba(26,179,148,0.16);
  box-shadow: 0 0 16px rgba(26,179,148,0.10);
}
.v5-card__label {
  color: var(--cd-emerald) !important;
  letter-spacing: 0.10em !important;
}
.v5-card__title {
  color: var(--cd-text-1) !important;
  font-family: var(--f-display) !important;
  font-weight: 600;
}
.v5-card__arrow { color: var(--cd-text-3) !important; }

/* All-prayers-complete state polish */
.v5-hero--complete .v5-hero__name {
  background: linear-gradient(135deg, var(--cd-emerald), var(--cd-gold)) !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(201,168,76,0.18));
}


/* ============================================================
   10. QURAN LIST — dark glass with calligraphy hero
   ============================================================ */
.surah-list-screen {
  background: transparent !important;
  position: relative;
}
.surah-list-screen::before {
  content: 'الْقُرْآنُ';
  font-family: var(--f-arabic);
  position: absolute;
  top: 70px;
  right: -30px;
  font-size: 220px;
  line-height: 1;
  color: rgba(255,250,240,0.025);
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.surah-search-wrap {
  position: relative;
  z-index: 2;
  margin: 16px 20px !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.surah-search {
  background: var(--cd-glass-1) !important;
  border: 1px solid var(--cd-glass-edge) !important;
  color: var(--cd-text-1) !important;
  border-radius: var(--cd-r-md) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 16px 12px 42px !important;
}
.surah-search::placeholder { color: var(--cd-text-4) !important; }
.surah-search:focus {
  border-color: var(--cd-emerald) !important;
  box-shadow: 0 0 0 3px var(--cd-emerald-soft) !important;
  outline: none;
}
.surah-search__icon { color: var(--cd-text-3) !important; }

.surah-list {
  position: relative;
  z-index: 1;
  padding: 0 16px 100px !important;
}

/* Premium glass surah card */
.surah-item {
  background: var(--cd-glass-1) !important;
  border: 1px solid var(--cd-glass-edge) !important;
  border-radius: var(--cd-r-md) !important;
  padding: 16px !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--cd-dur-quick) var(--cd-ease-out) !important;
  position: relative;
  overflow: hidden;
}
.surah-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--cd-emerald), transparent);
  opacity: 0;
  transition: opacity var(--cd-dur-quick) var(--cd-ease-out);
}
.surah-item:hover {
  background: var(--cd-glass-2) !important;
  border-color: var(--cd-glass-edge-strong) !important;
  transform: translateX(2px);
}
.surah-item:hover::before { opacity: 1; }

.surah-item__num {
  width: 38px !important;
  height: 38px !important;
  background: linear-gradient(135deg, rgba(26,179,148,0.20), rgba(26,179,148,0.08)) !important;
  color: var(--cd-emerald) !important;
  border: 1px solid rgba(26,179,148,0.18) !important;
  font-family: var(--f-display) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 16px rgba(26,179,148,0.10);
}

.surah-item__info { flex: 1; min-width: 0; }
.surah-item__name {
  font-family: var(--f-display) !important;
  color: var(--cd-text-1) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
.surah-item__meta {
  color: var(--cd-text-3) !important;
  font-size: 12px !important;
  margin-top: 2px;
}
.surah-item__ar {
  font-family: var(--f-arabic) !important;
  color: var(--cd-text-2) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  opacity: 0.8;
  flex-shrink: 0;
}

/* ============================================================
   11. QURAN READER — dark mode parchment alternative
   ============================================================ */
.quran-screen {
  background: linear-gradient(175deg, var(--cd-ink-2) 0%, var(--cd-ink-1) 50%, var(--cd-ink-0) 100%) !important;
  position: relative;
}
.quran-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(201,168,76,0.10), transparent),
    radial-gradient(1px 1px at 80% 70%, rgba(201,168,76,0.08), transparent),
    radial-gradient(1px 1px at 60% 40%, rgba(255,255,255,0.06), transparent);
  pointer-events: none;
  z-index: 0;
}

.quran-screen .screen-header {
  background: linear-gradient(180deg, rgba(26,179,148,0.04) 0%, transparent 100%) !important;
  border-bottom: 1px solid var(--cd-glass-edge) !important;
}
.quran-screen .screen-header__title {
  color: var(--cd-text-1) !important;
  font-family: var(--f-display) !important;
}
.quran-screen .screen-header__sub {
  color: var(--cd-text-3) !important;
}

.quran-screen .surah-play-btn {
  background: linear-gradient(135deg, var(--cd-emerald), var(--cd-emerald-deep)) !important;
  box-shadow: 0 4px 16px rgba(26,179,148,0.30), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  color: white !important;
  border: none !important;
}

.quran-tabs {
  background: var(--cd-glass-1) !important;
  border-bottom: 1px solid var(--cd-glass-edge) !important;
  padding: 8px 16px !important;
  position: relative;
  z-index: 1;
  display: flex;
  gap: 4px;
}
.qtab {
  background: transparent !important;
  color: var(--cd-text-3) !important;
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 13px;
  padding: 10px 14px !important;
  border-radius: var(--cd-r-sm);
  transition: all var(--cd-dur-quick) var(--cd-ease-out);
  border: none;
  flex: 1;
}
.qtab:hover:not(.active) { color: var(--cd-text-2) !important; background: var(--cd-glass-1); }
.qtab.active {
  color: var(--cd-emerald) !important;
  background: var(--cd-emerald-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(26,179,148,0.20);
}
.qtab.active::after { display: none !important; }
.qtab__lock { color: var(--cd-gold) !important; opacity: 0.85; }

.quran-verses {
  background: transparent !important;
  position: relative;
  z-index: 1;
  padding: 16px !important;
  padding-bottom: 100px !important;
}

/* Ayah rendering */
.ayah {
  background: var(--cd-glass-1);
  border: 1px solid var(--cd-glass-edge) !important;
  border-radius: var(--cd-r-md);
  padding: 20px !important;
  margin-bottom: 14px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all var(--cd-dur-quick) var(--cd-ease-out);
}
.ayah:hover {
  background: var(--cd-glass-2);
  border-color: var(--cd-glass-edge-strong) !important;
  margin: 0 0 14px 0 !important;
  padding: 20px !important;
}
.ayah__num {
  background: linear-gradient(135deg, rgba(201,168,76,0.20), rgba(201,168,76,0.08)) !important;
  color: var(--cd-gold) !important;
  border: 1px solid rgba(201,168,76,0.18) !important;
  font-family: var(--f-display) !important;
}
.ayah__arabic {
  font-family: var(--f-arabic) !important;
  color: var(--cd-text-1) !important;
  line-height: 2.2 !important;
  text-shadow: 0 0 24px rgba(255,250,240,0.05);
}
.ayah__translation {
  color: var(--cd-text-2) !important;
  line-height: 1.7;
}
.ayah__play-btn {
  background: var(--cd-glass-2) !important;
  color: var(--cd-emerald) !important;
  border: 1px solid var(--cd-glass-edge) !important;
}
.ayah__play-btn:hover {
  background: var(--cd-emerald-soft) !important;
  border-color: rgba(26,179,148,0.30) !important;
}
.ayah__play-btn.playing {
  background: linear-gradient(135deg, var(--cd-emerald), var(--cd-emerald-deep)) !important;
  color: white !important;
  box-shadow: 0 0 20px rgba(26,179,148,0.40);
}

/* Word-by-word highlighting in dark mode */
.ayah--playing .qw:not(.qw--active):not(.qw-end) { color: var(--cd-text-3) !important; }
.ayah--playing .qw--active {
  color: var(--cd-emerald) !important;
  text-shadow: 0 0 12px var(--cd-emerald-glow);
}

.quran-loading {
  color: var(--cd-text-3);
  text-align: center;
  padding: 60px 20px;
}
.loading-pulse {
  background: var(--cd-emerald) !important;
}

/* ============================================================
   12. STORIES — dark cinematic
   ============================================================ */
.stories-screen {
  background: transparent !important;
  position: relative;
  padding-bottom: 90px;
  overflow-y: auto;
}
.stories-screen::before {
  content: 'قَصَص';
  font-family: var(--f-arabic);
  position: absolute;
  top: 16px;
  right: 14px;
  font-size: 110px;
  color: rgba(201,168,76,0.05);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.stories-header {
  position: relative;
  z-index: 1;
  padding: 32px 24px 24px !important;
}
.stories-header__title {
  font-family: var(--f-display) !important;
  color: var(--cd-text-1) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}
.stories-header__subtitle {
  color: var(--cd-text-3) !important;
  font-size: 13px;
  margin-top: 4px;
  font-style: italic;
}

.stories-featured {
  margin: 0 20px 24px !important;
  position: relative;
  z-index: 1;
}
.stories-featured .story-card,
.stories-featured > * {
  background: linear-gradient(135deg, rgba(26,179,148,0.12) 0%, rgba(10,20,36,0.8) 60%) !important;
  border: 1px solid rgba(26,179,148,0.20) !important;
  box-shadow: 0 8px 36px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.06) !important;
  border-radius: var(--cd-r-lg) !important;
  position: relative;
  overflow: hidden;
}

.stories-section {
  position: relative;
  z-index: 1;
  padding: 0 20px;
}
.stories-section__title {
  color: var(--cd-text-3) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  margin-bottom: 12px !important;
  font-weight: 600;
}
.stories-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stories-list > * {
  background: var(--cd-glass-1) !important;
  border: 1px solid var(--cd-glass-edge) !important;
  border-radius: var(--cd-r-md) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.stories-coming {
  margin: 24px 20px 16px !important;
  padding: 20px !important;
  text-align: center;
  background: var(--cd-glass-1) !important;
  border: 1px dashed rgba(201,168,76,0.20) !important;
  border-radius: var(--cd-r-md);
  position: relative;
  z-index: 1;
}
.stories-coming__icon { display: inline-block; margin-bottom: 8px; }
.stories-coming__text {
  color: var(--cd-text-2) !important;
  font-size: 13px;
  font-weight: 600;
}
.stories-coming__sub {
  color: var(--cd-text-4) !important;
  font-size: 11px;
  margin-top: 2px;
  font-style: italic;
}

/* ============================================================
   13. JOURNEY — circular reward visualization
   ============================================================ */
.profile-screen {
  background: transparent !important;
  position: relative;
  padding-bottom: 100px;
  overflow-y: auto;
}
.profile-screen::before {
  content: 'رحلة';
  font-family: var(--f-arabic);
  position: absolute;
  top: 70px;
  left: -10px;
  font-size: 180px;
  color: rgba(201,168,76,0.04);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  transform: rotate(-8deg);
}

.profile-screen .screen-header {
  position: relative;
  z-index: 2;
}

/* Journey hero with circular streak ring */
.journey-hero {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px 24px 20px !important;
  margin: 12px 20px 0 !important;
  background: var(--cd-glass-1) !important;
  border: 1px solid var(--cd-glass-edge) !important;
  border-radius: var(--cd-r-lg) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.journey-hero::before {
  content: '';
  position: absolute;
  top: -40px;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--cd-emerald-soft) 0%, transparent 60%);
  pointer-events: none;
}

.journey-streak {
  position: relative;
  z-index: 1;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 0;
  min-height: 200px;
}

/* Streak progress ring (animated) */
.cd-streak-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 20px rgba(26, 179, 148, 0.2));
}
.cd-streak-ring__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 2;
}
.cd-streak-ring__progress {
  fill: none;
  stroke: url(#cdStreakGrad);
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke-dashoffset 1400ms cubic-bezier(0.22, 1, 0.36, 1);
  animation: cdStreakBreath 7s ease-in-out infinite;
}
@keyframes cdStreakBreath {
  0%, 100% { opacity: 0.85; filter: drop-shadow(0 0 6px rgba(26, 179, 148, 0.3)); }
  50%      { opacity: 1;    filter: drop-shadow(0 0 14px rgba(26, 179, 148, 0.55)); }
}
.journey-streak__flame,
.journey-streak__num,
.journey-streak__label {
  position: relative;
  z-index: 1;
}
.journey-streak__flame {
  color: var(--cd-emerald);
  filter: drop-shadow(0 0 12px var(--cd-emerald-glow));
  margin-bottom: 4px;
}
.journey-streak__num {
  font-family: var(--f-display) !important;
  font-size: 56px !important;
  font-weight: 700 !important;
  background: linear-gradient(180deg, var(--cd-emerald) 0%, var(--cd-emerald-deep) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  letter-spacing: -0.03em;
  filter: drop-shadow(0 0 20px var(--cd-emerald-glow));
}
.journey-streak__label {
  color: var(--cd-text-3) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-weight: 600;
}
.journey-quote {
  color: var(--cd-text-2) !important;
  font-style: italic;
  font-size: 13px !important;
  margin-top: 16px !important;
  position: relative;
  z-index: 1;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

/* Stats grid */
.journey-stats {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 16px 20px !important;
  position: relative;
  z-index: 1;
}
.js-card {
  background: var(--cd-glass-1) !important;
  border: 1px solid var(--cd-glass-edge) !important;
  border-radius: var(--cd-r-md) !important;
  padding: 16px 8px !important;
  text-align: center;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all var(--cd-dur-quick) var(--cd-ease-out);
}
.js-card:hover {
  background: var(--cd-glass-2) !important;
  border-color: var(--cd-glass-edge-strong) !important;
  transform: translateY(-2px);
}
.js-card__val {
  font-family: var(--f-display) !important;
  color: var(--cd-text-1) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  display: block;
  letter-spacing: -0.02em;
}
.js-card__label {
  color: var(--cd-text-3) !important;
  font-size: 10px !important;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-top: 4px;
  display: block;
}

/* Log past prayers button */
.journey-log-btn {
  background: var(--cd-glass-1) !important;
  border: 1px solid var(--cd-glass-edge) !important;
  border-radius: var(--cd-r-md) !important;
  padding: 14px 16px !important;
  margin: 8px 20px !important;
  display: flex !important;
  align-items: center;
  gap: 12px;
  color: var(--cd-text-1) !important;
  cursor: pointer;
  transition: all var(--cd-dur-quick) var(--cd-ease-out);
  position: relative;
  z-index: 1;
  width: calc(100% - 40px);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.journey-log-btn:hover {
  background: var(--cd-glass-2) !important;
  border-color: var(--cd-glass-edge-strong) !important;
}
.journey-log-btn__icon {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, rgba(26,179,148,0.20), rgba(26,179,148,0.08)) !important;
  color: var(--cd-emerald) !important;
  border-radius: var(--cd-r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(26,179,148,0.16);
  flex-shrink: 0;
}
.journey-log-btn__text { flex: 1; text-align: left; min-width: 0; }
.journey-log-btn__label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--cd-text-1) !important;
}
.journey-log-btn__desc {
  display: block;
  font-size: 11px;
  color: var(--cd-text-3) !important;
  margin-top: 1px;
}
.journey-log-btn__chevron { color: var(--cd-text-3); flex-shrink: 0; }

/* Milestones */
.milestones {
  margin: 16px 20px 20px !important;
  position: relative;
  z-index: 1;
  background: var(--cd-glass-1) !important;
  border: 1px solid var(--cd-glass-edge);
  border-radius: var(--cd-r-md);
  padding: 16px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.milestones__title {
  color: var(--cd-text-3) !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.20em;
  font-weight: 600;
  margin-bottom: 12px;
}
.milestone {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--cd-glass-edge) !important;
  position: relative;
}
.milestone:last-child { border-bottom: none !important; }
.milestone__icon {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--cd-glass-1);
  border: 1px solid var(--cd-glass-edge);
  flex-shrink: 0;
}
.milestone--earned .milestone__icon {
  background: linear-gradient(135deg, rgba(26,179,148,0.20), rgba(26,179,148,0.06));
  border-color: rgba(26,179,148,0.20);
  box-shadow: 0 0 16px rgba(26,179,148,0.15);
}
.milestone__info { flex: 1; min-width: 0; }
.milestone__name {
  color: var(--cd-text-1) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}
.milestone__desc {
  color: var(--cd-text-3) !important;
  font-size: 11px !important;
}
.milestone--locked { opacity: 0.4 !important; }
.milestone--next .milestone__name { color: var(--cd-emerald) !important; }
.milestone__prog {
  position: absolute;
  bottom: 4px;
  left: 48px;
  right: 0;
  height: 3px;
  background: var(--cd-glass-edge);
  border-radius: var(--cd-r-pill);
  overflow: hidden;
}
.milestone__prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--cd-emerald), var(--cd-emerald-deep));
  border-radius: var(--cd-r-pill);
  box-shadow: 0 0 8px var(--cd-emerald-glow);
}


/* ============================================================
   14. SPLASH / ONBOARDING — keep cinematic (existing onboarding.css)
   but ensure base bg matches Calm Depth
   ============================================================ */
.splash, .splash-cinematic {
  background: linear-gradient(175deg, var(--cd-ink-2) 0%, var(--cd-ink-1) 50%, var(--cd-ink-0) 100%) !important;
}
.splash__name {
  font-family: var(--f-display) !important;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0.7) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 24px rgba(255,255,255,0.10));
}

/* Splash CTA — match Calm Depth */
.splash-cinematic .onb-cta--primary,
.onb-cta--primary {
  background: linear-gradient(180deg, var(--cd-emerald) 0%, var(--cd-emerald-deep) 100%) !important;
  box-shadow:
    0 8px 28px rgba(26,179,148,0.35),
    0 0 50px rgba(26,179,148,0.15),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
  color: white !important;
}

/* ============================================================
   15. STORY PLAYER OVERLAY
   ============================================================ */
.story-player {
  background: linear-gradient(175deg, var(--cd-ink-2) 0%, var(--cd-ink-0) 100%) !important;
}
.story-player__bg {
  opacity: 0.35 !important;
  filter: blur(2px);
}
.story-player__close {
  background: var(--cd-glass-1) !important;
  border: 1px solid var(--cd-glass-edge) !important;
  color: var(--cd-text-2) !important;
  backdrop-filter: blur(12px);
}
.story-player__surah,
.story-player__title,
.story-player__theme {
  color: var(--cd-text-1) !important;
}
.story-player__title { font-family: var(--f-display) !important; }
.story-player__arabic {
  color: var(--cd-gold) !important;
  font-family: var(--f-arabic) !important;
}
.story-player__theme { color: var(--cd-text-3) !important; font-style: italic; }

.story-player__ring {
  border: 1px solid var(--cd-emerald) !important;
  box-shadow: 0 0 32px rgba(26,179,148,0.20);
}
.story-player__play-btn {
  background: linear-gradient(180deg, var(--cd-emerald) 0%, var(--cd-emerald-deep) 100%) !important;
  box-shadow: 0 8px 32px rgba(26,179,148,0.45), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

.story-player__bar {
  background: var(--cd-glass-edge) !important;
}
.story-player__bar-fill {
  background: linear-gradient(90deg, var(--cd-emerald), var(--cd-emerald-deep)) !important;
  box-shadow: 0 0 8px var(--cd-emerald-glow);
}

.sp-ctrl {
  background: var(--cd-glass-1) !important;
  border: 1px solid var(--cd-glass-edge) !important;
  color: var(--cd-text-2) !important;
  backdrop-filter: blur(12px);
}
.sp-ctrl:hover {
  background: var(--cd-glass-2) !important;
  border-color: var(--cd-glass-edge-strong) !important;
  color: var(--cd-text-1) !important;
}

.story-player__times { color: var(--cd-text-3) !important; }
.story-player__verses,
.story-player__desc { color: var(--cd-text-2) !important; }

/* ============================================================
   16. NOOR AI CHAT
   ============================================================ */
.noor-fab {
  background: linear-gradient(135deg, var(--cd-emerald), var(--cd-emerald-deep)) !important;
  box-shadow:
    0 8px 28px rgba(26,179,148,0.40),
    0 0 50px rgba(26,179,148,0.20),
    inset 0 1px 0 rgba(255,255,255,0.20) !important;
  color: white !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
}
.noor-fab__glow {
  background: radial-gradient(circle, rgba(26,179,148,0.40), transparent 70%) !important;
}

.noor-chat {
  background: linear-gradient(175deg, var(--cd-ink-2) 0%, var(--cd-ink-0) 100%) !important;
}
.noor-chat__header,
.noor-chat__input-wrap {
  background: var(--cd-glass-1) !important;
  border-color: var(--cd-glass-edge) !important;
  backdrop-filter: blur(20px);
}
.noor-chat__title { color: var(--cd-text-1) !important; }
.noor-chat__sub { color: var(--cd-text-3) !important; }

.noor-msg--user .noor-msg__bubble {
  background: linear-gradient(180deg, var(--cd-emerald), var(--cd-emerald-deep)) !important;
  color: white !important;
}
.noor-msg--ai .noor-msg__bubble {
  background: var(--cd-glass-2) !important;
  border: 1px solid var(--cd-glass-edge) !important;
  color: var(--cd-text-1) !important;
  backdrop-filter: blur(12px);
}

.noor-chat__input {
  background: var(--cd-glass-1) !important;
  border: 1px solid var(--cd-glass-edge) !important;
  color: var(--cd-text-1) !important;
}
.noor-chat__input::placeholder { color: var(--cd-text-4) !important; }
.noor-chat__send {
  background: linear-gradient(135deg, var(--cd-emerald), var(--cd-emerald-deep)) !important;
  color: white !important;
}

/* ============================================================
   17. DUA PLAYER (overlay)
   ============================================================ */
.dua-player {
  background: linear-gradient(175deg, var(--cd-ink-2) 0%, var(--cd-ink-0) 100%) !important;
}
.dua-player__bg { opacity: 0.30 !important; }
.dua-player__close,
.dua-player__lang-toggle {
  background: var(--cd-glass-1) !important;
  border: 1px solid var(--cd-glass-edge) !important;
  color: var(--cd-text-2) !important;
  backdrop-filter: blur(12px);
}
.dua-player__label { color: var(--cd-emerald) !important; letter-spacing: 0.20em; }
.dua-player__title { color: var(--cd-text-1) !important; font-family: var(--f-display) !important; }
.dua-player__title-ar { color: var(--cd-gold) !important; font-family: var(--f-arabic) !important; }
/* Force the dua player to anchor to top, not center, so title is never clipped */
.dua-player {
  justify-content: flex-start !important;
  padding-top: 72px !important;
  overflow-y: auto !important;
}
.dua-player__content {
  margin-top: 0 !important;
  padding-bottom: 80px !important;
}
.dua-player__arabic { color: var(--cd-text-1) !important; }
.dua-player__english { color: var(--cd-text-2) !important; }
.dua-player__times { color: var(--cd-text-3) !important; }
.dua-player__progress-bar { background: var(--cd-glass-edge) !important; }
.dua-player__progress-fill {
  background: linear-gradient(90deg, var(--cd-emerald), var(--cd-emerald-deep)) !important;
  box-shadow: 0 0 8px var(--cd-emerald-glow);
}
.dua-player__progress-thumb {
  background: var(--cd-emerald) !important;
  box-shadow: 0 0 8px var(--cd-emerald-glow);
}
.dua-player__lang { color: var(--cd-text-3) !important; }
.dua-player__lang.active { color: var(--cd-emerald) !important; }
.dua-player__play-btn {
  background: linear-gradient(180deg, var(--cd-emerald) 0%, var(--cd-emerald-deep) 100%) !important;
  box-shadow: 0 8px 32px rgba(26,179,148,0.45), inset 0 1px 0 rgba(255,255,255,0.25) !important;
}
.dua-player__ring {
  border: 1px solid var(--cd-emerald) !important;
  box-shadow: 0 0 32px rgba(26,179,148,0.20);
}

/* ============================================================
   18. QIBLA, TAJWEED, DHIKR, UPGRADE — base dark theme
   ============================================================ */
.qibla-screen,
.tajweed-screen,
.dhikr-screen {
  background: transparent !important;
  position: relative;
  z-index: 1;
  color: var(--cd-text-1);
}

/* Upgrade screen — premium gold */
#screenUpgrade {
  background: linear-gradient(175deg, var(--cd-ink-2) 0%, var(--cd-ink-0) 100%) !important;
}
.upgrade-screen,
.upgrade-screen * { color: var(--cd-text-1); }

/* ============================================================
   19. PRAYER LOG MODAL & GENERIC MODALS
   ============================================================ */
.modal-backdrop, .prayer-log-overlay {
  background: rgba(0,0,0,0.65) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.modal-content, .prayer-log-modal {
  background: linear-gradient(180deg, var(--cd-ink-3) 0%, var(--cd-ink-2) 100%) !important;
  border: 1px solid var(--cd-glass-edge) !important;
  color: var(--cd-text-1) !important;
  box-shadow: var(--cd-shadow-deep) !important;
}

/* ============================================================
   20. UTILITY & FALLBACKS
   ============================================================ */
/* Make any default light surfaces inherit dark */
.surface, .card { background: var(--cd-glass-1); border-color: var(--cd-glass-edge); }

/* Fix any remaining light text on light bg from older sheets */
.screen .text { color: var(--cd-text-1); }
.screen .text-muted { color: var(--cd-text-3); }


/* ============================================================
   21. TAJWEED / LEARN TO RECITE
   ============================================================ */
#screenTajweed .recite-picker__sub {
  color: var(--cd-text-3) !important;
  font-size: 14px;
  letter-spacing: 0.02em;
}
#screenTajweed .recite-section-title {
  color: var(--cd-emerald) !important;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 24px 0 12px;
  padding: 0 16px;
  opacity: 0.9;
}
#screenTajweed .recite-picker__sub {
  padding: 0 16px;
  margin-bottom: 4px;
}
#screenTajweed .recite-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 16px;
}
#screenTajweed .recite-card {
  background: var(--cd-glass-1) !important;
  border: 1px solid var(--cd-glass-edge) !important;
  border-radius: 16px !important;
  box-shadow: var(--cd-shadow-soft) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 16px !important;
  transition: transform 280ms ease, border-color 280ms ease, box-shadow 280ms ease;
}
#screenTajweed .recite-card:hover {
  border-color: rgba(34,197,140,0.4) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 18px rgba(34,197,140,0.18) !important;
}
#screenTajweed .recite-card--featured {
  background: linear-gradient(135deg, rgba(34,197,140,0.18), rgba(212,175,113,0.10)) !important;
  border-color: rgba(34,197,140,0.45) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.40), 0 0 24px rgba(34,197,140,0.20) !important;
}
#screenTajweed .recite-card__name {
  color: var(--cd-text-1) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}
#screenTajweed .recite-card__detail {
  color: var(--cd-text-3) !important;
  font-size: 12px !important;
  line-height: 1.4;
}
#screenTajweed .recite-card__emoji {
  color: var(--cd-gold) !important;
}
#screenTajweed .recite-card--featured .recite-card__name {
  color: var(--cd-text-0) !important;
}
#screenTajweed .recite-card--featured .recite-card__detail {
  color: rgba(255,250,240,0.85) !important;
}
/* Tajweed list-style rows (the "Al-Ikhlas 4 verses" style) */
#screenTajweed .recite-row,
#screenTajweed .recite-list-item {
  background: var(--cd-glass-1) !important;
  border: 1px solid var(--cd-glass-edge) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  margin-bottom: 8px;
  color: var(--cd-text-1) !important;
}
#screenTajweed .recite-row__num,
#screenTajweed .recite-list-item__num {
  color: var(--cd-emerald) !important;
  font-weight: 600;
}

/* Range picker (custom range modal inside Tajweed) */
.range-picker { background: var(--cd-ink-1) !important; color: var(--cd-text-1) !important; }
.range-picker__section { color: var(--cd-text-2) !important; }
.range-picker__name { color: var(--cd-text-0) !important; }

/* Fix broken hv3Settle animation that hides cards (keyframes undefined) */
.tajweed-screen .recite-card,
.surah-list-screen .surah-list .surah-item,
.quran-screen .ayah {
  animation: none !important;
  opacity: 1 !important;
}

/* ============================================================
   22. CALLIGRAPHY + NOOR + SIDE DRAWER + MODERN AR TYPOGRAPHY
   ============================================================ */

/* --- Modern Arabic typography fallbacks ---------------------- */
:root {
  --cd-font-quran: 'Amiri Quran', 'Amiri', 'Noto Naskh Arabic', serif;
  --cd-font-ar-display: 'Reem Kufi', 'Amiri', serif;
  --cd-font-ar-ui: 'Noto Naskh Arabic', 'Amiri', serif;
  --cd-gold: #d4b87a;
  --cd-gold-soft: rgba(212, 184, 122, 0.85);
}

/* Apply across Arabic surfaces */
.arabic, .ayah-arabic, .surah-arabic, .arabic-text,
[lang="ar"], .ar, .splash-arabic,
.surah-item__arabic, .home-greeting__arabic,
.dua-arabic, .verse-arabic {
  font-family: var(--cd-font-quran);
  font-feature-settings: "calt" 1, "liga" 1;
}

/* Quran reading body */
.quran-screen .ayah-arabic, .quran-screen .ayah .arabic,
#screenQuran .arabic, #screenQuran [lang="ar"] {
  font-family: var(--cd-font-quran);
  line-height: 2.05;
  letter-spacing: 0.01em;
}

/* Display Arabic for titles */
.surah-item__arabic, .surah-card__arabic,
.cd-noor-ar, .cd-drawer-mark__ar, .cd-drawer-foot-ar {
  font-family: var(--cd-font-ar-display);
}

/* --- Hide the old floating Noor FAB completely --------------- */
.noor-fab, #noorFab { display: none !important; }
.noor-chat { display: none !important; } /* legacy overlay no longer used */

/* --- Hamburger button (fixed top-left) ----------------------- */
.cd-hamburger {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 950;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(11, 18, 34, 0.55);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  color: var(--cd-text-0, #e8e6df);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 240ms ease, transform 240ms ease, border-color 240ms ease;
}
.cd-hamburger:hover {
  background: rgba(20, 32, 56, 0.7);
  border-color: rgba(212, 184, 122, 0.25);
}
.cd-hamburger:active { transform: scale(0.96); }

/* Inside phone-frame keep it visible to that frame */
.phone-frame .cd-hamburger { position: absolute; }

/* --- Side drawer --------------------------------------------- */
.cd-side-drawer {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
.cd-drawer-scrim {
  position: absolute; inset: 0;
  background: rgba(4, 6, 14, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 280ms ease;
}
.cd-drawer-panel {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 86%;
  max-width: 340px;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(36, 78, 86, 0.18), transparent 60%),
    linear-gradient(180deg, #0b1322 0%, #070b16 100%);
  border-right: 1px solid rgba(255,255,255,0.06);
  box-shadow: 24px 0 48px rgba(0,0,0,0.4);
  transform: translateX(-104%);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
/* Calligraphy ambient watermark inside drawer */
.cd-drawer-panel::before {
  content: "";
  position: absolute; inset: -20% -10% auto auto;
  width: 240px; height: 240px;
  background: url('assets/calligraphy/girih.webp') no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
  filter: hue-rotate(-10deg) saturate(0.8);
}
.cd-side-drawer.cd-drawer-open { pointer-events: auto; }
.cd-side-drawer.cd-drawer-open .cd-drawer-scrim { opacity: 1; }
.cd-side-drawer.cd-drawer-open .cd-drawer-panel { transform: translateX(0); }
body.cd-drawer-locked { overflow: hidden; }

.cd-drawer-head {
  padding: 22px 20px 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.cd-drawer-brand { display: flex; align-items: center; gap: 12px; }
.cd-drawer-mark {
  width: 42px; height: 42px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(212,184,122,0.35), transparent 70%),
    rgba(20, 28, 48, 0.9);
  border: 1px solid rgba(212, 184, 122, 0.25);
  color: var(--cd-gold);
}
.cd-drawer-mark__ar {
  font-family: var(--cd-font-ar-display);
  font-size: 24px;
  line-height: 1;
  color: var(--cd-gold);
  font-weight: 600;
}
.cd-drawer-name {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--cd-text-0, #e8e6df);
  margin: 0;
}
.cd-drawer-tag {
  font-size: 11px;
  color: var(--cd-text-2, #8a8a85);
  margin: 2px 0 0;
  letter-spacing: 0.04em;
}
.cd-drawer-close {
  width: 32px; height: 32px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: var(--cd-text-1, #c8c6c0);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cd-drawer-close:hover { background: rgba(255,255,255,0.08); }

.cd-drawer-nav {
  padding: 16px 12px 12px;
  flex: 1;
  overflow-y: auto;
}
.cd-drawer-section {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cd-text-2, #8a8a85);
  padding: 4px 12px 10px;
  margin: 0;
}
.cd-drawer-item {
  width: 100%;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--cd-text-0, #e8e6df);
  cursor: pointer;
  text-align: left;
  transition: background 200ms ease, border-color 200ms ease, transform 200ms ease;
}
.cd-drawer-item:hover {
  background: rgba(255,255,255,0.035);
  border-color: rgba(255,255,255,0.06);
}
.cd-drawer-item:active { transform: scale(0.99); }
.cd-drawer-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(36, 78, 86, 0.22);
  color: #6cb6c1;
  flex-shrink: 0;
}
.cd-drawer-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cd-drawer-label {
  font-size: 14px; font-weight: 500;
  color: var(--cd-text-0, #e8e6df);
}
.cd-drawer-desc {
  font-size: 11px;
  color: var(--cd-text-2, #8a8a85);
  margin-top: 2px;
}
.cd-drawer-arrow { color: var(--cd-text-2, #8a8a85); flex-shrink: 0; }

.cd-drawer-foot {
  padding: 16px 20px 22px;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
}
.cd-drawer-foot-ar {
  font-family: var(--cd-font-ar-display);
  font-size: 22px;
  color: var(--cd-gold);
  margin: 0;
  letter-spacing: 0.03em;
}
.cd-drawer-foot-en {
  font-size: 11px;
  color: var(--cd-text-2, #8a8a85);
  margin: 4px 0 0;
}

/* --- Noor full-screen feature -------------------------------- */
#screenNoor { background: transparent; }
.cd-noor-screen {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 100%;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(20, 38, 58, 0.6), transparent 60%),
    linear-gradient(180deg, #050810 0%, #0a1020 60%, #050810 100%);
  color: var(--cd-text-0, #e8e6df);
  padding-bottom: 92px;
}
.cd-noor-bg {
  position: absolute; inset: 0;
  background:
    url('assets/calligraphy/noor.webp') no-repeat center 20% / 60% auto,
    url('assets/calligraphy/girih.webp') no-repeat center 100% / 140% auto;
  opacity: 0.10;
  pointer-events: none;
  filter: blur(0.4px);
  mask-image: linear-gradient(180deg, black 0%, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, black 0%, black 60%, transparent 100%);
}
.cd-noor-header {
  position: relative;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 18px 16px 4px;
  z-index: 2;
}
.cd-noor-menu {
  width: 36px; height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(15, 22, 38, 0.55);
  color: var(--cd-text-0);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.cd-noor-title-wrap { text-align: center; flex: 1; }
.cd-noor-eyebrow {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cd-gold-soft);
  margin: 0 0 6px;
}
.cd-noor-title {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: 0.01em;
  margin: 0;
  background: linear-gradient(180deg, #f4ecd5 0%, #d4b87a 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.cd-noor-ar {
  font-family: var(--cd-font-ar-display);
  font-size: 20px;
  color: var(--cd-gold);
  margin: 4px 0 0;
  opacity: 0.85;
}
.cd-noor-intro {
  position: relative; z-index: 2;
  margin: 18px 18px 8px;
  padding: 16px 16px;
  border-radius: 14px;
  background: rgba(15, 22, 38, 0.45);
  border: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(8px);
}
.cd-noor-intro p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--cd-text-1, #c8c6c0);
}
.cd-noor-intro-note {
  margin-top: 8px !important;
  font-size: 11px !important;
  color: var(--cd-text-2, #8a8a85) !important;
  font-style: italic;
}

.cd-noor-history {
  position: relative; z-index: 2;
  padding: 4px 16px 0;
  display: flex; flex-direction: column; gap: 10px;
}
.cd-noor-msg {
  max-width: 86%;
  padding: 11px 14px;
  border-radius: 14px;
  font-size: 14px; line-height: 1.55;
  word-wrap: break-word;
}
.cd-noor-msg--user {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(36, 78, 86, 0.55), rgba(20, 48, 60, 0.55));
  border: 1px solid rgba(108, 182, 193, 0.2);
  border-bottom-right-radius: 4px;
  color: #e8f4f6;
}
.cd-noor-msg--noor {
  align-self: flex-start;
  background: rgba(15, 22, 38, 0.55);
  border: 1px solid rgba(255,255,255,0.06);
  border-bottom-left-radius: 4px;
  color: var(--cd-text-0, #e8e6df);
}
.cd-noor-typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.cd-noor-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cd-gold-soft);
  animation: cdNoorDot 1.2s ease-in-out infinite;
}
.cd-noor-typing span:nth-child(2) { animation-delay: 0.18s; }
.cd-noor-typing span:nth-child(3) { animation-delay: 0.36s; }
@keyframes cdNoorDot {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.cd-noor-topics {
  position: relative; z-index: 2;
  padding: 16px 16px 10px;
  display: flex; flex-direction: column; gap: 18px;
}
.cd-noor-topic { display: flex; flex-direction: column; gap: 8px; }
.cd-noor-topic-title {
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 600;
  margin: 0 4px 2px;
  color: var(--cd-text-0, #e8e6df);
  display: flex; align-items: center; gap: 8px;
}
.cd-noor-topic-title::before {
  content: "";
  width: 16px; height: 1px;
  background: var(--cd-gold-soft);
  opacity: 0.6;
}
.cd-noor-prompts {
  display: flex; flex-direction: column; gap: 8px;
}
.cd-noor-prompt {
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(15, 22, 38, 0.42);
  color: var(--cd-text-1, #c8c6c0);
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, color 200ms ease;
}
.cd-noor-prompt:hover {
  border-color: rgba(212, 184, 122, 0.25);
  background: rgba(20, 30, 50, 0.6);
  color: var(--cd-text-0, #e8e6df);
}

.cd-noor-input-wrap {
  position: absolute;
  left: 0; right: 0; bottom: 62px;
  padding: 10px 12px 12px;
  background: linear-gradient(180deg, transparent 0%, rgba(5,8,16,0.92) 40%, rgba(5,8,16,0.98) 100%);
  z-index: 3;
  pointer-events: none;
}
.cd-noor-input-box {
  pointer-events: auto;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 6px 6px 14px;
  border-radius: 999px;
  background: rgba(15, 22, 38, 0.85);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  max-width: 560px;
  margin: 0 auto;
}
.cd-noor-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--cd-text-0);
  font-size: 14px;
  padding: 8px 4px;
  font-family: inherit;
}
.cd-noor-input::placeholder { color: var(--cd-text-2); }
.cd-noor-send {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #244e56, #1b3a40);
  color: #e8f4f6;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.cd-noor-send:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(36, 78, 86, 0.4);
}

/* Tab bar fixed to bottom of Noor screen */
#screenNoor .cd-noor-screen { position: relative; min-height: 100vh; }
#screenNoor .tab-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 4;
}
/* Push topics so they are not hidden under the input + tab bar */
.cd-noor-topics { padding-bottom: 160px !important; }

/* --- Calligraphy heroes -------------------------------------- */

/* Splash As-Sakina hero */
#screenSplash .splash-cinematic,
#screenSplash .splash {
  position: relative;
  isolation: isolate;
}
#screenSplash .splash-cinematic::before,
#screenSplash .splash::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -64%);
  width: 78%; aspect-ratio: 1 / 1;
  background: url('assets/calligraphy/sakina.webp') no-repeat center / contain;
  opacity: 0.32;
  filter: drop-shadow(0 0 24px rgba(212, 184, 122, 0.18));
  z-index: 0;
  pointer-events: none;
  animation: cdSplashBreath 7s ease-in-out infinite;
}
#screenSplash .splash-logo-wrap,
#screenSplash .splash__name,
#screenSplash .splash__tagline,
#screenSplash .onb-cta--primary,
#screenSplash .btn-primary { position: relative; z-index: 1; }
@keyframes cdSplashBreath {
  0%, 100% { opacity: 0.28; transform: translate(-50%, -64%) scale(1); }
  50% { opacity: 0.4; transform: translate(-50%, -64%) scale(1.025); }
}

/* =====================================================
   HOME PAGE — BOLD VISIBLE CALLIGRAPHY (no watermarks)
   ===================================================== */
#screenHome .home--v5 { position: relative; }
#screenHome .v5-content {
  position: relative;
  z-index: 1;
}

/* Drop the old timid Allah corner watermark */
#screenHome .v5-content::before { content: none !important; }

/* Push home content down so the Bismillah banner clears the top safe area + hamburger.
   Also override the flex centering so content starts from the top — otherwise the
   Bismillah banner gets centered up out of the viewport. */
#screenHome .v5-content {
  padding-top: 52px !important;
  justify-content: flex-start !important;
}

/* ---------- 1. BISMILLAH HERO BANNER (top of home) ---------- */
#screenHome .v5-bismillah {
  position: relative;
  width: 100%;
  margin: 0 0 22px;
  padding: 10px 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 1;
}
#screenHome .v5-bismillah::before {
  content: "";
  position: absolute;
  inset: -10px 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%,
      rgba(212, 184, 122, 0.10) 0%,
      rgba(212, 184, 122, 0.04) 40%,
      transparent 75%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
#screenHome .v5-bismillah::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%;
  bottom: 4px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(212, 184, 122, 0.45) 50%,
    transparent);
  pointer-events: none;
}
#screenHome .v5-bismillah img {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 88%;
  height: 72px;
  object-fit: contain;
  opacity: 1;
  filter:
    drop-shadow(0 0 22px rgba(212, 184, 122, 0.55))
    drop-shadow(0 0 8px rgba(212, 184, 122, 0.65));
  animation: cdBismillahBreath 8s ease-in-out infinite;
}
@keyframes cdBismillahBreath {
  0%, 100% { opacity: 0.88; filter: drop-shadow(0 0 14px rgba(212,184,122,0.40)) drop-shadow(0 0 6px rgba(212,184,122,0.50)); }
  50%      { opacity: 0.98; filter: drop-shadow(0 0 22px rgba(212,184,122,0.55)) drop-shadow(0 0 8px rgba(212,184,122,0.65)); }
}

/* ---------- 2. ARABIC SALAAM under English greeting ---------- */
#screenHome .v5-greeting__arabic {
  margin: 4px 0 6px !important;
  font-family: var(--cd-font-ar-display, 'Reem Kufi', 'Amiri', serif);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--cd-gold, #d4b87a);
  text-shadow: 0 0 18px rgba(212, 184, 122, 0.35);
  letter-spacing: 0.01em;
  direction: rtl;
  unicode-bidi: isolate;
}

/* ---------- 3. ALLAH BACKDROP behind prayer hero ---------- */
#screenHome .v5-hero { isolation: isolate; }
#screenHome .v5-hero__callig {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -52%);
  width: 380px;
  height: 380px;
  pointer-events: none;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#screenHome .v5-hero__callig::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(212, 184, 122, 0.20) 0%,
      rgba(212, 184, 122, 0.10) 30%,
      rgba(46, 166, 130, 0.06) 55%,
      transparent 75%);
  filter: blur(14px);
}
#screenHome .v5-hero__callig img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.32;
  filter:
    drop-shadow(0 0 30px rgba(212, 184, 122, 0.35))
    drop-shadow(0 0 10px rgba(212, 184, 122, 0.45));
  animation: cdAllahBreath 10s ease-in-out infinite;
}
@keyframes cdAllahBreath {
  0%, 100% { opacity: 0.30; transform: scale(1.00); }
  50%      { opacity: 0.40; transform: scale(1.025); }
}

/* Lift hero text above the Allah backdrop */
#screenHome .v5-hero__label,
#screenHome .v5-hero__name,
#screenHome .v5-hero__time,
#screenHome .v5-countdown,
#screenHome .v5-cta {
  position: relative;
  z-index: 2;
}

/* ---------- 4. GIRIH DIVIDER between tracker and card ---------- */
#screenHome .v5-girih-div {
  position: relative;
  height: 28px;
  margin: 18px -8px 14px;
  background: url('assets/calligraphy/girih.webp') repeat-x center center / auto 28px;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  pointer-events: none;
}
#screenHome .v5-girih-div::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cd-gold, #d4b87a);
  transform: translate(-50%, -50%);
  box-shadow:
    0 0 12px rgba(212, 184, 122, 0.7),
    0 0 4px rgba(212, 184, 122, 0.9);
}

/* Make sure the v5-greeting feels intentional alongside Bismillah */
#screenHome .v5-greeting { position: relative; z-index: 1; }
#screenHome .v5-greeting__salaam {
  position: relative;
  z-index: 1;
}

/* Surah-list cards: big Arabic name letterforms via calligraphy bg */
.surah-item {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.surah-item[data-surah]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surah-callig-bg, none) no-repeat right 8px center / 96px auto;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}
.surah-item > * { position: relative; z-index: 1; }
/* By number — 1 Fatiha, 2 Baqarah, 12 Yusuf, 18 Kahf */
.surah-item[data-surah="1"] { --surah-callig-bg: url('assets/calligraphy/alfatiha.webp'); }
.surah-item[data-surah="2"] { --surah-callig-bg: url('assets/calligraphy/baqarah.webp'); }
.surah-item[data-surah="12"] { --surah-callig-bg: url('assets/calligraphy/yusuf.webp'); }
.surah-item[data-surah="18"] { --surah-callig-bg: url('assets/calligraphy/alkahf.webp'); }

/* Surah list screen header banner */
#screenSurahList .screen-header,
#screenSurahList .header,
.surah-list-screen .header {
  position: relative;
  isolation: isolate;
}
#screenSurahList .screen-header::after,
.surah-list-screen .header::after {
  content: "";
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 50%;
  background: url('assets/calligraphy/quran.webp') no-repeat right center / contain;
  opacity: 0.10;
  pointer-events: none;
}

/* Stories screen ambient calligraphy + featured card hero.
   IMPORTANT: do NOT set `position: relative` on #screenStories — the global
   .screen rule sets position: absolute so screens stack correctly. Overriding
   to relative breaks the screen-stacking system and Stories renders below the
   viewport. The absolute screen is itself a positioned ancestor, so ::before
   below works without any position override. */
#screenStories::before {
  content: "";
  position: absolute;
  top: 60px; right: -40px;
  width: 280px; height: 220px;
  background: url('assets/calligraphy/stories.webp') no-repeat center / contain;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
/* Featured card calligraphy backdrop based on story surah */
.sf-card { position: relative; overflow: hidden; isolation: isolate; }
.sf-card[data-surah="12"]::after,
.sf-card[data-surah="18"]::after,
.sf-card[data-surah="1"]::after,
.sf-card[data-surah="2"]::after {
  content: "";
  position: absolute; inset: 0;
  background-position: right -20px center;
  background-repeat: no-repeat;
  background-size: 220px auto;
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
}
.sf-card[data-surah="1"]::after { background-image: url('assets/calligraphy/alfatiha.webp'); }
.sf-card[data-surah="2"]::after { background-image: url('assets/calligraphy/baqarah.webp'); }
.sf-card[data-surah="12"]::after { background-image: url('assets/calligraphy/yusuf.webp'); }
.sf-card[data-surah="18"]::after { background-image: url('assets/calligraphy/alkahf.webp'); }
.sf-card__content, .sf-card__bg { position: relative; z-index: 1; }

/* List card (smaller) — subtle calligraphy peek on right */
.sl-card { position: relative; overflow: hidden; isolation: isolate; }
.sl-card[data-surah="12"]::after,
.sl-card[data-surah="18"]::after,
.sl-card[data-surah="1"]::after,
.sl-card[data-surah="2"]::after {
  content: "";
  position: absolute; inset: 0;
  background-position: right -10px center;
  background-repeat: no-repeat;
  background-size: 90px auto;
  opacity: 0.10;
  pointer-events: none;
  z-index: 0;
}
.sl-card[data-surah="1"]::after { background-image: url('assets/calligraphy/alfatiha.webp'); }
.sl-card[data-surah="2"]::after { background-image: url('assets/calligraphy/baqarah.webp'); }
.sl-card[data-surah="12"]::after { background-image: url('assets/calligraphy/yusuf.webp'); }
.sl-card[data-surah="18"]::after { background-image: url('assets/calligraphy/alkahf.webp'); }
.sl-card > * { position: relative; z-index: 1; }

/* Quran reading screen subtle Bismillah banner above first verse */
#screenQuran .surah-bismillah,
#screenQuran .bismillah {
  position: relative;
  text-align: center;
  padding: 18px 0 22px;
  margin-bottom: 8px;
}
#screenQuran .surah-bismillah::before,
#screenQuran .bismillah::before {
  content: "";
  display: block;
  width: 72%;
  margin: 0 auto;
  height: 56px;
  background: url('assets/calligraphy/bismillah.webp') no-repeat center / contain;
  opacity: 0.95;
}
/* Hide any legacy text inside bismillah banner — calligraphy says it */
#screenQuran .surah-bismillah > *,
#screenQuran .bismillah > * { display: none; }

/* Profile / Journey screen ambient rosette */
/* Same rule applies for Profile/Journey — keep .screen's position: absolute. */
#screenProfile::before {
  content: "";
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 320px; height: 320px;
  background: url('assets/calligraphy/rosette.webp') no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
}

/* Drawer should sit above the phone frame on desktop */
@media (min-width: 901px) {
  .cd-side-drawer { position: absolute; }
  .phone-frame .cd-side-drawer { position: absolute; inset: 0; }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #screenSplash .splash-cinematic::before,
  #screenSplash .splash::before { animation: none; }
  .cd-drawer-panel { transition: none; }
}

/* Make tab-bar keep 5 tabs equally spaced */
.tab-bar .tab { flex: 1 1 0; min-width: 0; }
.tab-bar .tab span { font-size: 10px; }


/* =====================================================
   ALL-PRAYERS-COMPLETE \u2014 SUBTLE CALLIGRAPHY CELEBRATION
   Replaces the broken gradient text block with a serene
   Arabic "Alhamdulillah" + soft particle bloom.
   ===================================================== */

/* When complete: hide the default English text + countdown + CTA.
   Show only our calligraphy celebration. */
#screenHome .v5-hero--complete .v5-hero__label,
#screenHome .v5-hero--complete .v5-hero__name,
#screenHome .v5-hero--complete .v5-hero__time,
#screenHome .v5-hero--complete .v5-countdown,
#screenHome .v5-hero--complete .v5-cta {
  display: none !important;
}

/* Lift the Allah backdrop slightly when in complete state \u2014 it's the only thing left */
#screenHome .v5-hero--complete .v5-hero__callig img {
  opacity: 0.18 !important;
}

/* Celebration container \u2014 only visible when hero has --complete */
#screenHome .v5-hero__alhamd {
  position: relative;
  z-index: 2;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 36px 16px 28px;
  text-align: center;
  pointer-events: none;
  isolation: isolate;
}
#screenHome .v5-hero--complete .v5-hero__alhamd {
  display: flex;
  animation: cdAlhamdRise 1400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cdAlhamdRise {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Soft emerald-gold glow bloom behind the calligraphy */
#screenHome .v5-alhamd-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 360px;
  height: 360px;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 50%,
      rgba(212, 184, 122, 0.16) 0%,
      rgba(46, 166, 130, 0.08) 35%,
      transparent 70%);
  filter: blur(20px);
  z-index: -1;
  animation: cdAlhamdBloom 6s ease-in-out infinite;
}
@keyframes cdAlhamdBloom {
  0%, 100% { opacity: 0.85; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}

/* The Arabic calligraphy itself \u2014 large, gold, breathing */
#screenHome .v5-alhamd-text {
  font-family: var(--cd-font-ar-display, 'Reem Kufi', 'Amiri', serif);
  font-size: 64px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--cd-gold, #d4b87a);
  text-shadow:
    0 0 32px rgba(212, 184, 122, 0.55),
    0 0 12px rgba(212, 184, 122, 0.4);
  letter-spacing: 0.01em;
  direction: rtl;
  unicode-bidi: isolate;
  animation: cdAlhamdBreath 5s ease-in-out infinite;
}
@keyframes cdAlhamdBreath {
  0%, 100% { text-shadow: 0 0 28px rgba(212,184,122,0.50), 0 0 10px rgba(212,184,122,0.35); }
  50%      { text-shadow: 0 0 38px rgba(212,184,122,0.65), 0 0 14px rgba(212,184,122,0.50); }
}

/* English subtitle under the Arabic */
#screenHome .v5-alhamd-sub {
  margin-top: 14px;
  font-family: var(--f-display, 'Cormorant Garamond', serif);
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.62);
}

/* Floating particles \u2014 tiny gold dots that drift up around the calligraphy */
#screenHome .v5-alhamd-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
#screenHome .v5-alhamd-particles span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cd-gold, #d4b87a);
  box-shadow: 0 0 8px rgba(212, 184, 122, 0.7);
  opacity: 0;
  animation: cdAlhamdParticle 7s ease-in-out infinite;
}
#screenHome .v5-alhamd-particles span:nth-child(1) { left: 18%; bottom: 8%;  animation-delay: 0s;   }
#screenHome .v5-alhamd-particles span:nth-child(2) { left: 32%; bottom: 14%; animation-delay: 1.2s; }
#screenHome .v5-alhamd-particles span:nth-child(3) { left: 48%; bottom: 6%;  animation-delay: 2.4s; }
#screenHome .v5-alhamd-particles span:nth-child(4) { left: 64%; bottom: 12%; animation-delay: 3.5s; }
#screenHome .v5-alhamd-particles span:nth-child(5) { left: 78%; bottom: 8%;  animation-delay: 4.6s; }
#screenHome .v5-alhamd-particles span:nth-child(6) { left: 88%; bottom: 16%; animation-delay: 5.8s; }
@keyframes cdAlhamdParticle {
  0%   { opacity: 0; transform: translateY(0) scale(0.8); }
  20%  { opacity: 0.9; transform: translateY(-30px) scale(1); }
  60%  { opacity: 0.6; transform: translateY(-90px) scale(0.9); }
  100% { opacity: 0; transform: translateY(-140px) scale(0.6); }
}

/* =====================================================
   TODAY'S DUA CARD \u2014 add rosette calligraphy artwork
   ===================================================== */
#screenHome .v5-card--callig {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#screenHome .v5-card__callig {
  position: absolute;
  top: 50%;
  right: -20px;
  width: 130px;
  height: 130px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 65% 50%, #000 50%, transparent 90%);
          mask-image: radial-gradient(ellipse 70% 70% at 65% 50%, #000 50%, transparent 90%);
}
#screenHome .v5-card__callig img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.55;
  /* Desaturate + warm-shift the rosette so blues/oranges become muted gold,
     matching Calm Depth's emerald + gold palette. */
  filter:
    saturate(0.25)
    sepia(0.35)
    hue-rotate(-12deg)
    brightness(1.05)
    drop-shadow(0 0 12px rgba(212, 184, 122, 0.35));
  animation: cdRosetteSpin 80s linear infinite;
}
@keyframes cdRosetteSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Lift the card's actual content above the rosette artwork */
#screenHome .v5-card--callig > .v5-card__icon,
#screenHome .v5-card--callig > .v5-card__body,
#screenHome .v5-card--callig > .v5-card__arrow {
  position: relative;
  z-index: 1;
}
/* Add a subtle gold accent line to the dua card */
#screenHome .v5-card--callig::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14%;
  bottom: 14%;
  width: 2px;
  background: linear-gradient(180deg,
    transparent,
    rgba(212, 184, 122, 0.45) 50%,
    transparent);
  z-index: 1;
  pointer-events: none;
}

/* ================================================================
   MOBILE QA FIXES — header/back-button alignment across iPhone 13–17
   ================================================================
   Goals:
   - Hide the global hamburger on screens that have their own back button
     (Surah, Tajweed, Dhikr, Prayer Log, Qibla, Upgrade) so the two icons
     don't stack on top of each other.
   - Show the hamburger only on top-level tab screens (Home, Surah List,
     Stories, Noor, Journey).
   - Standardize all top icon buttons to 36×36 with a consistent y-position.
   - Respect iOS safe-area insets for notched devices (iPhone 13–17 all
     have safe-area-inset-top: 47–59px in the browser shell).
   - Fix the Upgrade close button position regression (left:-16px hack).
*/

/* 1. Hamburger — match icon-button visual size and respect safe area */
.cd-hamburger {
  /* Pull from 14px to align with .back-btn at 16/20 in screen-header */
  top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
  left: 20px !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
}

/* 2. Hide the global hamburger on sub-screens (those with their own back button)
      so the two icons don't stack. The body gets a class set by JS that names the
      currently active screen; we hide hamburger when on any of these. */
body:has(#screenQuran.active)    .cd-hamburger,
body:has(#screenTajweed.active)  .cd-hamburger,
body:has(#screenDhikr.active)    .cd-hamburger,
body:has(#screenPrayer.active)   .cd-hamburger,
body:has(#screenQibla.active)    .cd-hamburger,
body:has(#screenUpgrade.active)  .cd-hamburger,
body:has(#screenSplash.active)   .cd-hamburger,
body:has(#screenOnboard1.active) .cd-hamburger,
body:has(#screenOnboard2.active) .cd-hamburger,
body:has(#screenOnboard3.active) .cd-hamburger {
  display: none !important;
}

/* On Surah List (a top-level tab destination), suppress its built-in
   back button — the hamburger handles navigation, and the bottom tab
   bar already handles cross-tab movement. The leftover back button was
   visually overlapping the hamburger. We keep a 36px placeholder on the
   left so the title stays optically centered between the hamburger and
   the right edge. */
#screenSurahList .screen-header > .back-btn {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 3. Universal top-icon row alignment.
      Every .screen-header sits at the very top of its screen. Force a
      consistent padding-top that respects the safe-area inset so back/icon
      buttons line up identically on iPhone 13 through iPhone 17 Pro Max. */
.screen-header {
  padding-top: calc(env(safe-area-inset-top, 0px) + 14px) !important;
  padding-bottom: 14px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* The center column of the header should grow and stay centered */
.screen-header__center {
  flex: 1 1 auto;
  text-align: center;
  min-width: 0;
}
.screen-header__title {
  font-size: 18px !important;
  line-height: 1.2;
}
.screen-header__sub {
  font-size: 12px !important;
  margin-top: 2px;
}

/* All top action buttons share the exact same metrics */
.screen-header .back-btn,
.screen-header .icon-btn,
.screen-header .surah-play-btn {
  width: 36px !important;
  height: 36px !important;
  flex: 0 0 36px;
  align-self: center;
}

/* 4. Surah screen has 3 right-side icons (play + settings); ensure they don't
      get cramped on narrow viewports (iPhone 13 mini-ish 375 etc.) */
#screenQuran .screen-header { gap: 8px !important; }
#screenQuran .screen-header__center { padding: 0 4px; }

/* 5. Tab bar — respect safe-area-inset-bottom for home indicator */
.tab-bar {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6px) !important;
}

/* 6. Floating screens like Stories / Noor that don't have a screen-header.
      They show the hamburger as their only top-left chrome. Push their
      content down so the hamburger has breathing room and content doesn't
      collide with it on shorter iPhones. */
#screenStories,
#screenNoor {
  padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
}

/* 6b. Noor screen has its own hamburger duplicate (.cd-noor-menu) that was
       added before the global hamburger existed. Hide it — the global one
       in the top-left already handles drawer access. */
.cd-noor-menu { display: none !important; }

/* 7. Upgrade close button — kill the inherited left:-16px from `right:16` on
      `position: relative`. Force absolute positioning anchored to its parent. */
.upgrade-screen .upgrade-close {
  position: absolute !important;
  top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
  right: 16px !important;
  left: auto !important;
  z-index: 5 !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: rgba(11, 18, 34, 0.55) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}
.upgrade-screen .upgrade-close:hover {
  background: rgba(20, 32, 56, 0.7) !important;
  border-color: rgba(212, 184, 122, 0.25) !important;
}

/* 8. Drawer close button — same metric */
.cd-drawer-head .cd-drawer-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 9. Phone screen / shell — fluid width up to 440px (iPhone 17 Pro Max) so the
      app fills any of the supported devices. The previous fixed 390px width
      caused horizontal letterboxing on 393/428/430/440-wide viewports. */
@media (max-width: 480px) {
  .phone-frame, .phone-screen, .stage {
    width: 100% !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body { overflow: hidden; }
}


/* =================================================================
   10. More tab — full screen "quiet rooms" list
   ================================================================= */
.cd-more-screen {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 100%;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(20, 38, 58, 0.5), transparent 60%),
    linear-gradient(180deg, #050810 0%, #0a1020 60%, #050810 100%);
  color: var(--cd-text-1);
  padding-bottom: 92px;
}
.cd-more-header {
  padding: 60px 28px 24px;
  text-align: left;
}
.cd-more-eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cd-gold);
  opacity: 0.78;
  margin: 0 0 14px;
  font-weight: 500;
}
.cd-more-title {
  font-family: 'Playfair Display', 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--cd-text-1);
  margin: 0 0 12px;
}
.cd-more-sub {
  font-size: 13px;
  line-height: 1.6;
  color: var(--cd-text-2);
  margin: 0;
  max-width: 32ch;
}

.cd-more-list {
  display: flex; flex-direction: column;
  padding: 8px 14px 20px;
  margin-top: 6px;
}
.cd-more-item {
  display: flex; align-items: center;
  gap: 18px;
  width: 100%;
  padding: 22px 16px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 250, 240, 0.06);
  color: var(--cd-text-1);
  cursor: pointer;
  text-align: left;
  transition: background 280ms var(--cd-ease-out), padding-left 280ms var(--cd-ease-out);
}
.cd-more-item:first-child {
  border-top: 1px solid rgba(255, 250, 240, 0.06);
}
.cd-more-item:hover {
  background: rgba(255, 255, 255, 0.025);
  padding-left: 22px;
}
.cd-more-item:active { background: rgba(255, 255, 255, 0.04); }

.cd-more-num {
  font-family: 'Playfair Display', 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: var(--cd-gold);
  opacity: 0.62;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  width: 28px;
  text-align: left;
}
.cd-more-text {
  display: flex; flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.cd-more-label {
  font-family: 'Playfair Display', 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--cd-text-1);
}
.cd-more-desc {
  font-size: 12px;
  line-height: 1.5;
  color: var(--cd-text-3);
  letter-spacing: 0.01em;
}
.cd-more-arrow {
  color: var(--cd-text-3);
  flex-shrink: 0;
  transition: transform 280ms var(--cd-ease-out), color 280ms var(--cd-ease-out);
}
.cd-more-item:hover .cd-more-arrow {
  color: var(--cd-gold);
  transform: translateX(3px);
}

.cd-more-foot {
  margin-top: auto;
  padding: 28px 28px 24px;
  text-align: center;
  border-top: 1px solid rgba(255, 250, 240, 0.04);
}
.cd-more-foot-ar {
  font-family: var(--cd-font-ar-display, 'Amiri', serif);
  font-size: 24px;
  color: var(--cd-gold);
  margin: 0;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.cd-more-foot-en {
  font-size: 11px;
  color: var(--cd-text-3);
  margin: 6px 0 0;
  letter-spacing: 0.02em;
}

/* More screen tab-bar pinned to bottom */
#screenMore .cd-more-screen { position: relative; min-height: 100vh; }
#screenMore .tab-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
}

/* =================================================================
   11. Top-right avatar button (Home only) + slide-in sheet
   ================================================================= */
.cd-avatar-btn {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 950;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 121, 0.22);
  background: rgba(11, 18, 34, 0.55);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  color: var(--cd-text-1);
  display: none;
  align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 240ms ease, transform 240ms ease, border-color 240ms ease;
}
.cd-avatar-btn svg { display: block; width: 30px; height: 30px; }
.cd-avatar-btn:hover {
  background: rgba(20, 32, 56, 0.7);
  border-color: rgba(212, 184, 122, 0.4);
}
.cd-avatar-btn:active { transform: scale(0.96); }
.phone-frame .cd-avatar-btn { position: absolute; }

/* Show only on Home screen */
body:has(#screenHome.active) .cd-avatar-btn { display: inline-flex; }

/* Sheet container */
.cd-avatar-sheet {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
}
.phone-frame .cd-avatar-sheet, .stage .cd-avatar-sheet { position: absolute; }

.cd-avatar-scrim {
  position: absolute; inset: 0;
  background: rgba(4, 6, 14, 0.55);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 280ms ease;
}
.cd-avatar-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 82%;
  max-width: 320px;
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(36, 78, 86, 0.18), transparent 60%),
    linear-gradient(180deg, #0b1322 0%, #070b16 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: -24px 0 48px rgba(0, 0, 0, 0.4);
  transform: translateX(104%);
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.cd-avatar-panel::before {
  content: "";
  position: absolute; inset: -20% auto auto -10%;
  width: 240px; height: 240px;
  background: url('assets/calligraphy/girih.webp') no-repeat center / contain;
  opacity: 0.05;
  pointer-events: none;
  filter: hue-rotate(-10deg) saturate(0.8);
}

.cd-avatar-sheet.cd-avatar-open { pointer-events: auto; }
.cd-avatar-sheet.cd-avatar-open .cd-avatar-scrim { opacity: 1; }
.cd-avatar-sheet.cd-avatar-open .cd-avatar-panel { transform: translateX(0); }
body.cd-avatar-locked { overflow: hidden; }

.cd-avatar-head {
  padding: 28px 22px 20px;
  display: flex; align-items: center;
  gap: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.cd-avatar-mark {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background:
    radial-gradient(60% 60% at 50% 40%, rgba(212, 184, 122, 0.32), transparent 70%),
    rgba(20, 28, 48, 0.9);
  border: 1px solid rgba(212, 184, 122, 0.28);
  color: var(--cd-gold);
  font-family: var(--cd-font-ar-display, 'Amiri', serif);
  font-size: 22px;
  font-weight: 600;
  flex-shrink: 0;
}
.cd-avatar-name {
  font-family: 'Playfair Display', serif;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--cd-text-1);
  margin: 0;
}
.cd-avatar-tag {
  font-size: 11px;
  color: var(--cd-text-3);
  margin: 3px 0 0;
  letter-spacing: 0.02em;
}

.cd-avatar-nav {
  padding: 14px 12px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.cd-avatar-item {
  width: 100%;
  display: flex; flex-direction: column;
  gap: 3px;
  padding: 14px 14px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--cd-text-1);
  cursor: pointer;
  text-align: left;
  transition: background 220ms ease, border-color 220ms ease;
}
.cd-avatar-item:hover {
  background: rgba(255, 255, 255, 0.035);
  border-color: rgba(255, 255, 255, 0.06);
}
.cd-avatar-item:active { transform: scale(0.99); }
.cd-avatar-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--cd-text-1);
  letter-spacing: 0.01em;
}
.cd-avatar-desc {
  font-size: 11px;
  color: var(--cd-text-3);
  letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
  .cd-avatar-panel { transition: none; }
  .cd-avatar-scrim { transition: none; }
}

/* =================================================================
   12. Toast (centered bottom — settings/signout feedback)
   ================================================================= */
.cd-toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translate(-50%, 12px);
  z-index: 1100;
  padding: 11px 18px;
  border-radius: 999px;
  background: rgba(11, 18, 34, 0.92);
  border: 1px solid rgba(212, 184, 122, 0.18);
  color: var(--cd-text-1);
  font-size: 12.5px;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms var(--cd-ease-out);
}
.cd-toast.cd-toast-show {
  opacity: 1;
  transform: translate(-50%, 0);
}
.phone-frame .cd-toast, .stage .cd-toast { position: absolute; }

/* =================================================================
   13. Noor — featured prompts (4 hero pills, replacing 16-prompt grid)
   ================================================================= */
.cd-noor-prompts--featured {
  gap: 10px;
}
.cd-noor-prompt--featured {
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid rgba(212, 184, 122, 0.14);
  background:
    linear-gradient(180deg, rgba(20, 30, 50, 0.45) 0%, rgba(15, 22, 38, 0.55) 100%);
  font-family: 'Playfair Display', 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: 0.005em;
  color: var(--cd-text-1);
  transition: border-color 280ms var(--cd-ease-out), background 280ms var(--cd-ease-out), transform 280ms var(--cd-ease-out);
}
.cd-noor-prompt--featured:hover {
  border-color: rgba(212, 184, 122, 0.32);
  background:
    linear-gradient(180deg, rgba(28, 42, 64, 0.6) 0%, rgba(20, 30, 50, 0.7) 100%);
  color: var(--cd-text-1);
  transform: translateY(-1px);
}

/* =================================================================
   14. MOBILE FIT — keep core content above the fold
   Real iPhones (Safari w/ chrome) give ~720-740px usable height.
   Compress vertical rhythm so Home, Noor, Stories, More all
   fit without scrolling on first paint. (≤480px)
   ================================================================= */
@media (max-width: 480px) {

  /* ----- Tab bar: tighter, lower, safer with notch ----- */
  .tab-bar {
    padding: 8px 0 !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
  }
  .tab {
    padding: 4px 10px !important;
    gap: 2px !important;
  }
  .tab svg { width: 20px !important; height: 20px !important; }
  .tab span { font-size: 10px !important; }

  /* ----- Avatar button: respect notch ----- */
  .cd-avatar-btn {
    top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
    right: 12px !important;
    width: 36px !important; height: 36px !important;
  }
  .cd-avatar-btn svg { width: 26px !important; height: 26px !important; }

  /* ----- HOME — compact rhythm, scrollable so heart-module + below-fold content reaches the user ----- */
  .v5-content {
    padding: 0 20px !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    padding-bottom: 96px !important; /* clear the 60px sticky tab-bar with breathing room */
    justify-content: flex-start !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain;
  }
  .v5-greeting {
    padding-top: 20px !important;
    margin-bottom: 16px !important;
  }
  .v5-greeting__salaam { font-size: 19px !important; }
  .v5-greeting__progress { font-size: 12px !important; margin-top: 4px !important; }

  .v5-hero { margin-bottom: 18px !important; }
  .v5-hero__label { font-size: 10px !important; margin-bottom: 8px !important; }
  .v5-hero__name { font-size: 48px !important; }
  .v5-hero__time { font-size: 14px !important; margin-top: 2px !important; }
  .v5-countdown { margin-top: 14px !important; }
  .v5-cd__num { font-size: 24px !important; }
  .v5-cd__label { font-size: 8px !important; margin-top: 2px !important; }
  .v5-cd__sep { font-size: 18px !important; }
  .v5-cd__unit { min-width: 38px !important; }
  .v5-cta {
    padding: 11px 28px !important;
    font-size: 14px !important;
    margin-top: 16px !important;
  }
  .v5-hero--complete .v5-hero__name { font-size: 32px !important; }

  .v5-tracker { margin-bottom: 18px !important; }
  .v5-tracker__row { gap: 10px !important; }
  .v5-dot__circle { width: 32px !important; height: 32px !important; }
  .v5-dot__name { font-size: 9px !important; }
  .v5-dot { padding: 4px 2px !important; gap: 6px !important; }
  .v5-tracker__msg { font-size: 11px !important; margin-top: 8px !important; }

  .v5-card {
    padding: 12px 16px !important;
    gap: 12px !important;
  }
  .v5-card__icon { width: 32px !important; height: 32px !important; }
  .v5-card__icon svg { width: 16px !important; height: 16px !important; }
  .v5-card__label { font-size: 9px !important; margin-bottom: 1px !important; }
  .v5-card__title { font-size: 14px !important; }

  /* ----- NOOR — fit intro + 4 prompts + input above fold ----- */
  .cd-noor-screen {
    padding-bottom: 76px !important;
  }
  #screenNoor .cd-noor-screen { min-height: 100dvh !important; }

  .cd-noor-header {
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 0 !important;
  }
  .cd-noor-eyebrow { font-size: 9px !important; margin-bottom: 4px !important; }
  .cd-noor-title { font-size: 24px !important; }
  .cd-noor-ar { font-size: 16px !important; margin-top: 2px !important; }

  .cd-noor-intro {
    margin: 12px 14px 4px !important;
    padding: 12px 14px !important;
    border-radius: 12px !important;
  }
  .cd-noor-intro p { font-size: 12px !important; line-height: 1.5 !important; }
  .cd-noor-intro-note { font-size: 10.5px !important; margin-top: 6px !important; }

  .cd-noor-topics {
    padding: 10px 14px 0 !important;
    gap: 10px !important;
  }
  .cd-noor-topic-title { font-size: 12px !important; }
  .cd-noor-prompts { gap: 8px !important; }
  .cd-noor-prompt--featured {
    padding: 13px 16px !important;
    font-size: 13.5px !important;
    border-radius: 13px !important;
  }
  .cd-noor-input-wrap {
    bottom: 56px !important;
    padding: 8px 12px 10px !important;
  }
  .cd-noor-topics { padding-bottom: 110px !important; }

  /* ----- MORE — compact list, footer + tab visible ----- */
  .cd-more-header {
    padding: calc(env(safe-area-inset-top, 0px) + 26px) 22px 14px !important;
  }
  .cd-more-eyebrow { font-size: 10px !important; margin-bottom: 8px !important; }
  .cd-more-title { font-size: 24px !important; margin-bottom: 8px !important; }
  .cd-more-sub { font-size: 12px !important; }
  .cd-more-list { padding: 4px 12px 10px !important; }
  .cd-more-item { padding: 14px 14px !important; gap: 14px !important; }
  .cd-more-num { font-size: 13px !important; width: 22px !important; }
  .cd-more-label { font-size: 17px !important; }
  .cd-more-desc { font-size: 11.5px !important; }
  .cd-more-foot { padding: 16px 22px 14px !important; }
  .cd-more-foot-ar { font-size: 20px !important; }
  .cd-more-foot-en { font-size: 10.5px !important; margin-top: 4px !important; }
  #screenMore .cd-more-screen { min-height: 100dvh !important; }
  .cd-more-screen { padding-bottom: 70px !important; }

  /* ----- STORIES — fit hero + start of "All Episodes" above fold ----- */
  .stories-screen {
    padding: calc(env(safe-area-inset-top, 0px) + 22px) 18px 80px !important;
  }
  .stories-header { margin-bottom: 16px !important; }
  .stories-header__title { font-size: 24px !important; margin-bottom: 2px !important; }
  .stories-header__subtitle { font-size: 12px !important; }
  .stories-featured { margin-bottom: 18px !important; }
  .sf-card__content { padding: 18px 16px !important; }
  .sf-card__badge { font-size: 10px !important; margin-bottom: 10px !important; padding: 2px 9px !important; }
  .sf-card__arabic { font-size: 18px !important; }
  .sf-card__title { font-size: 19px !important; }
  .sf-card__surah { font-size: 12px !important; margin-bottom: 8px !important; }
  .sf-card__desc { font-size: 12.5px !important; line-height: 1.45 !important; margin-bottom: 12px !important; }
  .sf-card__duration, .sf-card__theme { font-size: 11px !important; }
  .sf-card__play { width: 38px !important; height: 38px !important; }
  .stories-section { margin-bottom: 18px !important; }
  .stories-section__title { font-size: 11px !important; margin-bottom: 10px !important; }
  .stories-list { gap: 10px !important; }
  .sl-card { padding: 12px !important; gap: 12px !important; }
  .sl-card__num { width: 36px !important; height: 36px !important; font-size: 14px !important; }
  .sl-card__title { font-size: 14px !important; }
  .sl-card__sub { font-size: 11.5px !important; }
  .sl-card__dur { font-size: 10.5px !important; }
  .stories-coming { padding: 18px 16px !important; }
  .stories-coming__text { font-size: 13px !important; }
  .stories-coming__sub { font-size: 11.5px !important; }

  /* ----- AVATAR sheet — slimmer panel, content visible ----- */
  .cd-avatar-panel { width: 86% !important; max-width: 300px !important; }
  .cd-avatar-head { padding: calc(env(safe-area-inset-top, 0px) + 18px) 18px 14px !important; }
  .cd-avatar-mark { width: 38px !important; height: 38px !important; font-size: 18px !important; }
  .cd-avatar-name { font-size: 15px !important; }
  .cd-avatar-tag { font-size: 10.5px !important; }
  .cd-avatar-nav { padding: 10px 10px !important; }
  .cd-avatar-item { padding: 12px 12px !important; }
  .cd-avatar-label { font-size: 13.5px !important; }
  .cd-avatar-desc { font-size: 10.5px !important; }
}

/* Extra-short viewport (≤700px tall): ultra-compact home + tracker */
@media (max-width: 480px) and (max-height: 720px) {
  .v5-greeting { padding-top: 14px !important; margin-bottom: 12px !important; }
  .v5-hero { margin-bottom: 14px !important; }
  .v5-hero__name { font-size: 40px !important; }
  .v5-countdown { margin-top: 10px !important; }
  .v5-cd__num { font-size: 22px !important; }
  .v5-cta { padding: 10px 24px !important; margin-top: 12px !important; }
  .v5-tracker { margin-bottom: 14px !important; }
  .v5-tracker__row { gap: 8px !important; }
  .v5-dot__circle { width: 30px !important; height: 30px !important; }
  .v5-card { padding: 11px 14px !important; }

  .cd-noor-intro { margin: 10px 14px 2px !important; padding: 10px 12px !important; }
  .cd-noor-intro p { font-size: 11.5px !important; }
  .cd-noor-prompt--featured { padding: 11px 14px !important; font-size: 13px !important; }

  .stories-header { margin-bottom: 12px !important; }
  .sf-card__content { padding: 14px 14px !important; }
  .sf-card__desc { font-size: 12px !important; margin-bottom: 10px !important; }
}

/* =================================================================
   15. MOBILE FIT — top-area trims (bismillah ornament, content padding)
   ================================================================= */
@media (max-width: 480px) {
  /* Tighter content top-padding — safe-area is added BELOW header
     because we don't actually need full safe-area + 20px greeting padding */
  .v5-content {
    padding-top: max(8px, calc(env(safe-area-inset-top, 0px) - 8px)) !important;
  }
  /* Compress bismillah ornament */
  #screenHome .v5-bismillah {
    margin: 0 0 12px !important;
    padding: 6px 10px 10px !important;
  }
  #screenHome .v5-bismillah img {
    height: 52px !important;
  }
  /* Hide girih divider on mobile (it's decorative and adds rendering cost) */
  #screenHome .v5-girih-div { display: none !important; }
  /* Reduce greeting top padding since bismillah already breathes */
  .v5-greeting { padding-top: 8px !important; margin-bottom: 12px !important; }
  /* Slightly smaller hero again to ensure card isn't behind tab bar */
  .v5-hero { margin-bottom: 14px !important; }
  .v5-hero__name { font-size: 44px !important; }
  .v5-tracker { margin-bottom: 14px !important; }
}

/* =================================================================
   16. MOBILE FIT — secondary screens (Profile, Tajweed, Upgrade)
   ================================================================= */
@media (max-width: 480px) {
  /* ---- Profile / Your Journey ---- */
  .profile-screen .screen-header { padding: 12px 16px !important; }
  .profile-screen .screen-header__title { font-size: 18px !important; }
  .journey-hero { padding: 14px 16px !important; margin: 8px 14px 12px !important; }
  .journey-streak { width: 180px !important; height: 180px !important; }
  .journey-streak__num { font-size: 44px !important; }
  .journey-streak__label { font-size: 11px !important; letter-spacing: 0.18em !important; }
  .journey-quote { font-size: 13px !important; margin-top: 10px !important; line-height: 1.45 !important; }
  .journey-stats { margin: 0 14px 12px !important; gap: 8px !important; }
  .js-card { padding: 12px 8px !important; }
  .js-card__val { font-size: 26px !important; }
  .js-card__label { font-size: 10px !important; letter-spacing: 0.12em !important; }
  .journey-log-btn { margin: 0 14px 12px !important; padding: 12px 14px !important; }
  .journey-log-btn__icon { width: 34px !important; height: 34px !important; }
  .journey-log-btn__label { font-size: 14px !important; }
  .journey-log-btn__desc { font-size: 11px !important; }
  .milestones { margin: 0 14px !important; padding: 12px 12px 80px !important; }
  .milestones__title { font-size: 12px !important; margin-bottom: 8px !important; }
  .milestone { padding: 10px 12px !important; gap: 10px !important; }
  .milestone__icon { width: 32px !important; height: 32px !important; font-size: 14px !important; }
  .milestone__info { gap: 2px !important; }
  .milestone__title { font-size: 13px !important; }
  .milestone__sub { font-size: 11px !important; }

  /* ---- Tajweed / Learn to Recite ---- */
  .tajweed-screen .screen-header { padding: 12px 16px !important; }
  .tajweed-screen .screen-header__title { font-size: 18px !important; }
  .recite-picker { padding: 8px 14px 80px !important; }
  .recite-picker__sub { font-size: 13px !important; margin-bottom: 10px !important; }
  .recite-section-title { font-size: 11px !important; letter-spacing: 0.16em !important; margin: 12px 0 8px !important; }
  .recite-grid { gap: 10px !important; margin-bottom: 6px !important; }
  .recite-card { padding: 14px !important; min-height: 96px !important; }
  .recite-card--featured { min-height: 108px !important; }
  .recite-card__title { font-size: 15px !important; }
  .recite-card__sub { font-size: 12px !important; line-height: 1.35 !important; }
  .recite-list { gap: 6px !important; }
  .recite-list-item { padding: 12px 14px !important; min-height: 56px !important; }
  .recite-list-item__num { font-size: 14px !important; }
  .recite-list-item__name { font-size: 14px !important; }
  .recite-list-item__verses { font-size: 11px !important; }
  .recite-search-wrap { margin-top: 4px !important; }
  .recite-search { font-size: 13px !important; padding: 10px 12px 10px 36px !important; }

  /* ---- Upgrade / Sakina Plus ---- */
  .upgrade-screen .upgrade-content { padding: 36px 18px 80px !important; }
  .upgrade-close { top: 12px !important; right: 12px !important; width: 32px !important; height: 32px !important; }
  .upgrade-badge { font-size: 11px !important; padding: 6px 14px !important; margin-bottom: 14px !important; }
  .upgrade-title { font-size: 38px !important; line-height: 1.05 !important; margin-bottom: 10px !important; }
  .upgrade-subtitle { font-size: 14px !important; line-height: 1.45 !important; margin-bottom: 18px !important; }
  .upgrade-features { gap: 8px !important; margin-bottom: 16px !important; }
  .uf-item { padding: 12px 14px !important; gap: 10px !important; }
  .uf-item__icon { width: 32px !important; height: 32px !important; }
  .uf-item__title { font-size: 14px !important; }
  .uf-item__desc { font-size: 12px !important; line-height: 1.4 !important; }
  .upgrade-plans { gap: 8px !important; margin-bottom: 14px !important; }
  .plan-card { padding: 14px 12px !important; }
  .plan-card__price { font-size: 28px !important; }
  .plan-card__period { font-size: 12px !important; }
  .plan-card__save { font-size: 11px !important; }
  .plan-card__badge { font-size: 9px !important; padding: 3px 8px !important; }
  .upgrade-cta { padding: 14px !important; font-size: 14px !important; }
  .upgrade-note { font-size: 11px !important; }
}

/* =================================================================
   17. MOBILE STABILITY HARDENING (iOS Safari OOM/crash prevention)
   - backdrop-filter is the #1 cause of mobile Safari memory blow-ups
     when many overlapping translucent surfaces compose at once.
   - Continuous animations on every screen (even inactive ones) compound
     the memory cost. Pause animations on screens that aren't .active.
   - Reduce blur radius on the glow halo on mobile.
   ================================================================= */
@media (max-width: 480px) {
  /* Drop all backdrop-filters on phones — replaced by solid translucent
     surfaces (the visual difference is negligible against the navy bg) */
  *,
  *::before,
  *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Pause heavy decorative animations on screens that aren't visible.
     The compositor still pays for off-screen animated layers in Safari. */
  .screen:not(.active) *,
  .screen:not(.active) {
    animation-play-state: paused !important;
  }

  /* Lighter glow on mobile — radial-gradient + blur is GPU-expensive */
  .cd-atmosphere__glow {
    filter: none !important;
    width: 320px !important;
    height: 320px !important;
    opacity: 0.55 !important;
    animation: none !important;
  }

  /* Vignette is decorative and adds another full-screen composited layer */
  .cd-atmosphere__vignette { display: none !important; }

  /* Pattern overlay on a 320px tile against the whole screen is cheap,
     but mix-blend-mode: screen forces a layer. Drop the blend on mobile. */
  .cd-atmosphere__pattern {
    mix-blend-mode: normal !important;
    opacity: 0.018 !important;
  }
}

/* Reduced motion: fully disable decorative atmosphere everywhere */
@media (prefers-reduced-motion: reduce) {
  .cd-particle, .cd-star, .v5-star,
  .cd-atmosphere__glow {
    animation: none !important;
    display: none !important;
  }
}

/* =================================================================
   STORIES TAB CRASH MITIGATION — aggressive mobile GPU/memory relief
   =================================================================
   Symptom: app crashes on real iOS Safari when tapping the Stories
   tab from the Home screen. Cloud Playwright cannot reproduce — this
   is a real-device memory ceiling issue (Mobile Safari OOM-kills the
   page when GPU layer count + decoded image bitmaps exceed ~250MB).

   Triggers identified:
   - Home tile decoration adds ~6 always-animating GPU layers
     (girih seal halo, core pulse, 4 sparks, shimmer sweep, flourish)
   - Today's-Dua rosette spins continuously with a heavy filter chain
     (saturate + sepia + hue-rotate + brightness + drop-shadow)
   - Screen transition keeps both screens composited for 400ms via
     the .exit class — peak memory doubles during the swap.

   Fix strategy:
   - On phones, kill the rosette filter chain + spin animation
   - On phones, drop the home tile drifting sparks + shimmer sweep
     (girih seal stays — it's the focal art piece)
   - On phones, shorten the .exit cross-fade so dual composite is
     released sooner.
   - Belt-and-braces: pause heart-tile animations when home isn't
     active (already done globally, restated here for safety).
   ================================================================= */
@media (max-width: 480px) {
  /* 1) Today's Dua rosette: drop expensive filter chain + spin */
  #screenHome .v5-card__callig img {
    filter: saturate(0.30) sepia(0.20) brightness(1.0) !important;
    animation: none !important;
    transform: none !important;
  }
  #screenHome .v5-card__callig {
    -webkit-mask-image: none !important;
            mask-image: none !important;
  }

  /* 2) Home tile: keep the seal (focal point) but drop the
     four drifting sparks and the shimmer sweep — together they
     are 5 always-animating composited layers. */
  .heart-module .ha-tile-sparks,
  .heart-module .ha-tile-shimmer {
    display: none !important;
  }
  /* Slow the seal halo + core pulse further on phones */
  .heart-module .ha-tile-seal__halo { animation-duration: 12s !important; }
  .heart-module .ha-tile-seal__core { animation-duration: 9s !important; }
  /* Drop flourish shimmer (still draws on first paint) */
  .heart-module .ha-tile-flourish path {
    animation: ha-tile-flourish-draw 2200ms cubic-bezier(.6,.2,.3,1) 200ms forwards !important;
  }

  /* 3) Screen transition: shorten dual-composite window so the
     leaving screen is dropped from the compositor sooner. The .exit
     class is removed by JS after 400ms — until then both screens are
     painted. Force an instant fade on phones. */
  .screen.exit {
    transition: opacity 120ms ease-out !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 4) Belt-and-braces: ensure all heart-tile animations + the
     rosette spin pause when not on home. (Global rule already does
     this, but Safari sometimes ignores animation-play-state for
     transform animations on detached compositor layers — explicit
     `animation: none` is more reliable.) */
  .screen:not(.active) .ha-tile-seal__rotCw,
  .screen:not(.active) .ha-tile-seal__rotCcw,
  .screen:not(.active) .ha-tile-seal__halo,
  .screen:not(.active) .ha-tile-seal__core,
  .screen:not(.active) .ha-tile-flourish path,
  .screen:not(.active) .v5-card__callig img,
  .screen:not(.active) .cd-rosette,
  .screen:not(.active) .cd-particle,
  .screen:not(.active) .v5-star,
  .screen:not(.active) .cd-star {
    animation: none !important;
  }

  /* 5) Calligraphy backdrops behind Stories cards: drop on phones.
     Each .sf-card / .sl-card decodes a separate webp into a bitmap
     just to show a 14% opacity peek — net cost on iOS is ~3-4MB per
     card retained until GC. */
  .sf-card[data-surah]::after,
  .sl-card[data-surah]::after {
    display: none !important;
  }

  /* 6) Stories ambient calligraphy backdrop on the screen itself */
  #screenStories::before {
    display: none !important;
  }
}



/* ============================================================
   HOME FIT-TO-SCREEN (mobile, no-scroll)
   Compress vertical rhythm so the entire home page is visible
   on iPhone (390×844) without scrolling. Tab bar = 60px, plus
   safe-area-inset-bottom. Appended last so it cascades over
   prior mobile rules.
   ============================================================ */
@media (max-width: 480px) {
  /* Lock the home scroll container to viewport — no scroll. */
  #screenHome .v5-content,
  #screenHome.v5-screen .v5-content {
    overflow: hidden !important;
    overflow-y: hidden !important;
    padding-top: 16px !important;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Bismillah ornament: trim height + margins */
  #screenHome .v5-bismillah {
    margin-bottom: 6px !important;
    padding-top: 2px !important;
    padding-bottom: 4px !important;
  }
  #screenHome .v5-bismillah,
  #screenHome .v5-bismillah img,
  #screenHome .v5-bismillah svg {
    height: 38px !important;
    max-height: 38px !important;
  }

  /* Greeting block: tighten */
  #screenHome .v5-greeting {
    padding-top: 2px !important;
    margin-bottom: 8px !important;
  }

  /* Hero (Next Prayer + countdown): biggest target */
  #screenHome .v5-hero {
    padding-top: 12px !important;
    padding-bottom: 6px !important;
    margin-bottom: 8px !important;
  }
  #screenHome .v5-countdown {
    margin-top: 8px !important;
  }

  /* Prayer tracker (5 dots) */
  #screenHome .v5-tracker {
    margin-bottom: 8px !important;
  }

  /* Today's Dua card wrap */
  #screenHome .v5-card-wrap {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }

  /* For Your Heart module */
  #screenHome .heart-module {
    margin-top: 8px !important;
  }
}

/* ============================================================
   QIBLA — Activate Live Compass button (iOS permission CTA)
   ============================================================ */
.qibla-activate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  padding: 14px 20px;
  border-radius: 14px;
  border: 1px solid rgba(16, 185, 129, 0.45);
  background: linear-gradient(180deg, rgba(16,185,129,0.18), rgba(16,185,129,0.08));
  color: #d4f5e8;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all 200ms cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
  -webkit-tap-highlight-color: transparent;
}
.qibla-activate-btn:hover:not(:disabled),
.qibla-activate-btn:active:not(:disabled) {
  background: linear-gradient(180deg, rgba(16,185,129,0.28), rgba(16,185,129,0.14));
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.25);
}
.qibla-activate-btn:disabled {
  cursor: default;
  opacity: 0.85;
}
.qibla-activate-btn svg {
  flex-shrink: 0;
  color: #10b981;
}
.qibla-activate-btn--active {
  background: linear-gradient(180deg, rgba(16,185,129,0.35), rgba(16,185,129,0.22));
  border-color: rgba(16, 185, 129, 0.8);
  color: #fafaf6;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.35), 0 4px 16px rgba(16, 185, 129, 0.2);
}
.qibla-activate-btn--active svg {
  color: #fafaf6;
  animation: qiblaPulse 2.4s ease-in-out infinite;
}
@keyframes qiblaPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

/* ============================================================
   QIBLA — Help panel for permission denied / errors
   ============================================================ */
.qibla-help-panel {
  margin-top: 14px;
  padding: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  border-radius: 14px;
  border: 1px solid transparent;
  background: rgba(212, 175, 106, 0.06);
  transition: max-height 320ms cubic-bezier(0.16, 1, 0.3, 1),
              opacity 240ms ease,
              padding 240ms ease,
              border-color 240ms ease;
}
.qibla-help-panel.open {
  max-height: 360px;
  opacity: 1;
  padding: 16px 18px;
  border-color: rgba(212, 175, 106, 0.28);
}
.qibla-help-panel__title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d4af6a;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.qibla-help-panel__title svg {
  flex-shrink: 0;
}
.qibla-help-panel__steps {
  list-style: none;
  counter-reset: helpstep;
  padding: 0;
  margin: 0;
}
.qibla-help-panel__steps li {
  counter-increment: helpstep;
  position: relative;
  padding: 8px 0 8px 30px;
  color: rgba(245, 240, 232, 0.86);
  font-size: 14px;
  line-height: 1.45;
  border-top: 1px solid rgba(245, 240, 232, 0.06);
}
.qibla-help-panel__steps li:first-child { border-top: none; }
.qibla-help-panel__steps li::before {
  content: counter(helpstep);
  position: absolute;
  left: 0;
  top: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(212, 175, 106, 0.18);
  color: #d4af6a;
  font-size: 12px;
  font-weight: 700;
}
.qibla-help-panel__steps li strong {
  color: #fafaf6;
  font-weight: 600;
}

/* ============================================================
   QA FIX — surah list horizontal overflow
   The ::before Arabic backdrop sits at right:-30px font-size:220px
   which pushes layout 30px past viewport on mobile.
   Constrain the screen container itself.
   ============================================================ */
.surah-list-screen {
  overflow-x: hidden !important;
}
.surah-list-screen::before {
  max-width: 100vw;
}

/* QA FIX — guard against any screen overflowing horizontally on mobile */
@media (max-width: 480px) {
  .screen { overflow-x: hidden; }
}