/* ============================================================
   SAKINA DESIGN SYSTEM — app.css
   Philosophy: A prayer rug unrolled in a quiet room.
   ============================================================ */


/* --- CSS Variables (Light Mode Default) --- */
:root {
  /* Colors — Light */
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --surface-el: #F5F3EE;
  --text: #1A1A1A;
  --text2: #6B6B6B;
  --text3: #A3A3A3;
  --emerald: #0D6B5E;
  --emerald-lt: #E6F5F0;
  --gold: #C9A84C;
  --gold-lt: #FDF6E3;
  --err: #D4493F;
  --err-lt: #FEF2F1;
  --success: #2D8B5F;
  --success-lt: #E8F8EE;
  --border: #E8E5DE;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.10);

  /* Typography */
  --f-display: 'Playfair Display', Georgia, serif;
  --f-body: 'Satoshi', -apple-system, sans-serif;
  --f-arabic: 'Amiri', serif;
  --f-mono: 'JetBrains Mono', monospace;

  /* Spacing */
  --sp-2: 2px;
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-48: 48px;
  --sp-64: 64px;

  /* Radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-full: 999px;

  /* Motion */
  --ease-micro: 150ms ease-out;
  --ease-std: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-emp: 400ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-cel: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --- Dark Mode --- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111110;
    --surface: #1A1918;
    --surface-el: #222120;
    --text: #E8E6E1;
    --text2: #8A8885;
    --text3: #5A5856;
    --emerald: #3DBFA0;
    --emerald-lt: rgba(61,191,160,0.12);
    --gold: #D4B564;
    --gold-lt: rgba(212,181,100,0.12);
    --err: #E8675C;
    --err-lt: rgba(232,103,92,0.12);
    --success: #4DAB7C;
    --success-lt: rgba(77,171,124,0.12);
    --border: #2E2D2B;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
  }
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--f-body);
  background: #0F0F0E;
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  font-size: inherit;
}

/* ============================================================
   PHONE FRAME (Desktop wrapper)
   ============================================================ */
.phone-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 24px;
}

.phone-screen {
  width: 390px;
  height: 844px;
  border-radius: 44px;
  overflow: hidden;
  background: var(--bg);
  position: relative;
  box-shadow: 
    0 0 0 2px #2A2A28,
    0 0 0 6px #1A1A18,
    0 20px 60px rgba(0,0,0,0.5);
}

.phone-label {
  font-family: var(--f-body);
  color: #666;
  font-size: 13px;
  margin-top: 20px;
  letter-spacing: 0.02em;
}

.phone-sublabel {
  font-family: var(--f-body);
  color: #444;
  font-size: 12px;
  margin-top: 4px;
}

/* ============================================================
   SCREEN SYSTEM
   ============================================================ */
.screen {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease-emp), transform var(--ease-emp);
  transform: translateX(20px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.screen::-webkit-scrollbar { width: 0; }

.screen.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
  z-index: 1;
}

.screen.exit {
  opacity: 0;
  transform: translateX(-20px);
}

/* ============================================================
   LIVING BREATH ANIMATION — The Signature
   ============================================================ */
@keyframes livingBreath {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.08); }
}

@keyframes livingBreathGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(13,107,94,0.0); }
  50% { box-shadow: 0 0 40px rgba(13,107,94,0.15); }
}

@media (prefers-color-scheme: dark) {
  @keyframes livingBreathGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(61,191,160,0.0); }
    50% { box-shadow: 0 0 40px rgba(61,191,160,0.12); }
  }
}

/* ============================================================
   COMMON COMPONENTS
   ============================================================ */

/* --- Buttons --- */
.btn-primary {
  background: var(--emerald);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: var(--r-full);
  transition: all var(--ease-micro);
  letter-spacing: 0.01em;
}

.btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(0.98); }

.btn-secondary {
  background: var(--surface-el);
  color: var(--text);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 32px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  transition: all var(--ease-micro);
}

.btn-secondary:hover { background: var(--border); }

.btn-wide { width: 100%; text-align: center; }

.btn-bottom {
  margin-top: auto;
}

/* --- Screen Header --- */
.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: var(--sp-16) var(--sp-24);
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, #F5F2EB 0%, var(--bg) 100%);
  z-index: 10;
  animation: none;
  box-shadow: 0 1px 8px rgba(0,0,0,0.04);
}

.screen-header__center {
  text-align: center;
  flex: 1;
}

.screen-header__title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.screen-header__sub {
  font-size: 12px;
  color: var(--text3);
  margin-top: 2px;
}

.back-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  color: var(--text);
  transition: background var(--ease-micro);
}

.back-btn:hover { background: var(--surface-el); }

.icon-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  color: var(--text2);
  transition: all var(--ease-micro);
}

.icon-btn:hover { background: var(--surface-el); color: var(--text); }

/* --- Tab Bar --- */
.tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: var(--sp-8) 0;
  padding-bottom: max(var(--sp-8), env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: none;
  box-shadow: 0 -1px 12px rgba(0,0,0,0.04);
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--sp-4) var(--sp-12);
  color: var(--text3);
  font-size: 10px;
  font-weight: 500;
  transition: color var(--ease-micro);
  border-radius: var(--r-sm);
}

.tab.active { color: var(--emerald); }
.tab:hover:not(.active) { color: var(--text2); }

.tab svg { stroke: currentColor; }

/* ============================================================
   SPLASH SCREEN
   ============================================================ */
.splash {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--sp-48);
  text-align: center;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

.splash__breath {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--emerald-lt) 0%, transparent 70%);
  animation: livingBreath 4s ease-in-out infinite;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
}

.splash__logo {
  width: 72px;
  height: 72px;
  color: var(--emerald);
  margin-bottom: var(--sp-24);
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 2px 8px rgba(13,107,94,0.2));
}

.splash__name {
  font-family: var(--f-display);
  font-size: 42px;
  font-weight: 700;
  color: var(--text);
  position: relative;
  z-index: 1;
  letter-spacing: -0.01em;
}

.splash__tagline {
  font-size: 16px;
  color: var(--text2);
  margin: var(--sp-8) 0 var(--sp-48);
  position: relative;
  z-index: 1;
}

.splash .btn-primary {
  position: relative;
  z-index: 1;
  min-width: 200px;
}

/* ============================================================
   ONBOARDING SCREENS
   ============================================================ */
.onboard {
  display: flex;
  flex-direction: column;
  padding: var(--sp-48) var(--sp-24) var(--sp-32);
  height: 100%;
}

.onboard--center {
  align-items: center;
  text-align: center;
}

.onboard__step {
  font-size: 12px;
  color: var(--emerald);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-16);
}

.onboard__title {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: var(--sp-8);
}

.onboard__subtitle {
  font-size: 15px;
  color: var(--text2);
  margin-bottom: var(--sp-32);
  line-height: 1.5;
}

/* Option pills (multi-select) */
.onboard__options {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  margin-bottom: var(--sp-32);
}

.option-pill {
  padding: var(--sp-16);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-size: 15px;
  color: var(--text);
  text-align: left;
  transition: all var(--ease-micro);
  background: var(--surface);
}

.option-pill:hover { border-color: var(--emerald); }

.option-pill.selected {
  border-color: var(--emerald);
  background: var(--emerald-lt);
  color: var(--emerald);
  font-weight: 500;
}

/* Option cards (single-select) */
.option-card {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-16);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  text-align: left;
  transition: all var(--ease-micro);
  background: var(--surface);
  width: 100%;
}

.option-card.active {
  border-color: var(--emerald);
  background: var(--emerald-lt);
}

.option-card__icon { font-size: 24px; }
.option-card__name { font-weight: 600; font-size: 15px; display: block; }
.option-card__desc { font-size: 13px; color: var(--text2); display: block; margin-top: 2px; }

/* Time selector */
.time-selector {
  display: flex;
  gap: var(--sp-12);
  margin-bottom: var(--sp-32);
}

.time-btn {
  flex: 1;
  padding: var(--sp-16) var(--sp-12);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  font-size: 15px;
  font-weight: 500;
  color: var(--text2);
  transition: all var(--ease-micro);
  background: var(--surface);
}

.time-btn.active {
  border-color: var(--emerald);
  background: var(--emerald-lt);
  color: var(--emerald);
  font-weight: 600;
}

.time-btn:hover:not(.active) { border-color: var(--text3); }

/* Commitment note */
.commitment-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  padding: var(--sp-16);
  background: var(--gold-lt);
  border-radius: var(--r-md);
  margin-bottom: var(--sp-32);
  text-align: left;
  width: 100%;
}

.commitment-note__icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }

.commitment-note p {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.5;
}

/* ============================================================
   HOME SCREEN
   ============================================================ */
.home {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: 0;
}

.home__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-16) var(--sp-24);
  padding-top: var(--sp-24);
  animation: livingBreathGlow 4s ease-in-out infinite;
}

.home__salaam {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
}

.home__date {
  font-size: 13px;
  color: var(--text3);
  margin-top: 2px;
}

.home__streak {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-12);
  background: var(--emerald-lt);
  border-radius: var(--r-full);
  cursor: pointer;
  transition: all var(--ease-micro);
}

.home__streak:hover { transform: scale(1.05); }

.streak-flame { font-size: 16px; }
.streak-count { font-size: 14px; font-weight: 700; color: var(--emerald); font-family: var(--f-mono); }

/* Prayer Ring */
.prayer-ring-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-16) var(--sp-24);
  cursor: pointer;
}

.prayer-ring {
  position: relative;
  width: 180px;
  height: 180px;
}

.prayer-ring svg { width: 100%; height: 100%; }

