/* =========================================================
   DEEN REMINDER — Stylesheet (Premium Edition)
   Design language: deep emerald + antique gold on warm
   cream paper. Typography pairs an elegant English serif
   (Cormorant Garamond) with authentic Arabic calligraphy
   (Amiri) and a clean utility sans (Inter). The signature
   device is the 8-point star (khatam) — used as a slow-
   rotating hero backdrop, a section marker, and a loader.
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
  /* Light theme (default) */
  --bg: #FAF7EF;
  --surface: #FFFFFF;
  --surface-2: #F3EFE2;
  --surface-3: #ECE5D2;
  --border: #E2DAC4;
  --ink: #17231D;
  --ink-soft: #52625A;
  --ink-faint: #616D65;
  --green-900: #0A3A2B;
  --green-800: #0D4A38;
  --green-700: #0F5C3F;
  --green-600: #157A50;
  --green-500: #1E9C63;
  --gold-700: #8C6A24;
  --gold-600: #8C6A24;
  --gold-500: #C6A155;
  --gold-400: #D8BA74;
  --gold-300: #E7D3A0;
  --shadow-sm: 0 4px 14px -8px rgba(10,58,43,0.18);
  --shadow: 0 14px 36px -14px rgba(10,58,43,0.22);
  --shadow-lg: 0 26px 60px -20px rgba(10,58,43,0.30);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --font-arabic: "Amiri", "Traditional Arabic", serif;
  --font-heading: "Cormorant Garamond", "Georgia", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --star-color: rgba(10,58,43,0.07);
  --ease: cubic-bezier(.22,.61,.36,1);
}

[data-theme="dark"]{
  --bg: #0A1611;
  --surface: #11201A;
  --surface-2: #152720;
  --surface-3: #1B3128;
  --border: #23392E;
  --ink: #EEE9DA;
  --ink-soft: #ABBBB1;
  --ink-faint: #7C9086;
  --green-900: #082A20;
  --green-800: #0B3F2E;
  --green-700: #135038;
  --green-600: #1D7350;
  --green-500: #2A9862;
  --gold-700: #C6A155;
  --gold-600: #D3B067;
  --gold-500: #E0C077;
  --gold-400: #EAD59E;
  --gold-300: #F1E2B9;
  --shadow-sm: 0 4px 16px -8px rgba(0,0,0,0.5);
  --shadow: 0 16px 40px -16px rgba(0,0,0,0.6);
  --shadow-lg: 0 30px 70px -22px rgba(0,0,0,0.7);
  --star-color: rgba(224,192,119,0.06);
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

/* Respect device notches / home indicator when running installed (standalone) */
body{ padding-bottom: env(safe-area-inset-bottom, 0); }
.site-header{ padding-top: env(safe-area-inset-top, 0); }
.install-banner{ bottom: calc(20px + env(safe-area-inset-bottom, 0)); }
.audio-player{ bottom: calc(16px + env(safe-area-inset-bottom, 0)); }

/* Skip-to-content link: invisible until keyboard-focused */
.skip-link{
  position: absolute; left: 12px; top: -60px; z-index: 500;
  background: var(--green-900); color: #fff; padding: 12px 18px;
  border-radius: 8px; font-size: 14px; font-weight:600;
  transition: top .2s ease;
}
.skip-link:focus{ top: 12px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  transition: background .35s ease, color .35s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family: var(--font-heading); margin:0 0 .38em; color: var(--green-900); line-height:1.18; font-weight:600; letter-spacing:-.01em; }
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4{ color: var(--gold-300); }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }
svg{ width:1em; height:1em; }
:focus-visible{ outline: 2px solid var(--gold-500); outline-offset: 3px; border-radius: 4px; }

.container{ max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.section{ padding: 88px 0; position: relative; }
.section-head{ text-align:center; max-width: 640px; margin: 0 auto 46px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-600);
  font-weight: 600;
  margin-bottom: 12px;
}
[data-theme="dark"] .eyebrow{ color: var(--gold-500); }
.eyebrow::before,.eyebrow::after{ content:""; width: 20px; height:1px; background: var(--gold-500); opacity:.6; }
.section-head h2{ font-size: clamp(28px, 3.8vw, 42px); }
.section-head p{ color: var(--ink-soft); margin:0; font-size: 15.5px; }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in-view{ opacity:1; transform:none; }
.reveal-scale{ opacity:0; transform: scale(.94); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal-scale.in-view{ opacity:1; transform:none; }

/* ---------- Signature motif: 8-point star (khatam) ---------- */
.khatam-bg{
  position:absolute; inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(var(--star-color) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--star-color) 1.5px, transparent 1.5px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse at center, black 40%, transparent 78%);
}
.star-ring{
  position:absolute;
  width: 620px; height: 620px;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  opacity: .5;
  pointer-events:none;
}
.star-ring svg{ width:100%; height:100%; animation: spin-slow 140s linear infinite; }
.star-ring.reverse svg{ animation-duration: 190s; animation-direction: reverse; }
@keyframes spin-slow{ to{ transform: rotate(360deg); } }

.star-divider{
  width: 30px; height: 30px; margin: 0 auto 20px;
  position: relative;
  transform: rotate(15deg);
  animation: pulse-star 3.4s ease-in-out infinite;
}
.star-divider::before,.star-divider::after{
  content:"";
  position:absolute; inset:0;
  border: 2px solid var(--gold-500);
}
.star-divider::after{ transform: rotate(45deg); }
@keyframes pulse-star{ 0%,100%{ opacity:.75; } 50%{ opacity:1; transform: rotate(15deg) scale(1.08); } }

