/* styles/tokens.css */
/* ═══════════════════════════════════════════════════════════════
   Ummah Compass — Design Tokens v3
   Unified font system · Positional size scale
   ═══════════════════════════════════════════════════════════════

   FONT SYSTEM — two fonts, four roles:
   ┌─────────────────┬──────────────────────────────────────────┐
   │ --arabic        │ Amiri 400/700 — all Arabic script text,  │
   │                 │ duas, Quran, hadith                       │
   │ --display       │ Amiri 700     — hero titles, screen names │
   │                 │ Islamic calligraphic character for headers │
   │ --sans          │ Cormorant Garamond 400/500/700 — all      │
   │                 │ Latin UI: body, labels, hints, nav        │
   │ --mono          │ Cormorant Garamond 400 — toasts, pills,   │
   │                 │ timestamps, small utility text            │
   └─────────────────┴──────────────────────────────────────────┘

   SIZE SCALE — position-based, 8 levels:
   ┌──────────────┬────────────────┬──────────────────────────────┐
   │ display-1    │ 2.2rem max     │ App hero, screen masthead    │
   │ h1           │ 1.625rem max   │ Screen titles, card heroes   │
   │ h2           │ 1.3125rem max  │ Section headings, card heads │
   │ h3           │ 0.95rem max    │ Sub-section, group labels    │
   │ body         │ 1rem max       │ All paragraph / content text │
   │ label        │ 0.875rem max   │ Form labels, nav items, tabs │
   │ meta         │ 0.875rem max   │ Secondary info, timestamps   │
   │ micro        │ 0.75rem max    │ Badges, pills, fine print    │
   └──────────────┴────────────────┴──────────────────────────────┘
   ═══════════════════════════════════════════════════════════════ */

/* ── Self-hosted fonts ──────────────────────────────────────── */

/* Amiri — Arabic script + display headings
   Based on classical Naskh calligraphy (Al-Azhar / Bulaq Press).
   Used for ALL Arabic text AND all hero/display titles.         */
@font-face {
  font-family: 'Amiri';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/amiri-v30-arabic_latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Amiri';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/amiri-v30-arabic_latin-700.woff2') format('woff2');
}

/* Cormorant Garamond — Latin UI text
   Warm scholarly serif — pairs naturally with Amiri Naskh.
   Used for all Latin body copy, labels, hints and nav.          */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style:  normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style:  normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-500-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style:  normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style:  italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-600-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style:  italic;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-700-italic.woff2') format('woff2');
}

/* Removed: Cinzel (Roman-origin, not Islamic), Lora (generic),
   Scheherazade New (redundant alongside Amiri).                 */


/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════ */
:root {

  /* ── Palette ──────────────────────────────────────────────── */
  --navy-deep:      #080e1c;
  --navy-mid:       #0c1628;
  --navy-card:      #111e36;
  --navy-elevated:  #162240;
  --white-soft:     #eaf0ff;
  --white-soft-rgb: 234, 240, 255;
  --green-islamic:  #187560;
  --green-light:    #22a07f;
  --green-rgb:      24, 117, 96;
  --gold:           #c5964a;
  --gold-light:     #ddb870;
  --gold-rgb:       197, 150, 74;
  --blue-soft:      #7dd3fc;
  --blue-rgb:       125, 211, 252;
  --purple:         #a78bfa;
  --purple-rgb:     167, 139, 250;
  --rose:           #fb7185;
  --rose-rgb:       251, 113, 133;

  /* Parchment (Mushaf / Quran reader) */
  --parchment-light: #f8f2e2;
  --parchment-dark:  #efe4c8;
  --ink:             #1c2430;

  /* ── Semantic colour tokens ───────────────────────────────── */
  --bg:           var(--navy-deep);
  --card:         rgba(17, 30, 54, 0.72);
  --card-hover:   rgba(22, 34, 64, 0.82);
  --fg:           var(--white-soft);
  --muted:        rgba(234, 240, 255, 0.65);
  --border:       rgba(255, 255, 255, 0.07);
  --border-hover: rgba(255, 255, 255, 0.13);
  --input-bg:     rgba(255, 255, 255, 0.05);
  --input-hover:  rgba(255, 255, 255, 0.08);
  --primary:      var(--green-islamic);
  --accent:       var(--gold);
  --danger:       var(--rose);

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-xs: 0 1px 3px  rgba(0,0,0,0.20);
  --shadow-sm: 0 3px 10px rgba(0,0,0,0.28);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.42);
  --shadow-xl: 0 28px 60px rgba(0,0,0,0.52);
  --glow-green:  0 0 24px rgba(var(--green-rgb),  0.18);
  --glow-gold:   0 0 24px rgba(var(--gold-rgb),   0.18);
  --glow-blue:   0 0 24px rgba(var(--blue-rgb),   0.18);
  --glow-purple: 0 0 24px rgba(var(--purple-rgb), 0.18);

  /* ── Layout ───────────────────────────────────────────────── */
  --radius:      16px;
  --radius-lg:   22px;
  --radius-sm:   12px;
  --radius-xs:   8px;
  --radius-pill: 999px;
  --max:         1140px;

  /* ── Font families ────────────────────────────────────────── */
  /* Arabic script — duas, Quran, hadith, Arabic UI in RTL mode */
  --arabic:  'Amiri', 'Noto Naskh Arabic', serif;

  /* Display / hero titles — Amiri Bold for Islamic character   */
  --display: 'Amiri', Georgia, serif;

  /* Latin body + UI — warm scholarly pairing for Amiri         */
  --sans:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Utility / small text — same family, lighter feel           */
  --mono:    'Cormorant Garamond', Georgia, serif;

  /* Convenience aliases matching old names — no code changes   */
  --sans-default:    var(--sans);
  --display-default: var(--display);
  --mono-default:    var(--mono);
  --arabic-default:  var(--arabic);

  /* ── Positional type scale ────────────────────────────────── */
  /*
     Every level is a fluid clamp(min, preferred, max).
     min  = smallest viewport (~320px)
     max  = desktop / large screen
     All values scale with --type-scale-factor (user preference).

     LEVEL          FONT            WEIGHT   WHERE USED
     display-1      Amiri           700      App hero, masthead bismillah
     h1             Amiri           700      Screen titles (Prayer, Quran…)
     h2             Amiri / sans    700      Card headings, section titles
     h3             sans            600/700  Sub-sections, group headers
     body           sans            400      Paragraphs, descriptions
     label          sans            500      Form labels, nav text, tabs
     meta           sans            400      Secondary info, dates, hints
     micro          sans            400      Badges, pills, footnotes
  */

  /* display-1 — app hero, masthead, bismillah hero */
  --fs-display-1-base: clamp(2rem,   1.4rem + 1.8vw, 2.75rem);
  --fs-display-1: calc(var(--fs-display-1-base) * var(--type-scale-factor));

  /* h1 — screen titles */
  --fs-h1-base:        clamp(1.5rem,  1.15rem + 0.9vw, 1.875rem);
  --fs-h1:        calc(var(--fs-h1-base) * var(--type-scale-factor));

  /* h2 — card headings, section titles */
  --fs-h2-base:        clamp(1.2rem,  1.0rem  + 0.55vw, 1.4375rem);
  --fs-h2:        calc(var(--fs-h2-base) * var(--type-scale-factor));

  /* h3 — sub-sections, group labels */
  --fs-h3-base:        clamp(1.0rem,  0.9rem  + 0.25vw, 1.125rem);
  --fs-h3:        calc(var(--fs-h3-base) * var(--type-scale-factor));

  /* body — all paragraph / content text */
  --fs-body-base:      clamp(0.9375rem, 0.9rem + 0.12vw, 1.0625rem);
  --fs-body:      calc(var(--fs-body-base) * var(--type-scale-factor));

  /* label — form labels, nav items, tab bar text */
  --fs-label-base:     clamp(0.8125rem, 0.79rem + 0.08vw, 0.9375rem);
  --fs-label:     calc(var(--fs-label-base) * var(--type-scale-factor));

  /* meta — secondary info, timestamps, hints */
  --fs-meta-base:      clamp(0.75rem,  0.73rem + 0.06vw, 0.875rem);
  --fs-meta:      calc(var(--fs-meta-base) * var(--type-scale-factor));

  /* micro — badges, pills, footnotes, fine print */
  --fs-micro-base:     clamp(0.625rem, 0.61rem + 0.04vw, 0.75rem);
  --fs-micro:     calc(var(--fs-micro-base) * var(--type-scale-factor));

  /* ── Arabic-specific size boosts ─────────────────────────── */
  /*
     Amiri renders slightly smaller than Latin fonts at the same
     px value. These multipliers compensate so Arabic text feels
     visually equal to its Latin counterpart at each level.
  */
  --fs-arabic-display: calc(var(--fs-display-1) * 1.15);
  --fs-arabic-h1:      calc(var(--fs-h1)        * 1.12);
  --fs-arabic-h2:      calc(var(--fs-h2)        * 1.1);
  --fs-arabic-body:    calc(var(--fs-body)       * 1.08);

  /* ── Line heights ─────────────────────────────────────────── */
  --lh-display: 1.2;   /* tight — display headlines */
  --lh-title:   1.3;   /* h1/h2 */
  --lh-copy:    1.65;  /* body paragraphs */
  --lh-ui:      1.4;   /* labels, nav, compact UI */
  --lh-arabic:  2.0;   /* Arabic always needs extra leading */

  /* ── Letter spacing ───────────────────────────────────────── */
  --tracking-display: 0.01em;  /* subtle — Amiri is already spaced */
  --tracking-title:   0.02em;
  --tracking-ui:      0.03em;
  --tracking-label:   0.04em;  /* labels benefit from slight open */
  --tracking-arabic:  0;       /* never track Arabic — breaks joins */

  /* ── Motion ───────────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:    140ms;
  --dur-normal:  240ms;
  --dur-slow:    380ms;

  /* ── Safe area (iOS notch / Android gesture bar) ──────────── */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);

  /* ── Mushaf frame ─────────────────────────────────────────── */
  --frame-1: rgba(var(--green-rgb), 0.5);
  --frame-2: rgba(var(--gold-rgb),  0.42);
  --frame-3: rgba(0,0,0,0.10);
  --paper-1: var(--parchment-light);
  --paper-2: var(--parchment-dark);

  /* ── User preference foundation ──────────────────────────── */
  --type-scale-factor: 1;   /* overridden by preferences.css data-text-scale */
  /*
     compact  → 0.90  (dense UI, power users)
     normal   → 1.00  (default)
     large    → 1.08  (slightly larger — set in preferences.css)
     xlarge   → 1.16  (accessibility — set in preferences.css)
  */
  --text-density:      1;
  --user-font-body:    var(--sans);
  --user-font-display: var(--display);
}


/* ── Positional utility classes ─────────────────────────────── */
/*
   Drop these classes on any element to get the right
   font + size + weight + line-height for its position.
   All classes respect --type-scale-factor automatically.
*/

.text-display {
  font-family: var(--display);
  font-size:   var(--fs-display-1);
  font-weight: 700;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}

.text-h1 {
  font-family: var(--display);
  font-size:   var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
}

.text-h2 {
  font-family: var(--sans);
  font-size:   var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-title);
  letter-spacing: var(--tracking-title);
}

.text-h3 {
  font-family: var(--sans);
  font-size:   var(--fs-h3);
  font-weight: 600;
  line-height: var(--lh-ui);
  letter-spacing: var(--tracking-ui);
}

.text-body {
  font-family: var(--sans);
  font-size:   var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-copy);
}

.text-label {
  font-family: var(--sans);
  font-size:   var(--fs-label);
  font-weight: 500;
  line-height: var(--lh-ui);
  letter-spacing: var(--tracking-label);
}

.text-meta {
  font-family: var(--sans);
  font-size:   var(--fs-meta);
  font-weight: 400;
  line-height: var(--lh-ui);
  color:       var(--muted);
}

.text-micro {
  font-family: var(--mono);
  font-size:   var(--fs-micro);
  font-weight: 400;
  line-height: var(--lh-ui);
  color:       var(--muted);
}

/* Arabic positional variants — same hierarchy, Amiri + boosts  */
.text-arabic-display {
  font-family: var(--arabic);
  font-size:   var(--fs-arabic-display);
  font-weight: 700;
  line-height: var(--lh-arabic);
  letter-spacing: var(--tracking-arabic);
  direction:   rtl;
}

.text-arabic-h1 {
  font-family: var(--arabic);
  font-size:   var(--fs-arabic-h1);
  font-weight: 700;
  line-height: var(--lh-arabic);
  letter-spacing: var(--tracking-arabic);
  direction:   rtl;
}

.text-arabic-h2 {
  font-family: var(--arabic);
  font-size:   var(--fs-arabic-h2);
  font-weight: 700;
  line-height: var(--lh-arabic);
  letter-spacing: var(--tracking-arabic);
  direction:   rtl;
}

.text-arabic-body {
  font-family: var(--arabic);
  font-size:   var(--fs-arabic-body);
  font-weight: 400;
  line-height: var(--lh-arabic);
  letter-spacing: var(--tracking-arabic);
  direction:   rtl;
}


/* ── Light mode override (Quran reader) ─────────────────────── */
.light {
  --bg:       #f5f0e8;
  --card:     rgba(255,255,255,0.9);
  --fg:       #1a1a2e;
  --muted:    #6b7280;
  --border:   rgba(0,0,0,0.1);
  --input-bg: rgba(0,0,0,0.04);
  --primary:  var(--green-islamic);
}

/* styles/components.css */
/* ═══════════════════════════════════════════════════════════════
   Ummah Compass — components.css
   Single source of truth for every reusable UI component.

   RULES FOR EDITING THIS FILE:
   ─────────────────────────────────────────────────────────────
   • Zero !important except the three legitimate uses marked ★
   • Use specificity instead of override force
   • All values must reference tokens from tokens.css
   • No screen-specific layout rules — those live in screens.css
   • Sections are alphabetical within each group

   LOAD ORDER in index.html:
     1. tokens.css   ← variables only
     2. base.css     ← reset, body, scrollbars, focus ring
     3. components.css  ← YOU ARE HERE
     4. screens.css  ← screen-specific layout
     5. bidi.css     ← RTL overrides (its !important are legitimate)
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   FONT SIZE MIGRATION — v3 token system (completed)
   ─────────────────────────────────────────────────────────────
   All font-size declarations now use tokens from tokens.css.

   SCALE MAPPING USED:
     --fs-micro   10–12px  badges, pills, metadata, tiny labels
     --fs-meta    12–14px  secondary info, timestamps, hints
     --fs-label   13–15px  form labels, nav items, buttons (wt 500)
     --fs-body    15–17px  all paragraph / content text
     --fs-h3      16–18px  sub-sections, card names, group headers
     --fs-h2      19–23px  card headings, section titles
     --fs-h1      24–30px  screen titles
     --fs-arabic-body     Arabic body text  (×1.08 of --fs-body)
     --fs-arabic-h2       Arabic sub-heads  (×1.10 of --fs-h2)
     --fs-arabic-h1       Arabic headings   (×1.12 of --fs-h1)
     --fs-arabic-display  Arabic display    (×1.15 of --fs-display-1)

   INTENTIONALLY KEPT AS HARDCODED px (icon / emoji sizes):
     21px  .brand-mark svg icon
     22px  .tracker-prayer-btn .prayer-icon  (emoji)
     20px  .adhan-perm-icon                  (emoji)
     17px  .ayah-pill-icon                   (emoji)
     16px  .ptr-arrow                        (arrow glyph)
     1.1rem .city-delete-btn                 (emoji)
     3.2rem .no-city-icon                    (decorative emoji)
   These should NOT scale with --type-scale-factor.

   iOS INPUT ZOOM GUARD — kept intentionally:
     max(16px, var(--fs-body))  on <select>, <input>, <textarea>
     iOS zooms in when font-size < 16px on focused inputs.
   ───────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════
   1. UTILITY
   ═══════════════════════════════════════════════════════════════ */

/* ★ Legitimate !important: utility class must always win regardless of context */
.hidden { display: none !important; }

/* Visually hidden but announced by screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Suppress scrollbar chrome without losing scroll behaviour */
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Momentum scrolling for long lists / Quran reader */
.scroll-momentum {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prevent layout trashing by disabling text selection on interactive tiles */
.no-select { -webkit-user-select: none; user-select: none; }


/* ═══════════════════════════════════════════════════════════════
   2. TYPOGRAPHY UTILITIES
   These classes set the full typographic recipe for each level.
   Do not mix them with raw font-size overrides.
   ═══════════════════════════════════════════════════════════════ */

.h1 {
  margin: 0;
  font-family: var(--display);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: var(--tracking-title);
  line-height: var(--lh-title);
}

.h2 {
  margin: 0;
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: var(--tracking-title);
  line-height: 1.35;
}

.h3 {
  margin: 0 0 10px;
  font-family: var(--sans);
  font-style: italic;
  font-size: var(--fs-meta);
  color: rgba(var(--gold-rgb), 0.72);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.35;
}

.meta {
  color: var(--muted);
  font-size: var(--fs-meta);
  font-family: var(--mono);
  line-height: 1.45;
}

.label {
  color: var(--muted);
  font-size: var(--fs-label);
  font-weight: 500;
  font-family: var(--mono);
  letter-spacing: var(--tracking-ui);
  line-height: 1.35;
}

.value {
  font-family: var(--mono);
  font-size: var(--fs-body);
  font-weight: 600;
  line-height: 1.25;
}

.hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: var(--fs-label);
  line-height: 1.5;
}

/* Arabic script — always Amiri, always RTL, always generous leading */
.arabic {
  font-family: var(--arabic);
  font-size: var(--fs-arabic-h2);
  line-height: 2;
  direction: rtl;
  text-align: right;
  letter-spacing: 0;
}


/* ═══════════════════════════════════════════════════════════════
   3. CARD
   ═══════════════════════════════════════════════════════════════ */

.card {
  background: linear-gradient(160deg,
    rgba(17,30,58,0.88) 0%,
    rgba(14,24,50,0.93) 50%,
    rgba(10,20,42,0.96) 100%);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg),
    inset 0 1px 0 rgba(255,255,255,0.05),
    inset 0 -1px 0 rgba(0,0,0,0.15);
  padding: 22px;
  position: relative;
  overflow: hidden;
  transition:
    box-shadow   var(--dur-normal) ease,
    border-color var(--dur-normal) ease,
    transform    var(--dur-normal) var(--ease-out);
}

/* Warm top-edge sheen */
.card::before {
  content: "";
  position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(var(--gold-rgb), 0.14) 40%,
    rgba(var(--gold-rgb), 0.18) 50%,
    rgba(var(--gold-rgb), 0.14) 60%,
    transparent);
  pointer-events: none;
}

.card:hover {
  border-color: rgba(var(--gold-rgb), 0.12);
  box-shadow: var(--shadow-xl),
    inset 0 1px 0 rgba(255,255,255,0.07),
    var(--glow-gold);
  transform: translateY(-2px);
}

/* ─── Native <select> popup — force dark theme ───
   color-scheme: dark isn't enough on Chrome/Brave Windows for the
   popup background. Explicit colors on <select> and <option> are. */
select {
  color-scheme: dark;
  background-color: #0b1528;
  color: #e5e9f0;
}
select option {
  background-color: #0b1528;
  color: #e5e9f0;
}
select option:checked,
select option:hover {
  background-color: #1a2947;
  color: #f6f1df;
}

@media (prefers-reduced-motion: reduce) {
  .card:hover { transform: none; }
}

/* Subtle variant — lower elevation, no hover lift */
.card.subtle {
  background: rgba(14,24,48,0.45);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.card.subtle::before { display: none; }
.card.subtle:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border-hover);
  transform: none;
}

/* Card header row — title + trailing action */
.card-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
}

/* Divider between card sections */
.divider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
  height: 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpolygon points='6,0.5 11.5,6 6,11.5 0.5,6' fill='none' stroke='%23b8830a' stroke-width='0.9' stroke-opacity='0.52'/%3E%3Cpolygon points='6,3 9,6 6,9 3,6' fill='%23b8830a' fill-opacity='0.16'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 11px 11px;
}
.divider::before,
.divider::after {
  content: ""; flex: 1; height: 1px;
}
.divider::before {
  background: linear-gradient(to right, transparent, rgba(var(--gold-rgb), 0.20));
}
.divider::after {
  background: linear-gradient(to left, transparent, rgba(var(--gold-rgb), 0.20));
}

/* Status line — inline feedback text */
.status {
  flex: 1;
  min-height: 20px;
  color: var(--muted);
  font-size: var(--fs-meta);
  font-family: var(--mono);
}


/* ═══════════════════════════════════════════════════════════════
   4. BUTTONS
   ═══════════════════════════════════════════════════════════════ */

.btn {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 16px;
  color: var(--fg);
  background: rgba(255,255,255,0.06);
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
  /* 44px touch target (iOS HIG) */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background     var(--dur-fast) var(--ease-out),
    border-color   var(--dur-fast) var(--ease-out),
    box-shadow     var(--dur-fast) var(--ease-out),
    transform      var(--dur-fast) var(--ease-out);
}
.btn:hover   { background: rgba(255,255,255,0.10); border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
.btn:active  { transform: scale(0.95); transition-duration: 80ms; }

.btn-primary {
  background: linear-gradient(135deg,
    rgba(var(--green-rgb), 0.30),
    rgba(var(--teal-heritage-rgb), 0.22));
  border-color: rgba(var(--green-rgb), 0.32);
  color: var(--white-soft);
}
.btn-primary:hover {
  background: linear-gradient(135deg,
    rgba(var(--green-rgb), 0.42),
    rgba(var(--teal-heritage-rgb), 0.30));
  border-color: rgba(var(--green-rgb), 0.48);
  box-shadow: var(--shadow-sm), var(--glow-green);
}

.btn-secondary {
  background: rgba(255,255,255,0.05);
}
.btn-secondary:hover {
  background: rgba(255,255,255,0.09);
}

.btn-sm-text {
  font-size: var(--fs-meta);
  padding: 6px 12px;
  min-height: 36px;
}

.btn-danger-sm {
  color: var(--danger);
  border-color: rgba(var(--rose-rgb), 0.20);
}
.btn-danger-sm:hover {
  background: rgba(var(--rose-rgb), 0.08);
  border-color: rgba(var(--rose-rgb), 0.35);
}

.btn-danger-soft {
  color: var(--danger);
  border-color: rgba(var(--rose-rgb), 0.30);
}

/* Donate button — lives in app header */
.btn-donate {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  min-height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--gold-rgb), 0.38);
  background: linear-gradient(135deg,
    rgba(var(--gold-rgb), 0.18),
    rgba(var(--green-rgb), 0.12));
  color: rgba(var(--gold-rgb), 0.95);
  font-family: var(--sans);
  font-style: italic;
  font-size: var(--fs-meta);
  font-weight: 400;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.btn-donate:hover {
  background: linear-gradient(135deg,
    rgba(var(--gold-rgb), 0.26),
    rgba(var(--green-rgb), 0.18));
  border-color: rgba(var(--gold-rgb), 0.55);
  box-shadow: var(--glow-gold);
}
.btn-donate:active { transform: scale(0.97); }
.btn-donate svg { color: rgba(var(--gold-rgb), 0.85); }

/* Tab buttons — pill style for top nav */
.btn-tab {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: 0.01em;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease-out);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.btn-tab:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(var(--gold-rgb), 0.18);
}

/* Active tab state — gold accent, gold underline from .tab-indicator */
.btn-tab.btn-tab-active {
  background: rgba(var(--gold-rgb), 0.08);
  border-color: rgba(var(--gold-rgb), 0.18);
  color: var(--white-soft);
  box-shadow: none;
}

/* Tab SVG icons */
.btn-tab svg.tab-icon {
  flex-shrink: 0;
  width: 13px; height: 13px;
  color: inherit;
  opacity: 0.82;
  transition: opacity var(--dur-fast);
}
.btn-tab:hover svg.tab-icon,
.btn-tab.btn-tab-active svg.tab-icon { opacity: 1; }
.btn-tab.btn-tab-active svg.tab-icon {
  filter: drop-shadow(0 0 3px rgba(var(--gold-rgb), 0.45));
}

/* Prayer screen sub-tabs */
.prayer-sub-tab {
  flex: 1;
  padding: 9px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  color: rgba(255,255,255,0.6);
  font-size: var(--fs-label);
  font-weight: 500;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap;
  text-align: center;
}
.prayer-sub-tab:hover {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
}
.prayer-sub-tab.active {
  background: rgba(var(--gold-rgb), 0.10);
  border-color: rgba(var(--gold-rgb), 0.30);
  color: rgba(var(--gold-rgb), 0.95);
  font-weight: 600;
}


/* ═══════════════════════════════════════════════════════════════
   5. FORMS — inputs, selects, toggles
   ═══════════════════════════════════════════════════════════════ */

.grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
@media (min-width: 880px) { .grid { grid-template-columns: 1fr 1fr; } }

.field label {
  display: block;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

select,
input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"] {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--fg);
  outline: none;
  font-family: var(--sans);
  /* 16px floor prevents iOS auto-zoom on focus */
  font-size: max(16px, var(--fs-body));
  font-weight: 400;
  line-height: 1.5;
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast), background var(--dur-fast);
}
select:hover,
input:hover     { border-color: rgba(var(--gold-rgb), 0.22); background: var(--input-hover); }
select:focus,
input:focus     { border-color: rgba(var(--gold-rgb), 0.45); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.10); background: var(--input-hover); }
input::placeholder { color: rgba(234,240,255,0.28); }

/* iOS select arrow */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(234,240,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}
html[dir="rtl"] select {
  background-position: left 12px center;
  padding-right: 14px;
  padding-left: 36px;
}

textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: max(16px, var(--fs-body));
  line-height: 1.7;
  resize: vertical;
  outline: none;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
textarea:hover { border-color: rgba(var(--gold-rgb), 0.22); }
textarea:focus { border-color: rgba(var(--gold-rgb), 0.45); box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.10); }

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row input { flex: 1; min-width: 140px; }
.row-actions { margin-top: 16px; justify-content: space-between; gap: 14px; }

/* Language selector */
#langSelect {
  padding: 6px 32px 6px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  min-width: 44px;
}


/* ═══════════════════════════════════════════════════════════════
   6. HEADER & NAVIGATION
   ═══════════════════════════════════════════════════════════════ */

.app-header {
  position: sticky;
  top: 0;
  padding: calc(12px + var(--safe-top)) calc(20px + var(--safe-right)) 12px calc(20px + var(--safe-left));
  background: rgba(7, 16, 15, 0.88);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 200;
  flex-wrap: wrap;
  box-shadow: 0 2px 24px rgba(0,0,0,0.40), 0 1px 0 rgba(var(--gold-rgb), 0.06);
}

.brand { display: flex; gap: 10px; align-items: flex-start; }
.brand-text { display: flex; flex-direction: column; gap: 2px; }

.brand-mark {
  width: 44px; height: 44px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(var(--green-rgb),0.22), rgba(var(--gold-rgb),0.16));
  border: 1px solid rgba(var(--gold-rgb),0.22);
  font-size: 21px;
  box-shadow: var(--shadow-sm), var(--glow-gold);
  flex-shrink: 0;
  transition: transform var(--dur-normal) var(--ease-spring);
}
.brand-mark:hover { transform: scale(1.07) rotate(-4deg); }

.brand-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, var(--white-soft) 20%, rgba(var(--gold-rgb),0.85) 80%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-tagline {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-meta);
  text-transform: none;
  letter-spacing: 0.015em;
  color: rgba(var(--gold-rgb), 0.70);
  line-height: 1.4;
  margin-top: 1px;
}

.brand-privacy-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 4px;
  gap: 0;
}

.brand-pill {
  display: inline-block;
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-micro);
  color: rgba(var(--gold-rgb), 0.68);
  letter-spacing: 0.01em;
  border: 1px solid rgba(var(--gold-rgb), 0.20);
  background: rgba(var(--gold-rgb), 0.05);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
  white-space: nowrap;
}
.brand-pill--sep,
.brand-pill-divider { display: none; }

.brand-rotating { margin-top: 5px; height: 20px; overflow: hidden; }
.brand-rotating-text {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 400;
  color: rgba(var(--gold-rgb), 0.90);
  font-style: italic;
  opacity: 1;
  transition: opacity 500ms ease;
}
.brand-rotating-text.fade-out { opacity: 0; }

.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Hijri date pill in header */
.header-hijri {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: rgba(var(--gold-rgb), 0.75);
  letter-spacing: 0.04em;
  white-space: nowrap;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--gold-rgb), 0.15);
  background: rgba(var(--gold-rgb), 0.05);
  transition: all var(--dur-fast);
}
.header-hijri:hover {
  border-color: rgba(var(--gold-rgb), 0.28);
  background: rgba(var(--gold-rgb), 0.09);
  color: var(--gold);
}
@media (max-width: 480px) { .header-hijri { display: none; } }

/* Top navigation */
.top-nav {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-wrap: wrap;
  position: relative;
}

/* Sliding gold underline indicator — position set by JS */
.tab-indicator {
  position: absolute;
  bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg,
    rgba(var(--gold-rgb), 0.4),
    var(--gold),
    rgba(var(--gold-rgb), 0.4));
  border-radius: var(--radius-pill);
  pointer-events: none;
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.5);
  transition: left 0.28s var(--ease-out), width 0.28s var(--ease-out);
}

/* Grouped tab dropdowns */
.tab-group { position: relative; display: inline-flex; }
.tab-chevron { margin-inline-start: 4px; flex-shrink: 0; transition: transform 0.2s ease; opacity: 0.7; }
.btn-tab-group { display: inline-flex; align-items: center; }
.btn-tab-group[aria-expanded="true"] .tab-chevron { transform: rotate(180deg); }

.tab-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  width: max-content;
  min-width: 0;
  background: rgba(7, 16, 15, 0.97);
  border: 1px solid rgba(var(--gold-rgb), 0.14);
  border-top: 2px solid rgba(var(--gold-rgb), 0.30);
  border-radius: 0 0 10px 10px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 300;
  overflow: hidden;
  padding: 4px 0;
  animation: dropdownIn 0.15s ease;
}
.tab-dropdown.open { display: block; }
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tab-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 16px;
  background: none;
  border: none;
  color: rgba(234,240,255,0.82);
  font-family: var(--sans);
  font-size: var(--fs-meta);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-align: start;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast);
  white-space: nowrap;
  box-sizing: border-box;
}
html[dir="rtl"] .tab-dropdown-item { text-align: right; }
.tab-dropdown-item:hover {
  background: rgba(var(--gold-rgb), 0.06);
  color: rgba(var(--gold-rgb), 0.95);
}
.tab-dropdown-item.active {
  color: rgba(var(--gold-rgb), 1);
  background: rgba(var(--gold-rgb), 0.08);
  font-weight: 500;
}

/* Settings gear button */
.settings-gear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--gold-rgb), 0.20);
  background: rgba(var(--gold-rgb), 0.05);
  color: rgba(var(--gold-rgb), 0.70);
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform 0.25s;
}
.settings-gear-btn:hover {
  background: rgba(var(--gold-rgb), 0.12);
  border-color: rgba(var(--gold-rgb), 0.38);
  color: rgba(var(--gold-rgb), 0.95);
  transform: rotate(45deg);
}

/* Mobile top-nav — horizontal scroll strip */
@media (max-width: 767px) {
  .top-nav {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    gap: 4px;
  }
  .top-nav.dropdown-open { overflow: visible; }
  .top-nav::-webkit-scrollbar { display: none; }
  .top-nav { -ms-overflow-style: none; scrollbar-width: none; }
  .btn-tab { flex-shrink: 0; scroll-snap-align: start; font-size: var(--fs-meta); padding: 8px 11px; min-height: 40px; }
  .app-header { flex-direction: column; align-items: flex-start; gap: 8px; padding-bottom: 8px; }
  .app-header > .brand { width: 100%; }
  #langSelect { margin-left: auto; }
}


/* ═══════════════════════════════════════════════════════════════
   7. BOTTOM NAVIGATION BAR (mobile)
   ═══════════════════════════════════════════════════════════════ */

.bottom-nav { display: none; }

@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding-bottom: calc(8px + var(--safe-bottom));
    padding-top: 8px;
    padding-left: calc(4px + var(--safe-left));
    padding-right: calc(4px + var(--safe-right));
    background: rgba(7, 16, 15, 0.88);
    backdrop-filter: blur(22px) saturate(1.6);
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    border-top: 1px solid rgba(var(--gold-rgb), 0.14);
    box-shadow: 0 -4px 24px rgba(0,0,0,0.38), 0 -1px 0 rgba(var(--gold-rgb), 0.08);
    z-index: 190;
    gap: 2px;
  }

  .container { padding-bottom: calc(80px + var(--safe-bottom)); }
  .ayah-pill  { bottom: calc(76px + var(--safe-bottom)); }
  .app-footer { display: none; }
}

.bottom-nav-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 6px 4px;
  background: none; border: none;
  border-radius: var(--radius-sm);
  color: rgba(var(--white-soft-rgb), 0.48);
  cursor: pointer;
  min-height: 44px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.bottom-nav-item:hover { color: rgba(var(--white-soft-rgb), 0.72); background: rgba(255,255,255,0.04); }
.bottom-nav-item.active { color: rgba(var(--gold-rgb), 1); }
.bottom-nav-item.active::after {
  content: "";
  position: absolute; bottom: -8px; left: 20%; right: 20%;
  height: 2px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg,
    transparent, rgba(var(--gold-rgb), 0.8) 40%, rgba(var(--gold-rgb), 0.8) 60%, transparent);
}
.bottom-nav-item.active svg { filter: drop-shadow(0 0 4px rgba(var(--gold-rgb), 0.5)); }
.bottom-nav-item svg { width: 20px; height: 20px; flex-shrink: 0; transition: filter var(--dur-fast); }
.bottom-nav-label { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.02em; line-height: 1; }


/* ═══════════════════════════════════════════════════════════════
   8. TOOLS BOTTOM SHEET
   ═══════════════════════════════════════════════════════════════ */

#tools-sheet-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 195;
  opacity: 0;
  transition: opacity 0.28s var(--ease-out);
}
#tools-sheet-backdrop.tools-sheet-open { display: block; opacity: 1; }

#tools-sheet {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 196;
  background: rgba(7, 16, 15, 0.97);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  border-top: 1px solid rgba(var(--gold-rgb), 0.18);
  border-radius: 20px 20px 0 0;
  padding-bottom: calc(88px + var(--safe-bottom));
  box-shadow: 0 -8px 40px rgba(0,0,0,0.50), 0 -1px 0 rgba(var(--gold-rgb), 0.10);
  transform: translateY(100%);
  transition: transform 0.32s var(--ease-out);
  outline: none;
  max-height: 82vh;
  overflow-y: auto;
}
#tools-sheet.tools-sheet-open { transform: translateY(0); }

.tools-sheet-handle {
  width: 36px; height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(var(--gold-rgb), 0.22);
  margin: 12px auto 0;
  flex-shrink: 0;
}
.tools-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px 8px;
}
.tools-sheet-title {
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--white-soft);
}
.tools-sheet-close {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 50%;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.tools-sheet-close:hover {
  background: rgba(var(--gold-rgb), 0.10);
  color: rgba(var(--gold-rgb), 0.85);
  border-color: rgba(var(--gold-rgb), 0.22);
}
.tools-sheet-section-label {
  font-family: var(--sans); font-style: italic;
  font-size: var(--fs-micro);
  color: rgba(var(--gold-rgb), 0.50);
  letter-spacing: 0.04em;
  padding: 6px 20px 4px;
}
.tools-sheet-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 6px; padding: 4px 14px 10px;
}
.tools-sheet-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 7px; padding: 14px 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(var(--gold-rgb), 0.08);
  border-radius: var(--radius);
  color: rgba(var(--white-soft-rgb), 0.72);
  cursor: pointer; min-height: 72px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast) var(--ease-spring);
}
.tools-sheet-item:hover { background: rgba(var(--gold-rgb), 0.07); border-color: rgba(var(--gold-rgb), 0.22); color: rgba(var(--gold-rgb), 0.95); }
.tools-sheet-item:active { transform: scale(0.93); }
.tools-sheet-item svg { width: 24px; height: 24px; flex-shrink: 0; color: inherit; }
.tools-sheet-item:hover svg { filter: drop-shadow(0 0 4px rgba(var(--gold-rgb), 0.40)); }
.tools-sheet-label { font-family: var(--sans); font-size: var(--fs-micro); font-weight: 500; text-align: center; line-height: 1.3; color: inherit; }

.tools-sheet-more-list {
  display: flex; flex-direction: column;
  margin: 0 14px 8px;
  border: 1px solid rgba(var(--gold-rgb), 0.10);
  border-radius: var(--radius);
  overflow: hidden;
}
.tools-sheet-more-item {
  display: flex; align-items: center; gap: 14px;
  padding: 15px 16px;
  background: rgba(255,255,255,0.02);
  border: none; border-bottom: 1px solid rgba(var(--gold-rgb), 0.07);
  color: rgba(var(--white-soft-rgb), 0.80);
  cursor: pointer; text-align: left;
  transition: background var(--dur-fast), color var(--dur-fast);
  -webkit-tap-highlight-color: transparent;
}
.tools-sheet-more-item:last-child { border-bottom: none; }
.tools-sheet-more-item:hover { background: rgba(var(--gold-rgb), 0.06); color: rgba(var(--gold-rgb), 0.95); }
.tools-sheet-more-item svg { width: 20px; height: 20px; flex-shrink: 0; color: rgba(var(--gold-rgb), 0.55); }
.tools-sheet-more-label { flex: 1; font-family: var(--sans); font-size: var(--fs-label); font-weight: 400; color: inherit; letter-spacing: 0.01em; }
.tools-sheet-more-chev { color: rgba(var(--gold-rgb), 0.30); display: flex; align-items: center; }

@media (min-width: 769px) {
  #tools-sheet, #tools-sheet-backdrop { display: none; }
}


/* ═══════════════════════════════════════════════════════════════
   8b. PRAYER SCREEN — city label + live clock date
   Both sit in a flex-end card-head so they baseline-align
   automatically. Matching font-size and line-height keeps the
   vertical rhythm consistent across both columns.
   ═══════════════════════════════════════════════════════════════ */

#metaLine {
  font-size: var(--fs-h3);
  font-family: var(--sans);
  font-weight: 600;
  color: var(--fg);
  letter-spacing: var(--tracking-ui);
  line-height: 1.35;
}

.prayer-live-clock-date {
  font-size: var(--fs-h3);
  font-family: var(--mono);
  font-weight: 500;
  color: var(--gold);
  line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════════
   9. PRAYER TIME CARD
   ═══════════════════════════════════════════════════════════════ */

.times-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 600px) { .times-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .times-grid { grid-template-columns: repeat(3, 1fr); } }

.time-card {
  border: 1px solid rgba(var(--gold-rgb), 0.09);
  border-radius: var(--radius);
  padding: 15px 16px;
  background: rgba(255,255,255,0.03);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  position: relative; overflow: hidden;
  min-height: 56px;
  transition: all var(--dur-normal) ease;
  -webkit-user-select: none; user-select: none;
}
/* Green-to-gold left accent, visible on hover and on "next" state */
.time-card::before {
  content: "";
  position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, rgba(var(--green-rgb),0.7), rgba(var(--gold-rgb),0.5));
  border-radius: 0 2px 2px 0;
  opacity: 0;
  transition: opacity var(--dur-normal) ease;
}
.time-card:hover {
  background: rgba(255,255,255,0.055);
  border-color: rgba(var(--gold-rgb), 0.18);
  box-shadow: var(--shadow-sm);
}
.time-card:hover::before { opacity: 1; }

/* Active / next prayer */
.time-card.next {
  border-color: rgba(var(--gold-rgb), 0.30);
  background: rgba(var(--gold-rgb), 0.06);
  box-shadow: var(--shadow-sm), var(--glow-gold);
}
.time-card.next::before {
  background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.8), rgba(var(--green-rgb), 0.5));
  opacity: 1;
}

.time-name {
  font-family: var(--sans);
  font-style: italic;
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(var(--gold-rgb), 0.65);
  text-transform: none;
  line-height: 1.3;
}
.time-value {
  font-family: var(--mono);
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

/* Next prayer info row */
.next-prayer {
  display: flex; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-top: 4px;
}

/* Animated pulse dot before the next prayer name */
.next-prayer-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-islamic);
  box-shadow: 0 0 0 0 rgba(var(--green-rgb), 0.55);
  animation: prayerPulse 2s ease-in-out infinite;
  margin-right: 7px;
  vertical-align: middle;
  flex-shrink: 0;
}
@keyframes prayerPulse {
  0%   { box-shadow: 0 0 0 0   rgba(var(--green-rgb), 0.6); }
  50%  { box-shadow: 0 0 0 8px rgba(var(--green-rgb), 0); }
  100% { box-shadow: 0 0 0 0   rgba(var(--green-rgb), 0.6); }
}

#nextPrayerValue { display: flex; align-items: center; }

/* Countdown turns gold and blinks when < 30 min */
.countdown-urgent { color: var(--gold); animation: countdownBlink 1.5s ease-in-out infinite; }
@keyframes countdownBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.65; } }

/* Prayer time progress bar */
.prayer-progress-wrap { margin-top: 16px; margin-bottom: 4px; }
.prayer-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 7px; }
.prayer-progress-label { font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.prayer-progress-pct   { font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; color: var(--gold); }
.prayer-progress-track { position: relative; height: 6px; background: rgba(255,255,255,0.07); border-radius: var(--radius-pill); overflow: hidden; }
.prayer-progress-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, rgba(var(--green-rgb),0.9), rgba(var(--gold-rgb),0.95));
  border-radius: var(--radius-pill);
  box-shadow: 0 0 10px rgba(var(--gold-rgb),0.35);
  transition: width 1s var(--ease-out);
}
.prayer-progress-fill::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 40px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: progressShimmer 2.5s ease-in-out infinite;
}
@keyframes progressShimmer { 0% { transform: translateX(-60px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateX(60px); opacity: 0; } }
.prayer-progress-milestones { display: flex; justify-content: space-between; margin-top: 5px; }
.prayer-progress-milestones span { font-family: var(--mono); font-size: var(--fs-micro); color: rgba(var(--gold-rgb), 0.55); }

/* City search results */
.city-search-results { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.city-result-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
.city-result-item:hover,
.city-result-item.selected { background: rgba(var(--green-rgb),0.15); border-color: rgba(74,222,128,0.35); }
.city-result-name { font-size: var(--fs-body); font-weight: 600; color: var(--fg); }
.city-result-meta { font-size: var(--fs-label); color: rgba(255,255,255,0.5); margin-top: 2px; }
.city-result-tz   { font-size: var(--fs-micro); color: rgba(255,255,255,0.35); font-family: var(--mono); }


/* ═══════════════════════════════════════════════════════════════
   10. CITY CARD
   ═══════════════════════════════════════════════════════════════ */

.saved-cities-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.city-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: all var(--dur-normal) var(--ease-out);
}
.city-card:hover {
  border-color: rgba(var(--green-rgb),0.30);
  box-shadow: var(--shadow-sm), var(--glow-green);
  transform: translateY(-1px);
  background: rgba(var(--green-rgb),0.04);
}
.city-card.active-city {
  border-color: rgba(var(--green-rgb),0.40);
  background: rgba(var(--green-rgb),0.08);
}

.city-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.city-card-left { flex: 1; min-width: 0; }
.city-card-name { font-family: var(--sans); font-size: var(--fs-h3); font-weight: 600; margin-bottom: 4px; }
.city-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-family: var(--mono); font-size: var(--fs-micro); color: var(--muted); }
.city-card-sep { opacity: 0.4; }
.city-next-prayer { color: var(--accent); font-weight: 600; }

.city-prayers-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 4px; }
.city-prayer-cell {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 6px 4px; text-align: center;
}
.city-prayer-cell.city-prayer-next { border-color: rgba(var(--green-rgb),0.40); background: rgba(var(--green-rgb),0.07); }
.city-prayer-cell-label { font-size: var(--fs-micro); color: var(--muted); margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.city-prayer-cell-time  { font-family: var(--mono); font-size: var(--fs-meta); font-weight: 600; color: var(--fg); }
.city-prayer-cell.city-prayer-next .city-prayer-cell-time { color: var(--accent, #10b981); }

.city-card-actions { display: flex; gap: 8px; }
.city-delete-btn {
  background: none; border: none; color: var(--rose); font-size: 1.1rem;
  cursor: pointer; padding: 8px 10px; border-radius: var(--radius-xs);
  min-height: 44px; min-width: 44px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast);
}
.city-delete-btn:hover { background: rgba(var(--rose-rgb),0.12); }

.no-city-message { text-align: center; padding: 60px 20px; color: var(--muted); }
.no-city-icon { font-size: 3.2rem; margin-bottom: 16px; opacity: 0.55; filter: drop-shadow(0 4px 16px rgba(var(--green-rgb), 0.25)); }
.no-city-message h3 { color: var(--fg); margin: 0 0 10px; font-family: var(--display); font-size: var(--fs-h2); font-weight: 600; }
.no-city-message p  { margin: 0 0 28px; font-size: var(--fs-body); }


/* ═══════════════════════════════════════════════════════════════
   11. TRACKER COMPONENTS
   ═══════════════════════════════════════════════════════════════ */

.tracker-prayer-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
@media (max-width: 580px) { .tracker-prayer-grid { grid-template-columns: repeat(3,1fr); } }

.tracker-prayer-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 8px;
  border-radius: var(--radius);
  border: 2px solid var(--border);
  background: rgba(255,255,255,0.03);
  cursor: pointer; user-select: none;
  position: relative; overflow: hidden;
  min-height: 80px;
  touch-action: manipulation;
  transition: all var(--dur-normal) var(--ease-out);
}
.tracker-prayer-btn:hover  { background: rgba(255,255,255,0.06); border-color: var(--border-hover); }
.tracker-prayer-btn:active { transform: scale(0.95); }
.tracker-prayer-btn .prayer-icon   { font-size: 22px; line-height: 1; }
.tracker-prayer-btn .prayer-name   { font-family: var(--mono); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.tracker-prayer-btn .prayer-status { font-family: var(--mono); font-size: var(--fs-micro); }

.tracker-prayer-btn[data-status="ontime"] { border-color: rgba(var(--green-rgb),0.40); background: rgba(var(--green-rgb),0.08); }
.tracker-prayer-btn[data-status="ontime"] .prayer-status { color: rgba(var(--green-rgb),1); }
.tracker-prayer-btn[data-status="late"]   { border-color: rgba(var(--gold-rgb),0.40);  background: rgba(var(--gold-rgb),0.08); }
.tracker-prayer-btn[data-status="late"]   .prayer-status { color: var(--gold); }
.tracker-prayer-btn[data-status="missed"] { border-color: rgba(var(--rose-rgb),0.30);  background: rgba(var(--rose-rgb),0.07); }
.tracker-prayer-btn[data-status="missed"] .prayer-status { color: var(--rose); }

/* Haptic visual ripple */
@keyframes rippleBurst {
  0%   { transform: scale(0.85); box-shadow: 0 0 0 0   rgba(var(--green-rgb),0.45); }
  40%  { transform: scale(1.04); box-shadow: 0 0 0 12px rgba(var(--green-rgb),0.15); }
  100% { transform: scale(1);    box-shadow: 0 0 0 18px rgba(var(--green-rgb),0); }
}
.tracker-prayer-btn.tapped { animation: rippleBurst 0.38s var(--ease-out) forwards; }
@media (prefers-reduced-motion: reduce) { .tracker-prayer-btn.tapped { animation: none; } }

.tracker-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }
.tracker-dow  {
  display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; margin-bottom: 6px;
  color: var(--muted); font-family: var(--mono); font-size: var(--fs-micro); text-align: center;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
}

.tracker-day {
  aspect-ratio: 1; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  cursor: pointer; user-select: none;
  position: relative; min-height: 44px;
  touch-action: manipulation;
  transition: all var(--dur-fast) ease;
}
.tracker-day:hover     { border-color: rgba(var(--blue-rgb),0.30); background: rgba(var(--blue-rgb),0.06); }
.tracker-day.selected  { outline: 2px solid rgba(var(--blue-rgb),0.50); background: rgba(var(--blue-rgb),0.08); }
.tracker-day.today     { outline: 2px solid rgba(var(--purple-rgb),0.45); }
.tracker-day.outside   { opacity: 0.28; pointer-events: none; }
.tracker-day.future    { opacity: 0.50; }
.tracker-day .day-num  { font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; }
.tracker-day .day-dots { display: flex; gap: 2px; }
.tracker-day .day-dot  { width: 4px; height: 4px; border-radius: 50%; }

.tracker-day[data-score="5"] { background: rgba(var(--green-rgb),0.16); border-color: rgba(var(--green-rgb),0.28); }
.tracker-day[data-score="4"] { background: rgba(var(--green-rgb),0.11); border-color: rgba(var(--green-rgb),0.20); }
.tracker-day[data-score="3"] { background: rgba(var(--green-rgb),0.07); border-color: rgba(var(--green-rgb),0.13); }
.tracker-day[data-score="2"] { background: rgba(var(--gold-rgb),0.09);  border-color: rgba(var(--gold-rgb),0.16); }
.tracker-day[data-score="1"] { background: rgba(var(--gold-rgb),0.05);  border-color: rgba(var(--gold-rgb),0.11); }
.tracker-day[data-score="0"] { background: rgba(var(--rose-rgb),0.07);  border-color: rgba(var(--rose-rgb),0.13); }

/* Heatmap */
.tracker-prayer-rows  { display: flex; flex-direction: column; gap: 8px; }
.tracker-prayer-row   { display: flex; align-items: center; gap: 10px; }
.tracker-prayer-label { width: 58px; flex-shrink: 0; font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; color: var(--muted); text-align: right; letter-spacing: 0.04em; text-transform: uppercase; }
.tracker-heatmap-row  { display: flex; gap: 3px; flex-wrap: wrap; flex: 1; }
.tracker-heat-cell    { width: 10px; height: 10px; border-radius: 3px; background: rgba(255,255,255,0.06); transition: background var(--dur-fast) ease; }
.tracker-heat-cell[data-val="ontime"] { background: rgba(var(--green-rgb),0.90); }
.tracker-heat-cell[data-val="late"]   { background: rgba(var(--gold-rgb),0.72); }
.tracker-heat-cell[data-val="missed"] { background: rgba(var(--rose-rgb),0.52); }
.tracker-heat-cell:hover { outline: 1px solid rgba(255,255,255,0.35); transform: scale(1.4); }


/* ═══════════════════════════════════════════════════════════════
   12. HIJRI / GREGORIAN TOGGLE PILL
   ═══════════════════════════════════════════════════════════════ */

.hijri-pill {
  display: inline-flex; align-items: center;
  border: 1.5px solid rgba(255,255,255,0.13);
  border-radius: 20px; overflow: hidden;
  cursor: pointer; user-select: none;
  flex-shrink: 0;
  transition: border-color 0.18s;
}
.hijri-pill:hover { border-color: rgba(var(--green-rgb),0.50); }
.hijri-pill-seg {
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.03em;
  padding: 3px 8px; color: rgba(234,240,255,0.35);
  background: transparent;
  line-height: 1.4;
  transition: background 0.18s, color 0.18s;
}
/* Active segment toggled by JS class */
.hijri-pill:not(.hijri-pill--hijri) #hijriPillG,
.hijri-pill:not(.hijri-pill--hijri) #homeHijriPillG {
  background: rgba(var(--green-rgb),0.85); color: #fff;
  border-radius: 20px 0 0 20px;
}
.hijri-pill--hijri #hijriPillH,
.hijri-pill--hijri #homeHijriPillH {
  background: rgba(var(--green-rgb),0.85); color: #fff;
  border-radius: 0 20px 20px 0;
}


/* ═══════════════════════════════════════════════════════════════
   13. DAILY AYAH — FLOATING PILL
   ═══════════════════════════════════════════════════════════════ */

.ayah-pill {
  position: fixed;
  bottom: calc(72px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
  right: 18px;
  z-index: 800;
  display: flex; align-items: center; gap: 7px;
  padding: 10px 16px 10px 13px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--gold-rgb), 0.38);
  background: linear-gradient(135deg,
    rgba(var(--gold-rgb), 0.16),
    rgba(var(--green-rgb), 0.10));
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: var(--shadow-md), var(--glow-gold);
  color: var(--white-soft);
  font-family: var(--mono); font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0.05em;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  animation: ayahPillEntrance 0.6s var(--ease-spring) both, ayahPillGlow 3.2s ease-in-out 1.2s infinite;
  transition: transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), border-color 0.22s;
  will-change: transform;
}
.ayah-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--gold-rgb), 0.55);
  background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.24), rgba(var(--green-rgb), 0.16));
  box-shadow: var(--shadow-lg), var(--glow-gold);
}
.ayah-pill:active { transform: scale(0.95); }

@keyframes ayahPillEntrance {
  from { opacity: 0; transform: translateY(12px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ayahPillGlow {
  0%, 100% { box-shadow: var(--shadow-md), 0 0 12px rgba(var(--gold-rgb), 0.14); }
  50%       { box-shadow: var(--shadow-md), 0 0 22px rgba(var(--gold-rgb), 0.30); }
}
@media (prefers-reduced-motion: reduce) { .ayah-pill { animation: none; } }

.ayah-pill-icon  { font-size: 17px; line-height: 1; color: var(--gold); filter: drop-shadow(0 0 5px rgba(var(--gold-rgb),0.5)); }
.ayah-pill-label { color: rgba(var(--white-soft-rgb), 0.90); white-space: nowrap; font-family: var(--sans); font-style: italic; font-size: var(--fs-meta); font-weight: 500; letter-spacing: 0.02em; }
.ayah-pill-dot   { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 6px rgba(var(--gold-rgb),0.7); animation: pillDotPulse 2.4s ease-in-out infinite; flex-shrink: 0; }
.ayah-pill-dot.seen { display: none; }
@keyframes pillDotPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.75); } }


/* ═══════════════════════════════════════════════════════════════
   14. DAILY AYAH MODAL
   ═══════════════════════════════════════════════════════════════ */

.ayah-modal-backdrop {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(4,8,18,0.82);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 0; opacity: 0; pointer-events: none;
  transition: opacity 0.24s var(--ease-out);
}
.ayah-modal-backdrop.open { opacity: 1; pointer-events: all; }

.ayah-modal {
  position: relative;
  width: min(680px, 94vw);
  max-height: var(--ayah-max-h, calc(100vh - 80px));
  display: flex; flex-direction: column;
  background: #0d1829;
  background-image:
    radial-gradient(ellipse 70% 35% at 50% 0%,   rgba(197,150,74,0.12) 0%, transparent 65%),
    radial-gradient(ellipse 55% 40% at 50% 100%, rgba(24,117,96,0.08)  0%, transparent 65%);
  border: 1px solid rgba(197,150,74,0.30); border-top: none;
  border-radius: 0 0 20px 20px;
  box-shadow: 0 16px 80px rgba(0,0,0,0.75), 0 0 0 1px rgba(197,150,74,0.07) inset;
  transform: translateY(-24px); opacity: 0;
  transition: transform 0.34s cubic-bezier(0.32,0.72,0,1), opacity 0.22s var(--ease-out);
  will-change: transform, opacity;
  overflow: hidden;
}
.ayah-modal-backdrop.open .ayah-modal { transform: translateY(0); opacity: 1; }
@media (max-width: 639px) { .ayah-modal { width: 100%; border-radius: 0 0 14px 14px; } }

.ayah-modal-header {
  flex-shrink: 0; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 14px 12px 20px;
  background: rgba(197,150,74,0.07);
  border-bottom: 1px solid rgba(197,150,74,0.16);
}
.ayah-modal-title-wrap { flex: 1; min-width: 0; }
.ayah-modal-title {
  font-family: var(--display); font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--gold); -webkit-text-fill-color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ayah-modal-ref {
  font-family: var(--mono); font-size: var(--fs-micro); font-weight: 500;
  color: rgba(234,240,255,0.55); margin-top: 3px; letter-spacing: 0.03em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ayah-modal-actions { display: flex; align-items: center; gap: 5px; flex-shrink: 0; }
.ayah-modal-actions .ayah-action-btn,
.ayah-modal-close {
  width: 34px; height: 34px; min-width: 34px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.04);
  color: rgba(234,240,255,0.60); font-size: var(--fs-body); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
.ayah-modal-actions .ayah-action-btn:hover { background: rgba(197,150,74,0.13); border-color: rgba(197,150,74,0.30); color: var(--gold); transform: translateY(-1px); }
.ayah-modal-actions .ayah-action-btn:active { transform: scale(0.90); }
.ayah-modal-actions .ayah-action-close:hover,
.ayah-modal-close:hover { background: rgba(251,113,133,0.12); border-color: rgba(251,113,133,0.28); color: #fb7185; }

.ayah-modal-body {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
}
.ayah-modal-ornament { text-align: center; padding: 16px 20px 2px; font-family: var(--arabic); font-size: var(--fs-arabic-h1); color: rgba(197,150,74,0.80); line-height: 1.5; user-select: none; text-shadow: 0 0 20px rgba(197,150,74,0.30); }
.ayah-modal-arabic   { font-size: var(--fs-arabic-body); line-height: 2.3; text-align: center; direction: rtl; padding: 14px 18px 12px; background: rgba(197,150,74,0.05); border-top: 1px solid rgba(197,150,74,0.11); border-bottom: 1px solid rgba(197,150,74,0.11); margin: 6px 14px; border-radius: 12px; color: #eaf0ff; }
.ayah-modal-translation { font-size: var(--fs-body); line-height: 1.80; color: rgba(234,240,255,0.68); text-align: center; font-style: italic; padding: 10px 22px 6px; }

/* Inline card — hidden once the pill+modal system is active */
.daily-ayah-card { display: none; }


/* ═══════════════════════════════════════════════════════════════
   15. SETTINGS MODAL
   ═══════════════════════════════════════════════════════════════ */

.settings-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.settings-modal-backdrop.open { opacity: 1; pointer-events: auto; }

.settings-modal {
  background: var(--card); border: 1px solid rgba(var(--gold-rgb),0.14);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.60), 0 0 0 1px rgba(255,255,255,0.04);
  width: 100%; max-width: 520px; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.settings-modal-backdrop.open .settings-modal { transform: translateY(0) scale(1); }

.settings-modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 20px 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.settings-modal-title  { font-size: var(--fs-h3); font-weight: 700; font-family: var(--display); letter-spacing: 0.03em; color: var(--white-soft); }
.settings-modal-sub    { font-size: var(--fs-micro); color: var(--muted); margin-top: 3px; }
.settings-close-btn    { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: rgba(255,255,255,0.04); color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background 0.15s, color 0.15s; }
.settings-close-btn:hover { background: rgba(var(--rose-rgb),0.12); color: var(--danger); }

.settings-modal-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 20px; }
.settings-modal-body::-webkit-scrollbar { width: 4px; }
.settings-modal-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 2px; }

.settings-field      { display: flex; flex-direction: column; gap: 6px; }
.settings-label      { font-size: var(--fs-label); font-weight: 700; color: var(--white-soft); letter-spacing: 0.02em; }
.settings-hint       { font-size: var(--fs-micro); color: var(--muted); line-height: 1.5; }
.settings-select-wrap { position: relative; display: flex; align-items: center; }
.settings-select     { width: 100%; padding: 10px 32px 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,0.05); color: var(--fg); font-size: var(--fs-body); cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color 0.15s, background 0.15s; }
.settings-select:focus { outline: none; border-color: rgba(var(--green-rgb),0.50); background: rgba(255,255,255,0.08); }
.settings-sel-chev   { position: absolute; right: 10px; color: var(--muted); pointer-events: none; font-size: var(--fs-micro); }
.settings-city-display { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: rgba(255,255,255,0.03); font-size: var(--fs-body); color: rgba(var(--green-rgb),0.90); font-family: var(--mono); }
.settings-city-btn   { align-self: flex-start; padding: 8px 16px; border-radius: 10px; border: 1px solid rgba(var(--green-rgb),0.30); background: rgba(var(--green-rgb),0.08); color: rgba(var(--green-rgb),0.90); font-size: var(--fs-label); font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; }
.settings-city-btn:hover { background: rgba(var(--green-rgb),0.16); border-color: rgba(var(--green-rgb),0.50); }

.settings-modal-footer { padding: 14px 20px 18px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-shrink: 0; }
.settings-status       { font-size: var(--fs-label); font-weight: 600; min-width: 0; }
.settings-footer-btns  { display: flex; gap: 8px; flex-shrink: 0; }
.settings-cancel-btn   { padding: 9px 18px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: var(--fs-label); cursor: pointer; transition: background 0.15s; }
.settings-cancel-btn:hover { background: rgba(255,255,255,0.05); }
.settings-save-btn     { padding: 9px 20px; border-radius: 10px; border: none; background: rgba(var(--green-rgb),0.90); color: #fff; font-size: var(--fs-label); font-weight: 700; cursor: pointer; transition: background 0.15s, transform 0.10s; }
.settings-save-btn:hover  { background: rgba(var(--green-rgb),1); }
.settings-save-btn:active { transform: scale(0.97); }

@media (max-width: 520px) {
  .settings-modal { border-radius: 16px 16px 0 0; max-height: 92vh; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; }
  .settings-modal-backdrop { align-items: flex-end; padding: 0; }
}


/* ═══════════════════════════════════════════════════════════════
   16. ADHAN SETTINGS CARD
   ═══════════════════════════════════════════════════════════════ */

.adhan-card         { background: var(--card); border: 1px solid var(--border); border-radius: 14px; margin-top: 16px; overflow: hidden; position: relative; }
.adhan-card-header  { padding: 16px 18px 14px; border-bottom: 1px solid var(--border); }
.adhan-card-title   { font-size: var(--fs-h3); font-weight: 700; color: var(--fg); }
.adhan-card-sub     { font-size: var(--fs-label); color: var(--muted); margin-top: 2px; }

.adhan-perm-banner        { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02); }
.adhan-perm-granted       { background: rgba(63,182,139,0.06); border-bottom-color: rgba(63,182,139,0.25); }
.adhan-perm-denied        { background: rgba(224,92,92,0.06);  border-bottom-color: rgba(224,92,92,0.25); }
.adhan-perm-icon          { font-size: 20px; flex-shrink: 0; }
.adhan-perm-text          { flex: 1; }
.adhan-perm-title         { font-size: var(--fs-body); font-weight: 600; color: var(--fg); }
.adhan-perm-desc          { font-size: var(--fs-micro); color: var(--muted); line-height: 1.4; margin-top: 2px; }
.adhan-perm-btn           { padding: 7px 14px; border-radius: 8px; border: none; background: var(--gold); color: #0d1117; font-size: var(--fs-label); font-weight: 700; cursor: pointer; flex-shrink: 0; transition: background 0.2s, opacity 0.2s; }
.adhan-perm-btn:hover:not(:disabled) { background: var(--gold-light); }
.adhan-perm-btn:disabled  { opacity: 0.6; cursor: default; }

.adhan-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 14px 16px 0; }
.adhan-tabs::-webkit-scrollbar { display: none; }
.adhan-tab  { display: flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 30px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: var(--fs-label); font-weight: 500; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all 0.2s; }
.adhan-tab:hover      { border-color: rgba(var(--gold-rgb),0.35); color: var(--fg); }
.adhan-tab-active     { background: rgba(var(--gold-rgb),0.12); border-color: rgba(var(--gold-rgb),0.40); color: var(--gold-light); }
.adhan-tab-dot        { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; }

.adhan-master-row   { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; }
.adhan-master-label { font-size: var(--fs-body); font-weight: 600; color: var(--fg); }
.adhan-master-sub   { font-size: var(--fs-micro); color: var(--muted); margin-top: 2px; }
.adhan-toggle       { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.adhan-toggle input { opacity: 0; width: 0; height: 0; }
.adhan-toggle-track { position: absolute; inset: 0; background: rgba(255,255,255,0.08); border: 1px solid var(--border); border-radius: 30px; cursor: pointer; transition: all 0.25s; }
.adhan-toggle-track::after { content: ""; position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: all 0.25s; }
.adhan-toggle input:checked + .adhan-toggle-track { background: rgba(var(--gold-rgb),0.18); border-color: rgba(var(--gold-rgb),0.45); }
.adhan-toggle input:checked + .adhan-toggle-track::after { left: calc(100% - 19px); background: var(--gold); }

.adhan-badge     { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-micro); font-weight: 700; padding: 3px 9px; border-radius: 20px; letter-spacing: 0.04em; flex-shrink: 0; margin-top: 4px; }
.adhan-badge-on  { background: rgba(63,182,139,0.15); color: #3fb68b; }
.adhan-badge-off { background: rgba(255,255,255,0.06); color: var(--muted); }
.adhan-badge-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.adhan-settings-card          { background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.adhan-settings-card-disabled { opacity: 0.4; pointer-events: none; }
.adhan-row         { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--border); transition: background 0.15s; }
.adhan-row-last    { border-bottom: none; }
.adhan-row-hidden  { display: none; }
.adhan-row-left    { flex: 1; min-width: 0; }
.adhan-row-label   { font-size: var(--fs-body); font-weight: 500; color: var(--fg); }
.adhan-row-sub     { font-size: var(--fs-micro); color: var(--muted); margin-top: 2px; }
.adhan-row-right   { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.adhan-sel-wrap    { position: relative; }
.adhan-select      { appearance: none; background: rgba(255,255,255,0.06); border: 1px solid var(--border); color: var(--fg); font-size: var(--fs-label); font-weight: 500; padding: 6px 26px 6px 10px; border-radius: 8px; cursor: pointer; outline: none; transition: border-color 0.2s; min-width: 130px; }
.adhan-select:focus { border-color: rgba(var(--gold-rgb),0.40); }
.adhan-sel-chev    { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: var(--fs-micro); pointer-events: none; }
.adhan-test-btn    { padding: 6px 11px; border-radius: 7px; border: 1px solid rgba(var(--gold-rgb),0.35); background: rgba(var(--gold-rgb),0.10); color: var(--gold-light); font-size: var(--fs-micro); font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.adhan-test-btn:hover { background: rgba(var(--gold-rgb),0.20); }
.adhan-stop-btn    { padding: 6px 11px; border-radius: 7px; border: 1px solid rgba(255,255,255,0.20); background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.80); font-size: var(--fs-micro); font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.adhan-stop-btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.32); }
.adhan-footer-hint { font-size: var(--fs-micro); color: var(--muted); padding: 8px 2px 2px; margin-bottom: 14px; }
.adhan-save-bar    { display: flex; gap: 8px; padding: 14px 16px; border-top: 1px solid var(--border); }
.adhan-save-btn    { flex: 1; padding: 11px; border-radius: 10px; border: none; background: var(--gold); color: #0d1117; font-size: var(--fs-body); font-weight: 700; cursor: pointer; transition: background 0.2s, transform 0.15s; }
.adhan-save-btn:hover  { background: var(--gold-light); transform: translateY(-1px); }
.adhan-save-btn:active { transform: translateY(0); }
.adhan-apply-all-btn   { padding: 11px 14px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--muted); font-size: var(--fs-label); font-weight: 500; cursor: pointer; white-space: nowrap; transition: all 0.2s; }
.adhan-apply-all-btn:hover { border-color: rgba(var(--gold-rgb),0.35); color: var(--fg); }
.adhan-ui-toast { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(12px); background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 18px; font-size: var(--fs-label); color: var(--fg); opacity: 0; pointer-events: none; transition: all 0.3s; z-index: 9999; white-space: nowrap; box-shadow: 0 4px 20px rgba(0,0,0,0.40); }
.adhan-ui-toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); }


/* ═══════════════════════════════════════════════════════════════
   17. DONATE MODAL
   ═══════════════════════════════════════════════════════════════ */

.donate-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.donate-backdrop.open { opacity: 1; pointer-events: all; }
.donate-modal { background: #fff; color: #111; border-radius: 16px; width: 100%; max-width: 440px; padding: 32px 28px 24px; position: relative; transform: translateY(20px); transition: transform 0.25s; max-height: 90vh; overflow-y: auto; }
.donate-backdrop.open .donate-modal { transform: translateY(0); }
.donate-close  { position: absolute; top: 14px; right: 14px; background: #f0f0f0; border: none; border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #555; transition: background 0.15s; }
.donate-close:hover { background: #e0e0e0; }
.donate-header { text-align: center; margin-bottom: 18px; }
.donate-title  { font-size: var(--fs-h1); font-weight: 700; margin: 0 0 6px; color: #111; }
.donate-ayah   { background: #f6f9f7; border-left: 3px solid #1a7a4a; border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; text-align: center; }
.donate-ayah-arabic { font-family: var(--arabic); font-size: var(--fs-arabic-body); line-height: 2; color: #1a1a1a; direction: rtl; margin-bottom: 6px; }
.donate-cta    { width: 100%; padding: 14px; background: #1a7a4a; color: #fff; border: none; border-radius: 10px; font-size: var(--fs-body); font-weight: 700; cursor: pointer; margin-top: 8px; transition: background 0.2s; }
.donate-cta:hover { background: #1e9057; }


/* ═══════════════════════════════════════════════════════════════
   18. PULL-TO-REFRESH
   ═══════════════════════════════════════════════════════════════ */

.ptr-indicator {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 20px;
  background: rgba(var(--green-rgb),0.15); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(var(--green-rgb),0.22);
  font-family: var(--mono); font-size: var(--fs-meta); font-weight: 600; letter-spacing: 0.05em;
  color: rgba(var(--green-rgb),1);
  transform: translateY(-100%);
  transition: transform 0.28s var(--ease-out);
  pointer-events: none;
}
.ptr-indicator.ptr-visible  { transform: translateY(0); }
.ptr-indicator.ptr-loading  { background: rgba(var(--gold-rgb),0.12); color: var(--gold); border-color: rgba(var(--gold-rgb),0.22); }

/* 8-pointed star spinner */
.ptr-spinner {
  display: inline-block; width: 18px; height: 18px;
  animation: ucStarSpin 1.1s linear infinite;
  background: rgba(var(--gold-rgb),0.85);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  vertical-align: middle;
}
.ptr-arrow { font-size: 16px; transition: transform 0.2s ease; display: inline-block; }
.ptr-indicator.ptr-ready .ptr-arrow { transform: rotate(180deg); }

@keyframes ucStarSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ptr-spinner { animation-duration: 3s; } }

/* Utility spinner class for other loading contexts */
.uc-spinner {
  display: inline-block; width: 24px; height: 24px;
  animation: ucStarSpin 1.1s linear infinite;
  background: rgba(var(--gold-rgb),0.85);
  clip-path: polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}


/* ═══════════════════════════════════════════════════════════════
   19. SCROLL-REVEAL ENTRANCE ANIMATIONS
   ═══════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out);
  will-change: opacity, transform;
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal:nth-child(2) { transition-delay:  60ms; }
.reveal:nth-child(3) { transition-delay: 120ms; }
.reveal:nth-child(4) { transition-delay: 180ms; }
.reveal:nth-child(5) { transition-delay: 240ms; }

/* Screen fade-up on tab switch */
@keyframes screenReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.screen:not(.hidden) { animation: screenReveal var(--dur-slow) var(--ease-out) both; }

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal:nth-child(n) { opacity: 1; transform: none; transition: none; }
  .screen:not(.hidden) { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════
   20. SHARED ANIMATION KEYFRAMES
   ═══════════════════════════════════════════════════════════════ */

@keyframes fadeIn  { from { opacity:0; transform:translateY(8px);  } to { opacity:1; transform:none; } }
@keyframes slideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes shimmer { 0% { background-position:-200% 0; } 100% { background-position:200% 0; } }
@keyframes slideDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }

.animate-fade-in  { animation: fadeIn  0.32s var(--ease-out) forwards; }
.animate-slide-up { animation: slideUp 0.40s var(--ease-out) forwards; }
.animate-shimmer  { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent); background-size: 200% 100%; animation: shimmer 2s ease-in-out infinite; }

.delay-75  { animation-delay:  75ms; }
.delay-150 { animation-delay: 150ms; }
.delay-225 { animation-delay: 225ms; }
.delay-300 { animation-delay: 300ms; }


/* ═══════════════════════════════════════════════════════════════
   21. FOOTER
   ═══════════════════════════════════════════════════════════════ */

.app-footer {
  color: var(--muted);
  border-top: 1px solid rgba(var(--gold-rgb),0.08);
  padding: 20px 20px calc(20px + var(--safe-bottom));
  text-align: center;
  font-family: var(--sans);
  font-style: italic;
  font-size: var(--fs-meta);
  color: rgba(var(--gold-rgb), 0.35);
  background: rgba(7,16,15,0.60);
}


/* ═══════════════════════════════════════════════════════════════
   22. PRINT
   ★ Legitimate !important — print stylesheet overrides
   ═══════════════════════════════════════════════════════════════ */

@media print {
  .app-header, .app-footer, .top-nav, .bottom-nav,
  .btn, .audio-panel, .reader-controls, .page-nav,
  .radio-controls, .ayah-pill { display: none !important; }
  .card   { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; background: white; }
  body    { background: white; color: black; }
  .reader { max-height: none; overflow: visible; }
}

/* ═══════════════════════════════════════════════════════════════
   23. ADHAN — Reminder & custom upload sections
   ═══════════════════════════════════════════════════════════════ */

.adhan-reminder-sound-section {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adhan-reminder-sound-title {
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--fg);
}
.adhan-reminder-sound-hint {
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.4;
}
.adhan-reminder-sound-info {
  font-size: var(--fs-meta);
  min-height: 16px;
}
.adhan-reminder-sound-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}
.adhan-reminder-sound-btn {
  font-size: var(--fs-meta);
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  background: rgba(var(--gold-rgb), 0.07);
  color: rgba(var(--gold-rgb), 0.85);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.adhan-reminder-sound-btn:hover {
  background: rgba(var(--gold-rgb), 0.14);
  border-color: rgba(var(--gold-rgb), 0.40);
}
.adhan-reminder-sound-remove {
  border-color: rgba(220,80,80,0.30);
  background: rgba(220,80,80,0.06);
  color: rgba(220,130,130,0.90);
}
.adhan-reminder-sound-remove:hover {
  background: rgba(220,80,80,0.13);
  border-color: rgba(220,80,80,0.50);
}
.adhan-reminder-sound-format {
  font-size: var(--fs-micro);
  color: var(--muted);
  letter-spacing: 0.03em;
}

/* ═══════════════════════════════════════════════════════════════
   24. ADHAN TOAST — in-page prayer notification elements
   ═══════════════════════════════════════════════════════════════ */

.adhan-toast {
  background: linear-gradient(160deg,
    rgba(17,30,58,0.97) 0%,
    rgba(10,20,42,0.99) 100%);
  border: 1px solid rgba(var(--gold-rgb),0.30);
  border-top: 2px solid rgba(var(--gold-rgb),0.60);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(var(--gold-rgb),0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.adhan-toast-icon {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(var(--gold-rgb),0.40));
}
.adhan-toast-body  { flex: 1 1 auto; min-width: 0; }
.adhan-toast-title {
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--white-soft);
  line-height: 1.2;
  margin-bottom: 3px;
}
.adhan-toast-sub {
  font-size: var(--fs-meta);
  color: rgba(var(--gold-rgb),0.65);
  font-style: italic;
  font-family: var(--display);
}
.adhan-toast-stop {
  flex-shrink: 0;
  font-size: var(--fs-meta);
  padding: 6px 14px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.adhan-toast-stop:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.35);
}
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   ABOUT — Security card & badges
   ═══════════════════════════════════════════════════════════════ */

.about-security-card {
  border-color: rgba(var(--gold-rgb), 0.22) !important;
  background: linear-gradient(135deg,
    rgba(var(--gold-rgb), 0.05),
    rgba(255,255,255,0.02)) !important;
}
.about-security-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.about-security-badge {
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(var(--gold-rgb), 0.30);
  background: rgba(var(--gold-rgb), 0.08);
  color: rgba(var(--gold-rgb), 0.85);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* PRIVACY — Inventory card hover improvement */
#privacyInventory .time-card {
  border-radius: 10px !important;
  transition: border-color 0.15s !important;
}
#privacyInventory .time-card:hover {
  border-color: rgba(var(--gold-rgb), 0.25) !important;
}

/* ═══════════════════════════════════════════════════════════════
   TIP OF THE DAY — Home screen card
   ═══════════════════════════════════════════════════════════════ */

.tip-of-day-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 12px;
  padding: 13px 14px;
  border-radius: 14px;
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  background: linear-gradient(135deg,
    rgba(var(--gold-rgb), 0.06) 0%,
    rgba(255,255,255,0.02) 100%);
  animation: tipSlideIn 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes tipSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tip-of-day-card.tip-hiding {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.tip-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  line-height: 1.3;
}
.tip-content {
  flex: 1;
  min-width: 0;
}
.tip-label {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: rgba(var(--gold-rgb), 0.75);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.tip-text {
  font-size: var(--fs-meta);
  color: var(--fg);
  line-height: 1.6;
}
.tip-dismiss {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  margin-top: 1px;
}
.tip-dismiss:hover {
  background: rgba(255,255,255,0.12);
  color: var(--fg);
}

/* ═══════════════════════════════════════════════════════════════
   FAQ ACCORDION — About screen
   ═══════════════════════════════════════════════════════════════ */

.faq-category-title {
  font-size: var(--fs-label);
  font-weight: 700;
  color: rgba(var(--gold-rgb), 0.80);
  letter-spacing: 0.04em;
  margin: 18px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.15);
}
.faq-category-title:first-child { margin-top: 4px; }

.faq-item {
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.faq-item:last-child { border-bottom: none; }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: start;
  color: var(--fg);
  font-size: var(--fs-body);
  font-weight: 500;
  font-family: var(--sans);
  line-height: 1.5;
  transition: color 0.15s;
}
.faq-question:hover { color: rgba(var(--gold-rgb), 0.90); }
.faq-q-text { flex: 1; }

.faq-chevron {
  flex-shrink: 0;
  font-size: 1rem;
  color: var(--muted);
  transition: transform 0.25s ease;
  display: inline-block;
}
.faq-question.faq-open .faq-chevron {
  transform: rotate(180deg);
  color: rgba(var(--gold-rgb), 0.75);
}
.faq-question.faq-open { color: rgba(var(--gold-rgb), 0.90); }

.faq-answer {
  padding: 0 4px 14px;
  font-size: var(--fs-body);
  color: var(--muted);
  line-height: 1.8;
  animation: faqExpand 0.22s ease both;
}
@keyframes faqExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.faq-answer[hidden] { display: none; }

/* About security card */
.about-security-card {
  border-color: rgba(var(--gold-rgb), 0.22) !important;
  background: linear-gradient(135deg,
    rgba(var(--gold-rgb), 0.05),
    rgba(255,255,255,0.02)) !important;
}
.about-security-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.about-security-badge {
  font-size: var(--fs-micro);
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  border: 1px solid rgba(var(--gold-rgb), 0.30);
  background: rgba(var(--gold-rgb), 0.08);
  color: rgba(var(--gold-rgb), 0.85);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   ADHAN — Voice gender toggle (reminder sound section)
   ═══════════════════════════════════════════════════════════════ */

.adhan-voice-toggle-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 0 2px;
}
.adhan-voice-label {
  font-size: var(--fs-meta);
  color: var(--muted);
  font-weight: 500;
  flex-shrink: 0;
}
.adhan-voice-btns {
  display: flex;
  gap: 6px;
}
.adhan-voice-btn {
  font-size: var(--fs-meta);
  padding: 4px 14px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: var(--sans);
}
.adhan-voice-btn:hover {
  background: rgba(255,255,255,0.09);
  color: var(--fg);
}
.adhan-voice-btn-active {
  border-color: rgba(var(--gold-rgb), 0.45) !important;
  background: rgba(var(--gold-rgb), 0.10) !important;
  color: rgba(var(--gold-rgb), 0.90) !important;
}
.adhan-voice-hint {
  font-size: var(--fs-micro);
  color: var(--muted);
  font-style: italic;
  flex-basis: 100%;
  padding-left: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   QURAN — pageNav playbar pill (Advanced mode)
   Sits inline in the pageNav row, centered between page buttons
   and fullscreen. Visible in fullscreen via high z-index.
   ═══════════════════════════════════════════════════════════════ */

/* pageNav row needs space-between to push fullscreen to the right */
.page-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  padding: 8px 0;
}

/* Playbar pill — flex child that grows to fill center space */
.quran-playbar-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;                    /* takes all space between prev/next page and fullscreen */
  justify-content: center;
  background: rgba(var(--gold-rgb), 0.07);
  border: 1px solid rgba(var(--gold-rgb), 0.20);
  border-radius: 32px;
  padding: 5px 14px;
  min-width: 0;
}

.pb-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.pb-btn:hover {
  background: rgba(255,255,255,0.12);
  color: var(--fg);
}
.pb-btn:active { transform: scale(0.92); }

/* Play button — gold, larger */
.pb-play {
  width: 38px;
  height: 38px;
  font-size: 0.95rem;
  border-color: rgba(var(--gold-rgb), 0.40) !important;
  background:   rgba(var(--gold-rgb), 0.12) !important;
  color: rgba(var(--gold-rgb), 0.90) !important;
}
.pb-play:hover {
  background: rgba(var(--gold-rgb), 0.22) !important;
}
.pb-play.pb-playing {
  background: rgba(var(--gold-rgb), 0.18) !important;
  border-color: rgba(var(--gold-rgb), 0.55) !important;
}

/* Speed button — monospace label */
.pb-speed {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  width: auto;
  padding: 0 12px;
  border-radius: 16px;
  letter-spacing: 0.01em;
  color: var(--fg);
}
.pb-speed:hover { color: rgba(var(--gold-rgb), 0.85); }

/* Repeat button — lights up gold when active */
.pb-active {
  border-color: rgba(var(--gold-rgb), 0.50) !important;
  background:   rgba(var(--gold-rgb), 0.10) !important;
  color: rgba(var(--gold-rgb), 0.90) !important;
}

/* Fullscreen stays at far right */
.page-nav #btnReaderFullscreen { margin-left: auto; flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════════
   HOME — Weather badge
   Removed in v4f (2026-04). Weather is now rendered inside the
   home header 4-cell grid — see .home-hcell-weather-* rules in
   app.css. The .home-weather-badge class is no longer referenced.
   ═══════════════════════════════════════════════════════════════ */

/* In fullscreen the pageNav overlays the content at the top */
.fullscreen-active .page-nav,
:fullscreen .page-nav {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: rgba(10, 18, 38, 0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.15);
  padding: 8px 12px;
  border-radius: 0;
}

/* ═══════════════════════════════════════════════════════════════
   QURAN — Advanced controls strip
   Reciter · [Surah|Juz] + picker · Translation · Tafsir
   ═══════════════════════════════════════════════════════════════ */

.quran-adv-strip {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  padding: 14px 0 16px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 14px;
}

.adv-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 140px;
}
.adv-field-picker {
  flex: 1.4;
  min-width: 200px;
}

.adv-label {
  font-size: var(--fs-micro);
  font-weight: 600;
  color: rgba(var(--gold-rgb), 0.70);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.adv-select {
  width: 100%;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--fg);
  font-size: var(--fs-meta);
  font-family: var(--sans);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
  transition: border-color 0.15s;
}
.adv-select:focus {
  outline: none;
  border-color: rgba(var(--gold-rgb), 0.40);
}

/* Surah/Juz toggle buttons */
.adv-mode-toggle {
  display: flex;
  gap: 4px;
  margin-bottom: 2px;
}
.adv-mode-btn {
  flex: 1;
  padding: 5px 0;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: var(--fs-micro);
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.adv-mode-btn:hover { background: rgba(255,255,255,0.09); color: var(--fg); }
.adv-mode-btn-active {
  border-color: rgba(var(--gold-rgb), 0.45) !important;
  background:   rgba(var(--gold-rgb), 0.10) !important;
  color: rgba(var(--gold-rgb), 0.90) !important;
}
/* ─── Skip-link for keyboard users ───
   Hidden until focused. Appears in top-left on Tab.
   Paste into components.css (or app.css) — anywhere before
   the @media queries is fine. */
.skip-link {
  position: absolute;
  top: -48px;
  left: 8px;
  z-index: 9999;
  padding: 10px 16px;
  background: #d4a43a;           /* gold accent to match brand */
  color: #080e1c;                /* dark text on gold */
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  transition: top 0.15s ease-out;
}
.skip-link:focus {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* ═══════════════════════════════════════════════════════════════
   iOS INSTALL HINT — Add to Home Screen prompt
   ═══════════════════════════════════════════════════════════════ */

.ios-install-hint {
  position: fixed;
  top: 12px;
  left: 12px;
  right: 12px;
  z-index: 9997;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(10,30,50,0.97), rgba(5,20,35,0.97));
  border: 1px solid rgba(var(--gold-rgb), 0.35);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.45), 0 0 20px rgba(var(--gold-rgb), 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.ios-install-hint-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ios-install-hint-hidden {
  opacity: 0;
  transform: translateY(-16px);
}
.ios-install-hint-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
}
.ios-install-hint-text {
  flex: 1;
  min-width: 0;
}
.ios-install-hint-title {
  font-size: var(--fs-body);
  font-weight: 700;
  color: rgba(var(--gold-rgb), 0.95);
  margin-bottom: 3px;
}
.ios-install-hint-body {
  font-size: var(--fs-meta);
  color: rgba(234,240,255,0.70);
  line-height: 1.5;
}
.ios-install-hint-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-meta);
  transition: background 0.15s, color 0.15s;
}
.ios-install-hint-close:hover {
  background: rgba(255,255,255,0.12);
  color: var(--fg);
}

/* ── iOS fallback: stronger pulse for in-app banner ── */
.adhan-reminder-banner.ios-fallback {
  padding: 16px 20px !important;
  font-size: var(--fs-body) !important;
  bottom: 140px !important;
  animation: iosBannerPulse 2s ease-in-out infinite !important;
  border-color: rgba(var(--gold-rgb), 0.45) !important;
  box-shadow: 0 8px 40px rgba(var(--gold-rgb), 0.20) !important;
}
@keyframes iosBannerPulse {
  0%, 100% { box-shadow: 0 8px 40px rgba(var(--gold-rgb), 0.20); }
  50% { box-shadow: 0 8px 60px rgba(var(--gold-rgb), 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .adhan-reminder-banner.ios-fallback { animation: none !important; }
}

/* styles/app.css */
/* ─────────────────────────────────────────────────────────────
   FONT SIZE MIGRATION — v3 token system (completed)
   ─────────────────────────────────────────────────────────────
   122 hardcoded font-size values replaced with tokens.
   All font-size !important flags removed.
   --qd-title/body/meta custom tokens removed — replaced with
   the real scale tokens from tokens.css.

   INTENTIONALLY KEPT HARDCODED (icon/emoji sizes):
     16px  html base font size (browser root — must not change)
     18px  .contact-link-icon            (emoji)
     20px  .bm-icon, .privacy-item-icon  (emoji)
     22px  .word-tooltip-arabic          (Arabic word display)
     26px  .star-btn (rating stars)      (emoji)
     28px  .radio-icon, .wz-icon area    (emoji)
     2.4rem .istikhara-empty-icon        (decorative emoji)
     2.8rem .istikhara-hero-icon         (decorative emoji)
     1.35rem #homeScreenContent .home-tool-icon (emoji)

   RESPONSIVE OVERRIDES (.h1/.h2 at 580px and 1200px):
   Now use tokens — they're semantically correct and no longer
   fight the clamp values. At 580px: h1→fs-h2, h2→fs-body.
   At 1200px: h1→fs-h1, h2→fs-h2.
   ───────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  /* Layered background atmosphere */
  background-image:
    radial-gradient(ellipse 80% 60% at 20% -10%, rgba(var(--green-rgb), 0.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(var(--gold-rgb), 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 50% 80% at 50% 50%, rgba(var(--blue-rgb), 0.03) 0%, transparent 70%);
  background-attachment: fixed;
  min-height: 100vh;
  /* Prevent content from hiding under iOS home bar */
  padding-bottom: var(--safe-bottom);
}

/* Scrollbars — refined */
::-webkit-scrollbar       { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--blue-rgb), 0.2); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--blue-rgb), 0.38); }
* { scrollbar-width: thin; scrollbar-color: rgba(125,211,252,0.2) transparent; }

.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }

.hidden { display: none !important; }

/* Focus — WCAG AA */
:focus-visible {
  outline: 2.5px solid rgba(var(--blue-rgb), 0.7);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

/* Tap highlight removal for native feel on mobile */
a, button, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}

.container {
  max-width: var(--max);
  margin: 24px auto 60px;
  padding: 0 20px;
  padding-left: calc(20px + var(--safe-left));
  padding-right: calc(20px + var(--safe-right));
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
}

/* Home / card typography refinements */
.home-quran-strip-title-v3f,
.home-tools-head-v3f .h2,
.home-prayer-city-v3f {
  letter-spacing: 0.015em;
}

.home-tool-label {
  font-size: var(--fs-h3);
  line-height: 1.25;
  font-weight: 600;
}
   SCREEN BACKGROUNDS
   ═══════════════════════════════════════════════════════════════ */
.screen { position: relative; }
.screen::before {
  content: "";
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: -2; opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}
.screen:not(.hidden)::before { opacity: 1; }

/* ── Prayer — warm green/gold atmosphere (mosque warmth) ───── */
#screenPrayer::before {
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(var(--green-rgb), 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 75% 80%, rgba(var(--gold-rgb), 0.08) 0%, transparent 65%),
    linear-gradient(180deg, #080e1c 0%, #0c1a2e 40%, #080e1c 100%);
}

/* ── Quran — golden parchment glow ─────────────────────────── */
#screenQuran::before {
  background:
    radial-gradient(ellipse 65% 45% at 50% 15%, rgba(var(--gold-rgb), 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 20% 85%, rgba(var(--green-rgb), 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #0a1020 0%, #0e182e 40%, #080e1c 100%);
}

/* ── Qibla — cool blue compass feel ────────────────────────── */
#screenQibla::before {
  background:
    radial-gradient(ellipse 60% 55% at 50% 30%, rgba(var(--blue-rgb), 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 70% 75%, rgba(var(--purple-rgb), 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #080e1c 0%, #0b1528 40%, #080e1c 100%);
}

/* ── Radio — purple/blue ambient ───────────────────────────── */
#screenRadio::before {
  background:
    radial-gradient(ellipse 55% 50% at 25% 25%, rgba(var(--purple-rgb), 0.10) 0%, transparent 65%),
    radial-gradient(ellipse 60% 45% at 80% 70%, rgba(var(--blue-rgb), 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #090f1e 0%, #0d1830 40%, #080e1c 100%);
}

/* ── Calendar — subtle gold/green celestial ────────────────── */
#screenCalendar::before {
  background:
    radial-gradient(ellipse 70% 40% at 60% 10%, rgba(var(--gold-rgb), 0.09) 0%, transparent 65%),
    radial-gradient(ellipse 50% 55% at 30% 90%, rgba(var(--green-rgb), 0.07) 0%, transparent 60%),
    linear-gradient(180deg, #080e1c 0%, #0c1628 40%, #080e1c 100%);
}


   DAILY AYAH CARD
   ═══════════════════════════════════════════════════════════════ */
.daily-ayah-card {
  background: linear-gradient(160deg,
    rgba(20, 34, 62, 0.90) 0%,
    rgba(14, 26, 50, 0.95) 100%) !important;
  border-color: rgba(var(--gold-rgb), 0.18) !important;
  position: relative;
}
.daily-ayah-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--gold-rgb),0.5) 30%,
    rgba(var(--green-rgb),0.4) 70%,
    transparent 100%);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  pointer-events: none;
}

.prayer-dropdown { position: relative; display: inline-block; }

.prayer-dropdown-toggle {
  background: linear-gradient(135deg, rgba(var(--green-rgb),0.22), rgba(var(--gold-rgb),0.14));
  color: var(--white-soft);
  border: 1px solid rgba(var(--gold-rgb),0.22);
  padding: 12px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--display);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  min-width: 210px;
  justify-content: center;
  transition: all var(--dur-normal) var(--ease-out);
  min-height: 48px;
  box-shadow: var(--shadow-sm), var(--glow-green);
}
.prayer-dropdown-toggle:hover { filter: brightness(1.12); transform: translateY(-2px); box-shadow: var(--shadow-md), var(--glow-green); }
.prayer-dropdown-toggle.open { border-radius: var(--radius-pill) var(--radius-pill) var(--radius) var(--radius); }
.dropdown-chevron { transition: transform var(--dur-normal); font-size: var(--fs-micro); }
.prayer-dropdown-toggle.open .dropdown-chevron { transform: rotate(180deg); }

.prayer-dropdown-menu {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: rgba(14, 24, 50, 0.97);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(var(--gold-rgb),0.15);
  border-top: 2px solid rgba(var(--green-rgb),0.4);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden; z-index: 100;
  box-shadow: var(--shadow-lg);
}
.prayer-dropdown-menu.show { display: block; animation: slideDown 0.18s var(--ease-out); }
@keyframes slideDown { from { opacity:0; transform:translateY(-6px);} to { opacity:1; transform:none; } }

.prayer-menu-item {
  padding: 14px 20px; cursor: pointer;
  transition: background var(--dur-fast);
  font-family: var(--sans); font-size: var(--fs-body);
  color: var(--fg);
  border-bottom: 1px solid var(--border);
}
.prayer-menu-item:last-child { border-bottom: none; }
.prayer-menu-item:hover { background: rgba(var(--green-rgb),0.10); }
.prayer-menu-item.active { background: rgba(var(--green-rgb),0.14); color: rgba(var(--green-rgb),1); font-weight: 600; }

.prayer-view { display: none; }
.prayer-view.active { display: block; animation: fadeIn 0.3s var(--ease-out); }

/* Prayer Times Grid */
   RAMADAN CARD
   ═══════════════════════════════════════════════════════════════ */
#ramadanCard {
  border-color: rgba(var(--purple-rgb),0.2) !important;
  background: rgba(var(--purple-rgb),0.04) !important;
}

   QURAN READER
   ═══════════════════════════════════════════════════════════════ */
.browse-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 920px) { .browse-grid { grid-template-columns: 1.5fr 1fr; } }

.browse-col {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius); padding: 14px;
  background: rgba(255,255,255,0.02);
}

.juz-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
@media (min-width: 680px) { .juz-grid { grid-template-columns: repeat(6,1fr); } }
@media (min-width: 980px) { .juz-grid { grid-template-columns: repeat(10,1fr); } }

.juz-tile {
  border: 1px solid var(--border); background: rgba(255,255,255,0.03);
  border-radius: var(--radius-sm); padding: 10px;
  text-align: center; cursor: pointer; user-select: none;
  transition: all var(--dur-fast) var(--ease-out);
  position: relative; overflow: hidden; min-height: 54px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  touch-action: manipulation;
}
.juz-tile::after {
  content:""; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(var(--green-rgb),0.08), rgba(var(--gold-rgb),0.05));
  opacity: 0; transition: opacity var(--dur-fast) ease; pointer-events: none;
}
.juz-tile:hover { background: rgba(255,255,255,0.07); border-color: rgba(var(--green-rgb),0.22); box-shadow: var(--shadow-sm), var(--glow-green); transform: translateY(-1px); }
.juz-tile:hover::after { opacity: 1; }
.juz-tile:active { transform: scale(0.96); }
.juz-num { font-family: var(--mono); font-size: var(--fs-body); font-weight: 700; }
.juz-sub { color: var(--muted); font-family: var(--mono); font-size: var(--fs-micro); margin-top: 3px; }


.reader-settings { border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); border-radius: var(--radius); padding: 14px; margin: 10px 0 12px; }

/* ── Reader mode option cards ─────────────────────────────── */
.reader-mode-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 600px) {
  .reader-mode-grid { grid-template-columns: 1fr; }
}
.reader-mode-card {
  position: relative;
  display: block;
  cursor: pointer;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.02);
  padding: 12px 14px;
  transition: border-color 0.18s, background 0.18s;
  user-select: none;
}
.reader-mode-card:hover {
  border-color: var(--border-hover);
  background: rgba(255,255,255,0.04);
}
/* Hide the native checkbox — card itself is the visual */
.reader-mode-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.reader-mode-card-inner {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.reader-mode-card-header {
  display: flex;
  align-items: center;
  gap: 7px;
}
.reader-mode-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--border-hover);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: transparent;        /* hidden when unchecked */
  background: transparent;
  flex-shrink: 0;
  transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.reader-mode-title {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--muted);
  transition: color 0.18s;
  letter-spacing: 0.02em;
}
.reader-mode-desc {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: rgba(234,240,255,0.35);
  line-height: 1.4;
  padding-left: 25px;   /* align under title, past the checkmark */
}
/* ── Active / checked state ───────────────────────────────── */
.reader-mode-card:has(input:checked) {
  border-color: rgba(var(--green-rgb), 0.55);
  background: rgba(var(--green-rgb), 0.07);
}
.reader-mode-card:has(input:checked) .reader-mode-check {
  border-color: rgba(var(--green-rgb), 0.8);
  background: rgba(var(--green-rgb), 0.85);
  color: #fff;
}
.reader-mode-card:has(input:checked) .reader-mode-title {
  color: rgba(var(--green-rgb), 1);
  color: #22a07f;
}
.reader-mode-card:has(input:checked) .reader-mode-desc {
  color: rgba(234,240,255,0.55);
}
.toggle { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: var(--fs-meta); color: var(--muted); user-select: none; cursor: pointer; }
.toggle input { width: auto; cursor: pointer; }
.audio-panel { border: 1px solid rgba(255,255,255,0.06); background: linear-gradient(135deg, rgba(var(--green-rgb),0.03), rgba(var(--blue-rgb),0.03)); border-radius: var(--radius); padding: 14px; margin: 10px 0 12px; }
.audio-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 880px) { .audio-grid { grid-template-columns: 1fr 1fr 1fr; } }
.audio-actions { margin-top: 10px; justify-content: flex-start; }
.reader-controls { display: flex; justify-content: flex-end; margin-bottom: 10px; gap: 8px; flex-wrap: wrap; }
.reader { border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,0.02); padding: 14px; max-height: 70vh; overflow: auto; }
.page-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0 6px; }
.page-meta { font-family: var(--mono); color: var(--muted); font-size: var(--fs-meta); }

/* Mushaf */
.reader.mushafPaged {
  overflow: hidden; padding: 16px;
  background:
    radial-gradient(200px 200px at 15% 10%, rgba(var(--gold-rgb),0.06), transparent 60%),
    radial-gradient(250px 250px at 85% 20%, rgba(var(--green-rgb),0.04), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.06));
}
.mushaf-book {
  position: relative; border-radius: 22px; padding: 16px;
  background: linear-gradient(180deg, rgba(245,232,199,0.10), rgba(245,232,199,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: var(--shadow-xl);
  height: calc(70vh - 80px); overflow: hidden;
}
.mushaf-book::before {
  content:""; position: absolute; top: 10px; bottom: 10px; left: 50%; width: 18px;
  transform: translateX(-50%); border-radius: 12px;
  background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(255,255,255,0.08));
  opacity: 0.5; pointer-events: none;
}
.mushaf-spread { display: grid; grid-template-columns: 1fr; gap: 14px; height: 100%; direction: rtl; }
@media (min-width: 940px) { .mushaf-spread { grid-template-columns: 1fr 1fr; } }
.mushaf-page {
  position: relative; border-radius: var(--radius); padding: 16px;
  background: radial-gradient(240px 240px at 25% 20%, rgba(0,0,0,0.04), transparent 70%), linear-gradient(180deg, var(--paper-1), var(--paper-2));
  color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.10); overflow: hidden; height: 100%;
}
.mushaf-page::before {
  content:""; position: absolute; inset: 10px; border-radius: var(--radius-sm);
  border: 1px solid rgba(0,0,0,0.18);
  box-shadow: inset 0 0 0 3px var(--frame-1), inset 0 0 0 7px var(--frame-2), inset 0 0 0 11px var(--frame-3);
  pointer-events: none; opacity: 0.85;
}
.mushaf-inner { position: relative; z-index: 1; padding: 10px 14px; height: 100%; overflow-y: auto; overflow-x: hidden; }
.surah-header { display: flex; align-items: center; justify-content: center; text-align: center; margin: 6px 0 14px; font-weight: 800; color: rgba(28,36,48,0.92); }
.surah-header .plaque { padding: 10px 16px; border-radius: var(--radius-pill); background: linear-gradient(135deg, rgba(var(--gold-rgb),0.08), rgba(var(--green-rgb),0.06)); border: 1px solid rgba(0,0,0,0.14); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), var(--shadow-xs); font-family: var(--mono); font-size: var(--fs-label); direction: ltr; }
.ayah { padding: 10px 8px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.06); background: rgba(255,255,255,0.18); margin-bottom: 10px; cursor: pointer; transition: background var(--dur-fast) ease; position: relative; }
.ayah:last-child { margin-bottom: 0; }
.ayah:hover { background: rgba(255,255,255,0.28); }
.ayah.active { outline: 2px solid rgba(var(--green-rgb),0.4); background: rgba(var(--green-rgb),0.10); }
.ayah-ref { color: rgba(28,36,48,0.55); font-family: var(--mono); font-size: var(--fs-micro); margin-bottom: 8px; direction: ltr; }
.ayah-end { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 10px; margin-inline-start: 8px; border-radius: var(--radius-pill); border: 1px solid rgba(0,0,0,0.18); box-shadow: inset 0 0 0 2px rgba(var(--gold-rgb),0.45), inset 0 1px 0 rgba(255,255,255,0.5); background: rgba(255,255,255,0.35); color: rgba(28,36,48,0.95); font-family: var(--mono); font-size: var(--fs-meta); direction: rtl; }

/* Translations */
.mushaf-translation { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(0,0,0,0.08); color: rgba(28,36,48,0.70); font-size: var(--fs-micro); line-height: 1.45; font-family: var(--sans); direction: ltr; text-align: left; }
.scroll-translation { display: block; margin-top: 8px; color: var(--fg); font-size: var(--fs-body); line-height: 1.65; font-family: var(--sans); direction: ltr; text-align: left; }

/* Plain scroll */
.reader.plain { overflow: auto; background: rgba(255,255,255,0.02); color: var(--fg); }
.reader.plain .ayah { background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
.reader.plain .ayah:hover { background: rgba(255,255,255,0.07); }
.reader.plain .ayah-ref { color: var(--muted); }
.reader.plain .arabic { color: var(--fg); }
.reader.plain .ayah-end { border-color: rgba(255,255,255,0.22); color: rgba(233,238,252,0.9); background: rgba(255,255,255,0.08); box-shadow: none; }

/* ═══════════════════════════════════════════════════════════════
   CALENDAR
   ═══════════════════════════════════════════════════════════════ */
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.calendar-title { text-align: center; flex: 1; min-width: 220px; }
.cal-month { font-family: var(--display); font-weight: 700; letter-spacing: 0.05em; font-size: var(--fs-h2); }
.cal-sub { color: var(--muted); font-family: var(--mono); font-size: var(--fs-meta); margin-top: 4px; }
.calendar-layout { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 980px) { .calendar-layout { grid-template-columns: 1.3fr 0.7fr; } }

.dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; margin-bottom: 8px; color: var(--muted); font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; }
.dow div { text-align: center; padding: 6px 0; border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; background: rgba(255,255,255,0.02); }
.calendar-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 6px; }

.day {
  border: 1px solid rgba(255,255,255,0.07); background: rgba(255,255,255,0.03);
  border-radius: 14px; min-height: 70px; padding: 8px;
  cursor: pointer; user-select: none;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: all var(--dur-fast) ease;
  touch-action: manipulation;
}
.day:hover { background: rgba(255,255,255,0.06); border-color: var(--border-hover); }
.day.muted { opacity: 0.38; }
.day.today { outline: 2px solid rgba(var(--purple-rgb),0.4); background: rgba(var(--purple-rgb),0.08); box-shadow: var(--glow-purple); }
.day.selected { outline: 2px solid rgba(var(--blue-rgb),0.4); background: rgba(var(--blue-rgb),0.08); box-shadow: var(--glow-blue); }
.greg { font-family: var(--mono); font-size: var(--fs-body); font-weight: 700; }
.hij { color: var(--muted); font-family: var(--mono); font-size: var(--fs-micro); text-align: right; }
.cal-side { border: 1px solid rgba(255,255,255,0.06); border-radius: var(--radius); background: rgba(255,255,255,0.02); padding: 14px; }
.cal-detail { margin-top: 10px; }
.cal-detail .label { color: var(--muted); font-size: var(--fs-label); }
.cal-detail .value { font-family: var(--mono); font-size: var(--fs-body); margin-top: 4px; }

/* ═══════════════════════════════════════════════════════════════
   RADIO PLAYER
   ═══════════════════════════════════════════════════════════════ */
.radio-player { border: 1px solid rgba(255,255,255,0.06); background: linear-gradient(135deg, rgba(var(--purple-rgb),0.04), rgba(var(--blue-rgb),0.04)); border-radius: var(--radius); padding: 18px; margin-top: 12px; }
.radio-now-playing { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.radio-icon { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; font-size: 28px; background: linear-gradient(135deg, rgba(var(--green-rgb),0.22), rgba(var(--gold-rgb),0.16)); border: 1px solid rgba(var(--gold-rgb),0.22); flex-shrink: 0; box-shadow: var(--shadow-sm); transition: box-shadow 0.3s ease; }
.radio-icon.playing { animation: radioPulse 1.6s ease-in-out infinite; box-shadow: var(--shadow-sm), var(--glow-green); }
@keyframes radioPulse { 0%,100% { box-shadow: var(--shadow-sm), 0 0 0 0 rgba(var(--green-rgb),0.32); } 50% { box-shadow: var(--shadow-sm), 0 0 0 14px rgba(var(--green-rgb),0); } }
.radio-channel-name { font-family: var(--display); font-weight: 600; font-size: var(--fs-h3); letter-spacing: 0.03em; }
.radio-channel-desc { color: var(--muted); font-family: var(--mono); font-size: var(--fs-label); margin-top: 5px; }
.radio-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.radio-volume { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 150px; }
.radio-volume input[type="range"] { flex: 1; height: 5px; border-radius: 3px; -webkit-appearance: none; appearance: none; background: rgba(255,255,255,0.12); outline: none; padding: 0; border: none; cursor: pointer; min-height: auto; }
.radio-volume input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, rgba(var(--green-rgb),0.85), rgba(var(--blue-rgb),0.85)); cursor: pointer; border: 2px solid rgba(255,255,255,0.3); transition: transform var(--dur-fast) var(--ease-spring); box-shadow: var(--shadow-xs); }
.radio-volume input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.25); }
.radio-volume input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, rgba(var(--green-rgb),0.85), rgba(var(--blue-rgb),0.85)); cursor: pointer; border: 2px solid rgba(255,255,255,0.3); }

.radio-channel-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 640px) { .radio-channel-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .radio-channel-grid { grid-template-columns: 1fr 1fr 1fr; } }

.radio-channel-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 15px; background: rgba(255,255,255,0.03); cursor: pointer; user-select: none; transition: all var(--dur-fast) var(--ease-out); position: relative; overflow: hidden; min-height: 72px; touch-action: manipulation; }
.radio-channel-card::after { content:""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--green-rgb),0.05), transparent); opacity: 0; transition: opacity var(--dur-fast) ease; pointer-events: none; }
.radio-channel-card:hover { background: rgba(255,255,255,0.06); border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
.radio-channel-card:hover::after { opacity: 1; }
.radio-channel-card:active { transform: scale(0.98); }
.radio-channel-card.active { outline: 2px solid rgba(var(--green-rgb),0.45); background: rgba(var(--green-rgb),0.07); box-shadow: var(--glow-green); }
.radio-channel-card.active::after { opacity: 1; }
.radio-channel-card .channel-name { font-weight: 700; font-family: var(--display); font-size: var(--fs-label); margin-bottom: 4px; letter-spacing: 0.02em; }
.radio-channel-card .channel-desc { color: var(--muted); font-family: var(--mono); font-size: var(--fs-micro); line-height: 1.4; }
.radio-channel-card .channel-lang { display: inline-block; margin-top: 7px; padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(var(--green-rgb),0.09); border: 1px solid rgba(var(--green-rgb),0.18); color: rgba(var(--green-rgb),0.9); font-family: var(--mono); font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.05em; }

/* ── Radio Category Filter ─────────────────────────────────── */
.radio-category-filter {
  display: flex;
  gap: 8px;
  padding: 12px 0 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.radio-category-filter::-webkit-scrollbar { display: none; }

.radio-cat-btn {
  flex-shrink: 0;
  padding: 8px 18px;
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  border-radius: var(--radius-pill);
  background: rgba(var(--gold-rgb), 0.06);
  color: var(--muted);
  font-size: var(--fs-meta);
  font-family: var(--font-ui);
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.radio-cat-btn:hover {
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--text);
}
.radio-cat-btn.active {
  background: rgba(var(--gold-rgb), 0.18);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 600;
}

/* ── Station Count ─────────────────────────────────────────── */
.radio-station-count {
  font-size: var(--fs-meta);
  color: var(--muted);
  padding: 4px 0 8px;
  font-family: var(--mono);
}

/* ── Channel Meta Row (lang + category badge) ──────────────── */
.channel-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.channel-cat-badge {
  font-size: var(--fs-micro);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: rgba(var(--green-rgb), 0.12);
  color: var(--green);
  font-family: var(--mono);
}

/* ── Radio Management Toolbar ──────────────────────────────── */
.radio-manage-toolbar {
  display: flex;
  gap: 8px;
  padding: 8px 0;
  flex-wrap: wrap;
}
.radio-manage-btn {
  padding: 6px 14px;
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  border-radius: var(--radius-pill);
  background: rgba(var(--gold-rgb), 0.06);
  color: var(--muted);
  font-size: var(--fs-meta);
  font-family: var(--mono);
  cursor: pointer;
  transition: all 0.25s ease;
}
.radio-manage-btn:hover { background: rgba(var(--gold-rgb), 0.12); color: var(--fg); }
.radio-manage-btn.active { background: rgba(var(--green-rgb), 0.15); border-color: var(--green-islamic); color: var(--green-light); }
.radio-manage-btn.add-btn { border-color: rgba(var(--green-rgb), 0.3); color: var(--green-light); }
.radio-manage-btn.restore-btn { border-color: rgba(var(--gold-rgb), 0.3); color: var(--gold); }

/* ── Delete Button on Cards ────────────────────────────────── */
.radio-delete-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 80, 80, 0.3);
  border-radius: 50%;
  background: rgba(255, 80, 80, 0.12);
  color: #ff5050;
  font-size: var(--fs-label);
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 2;
}
html[dir="rtl"] .radio-delete-btn { right: auto; left: 6px; }
.radio-delete-btn:hover { background: rgba(255, 80, 80, 0.3); transform: scale(1.15); }

/* ── Custom Badge ──────────────────────────────────────────── */
.channel-custom-badge {
  font-size: var(--fs-micro);
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--gold);
  font-family: var(--mono);
}

/* ── Empty State ───────────────────────────────────────────── */
.radio-empty-state {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-body);
}

/* ── Load More Button ──────────────────────────────────────── */
.radio-load-more-btn {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 12px;
  border: 1px dashed rgba(var(--gold-rgb), 0.3);
  border-radius: var(--radius-lg);
  background: rgba(var(--gold-rgb), 0.06);
  color: var(--gold);
  font-family: var(--mono);
  font-size: var(--fs-label);
  cursor: pointer;
  transition: all 0.25s ease;
}
.radio-load-more-btn:hover {
  background: rgba(var(--gold-rgb), 0.12);
  border-color: var(--gold);
}


/* ── Add Station Modal ─────────────────────────────────────── */
.radio-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.radio-modal {
  background: linear-gradient(160deg, rgba(17,30,58,0.99), rgba(10,20,42,0.99));
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  width: 90%;
  max-width: 420px;
  box-shadow: var(--shadow-xl);
}
.radio-modal-title {
  font-family: var(--display);
  font-size: var(--fs-h2);
  color: var(--gold);
  margin: 0 0 20px;
}
.radio-modal-field {
  margin-bottom: 14px;
}
.radio-modal-field label {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--muted);
  margin-bottom: 4px;
}
.radio-modal-field input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(var(--gold-rgb), 0.2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs-body);
}
.radio-modal-field input:focus {
  outline: none;
  border-color: var(--gold);
}
.radio-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

/* ═══════════════════════════════════════════════════════════════
   ZAKAT — shares layout with general card          ← existing
   ═══════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════
   ZAKAT — shares layout with general card
   ═══════════════════════════════════════════════════════════════ */
/* Zakat result highlights */
.zakat-result { padding: 18px; border-radius: var(--radius); border: 1px solid rgba(var(--gold-rgb),0.22); background: linear-gradient(135deg, rgba(var(--gold-rgb),0.07), rgba(var(--green-rgb),0.05)); }


/* ── Zakat Hawl Checkbox — Custom Styled ───────────────────── */
#zakatHawlRow {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  background: rgba(var(--purple-rgb), 0.06);
  border: 1px solid rgba(var(--purple-rgb), 0.18);
  margin-bottom: 16px;
  cursor: pointer;
  transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
#zakatHawlRow:hover {
  background: rgba(var(--purple-rgb), 0.10);
  border-color: rgba(var(--purple-rgb), 0.28);
}

/* RTL: flip checkbox to right side */
html[dir="rtl"] #zakatHawlRow {
  flex-direction: row-reverse;
}

/* Hide native checkbox */
#zakatHawl {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* Custom checkbox box */
.zakat-hawl-check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 2px solid rgba(var(--purple-rgb), 0.4);
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: all 0.25s ease;
  position: relative;
}

/* Checkmark — hidden by default */
.zakat-hawl-check::after {
  content: '';
  width: 6px;
  height: 11px;
  border: solid transparent;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(0);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  margin-top: -2px;
}

/* Checked state — purple glow + visible checkmark */
#zakatHawl:checked ~ .zakat-hawl-check,
#zakatHawlRow.checked .zakat-hawl-check {
  background: rgba(var(--purple-rgb), 0.85);
  border-color: rgba(var(--purple-rgb), 0.9);
  box-shadow: 0 0 12px rgba(var(--purple-rgb), 0.35);
}

#zakatHawl:checked ~ .zakat-hawl-check::after,
#zakatHawlRow.checked .zakat-hawl-check::after {
  border-color: #fff;
  transform: rotate(45deg) scale(1);
}

/* Focus ring for accessibility */
#zakatHawl:focus-visible ~ .zakat-hawl-check {
  outline: 2.5px solid rgba(var(--purple-rgb), 0.7);
  outline-offset: 3px;
}

/* Hawl label styling */
.zakat-hawl-label {
  font-size: var(--fs-label);
  line-height: 1.6;
  cursor: pointer;
  flex: 1;
}
.zakat-hawl-title {
  color: rgba(var(--purple-rgb), 1);
  font-weight: 700;
  font-size: var(--fs-label);
}
.zakat-hawl-desc {
  color: var(--muted);
  display: block;
  margin-top: 4px;
  font-size: var(--fs-label);
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE
   ═══════════════════════════════════════════════════════════════ */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 10px; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1fr; } .about-dedication { grid-column: 1/-1; } }
.about-card { border: 1px solid var(--border); border-radius: var(--radius-lg); background: rgba(255,255,255,0.03); padding: 18px; box-shadow: var(--shadow-xs); transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.about-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-sm); }
.about-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.about-title { font-family: var(--display); font-size: var(--fs-h3); font-weight: 700; letter-spacing: 0.03em; }
.about-body { font-size: var(--fs-body); line-height: 1.8; color: var(--fg); }
.about-body p { margin: 0 0 10px; }
.about-list { margin: 0; padding-left: 18px; color: var(--fg); font-size: var(--fs-body); line-height: 1.8; }
.about-list li { margin: 6px 0; }
.about-lang { display: flex; justify-content: space-between; align-items: center; margin: 6px 0 8px; }
.about-lang-label { font-family: var(--mono); font-size: var(--fs-micro); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.09em; }
.about-lang-chip { font-family: var(--mono); font-size: var(--fs-label); padding: 5px 10px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.04); color: var(--fg); }
.about-ar { font-family: var(--arabic); font-size: var(--fs-arabic-body); line-height: 2.1; color: rgba(234,240,255,0.97); padding: 16px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(var(--gold-rgb),0.07), rgba(var(--green-rgb),0.06)); border: 1px solid rgba(var(--gold-rgb),0.18); }
.about-ar p { margin: 0 0 12px; }
.about-en { padding: 2px; }
.about-divider { height: 1px; margin: 14px 0; background: linear-gradient(90deg, transparent, rgba(var(--gold-rgb),0.22), transparent); }

/* ═══════════════════════════════════════════════════════════════
   QURAN ENHANCED (Bookmarks, WbW, Hifz, Tafsir)
   ═══════════════════════════════════════════════════════════════ */
/* Ayah actions */
.ayah-actions { position: absolute; top: 6px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity var(--dur-fast); z-index: 2; }
.ayah { position: relative; }
.ayah:hover .ayah-actions { opacity: 1; }
.ayah-action-btn { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 8px; padding: 4px 8px; font-size: var(--fs-label); cursor: pointer; transition: all var(--dur-fast); line-height: 1; color: var(--fg); min-height: 32px; min-width: 32px; display: flex; align-items: center; justify-content: center; }
.ayah-action-btn:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.2); transform: scale(1.1); }
.ayah-action-btn.bookmarked { background: rgba(var(--gold-rgb),0.16); border-color: rgba(var(--gold-rgb),0.32); }
.mushaf-page .ayah-actions { right: 6px; top: 4px; }
.mushaf-page .ayah-action-btn { background: rgba(0,0,0,0.06); border-color: rgba(0,0,0,0.12); color: rgba(28,36,48,0.8); }
.mushaf-page .ayah-action-btn:hover { background: rgba(0,0,0,0.12); }
.mushaf-page .ayah-action-btn.bookmarked { background: rgba(var(--gold-rgb),0.16); border-color: rgba(var(--gold-rgb),0.26); }

/* Word-by-Word */
.quran-word { cursor: default; transition: background var(--dur-fast), color var(--dur-fast); border-radius: 4px; padding: 0 2px; }
.wbw-active .quran-word { cursor: pointer; }
.wbw-active .quran-word:hover { background: rgba(var(--blue-rgb),0.15); outline: 1px solid rgba(var(--blue-rgb),0.3); }
.mushaf-page .wbw-active .quran-word:hover { background: rgba(var(--green-rgb),0.12); outline-color: rgba(var(--green-rgb),0.25); }

/* Word Tooltip */
.word-tooltip { position: fixed; z-index: 9999; background: rgba(12,22,46,0.97); backdrop-filter: blur(14px); border: 1px solid rgba(var(--blue-rgb),0.22); border-radius: var(--radius); padding: 12px 16px; min-width: 160px; max-width: 280px; box-shadow: 0 12px 40px rgba(0,0,0,0.55), var(--glow-blue); pointer-events: none; animation: tooltipFadeIn 0.2s ease; }
@keyframes tooltipFadeIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.word-tooltip-arabic { font-family: var(--arabic); font-size: 22px; text-align: center; color: var(--gold); margin-bottom: 6px; direction: rtl; }
.word-tooltip-transliteration { font-family: var(--mono); font-size: var(--fs-label); font-style: italic; color: rgba(var(--blue-rgb),0.9); text-align: center; margin-bottom: 4px; }
.word-tooltip-translation { font-size: var(--fs-body); color: var(--white-soft); text-align: center; line-height: 1.45; }

/* Hifz mode */
.hifz-active .quran-word { cursor: pointer; background: rgba(var(--purple-rgb),0.15); color: transparent !important; border-radius: 4px; padding: 0 3px; user-select: none; transition: all 0.25s ease; border-bottom: 2px dashed rgba(var(--purple-rgb),0.45); }
.hifz-active .quran-word:hover { background: rgba(var(--purple-rgb),0.26); }
.hifz-active .quran-word.revealed { color: inherit !important; background: rgba(var(--green-rgb),0.13); border-bottom-color: rgba(var(--green-rgb),0.3); }
.mushaf-page .hifz-active .quran-word { background: rgba(100,80,160,0.13); border-bottom-color: rgba(100,80,160,0.32); }
.mushaf-page .hifz-active .quran-word.revealed { background: rgba(var(--green-rgb),0.11); border-bottom-color: rgba(var(--green-rgb),0.26); }
.hifz-active .ayah-end { color: inherit !important; }

/* Tafsir Modal */
.tafsir-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tafsir-modal.hidden { display: none !important; }
.tafsir-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(5px); }
.tafsir-modal-content { position: relative; z-index: 1; background: linear-gradient(160deg, rgba(17,30,58,0.99), rgba(10,20,42,0.99)); border: 1px solid rgba(var(--blue-rgb),0.16); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl), var(--glow-blue); max-width: 700px; width: 100%; max-height: 82vh; display: flex; flex-direction: column; overflow: hidden; }
.tafsir-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.tafsir-modal-body { padding: 20px 22px; overflow-y: auto; font-size: var(--fs-body); line-height: 1.85; color: var(--fg); }
.tafsir-modal-body .tafsir-arabic { font-family: var(--arabic); font-size: var(--fs-arabic-h2); line-height: 2.1; text-align: center; padding: 16px; border-radius: var(--radius); background: linear-gradient(135deg, rgba(var(--gold-rgb),0.07), rgba(var(--green-rgb),0.06)); border: 1px solid rgba(var(--gold-rgb),0.16); direction: rtl; margin-bottom: 16px; }
.tafsir-modal-body .tafsir-text { font-size: var(--fs-body); line-height: 1.95; }
.tafsir-modal-body .tafsir-text p { margin: 0 0 12px; }

/* Bookmarks */
.bookmarks-list { max-height: 400px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.bookmark-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius); background: rgba(255,255,255,0.03); cursor: pointer; transition: all var(--dur-fast); }
.bookmark-item:hover { background: rgba(255,255,255,0.06); border-color: rgba(var(--gold-rgb),0.22); }
.bookmark-item .bm-icon { font-size: 20px; flex-shrink: 0; }
.bookmark-item .bm-content { flex: 1; min-width: 0; }
.bookmark-item .bm-ref { font-family: var(--display); font-size: var(--fs-body); font-weight: 600; margin-bottom: 3px; }
.bookmark-item .bm-arabic { font-family: var(--arabic); font-size: var(--fs-arabic-body); line-height: 1.9; direction: rtl; text-align: right; color: rgba(234,240,255,0.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bookmark-item .bm-note { font-size: var(--fs-label); color: var(--muted); font-style: italic; margin-top: 4px; font-family: var(--mono); }
.bookmark-item .bm-actions { display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
.bookmark-item .bm-action-btn { background: none; border: 1px solid rgba(255,255,255,0.10); border-radius: 6px; padding: 4px 8px; font-size: var(--fs-meta); cursor: pointer; color: var(--muted); transition: all var(--dur-fast); min-height: 32px; display: flex; align-items: center; }
.bookmark-item .bm-action-btn:hover { background: rgba(255,255,255,0.08); color: var(--fg); }

/* Repeat indicator */
.repeat-indicator { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); background: rgba(var(--purple-rgb),0.11); border: 1px solid rgba(var(--purple-rgb),0.22); font-family: var(--mono); font-size: var(--fs-micro); color: rgba(var(--purple-rgb),0.9); }

/* ═══════════════════════════════════════════════════════════════
   CONTACT FORM
   ═══════════════════════════════════════════════════════════════ */
.contact-form textarea:focus, .contact-form input:focus, .contact-form select:focus {
  outline: none;
  border-color: rgba(var(--green-rgb),0.42);
  box-shadow: 0 0 0 3px rgba(var(--green-rgb),0.10);
}
.contact-form textarea {
  width: 100%; padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.7;
  resize: vertical;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.contact-form textarea:hover { border-color: rgba(var(--gold-rgb),0.22); }

/* Star Rating */
.rating-stars { display: flex; gap: 6px; margin-top: 4px; }
.star-btn { background: none; border: 1px solid rgba(255,255,255,0.10); border-radius: 8px; font-size: 26px; cursor: pointer; padding: 5px 9px; color: var(--muted); transition: all var(--dur-fast); line-height: 1; min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; touch-action: manipulation; }
.star-btn:hover { color: rgba(var(--gold-rgb),0.85); border-color: rgba(var(--gold-rgb),0.3); transform: scale(1.18); }
.star-btn.active { color: var(--gold); border-color: rgba(var(--gold-rgb),0.4); background: rgba(var(--gold-rgb),0.08); text-shadow: 0 0 12px rgba(var(--gold-rgb),0.35); }
@media (max-width: 580px) { .rating-stars { justify-content: center; } .star-btn { font-size: 30px; padding: 6px 10px; } }

/* Send button states */
#contactSendBtn.sending { opacity: 0.7; pointer-events: none; }
#contactSendBtn .btn-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.25); border-top-color: white; border-radius: 50%; animation: btnSpin 0.65s linear infinite; margin-right: 6px; vertical-align: middle; }
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* Contact links */
.contact-link { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: rgba(255,255,255,0.03); color: var(--fg); text-decoration: none; font-family: var(--mono); font-size: var(--fs-label); transition: all var(--dur-fast); min-height: 44px; }
.contact-link:hover { background: rgba(255,255,255,0.06); border-color: rgba(var(--green-rgb),0.3); color: rgba(var(--green-rgb),1); }
.contact-link-icon { font-size: 18px; }

   RTL SUPPORT
   ═══════════════════════════════════════════════════════════════ */
html[dir="rtl"] { direction: rtl; text-align: right; }
html[dir="rtl"] .top-nav, html[dir="rtl"] .tab-bar { direction: rtl; }
html[dir="rtl"] .tab-bar { flex-direction: row-reverse; }
html[dir="rtl"] .time-card { flex-direction: row-reverse; text-align: right; }
html[dir="rtl"] .cal-grid { direction: rtl; }
html[dir="rtl"] .cal-side, html[dir="rtl"] .card { text-align: right; }
html[dir="rtl"] select, html[dir="rtl"] input, html[dir="rtl"] button { text-align: inherit; }
html[dir="rtl"] .tracker-grid { direction: rtl; }
.quran-ayah-text { direction: rtl !important; text-align: right !important; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE FIRST
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 580px) {
  .app-header { padding: 10px 14px calc(10px + var(--safe-top)); gap: 8px; }
  .brand-subtitle { display: none; }
  .top-nav { gap: 4px; }
  .btn-tab { padding: 7px 10px; font-size: var(--fs-micro); min-height: 36px; }
  .container { margin: 14px auto 36px; padding: 0 12px; gap: 14px; }
  .card { padding: 16px; border-radius: var(--radius); }
  .h1 { font-size: var(--fs-h2); }
  .h2 { font-size: var(--fs-body); }
  .mushaf-book { height: calc(65vh - 60px); }
  .day { min-height: 58px; padding: 6px; border-radius: 10px; }
  .greg { font-size: var(--fs-meta); }
  .hij { font-size: var(--fs-micro); }
  .radio-now-playing { flex-direction: column; text-align: center; }
  .tafsir-modal { padding: 10px; }
  .tafsir-modal-content { max-height: 92vh; }
  .tafsir-modal-body { padding: 14px 16px; }
  .word-tooltip { max-width: 220px; }
  .ayah-actions { opacity: 0.7; }
  .tracker-day { min-height: 40px; border-radius: 7px; }
  .tracker-day .day-num { font-size: var(--fs-micro); }
  .tracker-heat-cell { width: 8px; height: 8px; }
  .tracker-prayer-label { width: 44px; font-size: var(--fs-micro); }
}

/* Large desktop enhancement */
@media (min-width: 1200px) {
  .container { padding: 0 28px; }
  .card { padding: 26px; }
  .h1 { font-size: var(--fs-h1); }
  .h2 { font-size: var(--fs-h2); }
}

/* ═══════════════════════════════════════════════════════════════
   iOS-SPECIFIC FIXES
   ═══════════════════════════════════════════════════════════════ */

/* Prevent overscroll bounce showing white */
html { background: var(--navy-deep); }

/* Fix select element arrows on iOS */
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(234,240,255,0.4)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

/* Momentum scrolling for scroll containers */
.reader, .bookmarks-list, .mushaf-inner, .tafsir-modal-body {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prevent text selection flicker on button taps */
.btn, .juz-tile, .time-card, .city-card, .tracker-prayer-btn,
.tracker-day, .day, .radio-channel-card {
  -webkit-user-select: none;
  user-select: none;
}

/* ═══════════════════════════════════════════════════════════════
   EXTRACTED INLINE STYLES → NAMED CLASSES
   Replaces one-off style="" attributes scattered through the HTML.
   ═══════════════════════════════════════════════════════════════ */

/* Tracker stat cards */
.tracker-stat-card {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
}
.tracker-stat-value {
  font-family: var(--mono);
  font-size: var(--fs-h1);
  font-weight: 700;
}
.tracker-stat-value--green  { color: rgba(var(--green-rgb), 1); }
.tracker-stat-value--gold   { color: rgba(var(--gold-rgb),  1); }
.tracker-stat-value--blue   { color: rgba(var(--blue-rgb),  1); }
.tracker-stat-value--purple { color: rgba(var(--purple-rgb),1); }

/* Ramadan card time values */
.ramadan-time-value {
  font-family: var(--mono);
  font-size: var(--fs-h1);
  font-weight: 700;
}
.ramadan-time-value--imsak  { color: rgba(var(--purple-rgb), 1); }
.ramadan-time-value--iftar  { color: rgba(var(--green-rgb),  1); }
.ramadan-countdown {
  font-family: var(--mono);
  font-size: var(--fs-h3);
  font-weight: 600;
}

/* Zakat display values */
.zakat-nisab-value {
  font-family: var(--mono);
  font-size: var(--fs-h2);
  font-weight: 700;
}
.zakat-nisab-value--gold   { color: rgba(var(--gold-rgb),  1); }
.zakat-nisab-value--silver { color: rgba(var(--blue-rgb),  1); }
.zakat-due-amount {
  font-family: var(--mono);
  font-size: var(--fs-display-1);
  font-weight: 800;
  color: rgba(var(--green-rgb), 1);
}

/* Contact form */
.contact-textarea {
  width: 100%;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--fg);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.7;
  resize: vertical;
}
.contact-textarea:focus {
  outline: 2.5px solid rgba(var(--blue-rgb), 0.7);
  outline-offset: 2px;
}

/* Contact success state */
.contact-success {
  margin-top: 14px;
  padding: 16px;
  border-radius: var(--radius);
  background: rgba(var(--green-rgb), 0.08);
  border: 1px solid rgba(var(--green-rgb), 0.2);
  text-align: center;
}
.contact-success-icon  { font-size: 28px; margin-bottom: 6px; }
.contact-success-title { font-size: var(--fs-body); font-weight: 600; color: rgba(var(--green-rgb), 1); }

/* EmailJS disclosure notice */
.emailjs-notice {
  margin-top: 14px;
  text-align: center;
  line-height: 1.7;
}
.emailjs-notice a { color: rgba(var(--gold-rgb), 0.9); }

/* Tracker month title */
.tracker-month-name {
  font-size: var(--fs-h2);
  font-weight: 700;
}
/* ═══════════════════════════════════════════════════════════════
   ISTIKHĀRA MODULE
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero Card ─────────────────────────────────────────────── */

.istikhara-hero-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  border-color: rgba(var(--gold-rgb), 0.18);
}

.istikhara-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 70% 20%,
    rgba(var(--gold-rgb), 0.07) 0%,
    transparent 60%),
    radial-gradient(ellipse at 20% 80%,
    rgba(var(--green-rgb), 0.08) 0%,
    transparent 55%);
}

.istikhara-geo-pattern {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      60deg,
      transparent,
      transparent 38px,
      rgba(var(--gold-rgb), 0.03) 38px,
      rgba(var(--gold-rgb), 0.03) 39px
    ),
    repeating-linear-gradient(
      -60deg,
      transparent,
      transparent 38px,
      rgba(var(--gold-rgb), 0.03) 38px,
      rgba(var(--gold-rgb), 0.03) 39px
    );
}

.istikhara-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 28px 32px;
  gap: 12px;
}

.istikhara-hero-icon {
  font-size: 2.8rem;
  filter: drop-shadow(0 0 18px rgba(var(--gold-rgb), 0.35));
  animation: istikhara-float 6s ease-in-out infinite;
}

@keyframes istikhara-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.istikhara-hero-title {
  font-family: var(--display);
  font-size: var(--fs-display-1);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--gold-light);
  margin: 0;
  text-shadow: 0 0 40px rgba(var(--gold-rgb), 0.3);
}

.istikhara-hero-subtitle {
  font-size: var(--fs-h3);
  color: var(--white-soft);
  font-style: italic;
  margin: 0;
  opacity: 0.88;
}

.istikhara-hero-body {
  font-size: var(--fs-body);
  color: var(--muted);
  line-height: 1.7;
  max-width: 520px;
  margin: 4px 0;
}

.istikhara-hero-hadith {
  margin-top: 4px;
}

.istikhara-hadith-ref {
  display: inline-block;
  font-size: var(--fs-micro);
  color: var(--gold);
  border: 1px solid rgba(var(--gold-rgb), 0.25);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
  letter-spacing: 0.02em;
}

.istikhara-privacy-pill {
  font-size: var(--fs-micro);
  color: var(--muted);
  background: rgba(var(--green-rgb), 0.08);
  border: 1px solid rgba(var(--green-rgb), 0.15);
  border-radius: var(--radius-pill);
  padding: 5px 14px;
  margin-top: 6px;
}

/* ── Steps ─────────────────────────────────────────────────── */

.istikhara-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}

.istikhara-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid transparent;
  transition: background var(--dur-normal) ease, border-color var(--dur-normal) ease;
}

.istikhara-step:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(var(--gold-rgb), 0.1);
}

.istikhara-step-num {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(var(--green-rgb), 0.25), rgba(var(--gold-rgb), 0.12));
  border: 1px solid rgba(var(--gold-rgb), 0.22);
  color: var(--gold-light);
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.12);
}

.istikhara-step-body {
  flex: 1;
  min-width: 0;
}

.istikhara-step-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 3px;
}

.istikhara-step-desc {
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.55;
}

.istikhara-note {
  font-size: var(--fs-meta);
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* ── Duʿā Card ─────────────────────────────────────────────── */

.istikhara-dua-card {
  border-color: rgba(var(--gold-rgb), 0.12);
}

.dua-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 20px;
}

.dua-tab-btn {
  flex: 1;
  padding: 8px 10px;
  border-radius: var(--radius-xs);
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-meta);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) ease;
  font-family: var(--sans);
}

.dua-tab-btn.active {
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--gold-light);
  border: 1px solid rgba(var(--gold-rgb), 0.2);
}

.dua-tab-btn:hover:not(.active) {
  color: var(--fg);
  background: rgba(255, 255, 255, 0.06);
}

.dua-frame {
  position: relative;
  background: linear-gradient(160deg,
    rgba(var(--gold-rgb), 0.04) 0%,
    rgba(17, 30, 54, 0.6) 50%,
    rgba(var(--green-rgb), 0.04) 100%);
  border: 1px solid rgba(var(--gold-rgb), 0.16);
  border-radius: var(--radius);
  padding: 28px 24px;
  margin-bottom: 16px;
  min-height: 140px;
}

.dua-ornament-top,
.dua-ornament-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(var(--gold-rgb), 0.3);
  font-size: var(--fs-h2);
  line-height: 1;
  pointer-events: none;
}

.dua-ornament-top { top: 8px; }
.dua-ornament-bottom { bottom: 8px; }

.dua-text {
  display: block;
  line-height: 1.95;
  color: var(--fg);
  transition: opacity var(--dur-normal) ease;
}

.dua-arabic {
  font-family: var(--arabic);
  font-size: var(--fs-arabic-h2);
  text-align: center;
  letter-spacing: 0.01em;
  color: var(--white-soft);
}

.dua-translit {
  font-size: var(--fs-body);
  font-style: italic;
  text-align: center;
  color: rgba(234, 240, 255, 0.82);
  line-height: 2;
}

.dua-translation {
  font-size: var(--fs-body);
  line-height: 1.85;
  color: var(--muted);
  text-align: center;
}

.dua-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ── Journal Form ──────────────────────────────────────────── */

.istikhara-form {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

.istikhara-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 8px;
}

.istikhara-form-title {
  font-family: var(--display);
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.03em;
}

.istikhara-form-status {
  font-size: var(--fs-meta);
  font-weight: 500;
}

.istikhara-field-group {
  margin-bottom: 14px;
}

.istikhara-label {
  display: block;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}

.istikhara-required { color: var(--danger); }
.istikhara-optional { color: var(--muted); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--fs-micro); }

.istikhara-input,
.istikhara-select,
.istikhara-textarea {
  width: 100%;
  box-sizing: border-box;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
  outline: none;
  -webkit-appearance: none;
}

.istikhara-input:focus,
.istikhara-select:focus,
.istikhara-textarea:focus {
  border-color: rgba(var(--gold-rgb), 0.35);
  background: var(--input-hover);
  box-shadow: 0 0 0 2px rgba(var(--gold-rgb), 0.08);
}

.istikhara-input::placeholder,
.istikhara-textarea::placeholder { color: rgba(234, 240, 255, 0.25); }

.istikhara-textarea { resize: vertical; min-height: 72px; }

.istikhara-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c5964a' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.istikhara-select option { background: var(--navy-card); color: var(--fg); }

.istikhara-row {
  display: flex;
  gap: 12px;
}

.istikhara-field-half { flex: 1; min-width: 0; }

.istikhara-check-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--fg);
  padding: 10px 14px;
  background: var(--input-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.istikhara-check-label:hover {
  border-color: rgba(var(--gold-rgb), 0.25);
  background: var(--input-hover);
}

.istikhara-checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--green-islamic);
  cursor: pointer;
  flex-shrink: 0;
}

.istikhara-form-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.istikhara-save-btn {
  flex: 1;
  min-width: 120px;
  padding: 11px 20px;
  font-weight: 600;
  font-size: var(--fs-body);
}

.istikhara-clear-btn {
  padding: 11px 16px;
  font-size: var(--fs-label);
  color: var(--muted);
}

/* ── Journal List Divider ──────────────────────────────────── */

.istikhara-divider {
  position: relative;
  text-align: center;
  margin: 8px 0 12px;
}

.istikhara-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
}

.istikhara-divider span {
  position: relative;
  background: var(--navy-card);
  padding: 0 12px;
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.istikhara-privacy-note {
  font-size: var(--fs-micro);
  color: rgba(234, 240, 255, 0.35);
  text-align: center;
  margin-bottom: 16px;
}

/* ── Entry Cards ───────────────────────────────────────────── */

.istikhara-entry-card {
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 10px;
  transition: border-color var(--dur-normal) ease, box-shadow var(--dur-normal) ease;
}

.istikhara-entry-card:hover {
  border-color: rgba(var(--gold-rgb), 0.14);
  box-shadow: var(--shadow-sm);
}

.entry-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.entry-card-title {
  font-weight: 600;
  font-size: var(--fs-body);
  color: var(--fg);
  line-height: 1.3;
  flex: 1;
}

.entry-status-badge {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

.status-seeking {
  background: rgba(var(--blue-rgb), 0.12);
  color: var(--blue-soft);
  border: 1px solid rgba(var(--blue-rgb), 0.2);
}

.status-decided {
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--gold-light);
  border: 1px solid rgba(var(--gold-rgb), 0.2);
}

.status-complete {
  background: rgba(var(--green-rgb), 0.12);
  color: var(--green-light);
  border: 1px solid rgba(var(--green-rgb), 0.2);
}

.entry-card-meta {
  display: flex;
  gap: 14px;
  font-size: var(--fs-micro);
  color: var(--muted);
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.entry-meta-prayed { color: var(--green-light); }
.entry-meta-notprayed { color: rgba(234, 240, 255, 0.3); }

.entry-card-preview {
  font-size: var(--fs-meta);
  color: rgba(234, 240, 255, 0.6);
  line-height: 1.5;
  margin-bottom: 6px;
}

.entry-card-outcome {
  font-size: var(--fs-meta);
  color: var(--muted);
  margin-bottom: 8px;
}

.outcome-label {
  font-weight: 600;
  color: var(--gold);
  font-size: var(--fs-micro);
}

.entry-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.btn-danger-sm {
  color: var(--rose);
  border-color: rgba(251, 113, 133, 0.2);
}

.btn-danger-sm:hover {
  background: rgba(251, 113, 133, 0.08);
  border-color: rgba(251, 113, 133, 0.35);
}

/* ── Empty State ───────────────────────────────────────────── */

.istikhara-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
  gap: 10px;
}

.istikhara-empty-icon {
  font-size: 2.4rem;
  opacity: 0.4;
}

.istikhara-empty-title {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--muted);
}

.istikhara-empty-sub {
  font-size: var(--fs-meta);
  color: rgba(234, 240, 255, 0.35);
  max-width: 320px;
  line-height: 1.6;
}

/* ── Responsive ────────────────────────────────────────────── */

@media (max-width: 480px) {
  .istikhara-hero-content { padding: 32px 20px 28px; }
  .istikhara-row { flex-direction: column; }
  .dua-arabic { font-size: var(--fs-arabic-body); }
  .istikhara-form { padding: 16px; }
}


/* ── Prayer / Clock ─────────────────────────────────────────── */
.clock-date-row       { display: flex; align-items: center; gap: 7px; }
.row-gap-sm           { gap: 6px; }
.tz-hint              { margin-top: 4px; }
.row-actions--mt      { margin-top: 10px; }
.hint--mb             { margin-bottom: 12px; }
.hint--mt             { margin-top: 12px; }
.hint--mt-sm          { margin-top: 8px; }

/* ── Ramadan Card ───────────────────────────────────────────── */
.ramadan-grid                    { grid-template-columns: 1fr 1fr; }
.ramadan-time-card               { flex-direction: column; align-items: stretch; gap: 8px; }
.ramadan-time-card--imsak        { border-color: rgba(167,139,250,0.2); background: rgba(167,139,250,0.04); }
.ramadan-time-card--iftar        { border-color: rgba(24,117,96,0.25);  background: rgba(24,117,96,0.04); }
.ramadan-row                     { display: flex; justify-content: space-between; align-items: center; }
.ramadan-label                   { font-size: var(--fs-body); font-weight: 600; }
.ramadan-label--imsak            { color: rgba(167,139,250,0.9); }
.ramadan-label--iftar            { color: rgba(24,117,96,0.9); }
.ramadan-note                    { margin-top: 2px; }
.ramadan-divider                 { margin: 4px 0; }
.ramadan-status--imsak           { color: rgba(167,139,250,0.7); }
.ramadan-status--iftar           { color: rgba(24,117,96,0.7); }
.ramadan-hint                    { margin-top: 12px; }

/* ── Tracker ────────────────────────────────────────────────── */
.tracker-month-title             { text-align: center; margin-bottom: 16px; }
.tracker-stats-grid              { grid-template-columns: repeat(4,1fr); margin-bottom: 16px; }
.tracker-legend                  { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tracker-legend-item             { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-micro); }
.tracker-legend-dot              { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tracker-legend-dot--full        { background: rgba(24,117,96,0.9); }
.tracker-legend-dot--most        { background: rgba(24,117,96,0.5); }
.tracker-legend-dot--some        { background: rgba(197,150,64,0.6); }
.tracker-legend-dot--none        { background: rgba(251,113,133,0.5); }
.tracker-legend-dot--empty       { background: rgba(255,255,255,0.1); }
.tracker-legend-ontime           { color: rgba(24,117,96,1); }
.tracker-legend-late             { color: rgba(197,150,64,1); }
.tracker-legend-missed           { color: rgba(251,113,133,1); }
.heatmap-legend                  { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin-top: 10px; }
.heatmap-legend-swatch           { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.heatmap-legend-swatch--0        { background: rgba(255,255,255,0.06); }
.heatmap-legend-swatch--1        { background: rgba(24,117,96,0.3); }
.heatmap-legend-swatch--2        { background: rgba(24,117,96,0.6); }
.heatmap-legend-swatch--3        { background: rgba(24,117,96,0.9); }
.btn-danger-soft                 { color: var(--danger); border-color: rgba(251,113,133,0.3); }

/* ── Quran / Shared small buttons ───────────────────────────── */
.hifz-controls                   { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn-sm-text                     { font-size: var(--fs-meta); padding: 6px 12px; }
.btn-danger-text                 { color: var(--danger); }
.bookmarks-empty                 { text-align: center; padding: 20px; }

/* ── Calendar ───────────────────────────────────────────────── */
.jaafari-options-row             { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.jaafari-label                   { font-size: var(--fs-body); font-weight: 600; }
.jaafari-select                  { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); color: var(--fg); font-size: var(--fs-label); cursor: pointer; }
.jaafari-status                  { font-size: var(--fs-label); }
.btn-muted                       { background: var(--muted); }

/* ── Zakat ──────────────────────────────────────────────────── */
.zakat-privacy-note              { margin-bottom: 16px; padding: 12px; border-radius: var(--radius-sm); background: rgba(24,117,96,0.06); border: 1px solid rgba(24,117,96,0.15); }
.zakat-nisab-card                { margin-bottom: 16px; }
.zakat-nisab-grid                { grid-template-columns: 1fr 1fr; margin-top: 8px; }
.zakat-nisab-values              { grid-template-columns: 1fr 1fr; margin-top: 12px; }
.zakat-nisab-card-item           { flex-direction: column; align-items: center; gap: 4px; }
.link-gold                       { color: rgba(197,150,64,1); text-decoration: underline; }
.link-silver                     { color: rgba(125,211,252,1); text-decoration: underline; }
.grid-flush                      { margin-top: 0; }
.zakat-results                   { margin-top: 0; }
.zakat-results-rows              { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.zakat-results-row               { display: flex; justify-content: space-between; }
.zakat-row-bold                  { font-weight: 600; }
.zakat-divider                   { margin: 4px 0; }
.zakat-mono                      { font-family: var(--mono); font-weight: 600; }
.zakat-mono--danger              { color: var(--danger); }
.zakat-mono--large               { font-weight: 700; font-size: var(--fs-h3); }
.zakat-status-message            { text-align: center; padding: 16px; border-radius: var(--radius-sm); margin-bottom: 12px; }
.zakat-due-row                   { display: flex; justify-content: center; align-items: baseline; gap: 8px; }
.zakat-due-label                 { font-size: var(--fs-body); color: var(--muted); }

/* ── Privacy ────────────────────────────────────────────────── */
.privacy-promise                 { padding: 16px; border-radius: var(--radius); background: rgba(24,117,96,0.06); border: 1px solid rgba(24,117,96,0.15); margin-bottom: 16px; }
.privacy-promise-title           { font-size: var(--fs-h3); font-weight: 700; color: rgba(24,117,96,1); margin-bottom: 8px; }
.privacy-promise-body            { font-size: var(--fs-body); line-height: 1.7; color: var(--text); }
.privacy-grid                    { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.privacy-item                    { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,0.03); }
.privacy-item-icon               { font-size: 20px; flex-shrink: 0; }
.privacy-item-title              { font-size: var(--fs-body); font-weight: 600; }
.privacy-item-meta               { font-size: var(--fs-micro); }
.privacy-inventory               { grid-template-columns: 1fr; }
.privacy-total-row               { display: flex; justify-content: space-between; align-items: center; padding: 14px; border-radius: var(--radius); background: rgba(255,255,255,0.03); border: 1px solid var(--line); }
.privacy-total-label             { font-size: var(--fs-body); font-weight: 600; }
.privacy-total-size              { font-family: var(--mono); font-size: var(--fs-h1); font-weight: 700; color: rgba(125,211,252,1); }
.privacy-backup-actions          { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.privacy-wipe-section            { text-align: center; padding: 20px 0; }
.privacy-wipe-desc               { font-size: var(--fs-body); color: var(--muted); margin-bottom: 12px; }
.btn-wipe                        { background: rgba(251,113,133,0.1); border-color: rgba(251,113,133,0.3); color: var(--danger); font-size: var(--fs-h3); padding: 14px 28px; border-radius: var(--radius); }

/* ── pcal (Prayer Calendar) — from previous session ────────── */
.pcal-card        { max-width: 900px; margin: 0 auto; }
.pcal-header      { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; }
.pcal-controls    { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-bottom: 20px; }
.pcal-field-city  { flex: 1; min-width: 180px; }
.pcal-field-month { min-width: 120px; }
.pcal-field-year  { min-width: 90px; }
.pcal-btn         { padding: 9px 20px; font-size: var(--fs-body); white-space: nowrap; align-self: flex-end; }

/* ═══════════════════════════════════════════════════════════════
   HOME SCREEN — compact layout overrides
   ═══════════════════════════════════════════════════════════════ */

/* ── Kill every divider (line + any pseudo-element) in home ── */
#homeScreenContent .divider,
#homeScreenContent .divider *,
#homePrayerCard .divider {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#homeScreenContent .divider::before,
#homeScreenContent .divider::after,
#homePrayerCard .divider::before,
#homePrayerCard .divider::after {
  display: none !important;
  content: none !important;
}

/* ── Compact cards ── */
#homeScreenContent .card {
  padding: 12px 14px !important;
  margin-bottom: 8px !important;
}

/* ── Bigger bolder section titles ── */
#homeScreenContent .h2,
#homeScreenContent h2,
#homeScreenContent h3 {
  font-size: var(--fs-h2);
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  margin: 0 0 1px !important;
}

/* ── Tighter card-head ── */
#homeScreenContent .card-head {
  margin-bottom: 8px !important;
  padding-bottom: 0 !important;
}
#homeScreenContent .card-head .meta {
  font-size: var(--fs-micro);
  margin-top: 1px !important;
}

/* ── Compact next-prayer strip ── */
#homeScreenContent .next-prayer,
#homePrayerCard .next-prayer {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 7px 10px !important;
  margin: 6px 0 0 !important;
  gap: 0 !important;
  min-height: 0 !important;
  background: rgba(255,255,255,0.04) !important;
  border-radius: 8px !important;
}
#homeScreenContent .next-prayer::before,
#homeScreenContent .next-prayer::after,
#homePrayerCard .next-prayer::before,
#homePrayerCard .next-prayer::after {
  display: none !important;
  content: none !important;
}
#homeScreenContent .next-prayer .label,
#homePrayerCard .next-prayer .label {
  font-size: var(--fs-micro);
  line-height: 1.2 !important;
  opacity: 0.6 !important;
  margin: 0 0 1px !important;
  padding: 0 !important;
}
#homeScreenContent .next-prayer .value,
#homePrayerCard .next-prayer .value {
  font-size: var(--fs-h3);
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Prayer times grid ── */
#homeScreenContent .home-times-grid {
  gap: 6px !important;
  margin-bottom: 0 !important;
}
#homeScreenContent .home-time-card { padding: 7px 10px !important; }
#homeScreenContent .home-time-card .time-name { font-size: var(--fs-micro); }
#homeScreenContent .home-time-card .time-value {
  font-size: var(--fs-body);
  font-weight: 700 !important;
}

/* ── Prayer action buttons ── */
#homeScreenContent .home-prayer-actions {
  margin-top: 8px !important;
  gap: 6px !important;
}

/* ── Tools ── */
#homeScreenContent .home-tools-grid { gap: 6px !important; }
#homeScreenContent .home-tool-btn { padding: 8px 10px !important; }
#homeScreenContent .home-links-row { gap: 6px !important; margin-top: 4px !important; }
#homeScreenContent .home-link-pill { padding: 5px 12px !important; font-size: var(--fs-meta); }

/* ── Quran widget ── */
#homeQuranDailyCard .card-head { margin-bottom: 6px !important; }
/* --qd-title/body/meta removed — use --fs-h2/body/label instead */

.home-quran-strip-title-v3f{
font-size: var(--fs-h2);
}

.home-qd-progress-label-v3f{
font-size: var(--fs-body);
}

.home-qd-pos-v3f{
font-size: var(--fs-label);
}
.home-quran-strip-v3f .home-qd-pos-v3f{
font-size: var(--fs-label);
}

.home-qd-progress-pct-v3f{
font-size: var(--fs-h3);
}

/* ══════════════════════════════════════════════════════════════════
   HOME PRAYER HEADER — v4f (4-cell grid)
   Direction is controlled by the container's dir attribute so the
   physical order automatically mirrors in RTL while each cell keeps
   the same internal rules. Time digits stay LTR for readability.
   ══════════════════════════════════════════════════════════════════ */

.home-prayer-head-v4f {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 10px;
  border: 1px solid rgba(197, 150, 64, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
  /* ❌ direction: ltr;  ← REMOVED. Let the grid inherit document direction. */
}

.home-hcell-v4f {
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  min-width: 0;
  /* Logical borders — automatically swap sides in RTL */
  border-inline-end: 1px solid rgba(197, 150, 64, 0.12);
  border-block-end:  1px solid rgba(197, 150, 64, 0.12);
}
.home-hcell-v4f:nth-child(2n)        { border-inline-end: none; }
.home-hcell-v4f:nth-last-child(-n+2) { border-block-end:  none; }

.home-hcell-label-v4f {
  font-family: var(--mono, inherit);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(232, 237, 245, 0.48);
  text-transform: uppercase;
  margin-bottom: 6px;
  /* The label sits at the start edge of its cell — flips automatically */
  align-self: flex-start;
}

.home-hcell-row-v4f {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

/* Content blocks always begin at the inline-start edge in their language */
.home-hcell-data-v4f,
.home-hcell-date-main-v4f,
.home-hcell-time-data-v4f,
.home-hcell-location-copy-v4f,
.home-hcell-weather-copy-v4f {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* logical — start = left in LTR, right in RTL */
  text-align: start;         /* logical replacement for `left` */
}

/* Rows that pair an icon with a piece of text */
.home-hcell-location-data-v4f,
.home-hcell-weather-data-v4f {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.home-hcell-time-row-v4f {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.home-hcell-action-v4f,
.home-hcell-toggle-v4f {
  flex-shrink: 0;
}

/* ── Action buttons (refresh, forecast, adhan, calendar) ─────── */
.home-hcell-action-v4f {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 110, 86, 0.14);
  border: 1px solid rgba(50, 209, 161, 0.42);
  border-radius: 8px;
  color: #32d1a1;
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.home-hcell-action-v4f:hover  { background: rgba(15, 110, 86, 0.22); border-color: rgba(50, 209, 161, 0.60); }
.home-hcell-action-v4f:active { transform: scale(0.94); }
.home-hcell-action-v4f:focus-visible {
  outline: 2px solid rgba(50, 209, 161, 0.60);
  outline-offset: 2px;
}
.home-hcell-action-v4f svg { display: block; }

/* ── Date cell ───────────────────────────────────────────────── */
.home-hcell-date-primary-v4f {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--fg, #f6f1df);
  line-height: 1.2;
}
.home-hcell-date-secondary-v4f {
  font-size: var(--fs-meta);
  color: rgba(232, 237, 245, 0.60);
  line-height: 1.2;
  margin-top: 2px;
}
.home-hcell-date-secondary-v4f:empty { display: none; }

/* ── Time cell ───────────────────────────────────────────────── */
.home-hcell-time-value-v4f {
  font-size: 1.45rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg, #f6f1df);
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  /* Numbers/clock always read LTR even inside an RTL paragraph */
  direction: ltr;
  unicode-bidi: isolate;
}
.home-hcell-countdown-v4f {
  font-size: var(--fs-label);
  color: rgba(232, 237, 245, 0.68);
  line-height: 1.3;
  margin-top: 4px;
  min-height: 1.3em;
  /* Mixed Arabic + Latin like "Fajr in 7h 32m" / "الفجر خلال 7h 32m" */
  unicode-bidi: plaintext;
}
.home-hcell-countdown-v4f:empty::before {
  content: '\00a0';
}

/* ── Location cell ───────────────────────────────────────────── */
.home-hcell-location-pin-v4f {
  width: 16px;
  height: 16px;
  color: var(--accent, #d4a43a);
  flex-shrink: 0;
}
.home-hcell-location-text-v4f {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--fg, #f6f1df);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* ── Weather cell ────────────────────────────────────────────── */
.home-hcell-weather-icon-v4f {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.home-hcell-weather-primary-v4f {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--fg, #f6f1df);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* "Cloudy · 17°C · 63°F" / "غائم · 17°C · 63°F" — keep numerics LTR */
  unicode-bidi: plaintext;
}
.home-hcell-weather-secondary-v4f {
  font-size: var(--fs-meta);
  color: rgba(232, 237, 245, 0.60);
  line-height: 1.2;
  margin-top: 2px;
}
.home-hcell-weather-secondary-v4f:empty { display: none; }
.home-hcell-weather-loading-v4f { color: rgba(232, 237, 245, 0.45); }

/* ── Mobile: collapse 2×2 grid into 4 stacked rows ───────────── */
@media (max-width: 640px) {
  .home-prayer-head-v4f {
    grid-template-columns: 1fr;
  }
  .home-hcell-v4f {
    border-inline-end: none !important;
    border-block-end:  1px solid rgba(197, 150, 64, 0.12);
  }
  .home-hcell-v4f:last-child {
    border-block-end: none;
  }
  .home-hcell-time-value-v4f { font-size: 1.4rem; }
}

/* styles/features.css */
/* ─────────────────────────────────────────────────────────────
   FONT SIZE MIGRATION — v3 token system (completed)
   ─────────────────────────────────────────────────────────────
   All font-size declarations now use tokens from tokens.css.
   All font-size !important flags have been removed — selector
   specificity alone is sufficient for all overrides here.

   SECTIONS IN THIS FILE:
     1. Custom city search (lines ~1)
     2. Donate modal — light-theme, colors stay hardcoded (#fff
        background), only font-sizes tokenised
     3. Home screen base styles
     4. Home V3 overrides (was !important-heavy — now clean)
     5. Onboarding wizard

   INTENTIONALLY KEPT HARDCODED (icon/emoji sizes):
     42px  .wz-icon               (large emoji step icon)
     24px  .home-tool-btn-v3      (emoji tool icon)
     18px  .wz-tool-icon          (emoji in wizard)
     1.2rem .home-tool-icon       (emoji in home)
   ───────────────────────────────────────────────────────────── */

/* ── Custom city search ── */
.custom-city-search-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 6px 10px;
  margin-bottom: 10px;
}

.custom-city-search-row input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: var(--fs-body);
}

.custom-city-search-row input:focus {
  outline: none;
  border-color: rgba(74,222,128,0.4);
}

.city-search-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}

.city-result-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.city-result-item:hover,
.city-result-item.selected {
  background: rgba(24,117,96,0.15);
  border-color: rgba(74,222,128,0.35);
}

.city-result-name { font-size: var(--fs-body); font-weight: 600; color: #fff; }
.city-result-meta { font-size: var(--fs-meta); color: rgba(255,255,255,0.5); margin-top: 2px; }
.city-result-tz   { font-size: var(--fs-micro); color: rgba(255,255,255,0.35); font-family: var(--mono, monospace); }

@media (max-width: 768px) {
  #toolsMenu #tabQibla { display: none !important; }
  #toolsMenu #tabTrackerMobile { display: inline-flex !important; }
}

@media (min-width: 769px) {
  #toolsMenu #tabTrackerMobile { display: none !important; }
}
/* ── Toggle (One-time / Monthly) ── */
.donate-toggle {
  display: flex;
  gap: 0;
  border: 2px solid #1a7a4a;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 18px;
}
.donate-toggle-btn {
  flex: 1;
  padding: 9px;
  background: transparent;
  border: none;
  font-size: var(--fs-label);
  font-weight: 600;
  cursor: pointer;
  color: #1a7a4a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background 0.15s, color 0.15s;
}
.donate-toggle-btn.active {
  background: #1a7a4a;
  color: #fff;
}

/* ── Amount buttons ── */
.donate-amounts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}
.donate-amount-btn {
  padding: 14px 8px;
  background: #fff;
  border: 1.5px solid #ddd;
  border-radius: 10px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: #222;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  text-align: center;
}
.donate-amount-btn:hover {
  border-color: #1a7a4a;
  color: #1a7a4a;
}
.donate-amount-btn.selected {
  background: #1a7a4a;
  border-color: #1a7a4a;
  color: #fff;
}
.donate-amount-btn--other {
  grid-column: span 3;
  font-size: var(--fs-body);
  color: #666;
  padding: 10px;
}

/* ── Custom amount input ── */
.donate-custom {
  display: flex;
  align-items: center;
  border: 1.5px solid #ddd;
  border-radius: 10px;
  padding: 0 14px;
  margin-bottom: 14px;
  transition: border-color 0.15s;
}
.donate-custom:focus-within { border-color: #1a7a4a; }
.donate-custom-prefix {
  font-size: var(--fs-body);
  color: #888;
  margin-right: 8px;
}
.donate-custom-input {
  border: none;
  outline: none;
  font-size: var(--fs-body);
  padding: 12px 0;
  flex: 1;
  width: 100%;
  background: transparent;
  color: #111;
}
.donate-custom-input::placeholder { color: #bbb; }

/* ── CTA ── */
.donate-cta {
  width: 100%;
  padding: 14px;
  background: #1a7a4a;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: var(--fs-body);
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
  transition: background 0.2s;
  letter-spacing: 0.02em;
}
.donate-cta:hover { background: #1e9057; }

/* ── Note ── */
.donate-note {
  font-size: var(--fs-micro);
  color: #999;
  text-align: center;
  margin-top: 12px;
  line-height: 1.5;
  margin-bottom: 0;
}

/* ── FAQ accordion ── */
.donate-faq {
  margin-top: 24px;
  border-top: 1px solid #eee;
  padding-top: 16px;
}
.donate-faq-title {
  font-size: var(--fs-micro);
  font-weight: 700;
  color: #999;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.donate-faq-item {
  border-bottom: 1px solid #f0f0f0;
}
.donate-faq-item:last-child {
  border-bottom: none;
}
.donate-faq-q {
  width: 100%;
  background: none;
  border: none;
  padding: 11px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  font-size: var(--fs-label);
  font-weight: 600;
  color: #222;
  transition: color 0.15s;
}
.donate-faq-q:hover { color: #1a7a4a; }
.donate-faq-chevron {
  flex-shrink: 0;
  color: #aaa;
  transition: transform 0.2s;
}
.donate-faq-item.open .donate-faq-chevron {
  transform: rotate(180deg);
}
.donate-faq-item.open .donate-faq-q {
  color: #1a7a4a;
}
.donate-faq-a {
  padding: 0 0 12px;
}
.donate-faq-a p {
  margin: 0;
  font-size: var(--fs-label);
  color: #555;
  line-height: 1.7;
}


/* ==== home.css ==== */
/* ═══════════════════════════════════════════════════════════════
   Ummah Compass — Home Screen Styles
   styles/home.css

   Extracted from home.js injectHomeStyles() to eliminate the
   runtime <style> injection that was causing CLS (layout shift).
   Load in index.html <head> before app.js.
   ═══════════════════════════════════════════════════════════════ */

#homeScreenContent { display: grid; gap: 16px; }
#homePrayerCard, .home-section-card { padding: 18px; }

.home-inline-note {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(52, 211, 153, .08);
  color: #9fe7c7;
}

.home-prayer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.home-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.home-link-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: auto;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  color: inherit;
  cursor: pointer;
}

.home-tool-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .03);
  color: inherit;
  cursor: pointer;
}

.home-tool-btn:hover,
.home-link-pill:hover { background: rgba(255, 255, 255, .06); }

.home-tool-icon { font-size: 1.2rem; }
.home-tool-label { font-weight: 600; }
.home-links-row { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 800px) {
  .home-tools-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .home-prayer-actions { flex-direction: column; }
  .home-prayer-actions .btn { width: 100%; justify-content: center; }
}


/* ==== home-v3-overrides.css ==== */

/* Home V3 overrides */
#homeScreenContent {
  display: grid !important;
  gap: 12px !important;
}

#homeScreenContent > .card,
#homeScreenContent > .home-quran-strip-v3 {
  margin: 0 !important;
}

.home-prayer-card-v3 {
  padding: 16px !important;
}

.home-prayer-head-v3 {
  align-items: flex-start !important;
  margin-bottom: 12px !important;
}

.home-kicker {
  color: var(--muted) !important;
  font-size: var(--fs-meta);
  font-family: var(--mono) !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.home-prayer-city {
  font-size: var(--fs-body);
  line-height: 1.3 !important;
}

.home-live-clock-v3 {
  text-align: right !important;
  gap: 2px !important;
}

.home-live-clock-v3 .prayer-live-clock-time {
  font-size: var(--fs-h1);
  line-height: 1 !important;
}

.home-live-clock-v3 .prayer-live-clock-date,
.home-live-clock-v3 .clock-date-row {
  font-size: var(--fs-meta);
}

.home-times-grid-v3 {
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.home-time-card-v3 {
  min-height: 0 !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
}

.home-time-card-v3 .time-name {
  font-size: var(--fs-meta);
  margin-bottom: 4px !important;
}

.home-time-card-v3 .time-value {
  font-size: var(--fs-h3);
}

.home-time-icon {
  font-size: var(--fs-label);
  opacity: .9 !important;
}

.home-next-prayer-v3 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.03) !important;
}

.home-next-prayer-v3::before,
.home-next-prayer-v3::after,
.home-prayer-card-v3 .divider {
  display: none !important;
  content: none !important;
}

.home-next-main,
.home-next-countdown {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.home-next-countdown {
  text-align: right !important;
}

.home-np-label {
  color: var(--muted) !important;
  font-size: var(--fs-micro);
  font-family: var(--mono) !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

.home-np-value {
  font-size: var(--fs-label);
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

.home-np-countdown {
  color: var(--accent) !important;
}

.home-quran-strip-v3 {
  display: grid !important;
  gap: 8px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 16px !important;
  background: linear-gradient(160deg, rgba(17,30,58,.78) 0%, rgba(10,20,42,.9) 100%) !important;
  box-shadow: var(--shadow-md) !important;
}

.home-quran-strip-top,
.home-quran-strip-mid,
.home-qd-actions-v3 {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.home-quran-strip-title {
  font-family: var(--display) !important;
  font-size: var(--fs-h3);
  font-weight: 600 !important;
}

.home-qd-pos-v3,
.home-qd-progress-label {
  color: var(--muted) !important;
  font-size: var(--fs-meta);
}

.home-qd-streak-v3,
.home-qd-progress-pct {
  color: var(--accent) !important;
  font-size: var(--fs-meta);
  font-weight: 700 !important;
}

.home-qd-bar-v3 {
  height: 5px !important;
  background: rgba(255,255,255,.08) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

.home-qd-bar-v3 .home-qd-bar-fill {
  height: 100% !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, rgba(var(--gold-rgb),.9), rgba(var(--green-rgb),.85)) !important;
}

.home-qd-btn-v3 {
  min-height: 34px !important;
  padding: 6px 10px !important;
  font-size: var(--fs-label);
}

.home-prayer-actions-v3 {
  display: flex !important;
  gap: 8px !important;
  margin-top: 10px !important;
  flex-wrap: wrap !important;
}

.home-prayer-actions-v3 .btn {
  min-height: 38px !important;
  padding: 8px 12px !important;
}

.home-tools-card-v3 {
  padding: 14px !important;
}

.home-tools-head-v3 {
  margin-bottom: 10px !important;
}

.home-tools-head-v3 .h2 {
  font-size: var(--fs-h2);
}

.home-tools-grid-v3 {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)) !important;
  gap: 10px !important;
}

.home-tool-btn-v3 {
  min-width: 0 !important;
  min-height: 84px !important;
  height: auto !important;
  padding: 12px 10px !important;
  border-radius: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-align: center !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}

.home-tool-btn-v3 .home-tool-icon {
  font-size: 24px;
  line-height: 1 !important;
}

.home-tool-btn-v3 .home-tool-label {
  font-size: var(--fs-meta);
  font-weight: 600 !important;
}

.home-more-tools-row-v3 {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

.home-subtle-label {
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: var(--fs-micro);
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.home-links-row-v3 {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.home-link-pill-v3 {
  min-height: 34px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
}

.home-inline-note-v3 {
  margin-top: 10px !important;
  font-size: var(--fs-meta);
}

@media (max-width: 820px) {
  .home-prayer-head-v3 {
    gap: 10px !important;
  }

  .home-next-prayer-v3 {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .home-next-countdown {
    text-align: left !important;
  }
}

@media (max-width: 560px) {
  .home-prayer-card-v3,
  .home-tools-card-v3,
  .home-quran-strip-v3 {
    padding: 12px !important;
  }

  .home-tools-grid-v3 {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .home-tool-btn-v3 {
    min-height: 76px !important;
    padding: 10px 8px !important;
  }

  .home-live-clock-v3 {
    width: 100% !important;
    text-align: left !important;
  }

  .home-prayer-head-v3 {
    flex-direction: column !important;
  }
}

/* ==== wizard.css ==== */
/* ═══════════════════════════════════════════════════════════════
   Ummah Compass — Onboarding Wizard Styles
   styles/wizard.css

   Extracted from settings.js injectWizardStyles() to eliminate
   the runtime <style> injection causing CLS on every boot.
   Load in index.html <head> before app.js.
   ═══════════════════════════════════════════════════════════════ */

#ucWizard { position: fixed; inset: 0; z-index: 9999; animation: wz-in .35s ease; }
#ucWizard.wz-exit { animation: wz-out .4s ease forwards; }
@keyframes wz-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes wz-out { from { opacity: 1; } to { opacity: 0; } }

.wz-backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 14, 28, 0.93);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.wz-card {
  width: 100%; max-width: 480px;
  background: #111827;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  display: flex; flex-direction: column;
  max-height: 88vh; overflow: hidden;
  color: #f3f4f6;
}
.wz-body   { flex: 1; overflow-y: auto; padding: 24px 22px 8px; -webkit-overflow-scrolling: touch; }
.wz-footer { padding: 12px 22px 14px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.wz-dots   { display: flex; justify-content: center; gap: 6px; padding: 0 0 14px; }
.wz-dot    { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); transition: all .2s; }
.wz-dot.active { background: #34d399; width: 18px; border-radius: 3px; }

.wz-step { animation: wz-slide .28s ease; }
@keyframes wz-slide { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.wz-icon      { font-size: 42px; text-align: center; margin-bottom: 10px; }
.wz-title     { font-size: var(--fs-h1); font-weight: 600; color: #f9fafb; margin: 0 0 10px; text-align: center; line-height: 1.3; }
.wz-body-text { font-size: var(--fs-body); color: #9ca3af; line-height: 1.65; margin: 0 0 14px; text-align: center; }
.wz-privacy   { font-size: var(--fs-label); color: #34d399; text-align: center; padding: 8px 12px; background: rgba(52, 211, 153, 0.08); border-radius: 8px; }

.wz-welcome-points { display: grid; gap: 10px; }
.wz-info-pill, .wz-inline-note { font-size: var(--fs-label); color: #d1d5db; text-align: center; padding: 9px 12px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; }

/* Calc cards */
.wz-calc-card    { margin-top: 8px; padding: 18px 16px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.04); display: grid; gap: 8px; text-align: center; }
.wz-calc-kicker  { font-size: var(--fs-label); font-weight: 600; color: #e5e7eb; }
.wz-calc-method  { font-size: var(--fs-h1); line-height: 1.35; font-weight: 700; color: #f9fafb; }
.wz-calc-city    { font-size: var(--fs-body); color: #9ca3af; }
.wz-calc-note    { margin-top: 10px; }
.wz-calc-option  { cursor: pointer; transition: border-color .2s, background .2s; outline: none; }
.wz-calc-option:hover { border-color: rgba(197, 150, 74, 0.35); background: rgba(197, 150, 74, 0.06); }
.wz-calc-selected { border-color: rgba(197, 150, 74, 0.55) !important; background: rgba(197, 150, 74, 0.10) !important; }
.wz-calc-jafari  { border-color: rgba(167, 139, 250, 0.18); background: rgba(167, 139, 250, 0.04); }
.wz-calc-jafari.wz-calc-selected { border-color: rgba(167, 139, 250, 0.55) !important; background: rgba(167, 139, 250, 0.12) !important; }
.wz-calc-or      { text-align: center; font-size: var(--fs-meta); color: #6b7280; margin: 6px 0; letter-spacing: .04em; }
.wz-calc-row     { display: flex; align-items: center; gap: 14px; padding: 14px 16px; text-align: left; }
.wz-calc-row-body { flex: 1; min-width: 0; }
.wz-calc-row .wz-calc-method { font-size: var(--fs-h3); line-height: 1.3; margin: 0; }
.wz-calc-row .wz-calc-city   { font-size: var(--fs-meta); color: #9ca3af; margin-top: 3px; line-height: 1.4; }
.wz-calc-guide { font-size: var(--fs-meta); color: #d1d5db; margin-top: 5px; line-height: 1.45; }
.wz-calc-caution { margin: 10px 0 4px; padding: 9px 12px; border: 1px solid rgba(197, 150, 74, 0.2); border-radius: 10px; color: #9ca3af; background: rgba(197, 150, 74, 0.05); font-size: var(--fs-meta); line-height: 1.45; text-align: center; }
.wz-calc-radio       { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); flex-shrink: 0; transition: border-color .2s, background .2s; }
.wz-calc-radio--on   { border-color: #c5964a; background: radial-gradient(circle at center, #c5964a 40%, transparent 41%); }
.wz-calc-jafari .wz-calc-radio--on { border-color: rgba(167, 139, 250, 0.9); background: radial-gradient(circle at center, rgba(167, 139, 250, 0.9) 40%, transparent 41%); }
.settings-calc-recommendation { margin-top: 8px; padding: 9px 11px; border-radius: 10px; font-size: var(--fs-meta); line-height: 1.45; }

/* Buttons */
.wz-action-btn, .wz-search-btn {
  width: 100%; padding: 12px 16px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #0ea5a4, #0f766e);
  color: #fff; font-weight: 600; cursor: pointer; margin-bottom: 10px;
}
.wz-search-box   { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 10px; }
.wz-search-input { width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: #f3f4f6; font-size: max(16px, var(--fs-body)); }

/* City / tool results */
.wz-city-results, .wz-saved-cities { display: grid; gap: 8px; }
.wz-city-results.hidden { display: none; }
.wz-city-result, .wz-saved-city, .wz-tool-pill {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.04);
  color: #e5e7eb; cursor: pointer;
}
.wz-city-result { flex-direction: column; align-items: flex-start; }
.wz-city-result-name { font-weight: 600; }
.wz-city-result-meta { font-size: var(--fs-meta); color: #9ca3af; }
.wz-saved-wrap { margin-top: 10px; }
.wz-empty-note { font-size: var(--fs-label); color: #9ca3af; padding: 10px 0; }
.wz-saved-city.active, .wz-tool-pill.selected { border-color: #34d399; background: rgba(52, 211, 153, 0.12); color: #a7f3d0; }
.wz-tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wz-tool-pill  { justify-content: flex-start; }
.wz-tool-icon  { font-size: 18px; }

/* Language grid */
.wz-lang-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; }
.wz-lang-pill {
  padding: 10px 6px; border-radius: 10px; font-size: var(--fs-body);
  border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05);
  color: #d1d5db; cursor: pointer; text-align: center; transition: background .15s, border-color .15s;
}
.wz-lang-pill.selected { background: rgba(52, 211, 153, 0.15); border-color: #34d399; color: #a7f3d0; font-weight: 600; }
.wz-lang-pill:hover:not(.selected) { background: rgba(255, 255, 255, 0.09); }

/* Habit cards */
.wz-habit-card   { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.wz-habit-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.wz-habit-label  { font-size: var(--fs-body); font-weight: 600; color: #f3f4f6; margin-bottom: 2px; }
.wz-habit-hint   { font-size: var(--fs-meta); color: #6b7280; }
.wz-habit-sub    { margin-top: 10px; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 10px; }
.wz-habit-sub.hidden { display: none; }
.wz-when-label   { font-size: var(--fs-meta); color: #9ca3af; margin: 0 0 8px; }

/* Toggle */
.wz-toggle { position: relative; display: inline-block; flex-shrink: 0; }
.wz-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.wz-toggle-track { display: block; width: 44px; height: 24px; border-radius: 12px; background: #374151; cursor: pointer; transition: background .2s; position: relative; }
.wz-toggle input:checked + .wz-toggle-track { background: #059669; }
.wz-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s; }
.wz-toggle input:checked + .wz-toggle-track .wz-toggle-thumb { transform: translateX(20px); }

/* Checkboxes */
.wz-check-group { display: flex; flex-direction: column; gap: 8px; }
.wz-check-row   { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.03); cursor: pointer; transition: background .15s, border-color .15s; user-select: none; }
.wz-check-row:hover  { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); }
.wz-check-row.checked { background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.35); }
.wz-check-native { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.wz-check-box {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center; transition: all .2s; position: relative;
}
.wz-check-box::after {
  content: ''; width: 5px; height: 10px; border: solid transparent;
  border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0);
  transition: all .2s cubic-bezier(0.34, 1.56, 0.64, 1); margin-top: -2px;
}
.wz-check-row.checked .wz-check-box { background: rgba(52,211,153,0.8); border-color: #34d399; box-shadow: 0 0 10px rgba(52,211,153,0.3); }
.wz-check-row.checked .wz-check-box::after { border-color: #fff; transform: rotate(45deg) scale(1); }
.wz-check-label { font-size: var(--fs-body); color: #d1d5db; }
.wz-check-row.checked .wz-check-label { color: #a7f3d0; font-weight: 500; }

/* Chips */
.wz-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.wz-chip {
  padding: 7px 14px; border-radius: 20px; font-size: var(--fs-label);
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.05);
  color: #d1d5db; cursor: pointer; transition: all .15s;
}
.wz-chip.selected { background: rgba(52,211,153,0.15); border-color: #34d399; color: #a7f3d0; font-weight: 600; }
.wz-custom-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.wz-custom-row.hidden { display: none; }
.wz-custom-input { width: 60px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15); color: #f3f4f6; font-size: var(--fs-h3); text-align: center; }
.wz-custom-label { font-size: var(--fs-label); color: #9ca3af; }

/* Hadith */
.wz-hadith { border-left: 3px solid #34d399; margin: 14px 0 0; padding: 10px 14px; font-size: var(--fs-label); color: #9ca3af; font-style: italic; border-radius: 0 8px 8px 0; background: rgba(52,211,153,0.05); }
[dir="rtl"] .wz-hadith { border-left: none; border-right: 3px solid #34d399; border-radius: 8px 0 0 8px; }

/* Footer nav */
.wz-footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.wz-btn-skip  { font-size: var(--fs-label); color: #6b7280; background: none; border: none; cursor: pointer; padding: 8px 4px; flex-shrink: 0; }
.wz-btn-skip:hover { color: #9ca3af; }
.wz-footer-nav { display: flex; gap: 8px; flex: 1; justify-content: flex-end; }
.wz-btn-back  { padding: 11px 16px; border-radius: 12px; font-size: var(--fs-label); border: 1px solid rgba(255,255,255,0.15); background: transparent; color: #9ca3af; cursor: pointer; transition: background .15s; }
.wz-btn-back:hover { background: rgba(255,255,255,0.07); }
.wz-btn-next  { padding: 11px 20px; border-radius: 12px; font-size: var(--fs-body); font-weight: 600; background: linear-gradient(135deg, #059669, #047857); border: none; color: #fff; cursor: pointer; transition: opacity .2s; }
.wz-btn-next:hover { opacity: .9; }

@media (max-width: 400px) {
  .wz-body  { padding: 18px 14px 6px; }
  .wz-title { font-size: var(--fs-h3); }
  .wz-lang-grid { grid-template-columns: repeat(2, 1fr); }
}

/* styles/theme.css */
:root {

  /* ── 2a. Display font
     OLD: 'Cinzel', 'Trajan Pro', Georgia, serif
     NEW: Cormorant Garamond, falls back to Lora then Georgia.
          Lora is already loaded in styles.css, so the fallback
          is always a loaded font — no invisible-text flash.        */
  --display: 'Cormorant Garamond', 'Lora', Georgia, serif;

  /* ── 2b. Gold palette — deepened toward antique/heritage tone
     OLD gold:       #c5964a  (modern amber, reads as "tech gold")
     NEW gold:       #b8830a  (dark goldenrod — Ottoman manuscript
                               illumination tone, warmer and richer)
     OLD gold-light: #ddb870  (washed-out, low contrast)
     NEW gold-light: #d4a43a  (stronger, more legible on dark navy)
     OLD gold-rgb:   197, 150, 74
     NEW gold-rgb:   184, 131, 10  (matches new #b8830a exactly)    */
  --gold:       #b8830a;
  --gold-light: #d4a43a;
  --gold-rgb:   184, 131, 10;

  /* ── 2c. New heritage teal — for alternate accent moments
     Deeper, cooler, more mosque-tile feeling than --green-islamic.
     Use for: secondary highlights, Qibla compass ring, decorative
     borders. Does not replace --primary — that stays green.        */
  --teal-heritage: #0d5e4a;
  --teal-heritage-rgb: 13, 94, 74;

  /* ── 2d. Warm the deep navy slightly
     OLD: #080e1c  (cold blue-black, reads as generic dark app)
     NEW: #07100f  (fractionally warmer — still very dark, but
                    shifts the atmosphere toward mosque interior
                    rather than developer dashboard)
     navy-mid and navy-card also warmed proportionally.             */
  --navy-deep:     #07100f;
  --navy-mid:      #0b1a16;
  --navy-card:     #101e1b;
  --navy-elevated: #162420;

  /* ── 2e. Semantic bg picks up the warmer navy automatically     */
  --bg: var(--navy-deep);

  /* ── 2f. Recalibrate glow values to match new gold-rgb
     Slightly more intense — heritage gold should glow
     with conviction, not the faint shimmer of the original.       */
  --glow-gold:  0 0 28px rgba(var(--gold-rgb), 0.22);
  --glow-green: 0 0 24px rgba(var(--green-rgb), 0.20);
}


/* ── 3. Focus ring — gold instead of arbitrary sky blue ──────────
   OLD: outline: 2.5px solid rgba(125, 211, 252, 0.7)  ← blue
   NEW: gold at 65% opacity — stays on brand, still WCAG AA.       */

:focus-visible {
  outline: 2.5px solid rgba(var(--gold-rgb), 0.65);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}


/* ── 4. Scrollbars — gold tint to match brand ────────────────────
   OLD: rgba(125, 211, 252, 0.2)  ← blue, unrelated to palette
   NEW: gold at low opacity — subtle but cohesive                  */

::-webkit-scrollbar-thumb {
  background: rgba(var(--gold-rgb), 0.22);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--gold-rgb), 0.40);
}
* {
  scrollbar-color: rgba(var(--gold-rgb), 0.22) transparent;
}
textarea:focus {
  border-color: rgba(var(--gold-rgb), 0.45) !important;
  box-shadow: 0 0 0 3px rgba(var(--gold-rgb), 0.10) !important;
  outline: none;
}
body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpolygon points='40,10 44.6,28.9 61.2,18.8 51.1,35.4 70,40 51.1,44.6 61.2,61.2 44.6,51.1 40,70 35.4,51.1 18.8,61.2 28.9,44.6 10,40 28.9,35.4 18.8,18.8 35.4,28.9' fill='none' stroke='%23b8830a' stroke-width='0.55' stroke-opacity='0.055'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 60% at 20% -10%, rgba(var(--green-rgb), 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(var(--gold-rgb), 0.06) 0%, transparent 55%);
}
.prayer-dropdown-toggle {
  font-style: italic;
  letter-spacing: 0.04em;
}
#homePrayerCard {
  border-color: rgba(var(--gold-rgb), 0.18) !important;
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 40px rgba(var(--gold-rgb), 0.06);
  /* Warm top accent line */
  background: linear-gradient(160deg,
    rgba(18, 32, 28, 0.92) 0%,
    rgba(12, 22, 20, 0.96) 50%,
    rgba(9, 18, 16, 0.98) 100%);
}

/* Gold top-edge accent line (overrides card::before) */
#homePrayerCard::before {
  left: 4%;
  right: 4%;
  height: 1.5px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--gold-rgb), 0.30) 30%,
    rgba(var(--green-rgb), 0.22) 70%,
    transparent
  );
}

/* Card heading — Cormorant Garamond, larger */
#homePrayerCard .h2 {
  font-size: var(--fs-h2);
  letter-spacing: 0.03em;
}

/* City meta line — soft gold tint */
#homePrayerCard .meta {
  color: rgba(var(--gold-rgb), 0.55);
  font-family: var(--sans);
  font-style: italic;
  font-size: var(--fs-micro);
  letter-spacing: 0.01em;
}

/* ── Live clock ── */
.prayer-live-clock-time {
  font-family: var(--display);
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg,
    var(--white-soft) 20%,
    rgba(var(--gold-rgb), 0.9) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
}

.prayer-live-clock-date {
  font-family: var(--sans);
  font-style: italic;
  font-size: var(--fs-micro);
  color: rgba(var(--gold-rgb), 0.50);
  margin-top: 3px;
}

/* ── Next prayer section — the focal hero ── */
#homePrayerCard .next-prayer {
  background: rgba(var(--gold-rgb), 0.04);
  border: 1px solid rgba(var(--gold-rgb), 0.12);
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

/* "Next Prayer" and "Time Remaining" labels */
#homePrayerCard .next-prayer .label {
  font-family: var(--sans);
  font-style: italic;
  font-size: var(--fs-micro);
  color: rgba(var(--gold-rgb), 0.55);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: none;
  margin-bottom: 4px;
}

/* Prayer name and countdown values — large Cormorant Garamond */
#homePrayerCard .next-prayer .value {
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--white-soft);
  font-family: var(--mono);
}

/* Prayer name specifically (first .value) — display font */
#homePrayerCard .next-prayer > div:first-child .value {
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 600;
  background: linear-gradient(135deg,
    var(--white-soft) 30%,
    rgba(var(--gold-rgb), 0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Countdown value — monospace for digit stability */
#homePrayerCard .next-prayer > div:last-child .value {
  font-family: var(--mono);
  font-size: var(--fs-h2);
  font-weight: 600;
  color: rgba(var(--gold-rgb), 0.92);
  letter-spacing: 0.06em;
}
#homePrayerCard .home-time-card {
  border: 1px solid rgba(var(--gold-rgb), 0.09) !important;
  background: rgba(var(--gold-rgb), 0.03) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px 14px !important;
  transition: border-color var(--dur-normal), background var(--dur-normal);
  position: relative;
  overflow: hidden;
}

/* Left accent line on each prayer card */
#homePrayerCard .home-time-card::before {
  content: '';
  position: absolute;
  top: 15%;
  bottom: 15%;
  left: 0;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg,
    rgba(var(--green-rgb), 0.6),
    rgba(var(--gold-rgb), 0.4));
  opacity: 0;
  transition: opacity var(--dur-normal);
}

#homePrayerCard .home-time-card:hover {
  border-color: rgba(var(--gold-rgb), 0.18) !important;
  background: rgba(var(--gold-rgb), 0.06) !important;
}

#homePrayerCard .home-time-card:hover::before {
  opacity: 1;
}

/* Prayer name — italic Lora instead of mono uppercase */
#homePrayerCard .home-time-card .time-name {
  font-family: var(--sans) !important;
  font-style: italic;
  font-size: var(--fs-micro) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: rgba(var(--gold-rgb), 0.62) !important;
}

/* Time value — slightly larger, cleaner */
#homePrayerCard .home-time-card .time-value {
  font-family: var(--mono) !important;
  font-size: var(--fs-label) !important;
  font-weight: 600 !important;
  color: var(--white-soft) !important;
  margin-top: 2px;
}

/* Clock icon — hide the ⏱️ emoji in home cards — it's noisy */
#homePrayerCard .home-time-card [aria-hidden="true"] {
  display: none;
}
#homeScreenContent .home-tool-btn {
  border: 1px solid rgba(var(--gold-rgb), 0.12) !important;
  background: rgba(var(--gold-rgb), 0.04) !important;
  border-radius: var(--radius) !important;
  padding: 16px !important;
  transition: border-color var(--dur-normal), background var(--dur-normal),
              box-shadow var(--dur-normal), transform var(--dur-fast) !important;
}

#homeScreenContent .home-tool-btn:hover {
  border-color: rgba(var(--gold-rgb), 0.28) !important;
  background: rgba(var(--gold-rgb), 0.08) !important;
  box-shadow: var(--glow-gold) !important;
  transform: translateY(-1px) !important;
}

#homeScreenContent .home-tool-icon {
  font-size: var(--fs-h2) !important;
  line-height: 1;
}

#homeScreenContent .home-tool-label {
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  font-size: var(--fs-meta) !important;
  color: var(--fg);
}

/* Home link pills (More tools row) */
#homeScreenContent .home-link-pill {
  border: 1px solid rgba(var(--gold-rgb), 0.12) !important;
  background: rgba(var(--gold-rgb), 0.03) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--sans) !important;
  font-size: var(--fs-meta) !important;
  transition: border-color var(--dur-fast), background var(--dur-fast) !important;
}

#homeScreenContent .home-link-pill:hover {
  border-color: rgba(var(--gold-rgb), 0.25) !important;
  background: rgba(var(--gold-rgb), 0.07) !important;
}

/* Section card headings inside home */
#homeScreenContent .home-section-card .h2 {
  font-size: var(--fs-h3);
  letter-spacing: 0.02em;
}

#homeScreenContent .home-section-card .meta {
  font-family: var(--sans);
  font-style: italic;
  font-size: var(--fs-micro);
  color: rgba(var(--gold-rgb), 0.45);
}

/* Change City / Open Prayer buttons */
#homeScreenContent .home-prayer-actions .btn {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  border-color: rgba(var(--gold-rgb), 0.14);
}

#homeScreenContent .home-prayer-actions .btn:hover {
  border-color: rgba(var(--gold-rgb), 0.30);
  background: rgba(var(--gold-rgb), 0.06);
}
.time-card {
  border-color: rgba(var(--gold-rgb), 0.08) !important;
}

/* Active/next prayer card — gold border glow */
.time-card.next {
  border-color: rgba(var(--gold-rgb), 0.30) !important;
  background: rgba(var(--gold-rgb), 0.06) !important;
  box-shadow: var(--shadow-sm), var(--glow-gold) !important;
}

.time-card.next::before {
  background: linear-gradient(180deg,
    rgba(var(--gold-rgb), 0.8),
    rgba(var(--green-rgb), 0.5)) !important;
  opacity: 1 !important;
}

/* Prayer names — off mono uppercase, onto Lora italic */
.time-name {
  font-family: var(--sans) !important;
  font-style: italic !important;
  font-size: var(--fs-micro) !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0.02em !important;
  color: rgba(var(--gold-rgb), 0.65) !important;
}

/* Prayer time value */
.time-value {
  font-size: var(--fs-body) !important;
  letter-spacing: 0.02em !important;
}
.ayah-pill {
  /* Widen the pill and increase presence */
  padding: 9px 18px 9px 14px !important;
  gap: 8px !important;
  /* Heritage gold gradient border */
  background: linear-gradient(135deg,
    rgba(var(--gold-rgb), 0.16),
    rgba(var(--green-rgb), 0.10)) !important;
  border: 1px solid rgba(var(--gold-rgb), 0.38) !important;
  box-shadow: var(--shadow-md), var(--glow-gold) !important;
  /* Subtle pulse animation on first render */
  animation: ayahPillEntrance 0.6s var(--ease-spring) both,
             ayahPillGlow 3.2s ease-in-out 1.2s infinite !important;
}

@keyframes ayahPillEntrance {
  from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.92); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0)     scale(1); }
}

@keyframes ayahPillGlow {
  0%, 100% { box-shadow: var(--shadow-md), 0 0 12px rgba(var(--gold-rgb), 0.14); }
  50%       { box-shadow: var(--shadow-md), 0 0 22px rgba(var(--gold-rgb), 0.30); }
}

@media (prefers-reduced-motion: reduce) {
  .ayah-pill { animation: none !important; }
}

.ayah-pill:hover {
  background: linear-gradient(135deg,
    rgba(var(--gold-rgb), 0.24),
    rgba(var(--green-rgb), 0.16)) !important;
  border-color: rgba(var(--gold-rgb), 0.55) !important;
  transform: translateX(-50%) translateY(-2px) !important;
  box-shadow: var(--shadow-lg), var(--glow-gold) !important;
}

/* Crescent icon — gold, slightly larger */
.ayah-pill-icon {
  font-size: var(--fs-body) !important;
  color: rgba(var(--gold-rgb), 0.95);
  line-height: 1;
}

/* "Daily Verse" label */
.ayah-pill-label {
  font-family: var(--sans) !important;
  font-style: italic;
  font-size: var(--fs-meta) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em;
  color: rgba(var(--gold-rgb), 0.92) !important;
}

/* Notification dot — gold colour */
.ayah-pill-dot {
  background: rgba(var(--gold-rgb), 0.9) !important;
  box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.6) !important;
}
.ayah-modal {
  border-top: 2px solid rgba(var(--gold-rgb), 0.45) !important;
}

/* ﷽ ornament — larger, gold */
.ayah-modal-ornament span {
  font-family: var(--arabic) !important;
  font-size: var(--fs-arabic-h1) !important;
  color: rgba(var(--gold-rgb), 0.70) !important;
  display: block;
  text-align: center;
  line-height: 1.8;
}

/* Modal title */
.ayah-modal-title {
  font-family: var(--display) !important;
  font-size: var(--fs-body) !important;
  letter-spacing: 0.04em;
}

/* Arabic verse text — slightly warmer line height */
.ayah-modal-arabic {
  line-height: 2.3 !important;
  font-size: var(--fs-arabic-h2) !important;
}

/* Reference line — gold italic */
.ayah-modal-ref {
  font-family: var(--sans) !important;
  font-style: italic;
  color: rgba(var(--gold-rgb), 0.65) !important;
  font-size: var(--fs-meta) !important;
}
@media (max-width: 768px) {
  /* Only hide when bottom nav is present */
  body:has(.bottom-nav) .top-nav {
    display: none;
  }

  /* Stack header brand + actions vertically, save vertical space */
  .app-header {
    padding-bottom: 8px;
  }
}


/* ── Settings gear button — reposition on mobile ── */

/* Base style — match the header action aesthetic */
.settings-gear-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(var(--gold-rgb), 0.20);
  background: rgba(var(--gold-rgb), 0.05);
  color: rgba(var(--gold-rgb), 0.70);
  cursor: pointer;
  transition: background var(--dur-fast), border-color var(--dur-fast),
              color var(--dur-fast);
  flex-shrink: 0;
}
.settings-gear-btn:hover {
  background: rgba(var(--gold-rgb), 0.12);
  border-color: rgba(var(--gold-rgb), 0.38);
  color: rgba(var(--gold-rgb), 0.95);
}

@media (max-width: 768px) {
  /* On mobile the gear sits before .top-nav in the DOM,
     which puts it below the header-actions row — looks orphaned.
     Order trick: push it into the flex row visually by making
     .app-header a proper flex-wrap and giving the gear a high
     flex order so it slots beside the donate button. */
  .settings-gear-btn {
    order: -1; /* Pull it before donate in the header-actions row */
  }

  /* Make header-actions include the gear naturally */
  .app-header {
    flex-wrap: wrap;
    align-items: center;
  }
}
/* ══════════════════════════════════════════════════════════════════
   BISMILLAH WELCOME OVERLAY

   Desktop look is preserved exactly as before. Mobile fixes:
   - Overlay uses 100dvh so mobile-browser-chrome doesn't leave a
     gap at the bottom/top, and has an opaque background so nothing
     from the onboarding wizard beneath can bleed through.
   - Rings and calligraphy text scale with viewport (vmin) so the
     ﷽ ligature never overflows a narrow screen.
   - Very narrow phones (≤ 420px) tighten gap and hint position.
   ══════════════════════════════════════════════════════════════════ */

#bismillah-overlay {
  position: fixed;
  inset: 0;
  /* 100dvh picks up mobile URL-bar changes; fall back to 100vh for
     browsers that don't know dvh. */
  height: 100vh;
  height: 100dvh;
  z-index: 9998; /* below donate modal (9999) but above everything else */
  /* Solid navy — explicit rgb() so no theme-var indirection can make
     this accidentally transparent during onboarding where both layers
     use the same deep color. */
  background: #07100f;
  background: var(--navy-deep, #07100f);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: pointer;
  /* Fade in immediately, fade out triggered by JS adding .bismillah-exit */
  animation: bismillahFadeIn 0.7s var(--ease-out) both;
  /* Belt-and-suspenders — guarantees the overlay is not see-through
     once fade-in finishes, regardless of any inherited opacity. */
  opacity: 1;
  /* Prevent any child overflow from producing a horizontal scroll
     on very narrow phones during the pulse animation. */
  overflow: hidden;
  /* Respect safe-areas on notched devices. */
  padding-top:    env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left:   env(safe-area-inset-left, 0px);
  padding-right:  env(safe-area-inset-right, 0px);
}

#bismillah-overlay.bismillah-exit {
  animation: bismillahFadeOut 0.55s var(--ease-in-out) both;
  pointer-events: none;
}

@keyframes bismillahFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bismillahFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Geometric ring ornament behind the text.
   Desktop: 220px / 280px (unchanged).
   Mobile handled by media query below. */
.bismillah-ring {
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb), 0.12);
  animation: bismillahRingPulse 2.5s ease-in-out infinite;
  pointer-events: none; /* never steal the tap */
}
.bismillah-ring-outer {
  width: 280px;
  height: 280px;
  border-color: rgba(var(--gold-rgb), 0.06);
  animation-delay: 0.4s;
}

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

@media (prefers-reduced-motion: reduce) {
  .bismillah-ring { animation: none; }
}

/* Bismillah Arabic text.
   We render the full spelled-out Bismillah (بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ)
   rather than the U+FDFD ligature, because that ligature isn't in
   most mobile Arabic fonts and decomposes into individual letters
   that overflow narrow screens.

   Sizing goal: fits on one line on most viewports, gracefully wraps
   to two lines on narrow phones. The text is long enough that we
   can't use the desktop --fs-arabic-display anymore. */
.bismillah-text {
  font-family: var(--arabic);
  font-size: clamp(1.4rem, 4.2vw, 2.6rem);
  color: rgba(var(--gold-rgb), 0.92);
  direction: rtl;
  text-align: center;
  line-height: 1.85;          /* room for diacritics above/below */
  position: relative;
  z-index: 1;
  /* Never wider than the viewport with comfortable side padding. */
  max-width: calc(100vw - 48px);
  padding: 0 16px;
  /* Keep words together; only break between words if needed. */
  word-spacing: 0.15em;
  overflow-wrap: normal;
  word-break: keep-all;
  /* Letter-reveal animation */
  animation: bismillahTextReveal 1s var(--ease-out) 0.3s both;
}

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

@media (prefers-reduced-motion: reduce) {
  .bismillah-text { animation: none; }
}

/* App name below */
.bismillah-appname {
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(var(--white-soft-rgb), 0.55);
  position: relative;
  z-index: 1;
  animation: bismillahTextReveal 1s var(--ease-out) 0.6s both;
}

/* "Tap to continue" hint */
.bismillah-hint {
  font-family: var(--sans);
  font-style: italic;
  font-size: var(--fs-micro);
  color: rgba(var(--gold-rgb), 0.35);
  position: absolute;
  bottom: calc(32px + var(--safe-bottom, env(safe-area-inset-bottom, 0px)));
  animation: bismillahTextReveal 1s var(--ease-out) 1.2s both;
}

@media (prefers-reduced-motion: reduce) {
  .bismillah-appname,
  .bismillah-hint { animation: none; }
}

/* ── Mobile & narrow-viewport adjustments ──────────────────────────
   Below 640px the rings need to shrink to stay on-screen.
   vmin = the smaller of viewport width / height, so rings remain
   circular inside the visible area even in landscape.
   The .bismillah-text font-size is already responsive via clamp()
   in its base rule above — no override needed here. */
@media (max-width: 640px) {
  .bismillah-ring       { width: 52vmin; height: 52vmin; }
  .bismillah-ring-outer { width: 68vmin; height: 68vmin; }

  .bismillah-appname {
    font-size: var(--fs-body);
  }

  .bismillah-hint {
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 420px) {
  /* Very narrow phones — tighten the gap so app-name + hint don't
     get pushed off the bottom by the larger rings. */
  #bismillah-overlay { gap: 10px; }
  .bismillah-ring       { width: 48vmin; height: 48vmin; }
  .bismillah-ring-outer { width: 62vmin; height: 62vmin; }
}

.pc-ring {
  background: linear-gradient(
    var(--navy-deep),
    var(--navy-deep)) padding-box,
    linear-gradient(135deg,
      rgba(var(--gold-rgb), 0.22),
      rgba(var(--green-rgb), 0.14)) border-box !important;
  border: 2px solid transparent !important;
  box-shadow: 0 0 32px rgba(var(--gold-rgb), 0.06) !important;
  transition: box-shadow 0.3s, border-color 0.3s !important;
}

/* Active ring — stronger gold glow when sujoud detected */
.pc-ring.pc-ring-active {
  background: linear-gradient(
    var(--navy-deep),
    var(--navy-deep)) padding-box,
    linear-gradient(135deg,
      rgba(var(--gold-rgb), 0.70),
      rgba(var(--green-rgb), 0.40)) border-box !important;
  box-shadow: 0 0 40px rgba(var(--gold-rgb), 0.22),
              inset 0 0 24px rgba(var(--gold-rgb), 0.04) !important;
}

/* Rak'ah number — Cormorant Garamond for elegance */
.pc-rakah-num {
  font-family: var(--display) !important;
  font-size: 100px !important;
  font-weight: 600 !important;
  letter-spacing: -2px !important;
  background: linear-gradient(135deg, var(--white-soft) 20%, rgba(var(--gold-rgb), 0.85) 100%);
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Flash (count increment) — satisfying bounce */
.pc-rakah-num.pc-flash {
  animation: pcRakahBounce 0.32s var(--ease-spring) both !important;
  -webkit-text-fill-color: transparent !important;
}

@keyframes pcRakahBounce {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.16); }
  65%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .pc-rakah-num.pc-flash { animation: none !important; }
}

/* Rak'ah label — italic Lora instead of mono uppercase */
.pc-rakah-label {
  font-family: var(--sans) !important;
  font-style: italic !important;
  font-size: var(--fs-meta) !important;
  text-transform: none !important;
  letter-spacing: 0.04em !important;
  color: rgba(var(--gold-rgb), 0.55) !important;
}

/* Manual tap button — gold border on hover */
.pc-simulate-btn:hover {
  border-color: rgba(var(--gold-rgb), 0.55) !important;
  color: rgba(var(--gold-rgb), 0.90) !important;
  box-shadow: var(--glow-gold) !important;
}

/* Sujoud dots — gold when active */
.pc-sujoud-dot.pc-sujoud-on {
  background: rgba(var(--gold-rgb), 0.9) !important;
  box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.5) !important;
}

/* Progress dots — gold for completed rak'ahs */
.pc-dot.pc-dot-done {
  background: rgba(var(--gold-rgb), 0.85) !important;
}

/* Complete screen — الحمد لله large and gold */
.pc-alhamdulillah {
  font-family: var(--arabic) !important;
  font-size: var(--fs-arabic-h1) !important;
  color: rgba(var(--gold-rgb), 0.90) !important;
  text-align: center !important;
}

/* Complete checkmark ring — gold border */
.pc-check {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(var(--gold-rgb), 0.40) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: pcCheckReveal 0.5s var(--ease-spring) both !important;
}

@keyframes pcCheckReveal {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pc-check { animation: none !important; }
}
.istikhara-empty {
  padding: 48px 24px !important;
  gap: 14px !important;
}

.istikhara-empty-icon {
  font-size: 2.8rem !important;
  opacity: 1 !important;
  /* Subtle float animation */
  animation: emptyFloat 3.5s ease-in-out infinite;
  filter: drop-shadow(0 4px 12px rgba(var(--gold-rgb), 0.18));
}

@keyframes emptyFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .istikhara-empty-icon { animation: none !important; }
}

.istikhara-empty-title {
  font-family: var(--display) !important;
  font-size: var(--fs-body) !important;
  font-weight: 600 !important;
  color: rgba(var(--gold-rgb), 0.70) !important;
  letter-spacing: 0.02em;
}

.istikhara-empty-sub {
  font-family: var(--sans) !important;
  font-style: italic !important;
  font-size: var(--fs-meta) !important;
  color: rgba(var(--white-soft-rgb), 0.38) !important;
  max-width: 280px !important;
  line-height: 1.7 !important;
}

/* ── No city configured empty state ── */
.no-city-message {
  padding: 64px 24px !important;
}

.no-city-icon {
  font-size: 3.2rem !important;
  opacity: 1 !important;
  filter: drop-shadow(0 4px 16px rgba(var(--green-rgb), 0.25));
  animation: emptyFloat 4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .no-city-icon { animation: none !important; }
}

.no-city-message h3 {
  font-family: var(--display) !important;
  font-size: var(--fs-h2) !important;
  font-weight: 600 !important;
  color: var(--white-soft) !important;
  letter-spacing: 0.02em;
  margin: 0 0 10px !important;
}

.no-city-message p {
  font-family: var(--sans) !important;
  font-style: italic !important;
  color: rgba(var(--gold-rgb), 0.55) !important;
  font-size: var(--fs-label) !important;
}

/* ── Bookmarks empty state ── */
.bookmarks-empty {
  font-family: var(--sans) !important;
  font-style: italic !important;
  font-size: var(--fs-meta) !important;
  color: rgba(var(--gold-rgb), 0.45) !important;
  padding: 28px 20px !important;
  text-align: center !important;
}
.uc-toast,
#uc-toast,
.toast {
  font-family: var(--sans) !important;
  font-style: italic !important;
  border: 1px solid rgba(var(--gold-rgb), 0.20) !important;
  background: rgba(var(--navy-card), 0.95) !important;
  color: var(--fg) !important;
  backdrop-filter: blur(12px) !important;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   10. ADHAN NOTIFICATION TOAST — warm gold feel
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.adhan-toast {
  border-left: 3px solid rgba(var(--gold-rgb), 0.60) !important;
  background: linear-gradient(135deg,
    rgba(var(--navy-card), 0.97),
    rgba(var(--navy-mid), 0.97)) !important;
}

/* ── Pre-prayer reminder banner ─────────────────────────────────── */
.adhan-reminder-banner {
  position: fixed !important;
  bottom: 100px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(12px) !important;
  z-index: 9998 !important;
  width: min(360px, calc(100vw - 32px)) !important;
  padding: 10px 20px !important;
  background: rgba(17, 30, 58, 0.95) !important;
  border: 1px solid rgba(var(--gold-rgb), 0.22) !important;
  border-radius: 12px !important;
  color: rgba(var(--gold-rgb), 0.88) !important;
  font-size: var(--fs-label) !important;
  font-family: var(--sans) !important;
  text-align: center !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.40) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}
.adhan-reminder-banner.visible {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}
@media (min-width: 768px) {
  .adhan-reminder-banner { bottom: 32px !important; }
}

#screenHome #homePrayerCard {
  display: none !important;
}

/* Prayer card when living inside home screen */
#screenHome #prayerResultsCard.prayer-card-in-home {
  /* The card.prayer-card-in-home transition override from prayer.js
     inline style — make sure it stays visible */
  display: block !important;
  margin-bottom: 0;
}

/* Hide bottom "countdown note" hint — Prayer-screen specific */
#screenHome #prayerResultsCard.prayer-card-in-home > .hint:last-child,
#screenHome #prayerResultsCard.prayer-card-in-home > .divider:last-of-type {
  display: none;
}

/* Hide Ramadan card on home — belongs on Prayer screen */
#screenHome #ramadanCard {
  display: none !important;
}

/* Hide prayer sub-nav when card is on home screen */
#screenHome .prayer-sub-nav {
  display: none;
}



/* ── Prayer card date + prayer name size boost ── */

/* "Sun, Mar 22" date */
.prayer-live-clock-date {
  font-size: var(--fs-label) !important;
}

/* "Fajr", "Sunrise", "Dhuhr" etc. prayer name labels */
.time-name {
  font-size: var(--fs-label) !important;
}

/* styles/bidi.css */
/* =========================================================
   UMMAH COMPASS — BIDI / RTL-LTR SYSTEM
   Final cleaned version
   ========================================================= */

/* ---------------------------------------------------------
   1) Direction source of truth
   --------------------------------------------------------- */
html[dir="rtl"] body { direction: rtl; }
html[dir="ltr"] body { direction: ltr; }

/* Logical text alignment for shared UI text blocks */
.meta,
.label,
.hint,
.tools-sheet-title,
.tools-sheet-label,
.tools-sheet-more-label,
.tab-dropdown-item,
.no-city-message,
.field label,
.brand-text,
.next-prayer > div,
.home-kicker,
.home-prayer-city-v3f,
.home-next-main-v3f,
.home-next-countdown-v3f,
.home-inline-note-v3f {
  text-align: start;
}

/* ---------------------------------------------------------
   2) Numeric / mixed-script islands always LTR
   --------------------------------------------------------- */
.prayer-live-clock,
.prayer-live-clock-time,
.prayer-live-clock-date,
#prayerLiveTime,
#homeLiveTime,
#countdownValue,
#nextPrayerValue,
.time-value,
.value,
.hijri-pill,
#langSelect,
.countdown,
.digital-clock {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Sacred Arabic always RTL */
.quran-ayah-text,
.bismillah-text,
.arabic {
  direction: rtl;
  text-align: right;
}

/* ---------------------------------------------------------
   3) Shared prayer / card layout patterns
   --------------------------------------------------------- */
.card-head,
.brand,
.header-actions,
.bottom-nav,
.prayer-sub-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Default structure: title/content block then utility block */
.card-head > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.card-head > :last-child {
  flex: 0 0 auto;
}

/* Prayer header: keep text block on visual right in RTL and utility on left */
html[dir="rtl"] .card-head {
  flex-direction: row;
}
html[dir="rtl"] .card-head > :first-child {
  text-align: right !important;
  margin-inline-end: auto;
}
html[dir="rtl"] .prayer-live-clock {
  text-align: left !important;
  margin-inline-start: auto;
  margin-inline-end: 0;
}
html[dir="rtl"] .prayer-live-clock-time,
html[dir="rtl"] .prayer-live-clock-date,
html[dir="rtl"] #prayerLiveTime {
  text-align: left !important;
}

html[dir="ltr"] .card-head {
  flex-direction: row;
}
html[dir="ltr"] .card-head > :first-child {
  text-align: left;
}
html[dir="ltr"] .prayer-live-clock,
html[dir="ltr"] .prayer-live-clock-time,
html[dir="ltr"] .prayer-live-clock-date,
html[dir="ltr"] #prayerLiveTime {
  text-align: right;
}

/* Time cards */
html[dir="rtl"] .time-card {
  direction: rtl;
  text-align: right;
  flex-direction: row-reverse;
}
html[dir="rtl"] .time-name {
  text-align: right;
}
html[dir="rtl"] .time-value {
  text-align: left;
}

/* ---------------------------------------------------------
   4) Home screen specific normalization
   --------------------------------------------------------- */
html[dir="rtl"] #homeScreenContent .home-prayer-head-v3f,
html[dir="ltr"] #homeScreenContent .home-prayer-head-v3f {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
}

html[dir="rtl"] #homeScreenContent .home-prayer-head-v3f > :first-child {
  text-align: right !important;
}
html[dir="ltr"] #homeScreenContent .home-prayer-head-v3f > :first-child {
  text-align: left !important;
}

html[dir="rtl"] #homeScreenContent .home-live-clock-v3f {
  text-align: left !important;
  align-items: flex-start !important;
}
html[dir="ltr"] #homeScreenContent .home-live-clock-v3f {
  text-align: right !important;
  align-items: flex-end !important;
}

html[dir="rtl"] #homeScreenContent .home-next-prayer-v3f,
html[dir="ltr"] #homeScreenContent .home-next-prayer-v3f {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
}
html[dir="rtl"] #homeScreenContent .home-next-main-v3f {
  text-align: right !important;
}
html[dir="rtl"] #homeScreenContent .home-next-countdown-v3f {
  text-align: left !important;
}
html[dir="ltr"] #homeScreenContent .home-next-main-v3f {
  text-align: left !important;
}
html[dir="ltr"] #homeScreenContent .home-next-countdown-v3f {
  text-align: right !important;
}

/* ---------------------------------------------------------
   5) Header / nav / grouped controls
   --------------------------------------------------------- */
html[dir="rtl"] .brand,
html[dir="rtl"] .header-actions,
html[dir="rtl"] .bottom-nav,
html[dir="rtl"] .tools-sheet-more-item,
html[dir="rtl"] .tab-dropdown-item,
html[dir="rtl"] .prayer-sub-nav {
  flex-direction: row-reverse;
}
html[dir="rtl"] .brand-text,
html[dir="rtl"] .tools-sheet-header,
html[dir="rtl"] .tools-sheet-title,
html[dir="rtl"] .tools-sheet-more-label,
html[dir="rtl"] .tab-dropdown-item {
  text-align: right;
}
html[dir="rtl"] .brand-privacy-pills {
  justify-content: flex-end;
}
html[dir="rtl"] .tools-sheet-more-chev {
  transform: scaleX(-1);
}

/* ---------------------------------------------------------
   6) Calendar form RTL
   --------------------------------------------------------- */
html[dir="rtl"] .prayer-calendar-form,
html[dir="rtl"] .prayer-calendar-form .grid {
  direction: rtl;
}
html[dir="rtl"] .prayer-calendar-form input,
html[dir="rtl"] .prayer-calendar-form select,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea {
  text-align: right;
}
html[dir="ltr"] input,
html[dir="ltr"] select,
html[dir="ltr"] textarea {
  text-align: left;
}

/* ---------------------------------------------------------
   7) Qibla header/layout
   --------------------------------------------------------- */
html[dir="rtl"] .qibla-header {
  flex-direction: row-reverse;
}
html[dir="rtl"] .qibla-header .btn {
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* ---------------------------------------------------------
   8) Adhan header / panel layout
   --------------------------------------------------------- */
html[dir="rtl"] .adhan-prayer-header,
html[dir="ltr"] .adhan-prayer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
html[dir="rtl"] .adhan-prayer-title,
html[dir="rtl"] .adhan-next-prayer {
  text-align: right;
}
html[dir="ltr"] .adhan-prayer-title,
html[dir="ltr"] .adhan-next-prayer {
  text-align: left;
}
html[dir="rtl"] .adhan-prayer-icon {
  margin-inline-start: 0;
  margin-inline-end: 8px;
}
html[dir="ltr"] .adhan-prayer-icon {
  margin-inline-end: 0;
  margin-inline-start: 8px;
}

/* ---------------------------------------------------------
   9) Typography RTL safeguards
   --------------------------------------------------------- */
html[dir="rtl"] {
  --display: var(--arabic);
}
html[dir="rtl"] .brand-tagline,
html[dir="rtl"] .brand-pill,
html[dir="rtl"] .brand-rotating-text,
html[dir="rtl"] .time-name,
html[dir="rtl"] .next-prayer .label,
html[dir="rtl"] .h1,
html[dir="rtl"] .h2,
html[dir="rtl"] .h3,
html[dir="rtl"] .meta,
html[dir="rtl"] .hint,
html[dir="rtl"] .app-footer,
html[dir="rtl"] .prayer-live-clock-date,
html[dir="rtl"] .prayer-dropdown-toggle,
html[dir="rtl"] .tools-sheet-label,
html[dir="rtl"] .tools-sheet-more-label,
html[dir="rtl"] .bottom-nav-label,
html[dir="rtl"] .brand-title,
html[dir="rtl"] .tools-sheet-title {
  font-family: var(--arabic) !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
}
html[dir="rtl"] .h1,
html[dir="rtl"] .h2,
html[dir="rtl"] .brand-title {
  font-weight: 700 !important;
}

/* ---------------------------------------------------------
   10) Utility helpers for future components
   --------------------------------------------------------- */
.rtl-row {
  display: flex;
  align-items: center;
}
html[dir="rtl"] .rtl-row {
  flex-direction: row-reverse;
}
html[dir="ltr"] .rtl-row {
  flex-direction: row;
}

/* ---------------------------------------------------------
   11) Next prayer final layout fix
   --------------------------------------------------------- */
.next-prayer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.next-prayer > :first-child,
.next-prayer > :last-child {
  flex: 0 0 auto;
  min-width: 0;
}

html[dir="rtl"] .next-prayer {
  flex-direction: row;
}
html[dir="rtl"] .next-prayer > :first-child {
  text-align: right;
}
html[dir="rtl"] .next-prayer > :last-child {
  text-align: left;
  direction: ltr;
  unicode-bidi: isolate;
}

html[dir="ltr"] .next-prayer {
  flex-direction: row;
}
html[dir="ltr"] .next-prayer > :first-child {
  text-align: left;
}
html[dir="ltr"] .next-prayer > :last-child {
  text-align: right;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------------------------------------------------------
   12) Bottom nav visibility fix
   --------------------------------------------------------- */
@media (max-width: 768px) {
  .bottom-nav {
    display: flex !important;
  }
}

@media (min-width: 769px) {
  .bottom-nav {
    display: none !important;
  }
}

/* styles/responsive.css */
/* ─────────────────────────────────────────────────────────────
   FONT SIZE MIGRATION — v3 token system (completed)
   ─────────────────────────────────────────────────────────────
   18 hardcoded font-size values in the home-qd-redesign-v1
   Daily Quran widget replaced with tokens. All hardcoded
   font-size !important flags removed.

   NOTE: font-size !important declarations that remain in this
   file all use var(--fs-*) tokens — these are intentional
   responsive cascade overrides and are correct to keep.

   ONE FIX BEYOND TOKEN SWAP:
     .home-qd-streak-label-v1 was 9px — below the safe minimum
     for readable text. Bumped to var(--fs-micro) (10–12px).
   ───────────────────────────────────────────────────────────── */

/* Responsive home + mobile polish (loaded last) */

/* Cancel older home suppression rules */
#screenHome #homePrayerCard {
  display: block !important;
}

/* Disable legacy moved prayer-card styling if script still exists */
#screenHome #prayerResultsCard.prayer-card-in-home {
  display: none !important;
}

#homeScreenContent {
  display: grid !important;
  gap: 16px !important;
}

#homeScreenContent > .card,
#homeScreenContent > section {
  margin: 0 !important;
}

#homeScreenContent .divider,
#homeScreenContent .divider::before,
#homeScreenContent .divider::after,
#homePrayerCard .divider,
#homePrayerCard .divider::before,
#homePrayerCard .divider::after {
  display: none !important;
  content: none !important;
}

#homePrayerCard.home-prayer-card-v3f,
#homeScreenContent .home-tools-card-v3f {
  padding: 18px !important;
}

#homeScreenContent .home-prayer-head-v3f {
  align-items: stretch !important;
  margin-bottom: 12px !important;
}
#homeScreenContent .home-tools-head-v3f {
  align-items: flex-start !important;
  margin-bottom: 12px !important;
}

#homeScreenContent .home-kicker {
  font-family: var(--display) !important;
  font-size: var(--fs-display-1) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-bottom: 2px !important;
  /* Gold-tipped gradient matching the live clock */
  background: linear-gradient(135deg,
    #ffffff 30%,
    rgba(var(--gold-rgb), 0.85) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* RTL: gradient clip can break Arabic — use flat gold instead */
html[dir="rtl"] #homeScreenContent .home-kicker {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--white-soft) !important;
  background-clip: unset !important;
  color: var(--white-soft) !important;
}

#homeScreenContent .home-prayer-city-v3f {
  font-size: var(--fs-h3) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--gold) !important;
  font-family: var(--sans) !important;
}

#homeScreenContent .home-live-clock-v3f {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 2px !important;
  text-align: right !important;
  min-width: 120px;
}

#homeScreenContent .home-live-clock-v3f .prayer-live-clock-time {
  font-size: var(--fs-display-1) !important;
  line-height: 1 !important;
  font-weight: 700 !important;
}

#homeScreenContent .home-live-clock-v3f .prayer-live-clock-date {
  font-size: var(--fs-h3) !important;
  font-weight: 500 !important;
  line-height: 1.35 !important;
  color: var(--gold) !important;
}

#homeScreenContent .home-times-grid-v3f {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-bottom: 12px !important;
}

/* ── Prayer cards: vertical icon-first layout (Image-2 style) ── */
#homeScreenContent .home-time-card-v3f {
  flex-direction:  column     !important;
  align-items:     center     !important;
  justify-content: flex-start !important;
  text-align:      center     !important;
  min-height:      112px      !important;
  padding:         16px 8px 14px !important;
  border-radius:   16px       !important;
  background:      rgba(10, 26, 18, 0.75) !important;
  border:          1px solid rgba(var(--gold-rgb), 0.10) !important;
  gap:             0          !important;
  position:        relative   !important;
}

/* Prayer icon — CSS background-image, CSP-safe */
#homeScreenContent .home-tc-icon-v3f {
  display:             block         !important;
  width:               34px          !important;
  height:              34px          !important;
  margin:              0 auto 9px    !important;
  flex-shrink:         0             !important;
  background-repeat:   no-repeat     !important;
  background-position: center        !important;
  background-size:     contain       !important;
}

/* Fajr */
#homeScreenContent [data-prayer-key*="fajr"] .home-tc-icon-v3f,
#homeScreenContent [data-prayer-key*="subh"] .home-tc-icon-v3f,
#homeScreenContent [data-prayer-key*="sobh"] .home-tc-icon-v3f {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23c9a84c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 18a6 6 0 1 1-7.5-7.8 5 5 0 0 0 7.5 7.8Z'/%3E%3Cpath d='M24 7l.5 1.2 1.2.5-1.2.5L24 10.4l-.5-1.2-1.2-.5 1.2-.5L24 7Z' fill='%23c9a84c' stroke='none'/%3E%3Cpath d='M19 5l.4 1 1 .4-1 .4L19 7.8l-.4-1-1-.4 1-.4L19 5Z' fill='%23c9a84c' stroke='none'/%3E%3C/svg%3E") !important;
}

/* Sunrise / Shuruq */
#homeScreenContent [data-prayer-key*="shuruq"]  .home-tc-icon-v3f,
#homeScreenContent [data-prayer-key*="shuruk"]  .home-tc-icon-v3f,
#homeScreenContent [data-prayer-key*="sunrise"] .home-tc-icon-v3f,
#homeScreenContent [data-prayer-key*="ishraq"]  .home-tc-icon-v3f,
#homeScreenContent [data-prayer-key*="rising"]  .home-tc-icon-v3f {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23c9a84c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 19a6 6 0 0 1 12 0'/%3E%3Cpath d='M16 5v6M11 8.5l1.5 1.5M21 8.5l-1.5 1.5M5 22h22'/%3E%3Cpath d='M13 16l3-3 3 3'/%3E%3C/svg%3E") !important;
}

/* Dhuhr / Zuhr */
#homeScreenContent [data-prayer-key*="dhuhr"] .home-tc-icon-v3f,
#homeScreenContent [data-prayer-key*="duhr"]  .home-tc-icon-v3f,
#homeScreenContent [data-prayer-key*="zuhr"]  .home-tc-icon-v3f,
#homeScreenContent [data-prayer-key*="zohr"]  .home-tc-icon-v3f {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23c9a84c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='16' r='5'/%3E%3Cpath d='M16 5v2M16 25v2M5 16h2M25 16h2M8.2 8.2l1.4 1.4M22.4 22.4l1.4 1.4M8.2 23.8l1.4-1.4M22.4 9.6l1.4-1.4'/%3E%3C/svg%3E") !important;
}

/* Asr */
#homeScreenContent [data-prayer-key*="asr"]  .home-tc-icon-v3f,
#homeScreenContent [data-prayer-key*="asar"] .home-tc-icon-v3f {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23c9a84c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='16' cy='18' r='5'/%3E%3Cpath d='M16 7v2M16 27v2M5 18h2M25 18h2M9 11l1.4 1.4M22.6 11l-1.4 1.4'/%3E%3C/svg%3E") !important;
}

/* Maghrib */
#homeScreenContent [data-prayer-key*="maghrib"] .home-tc-icon-v3f,
#homeScreenContent [data-prayer-key*="magrib"]  .home-tc-icon-v3f {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23c9a84c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 19a6 6 0 0 1 12 0'/%3E%3Cpath d='M16 11V5M11 8.5l1.5 1.5M21 8.5l-1.5 1.5M5 22h22'/%3E%3Cpath d='M13 8l3 3 3-3'/%3E%3C/svg%3E") !important;
}

/* Isha */
#homeScreenContent [data-prayer-key*="isha"] .home-tc-icon-v3f,
#homeScreenContent [data-prayer-key*="esha"] .home-tc-icon-v3f {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23c9a84c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 19a7 7 0 1 1-8.5-8.8 6 6 0 0 0 8.5 8.8Z'/%3E%3Cpath d='M24 8l.5 1.2 1.2.5-1.2.5L24 11.4l-.5-1.2-1.2-.5 1.2-.5L24 8Z' fill='%23c9a84c' stroke='none'/%3E%3C/svg%3E") !important;
}

/* Prayer name */
#homeScreenContent .home-time-card-v3f .time-name {
  display:       block  !important;
  font-size:     var(--fs-label) !important;
  font-style:    italic !important;
  color:         rgba(var(--gold-rgb), 0.92) !important;
  text-shadow:   0 0 10px rgba(var(--gold-rgb), 0.45),
                 0 0 22px rgba(var(--gold-rgb), 0.18) !important;
  margin-bottom: 5px   !important;
  line-height:   1.3   !important;
}

/* Prayer time value */
#homeScreenContent .home-time-card-v3f .time-value {
  display:        block  !important;
  font-size:      var(--fs-meta) !important;
  font-weight:    700    !important;
  letter-spacing: 0.04em !important;
  line-height:    1.2    !important;
  color:          var(--fg) !important;
}

/* Active / current prayer — full gold border + glow */
#homeScreenContent .home-time-card-v3f.is-current {
  background:  rgba(14, 34, 22, 0.92) !important;
  border:      1px solid rgba(var(--gold-rgb), 0.55) !important;
  box-shadow:  0 0 22px rgba(var(--gold-rgb), 0.14),
               inset 0 0 16px rgba(var(--gold-rgb), 0.04) !important;
}
#homeScreenContent .home-time-card-v3f.is-current::after {
  content:       "" !important;
  position:      absolute !important;
  top: 10%; right: 0; bottom: 10% !important;
  width:         3px !important;
  background:    linear-gradient(180deg, rgba(var(--gold-rgb), 0.85), rgba(var(--green-rgb), 0.40)) !important;
  border-radius: 2px 0 0 2px !important;
}
#homeScreenContent .home-time-card-v3f.is-current .time-name {
  color: rgba(var(--gold-rgb), 0.88) !important;
}
#homeScreenContent .home-time-card-v3f.is-current .time-value {
  color: rgba(var(--gold-rgb), 0.95) !important;
}

/* Next-soon warning */
#homeScreenContent .home-time-card-v3f.is-next-soon {
  border-color: rgba(var(--green-rgb), 0.38) !important;
  background:   rgba(10, 30, 18, 0.80) !important;
}

/* Remove old emoji icon */
#homeScreenContent .home-time-icon { display: none !important; }

#homeScreenContent .home-next-prayer-v3f {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 14px 16px 12px !important;
  margin: 6px 0 0 !important;
  border: 1px solid rgba(var(--gold-rgb), 0.14) !important;
  border-radius: 16px !important;
  background: rgba(10, 24, 16, 0.75) !important;
}

/* Progress bar full-width inside next-prayer strip */
#homeScreenContent .home-np-progress-v4f {
  flex-basis: 100% !important;
  margin: 4px 0 0 !important;
}

#homeScreenContent .home-next-main-v3f,
#homeScreenContent .home-next-countdown-v3f {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

#homeScreenContent .home-next-countdown-v3f {
  text-align: right !important;
}

#homeScreenContent .home-np-label-v3f {
  color: var(--muted) !important;
  font-size: var(--fs-micro) !important;
  font-family: var(--mono) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

#homeScreenContent .home-np-value-v3f {
  font-size: var(--fs-body) !important;
  line-height: 1.25 !important;
  font-weight: 700 !important;
}

#homeScreenContent .home-np-countdown-v3f {
  color: rgba(var(--gold-rgb), 0.95) !important;
  font-family: var(--mono) !important;
}

#homeScreenContent .home-quran-strip-v3f {
  display: grid !important;
  gap: 8px !important;
  padding: 14px 16px !important;
  margin-top: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 18px !important;
  background: linear-gradient(160deg, rgba(17,30,58,0.74) 0%, rgba(10,20,42,0.88) 100%) !important;
}

#homeScreenContent .home-quran-strip-top-v3f,
#homeScreenContent .home-quran-strip-mid-v3f {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
}

#homeScreenContent .home-quran-strip-title-v3f {
  font-family: var(--display) !important;
  font-size: var(--fs-h3) !important;
  font-weight: 600 !important;
}

#homeScreenContent .home-qd-pos-v3f,
#homeScreenContent .home-qd-progress-label-v3f {
  color: var(--muted) !important;
  font-size: var(--fs-label) !important;
}

#homeScreenContent .home-qd-streak-v3f,
#homeScreenContent .home-qd-progress-pct-v3f {
  color: var(--accent) !important;
  font-size: var(--fs-meta) !important;
  font-weight: 700 !important;
}

#homeScreenContent .home-qd-bar-v3f {
  height: 5px !important;
  background: rgba(255,255,255,0.08) !important;
  border-radius: 999px !important;
  overflow: hidden !important;
}

#homeScreenContent .home-qd-bar-fill-v3f {
  height: 100% !important;
  background: linear-gradient(90deg, rgba(var(--gold-rgb),.95), rgba(var(--green-rgb),.85)) !important;
}

#homeScreenContent .home-qd-actions-v3f {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#homeScreenContent .home-qd-btn-v3f {
  min-height: 38px !important;
  padding: 8px 12px !important;
  font-size: var(--fs-meta) !important;
  width: 100% !important;
}

#homeScreenContent .home-prayer-actions-v3f {
  display: flex !important;
  gap: 8px !important;
  margin-top: 12px !important;
  flex-wrap: wrap !important;
}

#homeScreenContent .home-prayer-actions-v3f .btn {
  min-height: 40px !important;
  padding: 8px 12px !important;
}

#homeScreenContent .home-tools-card-v3f {
  padding: 18px !important;
}

#homeScreenContent .home-tools-head-v3f .meta {
  max-width: 48ch;
}

#homeScreenContent .home-tools-grid-v3f {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#homeScreenContent .home-tool-btn-v3f {
  min-width: 0 !important;
  min-height: 96px !important;
  padding: 12px 8px !important;
  border-radius: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-align: center !important;
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

#homeScreenContent .home-tool-btn-v3f .home-tool-icon {
  font-size: var(--fs-h1) !important;
  line-height: 1 !important;
}

#homeScreenContent .home-tool-btn-v3f .home-tool-label {
  font-size: var(--fs-label) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

#homeScreenContent .home-more-tools-row-v3f {
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

#homeScreenContent .home-subtle-label-v3f {
  color: var(--muted) !important;
  font-family: var(--mono) !important;
  font-size: var(--fs-micro) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

#homeScreenContent .home-links-row-v3f {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

#homeScreenContent .home-link-pill-v3f {
  min-height: 34px !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
}

#homeScreenContent .home-inline-note-v3f {
  margin-top: 10px !important;
  font-size: var(--fs-meta) !important;
}

/* Tablet */
@media (max-width: 1024px) {
  #homeScreenContent .home-times-grid-v3f {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #homeScreenContent .home-tools-grid-v3f {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #homeScreenContent .home-tool-btn-v3f {
    min-height: 88px !important;
  }
}

/* Mobile */
@media (max-width: 700px) {
  .app-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: calc(10px + var(--safe-top)) 12px 10px !important;
    flex-wrap: nowrap !important;
  }

  .app-header > .brand {
    width: auto !important;
    min-width: 0;
    flex: 1 1 auto;
    gap: 10px !important;
    overflow: hidden;
  }

  .brand-mark {
    flex-shrink: 0;
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    font-size: var(--fs-h3) !important;
  }

  .brand-text {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .brand-title {
    font-size: var(--fs-h3) !important;
    line-height: 1.2 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Arabic script needs extra size — Amiri renders smaller than Latin */
  html[dir="rtl"] .brand-title {
    font-size: var(--fs-h2) !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
  }

  .brand-tagline,
  .brand-privacy-pills,
  .brand-rotating {
    display: none !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-left: auto !important;
    flex: 0 0 auto;
  }

  #langSelect {
    min-width: 52px !important;
    padding: 6px 28px 6px 8px !important;
    font-size: var(--fs-micro) !important;
    margin-left: 0 !important;
  }

  .btn-donate {
    min-height: 36px !important;
    padding: 8px 10px !important;
  }

  .btn-donate span {
    display: none;
  }

  .container {
    margin: 12px auto 24px !important;
    padding: 0 12px !important;
    gap: 12px !important;
    padding-bottom: calc(90px + var(--safe-bottom)) !important;
  }

  #homePrayerCard.home-prayer-card-v3f,
  #homeScreenContent .home-tools-card-v3f {
    padding: 14px !important;
  }

  #homeScreenContent .home-prayer-head-v3f {
    margin-bottom: 10px !important;
  }

  #homeScreenContent .home-kicker {
    font-size: var(--fs-h3) !important;
    margin-bottom: 4px !important;
  }

  #homeScreenContent .home-prayer-city-v3f {
    font-size: var(--fs-label) !important;
  }

  #homeScreenContent .home-live-clock-v3f {
    min-width: unset;
  }

  #homeScreenContent .home-live-clock-v3f .prayer-live-clock-time {
    font-size: var(--fs-h2) !important;
  }

  #homeScreenContent .home-live-clock-v3f .prayer-live-clock-date {
    font-size: var(--fs-label) !important;
  }

  #homeScreenContent .home-times-grid-v3f {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  #homeScreenContent .home-time-card-v3f {
    min-height: 76px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  #homeScreenContent .home-time-card-v3f .time-name {
    font-size: 15px !important;
    margin-bottom: 4px !important;
  }

  #homeScreenContent .home-time-card-v3f .time-value {
    font-size: var(--fs-h2) !important;
  }

  #homeScreenContent .home-next-prayer-v3f {
    gap: 10px !important;
    padding: 10px 12px !important;
  }

  #homeScreenContent .home-np-value-v3f {
    font-size: var(--fs-body) !important;
  }

  #homeScreenContent .home-quran-strip-v3f {
    padding: 12px !important;
  }

  #homeScreenContent .home-quran-strip-title-v3f {
    font-size: var(--fs-h3) !important;
  }

  #homeScreenContent .home-qd-progress-label-v3f,
  #homeScreenContent .home-qd-pos-v3f,
  #homeScreenContent .home-qd-streak-v3f,
  #homeScreenContent .home-qd-progress-pct-v3f {
    font-size: var(--fs-label) !important;
  }

  #homeScreenContent .home-qd-actions-v3f {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #homeScreenContent .home-qd-btn-v3f {
    min-height: 36px !important;
    padding: 8px 10px !important;
    font-size: var(--fs-meta) !important;
  }

  #homeScreenContent .home-prayer-actions-v3f {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #homeScreenContent .home-prayer-actions-v3f .btn {
    width: 100% !important;
    justify-content: center !important;
  }

  #homeScreenContent .home-tools-head-v3f {
    margin-bottom: 10px !important;
  }

  #homeScreenContent .home-tools-grid-v3f {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  #homeScreenContent .home-tool-btn-v3f {
    min-height: 78px !important;
    border-radius: 16px !important;
    padding: 10px 6px !important;
    gap: 6px !important;
  }

  #homeScreenContent .home-tool-btn-v3f .home-tool-icon {
    font-size: var(--fs-h2) !important;
  }

  #homeScreenContent .home-tool-btn-v3f .home-tool-label {
    font-size: var(--fs-micro) !important;
  }

  .ayah-pill {
    bottom: calc(76px + var(--safe-bottom)) !important;
  }

  .bottom-nav {
    padding-bottom: calc(8px + var(--safe-bottom)) !important;
  }
}

@media (max-width: 420px) {
  .app-header {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .brand-title {
    font-size: var(--fs-label) !important;
  }

  html[dir="rtl"] .brand-title {
    font-size: var(--fs-h3) !important;
  }

  #langSelect {
    width: 46px !important;
    min-width: 46px !important;
  }

  .btn-donate {
    width: 36px !important;
    padding: 8px !important;
    justify-content: center !important;
  }

  #homeScreenContent .home-prayer-head-v3f {
    gap: 8px !important;
  }

  #homeScreenContent .home-next-prayer-v3f {
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  #homeScreenContent .home-live-clock-v3f .prayer-live-clock-time {
    font-size: var(--fs-h2) !important;
  }

}

/* Stack next prayer row only on very small screens */
@media (max-width: 360px) {
  #homeScreenContent .home-next-prayer-v3f {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #homeScreenContent .home-next-countdown-v3f {
    text-align: left !important;
  }

  #homeScreenContent .home-quran-strip-top-v3f,
  #homeScreenContent .home-quran-strip-mid-v3f {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* RTL safety */
html[dir="rtl"] #homeScreenContent .home-tool-btn-v3f {
  text-align: center !important;
  flex-direction: column !important;
}

html[dir="rtl"] #homeScreenContent .home-next-prayer-v3f {
  direction: rtl;
}
/* Global bidirectional alignment fixes for all supported languages */
#homeScreenContent .home-prayer-head-v3f {
  display: flex !important;
  justify-content: space-between !important;
  align-items: stretch !important;
}
#homeScreenContent .home-tools-head-v3f {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
}

#homeScreenContent .home-prayer-head-v3f > :first-child,
#homeScreenContent .home-tools-head-v3f > :first-child {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* Left column: mirror the clock's space-between so title sits top, city sits bottom */
#homeScreenContent .home-prayer-head-v3f > :first-child {
  display:         flex !important;
  flex-direction:  column !important;
  justify-content: space-between !important;
}

#homeScreenContent .home-kicker,
#homeScreenContent .home-prayer-city-v3f,
#homeScreenContent .home-tools-head-v3f h2,
#homeScreenContent .home-tools-head-v3f .h2,
#homeScreenContent .home-tools-head-v3f .meta,
#homeScreenContent .home-more-tools-row-v3f,
#homeScreenContent .home-subtle-label-v3f,
#homeScreenContent .home-links-row-v3f {
  text-align: start !important;
}

#homeScreenContent .home-live-clock-v3f {
  text-align: end !important;
}

html[dir="rtl"] #homeScreenContent .home-prayer-head-v3f {
  flex-direction: row-reverse !important;
}

html[dir="rtl"] #homeScreenContent .home-live-clock-v3f {
  align-items: flex-start !important;
}

html[dir="rtl"] #homeScreenContent .home-live-clock-v3f > div:last-child {
  justify-content: flex-start !important;
}

html[dir="rtl"] #homeScreenContent .home-next-countdown-v3f {
  text-align: left !important;
}

html[dir="ltr"] #homeScreenContent .home-prayer-head-v3f {
  flex-direction: row !important;
}

html[dir="ltr"] #homeScreenContent .home-live-clock-v3f {
  align-items: flex-end !important;
}

html[dir="ltr"] #homeScreenContent .home-live-clock-v3f > div:last-child {
  justify-content: flex-end !important;
}

html[dir="ltr"] #homeScreenContent .home-next-countdown-v3f {
  text-align: right !important;
}

@media (max-width: 360px) {
  html[dir="rtl"] #homeScreenContent .home-next-prayer-v3f {
    align-items: flex-end !important;
  }

  html[dir="rtl"] #homeScreenContent .home-next-countdown-v3f {
    text-align: right !important;
    width: 100% !important;
  }

  html[dir="ltr"] #homeScreenContent .home-next-countdown-v3f {
    text-align: left !important;
    width: 100% !important;
  }
}


/* Final RTL/LTR prayer header repair */
html[dir="rtl"] #homeScreenContent .home-prayer-head-v3f {
  flex-direction: row-reverse !important;
}

html[dir="rtl"] #homeScreenContent .home-kicker,
html[dir="rtl"] #homeScreenContent .home-prayer-city-v3f {
  text-align: right !important;
}

html[dir="ltr"] #homeScreenContent .home-prayer-head-v3f {
  flex-direction: row !important;
}

html[dir="ltr"] #homeScreenContent .home-kicker,
html[dir="ltr"] #homeScreenContent .home-prayer-city-v3f {
  text-align: left !important;
}

#homeScreenContent .home-inline-note-v3f {
  text-align: start !important;
}


/* ===== FINAL PRAYER HEADER / CARD FIX ===== */
/* Keep DOM order stable for all languages:
   child 1 = prayer title/city, child 2 = live clock.
   The page direction places them on the correct visual side. */
html[dir="rtl"] #homeScreenContent .home-prayer-head-v3f,
html[dir="ltr"] #homeScreenContent .home-prayer-head-v3f{
  display:flex !important;
  flex-direction:row !important;
  justify-content:space-between !important;
  align-items:stretch !important;
}

html[dir="rtl"] #homeScreenContent .home-prayer-head-v3f > div:first-child{
  text-align:right !important;
}
html[dir="ltr"] #homeScreenContent .home-prayer-head-v3f > div:first-child{
  text-align:left !important;
}

html[dir="rtl"] #homeScreenContent .home-live-clock-v3f{
  text-align:left !important;
  align-items:flex-start !important;
}
html[dir="ltr"] #homeScreenContent .home-live-clock-v3f{
  text-align:right !important;
  align-items:flex-end !important;
}

/* Keep each prayer card perfectly centered */
#homeScreenContent .home-time-card-v3f{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
#homeScreenContent .home-time-card-v3f > div:first-child{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  width:100% !important;
  text-align:center !important;
}

/* Remove stopwatch icon from layout so it cannot pull text off-center */
#homeScreenContent .home-time-icon{
  display:none !important;
}

/* ═══════════════════════════════════════════════════════════════
   DAILY QURAN — v1 redesign additions
   Ring + 3-column hero row + streak label split
   Append to responsive.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero: stack everything centred ── */

/* ═══════════════════════════════════════════════════════════════
   DAILY QURAN CARD — single authoritative block
   Replaces all previous home-qd-*-v1 rules.
   ═══════════════════════════════════════════════════════════════ */

/* ── Card shell ── */
#homeScreenContent .home-qd-redesign-v1 {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(160deg, rgba(10,28,26,0.97) 0%, rgba(5,18,15,0.99) 100%);
  border: 1px solid rgba(184,131,10,0.22);
  box-shadow: 0 12px 32px rgba(0,0,0,0.28);
  position: relative;
}

/* ── Hero zone ── */
#homeScreenContent .home-qd-redesign-v1 .home-qd-hero-v1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 16px 12px;
  gap: 8px;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-hero-v1::after {
  content: "";
  position: absolute;
  bottom: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(184,131,10,0.25), transparent);
  pointer-events: none;
}

/* ── Ambient glow ── */
#homeScreenContent .home-qd-redesign-v1 .home-qd-hero-glow-v1 {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 60%, rgba(184,131,10,0.10) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Basmala ── */
#homeScreenContent .home-qd-redesign-v1 .home-qd-basmala-v1 {
  font-family: var(--arabic);
  font-size: var(--fs-label);
  line-height: 1.65;
  color: rgba(212,164,58,0.85);
  text-align: center;
  letter-spacing: 0.01em;
}

/* ── Three-column row: ring | book | streak ── */
#homeScreenContent .home-qd-redesign-v1 .home-qd-hero-row-v1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
}

/* ── Progress ring ── */
#homeScreenContent .home-qd-redesign-v1 .home-qd-ring-wrap-v1 {
  position: relative;
  width: 68px; height: 68px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(184,131,10,0.06);
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-ring-svg-v1 {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-ring-pct-v1 {
  position: relative; z-index: 1;
  font-family: var(--mono);
  font-size: var(--fs-meta); font-weight: 700;
  color: rgba(212,164,58,0.95);
  line-height: 1;
}

/* ── Book ── */
#homeScreenContent .home-qd-redesign-v1 .home-qd-book-wrap-v1 {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-book-glow-v1 {
  position: absolute;
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(184,131,10,0.16) 0%, transparent 70%);
  pointer-events: none;
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-book-svg-v1 {
  position: relative; z-index: 1;
  animation: home-qd-book-float 3.5s ease-in-out infinite;
}
@keyframes home-qd-book-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  #homeScreenContent .home-qd-redesign-v1 .home-qd-book-svg-v1 { animation: none; }
}

/* ── Streak badge ── */
#homeScreenContent .home-qd-redesign-v1 .home-qd-streak-badge-v1 {
  position: static;
  width: 68px; min-height: 68px;
  flex-shrink: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 3px; text-align: center;
  padding: 8px 5px;
  background: linear-gradient(135deg, rgba(212,90,20,0.20), rgba(230,160,30,0.12));
  border: 1px solid rgba(212,140,30,0.32);
  border-radius: 14px;
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-streak-spacer-v1 {
  width: 68px;
  flex-shrink: 0;
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-streak-num-v1 {
  font-family: var(--mono);
  font-size: var(--fs-h2); font-weight: 700;
  color: rgba(230,160,30,0.96);
  line-height: 1; display: block;
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-streak-label-v1 {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  color: rgba(230,160,30,0.62);
  line-height: 1.3;
  word-break: break-word;
  display: block;
}

/* ── Position subtitle ── */
#homeScreenContent .home-qd-redesign-v1 .home-qd-hero-pos-v1 {
  font-family: var(--sans);
  font-style: italic;
  font-size: var(--fs-body);
  color: rgba(212,164,58,0.72);
  text-align: center;
  margin: 0;
}

/* ── Title ── */
#homeScreenContent .home-qd-redesign-v1 .home-qd-hero-title-v1 {
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: rgba(232,240,230,0.95);
  text-align: center;
  letter-spacing: 0.03em;
  margin-top: 0;
}

/* ── Stats row ── */
#homeScreenContent .home-qd-redesign-v1 .home-qd-summary-v1 {
  display: flex;
  flex-direction: row;
  gap: 0;
  background: rgba(255,255,255,0.02);
  border-top: 1px solid rgba(184,131,10,0.12);
  border-bottom: 1px solid rgba(184,131,10,0.12);
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-stat-v1 {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 12px 6px; gap: 5px;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,0.05);
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-stat-v1:last-child {
  border-right: none;
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-stat-label-v1 {
  font-family: var(--mono);
  font-size: var(--fs-micro); font-weight: 600;
  color: rgba(212,195,150,0.65);
  text-transform: uppercase; letter-spacing: 0.05em;
  line-height: 1.2;
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-stat-value-v1 {
  font-family: var(--mono);
  font-size: var(--fs-h3); font-weight: 700;
  color: rgba(212,164,58,0.90);
  line-height: 1.2;
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-stat-value-v1 span {
  font-size: var(--fs-micro); opacity: 0.55;
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-stat-value-v1.is-achieved {
  color: #34d399;
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-stat-icon-v1 {
  display: none;
}

/* ── CTA button ── */
#homeScreenContent .home-qd-redesign-v1 .home-qd-actions-v1 {
  padding: 10px 14px;
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-btn-v1 {
  width: 100%; min-height: 44px;
  padding: 10px 14px;
  background: linear-gradient(180deg, rgba(184,131,10,0.96), rgba(140,98,6,0.96));
  border: none; border-radius: 12px;
  font-family: var(--arabic);
  font-size: var(--fs-body); font-weight: 600;
  color: #0f0d00; line-height: 1.5;
  box-shadow: 0 5px 16px rgba(184,131,10,0.26), inset 0 1px 0 rgba(255,255,255,0.16);
  cursor: pointer; text-align: center;
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-btn-v1:hover {
  filter: brightness(1.06);
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-btn-v1:active {
  transform: scale(0.987);
}

/* ── Tablet ── */
@media (max-width: 700px) {
  #homeScreenContent .home-qd-redesign-v1 .home-qd-hero-v1 {
    padding: 12px 12px 10px;
  }
  #homeScreenContent .home-qd-redesign-v1 .home-qd-ring-wrap-v1,
  #homeScreenContent .home-qd-redesign-v1 .home-qd-streak-badge-v1,
  #homeScreenContent .home-qd-redesign-v1 .home-qd-streak-spacer-v1 {
    width: 58px; min-height: 58px;
  }
  #homeScreenContent .home-qd-redesign-v1 .home-qd-ring-pct-v1 {
    font-size: var(--fs-micro);
  }
  #homeScreenContent .home-qd-redesign-v1 .home-qd-streak-num-v1 {
    font-size: var(--fs-h3);
  }
  #homeScreenContent .home-qd-redesign-v1 .home-qd-actions-v1 {
    padding: 8px 12px;
  }
}

/* ── Mobile ── */
@media (max-width: 420px) {
  #homeScreenContent .home-qd-redesign-v1 .home-qd-hero-row-v1 { gap: 8px; }
  #homeScreenContent .home-qd-redesign-v1 .home-qd-ring-wrap-v1,
  #homeScreenContent .home-qd-redesign-v1 .home-qd-streak-badge-v1,
  #homeScreenContent .home-qd-redesign-v1 .home-qd-streak-spacer-v1 {
    width: 52px; min-height: 52px;
  }
  #homeScreenContent .home-qd-redesign-v1 .home-qd-streak-num-v1 { font-size: var(--fs-label); }
  #homeScreenContent .home-qd-redesign-v1 .home-qd-basmala-v1 { font-size: var(--fs-meta); }
}
#homeScreenContent .home-qd-redesign-v1 .home-qd-streak-badge-v1 {
  width: 68px;
  min-height: 68px;
  max-height: 68px;
  padding: 6px 5px;
  border-radius: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE HOTFIX 2 — Daily Quran card containment
   Prevent horizontal overflow on narrow screens
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  #homeScreenContent .home-qd-redesign-v1,
  #homeScreenContent .home-qd-redesign-v1 * {
    box-sizing: border-box !important;
  }

  #homeScreenContent .home-qd-redesign-v1 {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #homeScreenContent .home-qd-redesign-v1 .home-qd-hero-v1,
  #homeScreenContent .home-qd-redesign-v1 .home-qd-summary-v1,
  #homeScreenContent .home-qd-redesign-v1 .home-qd-actions-v1 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #homeScreenContent .home-qd-redesign-v1 .home-qd-basmala-v1,
  #homeScreenContent .home-qd-redesign-v1 .home-qd-hero-title-v1,
  #homeScreenContent .home-qd-redesign-v1 .home-qd-hero-pos-v1 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
    text-wrap: balance !important;
    padding-inline: 8px !important;
  }

  #homeScreenContent .home-qd-redesign-v1 .home-qd-summary-v1 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #homeScreenContent .home-qd-redesign-v1 .home-qd-stat-v1 {
    min-width: 0 !important;
    padding: 10px 4px !important;
  }

  #homeScreenContent .home-qd-redesign-v1 .home-qd-stat-label-v1,
  #homeScreenContent .home-qd-redesign-v1 .home-qd-stat-value-v1,
  #homeScreenContent .home-qd-redesign-v1 .home-qd-stat-value-v1 span {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    white-space: normal !important;
    text-wrap: balance !important;
  }

  #homeScreenContent .home-qd-redesign-v1 .home-qd-btn-v1 {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    text-wrap: balance !important;
    line-height: 1.35 !important;
    font-size: var(--fs-body);
    padding: 12px 14px !important;
  }
}

@media (max-width: 420px) {
  #homeScreenContent .home-qd-redesign-v1 .home-qd-hero-v1 {
    padding: 12px 10px 10px !important;
  }

  #homeScreenContent .home-qd-redesign-v1 .home-qd-basmala-v1 {
    font-size: var(--fs-micro);
    line-height: 1.55 !important;
    padding-inline: 6px !important;
  }

  #homeScreenContent .home-qd-redesign-v1 .home-qd-hero-pos-v1 {
    font-size: var(--fs-meta);
  }

  #homeScreenContent .home-qd-redesign-v1 .home-qd-hero-title-v1 {
    font-size: var(--fs-h2) !important;
  }

  #homeScreenContent .home-qd-redesign-v1 .home-qd-stat-label-v1 {
    font-size: var(--fs-micro);
    line-height: 1.2 !important;
  }

  #homeScreenContent .home-qd-redesign-v1 .home-qd-stat-value-v1 {
    font-size: var(--fs-label);
    line-height: 1.2 !important;
  }

  #homeScreenContent .home-qd-redesign-v1 .home-qd-stat-value-v1 span {
    font-size: var(--fs-micro);
  }

  #homeScreenContent .home-qd-redesign-v1 .home-qd-btn-v1 {
    font-size: var(--fs-label);
    line-height: 1.3 !important;
    padding: 11px 12px !important;
    border-radius: 10px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ACTIVE PRAYER — restored 3D polish
   Re-added without changing existing mobile/header/Quran fixes
   ═══════════════════════════════════════════════════════════════ */
#homeScreenContent .home-time-status-badge-v3f {
  display: none !important;
}

#homeScreenContent .home-time-card-v3f {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    inset 0 -10px 18px rgba(0,0,0,0.08),
    0 10px 24px rgba(0,0,0,0.14);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

#homeScreenContent .home-time-card-v3f::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 42%);
  opacity: 0.55;
}

#homeScreenContent .home-time-card-v3f::after {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: transparent;
  opacity: 0;
  transition: opacity 180ms ease, background 180ms ease;
}

#homeScreenContent .home-time-card-v3f.is-current {
  transform: translateY(-2px);
  background:
    linear-gradient(180deg, rgba(30,58,44,0.28) 0%, rgba(12,28,22,0.36) 100%) !important;
  border-color: rgba(var(--gold-rgb),0.36) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -12px 18px rgba(0,0,0,0.10),
    0 14px 30px rgba(0,0,0,0.18),
    0 0 0 1px rgba(var(--green-rgb),0.10),
    0 0 18px rgba(var(--gold-rgb),0.08);
}

#homeScreenContent .home-time-card-v3f.is-current::after {
  opacity: 1;
  background: linear-gradient(180deg, rgba(var(--green-rgb),0.95), rgba(var(--gold-rgb),0.9));
}

#homeScreenContent .home-time-card-v3f.is-current .time-name {
  color: rgba(var(--gold-rgb),0.98) !important;
}

#homeScreenContent .home-time-card-v3f.is-current .time-value {
  color: rgba(255,255,255,0.98) !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}

#homeScreenContent .home-time-card-v3f.is-current .home-time-icon {
  opacity: 1 !important;
  color: rgba(var(--gold-rgb),0.95) !important;
}

#homeScreenContent .home-time-card-v3f.is-next-soon {
  border-color: rgba(var(--gold-rgb),0.28) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 12px 24px rgba(0,0,0,0.16),
    0 0 0 1px rgba(var(--gold-rgb),0.06);
}

#homeScreenContent .home-next-prayer-v3f.is-warning,
#homeScreenContent .home-time-card-v3f.is-next-soon {
  animation: homePrayerSoonPulse 1.8s ease-in-out infinite;
}

@keyframes homePrayerSoonPulse {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.06),
      0 10px 22px rgba(0,0,0,0.14),
      0 0 0 0 rgba(var(--gold-rgb),0.00);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      0 12px 28px rgba(0,0,0,0.18),
      0 0 0 5px rgba(var(--gold-rgb),0.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  #homeScreenContent .home-next-prayer-v3f.is-warning,
  #homeScreenContent .home-time-card-v3f.is-next-soon {
    animation: none !important;
  }

  #homeScreenContent .home-time-card-v3f,
  #homeScreenContent .home-time-card-v3f.is-current {
    transition: none !important;
  }
}

html[dir="rtl"] #homeScreenContent .home-time-card-v3f::after {
  left: auto;
  right: 0;
  border-radius: 999px 0 0 999px;
}

@media (max-width: 700px) {
  #homeScreenContent .home-time-card-v3f.is-current {
    transform: translateY(-1px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.10),
      inset 0 -10px 16px rgba(0,0,0,0.10),
      0 10px 22px rgba(0,0,0,0.18),
      0 0 0 1px rgba(var(--green-rgb),0.10),
      0 0 14px rgba(var(--gold-rgb),0.08);
  }

  #homeScreenContent .home-time-card-v3f.is-current::after {
    top: 10px;
    bottom: 10px;
  }
}

/* Location pin before city name */
.home-city-pin-v3f {
  width:          18px;
  height:         18px;
  display:        inline-block;
  vertical-align: middle;
  margin-right:   4px;
  margin-bottom:  2px;
  color:          rgba(var(--gold-rgb), 0.92);
  flex-shrink:    0;
}
html[dir="rtl"] .home-city-pin-v3f {
  margin-right: 0;
  margin-left:  4px;
}

/* styles/preferences.css */
/* ═══════════════════════════════════════════════════════════════
   User typography preferences
   Loaded last so user choice cleanly overrides theme defaults.
   =============================================================== */
:root[data-text-scale="normal"] { --type-scale-factor: 1.08; }
:root[data-text-scale="large"]  { --type-scale-factor: 1.16; }
:root[data-text-scale="xlarge"] { --type-scale-factor: 1.28; }

:root[data-font-theme="default"] {}
:root[data-font-theme="reading"] {
  --sans: 'Lora', Georgia, 'Times New Roman', serif;
  --display: 'Cormorant Garamond', 'Lora', Georgia, serif;
}
:root[data-font-theme="classic"] {
  --sans: Georgia, 'Times New Roman', serif;
  --display: 'Cormorant Garamond', Georgia, serif;
}
:root[data-font-theme="modern"] {
  --sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[data-text-scale="normal"] .btn,
html[data-text-scale="large"] .btn,
html[data-text-scale="xlarge"] .btn,
html[data-text-scale="normal"] select,
html[data-text-scale="large"] select,
html[data-text-scale="xlarge"] select,
html[data-text-scale="normal"] input,
html[data-text-scale="large"] input,
html[data-text-scale="xlarge"] input {
  min-height: 46px;
}

/* styles/phase5-overrides.css */
/* Restored Jafari Istikhara styles from pre-optimization build */

/* ── Jafari Istikhara full page ── */
.istikhara-jafari-page {
  max-width: 760px;
  margin: 0 auto;
}

html[dir="rtl"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-page {
  direction: rtl;
  text-align: right;
}

html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-page {
  direction: ltr;
  text-align: left;
}

/* Hero */
.istikhara-jafari-hero {
  text-align: center;
  padding: 28px 20px 20px;
}
.istikhara-jafari-bismillah {
  font-family: var(--arabic);
  font-size: var(--fs-arabic-h1);
  color: rgba(var(--gold-rgb), 0.90);
  line-height: 2;
  margin-bottom: 10px;
}
.istikhara-jafari-salawat {
  font-family: var(--arabic);
  font-size: var(--fs-arabic-body);
  color: rgba(var(--gold-rgb), 0.60);
  line-height: 1.8;
  margin-bottom: 14px;
}
.istikhara-jafari-title-ar {
  font-family: var(--arabic);
  font-size: var(--fs-arabic-display);
  font-weight: 700;
  color: var(--white-soft);
  margin-bottom: 6px;
}
.istikhara-jafari-subtitle-ar {
  font-size: var(--fs-meta);
  color: rgba(var(--gold-rgb), 0.55);
  line-height: 1.7;
}

/* Sections */
.istikhara-jafari-section {
  padding: 4px 0 12px;
}
.istikhara-jafari-section-title {
  font-size: var(--fs-label);
  font-weight: 700;
  color: rgba(var(--gold-rgb), 0.90);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.12);
}
.istikhara-jafari-subsection {
  margin: 16px 0;
}
.istikhara-jafari-subsection-title {
  font-size: var(--fs-meta);
  font-weight: 700;
  color: rgba(var(--gold-rgb), 0.75);
  margin-bottom: 10px;
}
.istikhara-jafari-text {
  font-size: var(--fs-body);
  color: rgba(var(--white-soft-rgb), 0.82);
  line-height: 2;
  margin-bottom: 12px;
}

/* Quranic verse — always Arabic/RTL regardless of UI language */
.istikhara-jafari-quran {
  font-family: var(--arabic);
  font-size: var(--fs-arabic-body);
  color: rgba(var(--gold-rgb), 0.88);
  line-height: 2.2;
  text-align: center;
  padding: 16px 20px;
  background: rgba(var(--gold-rgb), 0.05);
  border: 1px solid rgba(var(--gold-rgb), 0.14);
  border-radius: var(--radius);
  margin: 14px 0;
}

/* Hadith — base (RTL default) */
.istikhara-jafari-hadith {
  background: rgba(255, 255, 255, 0.03);
  border-right: 3px solid rgba(var(--gold-rgb), 0.35);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px 12px 12px;
  margin: 12px 0;
}
.istikhara-jafari-hadith-text {
  font-family: var(--arabic);
  font-size: var(--fs-arabic-body);
  color: rgba(var(--white-soft-rgb), 0.85);
  line-height: 2;
}
.istikhara-jafari-hadith-source {
  font-family: var(--arabic);
  font-size: var(--fs-meta);
  color: rgba(var(--gold-rgb), 0.55);
  margin-top: 6px;
}

/* Hadith — flip border side for LTR languages */
html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-hadith {
  border-right: none;
  border-left: 3px solid rgba(var(--gold-rgb), 0.35);
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  padding: 12px 12px 12px 16px;
}

html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-hadith-source {
  text-align: left;
}

/* Methods */
.istikhara-jafari-method {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 12px 0;
  padding: 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(var(--gold-rgb), 0.08);
  border-radius: var(--radius-sm);
}
.istikhara-jafari-method-num {
  font-family: var(--arabic);
  font-size: var(--fs-arabic-h2);
  color: rgba(var(--gold-rgb), 0.70);
  flex-shrink: 0;
  min-width: 24px;
  text-align: center;
  margin-top: 2px;
}
.istikhara-jafari-method-text {
  font-size: var(--fs-body);
  color: rgba(var(--white-soft-rgb), 0.80);
  line-height: 2;
}

/* Dua — always Arabic/RTL regardless of UI language */
.istikhara-jafari-dua {
  font-family: var(--arabic);
  font-size: var(--fs-arabic-body);
  color: rgba(var(--gold-rgb), 0.85);
  line-height: 2.2;
  text-align: center;
  padding: 16px 18px;
  background: rgba(var(--gold-rgb), 0.04);
  border: 1px solid rgba(var(--gold-rgb), 0.12);
  border-radius: var(--radius);
  margin: 12px 0;
}

/* Tasbih result grid */
.istikhara-jafari-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}
.istikhara-jafari-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: var(--radius-sm);
  text-align: center;
}
.istikhara-jafari-result--good {
  background: rgba(24, 117, 96, 0.08);
  border: 1px solid rgba(24, 117, 96, 0.25);
}
.istikhara-jafari-result--bad {
  background: rgba(220, 80, 80, 0.06);
  border: 1px solid rgba(220, 80, 80, 0.20);
}
.istikhara-jafari-result-icon { font-size: 20px; }
.istikhara-jafari-result-label {
  font-size: var(--fs-label);
  color: rgba(var(--white-soft-rgb), 0.72);
  line-height: 1.6;
}
.istikhara-jafari-result-value {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--white-soft);
}

/* Lists — base (RTL default) */
.istikhara-jafari-list {
  padding-right: 20px;
  padding-left: 0;
  margin: 8px 0;
}
.istikhara-jafari-list li {
  font-size: var(--fs-body);
  color: rgba(var(--white-soft-rgb), 0.80);
  line-height: 2.1;
  margin-bottom: 4px;
}
.istikhara-jafari-list strong {
  color: rgba(var(--gold-rgb), 0.85);
}

/* Lists — flip padding for LTR languages */
html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-list,
html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-sources {
  padding-right: 0;
  padding-left: 20px;
}

/* Sources — base (RTL default) */
.istikhara-jafari-sources {
  padding-right: 20px;
  padding-left: 0;
  margin: 8px 0;
}
.istikhara-jafari-sources li {
  font-size: var(--fs-meta);
  color: rgba(var(--white-soft-rgb), 0.50);
  line-height: 2;
}

/* Reference inline */
.istikhara-jafari-ref {
  font-size: var(--fs-micro);
  color: rgba(var(--gold-rgb), 0.40);
  display: inline;
  margin-right: 4px;
}



/* ---------------------------------------------------------
   Compatibility patch for restored Jafari screen
   --------------------------------------------------------- */
#screenIstikhara[data-mode="jafari"] .istikhara-jafari-page {
  max-width: 100%;
}
#screenIstikhara[data-mode="jafari"] .divider {
  margin: 22px 0;
}


/* Multilingual Jafari overrides */
html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-subtitle-ar,
html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-section-title,
html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-subsection-title,
html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-text,
html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-method-text,
html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-result-label,
html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-result-value,
html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-list li,
html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-sources li,
html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-ref {
  font-family: var(--sans);
  direction: ltr;
  text-align: left;
}

html[dir="rtl"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-subtitle-ar,
html[dir="rtl"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-section-title,
html[dir="rtl"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-subsection-title,
html[dir="rtl"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-text,
html[dir="rtl"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-method-text,
html[dir="rtl"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-result-label,
html[dir="rtl"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-result-value,
html[dir="rtl"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-list li,
html[dir="rtl"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-sources li,
html[dir="rtl"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-ref {
  font-family: var(--arabic);
}

/* ---------------------------------------------------------
   Hero translatable elements — follow UI language direction.
   bismillah / salawat / title are now translated via _t()
   so they must follow page direction like any other text.
   --------------------------------------------------------- */

/* LTR languages (EN, FR, TR, ID, BN, MS) */
html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-bismillah,
html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-salawat,
html[dir="ltr"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-title-ar {
  font-family: var(--sans);
  direction: ltr;
  text-align: center;
}

/* RTL languages (AR, FA, UR) — keep Arabic font */
html[dir="rtl"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-bismillah,
html[dir="rtl"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-salawat,
html[dir="rtl"] #screenIstikhara[data-mode="jafari"] .istikhara-jafari-title-ar {
  font-family: var(--arabic);
  direction: rtl;
  text-align: center;
}

/* ---------------------------------------------------------
   Sacred Arabic liturgical content — ALWAYS Arabic/RTL
   regardless of UI language. These are never translated:
   Quranic verse, duas, hadith body text, hadith sources.
   --------------------------------------------------------- */
#screenIstikhara[data-mode="jafari"] .istikhara-jafari-quran,
#screenIstikhara[data-mode="jafari"] .istikhara-jafari-dua,
#screenIstikhara[data-mode="jafari"] .istikhara-jafari-hadith-text,
#screenIstikhara[data-mode="jafari"] .istikhara-jafari-hadith-source {
  direction: rtl;
  text-align: right;
  font-family: var(--arabic);
}

/* styles/quran-v4.css */
/* Quran v4 patch styles */
.quran-speed-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.quran-speed-stepper .btn {
  min-width: 2.75rem;
  padding: 0.7rem 1rem;
  font-size: 1.05rem;
  font-weight: 700;
}

.quran-speed-stepper select {
  min-width: 7rem;
}

#btnReaderTop {
  display: none !important;
}

#reader {
  width: 100%;
  min-height: 68vh;
}

#reader.fullscreen-active,
.fullscreen-active #reader {
  min-height: 96vh !important;
}

.quran-reader-shell:fullscreen {
  padding: 1rem;
  background: var(--bg, #08152e);
}


/* Quran v6 patch styles */
.quran-simple-audio-actions{align-items:center;gap:12px;flex-wrap:wrap}
.quran-simple-speed{display:inline-flex !important;align-items:center;gap:.55rem;flex-wrap:wrap;margin-left:.5rem}
.quran-simple-speed-label{font-size:.92rem;color:var(--muted)}
.quran-simple-speed-value{min-width:3.25rem;text-align:center;padding:.55rem .75rem;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-weight:600;color:var(--text, #fff)}
.quran-simple-speed .btn,.quran-speed-step{min-width:2.6rem;padding:.7rem .9rem;font-size:1.05rem;font-weight:700;line-height:1}
#quranSpeedControls{display:inline-flex !important;visibility:visible !important;opacity:1 !important}
#btnReaderFullscreen{margin-left:auto}
#reader{min-height:72vh}
@media (max-width: 720px){
  .quran-simple-speed{width:100%;margin-left:0}
  #audioStatus{width:100%}
}


/* Quran fullscreen + cache-safe hotfix */
#btnReaderFullscreen{margin-left:auto}
#quranReaderCard.fullscreen-active,
#quranReaderCard:fullscreen{padding:1rem;background:var(--bg, #08152e);overflow:auto}
#quranReaderCard.fullscreen-active #reader,
#quranReaderCard:fullscreen #reader{min-height:90vh !important}
#quranReaderCard.fullscreen-active #pageNav,
#quranReaderCard:fullscreen #pageNav{position:sticky;top:0;z-index:2;background:rgba(8,21,46,.92);backdrop-filter:blur(6px);padding-bottom:.5rem}

/* Quran fullscreen sizing + overflow safety patch */
#quranReaderCard.fullscreen-active,
#quranReaderCard:fullscreen{
  width:100vw;
  height:100vh;
  max-width:none;
  margin:0;
  padding:.5rem;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:.5rem;
  overflow:hidden;
  background:var(--bg, #08152e);
}

#quranReaderCard.fullscreen-active .card-head,
#quranReaderCard:fullscreen .card-head{
  margin-bottom:0;
}

#quranReaderCard.fullscreen-active #pageNav,
#quranReaderCard:fullscreen #pageNav{
  flex:0 0 auto;
}

#quranReaderCard.fullscreen-active #reader,
#quranReaderCard:fullscreen #reader{
  flex:1 1 auto;
  height:calc(100vh - 9.5rem);
  min-height:calc(100vh - 9.5rem) !important;
  overflow:auto;
  padding-bottom:1rem;
}

#quranReaderCard.fullscreen-active .mushaf-book,
#quranReaderCard:fullscreen .mushaf-book,
#quranReaderCard.fullscreen-active .mushaf-spread,
#quranReaderCard:fullscreen .mushaf-spread,
#quranReaderCard.fullscreen-active .mushaf-page,
#quranReaderCard:fullscreen .mushaf-page{
  height:100%;
}

#quranReaderCard.fullscreen-active .mushaf-inner,
#quranReaderCard:fullscreen .mushaf-inner{
  height:100%;
  overflow-y:auto;
  padding-bottom:1rem;
  box-sizing:border-box;
}

#quranReaderCard.fullscreen-active .ayah,
#quranReaderCard:fullscreen .ayah{
  overflow:visible;
}

@media (max-width: 720px){
  #quranReaderCard.fullscreen-active #reader,
  #quranReaderCard:fullscreen #reader{
    height:calc(100vh - 10.5rem);
    min-height:calc(100vh - 10.5rem) !important;
  }
}

/* Quran fullscreen fill + theme flexibility refinement */
:root{
  --quran-reader-bg: var(--bg, #08152e);
  --quran-reader-topbar-bg: rgba(8,21,46,.94);
  --quran-reader-card-shadow: 0 12px 40px rgba(0,0,0,.18);
  --quran-reader-frame-tint: rgba(212,179,95,.04);
  --quran-reader-page-bg: rgba(255,248,232,.985);
  --quran-reader-page-border: rgba(212,179,95,.28);
  --quran-reader-page-radius: 28px;
  --quran-reader-fullscreen-padding: .35rem;
  --quran-reader-top-offset: 7.2rem;
}

#quranReaderCard{
  --quran-local-page-gap: 10px;
}

#quranReaderCard .card-head{
  margin-bottom: .35rem;
}

#quranReaderCard #pageNav{
  gap: .7rem;
}

#quranReaderCard #reader{
  padding-bottom: .35rem;
}

#quranReaderCard .mushaf-book{
  min-height: 72vh;
}

#quranReaderCard .mushaf-spread{
  min-height: inherit;
}

#quranReaderCard .mushaf-page{
  background: var(--quran-reader-frame-tint);
  border-radius: calc(var(--quran-reader-page-radius) + 4px);
  box-shadow: var(--quran-reader-card-shadow);
}

#quranReaderCard .mushaf-inner{
  background: transparent;
}

#quranReaderCard .ayah{
  background: var(--quran-reader-page-bg);
  border-color: var(--quran-reader-page-border);
}

#quranReaderCard .surah-header .plaque{
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Stronger fullscreen fill */
#quranReaderCard.fullscreen-active,
#quranReaderCard:fullscreen{
  padding: var(--quran-reader-fullscreen-padding);
  gap: .35rem;
  background: var(--quran-reader-bg);
}

#quranReaderCard.fullscreen-active .card-head,
#quranReaderCard:fullscreen .card-head{
  flex: 0 0 auto;
  margin-bottom: .15rem;
}

#quranReaderCard.fullscreen-active #pageNav,
#quranReaderCard:fullscreen #pageNav{
  position: sticky;
  top: 0;
  z-index: 3;
  flex: 0 0 auto;
  min-height: 56px;
  padding: .2rem 0 .35rem;
  background: var(--quran-reader-topbar-bg);
  backdrop-filter: blur(6px);
}

#quranReaderCard.fullscreen-active #reader,
#quranReaderCard:fullscreen #reader{
  flex: 1 1 auto;
  height: calc(100vh - var(--quran-reader-top-offset));
  min-height: calc(100vh - var(--quran-reader-top-offset)) !important;
  max-height: calc(100vh - var(--quran-reader-top-offset));
  overflow: auto;
  padding-bottom: .35rem;
}

#quranReaderCard.fullscreen-active .mushaf-book,
#quranReaderCard:fullscreen .mushaf-book{
  min-height: 100%;
  height: 100%;
}

#quranReaderCard.fullscreen-active .mushaf-spread,
#quranReaderCard:fullscreen .mushaf-spread{
  min-height: 100%;
  height: 100%;
  align-items: stretch;
}

#quranReaderCard.fullscreen-active .mushaf-page,
#quranReaderCard:fullscreen .mushaf-page{
  min-height: 100%;
  height: 100%;
}

#quranReaderCard.fullscreen-active .mushaf-inner,
#quranReaderCard:fullscreen .mushaf-inner{
  min-height: 100%;
  height: 100%;
  overflow-y: auto;
  padding-bottom: .5rem;
}

#quranReaderCard.fullscreen-active .ayah:last-child,
#quranReaderCard:fullscreen .ayah:last-child{
  margin-bottom: 0;
}

/* User-friendly visual polish without behavior changes */
#quranReaderCard .ayah:hover{
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

#quranReaderCard .bookmark-btn,
#quranReaderCard .tafsir-btn{
  opacity: .88;
}

#quranReaderCard .bookmark-btn:hover,
#quranReaderCard .tafsir-btn:hover{
  opacity: 1;
  transform: translateY(-1px);
}

@media (max-width: 720px){
  :root{
    --quran-reader-fullscreen-padding: .25rem;
    --quran-reader-top-offset: 8.2rem;
  }

  #quranReaderCard.fullscreen-active #pageNav,
  #quranReaderCard:fullscreen #pageNav{
    padding-bottom: .3rem;
  }

  #quranReaderCard .mushaf-page{
    border-radius: 20px;
  }
}

/* Quran active ayah highlight — CSS-only safe patch */
:root{
  --quran-active-ayah-bg: rgba(245, 230, 185, 0.995);
  --quran-active-ayah-border: rgba(201, 169, 77, 0.58);
  --quran-active-ayah-shadow: 0 0 0 1px rgba(201, 169, 77, 0.16), 0 8px 18px rgba(0, 0, 0, 0.05);
}

#reader .ayah.active,
#quranReaderCard .ayah.active{
  background: var(--quran-active-ayah-bg) !important;
  border-color: var(--quran-active-ayah-border) !important;
  box-shadow: var(--quran-active-ayah-shadow) !important;
  position: relative;
  z-index: 1;
}

#reader .ayah.active::after,
#quranReaderCard .ayah.active::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(201, 169, 77, 0.42);
  pointer-events: none;
}

#reader .ayah.active .ayah-ref,
#quranReaderCard .ayah.active .ayah-ref{
  color: rgba(85, 64, 12, 0.95);
  font-weight: 600;
}

#reader .ayah.active .ayah-end,
#quranReaderCard .ayah.active .ayah-end{
  filter: saturate(1.08);
}

#quranReaderCard:fullscreen .ayah.active,
#quranReaderCard.fullscreen-active .ayah.active{
  box-shadow: 0 0 0 2px rgba(201, 169, 77, 0.26), 0 12px 28px rgba(0, 0, 0, 0.10) !important;
}

/* styles/qibla.css */
/* ───────────────────────────────────────────────────────────────
   QIBLA COMPASS — integrated premium UI
   ───────────────────────────────────────────────────────────────
   Extracted from inline <style id="qiblaIntegratedStyles">.
   Scoped under #screenQibla so it cannot leak elsewhere.
   Load LAST in the stylesheet cascade (after quran-v4.css) to
   preserve the specificity order the inline block had.
   ─────────────────────────────────────────────────────────────── */

#screenQibla .qibla-integrated-wrap{display:flex;flex-direction:column;gap:18px}
  #screenQibla .qibla-premium{position:relative;overflow:hidden;background:radial-gradient(circle at 20% 20%,rgba(197,150,64,.08),transparent 40%),radial-gradient(circle at 80% 80%,rgba(18,156,117,.06),transparent 35%),linear-gradient(180deg,#0b1733,#071126);border:1px solid rgba(197,150,64,.16)}
  #screenQibla .qibla-premium::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.03),transparent 34%);pointer-events:none}
  #screenQibla .qibla-intro{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border:1px solid rgba(197,150,64,.12);border-radius:18px;background:rgba(9,18,39,.72)}
  #screenQibla .qibla-intro-copy{max-width:720px}
  #screenQibla .qibla-intro-title{font-size:1.8rem;margin:0 0 6px;color:#f6f1df}
  #screenQibla .qibla-intro-sub{color:rgba(232,237,245,.75);line-height:1.55}
  #screenQibla .qibla-permission-note{margin-top:10px;font-size:.92rem;color:#d6c28b}
  #screenQibla .qibla-enable-btn{white-space:nowrap}
  #screenQibla .qibla-stage{display:grid;grid-template-columns:minmax(280px,1.2fr) minmax(260px,.8fr);gap:22px;align-items:center}
  #screenQibla .qibla-compass-shell{position:relative;display:flex;align-items:center;justify-content:center;padding:12px}
  #screenQibla .qibla-compass-premium{position:relative;width:min(78vw,420px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 38%,rgba(255,255,255,.04),transparent 32%),radial-gradient(circle at 50% 50%,#0d1935,#071026 72%);box-shadow:0 16px 44px rgba(0,0,0,.35),0 0 0 1px rgba(197,150,64,.12),0 0 42px rgba(197,150,64,.14)}
  #screenQibla .qibla-compass-premium::before{content:'';position:absolute;inset:10px;border-radius:50%;border:1px solid rgba(197,150,64,.22);box-shadow:inset 0 0 0 10px rgba(255,255,255,.02)}
  #screenQibla .qibla-compass-premium::after{content:'';position:absolute;inset:22px;border-radius:50%;border:1px solid rgba(255,255,255,.06)}
  #screenQibla .qibla-compass-face{position:absolute;inset:0;transition:transform .18s ease-out}
  #screenQibla .qibla-cardinal{position:absolute;left:50%;top:16px;transform:translateX(-50%);font-size:2rem;font-weight:700;color:#ecd99c;text-shadow:0 1px 10px rgba(236,217,156,.18)}
  #screenQibla .qibla-cardinal--e{top:50%;left:auto;right:22px;transform:translateY(-50%)}
  #screenQibla .qibla-cardinal--s{top:auto;bottom:16px;transform:translateX(-50%)}
  #screenQibla .qibla-cardinal--w{top:50%;left:22px;transform:translateY(-50%)}
  #screenQibla .qibla-ticks{position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,0) 0 4deg,rgba(255,255,255,.06) 4deg 5deg,rgba(255,255,255,0) 5deg 10deg);-webkit-mask:radial-gradient(circle,transparent 57%,#000 57.5%,#000 66%,transparent 66.5%);mask:radial-gradient(circle,transparent 57%,#000 57.5%,#000 66%,transparent 66.5%)}
  #screenQibla .qibla-line{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .18s ease-out}
  #screenQibla .qibla-beam{position:absolute;left:50%;top:11%;transform:translateX(-50%);width:5px;height:37%;border-radius:999px;background:linear-gradient(to top,rgba(24,159,118,.06),rgba(24,159,118,.45),#32d1a1);box-shadow:0 0 14px rgba(50,209,161,.38)}
  #screenQibla .qibla-marker{position:absolute;left:50%;top:4%;transform:translateX(-50%);width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.10),rgba(9,18,39,.78));border:2px solid rgba(50,209,161,.55);box-shadow:0 0 24px rgba(50,209,161,.28),0 6px 14px rgba(0,0,0,.28)}
  #screenQibla .qibla-marker img{width:44px;height:44px;object-fit:contain}
  #screenQibla .qibla-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#f9ebbd,#d0a64b 60%,#946b1d 100%);box-shadow:0 0 22px rgba(208,166,75,.28)}
  #screenQibla .qibla-needle-fixed{position:absolute;left:50%;top:50%;width:28px;height:170px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 8px 10px rgba(0,0,0,.24))}
  #screenQibla .qibla-needle-fixed svg{display:block;width:100%;height:100%}
  #screenQibla .qibla-copy{display:flex;flex-direction:column;gap:14px}
  #screenQibla .qibla-cityline{font-size:.95rem;color:rgba(232,237,245,.75)}
  #screenQibla .qibla-headline{font-size:2rem;color:#f7f2df;margin:0}
  #screenQibla .qibla-status-line{font-size:1.02rem;color:#b8c3d7;line-height:1.55}
  #screenQibla .qibla-warning{padding:12px 14px;border-radius:14px;background:rgba(197,150,64,.10);border:1px solid rgba(197,150,64,.18);color:#ead8a8;font-size:.94rem;line-height:1.5}
  #screenQibla .qibla-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
  #screenQibla .qibla-inline-status{min-height:22px;font-size:.92rem;color:rgba(232,237,245,.78)}
  #screenQibla .qibla-facing-badge{display:none;align-self:flex-start;padding:7px 12px;border-radius:999px;background:rgba(24,159,118,.16);border:1px solid rgba(50,209,161,.32);color:#81efca;font-weight:600}
  #screenQibla .qibla-facing-badge.is-visible{display:inline-flex}
  #screenQibla .qibla-compass-premium.is-facing{box-shadow:0 16px 44px rgba(0,0,0,.35),0 0 0 1px rgba(50,209,161,.30),0 0 48px rgba(50,209,161,.22)}
  #screenQibla .qibla-compass-premium.is-facing .qibla-marker{box-shadow:0 0 28px rgba(50,209,161,.45),0 6px 14px rgba(0,0,0,.28)}
  #screenQibla .qibla-help{font-size:.92rem;color:rgba(232,237,245,.7)}
  @media (max-width: 900px){#screenQibla .qibla-stage{grid-template-columns:1fr}#screenQibla .qibla-copy{align-items:flex-start}#screenQibla .qibla-compass-premium{width:min(86vw,410px)}}

/* styles/tasbih.css */
/* ═══════════════════════════════════════════════════════════════
   TASBIH — Digital Counter
   ═══════════════════════════════════════════════════════════════ */

.tasbih-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 24px 20px 32px;
}

/* ── Preset selector ── */
.tasbih-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.tasbih-preset-btn {
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--gold-rgb), 0.20);
  background: rgba(var(--gold-rgb), 0.05);
  color: var(--muted);
  font-size: var(--fs-meta);
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--sans);
}
.tasbih-preset-btn:hover {
  background: rgba(var(--gold-rgb), 0.12);
  color: var(--fg);
}
.tasbih-preset-btn.active {
  background: rgba(var(--gold-rgb), 0.15);
  border-color: rgba(var(--gold-rgb), 0.45);
  color: var(--gold-light);
  font-weight: 600;
}

/* ── Phase indicator ── */
.tasbih-phase-label {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--fg);
  display: flex;
  align-items: center;
  gap: 8px;
}
.tasbih-phase-dots {
  display: flex;
  gap: 10px;
}
.tasbih-phase-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
  transition: all 0.25s ease;
}
.tasbih-phase-dot.done {
  background: rgba(var(--green-rgb), 0.7);
  border-color: rgba(var(--green-rgb), 0.9);
}
.tasbih-phase-dot.active {
  background: rgba(var(--gold-rgb), 0.8);
  border-color: rgba(var(--gold-rgb), 1);
  box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.4);
}

/* ── Tap ring ── */
.tasbih-ring-wrap {
  position: relative;
  width: 180px;
  height: 180px;
}
.tasbih-ring-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.tasbih-tap-btn {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid rgba(var(--gold-rgb), 0.20);
  background: radial-gradient(circle at 40% 35%, rgba(var(--gold-rgb), 0.10), transparent 70%),
              rgba(255,255,255,0.03);
  color: var(--fg);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  transition: transform 0.1s ease, background 0.2s ease, border-color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: manipulation;
}
.tasbih-tap-btn:hover {
  background: radial-gradient(circle at 40% 35%, rgba(var(--gold-rgb), 0.18), transparent 70%);
  border-color: rgba(var(--gold-rgb), 0.35);
}
.tasbih-tap-btn:active {
  transform: scale(0.95);
  background: radial-gradient(circle at 40% 35%, rgba(var(--gold-rgb), 0.25), transparent 70%);
}
.tasbih-tap-count {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 700;
  color: var(--gold-light);
  line-height: 1;
}
.tasbih-tap-target {
  font-size: var(--fs-meta);
  color: var(--muted);
}

/* ── Progress bar ── */
.tasbih-progress-bar {
  width: 100%;
  max-width: 280px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.tasbih-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.8), rgba(var(--green-rgb), 0.6));
  transition: width 0.25s ease;
}

/* ── Actions ── */
.tasbih-actions {
  display: flex;
  gap: 10px;
}
.tasbih-action-btn {
  min-height: 40px;
  padding: 8px 16px;
  font-size: var(--fs-meta);
}

/* ── Total ── */
.tasbih-total {
  font-size: var(--fs-meta);
  color: var(--muted);
}
.tasbih-total strong {
  color: var(--gold-light);
  font-family: var(--mono);
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .tasbih-ring-wrap { width: 150px; height: 150px; }
  .tasbih-tap-count { font-size: 34px; }
  .tasbih-presets { gap: 6px; }
  .tasbih-preset-btn { padding: 6px 12px; font-size: var(--fs-micro); }
}

/* styles/hajj-guide.css */
/* ═══════════════════════════════════════════════════════════════
   HAJJ & UMRAH GUIDE
   ═══════════════════════════════════════════════════════════════ */

.hajj-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.hajj-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}

.hajj-title {
  font-family: var(--arabic);
  font-size: var(--fs-h1);
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: 4px;
}

.hajj-subtitle {
  font-size: var(--fs-body);
  color: var(--muted);
}

.hajj-fikh-badge {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  background: rgba(var(--purple-rgb), 0.15);
  border: 1px solid rgba(var(--purple-rgb), 0.25);
  font-size: var(--fs-micro);
  color: rgba(var(--purple-rgb), 0.9);
}

.hajj-progress {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 80px;
}

.hajj-progress-text {
  font-family: var(--mono);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--gold-light);
}

.hajj-progress-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}

.hajj-progress-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold), var(--green-islamic));
  transition: width 0.4s ease;
}

.hajj-guide-toggle {
  display: flex;
  gap: 8px;
}

.hajj-toggle-btn {
  flex: 1;
  padding: 12px 20px;
  border-radius: var(--radius);
  border: 1px solid rgba(var(--gold-rgb), 0.20);
  background: rgba(var(--gold-rgb), 0.05);
  color: var(--muted);
  font-family: var(--arabic);
  font-size: var(--fs-body);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* styles/tracker-picker.css */
/* ═══════════════════════════════════════════════════════════════
   Ummah Compass — tracker-picker.css

   Styles for the tracker's status picker bottom sheet, toast
   notifications, confirm modal, and missing status variants.

   Extends components.css — never duplicates what's already there.
   All values reference tokens from tokens.css.

   Covers:
     1. Missing prayer button status variants (qada, excused)
     2. Day dot colours (data-status)
     3. Heatmap data-status bridge (new JS uses data-status,
        old CSS used data-val — both are supported here)
     4. Jumu'ah day cell styling
     5. Status picker bottom sheet
     6. Toast notifications
     7. Confirm modal
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1. PRAYER BUTTON — MISSING STATUS VARIANTS
   components.css handles: ontime, late, missed
   These add: qada, excused (all categories share one style)
   ───────────────────────────────────────────────────────────── */

.tracker-prayer-btn[data-status="qada"] {
  border-color: rgba(var(--purple-rgb), 0.40);
  background:   rgba(var(--purple-rgb), 0.08);
}
.tracker-prayer-btn[data-status="qada"] .prayer-status {
  color: rgba(var(--purple-rgb), 1);
}

/* All excused variants (excused:illness, excused:travel, etc.)
   share the same blue tint. The category detail lives in the
   label text, not the colour. */
.tracker-prayer-btn[data-status^="excused"] {
  border-color: rgba(var(--blue-rgb), 0.35);
  background:   rgba(var(--blue-rgb), 0.07);
}
.tracker-prayer-btn[data-status^="excused"] .prayer-status {
  color: rgba(var(--blue-rgb), 0.90);
}


/* ─────────────────────────────────────────────────────────────
   2. DAY DOTS — data-status colour mapping
   components.css defines the dot shape (.day-dot) but no colours.
   ───────────────────────────────────────────────────────────── */

.day-dot[data-status="ontime"]          { background: rgba(var(--green-rgb),  0.90); }
.day-dot[data-status="late"]            { background: rgba(var(--gold-rgb),   0.75); }
.day-dot[data-status="missed"]          { background: rgba(var(--rose-rgb),   0.65); }
.day-dot[data-status="qada"]            { background: rgba(var(--purple-rgb), 0.85); }
.day-dot[data-status="excused"]         { background: rgba(var(--blue-rgb),   0.70); }
.day-dot[data-status="none"],
.day-dot:not([data-status])             { background: rgba(255,255,255,       0.10); }


/* ─────────────────────────────────────────────────────────────
   3. HEATMAP — data-status bridge
   Old JS wrote data-val, new JS writes data-status.
   components.css already covers data-val; this covers data-status
   so both old and new data render correctly.
   ───────────────────────────────────────────────────────────── */

.tracker-heat-cell[data-status="ontime"]          { background: rgba(var(--green-rgb),  0.90); }
.tracker-heat-cell[data-status="late"]            { background: rgba(var(--gold-rgb),   0.72); }
.tracker-heat-cell[data-status="missed"]          { background: rgba(var(--rose-rgb),   0.52); }
.tracker-heat-cell[data-status="qada"]            { background: rgba(var(--purple-rgb), 0.70); }
.tracker-heat-cell[data-status="excused"]         { background: rgba(var(--blue-rgb),   0.55); }
.tracker-heat-cell[data-status="none"],
.tracker-heat-cell:not([data-status])             { background: rgba(255,255,255,       0.06); }


/* ─────────────────────────────────────────────────────────────
   4. JUMU'AH DAY CELL
   .jumuah class marks Fridays in the grid.
   data-jumuah="attended|missed" on the cell.
   ───────────────────────────────────────────────────────────── */

.tracker-day.jumuah .day-num {
  color: rgba(var(--gold-rgb), 0.85);
}
.tracker-day.jumuah {
  border-color: rgba(var(--gold-rgb), 0.14);
}
.tracker-day[data-jumuah="attended"] {
  box-shadow: inset 0 0 0 1px rgba(var(--gold-rgb), 0.30);
}
.tracker-day[data-jumuah="missed"] {
  box-shadow: inset 0 0 0 1px rgba(var(--rose-rgb), 0.22);
}


/* ─────────────────────────────────────────────────────────────
   5. STATUS PICKER — BOTTOM SHEET
   Appears when user taps a prayer button.
   Slides up from the bottom on mobile, centred on desktop.
   ───────────────────────────────────────────────────────────── */

.picker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: pickerFadeIn var(--dur-fast) var(--ease-out);
}

@keyframes pickerFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.picker-sheet {
  width: 100%;
  max-width: 480px;
  background: rgba(10, 18, 40, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(var(--gold-rgb), 0.14);
  border-top: 1px solid rgba(var(--gold-rgb), 0.22);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 0 0 calc(16px + var(--safe-bottom, 0px));
  max-height: 82vh;
  overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.45);
  animation: pickerSlideUp 0.26s var(--ease-out);
}

@keyframes pickerSlideUp {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Drag handle — purely decorative */
.picker-sheet::before {
  content: "";
  display: block;
  width: 36px;
  height: 4px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.15);
  margin: 12px auto 4px;
}

.picker-header {
  padding: 10px 20px 14px;
  font-family: var(--display);
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--fg);
  border-bottom: 1px solid rgba(var(--gold-rgb), 0.10);
  letter-spacing: var(--tracking-title);
}

/* Section label above the Excused group */
.picker-section-label {
  padding: 14px 20px 6px;
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.picker-option {
  display: flex;
  align-items: center;
  padding: 13px 20px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  color: var(--fg);
  cursor: pointer;
  transition:
    background var(--dur-fast) var(--ease-out),
    color     var(--dur-fast) var(--ease-out);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.picker-option:last-child { border-bottom: none; }

.picker-option:hover,
.picker-option:focus-visible {
  background: rgba(var(--green-rgb), 0.08);
  outline: none;
}
.picker-option:active {
  background: rgba(var(--green-rgb), 0.14);
  transform: scale(0.99);
}

/* Currently selected option */
.picker-option-active {
  background: rgba(var(--green-rgb), 0.10);
  color: rgba(var(--green-rgb), 1);
  font-weight: 600;
}
.picker-option-active::after {
  content: "✓";
  margin-left: auto;
  font-size: var(--fs-meta);
  color: rgba(var(--green-rgb), 0.85);
}

/* Clear option — visually de-emphasised */
.picker-clear {
  color: var(--muted);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  margin-top: 4px;
}
.picker-clear:hover { background: rgba(var(--rose-rgb), 0.06); color: var(--rose); }


/* ─────────────────────────────────────────────────────────────
   6. TOAST NOTIFICATIONS
   Non-blocking status messages — replaces alert().
   ───────────────────────────────────────────────────────────── */

.toast-container {
  position: fixed;
  bottom: calc(72px + var(--safe-bottom, 0px)); /* above bottom nav */
  left: 50%;
  transform: translateX(-50%);
  z-index: 400;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  width: max-content;
  max-width: calc(100vw - 40px);
}

.toast {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  font-weight: 500;
  background: rgba(10, 18, 40, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--fg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition:
    opacity   0.22s var(--ease-out),
    transform 0.22s var(--ease-out);
  white-space: nowrap;
}

.toast.toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast.toast-success {
  border-color: rgba(var(--green-rgb), 0.35);
  color: rgba(var(--green-rgb), 0.95);
}
.toast.toast-error {
  border-color: rgba(var(--rose-rgb), 0.35);
  color: var(--rose);
}
.toast.toast-info {
  border-color: rgba(var(--blue-rgb), 0.25);
  color: rgba(var(--blue-rgb), 0.90);
}


/* ─────────────────────────────────────────────────────────────
   7. CONFIRM MODAL
   Async styled modal — replaces confirm().
   Used for destructive actions (Clear All Tracker Data).
   ───────────────────────────────────────────────────────────── */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 350;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: pickerFadeIn var(--dur-fast) var(--ease-out);
}

.modal-box {
  width: 100%;
  max-width: 360px;
  background: rgba(10, 18, 40, 0.98);
  border: 1px solid rgba(var(--gold-rgb), 0.18);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-xl), 0 0 60px rgba(0,0,0,0.5);
  animation: modalPop 0.22s var(--ease-out);
}

@keyframes modalPop {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.modal-msg {
  margin: 0 0 20px;
  font-family: var(--sans);
  font-size: var(--fs-body);
  color: var(--fg);
  line-height: 1.6;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.modal-btn {
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  cursor: pointer;
  transition:
    background     var(--dur-fast) var(--ease-out),
    border-color   var(--dur-fast) var(--ease-out),
    transform      var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.modal-btn:hover  { background: rgba(255,255,255,0.06); border-color: var(--border-hover); }
.modal-btn:active { transform: scale(0.97); }

.modal-btn-cancel {
  color: var(--muted);
}
.modal-btn-cancel:hover { color: var(--fg); }

.modal-btn-confirm {
  background: rgba(var(--rose-rgb), 0.12);
  border-color: rgba(var(--rose-rgb), 0.30);
  color: var(--rose);
}
.modal-btn-confirm:hover {
  background: rgba(var(--rose-rgb), 0.20);
  border-color: rgba(var(--rose-rgb), 0.50);
}


/* ─────────────────────────────────────────────────────────────
   8. REDUCED MOTION
   Respects user preference — disables all animations.
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .picker-overlay,
  .picker-sheet,
  .modal-box,
  .toast {
    animation: none;
    transition: none;
  }
}

/* styles/pin-modal.css */
/* ═══════════════════════════════════════════════════════════════
   Ummah Compass — pin-modal.css

   Styles for the identity setup modal and PIN unlock flows.
   Covers:
     1.  Overlay + card shell
     2.  Step layout (icon, title, desc, actions)
     3.  Trust points list
     4.  Recovery phrase grid (12 numbered words)
     5.  Word verification inputs
     6.  PIN input + strength indicator
     7.  Restore textarea
     8.  Done state
     9.  Locked / countdown state
     10. Loading state
     11. Error state
     12. Restore link (secondary CTA)
     13. Animations
     14. Reduced motion
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   CLOSE BUTTON
   ───────────────────────────────────────────────────────────── */

.identity-close-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background  var(--dur-fast) var(--ease-out),
    color       var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.identity-close-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--fg);
}

/* ─────────────────────────────────────────────────────────────
   WHY DO WE NEED THIS — ACCORDION
   ───────────────────────────────────────────────────────────── */

.identity-why-wrap {
  border: 1px solid rgba(var(--gold-rgb), 0.14);
  border-radius: var(--radius);
  overflow: hidden;
}

.identity-why-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(var(--gold-rgb), 0.05);
  border: none;
  color: rgba(var(--gold-rgb), 0.85);
  font-family: var(--mono);
  font-size: var(--fs-label);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.identity-why-toggle:hover {
  background: rgba(var(--gold-rgb), 0.10);
}

.identity-why-chev {
  font-size: 0.75rem;
  transition: transform var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}

.identity-why-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, 0.02);
  border-top: 1px solid rgba(var(--gold-rgb), 0.10);
}
.identity-why-body.hidden { display: none; }

.identity-why-body p {
  font-family: var(--sans);
  font-size: var(--fs-meta);
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* card position:relative is already set in section 1 above */

.identity-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;          /* shown via JS: style.display = 'flex' */
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.70);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: idFadeIn 0.2s var(--ease-out);
}

@keyframes idFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.identity-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  background: rgba(8, 15, 36, 0.98);
  border: 1px solid rgba(var(--gold-rgb), 0.18);
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(var(--gold-rgb), 0.06) inset;
  animation: idSlideUp 0.26s var(--ease-out);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--gold-rgb), 0.15) transparent;
}

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


/* ─────────────────────────────────────────────────────────────
   2. STEP LAYOUT
   ───────────────────────────────────────────────────────────── */

.identity-step {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 28px 28px;
}

.identity-icon {
  font-size: 2.25rem;
  line-height: 1;
  text-align: center;
  margin-bottom: 4px;
}

.identity-title {
  font-family: var(--display);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: var(--tracking-title);
  text-align: center;
  margin: 0;
}

.identity-desc {
  font-family: var(--sans);
  font-size: var(--fs-body);
  color: var(--muted);
  line-height: 1.6;
  text-align: center;
  margin: 0;
}

.identity-warning {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: rgba(var(--gold-rgb), 0.85);
  background: rgba(var(--gold-rgb), 0.07);
  border: 1px solid rgba(var(--gold-rgb), 0.18);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  line-height: 1.5;
  margin: 0;
}

.identity-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.identity-actions .btn {
  width: 100%;
  justify-content: center;
}


/* ─────────────────────────────────────────────────────────────
   3. TRUST POINTS LIST
   ───────────────────────────────────────────────────────────── */

.identity-points {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius);
  padding: 16px;
}

.identity-point {
  font-family: var(--sans);
  font-size: var(--fs-label);
  color: var(--fg);
  line-height: 1.5;
}


/* ─────────────────────────────────────────────────────────────
   4. RECOVERY PHRASE GRID
   ───────────────────────────────────────────────────────────── */

.identity-phrase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(var(--gold-rgb), 0.14);
  border-radius: var(--radius);
  padding: 14px;
}

.identity-word-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-sm);
}

.identity-word-num {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--muted);
  min-width: 16px;
  text-align: right;
  flex-shrink: 0;
}

/* Position number used in the grid — small sequence indicator */
.identity-word-num-lg {
  font-size: var(--fs-micro);
  color: var(--muted);
  min-width: 18px;
}

/* The actual recovery number — large and prominent */
.identity-word-val {
  font-family: var(--mono);
  font-size: var(--fs-h2);
  font-weight: 700;
  color: rgba(var(--gold-rgb), 0.95);
  letter-spacing: 0.02em;
}

/* Phrase note — explains numbers are universal */
.identity-phrase-note {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--muted);
  text-align: center;
  line-height: 1.5;
  padding: 0 4px;
}

/* Phrase actions row — copy + toggle side by side */
.identity-phrase-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.identity-copy-btn {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  cursor: pointer;
  transition:
    color         var(--dur-fast) var(--ease-out),
    border-color  var(--dur-fast) var(--ease-out),
    background    var(--dur-fast) var(--ease-out);
}
.identity-copy-btn:hover {
  color: var(--fg);
  border-color: rgba(var(--gold-rgb), 0.30);
  background: rgba(var(--gold-rgb), 0.05);
}


/* ─────────────────────────────────────────────────────────────
   5. WORD VERIFICATION INPUTS
   ───────────────────────────────────────────────────────────── */

.identity-verify-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.identity-verify-row {
  display: grid;
  grid-template-columns: 80px 1fr 24px;
  align-items: center;
  gap: 10px;
}

.identity-verify-label {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--muted);
  white-space: nowrap;
}

.identity-verify-input {
  width: 100%;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs-label);
  transition: border-color var(--dur-fast) var(--ease-out);
  outline: none;
}
.identity-verify-input:focus {
  border-color: rgba(var(--gold-rgb), 0.40);
}
.identity-verify-input[data-valid="1"] {
  border-color: rgba(var(--green-rgb), 0.50);
}
.identity-verify-input[data-valid="0"] {
  border-color: rgba(var(--rose-rgb), 0.50);
}

.identity-verify-icon {
  font-size: var(--fs-body);
  text-align: center;
  line-height: 1;
}

.identity-verify-error {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--rose);
  background: rgba(var(--rose-rgb), 0.07);
  border: 1px solid rgba(var(--rose-rgb), 0.20);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.identity-verify-error.hidden { display: none; }


/* ─────────────────────────────────────────────────────────────
   6. PIN INPUT + STRENGTH INDICATOR
   ───────────────────────────────────────────────────────────── */

.identity-pin-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.identity-pin-label {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--muted);
}

.identity-pin-input {
  width: 100%;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs-h3);
  letter-spacing: 0.25em;
  text-align: center;
  transition: border-color var(--dur-fast) var(--ease-out);
  outline: none;
  -webkit-text-security: disc;
}
.identity-pin-input:focus {
  border-color: rgba(var(--gold-rgb), 0.45);
}

/* Larger variant for the daily unlock screen */
.identity-pin-input-lg {
  font-size: var(--fs-h2);
  padding: 16px;
  letter-spacing: 0.35em;
}

.identity-pin-strength {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 16px;
  transition: color var(--dur-fast) var(--ease-out);
}
.pin-weak   { color: var(--rose); }
.pin-fair   { color: rgba(var(--gold-rgb), 0.85); }
.pin-strong { color: rgba(var(--green-rgb), 0.90); }

.identity-pin-error {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--rose);
  min-height: 18px;
}
.identity-pin-error.hidden { display: none; }

/* Attempts remaining counter */
.identity-pin-attempts {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: rgba(var(--gold-rgb), 0.80);
  text-align: center;
}
.identity-pin-attempts.hidden { display: none; }

/* Shake animation on wrong PIN */
@keyframes pinShake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}
.pin-shake {
  animation: pinShake 0.35s var(--ease-out);
}


/* ─────────────────────────────────────────────────────────────
   7. RESTORE TEXTAREA
   ───────────────────────────────────────────────────────────── */

.identity-restore-textarea {
  width: 100%;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs-label);
  line-height: 1.7;
  resize: vertical;
  transition: border-color var(--dur-fast) var(--ease-out);
  outline: none;
  box-sizing: border-box;
}
.identity-restore-textarea:focus {
  border-color: rgba(var(--gold-rgb), 0.40);
}
.identity-restore-textarea::placeholder {
  color: rgba(255, 255, 255, 0.20);
}

.identity-restore-hint {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--muted);
  min-height: 16px;
  text-align: right;
}

.identity-restore-error {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--rose);
  background: rgba(var(--rose-rgb), 0.07);
  border: 1px solid rgba(var(--rose-rgb), 0.20);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
}
.identity-restore-error.hidden { display: none; }


/* ─────────────────────────────────────────────────────────────
   8. DONE STATE
   ───────────────────────────────────────────────────────────── */

.identity-done-note {
  font-family: var(--sans);
  font-size: var(--fs-label);
  color: var(--muted);
  background: rgba(var(--green-rgb), 0.06);
  border: 1px solid rgba(var(--green-rgb), 0.18);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  line-height: 1.6;
}
.identity-done-note strong {
  color: rgba(var(--green-rgb), 0.90);
}


/* ─────────────────────────────────────────────────────────────
   9. LOCKED / COUNTDOWN STATE
   ───────────────────────────────────────────────────────────── */

.identity-countdown {
  font-family: var(--mono);
  font-size: 3rem;
  font-weight: 700;
  color: rgba(var(--rose-rgb), 0.90);
  text-align: center;
  letter-spacing: 0.1em;
  padding: 12px 0;
  /* Tabular numbers so the digits don't shift widths */
  font-variant-numeric: tabular-nums;
}


/* ─────────────────────────────────────────────────────────────
   10. LOADING STATE
   ───────────────────────────────────────────────────────────── */

.identity-step-loading {
  align-items: center;
  min-height: 200px;
  justify-content: center;
}

.identity-step-loading .identity-icon {
  animation: idSpin 1.2s linear infinite;
}

@keyframes idSpin {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}


/* ─────────────────────────────────────────────────────────────
   11. ERROR STATE
   ───────────────────────────────────────────────────────────── */

.identity-error-msg {
  color: var(--rose) !important;
  background: rgba(var(--rose-rgb), 0.07);
  border: 1px solid rgba(var(--rose-rgb), 0.20);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  text-align: left !important;
}


/* ─────────────────────────────────────────────────────────────
   12. RESTORE LINK (secondary CTA — "already have account?")
   ───────────────────────────────────────────────────────────── */

.identity-restore-link {
  display: block;
  width: 100%;
  padding: 10px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--fs-meta);
  text-align: center;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: transparent;
  transition:
    color                 var(--dur-fast) var(--ease-out),
    text-decoration-color var(--dur-fast) var(--ease-out);
}
.identity-restore-link:hover {
  color: rgba(var(--gold-rgb), 0.80);
  text-decoration-color: rgba(var(--gold-rgb), 0.40);
}


/* ─────────────────────────────────────────────────────────────
   13. CLOUD BACKUP SECTION — settings panel
   Styles for the Cloud Backup card added to settings.js
   ───────────────────────────────────────────────────────────── */

.cloud-backup-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cloud-backup-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.cloud-backup-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-out);
}
.cloud-backup-status-dot[data-state="active"]   { background: rgba(var(--green-rgb),  0.90); }
.cloud-backup-status-dot[data-state="inactive"] { background: rgba(255, 255, 255,      0.20); }
.cloud-backup-status-dot[data-state="syncing"]  { background: rgba(var(--gold-rgb),   0.85); animation: idSpin 1s linear infinite; }
.cloud-backup-status-dot[data-state="error"]    { background: rgba(var(--rose-rgb),   0.85); }

.cloud-backup-status-text {
  font-family: var(--mono);
  font-size: var(--fs-label);
  color: var(--fg);
  flex: 1;
}

.cloud-backup-status-sub {
  font-family: var(--mono);
  font-size: var(--fs-micro);
  color: var(--muted);
  margin-top: 2px;
}

.cloud-backup-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cloud-backup-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.cloud-backup-danger {
  font-family: var(--mono);
  font-size: var(--fs-meta);
  color: var(--muted);
  text-align: center;
  padding-top: 4px;
}


/* ─────────────────────────────────────────────────────────────
   14. REDUCED MOTION
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .identity-overlay,
  .identity-card,
  .identity-step-loading .identity-icon,
  .pin-shake,
  .cloud-backup-status-dot {
    animation: none;
    transition: none;
  }
}

/* styles/dawn-theme.css */
/* Ummah Compass — Dawn theme foundation
   Default light experience for the Week 1–3 visual enhancement track. */

:root {
  color-scheme: light;

  --dawn-canvas: #f7f4ec;
  --dawn-canvas-soft: #fbfaf6;
  --dawn-surface: #ffffff;
  --dawn-surface-raised: #fffdf8;
  --dawn-ink: #18322d;
  --dawn-muted: #5f706b;
  --dawn-line: #dbe4df;

  --navy-deep: var(--dawn-canvas);
  --navy-mid: #eef4f0;
  --navy-card: var(--dawn-surface);
  --navy-elevated: var(--dawn-surface-raised);
  --green-islamic: #14755f;
  --green-light: #1b8a70;
  --green-rgb: 20, 117, 95;
  --gold: #8b6116;
  --gold-light: #c28b2b;
  --gold-rgb: 139, 97, 22;

  --bg: var(--dawn-canvas);
  --card: rgba(255, 255, 255, 0.94);
  --card-hover: #ffffff;
  --fg: var(--dawn-ink);
  --muted: var(--dawn-muted);
  --border: rgba(24, 50, 45, 0.12);
  --border-hover: rgba(20, 117, 95, 0.28);
  --input-bg: #ffffff;
  --input-hover: #fbfdfc;
  --primary: var(--green-islamic);
  --accent: var(--gold);

  --shadow-xs: 0 1px 3px rgba(35, 55, 49, 0.07);
  --shadow-sm: 0 4px 14px rgba(35, 55, 49, 0.08);
  --shadow-md: 0 10px 28px rgba(35, 55, 49, 0.10);
  --shadow-lg: 0 18px 42px rgba(35, 55, 49, 0.12);
  --shadow-xl: 0 24px 56px rgba(35, 55, 49, 0.14);

  /* A little more breathing room on desktop without stretching mobile. */
  --max: 1280px;
}

html { background: var(--dawn-canvas); }

body {
  background-color: var(--dawn-canvas);
  background-image:
    radial-gradient(ellipse 75% 55% at 15% -10%, rgba(var(--green-rgb), 0.10), transparent 62%),
    radial-gradient(ellipse 60% 45% at 85% 105%, rgba(var(--gold-rgb), 0.08), transparent 58%);
}

html,
body { overflow-x: hidden; }

.app-header {
  background: rgba(255, 253, 248, 0.94);
  border-bottom-color: var(--dawn-line);
  box-shadow: 0 8px 28px rgba(35, 55, 49, 0.08);
}

.brand-title {
  background: none;
  color: var(--dawn-ink);
  -webkit-text-fill-color: currentColor;
}

.brand-tagline,
.brand-rotating-text { color: var(--gold); }

.brand-pill {
  color: var(--dawn-muted);
  background: rgba(var(--gold-rgb), 0.06);
  border-color: rgba(var(--gold-rgb), 0.20);
}

.btn-tab { color: var(--dawn-muted); }
.tab-dropdown-item { color: var(--dawn-ink); }

@media (min-width: 900px) {
  .app-header { padding-inline: 24px; }
  .brand-title { font-size: var(--fs-h2); }
  .brand-tagline,
  .brand-rotating-text { font-size: var(--fs-label); }
  .brand-pill { font-size: var(--fs-meta); }
  .btn-tab {
    min-height: 42px;
    padding: 9px 14px;
    font-size: var(--fs-label);
  }
}

/* The former Night atmosphere used fixed pseudo-elements inside animated
   screens. Besides leaving dark gutters, those layers could cover the Prayer
   view in browsers that promote transforms to their own stacking context. */
.screen::before { display: none !important; }

#screenPrayer,
#screenQuran,
#screenQibla,
#screenRadio,
#screenCalendar {
  background: transparent;
}

#screenPrayer .prayer-sub-nav,
#screenPrayer .prayer-view {
  position: relative;
  z-index: 1;
}

.prayer-sub-nav {
  gap: 8px;
  margin-bottom: 14px;
}

.prayer-sub-tab {
  min-height: 44px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid var(--dawn-line);
  border-radius: 12px;
  color: var(--dawn-muted);
  box-shadow: var(--shadow-xs);
}

.prayer-sub-tab:hover {
  color: var(--green-islamic);
  background: #f1f7f3;
  border-color: rgba(var(--green-rgb), 0.28);
}

.prayer-sub-tab.active {
  color: var(--green-islamic);
  background: #e8f3ee;
  border-color: rgba(var(--green-rgb), 0.34);
  box-shadow: inset 0 -3px 0 rgba(var(--gold-rgb), 0.62), var(--shadow-xs);
}

/* Qibla retained its original component-specific Night palette. The compass
   remains visually distinct, but now sits inside the same bright product. */
#screenQibla .qibla-premium {
  background:
    radial-gradient(circle at 18% 16%, rgba(var(--gold-rgb), 0.09), transparent 38%),
    radial-gradient(circle at 84% 82%, rgba(var(--green-rgb), 0.08), transparent 36%),
    linear-gradient(160deg, #ffffff 0%, #f5f8f5 100%);
  border-color: rgba(24, 50, 45, 0.14);
  box-shadow: var(--shadow-md);
}

#screenQibla .qibla-premium::before {
  background: radial-gradient(circle at 50% 35%, rgba(255, 255, 255, 0.72), transparent 42%);
}

#screenQibla .qibla-intro {
  padding: clamp(22px, 2.4vw, 34px);
  background: rgba(255, 253, 248, 0.84);
  border-color: rgba(var(--gold-rgb), 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

#screenQibla .qibla-intro-title,
#screenQibla .qibla-headline {
  color: var(--dawn-ink);
}

#screenQibla .qibla-intro-title {
  font-size: clamp(2rem, 1.55rem + 1vw, 2.6rem);
}

#screenQibla .qibla-intro-sub,
#screenQibla .qibla-cityline,
#screenQibla .qibla-status-line,
#screenQibla .qibla-inline-status,
#screenQibla .qibla-help {
  color: var(--dawn-muted);
}

#screenQibla .qibla-intro-sub {
  font-size: clamp(1.05rem, 0.98rem + 0.18vw, 1.18rem);
}

#screenQibla .qibla-permission-note {
  color: var(--gold);
  font-size: clamp(0.98rem, 0.93rem + 0.14vw, 1.08rem);
}

#screenQibla .qibla-enable-btn {
  min-height: 48px;
  padding-inline: 22px;
  background: linear-gradient(180deg, var(--green-light), var(--green-islamic));
  color: #ffffff;
  border-color: rgba(var(--green-rgb), 0.34);
  box-shadow: 0 8px 20px rgba(var(--green-rgb), 0.18);
}

#screenQibla .qibla-compass-premium {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, 0.96), transparent 33%),
    radial-gradient(circle at 50% 50%, #f7f3e7, #e7f1eb 72%);
  box-shadow:
    0 18px 40px rgba(35, 55, 49, 0.14),
    0 0 0 1px rgba(var(--gold-rgb), 0.18),
    0 0 36px rgba(var(--gold-rgb), 0.10);
}

#screenQibla .qibla-compass-premium::before {
  border-color: rgba(var(--gold-rgb), 0.34);
  box-shadow: inset 0 0 0 10px rgba(255, 255, 255, 0.36);
}

#screenQibla .qibla-compass-premium::after {
  border-color: rgba(24, 50, 45, 0.12);
}

#screenQibla .qibla-cardinal {
  color: var(--gold);
  text-shadow: none;
}

#screenQibla .qibla-ticks {
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0 4deg,
    rgba(24, 50, 45, 0.13) 4deg 5deg,
    transparent 5deg 10deg
  );
}

#screenQibla .qibla-marker {
  background: radial-gradient(circle at 30% 30%, #ffffff, #edf4ef);
  border-color: rgba(var(--green-rgb), 0.48);
  box-shadow: 0 0 22px rgba(var(--green-rgb), 0.20), 0 7px 16px rgba(35, 55, 49, 0.14);
}

#screenQibla .qibla-warning {
  color: #725117;
  background: #faf3e5;
  border-color: rgba(var(--gold-rgb), 0.26);
}

#screenQibla .qibla-facing-badge {
  color: var(--green-islamic);
  background: #e5f5ed;
  border-color: rgba(var(--green-rgb), 0.34);
}

#screenQibla .qibla-compass-premium.is-facing {
  box-shadow:
    0 18px 40px rgba(35, 55, 49, 0.14),
    0 0 0 2px rgba(var(--green-rgb), 0.28),
    0 0 44px rgba(var(--green-rgb), 0.18);
}

/* Prayer names and numeric times were undersized at the large desktop widths
   used in testing. Apply the increase to both Home and the full Prayer view. */
#homeScreenContent .home-time-card-v3f .time-name {
  font-size: clamp(1.18rem, 1.02rem + 0.36vw, 1.48rem) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
}

#homeScreenContent .home-time-card-v3f .time-value {
  font-size: clamp(1.12rem, 1rem + 0.30vw, 1.38rem) !important;
  font-weight: 700 !important;
  letter-spacing: 0.045em !important;
}

#screenPrayer .time-name {
  font-size: clamp(1.05rem, 0.97rem + 0.22vw, 1.25rem) !important;
  font-weight: 600 !important;
}

#screenPrayer .time-value {
  font-size: clamp(1.2rem, 1.05rem + 0.34vw, 1.5rem) !important;
  font-weight: 700 !important;
}

.app-footer {
  color: rgba(var(--gold-rgb), 0.72);
  background: rgba(255, 253, 248, 0.88);
  border-top-color: var(--dawn-line);
}

@media (max-width: 580px) {
  #screenQibla .qibla-intro {
    align-items: stretch;
    padding: 20px;
  }

  #screenQibla .qibla-enable-btn { width: 100%; }

  #homeScreenContent .home-time-card-v3f .time-name {
    font-size: clamp(1rem, 4.2vw, 1.16rem) !important;
  }

  #homeScreenContent .home-time-card-v3f .time-value {
    font-size: clamp(0.98rem, 4vw, 1.12rem) !important;
  }
}

.card,
.card.subtle {
  background: linear-gradient(160deg, rgba(255,255,255,0.98), rgba(255,253,248,0.94));
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.card:hover {
  border-color: var(--border-hover);
  box-shadow: var(--shadow-md);
}

/* Shared controls still carried translucent Night-theme colours. On Dawn
   surfaces that made primary-button labels and placeholders nearly white on
   white. Keep the existing geometry and provide an explicit light contract. */
.btn-primary {
  color: #ffffff;
  background: linear-gradient(180deg, var(--green-light), var(--green-islamic));
  border-color: #116652;
  box-shadow: 0 4px 12px rgba(var(--green-rgb), 0.18);
}

.btn-primary:hover {
  color: #ffffff;
  background: linear-gradient(180deg, #197e67, #105f4d);
  border-color: #0f5c4a;
  box-shadow: 0 6px 16px rgba(var(--green-rgb), 0.23);
}

.btn-secondary {
  color: var(--dawn-ink);
  background: #ffffff;
  border-color: var(--dawn-line);
}

.btn-secondary:hover {
  color: var(--green-islamic);
  background: #f1f7f3;
  border-color: rgba(var(--green-rgb), 0.30);
}

input::placeholder,
textarea::placeholder {
  color: var(--dawn-muted);
  opacity: 1;
}

.istikhara-input::placeholder,
.istikhara-textarea::placeholder,
.identity-restore-textarea::placeholder,
.donate-custom-input::placeholder {
  color: var(--dawn-muted);
  opacity: 1;
}

.identity-restore-textarea {
  color: var(--dawn-ink);
  background: #ffffff;
  border-color: var(--dawn-line);
}

.istikhara-select option {
  color: var(--dawn-ink);
  background: #ffffff;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235f706b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Prayer city search and saved-city cards were the last Prayer components
   with hard-coded Night surfaces. These selectors are deliberately scoped so
   the approved Home screen is untouched. */
#screenPrayer .prayer-live-clock-time {
  background: linear-gradient(135deg, var(--dawn-ink) 20%, var(--gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

#screenPrayer .prayer-live-clock-date {
  color: var(--gold);
}

#screenPrayer .custom-city-search-row {
  background: #ffffff;
  border-color: rgba(24, 50, 45, 0.20);
  box-shadow: inset 0 1px 2px rgba(24, 50, 45, 0.04);
}

#screenPrayer .custom-city-search-row:focus-within {
  border-color: rgba(var(--green-rgb), 0.54);
  box-shadow: 0 0 0 3px rgba(var(--green-rgb), 0.11);
}

#screenPrayer .custom-city-search-row input {
  color: var(--dawn-ink);
  background: transparent;
}

#screenPrayer .custom-city-search-row input::placeholder {
  color: var(--dawn-muted);
  opacity: 1;
}

#screenPrayer .city-result-item {
  gap: 16px;
  background: #ffffff;
  border-color: var(--dawn-line);
  box-shadow: var(--shadow-xs);
}

#screenPrayer .city-result-item:hover,
#screenPrayer .city-result-item.selected {
  background: #edf7f2;
  border-color: rgba(var(--green-rgb), 0.38);
}

#screenPrayer .city-result-body {
  flex: 1;
  min-width: 0;
}

#screenPrayer .city-result-name {
  color: var(--dawn-ink);
}

#screenPrayer .city-result-meta,
#screenPrayer .city-result-tz,
#screenPrayer .no-cities-text,
#screenPrayer #customCitiesList {
  color: var(--dawn-muted);
}

#screenPrayer .city-result-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

#screenPrayer .city-result-add-btn,
#screenPrayer .city-result-cancel-btn {
  min-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--dawn-line);
  padding: 9px 13px;
  font-family: var(--sans);
  font-size: var(--fs-label);
  font-weight: 600;
  cursor: pointer;
}

#screenPrayer .city-result-add-btn {
  color: #ffffff;
  background: var(--green-islamic);
  border-color: #116652;
}

#screenPrayer .city-result-add-btn:hover {
  background: #105f4d;
}

#screenPrayer .city-result-cancel-btn {
  min-width: 44px;
  color: var(--dawn-ink);
  background: #ffffff;
}

#screenPrayer .city-result-cancel-btn:hover {
  color: #8a3140;
  background: #fff2f3;
  border-color: rgba(var(--rose-rgb), 0.38);
}

#screenPrayer .city-card {
  color: var(--dawn-ink);
  background: #ffffff;
  border-color: var(--dawn-line);
  box-shadow: var(--shadow-xs);
}

#screenPrayer .city-card:hover {
  background: #f8fbf9;
}

#screenPrayer .city-card.active-city {
  background: #edf7f2;
  border-color: rgba(var(--green-rgb), 0.40);
}

#screenPrayer .city-prayer-cell {
  background: #f7faf8;
  border-color: rgba(24, 50, 45, 0.12);
}

#screenPrayer .city-prayer-cell.city-prayer-next {
  background: #f7f0e1;
  border-color: rgba(var(--gold-rgb), 0.42);
}

@media (max-width: 620px) {
  #screenPrayer .city-result-item {
    align-items: stretch;
    flex-direction: column;
  }

  #screenPrayer .city-result-btns,
  #screenPrayer .city-result-add-btn {
    width: 100%;
  }
}

/* Home prayer and Quran cards previously encoded Night colours directly.
   Keep these overrides explicit until those components are tokenised. */
#homePrayerCard.home-prayer-card-v3f {
  background: linear-gradient(160deg, #ffffff 0%, #fbfaf5 100%) !important;
  border-color: rgba(var(--green-rgb), 0.18) !important;
  box-shadow: var(--shadow-md) !important;
}

#homePrayerCard::before {
  background: linear-gradient(90deg, transparent, rgba(var(--green-rgb), 0.30), rgba(var(--gold-rgb), 0.28), transparent);
}

#homePrayerCard .home-prayer-head-v4f {
  background: #f1f6f2;
  border-color: rgba(var(--green-rgb), 0.18);
}

#homePrayerCard .home-hcell-v4f {
  border-color: rgba(var(--green-rgb), 0.13);
}

#homePrayerCard .home-hcell-label-v4f,
#homePrayerCard .home-hcell-date-secondary-v4f,
#homePrayerCard .home-hcell-countdown-v4f,
#homePrayerCard .home-hcell-weather-secondary-v4f,
#homePrayerCard .home-hcell-weather-loading-v4f {
  color: var(--dawn-muted);
}

#homePrayerCard .home-hcell-date-primary-v4f,
#homePrayerCard .home-hcell-time-value-v4f,
#homePrayerCard .home-hcell-location-text-v4f,
#homePrayerCard .home-hcell-weather-primary-v4f {
  color: var(--dawn-ink);
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

#homePrayerCard .home-hcell-action-v4f {
  color: var(--green-islamic);
  background: rgba(var(--green-rgb), 0.08);
  border-color: rgba(var(--green-rgb), 0.28);
}

#homeScreenContent .home-time-card-v3f {
  background: linear-gradient(180deg, #f8fbf9 0%, #eef5f1 100%) !important;
  border-color: rgba(var(--green-rgb), 0.16) !important;
  box-shadow: 0 5px 14px rgba(35, 55, 49, 0.07) !important;
}

#homeScreenContent .home-time-card-v3f::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.80), transparent 50%);
}

#homeScreenContent .home-time-card-v3f .time-name {
  color: var(--gold) !important;
  text-shadow: none !important;
}

#homeScreenContent .home-time-card-v3f .time-value,
#homePrayerCard .home-time-card .time-value {
  color: var(--dawn-ink) !important;
  text-shadow: none !important;
}

#homeScreenContent .home-time-card-v3f.is-current {
  background: linear-gradient(180deg, #edf7f2 0%, #f9f3e7 100%) !important;
  border-color: rgba(var(--gold-rgb), 0.45) !important;
  box-shadow: 0 8px 20px rgba(35, 55, 49, 0.10) !important;
}

#homeScreenContent .home-time-card-v3f.is-current .time-name {
  color: var(--gold) !important;
}

#homeScreenContent .home-time-card-v3f.is-current .time-value {
  color: var(--dawn-ink) !important;
  text-shadow: none !important;
}

#homeScreenContent .home-time-card-v3f.is-next-soon {
  background: #edf7f2 !important;
  border-color: rgba(var(--green-rgb), 0.38) !important;
}

#homeScreenContent .home-quran-strip-v3f,
#homeScreenContent .home-qd-redesign-v1 {
  color: var(--dawn-ink);
  background: linear-gradient(160deg, #fffdf7 0%, #f2f7f3 100%) !important;
  border-color: rgba(var(--gold-rgb), 0.24) !important;
  box-shadow: var(--shadow-sm) !important;
}

#homeScreenContent .home-qd-redesign-v1 .home-qd-hero-glow-v1 {
  background: radial-gradient(circle at 50% 60%, rgba(var(--gold-rgb), 0.10), transparent 65%);
}

#homeScreenContent .home-qd-redesign-v1 .home-qd-basmala-v1,
#homeScreenContent .home-qd-redesign-v1 .home-qd-hero-pos-v1,
#homeScreenContent .home-qd-redesign-v1 .home-qd-ring-pct-v1,
#homeScreenContent .home-qd-redesign-v1 .home-qd-stat-value-v1 {
  color: var(--gold);
}

#homeScreenContent .home-qd-redesign-v1 .home-qd-hero-title-v1 {
  color: var(--dawn-ink);
}

#homeScreenContent .home-qd-redesign-v1 .home-qd-summary-v1 {
  background: rgba(var(--green-rgb), 0.045);
  border-color: rgba(var(--green-rgb), 0.14);
}

#homeScreenContent .home-qd-redesign-v1 .home-qd-stat-v1 {
  border-color: rgba(var(--green-rgb), 0.12);
}

#homeScreenContent .home-qd-redesign-v1 .home-qd-stat-label-v1,
#homeScreenContent .home-qd-redesign-v1 .home-qd-streak-label-v1 {
  color: var(--dawn-muted);
}

#homeScreenContent .home-qd-redesign-v1 .home-qd-streak-num-v1 {
  color: #9a5812;
}

#homeScreenContent .home-qd-redesign-v1 .home-qd-btn-v1 {
  color: #ffffff;
  background: linear-gradient(180deg, var(--green-light), var(--green-islamic));
  box-shadow: 0 5px 14px rgba(var(--green-rgb), 0.20);
}

.tab-dropdown,
.prayer-menu,
.settings-modal,
.identity-modal-content,
.tafsir-modal-content,
.radio-modal-content {
  background: rgba(255, 253, 248, 0.99);
  color: var(--fg);
  border-color: var(--border);
  box-shadow: var(--shadow-lg);
}

/* Settings is assembled at runtime and includes a few legacy Night colours.
   ID-scoped selectors intentionally outrank that injected style block. */
.settings-modal-backdrop {
  background: rgba(24, 50, 45, 0.34);
}

#settingsModal .settings-modal {
  background: var(--dawn-surface-raised);
  border-color: var(--dawn-line);
  box-shadow: var(--shadow-xl);
}

#settingsModal .settings-modal-title,
#settingsModal .settings-label,
#settingsModal .settings-habit-label,
#settingsModal .settings-adhan-label,
#settingsModal .settings-text-size-btn,
#settingsModal .wz-check-label {
  color: var(--dawn-ink);
}

#settingsModal .settings-modal-sub,
#settingsModal .settings-hint,
#settingsModal .wz-when-label,
#settingsModal .wz-custom-label,
#settingsModal .settings-locate-status {
  color: var(--dawn-muted);
}

#settingsModal .settings-select,
#settingsModal .settings-text-size-btn,
#settingsModal .settings-quick-btn,
#settingsModal .wz-check-row,
#settingsModal .wz-custom-input,
#settingsModal .settings-close-btn {
  background: #ffffff;
  border-color: var(--dawn-line);
  color: var(--dawn-ink);
}

#settingsModal .settings-text-size-btn:hover,
#settingsModal .wz-check-row:hover {
  background: #f3f8f5;
  border-color: rgba(var(--green-rgb), 0.30);
}

#settingsModal .settings-text-size-btn.active {
  color: var(--gold);
  background: #f7f0e1;
  border-color: rgba(var(--gold-rgb), 0.52);
}

#settingsModal .wz-check-row.checked {
  background: #e9f7f1;
  border-color: rgba(var(--green-rgb), 0.38);
}

#settingsModal .wz-check-row.checked .wz-check-label {
  color: var(--green-islamic);
}

#settingsModal .wz-check-box {
  background: #ffffff;
  border-color: rgba(24, 50, 45, 0.28);
}

#settingsModal .settings-modal-header,
#settingsModal .settings-modal-footer,
#settingsModal .settings-habit-sub {
  border-color: var(--dawn-line);
}

#settingsModal .settings-cancel-btn {
  color: var(--dawn-muted);
  background: #ffffff;
  border-color: var(--dawn-line);
}

/* Dawn onboarding: one consistent first-run experience instead of dropping
   new users into a separate dark product. */
#ucWizard .wz-backdrop {
  background:
    radial-gradient(circle at 18% 10%, rgba(var(--green-rgb), 0.16), transparent 34%),
    radial-gradient(circle at 84% 88%, rgba(var(--gold-rgb), 0.12), transparent 32%),
    rgba(24, 50, 45, 0.38);
  backdrop-filter: blur(8px);
}

#ucWizard .wz-card {
  max-width: 560px;
  background: var(--dawn-surface-raised);
  border-color: rgba(24, 50, 45, 0.16);
  color: var(--dawn-ink);
  box-shadow: var(--shadow-xl);
}

#ucWizard .wz-footer {
  background: #fbfaf6;
  border-color: var(--dawn-line);
}

#ucWizard .wz-title,
#ucWizard .wz-calc-method,
#ucWizard .wz-calc-kicker,
#ucWizard .wz-habit-label,
#ucWizard .wz-city-result,
#ucWizard .wz-saved-city,
#ucWizard .wz-tool-pill,
#ucWizard .wz-lang-pill,
#ucWizard .wz-check-label,
#ucWizard .wz-chip {
  color: var(--dawn-ink);
}

#ucWizard .wz-body-text,
#ucWizard .wz-calc-city,
#ucWizard .wz-calc-row .wz-calc-city,
#ucWizard .wz-city-result-meta,
#ucWizard .wz-empty-note,
#ucWizard .wz-habit-hint,
#ucWizard .wz-when-label,
#ucWizard .wz-custom-label,
#ucWizard .wz-hadith,
#ucWizard .wz-locate-status,
#ucWizard .wz-city-divider,
#ucWizard .wz-btn-skip {
  color: var(--dawn-muted);
}

#ucWizard .wz-info-pill,
#ucWizard .wz-inline-note,
#ucWizard .wz-calc-card,
#ucWizard .wz-city-result,
#ucWizard .wz-saved-city,
#ucWizard .wz-tool-pill,
#ucWizard .wz-lang-pill,
#ucWizard .wz-habit-card,
#ucWizard .wz-check-row,
#ucWizard .wz-chip {
  background: #ffffff;
  border-color: var(--dawn-line);
}

#ucWizard .wz-info-pill {
  color: var(--dawn-ink);
  font-weight: 600;
}

#ucWizard .wz-privacy {
  color: var(--green-islamic);
  background: #e9f7f1;
  border: 1px solid rgba(var(--green-rgb), 0.24);
  font-weight: 600;
}

#ucWizard .wz-calc-guide {
  color: var(--dawn-ink);
}

#ucWizard .wz-calc-caution {
  color: var(--dawn-muted);
  background: #f5f2e9;
  border-color: rgba(var(--gold-rgb), 0.24);
}

#settingsModal .settings-calc-recommendation {
  color: var(--green-islamic);
  background: #e9f7f1;
  border: 1px solid rgba(var(--green-rgb), 0.24);
}

#ucWizard .wz-search-input,
#ucWizard .wz-custom-input {
  color: var(--dawn-ink);
  background: #ffffff;
  border-color: rgba(24, 50, 45, 0.22);
  box-shadow: inset 0 1px 2px rgba(24, 50, 45, 0.04);
}

#ucWizard .wz-search-input::placeholder,
#ucWizard .wz-custom-input::placeholder {
  color: #7b8a85;
  opacity: 1;
}

#ucWizard .wz-search-input:focus,
#ucWizard .wz-custom-input:focus {
  outline: 3px solid rgba(var(--gold-rgb), 0.18);
  border-color: rgba(var(--gold-rgb), 0.72);
}

#ucWizard .wz-locate-btn {
  color: var(--green-islamic);
  background: #eaf5f0;
  border-color: rgba(var(--green-rgb), 0.34);
}

#ucWizard .wz-locate-btn:hover { background: #dff0e8; }

#ucWizard .wz-city-divider::before,
#ucWizard .wz-city-divider::after {
  background: var(--dawn-line);
}

#ucWizard .wz-lang-pill:hover:not(.selected),
#ucWizard .wz-check-row:hover,
#ucWizard .wz-chip:hover {
  background: #f3f8f5;
  border-color: rgba(var(--green-rgb), 0.26);
}

#ucWizard .wz-saved-city.active,
#ucWizard .wz-tool-pill.selected,
#ucWizard .wz-lang-pill.selected,
#ucWizard .wz-check-row.checked,
#ucWizard .wz-chip.selected {
  color: var(--green-islamic);
  background: #e9f7f1;
  border-color: rgba(var(--green-rgb), 0.42);
}

#ucWizard .wz-check-box,
#ucWizard .wz-calc-radio {
  background-color: #ffffff;
  border-color: rgba(24, 50, 45, 0.28);
}

#ucWizard .wz-habit-sub {
  border-color: var(--dawn-line);
}

#ucWizard .wz-btn-back {
  color: var(--dawn-muted);
  background: #ffffff;
  border-color: var(--dawn-line);
}

#ucWizard .wz-btn-back:hover { background: #f3f8f5; }

#ucWizard .wz-dot { background: rgba(24, 50, 45, 0.24); }
#ucWizard .wz-dot.active { background: #36c99a; }

.btn-tab:hover,
.tab-dropdown-item:hover,
.bottom-nav-item:hover {
  background: rgba(var(--green-rgb), 0.08);
}

.btn-tab.btn-tab-active,
.tab-dropdown-item.active {
  background: rgba(var(--green-rgb), 0.11);
  color: var(--green-islamic);
  border-color: rgba(var(--green-rgb), 0.25);
}

select,
select option,
input,
textarea {
  color-scheme: light;
  background-color: var(--input-bg);
  color: var(--fg);
  border-color: var(--border);
}

select option:checked,
select option:hover {
  background-color: #e3f1eb;
  color: var(--dawn-ink);
}

@media (max-width: 767px) {
  .bottom-nav {
    background: rgba(255, 253, 248, 0.96);
    border-top-color: var(--dawn-line);
    box-shadow: 0 -8px 28px rgba(35, 55, 49, 0.08);
  }

  .bottom-nav-item { color: var(--dawn-muted); }
  .bottom-nav-item.active { color: var(--green-islamic); }
}

@media (prefers-contrast: more) {
  :root {
    --muted: #445650;
    --border: rgba(24, 50, 45, 0.24);
  }
}

/* styles/home-v2.css */
/* Ummah Compass — compact Fajr-sky Home
   This stylesheet is intentionally loaded last. It isolates the approved
   Home composition from the legacy Home card generations while keeping all
   existing data and actions intact. */

:root {
  --home-v2-ivory: #fbf7ee;
  --home-v2-paper: #fffdf8;
  --home-v2-ink: #17362f;
  --home-v2-muted: #6f776f;
  --home-v2-gold: #9b6b18;
  --home-v2-green: #0f775e;
  --home-v2-green-dark: #095b49;
  --home-v2-line: #e7ddca;
  --home-v2-fajr-1: #315b86;
  --home-v2-fajr-2: #5f668f;
  --home-v2-fajr-3: #9d7280;
}

#screenHome {
  background: transparent !important;
}

#screenHome #homeScreenContent {
  width: min(100%, 1280px) !important;
  max-width: 1280px !important;
  margin-inline: auto !important;
  padding: clamp(12px, 2vw, 24px) clamp(16px, 3vw, 34px) 10px !important;
}

#homePrayerCard.uc-home-v2 {
  display: grid !important;
  gap: clamp(12px, 1.4vw, 18px) !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--home-v2-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.uc-home-v2 button {
  font: inherit;
}

/* bidi.css gives shared flex rows space-between; the brand itself must remain
   a single visual unit, with the mark directly beside its name. */
.app-header .brand { justify-content: flex-start !important; }

.uc-home-v2 button:focus-visible,
#forecastModal button:focus-visible {
  outline: 3px solid rgba(20, 117, 95, 0.3) !important;
  outline-offset: 3px;
}

/* Compact utility row: date, travel-aware location, weather and calendar. */
.uc-home-v2-utility {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  min-width: 0;
}

.uc-home-v2-date,
.uc-home-v2-utility-actions,
.uc-home-v2-location,
.uc-home-v2-weather,
.uc-home-v2-weather-badge {
  display: flex;
  align-items: center;
}

.uc-home-v2-date {
  gap: 8px;
  min-width: 0;
  color: var(--home-v2-gold);
  font-size: clamp(0.98rem, 0.92rem + 0.16vw, 1.08rem);
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}

.uc-home-v2-date #homeLiveDateSecondary:empty,
.uc-home-v2-date #homeLiveDate:empty,
.uc-home-v2-date #homeLiveHijriDate:empty {
  display: none;
}

.uc-home-v2-date [hidden] {
  display: none !important;
}

.uc-home-v2-dot { color: #c9ae78; }

.uc-home-v2-calendar-toggle {
  min-width: 44px;
  min-height: 38px;
  padding: 6px 9px;
  color: var(--home-v2-gold);
  background: #fffaf0;
  border: 1px solid #dcc89e;
  border-radius: 999px;
  cursor: pointer;
}

.uc-home-v2-calendar-toggle.hijri-pill--hijri {
  color: #fff;
  background: var(--home-v2-green);
  border-color: var(--home-v2-green);
}

.uc-home-v2-utility-actions {
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.uc-home-v2-location,
.uc-home-v2-weather {
  min-height: 46px;
  color: var(--home-v2-ink);
  background: rgba(255, 253, 248, 0.82);
  border: 1px solid var(--home-v2-line);
  border-radius: 999px;
}

.uc-home-v2-location-main {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 6px 8px 14px;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.uc-home-v2-location-main svg,
.uc-home-v2-icon-button svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.home-hcell-location-text-v4f {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 650;
}

.uc-home-v2-icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  padding: 0;
  color: var(--home-v2-green);
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

.uc-home-v2-icon-button:hover,
.uc-home-v2-location-main:hover {
  background: rgba(15, 119, 94, 0.07);
}

.uc-home-v2-weather-badge {
  gap: 7px;
  min-width: 0;
  padding-inline-start: 12px;
}

.uc-home-v2-weather-icon { font-size: 1.35rem; }
.uc-home-v2-weather-copy { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
.uc-home-v2-weather-condition { color: var(--home-v2-muted); white-space: nowrap; }
.uc-home-v2-weather-temperature { color: var(--home-v2-ink); white-space: nowrap; }
.uc-home-v2-weather-detail { display: none; }

.uc-home-v2-temp-toggle {
  display: inline-flex;
  gap: 2px;
  margin-inline-start: 3px;
  padding: 2px;
  background: #efe8d9;
  border-radius: 999px;
}

.uc-home-v2-temp-toggle button {
  width: 30px;
  height: 30px;
  padding: 0;
  color: #6d706b;
  background: transparent;
  border: 0;
  border-radius: 50%;
  font-size: 0.76rem;
  font-weight: 750;
  cursor: pointer;
}

.uc-home-v2-temp-toggle button.active {
  color: #fff;
  background: var(--home-v2-green);
}

.uc-home-v2-clock {
  min-width: 104px;
  color: var(--home-v2-green);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.2rem, 1.08rem + 0.3vw, 1.45rem);
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* Fajr sky: a permanent identity treatment, not a time-of-day theme switch. */
.uc-home-v2-hero {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  min-height: 220px;
  padding: clamp(22px, 2.4vw, 30px) clamp(28px, 4vw, 50px) clamp(46px, 4vw, 54px);
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 78% 18%, rgba(255, 229, 180, 0.22), transparent 25%),
    linear-gradient(135deg, var(--home-v2-fajr-1) 0%, var(--home-v2-fajr-2) 55%, var(--home-v2-fajr-3) 108%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 27px;
  box-shadow: 0 18px 42px rgba(47, 68, 98, 0.2);
}

.uc-home-v2-hero-copy {
  max-width: calc(100% - 92px);
  min-width: 0;
}

.uc-home-v2-hero::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(90deg, rgba(20, 43, 66, 0.28), rgba(20, 43, 66, 0.04) 66%, transparent);
  pointer-events: none;
}

.uc-home-v2[dir="rtl"] .uc-home-v2-hero::before {
  background: linear-gradient(270deg, rgba(20, 43, 66, 0.28), rgba(20, 43, 66, 0.04) 66%, transparent);
}

.uc-home-v2-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: auto -8% -48% 33%;
  height: 68%;
  background: radial-gradient(ellipse, rgba(244, 176, 124, 0.35), rgba(231, 157, 145, 0) 68%);
  pointer-events: none;
}

.uc-home-v2-hero.is-soon {
  box-shadow: 0 18px 42px rgba(155, 107, 24, 0.25), inset 0 0 0 2px rgba(255, 214, 139, 0.42);
}

.uc-home-v2-hero-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.82);
  font-size: clamp(1rem, 0.94rem + 0.22vw, 1.16rem);
  font-weight: 550;
}

.uc-home-v2-preview-badge {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  color: #3d2c0c;
  background: #f3c56d;
  border-radius: 999px;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.uc-home-v2-hero-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.18em;
  color: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(3rem, 2.3rem + 2.25vw, 4.8rem);
  font-weight: 740;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}

.uc-home-v2-countdown {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
  color: rgba(255,255,255,0.94);
  font-size: clamp(1.08rem, 1rem + 0.32vw, 1.34rem);
  font-weight: 520;
}

.uc-home-v2-set-city {
  min-height: 44px;
  margin-top: 20px;
  padding: 10px 18px;
  color: var(--home-v2-ink);
  background: #fff8e7;
  border: 1px solid rgba(255,255,255,0.5);
  border-radius: 12px;
  font-weight: 700;
  cursor: pointer;
}

/* Prayer-time weather is deliberately part of the countdown sentence rather
   than a second card competing with the next-prayer headline. */
.uc-home-v2-next-forecast {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0;
  color: rgba(255,255,255,0.86);
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 0.92em;
  font-weight: 500;
  cursor: pointer;
}

.uc-home-v2-next-forecast[hidden] { display: none; }

.uc-home-v2-next-forecast:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.uc-home-v2-back-now {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0;
  color: #ffe3a2;
  background: transparent;
  border: 0;
  font: inherit;
  font-weight: 650;
  cursor: pointer;
}

.uc-home-v2-back-now:hover,
.uc-home-v2-back-now:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.uc-home-v2-subline-separator { color: #f3cf82; }

.uc-home-v2-next-forecast-icon {
  display: inline-block;
  width: auto;
  min-height: 0;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: 1.05em;
  line-height: 1;
}

.uc-home-v2-next-forecast-separator { margin-inline: 2px; color: #f3cf82; }

.uc-home-v2-hero-progress {
  position: absolute;
  inset: auto 0 0;
  height: 42px;
}

.uc-home-v2-adhan {
  position: absolute;
  z-index: 2;
  inset-block-start: clamp(24px, 3vw, 36px);
  inset-inline-end: clamp(26px, 3.5vw, 44px);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: #fff4d6;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 50%;
  cursor: pointer;
}

.uc-home-v2-adhan svg { width: 23px; height: 23px; }

.uc-home-v2-progress-track {
  position: absolute;
  inset: auto 0 0;
  height: 7px;
  overflow: hidden;
  background: rgba(13, 42, 61, 0.78);
  border-radius: 0 0 26px 26px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}

.uc-home-v2-progress-track span {
  display: block;
  height: 100%;
  background: #f3c56d;
  border-radius: inherit;
}

.uc-home-v2-progress-label {
  position: absolute;
  inset-inline-end: clamp(26px, 3.5vw, 44px);
  bottom: 14px;
  color: rgba(255,255,255,0.82);
  font-size: 0.97rem;
  text-align: end;
}

/* Flat, highly legible prayer strip. The current salah receives the only card. */
.uc-home-v2-prayers {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.uc-home-v2-prayer {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 98px;
  padding: 15px 9px;
  color: var(--home-v2-gold);
  font: inherit;
  text-align: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 18px;
  cursor: default;
}

.uc-home-v2-prayer-name {
  font-size: clamp(1.04rem, 0.98rem + 0.2vw, 1.18rem);
  font-weight: 650;
}

.uc-home-v2-prayer-time {
  color: #473815;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.28rem, 1.15rem + 0.34vw, 1.55rem);
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.uc-home-v2-prayer[data-prayer-key*="sunrise"],
.uc-home-v2-prayer.is-boundary { opacity: 0.5; }
.uc-home-v2-prayer[data-prayer-key*="sunrise"] .uc-home-v2-prayer-time { font-weight: 500; }

.uc-home-v2-prayer.is-current {
  color: var(--home-v2-green-dark);
  background: linear-gradient(145deg, #eef7f2, #fff9ed);
  border-color: rgba(15, 119, 94, 0.55);
  box-shadow: 0 8px 24px rgba(35, 72, 60, 0.08);
}

.uc-home-v2-prayer.is-current .uc-home-v2-prayer-time { color: var(--home-v2-green-dark); }
.uc-home-v2-prayer.is-next-soon { color: #805813; }

.uc-home-v2-prayer.is-upcoming {
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.uc-home-v2-prayer.is-upcoming:hover,
.uc-home-v2-prayer.is-upcoming:focus-visible {
  background: rgba(255, 250, 240, 0.82);
  border-color: rgba(178, 132, 42, 0.36);
  box-shadow: 0 7px 20px rgba(71, 56, 21, 0.07);
  transform: translateY(-1px);
}

.uc-home-v2-prayer.is-selected,
.uc-home-v2-prayer.is-selected:hover,
.uc-home-v2-prayer.is-selected:focus-visible {
  color: #3d2c0c;
  background: linear-gradient(145deg, #f5d78f, #fff2cb);
  border-color: #c59635;
  box-shadow: 0 9px 24px rgba(145, 102, 24, 0.18);
  transform: none;
}

.uc-home-v2-prayer.is-selected .uc-home-v2-prayer-time { color: #3d2c0c; }
.uc-home-v2-prayer.is-past { opacity: 0.72; }

.uc-home-v2-prayer-current {
  position: absolute;
  inset-block-start: 7px;
  inset-inline: 8px;
  color: var(--home-v2-gold);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
}

.uc-home-v2-empty {
  grid-column: 1 / -1;
  padding: 26px;
  color: var(--home-v2-muted);
  text-align: center;
}

/* Daily Quran remains prominent but deliberately compact. */
.uc-home-v2-quran,
.uc-home-v2-quran-loading {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  min-height: 150px;
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3.4vw, 42px) !important;
  color: var(--home-v2-ink) !important;
  background: rgba(255, 253, 248, 0.92) !important;
  border: 1px solid var(--home-v2-line) !important;
  border-radius: 24px !important;
  box-shadow: 0 9px 28px rgba(55, 65, 55, 0.06) !important;
}

.uc-home-v2-quran-copy { min-width: 0; }
.uc-home-v2-quran h2 { margin: 0; color: var(--home-v2-ink); font-size: clamp(1.55rem, 1.4rem + 0.4vw, 1.9rem); }
.uc-home-v2-quran-meta { margin-top: 4px; color: var(--home-v2-gold); font-size: 1rem; }
.uc-home-v2-quran blockquote { margin: 16px 0 0; color: #4a3511; font-size: clamp(1.15rem, 1.06rem + 0.28vw, 1.38rem); font-style: italic; line-height: 1.35; }

.uc-home-v2-quran-progress {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  place-items: center;
  align-content: center;
  gap: 2px;
  width: 98px;
  height: 98px;
}

.uc-home-v2-quran-progress span {
  position: absolute;
  inset: 0;
  background: conic-gradient(var(--home-v2-green) var(--quran-progress), #eadfc9 0);
  border-radius: 50%;
}

.uc-home-v2-quran-progress span::after {
  content: '';
  position: absolute;
  inset: 11px;
  background: var(--home-v2-paper);
  border-radius: 50%;
}

.uc-home-v2-quran-progress strong {
  position: relative;
  z-index: 1;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1;
}

.uc-home-v2-quran-progress small {
  position: relative;
  z-index: 1;
  color: var(--home-v2-muted);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.uc-home-v2-quran-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.uc-home-v2-daily-ayah,
.uc-home-v2-quran-cta {
  min-height: 52px;
  padding: 12px 25px;
  border-radius: 16px;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
}

.uc-home-v2-daily-ayah {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--home-v2-gold);
  background: #fffaf0;
  border: 1px solid #dcc89e;
}

.uc-home-v2-daily-ayah:hover { background: #f8efdd; }

.uc-home-v2-quran-cta {
  color: #fff;
  background: var(--home-v2-green);
  border: 1px solid var(--home-v2-green);
  box-shadow: 0 8px 18px rgba(15, 119, 94, 0.18);
}

.uc-home-v2-quran-cta:hover { background: var(--home-v2-green-dark); }

/* Direct doors to the most useful tools, without adding another card layer. */
.uc-home-v2-quick-tools {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 220px));
  justify-content: center;
  gap: 10px;
}

.uc-home-v2-quick-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 52px;
  padding: 10px 14px;
  color: var(--home-v2-ink);
  background: rgba(255,253,248,0.72);
  border: 1px solid var(--home-v2-line);
  border-radius: 15px;
  cursor: pointer;
}

.uc-home-v2-quick-tool:hover {
  color: var(--home-v2-green-dark);
  background: #fffdf8;
  border-color: rgba(15,119,94,0.36);
}

.uc-home-v2-quick-tool > span { flex: 0 0 auto; font-size: 1.12rem; }
.uc-home-v2-quick-tool > strong { overflow: hidden; font-size: 0.92rem; text-overflow: ellipsis; white-space: nowrap; }

/* The generic shell reserves generous space for longer screens. Home is short
   enough to use a tighter footer hand-off and avoid a cosmetic scrollbar. */
main.container:has(#screenHome:not(.hidden)) { margin-top: 12px; margin-bottom: 14px; }
body:has(#screenHome:not(.hidden)) .app-footer { padding-block: 10px calc(10px + var(--safe-bottom)); }

/* The legacy launcher remains as the modal controller; Home supplies the
   visible, docked Daily Ayah action inside the Quran card. */
body.home-v2-ayah-docked .ayah-pill { display: none !important; }

/* Forecast modal: the previous forecast markup inherited a Night palette. */
#forecastModal .tafsir-modal-content {
  width: min(720px, calc(100vw - 28px));
  max-height: min(84vh, 820px);
  color: var(--home-v2-ink);
  background: var(--home-v2-paper);
  border: 1px solid var(--home-v2-line);
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(26, 43, 38, 0.22);
}

#forecastModal .tafsir-modal-header { border-bottom-color: var(--home-v2-line); }
#forecastModal .h2 { color: var(--home-v2-ink); }
#forecastModal .meta { color: var(--home-v2-muted); }

.uc-forecast-alert { margin-bottom: 14px; padding: 11px 14px; color: #774d0d; background: #fff2d8; border: 1px solid #e6c27d; border-radius: 11px; font-weight: 650; }
.uc-forecast-empty { padding: 34px 12px; color: var(--home-v2-muted); text-align: center; }
.uc-forecast-empty-icon { margin-bottom: 10px; font-size: 2.1rem; line-height: 1; }
.uc-forecast-heading { margin-bottom: 10px; color: var(--home-v2-muted); font-size: 0.75rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; }
.uc-forecast-section + .uc-forecast-section { margin-top: 20px; }
.uc-forecast-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.uc-forecast-card,
.uc-forecast-day { min-width: 0; padding: 12px; background: #f7f7f1; border: 1px solid #dde6df; border-radius: 13px; }
.uc-forecast-day { text-align: center; }
.uc-forecast-name { margin-bottom: 3px; color: var(--home-v2-muted); font-size: 0.76rem; font-weight: 750; text-transform: uppercase; }
.uc-forecast-time { margin-bottom: 7px; color: var(--home-v2-gold); font-variant-numeric: tabular-nums; }
.uc-forecast-icon { margin-bottom: 6px; font-size: 1.7rem; line-height: 1; }
.uc-forecast-temp { color: var(--home-v2-ink); font-size: 1.06rem; font-weight: 750; }
.uc-forecast-low { color: var(--home-v2-muted); font-weight: 500; }
.uc-forecast-condition { margin-top: 3px; overflow: hidden; color: var(--home-v2-muted); font-size: 0.82rem; text-overflow: ellipsis; white-space: nowrap; }
.uc-forecast-rain { margin-top: 4px; color: #316f9e; font-size: 0.78rem; }
.uc-forecast-attribution { margin-top: 18px; padding-top: 12px; color: var(--home-v2-muted); border-top: 1px solid var(--home-v2-line); font-size: 0.78rem; text-align: center; }
.uc-forecast-attribution a,
.uc-home-v2-weather-credit { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.uc-home-v2-weather-credit { font-size: 0.62rem; opacity: 0.78; white-space: nowrap; }

/* The approved desktop header is a single, compact row. */
@media (min-width: 901px) {
  .app-header {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 20px !important;
    min-height: 82px !important;
    padding-block: 12px !important;
    padding-inline: max(24px, calc((100vw - 1280px) / 2 + 24px)) !important;
  }

  .app-header .brand { grid-column: 1; min-width: 0; align-items: center; }
  .app-header .top-nav { grid-column: 2; grid-row: 1; justify-self: end; }
  .app-header .header-actions { grid-column: 3; grid-row: 1; }
  .app-header .brand-mark { width: 52px; height: 52px; }
  .app-header .brand-title { font-size: 1.48rem; line-height: 1.05; }
  .app-header .brand-tagline { margin-top: 4px; font-size: 0.9rem; }
  .app-header .brand-privacy-pills,
  .app-header .brand-rotating { display: none !important; }
  .app-header .top-nav { gap: 4px; }
  .app-header .btn-tab { min-height: 42px; padding: 9px 12px; }
}

@media (max-width: 900px) {
  #screenHome #homeScreenContent { padding-top: 18px !important; }
  .uc-home-v2-utility { align-items: flex-start; flex-direction: column; }
  .uc-home-v2-utility-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
  .uc-home-v2-hero {
    display: flex;
    align-items: stretch;
    flex-direction: column;
  }
  .uc-home-v2-hero-copy { max-width: none; padding-inline-end: 58px; }
  .uc-home-v2-prayers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .app-header {
    min-height: 70px !important;
    padding: 9px 13px !important;
  }

  .app-header .top-nav { display: none !important; }
  .app-header .brand { min-width: 0; }
  .app-header .brand-mark { width: 44px; height: 44px; flex: 0 0 44px; }
  .app-header .brand-title { font-size: 1.16rem; }
  .app-header .brand-tagline { display: block; margin-top: 2px; font-size: 0.72rem; white-space: nowrap; }
  .app-header .brand-privacy-pills,
  .app-header .brand-rotating { display: none !important; }
  .app-header .btn-donate span { display: none; }
  .app-header .btn-donate { width: 44px; min-width: 44px; padding: 0; }

  #screenHome #homeScreenContent { padding-inline: 12px !important; padding-bottom: 96px !important; }
  #homePrayerCard.uc-home-v2 { gap: 16px !important; }

  .uc-home-v2-date {
    width: 100%;
    flex-wrap: wrap;
    gap: 5px 7px;
    font-size: 0.92rem;
    white-space: normal;
  }

  .uc-home-v2-utility-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .uc-home-v2-location { min-width: 0; }
  .uc-home-v2-location-main { flex: 1; }
  .home-hcell-location-text-v4f { max-width: none; }
  .uc-home-v2-weather { grid-column: 1 / -1; justify-content: space-between; }
  .uc-home-v2-weather-badge { flex: 1; }
  .uc-home-v2-clock { grid-column: 2; grid-row: 1; align-self: center; }

  .uc-home-v2-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 26px 24px 52px;
    border-radius: 23px;
  }

  .uc-home-v2-hero-title { font-size: clamp(2.55rem, 12vw, 3.8rem); }
  .uc-home-v2-progress-label { inset-inline-end: 24px; }
  .uc-home-v2-adhan { inset-block-start: 22px; inset-inline-end: 22px; }

  .uc-home-v2-prayers { gap: 7px; }
  .uc-home-v2-prayer { min-height: 90px; padding: 12px 5px; border-radius: 14px; }
  .uc-home-v2-prayer-name { font-size: 0.98rem; }
  .uc-home-v2-prayer-time { font-size: 1.23rem; }

  .uc-home-v2-quran,
  .uc-home-v2-quran-loading {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    padding: 24px 20px !important;
    border-radius: 20px !important;
  }

  .uc-home-v2-quran-actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .uc-home-v2-quran-progress { width: 90px; height: 90px; }
  .uc-home-v2-quran-progress strong { font-size: 0.94rem; }
  .uc-home-v2-quran-cta,
  .uc-home-v2-daily-ayah { width: 100%; padding-inline: 14px; }
  .uc-home-v2-quran blockquote { font-size: 1.08rem; }
  .uc-home-v2-quick-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  #forecastModal .tafsir-modal-content { max-height: 90vh; border-radius: 18px; }
  .uc-forecast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-forecast-grid--days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 390px) {
  .uc-home-v2-weather-condition { display: none; }
  .uc-home-v2-temp-toggle button { width: 28px; height: 28px; }
  .uc-home-v2-hero-title { font-size: 2.45rem; }
  .uc-home-v2-prayer-time { font-size: 1.13rem; }
  .uc-forecast-grid,
  .uc-forecast-grid--days { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .uc-home-v2-quran-actions { grid-template-columns: 1fr; }
  .uc-home-v2-quick-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uc-home-v2-quick-tool { padding-inline: 8px; }
  .uc-home-v2-quick-tool > strong { font-size: 0.82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .uc-home-v2 *,
  #forecastModal * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}