.prayer-ring__track {
  fill: none;
  stroke: var(--border);
  stroke-width: 6;
}

.prayer-ring__fill {
  fill: none;
  stroke: var(--emerald);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 553;
  stroke-dashoffset: 332;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.prayer-dot {
  fill: var(--border);
  transition: all var(--ease-std);
}

.prayer-dot--done { fill: var(--emerald); }
.prayer-dot--next { fill: var(--gold); animation: livingBreath 4s ease-in-out infinite; }

.prayer-ring__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.prayer-ring__count {
  font-family: var(--f-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.prayer-ring__label {
  font-size: 13px;
  color: var(--text3);
  margin-top: 4px;
}

.prayer-ring__names {
  display: flex;
  justify-content: center;
  gap: var(--sp-16);
  margin-top: var(--sp-12);
}

.pname {
  font-size: 12px;
  color: var(--text3);
  font-weight: 500;
}

.pname--done { color: var(--emerald); }

.pname--next {
  color: var(--gold);
  font-weight: 600;
}

.pname--next small {
  font-size: 10px;
  opacity: 0.8;
}

/* Daily Verse Card */
.verse-card {
  margin: var(--sp-8) var(--sp-24);
  padding: var(--sp-24);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: all var(--ease-std);
}

.verse-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.verse-card__arabic {
  font-family: var(--f-arabic);
  font-size: 22px;
  color: var(--text);
  text-align: center;
  line-height: 1.8;
  direction: rtl;
}

.verse-card__translation {
  font-size: 14px;
  color: var(--text2);
  text-align: center;
  margin-top: var(--sp-8);
  font-style: italic;
}

.verse-card__ref {
  font-size: 11px;
  color: var(--text3);
  text-align: center;
  margin-top: var(--sp-8);
  letter-spacing: 0.04em;
}

.verse-card__action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  color: var(--emerald);
  font-size: 13px;
  font-weight: 600;
  margin-top: var(--sp-16);
}

/* Quick Actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-12);
  padding: var(--sp-16) var(--sp-24);
}

.quick-actions--5 {
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-8);
}

.quick-actions--5 .quick-action {
  padding: var(--sp-12) var(--sp-4);
}

.quick-actions--5 .quick-action__icon {
  font-size: 20px;
}

.quick-actions--5 .quick-action__label {
  font-size: 10px;
}

.quick-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-16) var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: all var(--ease-micro);
}

.quick-action:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.quick-action__icon { font-size: 22px; }
.quick-action__label { font-size: 11px; color: var(--text2); font-weight: 500; }

/* Consistency Vine */
.vine-section {
  padding: var(--sp-16) var(--sp-24);
  margin-bottom: var(--sp-8);
}

.vine-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-12);
}

.vine-header__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.vine-header__period {
  font-size: 12px;
  color: var(--text3);
}

.vine-track {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
}

.vine-day {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}

.vine-day::after {
  content: attr(data-day);
  font-size: 10px;
  color: var(--text3);
  font-weight: 500;
}

.vine-leaf {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  background: var(--surface-el);
  font-size: 18px;
  transition: all var(--ease-std);
  color: var(--text3);
}

.vine-leaf--full { background: var(--emerald-lt); }
.vine-leaf--partial { background: var(--gold-lt); }
.vine-leaf--growing { background: var(--emerald-lt); animation: livingBreath 4s ease-in-out infinite; }


/* ============================================================
   HOME V3 — Sakina: Divine Tranquility
   Motion: settling (ease-out 700ms), tactile (overshoot 300ms),
           ambient (sine 6s). Colors locked — motion brings life.
   ============================================================ */

/* -- Easing tokens -- */
:root {
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-tactile: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-breathe: cubic-bezier(0.37, 0, 0.63, 1);
}

.home--v3, .home--v4 {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: 72px;
  gap: 0;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
  background: transparent;
}

/* ---- Breathing Atmosphere ---- */
.hv3-atmosphere {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 420px;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.hv3-atmosphere__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  will-change: transform, opacity;
}

.hv3-atmosphere__orb--1 {
  width: 280px; height: 280px;
  top: -80px; right: -60px;
  background: radial-gradient(circle, rgba(13,107,94,0.12) 0%, transparent 70%);
  animation: atmBreath1 8s var(--ease-breathe) infinite;
}

.hv3-atmosphere__orb--2 {
  width: 200px; height: 200px;
  top: 60px; left: -40px;
  background: radial-gradient(circle, rgba(201,168,76,0.07) 0%, transparent 70%);
  animation: atmBreath2 10s var(--ease-breathe) infinite;
}

@keyframes atmBreath1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  50% { transform: translate(-30px, 20px) scale(1.08); opacity: 0.85; }
}
@keyframes atmBreath2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 1; }
  50% { transform: translate(20px, -15px) scale(1.05); opacity: 0.7; }
}

/* ============================================================
   V4 HOME — GUIDED EXPERIENCE
   4 sections: Greeting+Prayer, Context Card, Prayer Tracker, Nav
   ============================================================ */

/* ---- Section 1: Greeting + Prayer Focus + CTA ---- */
.hv4-section-1 {
  position: relative; z-index: 1;
  text-align: center;
  padding: var(--sp-32) var(--sp-24) var(--sp-20);
}

/* Subtle dark overlay for text readability over sky */
.hv4-section-1::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.03) 60%, transparent 100%);
  border-radius: 0;
  z-index: -1;
  pointer-events: none;
}

.hv4-greeting {
  margin-bottom: var(--sp-24);
}

.hv4-greeting__salaam {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
  opacity: 0;
  animation: hv4FadeSlide 900ms var(--ease-settle) forwards;
}

.hv4-greeting__subtitle {
  font-size: 14px;
  color: var(--emerald);
  margin-top: 6px;
  font-weight: 500;
  opacity: 0;
  animation: hv4FadeSlide 900ms var(--ease-settle) 200ms forwards;
}

/* Prayer Focus */
.hv4-prayer-focus {
  margin-bottom: var(--sp-24);
}

.hv4-prayer-focus__status {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--emerald);
  margin-bottom: var(--sp-4);
  opacity: 0.85;
}

.hv4-prayer-focus__name {
  font-family: var(--f-display);
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--emerald);
  line-height: 1;
  margin: 0 0 var(--sp-2);
}

.hv4-prayer-focus__time {
  font-size: 13px;
  color: var(--text3);
  font-weight: 500;
  margin-bottom: var(--sp-16);
}

/* Countdown */
.hv4-prayer-focus__countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.hv4-cd__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
}

.hv4-cd__num {
  font-family: var(--f-mono);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text);
}

.hv4-cd__label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text3);
  margin-top: 3px;
}

.hv4-cd__sep {
  font-family: var(--f-mono);
  font-size: 20px;
  color: var(--text3);
  opacity: 0.25;
  margin-top: -10px;
  animation: hv4SepPulse 2.5s var(--ease-breathe) infinite;
}
@keyframes hv4SepPulse {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 0.06; }
}

/* CTA */
.hv4-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 32px;
  background: var(--emerald);
  border: none;
  border-radius: var(--r-full);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--f-body);
  cursor: pointer;
  transition: all 300ms var(--ease-tactile);
  box-shadow: 0 4px 16px rgba(13,107,94,0.2);
  margin-top: var(--sp-4);
}
.hv4-cta:active {
  transform: scale(0.96);
  box-shadow: 0 2px 12px rgba(13,107,94,0.15);
}

@keyframes hv4CtaConfirm {
  0% { transform: scale(1); }
  20% { transform: scale(0.92); }
  50% { transform: scale(1.04); box-shadow: 0 6px 28px rgba(13,107,94,0.3); }
  100% { transform: scale(1); }
}
.hv4-cta--confirmed {
  animation: hv4CtaConfirm 600ms var(--ease-tactile);
}

/* Complete state */
.hv4-prayer-focus--complete .hv4-prayer-focus__name {
  background: linear-gradient(135deg, var(--emerald), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---- Section 2: Dynamic Context Card ---- */
.hv4-context {
  position: relative; z-index: 1;
  padding: 0 var(--sp-24) var(--sp-16);
}

.hv4-context-card {
  padding: var(--sp-20);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  cursor: pointer;
  transition: all 300ms var(--ease-settle);
}
.hv4-context-card:active {
  transform: scale(0.98);
}

.hv4-context-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--sp-12);
}

.hv4-context-card__icon {
  width: 30px; height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(13,107,94,0.08);
  color: var(--emerald);
  flex-shrink: 0;
}

.hv4-context-card__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--emerald);
  opacity: 0.85;
}

.hv4-context-card__title {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-12);
  line-height: 1.35;
}

.hv4-context-card__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hv4-context-card__duration {
  font-size: 12px;
  color: var(--text3);
  font-weight: 500;
}

.hv4-context-card__play {
  width: 32px; height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--emerald);
  color: #fff;
  flex-shrink: 0;
  transition: transform 200ms var(--ease-tactile);
}
.hv4-context-card:active .hv4-context-card__play {
  transform: scale(0.92);
}

/* Verse card styles */
.hv4-context-card--verse {
  text-align: center;
  cursor: default;
}
.hv4-context-card--verse .hv4-context-card__header {
  justify-content: center;
}

.hv4-context-card__arabic {
  font-family: var(--f-arabic);
  font-size: 20px;
  line-height: 1.7;
  color: var(--text);
  direction: rtl;
  margin-bottom: var(--sp-8);
}

.hv4-context-card__translation {
  font-size: 14px;
  color: var(--text2);
  font-style: italic;
  line-height: 1.5;
  margin-bottom: var(--sp-4);
}

.hv4-context-card__ref {
  font-size: 11px;
  color: var(--text3);
  font-weight: 500;
}