/* ---------- Header ---------- */
.site-header{
  position: sticky; top:0; z-index: 50;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s ease, background .3s ease;
}
.site-header.scrolled{ box-shadow: var(--shadow-sm); }
.nav-wrap{
  display:flex; align-items:center; justify-content:space-between;
  padding: 15px 20px;
  max-width: 1180px; margin: 0 auto;
}
.brand{ display:flex; align-items:center; gap:11px; font-family: var(--font-heading); font-size: 23px; font-weight:700; color: var(--green-900); letter-spacing:-.01em; }
[data-theme="dark"] .brand{ color: var(--gold-300); }
.brand-mark{
  width: 38px; height: 38px; flex-shrink:0;
  display:grid; place-items:center;
  border-radius: 50%;
  background: linear-gradient(155deg, var(--green-700), var(--green-900));
  color: var(--gold-300);
  position: relative;
  box-shadow: 0 0 0 1px var(--gold-500) inset, var(--shadow-sm);
}
.brand-mark svg{ width:18px; height:18px; stroke-width:1.8; }

.nav-links{ display:flex; gap: 6px; align-items:center; }
.nav-links a{
  font-size: 14.5px; font-weight:500; color: var(--ink-soft);
  position:relative; padding: 9px 14px; border-radius: 999px;
  transition: color .2s ease, background .2s ease;
}
.nav-links a::after{
  content:""; position:absolute; left:14px; right:14px; bottom:5px; height:2px;
  background: var(--gold-500); border-radius:2px;
  transform: scaleX(0); transform-origin:left; transition: transform .28s var(--ease);
}
.nav-links a:hover{ color: var(--green-700); }
.nav-links a:active{ opacity: .65; }
.nav-links a:hover::after, .nav-links a.active::after{ transform: scaleX(1); }
.nav-links a.active{ color: var(--green-700); font-weight:600; }
[data-theme="dark"] .nav-links a:hover, [data-theme="dark"] .nav-links a.active{ color: var(--gold-400); }

.nav-actions{ display:flex; align-items:center; gap: 10px; }
.theme-toggle{
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--ink);
  display:grid; place-items:center;
  cursor:pointer;
  transition: transform .3s var(--ease), background .25s ease, border-color .25s ease;
}
.theme-toggle:hover{ transform: rotate(25deg); border-color: var(--gold-500); }
.theme-toggle svg{ width:19px; height:19px; }
.icon-moon{ display:none; }
[data-theme="dark"] .icon-sun{ display:none; }
[data-theme="dark"] .icon-moon{ display:block; }

.menu-btn{
  display:none;
  width: 42px; height:42px; border-radius: var(--radius-sm);
  border:1px solid var(--border); background: var(--surface-2);
  cursor:pointer; align-items:center; justify-content:center; color: var(--ink);
}
.menu-btn svg{ width:19px;height:19px; }
.menu-btn .icon-close{ display:none; }
.menu-btn.open .icon-open{ display:none; }
.menu-btn.open .icon-close{ display:block; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding: 14px 28px; border-radius: 999px;
  font-weight:600; font-size: 14.5px; cursor:pointer; border:1px solid transparent;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s ease;
  position: relative; overflow:hidden;
}
.btn svg{ width:17px; height:17px; }
.btn:hover{ transform: translateY(-3px); }
.btn:active{ transform: translateY(0) scale(.97); transition-duration: .1s; }
.btn-primary{
  background: linear-gradient(150deg, var(--green-600), var(--green-900));
  color:#fff; box-shadow: 0 14px 28px -12px rgba(15,92,63,0.55);
}
.btn-primary::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.btn-primary:hover::before{ transform: translateX(120%); }
.btn-ghost{ background: transparent; border-color: var(--border); color: var(--ink); }
.btn-ghost:hover{ border-color: var(--gold-500); color: var(--green-700); }
[data-theme="dark"] .btn-ghost:hover{ color: var(--gold-400); }

/* ---------- Cards / grid ---------- */
.grid{ display:grid; gap: 22px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }

.card{
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
}
.card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold-500); }
.card:active{ transform: translateY(-1px) scale(.98); transition-duration: .1s; }
.card-icon{
  width: 50px; height:50px; border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(155deg, var(--green-700), var(--green-500));
  color: var(--gold-300);
  margin-bottom: 18px;
  transition: transform .3s var(--ease);
}
.card:hover .card-icon{ transform: scale(1.08) rotate(-4deg); }
.card-icon svg{ width:23px; height:23px; stroke-width: 1.7; }
.card h3{ font-size: 20px; }
.card p{ color: var(--ink-soft); font-size: 14.5px; margin-bottom:0; }

/* ---------- Hero ---------- */
.hero{
  position: relative; overflow:hidden;
  padding: 96px 0 72px;
  background: radial-gradient(120% 100% at 50% 0%, var(--surface-2), var(--bg));
  border-bottom: 1px solid var(--border);
}
.hero-inner{ position:relative; z-index:2; text-align:center; max-width: 800px; margin: 0 auto; }
.hero-arabic{
  font-family: var(--font-arabic);
  font-size: clamp(32px, 5.4vw, 48px);
  color: var(--gold-600);
  margin-bottom: 8px;
  direction: rtl;
  opacity:0; animation: fade-up .8s var(--ease) .1s forwards;
}
[data-theme="dark"] .hero-arabic{ color: var(--gold-500); }
.hero-tagline-badge{
  display:inline-block; margin: 0 auto 18px;
  padding: 8px 18px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-family: var(--font-body); font-size: 13.5px; font-weight:700;
  color: var(--green-700); letter-spacing:.01em; box-shadow: var(--shadow-sm);
  opacity:0; animation: fade-up .8s var(--ease) .2s forwards;
}
[data-theme="dark"] .hero-tagline-badge{ color: var(--gold-400); }
.hero h1{ font-size: clamp(34px, 5.8vw, 56px); margin-bottom: 16px; opacity:0; animation: fade-up .8s var(--ease) .28s forwards; }
.hero p.lede{ color: var(--ink-soft); font-size: 17.5px; max-width: 560px; margin: 0 auto 30px; opacity:0; animation: fade-up .8s var(--ease) .44s forwards; }
.hero-date-row{
  display:flex; flex-wrap:wrap; gap: 12px; justify-content:center; margin-bottom: 34px;
  opacity:0; animation: fade-up .8s var(--ease) .58s forwards;
}
@keyframes fade-up{ from{ opacity:0; transform: translateY(18px); } to{ opacity:1; transform:none; } }

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--surface); border:1px solid var(--border);
  font-size: 13.5px; font-weight:500; color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
}
.pill svg{ width:15px; height:15px; color: var(--gold-600); }
.pill strong{ color: var(--green-700); font-weight:700; }
[data-theme="dark"] .pill strong{ color: var(--gold-400); }
/* Hero live "Next Prayer" stat — the single most time-sensitive fact
   on the page, so it earns a prominent spot right in the hero rather
   than waiting a full scroll down to the dashboard. */