/* Dua completed state */
.hv4-context-card--dua.hv4-dua--done {
  background: rgba(13,107,94,0.03);
  border-color: rgba(13,107,94,0.08);
}
.hv4-context-card--dua.hv4-dua--done .hv4-context-card__play {
  background: rgba(13,107,94,0.12);
  color: var(--emerald);
}
.hv4-context-card--dua.hv4-dua--done .hv4-context-card__label {
  color: var(--text3);
}

/* ---- Section 3: Minimal Prayer Tracker (5 dots) ---- */
.hv4-tracker {
  position: relative; z-index: 1;
  padding: var(--sp-8) var(--sp-24) var(--sp-20);
}

.hv4-tracker__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--sp-8);
}

.hv4-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  cursor: pointer;
  padding: 8px 4px;
  -webkit-tap-highlight-color: transparent;
}

.hv4-dot__circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 2px solid var(--border);
  transition: all 350ms var(--ease-tactile);
  overflow: hidden;
}

.hv4-dot__fill {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--emerald);
  transform: scale(0);
  transition: transform 400ms var(--ease-tactile);
}

.hv4-dot__check {
  position: relative; z-index: 2;
  opacity: 0;
  transform: scale(0.5);
  transition: all 300ms var(--ease-tactile);
  transition-delay: 80ms;
}

.hv4-dot__name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text3);
  transition: color 350ms var(--ease-settle);
}

/* Dot: Current (next prayer) */
.hv4-dot--current .hv4-dot__circle {
  border-color: var(--emerald);
  box-shadow: 0 0 0 3px rgba(13,107,94,0.06);
  animation: hv4DotBreath 3.5s var(--ease-breathe) infinite;
}
@keyframes hv4DotBreath {
  0%, 100% { box-shadow: 0 0 0 3px rgba(13,107,94,0.06); }
  50% { box-shadow: 0 0 0 6px rgba(13,107,94,0.03); }
}
.hv4-dot--current .hv4-dot__name {
  color: var(--emerald);
  font-weight: 700;
}

/* Dot: Done */
.hv4-dot--done .hv4-dot__circle {
  border-color: var(--emerald);
  background: var(--emerald);
}
.hv4-dot--done .hv4-dot__fill {
  transform: scale(1);
}
.hv4-dot--done .hv4-dot__check {
  opacity: 1;
  transform: scale(1);
}
.hv4-dot--done .hv4-dot__name {
  color: var(--emerald);
}

/* Dot: Tap feedback */
@keyframes hv4DotPop {
  0% { transform: scale(1); }
  35% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.hv4-dot__circle--pop {
  animation: hv4DotPop 300ms var(--ease-tactile);
}

.hv4-tracker__msg {
  font-size: 12px;
  color: var(--text2);
  text-align: center;
  margin-top: var(--sp-12);
  font-style: italic;
}

/* ---- V4 Entry Animations ---- */
@keyframes hv4FadeSlide {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.home--v4 .hv4-section-1 {
  animation: hv4FadeSlide 800ms var(--ease-settle) both;
  animation-delay: 0ms;
}
.home--v4 .hv4-context {
  animation: hv4FadeSlide 800ms var(--ease-settle) both;
  animation-delay: 150ms;
}
.home--v4 .hv4-tracker {
  animation: hv4FadeSlide 700ms var(--ease-settle) both;
  animation-delay: 300ms;
}

/* ============================================================
   DUA OF THE DAY CARD
   ============================================================ */
.hv3-dua {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 var(--sp-24) var(--sp-12);
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(13,107,94,0.08) 0%, rgba(201,168,76,0.06) 100%);
  border: 1px solid rgba(13,107,94,0.15);
  border-radius: var(--r-16);
  cursor: pointer;
  transition: all 300ms var(--ease-settle);
}
.hv3-dua:active {
  transform: scale(0.98);
  background: linear-gradient(135deg, rgba(13,107,94,0.12) 0%, rgba(201,168,76,0.09) 100%);
}
.hv3-dua__left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hv3-dua__icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(13,107,94,0.1);
  color: var(--emerald);
  flex-shrink: 0;
}
.hv3-dua__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hv3-dua__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--emerald);
  opacity: 0.8;
}
.hv3-dua__title {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.hv3-dua__right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hv3-dua__duration {
  font-size: 11px;
  color: var(--text3);
  font-weight: 500;
}
.hv3-dua__play {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--emerald);
  color: #fff;
  flex-shrink: 0;
  transition: transform 200ms var(--ease-tactile);
}
.hv3-dua:active .hv3-dua__play {
  transform: scale(0.92);
}
/* Completed state */
.hv3-dua--done {
  background: linear-gradient(135deg, rgba(13,107,94,0.04) 0%, rgba(201,168,76,0.03) 100%);
  border-color: rgba(13,107,94,0.08);
}
.hv3-dua--done .hv3-dua__play {
  background: rgba(13,107,94,0.15);
  color: var(--emerald);
}
.hv3-dua--done .hv3-dua__label {
  color: var(--text3);
}

/* ============================================================
   DUA PLAYER — FULL-SCREEN IMMERSIVE OVERLAY
   ============================================================ */
.dua-player {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 500ms var(--ease-settle);
}
.dua-player.active {
  opacity: 1;
  pointer-events: auto;
}
.dua-player__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(170deg, #0a2e28 0%, #0d1b19 40%, #111610 100%);
  z-index: 0;
}
.dua-player__close {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: all 200ms;
}
.dua-player__close:hover {
  background: rgba(255,255,255,0.15);
  color: #fff;
}
.dua-player__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 32px;
  width: 100%;
  max-width: 400px;
}
.dua-player__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(201,168,76,0.7);
  margin-bottom: 8px;
}
.dua-player__title {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 4px;
}
.dua-player__title-ar {
  font-family: var(--f-arabic);
  font-size: 20px;
  color: rgba(255,255,255,0.5);
  margin-bottom: 32px;
}
/* Pulsing rings */
.dua-player__visual {
  position: relative;
  width: 160px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
.dua-player__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(13,107,94,0.2);
}
.dua-player__ring--1 {
  width: 100%;
  height: 100%;
  animation: duaRingPulse 4s var(--ease-breathe) infinite;
}
.dua-player__ring--2 {
  width: 75%;
  height: 75%;
  animation: duaRingPulse 4s var(--ease-breathe) infinite 1.3s;
}
.dua-player__ring--3 {
  width: 50%;
  height: 50%;
  animation: duaRingPulse 4s var(--ease-breathe) infinite 2.6s;
}
.dua-player.playing .dua-player__ring {
  border-color: rgba(13,107,94,0.4);
}
@keyframes duaRingPulse {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.08); opacity: 0.7; }
}
.dua-player__play-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--emerald);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  transition: all 250ms var(--ease-tactile);
  box-shadow: 0 4px 24px rgba(13,107,94,0.35);
  z-index: 1;
}
.dua-player__play-btn:active {
  transform: scale(0.93);
}
/* Progress */
.dua-player__progress {
  width: 100%;
  margin-bottom: 24px;
}
.dua-player__progress-bar {
  width: 100%;
  height: 6px;
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
  overflow: visible;
  cursor: pointer;
  position: relative;
  touch-action: none;
}
.dua-player__progress-bar:active {
  height: 8px;
}
.dua-player__progress-thumb {
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: var(--emerald);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(13,107,94,0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
.dua-player__progress-bar:hover .dua-player__progress-thumb,
.dua-player__progress-bar:active .dua-player__progress-thumb,
.dua-player__progress-bar.seeking .dua-player__progress-thumb {
  opacity: 1;
}
.dua-player__progress-fill {
  height: 100%;
  width: 0%;
  background: var(--emerald);
  border-radius: 3px;
  transition: width 100ms linear;
  position: relative;
}
.dua-player__times {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  font-variant-numeric: tabular-nums;
}
/* Text display */
.dua-player__text-area {
  width: 100%;
  min-height: 80px;
  margin-bottom: 20px;
}
.dua-player__arabic {
  font-family: var(--f-arabic);
  font-size: 20px;
  line-height: 1.8;
  color: rgba(255,255,255,0.85);
  text-align: center;
  direction: rtl;
  display: none;
}
.dua-player__english {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.7);
  text-align: center;
  font-style: italic;
}
.dua-player[data-lang="ar"] .dua-player__arabic { display: block; }
.dua-player[data-lang="ar"] .dua-player__english { display: none; }
.dua-player[data-lang="en"] .dua-player__arabic { display: none; }
.dua-player[data-lang="en"] .dua-player__english { display: block; }
/* Language toggle */
.dua-player__lang-toggle {
  display: flex;
  gap: 0;
  background: rgba(255,255,255,0.08);
  border-radius: var(--r-full);
  padding: 3px;
}
.dua-player__lang {
  padding: 6px 18px;
  border: none;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  background: transparent;
  cursor: pointer;
  transition: all 200ms;
}
.dua-player__lang.active {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* ============================================================
   QURAN READER
   ============================================================ */
.quran-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.quran-tabs {
  display: flex;
  gap: var(--sp-4);
  padding: 0 var(--sp-24);
  margin-bottom: var(--sp-8);
}

.qtab {
  flex: 1;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--r-full);
  color: var(--text3);
  text-align: center;
  transition: all 200ms ease;
  background: transparent;
}

.qtab.active {
  background: var(--emerald);
  color: #fff;
}

.qtab:hover:not(.active) { color: var(--text2); }

.qtab--premium { position: relative; }

.qtab__lock {
  font-size: 10px;
  color: var(--gold);
  margin-left: 2px;
}

/* Verses */
.quran-verses {
  flex: 1;
  padding: var(--sp-8) var(--sp-24);
  padding-bottom: var(--sp-16);
}

.ayah {
  padding: var(--sp-24) 0;
  border-bottom: none;
  cursor: pointer;
  transition: background var(--ease-micro);
}

.ayah:last-child { border-bottom: none; }
.ayah:hover { background: var(--surface-el); margin: 0 calc(-1 * var(--sp-16)); padding-left: var(--sp-16); padding-right: var(--sp-16); border-radius: var(--r-sm); }

.ayah__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--emerald);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: var(--sp-8);
}