.hero-stat{
  display:inline-flex; align-items:center; gap: 18px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  padding: 12px 26px 12px 14px; margin: 0 auto 30px;
  box-shadow: var(--shadow-lg);
  opacity:0; animation: fade-up .8s var(--ease) .58s forwards;
}
.hero-stat-icon{
  width: 42px; height:42px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
  background: linear-gradient(155deg, var(--green-700), var(--green-500)); color: var(--gold-300);
}
.hero-stat-icon svg{ width:19px; height:19px; }
.hero-stat-body{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; }
.hero-stat-label{ font-size: 11.5px; text-transform:uppercase; letter-spacing:.12em; font-weight:700; color: var(--gold-600); }
[data-theme="dark"] .hero-stat-label{ color: var(--gold-500); }
.hero-stat-value{ font-family: var(--font-heading); font-size: 21px; font-weight:700; color: var(--green-900); line-height:1.15; min-width:auto; }
[data-theme="dark"] .hero-stat-value{ color: var(--gold-300); }
.hero-stat-countdown{
  padding-left: 18px; border-left: 1px solid var(--border);
  font-family: var(--font-heading); font-size: 17px; font-weight:700; color: var(--green-700);
}
[data-theme="dark"] .hero-stat-countdown{ color: var(--gold-400); }

.hero-cta{ display:flex; gap: 14px; justify-content:center; flex-wrap:wrap; opacity:0; animation: fade-up .8s var(--ease) .72s forwards; }

/* ---------- Prayer times ---------- */
.prayer-section{ background: var(--surface-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:relative; overflow:hidden; }
.location-row{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin-bottom: 30px; flex-wrap:wrap; text-align:center;
}
.location-row button{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--surface); border:1px solid var(--border); color: var(--green-700);
  padding: 9px 16px; border-radius: 999px; font-size:13px; font-weight:600; cursor:pointer;
  transition: border-color .2s ease, transform .2s ease;
}
.location-row button:hover{ border-color: var(--gold-500); transform: translateY(-2px); }
.location-row button svg{ width:14px; height:14px; }
[data-theme="dark"] .location-row button{ color: var(--gold-500); }
#location-label{ font-size:14px; color: var(--ink-soft); }

.prayer-grid{
  display:grid; grid-template-columns: repeat(6, 1fr); gap: 14px;
}
.prayer-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-align:center;
  padding: 22px 10px;
  transition: border-color .25s ease, transform .3s var(--ease), background .3s ease, box-shadow .3s ease;
}
.prayer-card:hover{ transform: translateY(-4px); box-shadow: var(--shadow-sm); }
.prayer-card:active{ transform: scale(.97); transition-duration: .1s; }
.prayer-card .prayer-icon{ margin: 0 auto 10px; width:26px; height:26px; color: var(--gold-600); }
.prayer-card.active{
  border-color: var(--gold-500);
  background: linear-gradient(170deg, var(--green-700), var(--green-900));
  color: #F4EAD0;
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.prayer-card.active .prayer-icon{ color: var(--gold-300); }
.prayer-card.active h4, .prayer-card.active .prayer-time{ color:#F4EAD0; }
.prayer-card h4{ font-size: 12.5px; text-transform: uppercase; letter-spacing:.09em; color: var(--ink-soft); margin-bottom: 8px; font-family: var(--font-body); font-weight:600; }
.prayer-time{ font-family: var(--font-heading); font-size: 23px; font-weight:700; color: var(--green-800); }
.prayer-status{
  text-align:center; margin-top:24px; font-size:14.5px; color: var(--ink-soft);
}
.prayer-status strong{ color: var(--gold-600); }
[data-theme="dark"] .prayer-status strong{ color: var(--gold-400); }
#prayer-countdown{ display:block; margin-top:6px; font-size:13px; color: var(--ink-faint); }

/* ---------- Verse / Hadith split ---------- */
.split-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.content-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 36px 32px; box-shadow: var(--shadow); position:relative; overflow:hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.content-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.content-card::before{
  content:""; position:absolute; top:-40px; right:-40px; width:140px; height:140px;
  border-radius:50%; background: radial-gradient(circle, var(--gold-300) 0%, transparent 70%);
  opacity:.35; pointer-events:none;
}
[data-theme="dark"] .content-card::before{ opacity:.12; }
.content-card .tag{
  display:inline-flex; align-items:center; gap:7px;
  font-size: 12px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color: var(--gold-600);
}
.content-card .tag svg{ width:14px; height:14px; }
[data-theme="dark"] .content-card .tag{ color: var(--gold-500); }
.content-card blockquote{
  font-family: var(--font-heading); font-size: 22px; font-weight: 500; margin: 16px 0; color: var(--ink); line-height:1.6;
}
.content-card .arabic{ direction: rtl; font-family: var(--font-arabic); font-size: 26px; color: var(--green-800); margin-bottom: 12px; line-height:2; }
[data-theme="dark"] .content-card .arabic{ color: var(--gold-400); }
.content-card .source{ font-size: 13.5px; color: var(--ink-soft); }

/* ---------- Tasbih ---------- */
.tasbih-wrap{ display:flex; flex-direction:column; align-items:center; gap: 26px; }
.tasbih-dial{
  width: 250px; height: 250px; border-radius: 50%;
  background: conic-gradient(var(--green-500) calc(var(--pct,0) * 1%), var(--surface-3) 0);
  display:grid; place-items:center; position:relative;
  box-shadow: var(--shadow-lg);
  transition: background .3s ease;
}
.tasbih-dial::before{
  content:""; position:absolute; inset: 14px; border-radius:50%;
  background: var(--surface); border:1px solid var(--border);
}
.tasbih-inner{ position:relative; z-index:2; text-align:center; }
#tasbih-count{ font-family: var(--font-heading); font-size: 58px; font-weight:700; color: var(--green-900); transition: transform .15s ease; }
[data-theme="dark"] #tasbih-count{ color: var(--gold-300); }
#tasbih-count.bump{ transform: scale(1.15); }
#tasbih-target{ font-size:13px; color: var(--ink-soft); }
.tasbih-controls{ display:flex; gap: 12px; flex-wrap:wrap; justify-content:center; }
.tasbih-tap{
  width: 138px; height:138px; border-radius: 50%;
  border:none; cursor:pointer;
  background: radial-gradient(circle at 35% 30%, var(--green-500), var(--green-900));
  color:#fff; font-weight:700; font-size:16px;
  box-shadow: 0 18px 34px -12px rgba(15,92,63,.6), 0 0 0 6px color-mix(in srgb, var(--green-500) 14%, transparent);
  transition: transform .12s ease, box-shadow .2s ease;
}
.tasbih-tap:hover{ box-shadow: 0 20px 38px -10px rgba(15,92,63,.7), 0 0 0 9px color-mix(in srgb, var(--green-500) 18%, transparent); }
.tasbih-tap:active{ transform: scale(.93); }
.dhikr-select{
  display:flex; gap:9px; flex-wrap:wrap; justify-content:center; margin-bottom: 6px;
}
.dhikr-chip{
  padding: 9px 16px; border-radius: 999px; border:1px solid var(--border);
  background: var(--surface); font-size: 13px; cursor:pointer; color: var(--ink-soft);
  transition: all .2s ease;
}
.dhikr-chip:hover{ border-color: var(--gold-500); }
.dhikr-chip:active{ transform: scale(.94); transition-duration: .1s; }
.dhikr-chip.active{ background: linear-gradient(150deg, var(--green-600), var(--green-800)); color:#fff; border-color: transparent; }
.small-btn{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--border); background: var(--surface); border-radius: 999px;
  padding: 10px 18px; font-size: 13.5px; cursor:pointer; color: var(--ink-soft);
  transition: all .2s ease;
}
.small-btn svg{ width:14px;height:14px; }
.small-btn:hover{ border-color: var(--gold-500); color: var(--green-700); transform: translateY(-2px); }
[data-theme="dark"] .small-btn:hover{ color: var(--gold-400); }

/* ---------- Adhkar ---------- */
.adhkar-tabs{ display:flex; gap:10px; justify-content:center; margin-bottom: 32px; flex-wrap:wrap; }
.adhkar-tab{
  display:inline-flex; align-items:center; gap:8px;
  padding: 11px 24px; border-radius: 999px; border:1px solid var(--border);
  background: var(--surface); cursor:pointer; font-weight:600; font-size:14px; color: var(--ink-soft);
  transition: all .25s var(--ease);
}
.adhkar-tab svg{ width:16px;height:16px; }
.adhkar-tab.active{ background: linear-gradient(150deg, var(--green-600), var(--green-900)); color:#fff; border-color: transparent; box-shadow: var(--shadow-sm); }
.adhkar-tab:active{ transform: scale(.96); transition-duration: .1s; }
.adhkar-list{ display:flex; flex-direction:column; gap: 16px; }
.adhkar-item{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 24px 26px; box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s ease;
}
.adhkar-item:hover{ transform: translateX(4px); box-shadow: var(--shadow); border-color: var(--gold-500); }
.adhkar-item .arabic{ direction: rtl; font-family: var(--font-arabic); font-size: 22px; line-height: 2; color: var(--green-800); margin-bottom:10px; }
[data-theme="dark"] .adhkar-item .arabic{ color: var(--gold-400); }
.adhkar-item .translation{ font-size: 14.5px; color: var(--ink-soft); margin-bottom: 8px; }
.adhkar-item .meta{ display:flex; justify-content:space-between; align-items:center; font-size: 12.5px; color: var(--gold-600); font-weight:600; }
[data-theme="dark"] .adhkar-item .meta{ color: var(--gold-500); }

/* ---------- Reminder banner ---------- */
.reminder-banner{
  background: linear-gradient(125deg, var(--green-900), var(--green-700));
  color: #F4EAD0;
  border-radius: var(--radius-lg);
  padding: 42px 34px;
  text-align:center;
  position:relative; overflow:hidden;
  box-shadow: var(--shadow-lg);
}
.reminder-banner .khatam-bg{ opacity: .5; }
.reminder-banner .star-divider::before,.reminder-banner .star-divider::after{ border-color: var(--gold-300); }
.reminder-banner p{ font-family: var(--font-heading); font-weight:500; font-size: clamp(19px,2.6vw,26px); max-width: 700px; margin: 0 auto; position:relative; z-index:1; }

/* "Tazkirah in Hausa" banner */
.hausa-banner{
  background: linear-gradient(125deg, var(--green-900), var(--green-700));
  color: #F4EAD0; border-radius: var(--radius-lg);
  padding: 48px 40px; text-align:center;
  position:relative; overflow:hidden; box-shadow: var(--shadow-lg);
}
.hausa-banner .khatam-bg{ opacity:.5; }
.hausa-banner-content{ position:relative; z-index:1; max-width: 620px; margin:0 auto; }
.hausa-banner-content h2{ color:#fff; font-size: clamp(26px,3.4vw,36px); margin: 8px 0 14px; }
.hausa-banner-content p{ color: #D9E4DD; font-size:15.5px; margin-bottom: 26px; }
.hausa-banner-content .btn-primary{ background: var(--gold-500); color: var(--green-900); box-shadow: 0 14px 28px -12px rgba(198,161,85,0.5); }
.hausa-banner-content .btn-primary:hover{ background: var(--gold-400); }

/* "Coming Soon" roadmap cards */
.roadmap-card{ position:relative; padding-top: 40px; }
.roadmap-badge{
  position:absolute; top: 18px; right: 18px;
  font-size: 10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface-3); color: var(--gold-600);
}
[data-theme="dark"] .roadmap-badge{ color: var(--gold-500); }
.roadmap-card .card-icon{ opacity:.9; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--green-900); color: #E7E2D3; padding: 56px 0 26px; margin-top: 40px; }
.footer-grid{ display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 34px; }
.footer-share{ display:flex; flex-wrap:wrap; gap: 10px; }
.footer-share a{
  width: 38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  background: rgba(255,255,255,0.08); color:#E7D3A0;
  transition: background .2s ease, transform .2s ease;
}
.footer-share a:hover{ background: var(--gold-500); color: var(--green-900); transform: translateY(-2px); }
.footer-share svg{ width:17px; height:17px; }
.footer-brand{ display:flex; align-items:center; gap:10px; font-family: var(--font-heading); font-size: 23px; color: var(--gold-300); margin-bottom: 12px; }
.site-footer p{ color: #B9C4BB; font-size: 14px; }
.site-footer h4{ color:#fff; font-size: 13.5px; text-transform:uppercase; letter-spacing:.1em; margin-bottom: 16px; }
.site-footer ul li{ margin-bottom: 9px; }
.site-footer a{ color: #C9D3CC; font-size: 14px; transition: color .2s ease; }
.site-footer a:hover{ color: var(--gold-300); }
.footer-bottom{ border-top: 1px solid rgba(255,255,255,0.1); padding-top: 22px; text-align:center; font-size:13px; color: #9EAA9F; }

/* ---------- Simple pages (About / Contact) ---------- */
.page-hero{ padding: 70px 0 46px; text-align:center; border-bottom: 1px solid var(--border); position:relative; overflow:hidden; }
.page-hero h1{ font-size: clamp(32px,4.6vw,46px); }
.page-hero p{ color: var(--ink-soft); max-width: 600px; margin: 0 auto; }
.prose{ max-width: 720px; margin: 0 auto; }
.prose h3{ margin-top: 34px; display:flex; align-items:center; gap:10px; }
.prose h3 svg{ width:20px;height:20px; color: var(--gold-600); }
.prose p{ color: var(--ink-soft); }

.contact-grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap: 46px; }
.form-field{ margin-bottom: 20px; }
.form-field label{ display:block; font-size: 13.5px; font-weight:600; margin-bottom: 7px; color: var(--ink-soft); }
.form-field input, .form-field textarea{
  width:100%; padding: 13px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 14.5px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.form-field input:focus, .form-field textarea:focus{ border-color: var(--gold-500); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-500) 20%, transparent); outline:none; }
.form-field textarea{ resize: vertical; min-height: 130px; }
.contact-info-item{ display:flex; gap:16px; align-items:flex-start; margin-bottom: 24px; }
.contact-info-item .card-icon{ margin-bottom:0; flex-shrink:0; }
.form-note{ font-size: 13px; color: var(--green-700); margin-top: 12px; min-height:1em; }
[data-theme="dark"] .form-note{ color: var(--gold-400); }

/* ---------- Utility ---------- */
.hidden{ display:none !important; }
.mt-24{ margin-top:24px; }
.text-center{ text-align:center; }

/* ---------- Daily Deen Dashboard ---------- */
.dash-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.dash-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 28px 26px; box-shadow: var(--shadow-sm); position:relative; overflow:hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
  display:flex; flex-direction:column;
}
.dash-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--gold-500); }
.dash-card .dash-icon{
  width: 44px; height:44px; border-radius: 12px;
  display:grid; place-items:center; margin-bottom: 14px;
  background: linear-gradient(155deg, var(--green-700), var(--green-500)); color: var(--gold-300);
}
.dash-card .dash-icon svg{ width:21px; height:21px; }
.dash-card .dash-label{ font-size: 12px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; color: var(--gold-600); margin-bottom: 8px; }
[data-theme="dark"] .dash-card .dash-label{ color: var(--gold-500); }
.dash-card .dash-value{ font-family: var(--font-heading); font-size: 22px; font-weight:700; color: var(--green-900); margin-bottom: 4px; }
[data-theme="dark"] .dash-card .dash-value{ color: var(--gold-300); }
.dash-card .dash-sub{ font-size: 13.5px; color: var(--ink-soft); }
.dash-card.wide{ grid-column: span 1; }
.dash-card .arabic{ direction:rtl; font-family: var(--font-arabic); font-size:19px; color: var(--green-800); margin-bottom:8px; line-height:1.8; }
[data-theme="dark"] .dash-card .arabic{ color: var(--gold-400); }
.dash-card blockquote{ font-family: var(--font-heading); font-size:16.5px; font-weight:500; margin:0 0 8px; line-height:1.55; }
.dash-card .source{ font-size:12.5px; color: var(--ink-faint); margin-top:auto; }
.dash-card.challenge{ background: linear-gradient(160deg, var(--green-900), var(--green-700)); color:#F4EAD0; border-color: transparent; }
.dash-card.challenge .dash-label{ color: var(--gold-300); }
.dash-card.challenge p{ font-family: var(--font-heading); font-size:18px; margin-bottom:16px; }
.dash-card.challenge .dash-icon{ background: rgba(244,234,208,0.14); color: var(--gold-300); }

.challenge-btn{
  display:inline-flex; align-items:center; gap:8px; align-self:flex-start;
  padding: 10px 18px; border-radius: 999px; border:1px solid rgba(244,234,208,0.4);
  background: rgba(244,234,208,0.08); color:#F4EAD0; font-size:13.5px; font-weight:600; cursor:pointer;
  transition: all .25s ease;
}
.challenge-btn svg{ width:15px; height:15px; }
.challenge-btn:hover{ background: rgba(244,234,208,0.18); }
.challenge-btn.done{ background: var(--gold-500); border-color: var(--gold-500); color: var(--green-900); }

/* ---------- Streak Tracker ---------- */
.streak-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.streak-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 26px 20px; text-align:center; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s ease;
}
.streak-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--gold-500); }
.streak-card:active{ transform: scale(.98); transition-duration: .1s; }
.streak-icon{
  width: 48px; height:48px; margin: 0 auto 14px; border-radius: 50%;
  display:grid; place-items:center;
  background: linear-gradient(155deg, var(--green-700), var(--green-500)); color: var(--gold-300);
}
.streak-icon svg{ width:22px; height:22px; }
.streak-count{ font-family: var(--font-heading); font-size: 40px; font-weight:700; color: var(--green-900); line-height:1; }
[data-theme="dark"] .streak-count{ color: var(--gold-300); }
.streak-label{ font-size: 14px; font-weight:600; margin-top: 6px; }
.streak-sub{ font-size: 12px; color: var(--ink-faint); margin-bottom: 16px; }
.streak-btn.done{ background: var(--gold-500); color: var(--green-900); border-color: var(--gold-500); }

/* ---------- About: Creator card ---------- */
.creator-card{
  display:flex; gap: 26px; align-items:center;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 34px; box-shadow: var(--shadow); margin: 30px 0 10px;
}
.creator-avatar{
  width: 84px; height:84px; border-radius: 50%; flex-shrink:0;
  display:grid; place-items:center;
  background: linear-gradient(155deg, var(--green-700), var(--green-900));
  color: var(--gold-300); box-shadow: 0 0 0 4px var(--surface-2), 0 0 0 5px var(--gold-500);
}
.creator-avatar svg{ width:36px; height:36px; }
.creator-card h4{ font-family: var(--font-heading); font-size: 21px; margin-bottom:2px; }
.creator-card .role{ font-size: 12.5px; text-transform:uppercase; letter-spacing:.1em; color: var(--gold-600); font-weight:700; margin-bottom:10px; }
[data-theme="dark"] .creator-card .role{ color: var(--gold-500); }
.creator-card p{ margin-bottom:0; color: var(--ink-soft); font-size:14.5px; }

/* ---------- Feedback tabs (Contact page) ---------- */
.feedback-tabs{ display:flex; gap:10px; margin-bottom: 24px; flex-wrap:wrap; }
.feedback-tab{
  display:inline-flex; align-items:center; gap:7px;
  padding: 10px 18px; border-radius: 999px; border:1px solid var(--border);
  background: var(--surface); cursor:pointer; font-weight:600; font-size:13.5px; color: var(--ink-soft);
  transition: all .25s var(--ease);
}
.feedback-tab svg{ width:15px;height:15px; }
.feedback-tab.active{ background: linear-gradient(150deg, var(--green-600), var(--green-900)); color:#fff; border-color: transparent; }

/* ---------- PWA install banner ---------- */
.install-banner{
  position: fixed; left: 20px; right: 20px; bottom: 20px; z-index: 200;
  max-width: 420px; margin: 0 auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 16px 18px;
  display:flex; align-items:center; gap: 14px;
  transform: translateY(140%); opacity:0; transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.install-banner.show{ transform: translateY(0); opacity:1; }
.install-banner .install-icon{
  width: 44px; height:44px; border-radius: 12px; flex-shrink:0;
  display:grid; place-items:center;
  background: linear-gradient(155deg, var(--green-700), var(--green-500)); color: var(--gold-300);
}
.install-banner .install-icon svg{ width:21px; height:21px; }
.install-banner .install-copy{ flex:1; min-width:0; }
.install-banner .install-copy strong{ display:block; font-size: 14px; margin-bottom:2px; }
.install-banner .install-copy span{ font-size: 12.5px; color: var(--ink-soft); }
.install-banner .install-actions{ display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.install-banner button{ cursor:pointer; border-radius: 999px; font-weight:600; white-space:nowrap; }
.install-banner .install-yes{
  background: linear-gradient(150deg, var(--green-600), var(--green-900)); color:#fff; border:none;
  padding: 8px 16px; font-size: 13px;
}
.install-banner .install-dismiss{
  background: none; border:none; color: var(--ink-faint); font-size: 12px; padding: 4px;
}

/* iOS "Add to Home Screen" instructions modal */
.ios-modal-backdrop{
  position: fixed; inset:0; background: rgba(10,20,16,0.55); z-index: 300;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition: opacity .3s ease;
}
.ios-modal-backdrop.show{ opacity:1; pointer-events:auto; }
.ios-modal{
  background: var(--surface); border-radius: 20px 20px 0 0; padding: 28px 26px 34px;
  max-width: 460px; width:100%; box-shadow: var(--shadow-lg);
  transform: translateY(20px); transition: transform .3s var(--ease);
}
.ios-modal-backdrop.show .ios-modal{ transform: translateY(0); }
.ios-modal h4{ font-family: var(--font-heading); font-size:20px; margin-bottom:12px; }
.ios-modal ol{ list-style: decimal; padding-left: 20px; margin: 0 0 18px; }
.ios-modal li{ margin-bottom: 8px; font-size: 14px; color: var(--ink-soft); }
.ios-modal .btn{ width:100%; justify-content:center; }

/* First-visit onboarding welcome card */
.onboarding-backdrop{
  position: fixed; inset:0; z-index: 400;
  background: rgba(8,18,14,0.62); backdrop-filter: blur(3px);
  display:flex; align-items:center; justify-content:center; padding: 20px;
  opacity:0; pointer-events:none; transition: opacity .3s ease;
}
.onboarding-backdrop.show{ opacity:1; pointer-events:auto; }
.onboarding-card{
  background: var(--surface); border-radius: var(--radius-lg); padding: 38px 32px 32px;
  max-width: 420px; width:100%; box-shadow: var(--shadow-lg);
  text-align:center; transform: scale(.92) translateY(10px); opacity:0;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.onboarding-backdrop.show .onboarding-card{ transform: scale(1) translateY(0); opacity:1; }
.onboarding-icon{
  width: 60px; height:60px; margin: 0 auto 18px; border-radius:50%;
  display:grid; place-items:center;
  background: linear-gradient(155deg, var(--green-700), var(--green-500)); color: var(--gold-300);
  box-shadow: var(--shadow);
}
.onboarding-icon svg{ width:27px; height:27px; }
.onboarding-card h3{ font-size: 24px; margin-bottom:6px; }
.onboarding-tagline{ color: var(--gold-600); font-weight:600; font-size:14.5px; margin-bottom:22px; }
[data-theme="dark"] .onboarding-tagline{ color: var(--gold-500); }
.onboarding-features{ list-style:none; margin: 0 0 26px; padding:0; text-align:left; display:flex; flex-direction:column; gap:14px; }
.onboarding-features li{ display:flex; align-items:flex-start; gap:12px; font-size:14.5px; color: var(--ink-soft); }
.onboarding-features svg{ width:19px; height:19px; color: var(--green-600); flex-shrink:0; margin-top:1px; }
[data-theme="dark"] .onboarding-features svg{ color: var(--gold-400); }

/* ---------- Language switcher ---------- */
.lang-switch{ position:relative; }
.lang-toggle{
  display:flex; align-items:center; gap:6px;
  width:auto; padding: 0 12px; height: 42px; border-radius: 999px;
  border:1px solid var(--border); background: var(--surface-2); color: var(--ink);
  cursor:pointer; font-size:13px; font-weight:600;
}
.lang-toggle svg{ width:16px; height:16px; }
.lang-menu{
  position:absolute; top: calc(100% + 8px); right:0; z-index:60;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 6px; min-width: 160px;
  opacity:0; transform: translateY(-6px) scale(.98); pointer-events:none;
  transition: opacity .2s ease, transform .2s ease;
}
.lang-menu.open{ opacity:1; transform:none; pointer-events:auto; }
.lang-option{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  padding: 9px 12px; border-radius: 8px; border:none; background:none; cursor:pointer;
  font-size: 13.5px; color: var(--ink-soft); text-align:left;
}
.lang-option:hover{ background: var(--surface-2); }
.lang-option.active{ color: var(--green-700); font-weight:700; }
[data-theme="dark"] .lang-option.active{ color: var(--gold-400); }

/* RTL adjustments when Arabic is the active UI language */
body.is-rtl{ direction: rtl; }
body.is-rtl .nav-links{ direction: rtl; }
body.is-rtl .hero-cta, body.is-rtl .location-row, body.is-rtl .adhkar-tabs,
body.is-rtl .dhikr-select, body.is-rtl .feedback-tabs{ direction: rtl; }
body.is-rtl .eyebrow::before, body.is-rtl .eyebrow::after{ content:""; }

/* ---------- Qibla Finder ---------- */
.qibla-wrap{ display:flex; flex-direction:column; align-items:center; gap:22px; }
.qibla-dial{
  width: 260px; height:260px; border-radius:50%; position:relative;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
  transition: transform .15s linear;
}
.qibla-dial::before{
  content:""; position:absolute; inset:14px; border-radius:50%;
  background:
    radial-gradient(circle, var(--surface) 60%, transparent 61%),
    conic-gradient(var(--surface-3) 0 2deg, transparent 2deg 88deg, var(--surface-3) 88deg 92deg, transparent 92deg 178deg, var(--surface-3) 178deg 182deg, transparent 182deg 268deg, var(--surface-3) 268deg 272deg, transparent 272deg 360deg);
}
.qibla-dial .dir-label{
  position:absolute; font-size:12px; font-weight:700; color: var(--ink-faint);
}
.qibla-dial .dir-n{ top:10px; left:50%; transform:translateX(-50%); color: var(--gold-600); }
.qibla-dial .dir-e{ right:10px; top:50%; transform:translateY(-50%); }
.qibla-dial .dir-s{ bottom:10px; left:50%; transform:translateX(-50%); }
.qibla-dial .dir-w{ left:10px; top:50%; transform:translateY(-50%); }
.qibla-needle{
  position:absolute; left:50%; top:50%; width: 6px; height: 42%;
  transform-origin: bottom center; transform: translate(-50%,-100%) rotate(0deg);
  transition: transform .2s ease-out;
}
.qibla-needle::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:0; height:0; border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-bottom: 22px solid var(--gold-500);
}
.qibla-needle::after{
  content:""; position:absolute; bottom:-8px; left:50%; transform:translateX(-50%);
  width: 14px; height:14px; border-radius:50%; background: var(--green-700); border: 3px solid var(--surface);
}
.qibla-kaaba-icon{
  position:absolute; top:-6px; left:50%; transform:translateX(-50%);
  width:22px; height:22px; display:grid; place-items:center; color: var(--green-900);
}
.qibla-degree{ font-family: var(--font-heading); font-size: 44px; font-weight:700; color: var(--green-900); }
[data-theme="dark"] .qibla-degree{ color: var(--gold-300); }
.qibla-status{ text-align:center; color: var(--ink-soft); font-size:14px; max-width:340px; }

/* ---------- Notifications modal ---------- */
.notif-modal{ text-align:left; }
.notif-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.notif-row label{ display:flex; align-items:center; gap:9px; font-size:14px; color: var(--ink); cursor:pointer; }
.notif-row input[type="checkbox"]{ width:18px; height:18px; accent-color: var(--green-600); cursor:pointer; }
.notif-row input[type="time"], .notif-row select{
  border:1px solid var(--border); border-radius: 8px; padding: 6px 10px; font-size:13px;
  background: var(--surface-2); color: var(--ink); font-family: inherit;
}

/* ---------- Qur'an Audio Player ---------- */
.surah-list{ display:flex; flex-direction:column; gap:10px; max-width:600px; margin: 0 auto; }
.surah-item{
  display:flex; align-items:center; gap:14px; width:100%;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; cursor:pointer; text-align:left; transition: all .2s ease;
}
.surah-item:hover{ border-color: var(--gold-500); transform: translateX(4px); }
.surah-item:active{ transform: translateX(4px) scale(.98); transition-duration: .1s; }
.surah-item.active{ background: linear-gradient(150deg, var(--green-700), var(--green-900)); border-color:transparent; color:#fff; }
.surah-item.active .surah-arabic{ color: var(--gold-300); }
.surah-number{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-size:12.5px; font-weight:700;
  background: var(--surface-2); color: var(--ink-soft);
}
.surah-item.active .surah-number{ background: rgba(255,255,255,0.15); color:#fff; }
.surah-names{ flex:1; display:flex; flex-direction:column; gap:2px; }
.surah-names strong{ font-size:14.5px; }
.surah-arabic{ direction:rtl; font-family: var(--font-arabic); font-size:15px; color: var(--ink-faint); }
.surah-item svg{ width:22px; height:22px; flex-shrink:0; color: var(--gold-600); }
.surah-item.active svg{ color: var(--gold-300); }

.audio-player{
  position: sticky; bottom: 20px; margin: 26px auto 0; max-width: 600px;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 18px 20px;
  opacity:0; transform: translateY(20px); pointer-events:none; transition: all .3s var(--ease);
}
.audio-player.visible{ opacity:1; transform:none; pointer-events:auto; }
.audio-player .now-playing{ font-family: var(--font-heading); font-size:16px; margin-bottom:10px; text-align:center; }
.audio-controls-row{ display:flex; align-items:center; gap:12px; }
.audio-play-btn{
  width:44px; height:44px; border-radius:50%; border:none; flex-shrink:0; cursor:pointer;
  background: linear-gradient(150deg, var(--green-600), var(--green-900)); color:#fff;
  display:grid; place-items:center;
}
.audio-play-btn svg{ width:19px; height:19px; }
.audio-seek{ flex:1; accent-color: var(--green-600); }
.audio-time{ font-size:12px; color: var(--ink-faint); min-width:34px; text-align:center; }

/* ---------- Bottom mobile navigation ---------- */
.bottom-nav{
  display:none;
  position: fixed; left:0; right:0; bottom:0; z-index: 150;
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -10px 26px -14px rgba(0,0,0,0.18);
}
.bottom-nav-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding: 9px 4px 10px;
  color: var(--ink-faint); font-size: 10.5px; font-weight:600; text-align:center;
  background:none; border:none; cursor:pointer; font-family:inherit;
  transition: color .2s ease, transform .1s ease;
}
.bottom-nav-item svg{ width:21px; height:21px; }
.bottom-nav-item.active{ color: var(--green-700); }
[data-theme="dark"] .bottom-nav-item.active{ color: var(--gold-400); }
.bottom-nav-item:active{ transform: scale(.9); }

/* ---------- Loading skeletons ---------- */
.skel{
  color: transparent !important;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  display: inline-block;
  min-width: 70%;
}
.skel-block{
  color: transparent !important;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  display: block;
  width: 100%;
  min-height: 2.8em;
}
@keyframes skeleton-shimmer{ 0%{ background-position: 200% 0; } 100%{ background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce){
  .skel, .skel-block{ animation: none; background: var(--surface-2); }
}

/* ---------- Responsive: dashboard & streaks ---------- */

@media (max-width: 980px){
  .dash-grid{ grid-template-columns: repeat(2,1fr); }
  .streak-grid{ grid-template-columns: repeat(2,1fr); }
  .creator-card{ flex-direction:column; text-align:center; }
  .section{ padding: 68px 0; }
  .grid-4{ grid-template-columns: repeat(2,1fr); }
  .grid-3{ grid-template-columns: repeat(2,1fr); }
  .prayer-grid{ grid-template-columns: repeat(3,1fr); }
  .split-2, .contact-grid, .footer-grid{ grid-template-columns: 1fr; }
  .star-ring{ width:440px; height:440px; }
}
@media (max-width: 720px){
  .dash-grid{ grid-template-columns: 1fr; }
  .streak-grid{ grid-template-columns: 1fr 1fr; }
  .nav-links{
    position: fixed; top: 68px; left:0; right:0; bottom:0;
    background: var(--surface); border-bottom: 1px solid var(--border);
    flex-direction:column; align-items:stretch; gap:2px; padding: 14px 20px 24px;
    transform-origin: top; transform: scaleY(0); opacity:0; pointer-events:none;
    transition: transform .28s var(--ease), opacity .28s var(--ease);
    max-height: calc(100vh - 68px); overflow-y:auto;
  }
  .nav-links.open{ transform: scaleY(1); opacity:1; pointer-events:auto; }
  .nav-links a{ padding: 15px 6px; width:100%; border-bottom: 1px solid var(--border); border-radius:0; }
  .nav-links a::after{ display:none; }
  .menu-btn{ display:flex; }
  .grid-2, .grid-4, .grid-3{ grid-template-columns: 1fr; }
  .prayer-grid{ grid-template-columns: repeat(2,1fr); }
  .tasbih-dial{ width: 210px; height:210px; }
  .tasbih-tap{ width:118px; height:118px; }
  .hero{ padding: 76px 0 56px; }
  .section-head{ margin-bottom: 34px; }
  .content-card, .card, .adhkar-item{ padding: 24px 20px; }
  .qibla-dial{ width: 220px; height:220px; }
  .qibla-degree{ font-size: 34px; }
  .bottom-nav{ display:flex; }
  body{ padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); }
  .install-banner{ bottom: calc(72px + env(safe-area-inset-bottom, 0)); }
  .audio-player{ bottom: calc(68px + env(safe-area-inset-bottom, 0)); }
  .audio-player{ left:16px; right:16px; margin-left:auto; margin-right:auto; padding: 14px 16px; }
  .lang-toggle span.lang-full{ display:none; }
}
@media (max-width: 420px){
  .streak-grid{ grid-template-columns: 1fr; }
  .prayer-grid{ grid-template-columns: repeat(2,1fr); }
  .hero-cta{ flex-direction:column; width:100%; }
  .hero-cta .btn{ justify-content:center; width:100%; }
  .hero-stat{ flex-direction:column; border-radius: 20px; padding: 18px 20px; width:100%; gap:10px; }
  .hero-stat-body{ align-items:center; text-align:center; }
  .hero-stat-countdown{ border-left:none; border-top:1px solid var(--border); padding-left:0; padding-top:10px; width:100%; text-align:center; }
}