.ayah__arabic {
  font-family: var(--f-arabic);
  font-size: 24px;
  line-height: 2;
  color: var(--text);
  direction: rtl;
  text-align: right;
}

/* ---- Word-by-word highlight system ---- */
.qw {
  display: inline;
  position: relative;
  padding: 3px 5px;
  margin: 0 1px;
  border-radius: 8px;
  transition: background 280ms cubic-bezier(0.4, 0, 0.2, 1),
              color 280ms cubic-bezier(0.4, 0, 0.2, 1),
              opacity 250ms ease,
              transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 300ms ease;
  cursor: default;
  will-change: background, opacity, transform;
}

.qw-end {
  font-size: 0.85em;
  opacity: 0.65;
}

/* Active word highlight — soft emerald glow with subtle lift */
.qw--active {
  background: var(--emerald-lt);
  color: var(--emerald);
  box-shadow: 0 2px 16px rgba(13, 107, 94, 0.18),
              0 0 0 1px rgba(13, 107, 94, 0.08);
  border-radius: 8px;
  transform: scale(1.05);
}

/* Verse currently playing — dim non-active words for focus */
.ayah--playing .qw:not(.qw--active):not(.qw-end) {
  opacity: 0.35;
}

.ayah--playing .qw--active {
  opacity: 1;
}

/* Subtle glow ring around the active ayah */
.ayah--playing {
  position: relative;
  background: rgba(13, 107, 94, 0.03);
  border-radius: 12px;
  margin-left: -8px;
  margin-right: -8px;
  padding-left: 8px;
  padding-right: 8px;
  transition: background 400ms ease;
}

/* Play button playing state */
.ayah__play-btn.playing {
  color: var(--emerald);
}
.ayah__play-btn.playing svg {
  animation: pulse-play 1.5s ease-in-out infinite;
}

@keyframes pulse-play {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.92); }
}

.ayah__translation {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.6;
  margin-top: var(--sp-8);
  cursor: pointer;
  transition: color 200ms ease;
  position: relative;
}

.ayah__translation::after {
  content: 'Tap for explanation';
  display: block;
  font-size: 11px;
  color: var(--emerald);
  opacity: 0;
  margin-top: 4px;
  transition: opacity 200ms ease;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.ayah:not(.ayah--explained) .ayah__translation:active::after {
  opacity: 0.7;
}

.ayah--explained .ayah__translation::after {
  content: none;
}

.ayah__micro-tafsir {
  max-height: 0;
  overflow: hidden;
  transition: max-height 400ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease, margin 300ms ease;
  opacity: 0;
  margin-top: 0;
}

.ayah__micro-tafsir.show {
  max-height: 300px;
  opacity: 1;
  margin-top: var(--sp-12);
}

.ayah__micro-tafsir__inner {
  padding: var(--sp-12) var(--sp-16);
  background: rgba(13,107,94,0.04);
  border-radius: var(--r-md);
  border-left: 3px solid var(--emerald);
  position: relative;
}

.ayah__micro-tafsir__label {
  font-size: 10px;
  font-weight: 700;
  color: var(--emerald);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ayah__micro-tafsir__label svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

.ayah__micro-tafsir__text {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.65;
}

.ayah__micro-tafsir__close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  color: var(--text3);
  font-size: 14px;
  cursor: pointer;
  transition: background 150ms ease;
  border: none;
  padding: 0;
  line-height: 1;
}

.ayah__micro-tafsir__close:active {
  background: rgba(0,0,0,0.05);
}

.ayah__micro-tafsir em {
  font-style: italic;
  font-weight: 500;
}

/* ============================================================
   PRONUNCIATION COACH (TAJWEED)
   ============================================================ */
.tajweed-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.recite-surah {
  padding: 0 var(--sp-24);
  margin-bottom: var(--sp-16);
}

.recite-surah__name {
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  text-align: center;
  margin-bottom: var(--sp-16);
}

.recite-verses {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
}

.recite-line {
  text-align: center;
}

.recite-line__ar {
  font-family: var(--f-arabic);
  font-size: 20px;
  color: var(--text);
  line-height: 1.8;
  direction: rtl;
}

.recite-line__tr {
  font-size: 13px;
  color: var(--text3);
  margin-top: 2px;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* Record controls */
.recite-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-32) var(--sp-24);
  gap: var(--sp-16);
  flex: 1;
  justify-content: center;
}

.recite-status {
  font-size: 14px;
  color: var(--text2);
  font-weight: 500;
}

.record-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--emerald);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all var(--ease-micro);
}

.record-btn:hover { transform: scale(1.05); }
.record-btn:active { transform: scale(0.95); }

.record-btn__pulse {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--emerald);
  opacity: 0;
  transition: all var(--ease-std);
}

.record-btn.recording { background: var(--err); }

.record-btn.recording .record-btn__pulse {
  opacity: 1;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.3); opacity: 0; }
}

.recite-hint {
  font-size: 12px;
  color: var(--text3);
}

/* Results */
.recite-results {
  padding: var(--sp-24);
  flex: 1;
}

.score-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sp-24);
}

.score-reveal__ring {
  position: relative;
  width: 120px;
  height: 120px;
}

.score-reveal__ring svg { width: 100%; height: 100%; }

.sr__track {
  fill: none;
  stroke: var(--border);
  stroke-width: 6;
}

.sr__fill {
  fill: none;
  stroke: var(--emerald);
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 327;
  stroke-dashoffset: 327;
  transform: rotate(-90deg);
  transform-origin: center;
  transition: stroke-dashoffset 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.score-reveal__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-mono);
  font-size: 32px;
  font-weight: 500;
  color: var(--text);
}

.score-reveal__num small {
  font-size: 16px;
  color: var(--text2);
  margin-left: 1px;
}

.score-reveal__label {
  font-size: 13px;
  color: var(--text2);
  margin-top: var(--sp-8);
  font-weight: 500;
}

/* Score breakdown */
.score-breakdown {
  display: flex;
  gap: var(--sp-16);
  margin-bottom: var(--sp-24);
}

.sb-item {
  flex: 1;
  text-align: center;
  padding: var(--sp-12);
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

.sb-item__val {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  display: block;
}

.sb-item__label {
  font-size: 11px;
  color: var(--text3);
  display: block;
  margin-top: 2px;
}

/* Word corrections */
.word-corrections {
  margin-bottom: var(--sp-24);
}

.wc-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-12);
}

.wc-words {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  direction: rtl;
}

.wc-w {
  font-family: var(--f-arabic);
  font-size: 18px;
  padding: var(--sp-8) var(--sp-12);
  border-radius: var(--r-sm);
  transition: all var(--ease-micro);
}

.wc-w--ok { background: var(--emerald-lt); color: var(--emerald); }
.wc-w--warn { background: var(--gold-lt); color: var(--gold); }
.wc-w--err { background: var(--err-lt); color: var(--err); }

.recite-results__actions {
  display: flex;
  gap: var(--sp-12);
}

.recite-results__actions .btn-secondary,
.recite-results__actions .btn-primary {
  flex: 1;
  text-align: center;
}

/* ============================================================
   DHIKR COUNTER
   ============================================================ */
.dhikr-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: linear-gradient(180deg, #F5F2EB 0%, var(--bg) 30%);
}

.dhikr-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--sp-24);
  text-align: center;
}

.dhikr-label {
  font-size: 12px;
  color: var(--text3);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-16);
}

.dhikr-arabic {
  font-family: var(--f-arabic);
  font-size: 36px;
  color: var(--text);
  line-height: 1.6;
  direction: rtl;
  margin-bottom: var(--sp-4);
}

.dhikr-meaning {
  font-size: 15px;
  color: var(--text2);
  margin-bottom: var(--sp-32);
}

.dhikr-counter-wrap {
  margin-bottom: var(--sp-16);
}

.dhikr-tap {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--emerald);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all var(--ease-micro);
  box-shadow: 0 8px 32px rgba(13,107,94,0.3);
}

.dhikr-tap:hover { transform: scale(1.03); }
.dhikr-tap:active { transform: scale(0.95); }

.dhikr-tap.pulse {
  animation: dhikrPulse 300ms ease-out;
}

@keyframes dhikrPulse {
  0% { transform: scale(0.92); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.dhikr-count {
  font-family: var(--f-mono);
  font-size: 48px;
  font-weight: 500;
  line-height: 1;
}

.dhikr-target {
  font-size: 14px;
  opacity: 0.7;
  margin-top: 4px;
}

.dhikr-hint {
  font-size: 12px;
  color: var(--text3);
  margin-bottom: var(--sp-24);
}

.dhikr-progress {
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-bottom: var(--sp-24);
}

.dhikr-prog-bar {
  height: 100%;
  background: var(--emerald);
  border-radius: var(--r-full);
  transition: width 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.dhikr-sets {
  display: flex;
  gap: var(--sp-16);
}

.dhikr-set {
  font-size: 12px;
  color: var(--text3);
  font-weight: 500;
  padding: var(--sp-4) var(--sp-12);
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  transition: all var(--ease-micro);
}

.dhikr-set--active {
  background: var(--emerald-lt);
  color: var(--emerald);
  border-color: var(--emerald);
  font-weight: 600;
}

/* ============================================================
   PRAYER DETAIL SCREEN
   ============================================================ */
.prayer-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding-bottom: var(--sp-32);
}

.prayer-detail-list {
  padding: 0 var(--sp-24);
}

.pd-item {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-16) 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: all var(--ease-micro);
}

.pd-item:last-child { border-bottom: none; }
.pd-item:hover { opacity: 0.85; }

.pd-check {
  width: 28px;
  height: 28px;
  border: 2px solid var(--border);
  border-radius: var(--r-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--ease-cel);
}

.pd-check--done {
  background: var(--emerald);
  border-color: var(--emerald);
  color: #fff;
}

.pd-check.animate-check {
  animation: checkBounce 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkBounce {
  0% { transform: scale(0.5); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.pd-info { flex: 1; }
.pd-name { font-size: 16px; font-weight: 600; color: var(--text); display: block; }
.pd-desc { font-size: 12px; color: var(--text3); display: block; margin-top: 2px; }

.pd-time { font-size: 13px; color: var(--text3); font-weight: 500; }
.pd-time--next { color: var(--gold); font-weight: 600; }

.pd-item--done .pd-name { color: var(--emerald); }

/* Prayer stats mini */
.prayer-stats-mini {
  display: flex;
  gap: var(--sp-12);
  padding: var(--sp-24);
}

.psm-card {
  flex: 1;
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.psm-card--highlight {
  background: var(--emerald-lt);
  border-color: var(--emerald);
}

.psm-val {
  font-family: var(--f-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  display: block;
}

.psm-card--highlight .psm-val { color: var(--emerald); }

.psm-label {
  font-size: 11px;
  color: var(--text3);
  display: block;
  margin-top: 2px;
}

.private-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  font-size: 12px;
  color: var(--text3);
  padding: var(--sp-16) var(--sp-24);
}

/* ============================================================
   PROFILE / JOURNEY SCREEN
   ============================================================ */
.profile-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.journey-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-24);
  text-align: center;
}

.journey-streak {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-bottom: var(--sp-16);
}

.journey-streak__flame { font-size: 28px; }

.journey-streak__num {
  font-family: var(--f-display);
  font-size: 48px;
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.journey-streak__label {
  font-size: 14px;
  color: var(--text2);
  align-self: flex-end;
  padding-bottom: 6px;
}

.journey-quote {
  font-size: 14px;
  font-style: italic;
  color: var(--text3);
  max-width: 260px;
}

/* Journey stats */
.journey-stats {
  display: flex;
  gap: var(--sp-12);
  padding: 0 var(--sp-24);
  margin-bottom: var(--sp-24);
}

.js-card {
  flex: 1;
  text-align: center;
  padding: var(--sp-16) var(--sp-8);
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.js-card__val {
  font-family: var(--f-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  display: block;
}

.js-card__label {
  font-size: 11px;
  color: var(--text3);
  display: block;
  margin-top: 4px;
}

/* Milestones */
.milestones {
  padding: 0 var(--sp-24);
  margin-bottom: var(--sp-24);
}

.milestones__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-16);
}

.milestone {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-12) 0;
  border-bottom: 1px solid var(--border);
}

.milestone:last-child { border-bottom: none; }

.milestone__icon { font-size: 24px; }

.milestone__info { flex: 1; }
.milestone__name { font-size: 14px; font-weight: 600; color: var(--text); display: block; }
.milestone__desc { font-size: 12px; color: var(--text3); display: block; margin-top: 2px; }

.milestone--locked { opacity: 0.4; }

.milestone--next .milestone__name { color: var(--emerald); }

.milestone__prog {
  width: 48px;
  height: 4px;
  background: var(--border);
  border-radius: var(--r-full);
  overflow: hidden;
}

.milestone__prog-fill {
  height: 100%;
  background: var(--emerald);
  border-radius: var(--r-full);
}

/* ============================================================
   UPGRADE SCREEN
   ============================================================ */
.upgrade-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: linear-gradient(180deg, var(--surface-el) 0%, var(--bg) 40%);
  position: relative;
}

.upgrade-close {
  position: absolute;
  top: var(--sp-16);
  right: var(--sp-16);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  color: var(--text2);
  z-index: 2;
  transition: all var(--ease-micro);
}

.upgrade-close:hover { background: var(--surface); color: var(--text); }

.upgrade-content {
  padding: var(--sp-64) var(--sp-24) var(--sp-32);
  text-align: center;
}

.upgrade-badge {
  display: inline-block;
  background: var(--gold-lt);
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  padding: var(--sp-4) var(--sp-16);
  border-radius: var(--r-full);
  letter-spacing: 0.04em;
  margin-bottom: var(--sp-16);
}

.upgrade-title {
  font-family: var(--f-display);
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: var(--sp-8);
}

.upgrade-subtitle {
  font-size: 15px;
  color: var(--text2);
  margin-bottom: var(--sp-32);
  line-height: 1.5;
}

/* Upgrade features */
.upgrade-features {
  text-align: left;
  margin-bottom: var(--sp-32);
}

.uf-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  padding: var(--sp-12) 0;
}

.uf-icon { font-size: 20px; flex-shrink: 0; margin-top: 2px; }

.uf-text strong {
  font-size: 14px;
  color: var(--text);
  display: block;
}

.uf-text span {
  font-size: 13px;
  color: var(--text2);
  display: block;
  margin-top: 2px;
}

/* Plans */
.upgrade-plans {
  display: flex;
  gap: var(--sp-12);
  margin-bottom: var(--sp-24);
}

.plan-card {
  flex: 1;
  padding: var(--sp-16);
  border: 1.5px solid var(--border);
  border-radius: var(--r-md);
  text-align: center;
  transition: all var(--ease-micro);
  position: relative;
  background: var(--surface);
}

.plan-card:hover { border-color: var(--emerald); }

.plan-card.selected {
  border-color: var(--emerald);
  background: var(--emerald-lt);
}

.plan-card--featured {
  border-color: var(--emerald);
}

.plan-card--featured.selected {
  background: var(--emerald-lt);
}

.plan-card__badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--emerald);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: var(--r-full);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.plan-card__price {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text);
  display: block;
  margin-top: var(--sp-4);
}

.plan-card__period {
  font-size: 13px;
  color: var(--text2);
  display: block;
}

.plan-card__save {
  font-size: 11px;
  color: var(--emerald);
  display: block;
  margin-top: var(--sp-4);
  font-weight: 600;
}

.upgrade-cta {
  margin-top: var(--sp-8);
}

.upgrade-note {
  font-size: 12px;
  color: var(--text3);
  margin-top: var(--sp-12);
}

/* ============================================================
   QURAN — SUMMARY & DEEP TAB PANELS
   ============================================================ */
.quran-panel {
  display: none;
  padding: var(--sp-16) var(--sp-24);
}

.quran-panel.active { display: block; }

.quran-summary {
  line-height: 1.7;
}

.quran-summary h3 {
  font-family: var(--f-display);
  font-size: 18px;
  margin-bottom: var(--sp-12);
  color: var(--text);
}

.quran-summary p {
  font-size: 14px;
  color: var(--text2);
  margin-bottom: var(--sp-16);
}

.deep-paywall {
  text-align: center;
  padding: var(--sp-48) var(--sp-24);
}

.deep-paywall__icon {
  font-size: 32px;
  margin-bottom: var(--sp-16);
}

.deep-paywall__title {
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-8);
}

.deep-paywall__desc {
  font-size: 14px;
  color: var(--text2);
  margin-bottom: var(--sp-24);
  line-height: 1.5;
}

/* ============================================================
   MOBILE RESPONSIVE (Direct viewport, no phone frame)
   ============================================================ */
@media (max-width: 480px) {
  body {
    background: var(--bg);
    overflow: auto;
  }

  .phone-frame {
    padding: 0;
  }

  .phone-screen {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }

  .phone-label,
  .phone-sublabel { display: none; }
}

/* ============================================================
   SCROLL BAR (hidden but functional)
   ============================================================ */
.phone-screen ::-webkit-scrollbar { width: 0; }
.phone-screen { scrollbar-width: none; }

/* ============================================================
   FOCUS STATES (Accessibility)
   ============================================================ */
button:focus-visible,
.option-pill:focus-visible,
.option-card:focus-visible {
  outline: 2px solid var(--emerald);
  outline-offset: 2px;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   QIBLA COMPASS SCREEN
   ============================================================ */
.qibla-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: linear-gradient(180deg, #F5F2EB 0%, var(--bg) 30%);
}

.qibla-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-8) var(--sp-24) var(--sp-24);
}

.qibla-subtitle {
  font-size: 14px;
  color: var(--text2);
  margin-bottom: var(--sp-24);
}

.qibla-compass-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-24);
}

.qibla-compass {
  position: relative;
  width: 260px;
  height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qibla-ring {
  width: 100%;
  height: 100%;
}

.qibla-ticks line {
  stroke-width: 1.5;
}

.qibla-arrow {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.qibla-kaaba-indicator {
  position: absolute;
  font-size: 24px;
  transition: all 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.qibla-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--sp-16);
}

.qibla-bearing {
  display: flex;
  align-items: baseline;
  gap: var(--sp-8);
}

.qibla-bearing__deg {
  font-family: var(--f-mono);
  font-size: 36px;
  font-weight: 600;
  color: var(--emerald);
  line-height: 1;
}

.qibla-bearing__dir {
  font-size: 18px;
  font-weight: 600;
  color: var(--text2);
}

.qibla-bearing__label {
  font-size: 13px;
  color: var(--text3);
  margin-top: var(--sp-4);
}

.qibla-location {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: 13px;
  color: var(--text2);
  padding: var(--sp-8) var(--sp-16);
  background: var(--surface-el);
  border-radius: var(--r-full);
  margin-bottom: var(--sp-24);
}

/* Qibla Status Indicator */
.qibla-status {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: 13px;
  color: var(--text3);
  margin-bottom: var(--sp-16);
  transition: color 0.3s ease;
}

.qibla-status--live {
  color: var(--emerald);
}

.qibla-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text3);
  display: inline-block;
  flex-shrink: 0;
}

.qibla-status__dot--live {
  background: var(--emerald);
  box-shadow: 0 0 6px var(--emerald);
  animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.3); }
}

/* Qibla Aligned — green glow when pointing at Kaaba */
.qibla-aligned {
  box-shadow: 0 0 30px rgba(13, 107, 94, 0.4), 0 0 60px rgba(13, 107, 94, 0.15);
  transition: box-shadow 0.5s ease;
}

.qibla-aligned .qibla-ring circle:first-child {
  stroke: var(--emerald) !important;
  stroke-width: 2.5;
}

.qibla-note {
  padding: var(--sp-16);
  background: rgba(13,107,94,0.06);
  border: none;
  border-radius: var(--r-md);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  max-width: 300px;
}

.qibla-note p {
  font-size: 13px;
  color: var(--emerald);
  line-height: 1.5;
  text-align: center;
}

/* ============================================================
   SURAH DIRECTORY SCREEN
   ============================================================ */
.surah-list-screen {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.surah-search-wrap {
  position: relative;
  padding: 0 var(--sp-24);
  margin-bottom: var(--sp-12);
}

.surah-search__icon {
  position: absolute;
  left: calc(var(--sp-24) + 12px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text3);
  pointer-events: none;
}

.surah-search {
  width: 100%;
  padding: var(--sp-12) var(--sp-16) var(--sp-12) 40px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--text);
  background: #F8F6F1;
  outline: none;
  transition: border-color var(--ease-micro);
}

.surah-search::placeholder {
  color: var(--text3);
}

.surah-search:focus {
  border-color: var(--emerald);
}

.surah-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--sp-24);
  padding-bottom: var(--sp-16);
}

.surah-item {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding: 14px 8px;
  margin: 0 -8px;
  border-bottom: none;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: all var(--ease-micro);
}

.surah-item:last-child {
  border-bottom: none;
}

.surah-item:hover {
  background: var(--surface-el);
  opacity: 1;
}

.surah-item:active {
  opacity: 0.85;
}

.surah-item__num {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--emerald);
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--f-mono);
  flex-shrink: 0;
}

.surah-item__info {
  flex: 1;
  min-width: 0;
}

.surah-item__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: block;
}

.surah-item__meta {
  font-size: 12px;
  color: var(--text3);
  display: block;
  margin-top: 1px;
}

.surah-item__ar {
  font-family: var(--f-arabic);
  font-size: 18px;
  color: var(--text2);
  direction: rtl;
  flex-shrink: 0;
}

.surah-list__empty {
  text-align: center;
  padding: var(--sp-48) var(--sp-24);
  color: var(--text3);
  font-size: 14px;
}

/* ============================================================
   TEACHING MODE (Recite Overhaul)
   ============================================================ */
/* ── Recite Picker (surah/verse selection) ────── */
.recite-picker {
  padding: var(--sp-16) var(--sp-20) var(--sp-32);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.recite-picker__sub {
  font-size: 15px;
  color: var(--text2);
  margin-bottom: var(--sp-24);
}
.recite-section-title {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text3);
  margin: var(--sp-24) 0 var(--sp-12);
}
.recite-section-title:first-of-type { margin-top: 0; }

.recite-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
}
.recite-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-16);
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}
.recite-card:hover {
  border-color: var(--emerald);
  box-shadow: 0 2px 12px rgba(13,107,94,0.08);
}
.recite-card--featured {
  background: linear-gradient(135deg, var(--emerald), #0a8a7a);
  border-color: transparent;
  color: #fff;
}
.recite-card--featured:hover {
  border-color: transparent;
  box-shadow: 0 4px 20px rgba(13,107,94,0.25);
  transform: translateY(-1px);
}
.recite-card--featured .recite-card__name { color: #fff; }
.recite-card--featured .recite-card__detail { color: rgba(255,255,255,0.75); }
.recite-card--featured .recite-card__emoji { filter: brightness(10); }
.recite-card__emoji { font-size: 22px; margin-bottom: var(--sp-4); }
.recite-card__name {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--text);
}
.recite-card__detail {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.3;
}

.recite-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: transparent;
  border-radius: var(--r-lg);
  overflow: visible;
}
.recite-list-item {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-14) var(--sp-16);
  background: var(--surface);
  border-radius: var(--r-sm);
  margin-bottom: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  cursor: pointer;
  transition: background 0.15s;
  text-align: left;
  border: none;
}
.recite-list-item:hover { background: var(--surface-el); }
.recite-list-item__num {
  font-family: var(--f-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--emerald);
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.recite-list-item__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.recite-list-item__name {
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
}
.recite-list-item__ar {
  font-family: var(--f-arabic);
  font-size: 13px;
  color: var(--text2);
  direction: rtl;
}
.recite-list-item__count {
  font-size: 12px;
  color: var(--text3);
  flex-shrink: 0;
}

.teach-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--sp-8) var(--sp-24) var(--sp-16);
}

.teach-step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--sp-16);
}

.teach-step__current {
  font-size: 13px;
  font-weight: 600;
  color: var(--emerald);
}

.teach-step__surah {
  font-size: 13px;
  color: var(--text3);
}

.teach-verse {
  text-align: center;
  padding: var(--sp-16);
  background: #F8F6F1;
  border: none;
  border-radius: var(--r-lg);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  margin-bottom: var(--sp-24);
}

.teach-verse__ar {
  font-family: var(--f-arabic);
  font-size: 24px;
  line-height: 1.8;
  color: var(--text);
  direction: rtl;
  margin-bottom: var(--sp-8);
}

.teach-verse__tr {
  font-size: 14px;
  color: var(--emerald);
  font-weight: 500;
  letter-spacing: 0.01em;
  margin-bottom: var(--sp-4);
}

.teach-verse__en {
  font-size: 13px;
  color: var(--text3);
  font-style: italic;
}

/* Phase labels */
.teach-phase {
  margin-bottom: var(--sp-16);
}

.teach-phase-label {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
}

.phase-num {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  background: var(--emerald);
  padding: 3px 10px;
  border-radius: var(--r-full);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.phase-name {
  font-size: 13px;
  color: var(--text2);
  font-weight: 500;
}

/* Listen button */
.listen-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  width: 100%;
  padding: var(--sp-16);
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  box-shadow: 0 1px 6px rgba(0,0,0,0.05);
  transition: all var(--ease-micro);
  cursor: pointer;
}

.listen-btn:hover {
  border-color: var(--emerald);
  background: var(--emerald-lt);
}

.listen-btn.playing {
  border-color: var(--emerald);
  background: var(--emerald-lt);
}

.listen-btn__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--emerald);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.listen-btn__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  text-align: left;
}

.listen-wave {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  opacity: 0;
  transition: opacity var(--ease-micro);
}

.listen-btn.playing .listen-wave {
  opacity: 1;
}

.listen-wave span {
  width: 3px;
  height: 8px;
  background: var(--emerald);
  border-radius: var(--r-full);
  animation: waveBar 1.2s ease-in-out infinite;
}

.listen-wave span:nth-child(1) { animation-delay: 0s; }
.listen-wave span:nth-child(2) { animation-delay: 0.15s; }
.listen-wave span:nth-child(3) { animation-delay: 0.3s; }
.listen-wave span:nth-child(4) { animation-delay: 0.45s; }
.listen-wave span:nth-child(5) { animation-delay: 0.6s; }

@keyframes waveBar {
  0%, 100% { height: 4px; }
  50% { height: 18px; }
}

/* Record area */
.teach-record-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-12);
  padding: var(--sp-8) 0;
}

.teach-record-status {
  font-size: 13px;
  color: var(--text3);
  font-weight: 500;
}

/* Feedback section */
.teach-feedback {
  background: var(--surface);
  border: none;
  border-radius: var(--r-lg);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  padding: var(--sp-16);
  margin-bottom: var(--sp-16);
  animation: fadeInUp 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.teach-fb-header {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-bottom: var(--sp-16);
  padding-bottom: var(--sp-12);
  border-bottom: 1px solid var(--border);
}

.teach-fb-score {
  font-family: var(--f-mono);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

.teach-fb-score--great { color: var(--emerald); }
.teach-fb-score--good { color: var(--gold); }
.teach-fb-score--try { color: var(--err); }

.teach-fb-msg {
  flex: 1;
}

.teach-fb-msg__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  display: block;
}

.teach-fb-msg__sub {
  font-size: 12px;
  color: var(--text3);
  display: block;
  margin-top: 2px;
}

/* Word-by-word feedback */
.teach-fb-words {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  margin-bottom: var(--sp-12);
  direction: rtl;
  justify-content: center;
}

.fb-word {
  font-family: var(--f-arabic);
  font-size: 17px;
  padding: var(--sp-4) var(--sp-12);
  border-radius: var(--r-sm);
  transition: all var(--ease-micro);
  position: relative;
}

.fb-word--perfect {
  background: var(--emerald-lt);
  color: var(--emerald);
}

.fb-word--close {
  background: var(--gold-lt);
  color: var(--gold);
}

.fb-word--needs-work {
  background: var(--err-lt);
  color: var(--err);
}

/* Tip */
.teach-fb-tip {
  padding: var(--sp-12);
  background: var(--gold-lt);
  border-radius: var(--r-sm);
  margin-bottom: var(--sp-16);
  border-left: 3px solid var(--gold);
}

.teach-fb-tip p {
  font-size: 13px;
  color: var(--text2);
  line-height: 1.5;
}

.teach-fb-tip strong {
  color: var(--text);
}

.teach-fb-heard {
  margin-top: var(--sp-8);
  padding: var(--sp-8) var(--sp-12);
  background: var(--surface-el);
  border-radius: var(--r-sm);
  font-family: var(--f-arabic);
  font-size: 15px;
  color: var(--text2);
  direction: rtl;
  text-align: right;
  line-height: 1.8;
}

/* Feedback actions */
.teach-fb-actions {
  display: flex;
  gap: var(--sp-12);
}

.teach-fb-actions .btn-secondary,
.teach-fb-actions .btn-primary {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-16);
  font-size: 14px;
}

/* Session progress bar */
.teach-progress {
  width: 100%;
  height: 4px;
  background: var(--border);
  border-radius: var(--r-full);
  overflow: hidden;
  margin-top: auto;
  margin-bottom: var(--sp-8);
}

.teach-progress__bar {
  height: 100%;
  background: var(--emerald);
  border-radius: var(--r-full);
  transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   API INTEGRATION — Loading, Play Buttons, Panels
   ============================================================ */

/* Loading state */
.quran-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-16);
  padding: var(--sp-64) var(--sp-24);
  text-align: center;
}
.quran-loading p {
  font-size: 14px;
  color: var(--text3);
}
.loading-pulse {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--emerald);
  animation: spinPulse 0.8s linear infinite;
}
@keyframes spinPulse {
  to { transform: rotate(360deg); }
}

/* Ayah header row with play button */
.ayah__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-8);
}
.ayah__header .ayah__num {
  margin-bottom: 0;
}
/* Surah-level play button in header */
.surah-play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-full);
  background: var(--emerald);
  color: white;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.surah-play-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 2px 12px rgba(13, 107, 94, 0.3);
}
.surah-play-btn.playing {
  animation: surahPlayPulse 2s ease-in-out infinite;
}
@keyframes surahPlayPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13, 107, 94, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(13, 107, 94, 0); }
}

.ayah__play-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  background: var(--emerald-lt);
  color: var(--emerald);
  border: none;
  cursor: pointer;
  transition: all var(--ease-micro);
}
.ayah__play-btn:hover {
  background: var(--emerald);
  color: white;
}
.ayah__play-btn.playing {
  background: var(--emerald);
  color: white;
  animation: playPulse 1.5s ease-in-out infinite;
}
@keyframes playPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(13, 107, 94, 0.3); }
  50% { box-shadow: 0 0 0 8px rgba(13, 107, 94, 0); }
}

/* Summary & Deep Tafsir Panels */
.quran-panel {
  padding: var(--sp-16) var(--sp-24);
  display: none;
}
.quran-panel.active {
  display: block;
}
.quran-summary {
  padding: var(--sp-24);
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  max-height: 60vh;
  overflow-y: auto;
}
.quran-summary h3 {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-12);
}
.quran-summary p {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.7;
  margin-bottom: var(--sp-12);
}
.quran-summary__source {
  font-size: 12px;
  color: var(--text3);
  font-style: italic;
  margin-top: var(--sp-8);
}

/* Deep explanation paywall */
.deep-paywall {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-48) var(--sp-24);
  gap: var(--sp-12);
}
.deep-paywall__icon {
  font-size: 32px;
  color: var(--gold);
  margin-bottom: var(--sp-8);
}
.deep-paywall__title {
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
}
.deep-paywall__desc {
  font-size: 14px;
  color: var(--text2);
  line-height: 1.6;
  max-width: 280px;
  margin-bottom: var(--sp-8);
}

/* Surah list empty state */
.surah-list__empty {
  text-align: center;
  padding: var(--sp-48);
  color: var(--text3);
  font-size: 14px;
}

/* ============================================================
   INNER SCREEN ENTRY ANIMATIONS — Warm Paper settle
   ============================================================ */
.surah-list-screen .surah-list .surah-item,
.tajweed-screen .recite-card,
.quran-screen .ayah {
  animation: hv3Settle 500ms var(--ease-settle) both;
}

/* Staggered delays for the first several items to create a settling cascade */
.surah-list-screen .surah-list .surah-item:nth-child(1),
.tajweed-screen .recite-card:nth-child(1),
.quran-screen .ayah:nth-child(1) { animation-delay: 40ms; }

.surah-list-screen .surah-list .surah-item:nth-child(2),
.tajweed-screen .recite-card:nth-child(2),
.quran-screen .ayah:nth-child(2) { animation-delay: 90ms; }

.surah-list-screen .surah-list .surah-item:nth-child(3),
.tajweed-screen .recite-card:nth-child(3),
.quran-screen .ayah:nth-child(3) { animation-delay: 140ms; }

.surah-list-screen .surah-list .surah-item:nth-child(4),
.tajweed-screen .recite-card:nth-child(4),
.quran-screen .ayah:nth-child(4) { animation-delay: 190ms; }

.surah-list-screen .surah-list .surah-item:nth-child(5),
.tajweed-screen .recite-card:nth-child(5),
.quran-screen .ayah:nth-child(5) { animation-delay: 240ms; }

.surah-list-screen .surah-list .surah-item:nth-child(6),
.tajweed-screen .recite-card:nth-child(6),
.quran-screen .ayah:nth-child(6) { animation-delay: 290ms; }

.surah-list-screen .surah-list .surah-item:nth-child(n+7),
.tajweed-screen .recite-card:nth-child(n+7),
.quran-screen .ayah:nth-child(n+7) { animation-delay: 340ms; }

/* Subtle alternating row tint for surah list — warm paper hierarchy */
.surah-list .surah-item:nth-child(even) {
  background: rgba(245, 243, 238, 0.4);
}
.surah-list .surah-item:nth-child(even):hover {
  background: var(--surface-el);
}

/* ============================================================
   PAST PRAYER LOG — Full-screen overlay
   ============================================================ */
.prayer-log {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--bg);
  transform: translateY(100%);
  transition: transform 450ms var(--ease-settle);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
}
.prayer-log.open {
  transform: translateY(0);
}

.prayer-log__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 2;
  border-bottom: 1px solid var(--border);
}

.prayer-log__close {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: var(--surface);
  border-radius: 50%;
  color: var(--text2);
  cursor: pointer;
  transition: all 200ms var(--ease-tactile);
}
.prayer-log__close:active { transform: scale(0.9); }

.prayer-log__title {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
}

/* Stats row */
.prayer-log__stats {
  display: flex;
  gap: 8px;
  padding: 16px 20px 12px;
}

.pls-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-12);
}

.pls-stat__num {
  font-family: var(--f-mono);
  font-size: 22px;
  font-weight: 700;
  color: var(--emerald);
  line-height: 1;
}

.pls-stat__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Week navigation */
.prayer-log__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
}

.prayer-log__arrow {
  width: 36px; height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 50%;
  color: var(--text2);
  cursor: pointer;
  transition: all 200ms var(--ease-tactile);
}
.prayer-log__arrow:active { transform: scale(0.9); background: var(--emerald-lt); }
.prayer-log__arrow:disabled { opacity: 0.3; pointer-events: none; }

.prayer-log__range {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

/* 7-day grid */
.prayer-log__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 8px 12px;
  flex: 1;
}

.pl-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 2px 12px;
  border-radius: var(--r-12);
  transition: background 200ms var(--ease-settle);
}
.pl-day--today {
  background: rgba(13,107,94,0.05);
}
.pl-day--future {
  opacity: 0.35;
  pointer-events: none;
}

.pl-day__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pl-day__date {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  width: 28px; height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.pl-day--today .pl-day__date {
  background: var(--emerald);
  color: #fff;
}

.pl-day__prayers {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  align-items: center;
}

/* Individual prayer check */
.pl-check {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 250ms var(--ease-tactile);
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}
.pl-check:active { transform: scale(0.88); }
.pl-check.checked {
  background: var(--emerald);
  border-color: var(--emerald);
}
.pl-check.checked svg { opacity: 1; }
.pl-check svg {
  opacity: 0;
  transition: opacity 200ms;
}

.pl-check__name {
  font-size: 7px;
  font-weight: 600;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}

/* Day count badge */
.pl-day__count {
  font-size: 10px;
  font-weight: 700;
  color: var(--emerald);
  margin-top: 2px;
}
.pl-day__count--zero {
  color: var(--text3);
  opacity: 0.5;
}
.pl-day__count--full {
  color: var(--gold);
}

/* Quick actions */
.prayer-log__actions {
  display: flex;
  gap: 8px;
  padding: 12px 20px 28px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  bottom: 0;
}

.pla-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 16px;
  background: var(--emerald);
  border: none;
  border-radius: var(--r-full);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--f-body);
  cursor: pointer;
  transition: all 200ms var(--ease-tactile);
}
.pla-btn:active { transform: scale(0.96); }
.pla-btn--clear {
  background: var(--surface);
  color: var(--text2);
  border: 1px solid var(--border);
}
.pla-btn--clear:active { background: var(--surface-el); }

/* Pop animation for check */
@keyframes plCheckPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.25); }
  100% { transform: scale(1); }
}
.pl-check--pop {
  animation: plCheckPop 300ms var(--ease-tactile);
}

/* ---- Journey: Log Past Prayers Button ---- */
.journey-log-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(100% - 40px);
  margin: 12px 20px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-16);
  cursor: pointer;
  transition: all 250ms var(--ease-settle);
  font-family: var(--f-body);
  text-align: left;
}
.journey-log-btn:active {
  transform: scale(0.98);
  background: var(--surface-el);
}

.journey-log-btn__icon {
  width: 38px; height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(13,107,94,0.08);
  border-radius: 50%;
  color: var(--emerald);
  flex-shrink: 0;
}

.journey-log-btn__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.journey-log-btn__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.journey-log-btn__desc {
  font-size: 12px;
  color: var(--text3);
}

.journey-log-btn__chevron {
  color: var(--text3);
  flex-shrink: 0;
}

/* ========== SURAH STORIES SCREEN ========== */
.stories-screen {
  padding: 60px 20px 90px;
  min-height: 100%;
}
.stories-header { margin-bottom: 28px; }
.stories-header__title {
  font-family: var(--f-head);
  font-size: 28px;
  color: var(--text);
  margin: 0 0 4px;
}
.stories-header__subtitle {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--text2);
  margin: 0;
  letter-spacing: 0.02em;
}

/* Featured story card */
.stories-featured { margin-bottom: 28px; }
.sf-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s var(--ease-settle);
}
.sf-card:active { transform: scale(0.98); }
.sf-card__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0D4B5E 0%, #1a2a3a 60%, #0D6B5E 100%);
  z-index: 0;
}
.sf-card__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 40%, rgba(201,168,76,0.12) 0%, transparent 70%);
}
.sf-card__content {
  position: relative;
  z-index: 1;
  padding: 24px 20px;
}
.sf-card__badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(201,168,76,0.2);
  color: var(--gold);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.sf-card__arabic {
  font-family: var(--f-arabic);
  font-size: 22px;
  color: rgba(255,255,255,0.4);
  margin: 0 0 4px;
  text-align: right;
}
.sf-card__title {
  font-family: var(--f-head);
  font-size: 22px;
  color: #fff;
  margin: 0 0 4px;
}
.sf-card__surah {
  font-family: var(--f-body);
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  margin: 0 0 12px;
}
.sf-card__desc {
  font-family: var(--f-body);
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
  margin: 0 0 16px;
}
.sf-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sf-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
}
.sf-card__duration, .sf-card__theme {
  font-family: var(--f-body);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
}
.sf-card__play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s;
  color: #1a1a1a;
}
.sf-card__play:active { transform: scale(0.92); }

/* Story list items */
.stories-section { margin-bottom: 28px; }
.stories-section__title {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 14px;
}
.stories-list { display: flex; flex-direction: column; gap: 12px; }
.sl-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s var(--ease-settle);
}
.sl-card:active { transform: scale(0.98); opacity: 0.9; }
.sl-card__num {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--emerald), #0a5a4e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-head);
  font-size: 16px;
  color: #fff;
  flex-shrink: 0;
}
.sl-card__info { flex: 1; min-width: 0; }
.sl-card__title {
  font-family: var(--f-head);
  font-size: 15px;
  color: var(--text);
  margin: 0 0 2px;
}
.sl-card__sub {
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--text2);
  margin: 0;
}
.sl-card__dur {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--text3);
  flex-shrink: 0;
}

/* Coming soon */
.stories-coming {
  text-align: center;
  padding: 28px 20px;
  opacity: 0.7;
}
.stories-coming__icon { margin-bottom: 10px; }
.stories-coming__text {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--text2);
  margin: 0 0 4px;
}
.stories-coming__sub {
  font-family: var(--f-body);
  font-size: 12px;
  color: var(--text3);
  margin: 0;
}

/* ========== STORY PLAYER OVERLAY ========== */
.story-player {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
.story-player.active {
  display: flex;
}
.story-player__bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #0a1a2a 0%, #0D4B5E 40%, #1a2a1a 100%);
  z-index: 0;
}
.story-player__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, rgba(201,168,76,0.08) 0%, transparent 60%);
}
.story-player__close {
  position: absolute;
  top: 52px;
  left: 16px;
  z-index: 2;
  background: rgba(255,255,255,0.1);
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: rgba(255,255,255,0.8);
  backdrop-filter: blur(10px);
}
.story-player__content {
  position: relative;
  z-index: 1;
  padding: 100px 28px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  overflow-y: auto;
}
.story-player__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.story-player__surah {
  font-family: var(--f-body);
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
}
.story-player__arabic {
  font-family: var(--f-arabic);
  font-size: 16px;
  color: rgba(255,255,255,0.3);
}
.story-player__title {
  font-family: var(--f-head);
  font-size: 26px;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.2;
}
.story-player__theme {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--gold);
  margin: 0 0 32px;
  letter-spacing: 0.04em;
}

/* Visual rings */
.story-player__visual {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}
.story-player__rings {
  position: absolute;
  inset: 0;
}
.story-player__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(201,168,76,0.15);
}
.story-player__ring--1 { inset: 0; animation: sp-breathe 6s ease-in-out infinite; }
.story-player__ring--2 { inset: 20px; animation: sp-breathe 6s ease-in-out infinite 1s; }
.story-player__ring--3 { inset: 40px; animation: sp-breathe 6s ease-in-out infinite 2s; }

.story-player.playing .story-player__ring--1 { border-color: rgba(201,168,76,0.3); }
.story-player.playing .story-player__ring--2 { border-color: rgba(201,168,76,0.25); }
.story-player.playing .story-player__ring--3 { border-color: rgba(201,168,76,0.2); }

@keyframes sp-breathe {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.04); opacity: 1; }
}
.story-player__play-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #1a1a1a;
  transition: transform 0.2s;
  z-index: 1;
}
.story-player__play-btn:active { transform: scale(0.92); }

/* Progress */
.story-player__progress { width: 100%; margin-bottom: 20px; }
.story-player__bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.15);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
}
.story-player__bar-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s linear;
}
.story-player__times {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-family: var(--f-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.4);
}

/* Controls */
.story-player__controls {
  display: flex;
  gap: 40px;
  margin-bottom: 28px;
}
.sp-ctrl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  font-family: var(--f-mono);
  font-size: 10px;
}
.sp-ctrl:active { opacity: 0.7; }

/* Info */
.story-player__info {
  padding: 16px;
  background: rgba(255,255,255,0.05);
  border-radius: 12px;
  width: 100%;
  text-align: left;
}
.story-player__verses {
  font-family: var(--f-body);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  margin: 0 0 6px;
}
.story-player__desc {
  font-family: var(--f-body);
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  margin: 0;
  line-height: 1.5;
}

/* ========== NOOR FAB ========== */
.noor-fab {
  position: absolute;
  bottom: 100px;
  right: 18px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--emerald);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 100;
  transition: transform 0.3s var(--ease-settle);
  box-shadow: 0 4px 20px rgba(13,107,94,0.35);
}
.noor-fab:active { transform: scale(0.9); }
.noor-fab__glow {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,168,76,0.2) 0%, transparent 70%);
  animation: noor-pulse 3s ease-in-out infinite;
}
@keyframes noor-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 0; }
}

/* Hide FAB when chat is open or on non-home screens */
.noor-chat.active ~ .noor-fab,
.noor-fab.hidden { display: none; }

/* ========== NOOR CHAT ========== */
.noor-chat {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--bg);
  display: none;
  flex-direction: column;
}
.noor-chat.active { display: flex; }
.noor-chat__header {
  padding: 50px 16px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.noor-chat__identity {
  display: flex;
  align-items: center;
  gap: 10px;
}
.noor-chat__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(13,107,94,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.noor-chat__name {
  font-family: var(--f-head);
  font-size: 18px;
  color: var(--text);
  margin: 0;
}
.noor-chat__tagline {
  font-family: var(--f-body);
  font-size: 11px;
  color: var(--text3);
  margin: 0;
}
.noor-chat__close {
  background: none;
  border: none;
  color: var(--text2);
  cursor: pointer;
  padding: 4px;
}
.noor-chat__body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
}
.noor-chat__welcome {
  text-align: center;
  padding: 20px 10px 24px;
}
.noor-chat__welcome-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(13,107,94,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.noor-chat__welcome-text {
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--text2);
  line-height: 1.6;
  margin: 0;
}

/* Suggestion chips */
.noor-chat__suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.noor-sug {
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: all 0.2s;
  line-height: 1.4;
}
.noor-sug:active { background: rgba(13,107,94,0.08); border-color: var(--emerald); }

/* Chat messages */
.noor-chat__messages {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.noor-msg {
  max-width: 88%;
  padding: 12px 14px;
  border-radius: 16px;
  font-family: var(--f-body);
  font-size: 14px;
  line-height: 1.6;
}
.noor-msg--user {
  align-self: flex-end;
  background: var(--emerald);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.noor-msg--ai {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.noor-msg--typing {
  display: flex;
  gap: 4px;
  padding: 16px 18px;
}
.noor-msg--typing span {
  width: 6px;
  height: 6px;
  background: var(--text3);
  border-radius: 50%;
  animation: noor-typing 1.2s ease-in-out infinite;
}
.noor-msg--typing span:nth-child(2) { animation-delay: 0.15s; }
.noor-msg--typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes noor-typing {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* Input area */
.noor-chat__input-wrap {
  padding: 12px 16px calc(env(safe-area-inset-bottom, 20px) + 12px);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  background: var(--bg);
}
.noor-chat__input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 24px;
  font-family: var(--f-body);
  font-size: 14px;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color 0.2s;
}
.noor-chat__input:focus { border-color: var(--emerald); }
.noor-chat__input::placeholder { color: var(--text3); }
.noor-chat__send {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--emerald);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.15s;
}
.noor-chat__send:active { transform: scale(0.9); }