/* Sunnah Companion — styles (moved out of index.html) */
/* ── Bundled Arabic fonts (local, offline-capable) ───────────────── */
@font-face {
  font-family: "Amiri"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/amiri-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Amiri"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/amiri-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Amiri Quran"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/amiri-quran.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* Elegant English/Latin face (variable 400–700) — replaces robotic system stack */
@font-face {
  font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/jakarta.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { /* editorial serif accent — English devotional lines only (quote, greeting) */
  font-family: "EB Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("../fonts/ebgaramond-i500.woff2") format("woff2");
}
:root {
  --bg: #0b1f17;
  --bg2: #0f3d2e;
  --card: #12241c;
  --card2: #16302419;
  --line: #1f4536;
  --green: #1f8a5b;
  --green-solid: #1b7d52;   /* filled green behind white text: ≥5:1 (brand #1f8a5b is 4.3:1) */
  --green-soft: #2bb673;
  --gold: #d4af37;
  --gold-soft: #e8c766;
  --text: #e9f1ec;
  --muted: #a8c8b4;
  --ref: #7e9a8b;           /* hadith/source citations — muted, but ≥4.5:1 on dark cards */
  --danger: #c0563f;
  --danger-text: #f08070;   /* error text on the page background: 6.6:1 */
  /* Inset surfaces (darker-than-card chips/inputs/buttons) — flip with theme */
  --inset: #0e2219;
  --inset-active: #1a2f24;
  /* Shared "emerald panel" surface used by hero/reader/banners/results etc.
     Tokenised so it flips to a pale tint in light mode instead of staying dark. */
  --surface: linear-gradient(135deg, #16402e, #0e2a1f);
  /* Semantic STATE surfaces — tokenised so every component state flips with the theme
     instead of leaking hardcoded dark colors into light mode. */
  --state-done: #122e22;      /* completed / active / blessed (soft green) */
  --state-amber: #2a2212;     /* learning / warning (amber) */
  --state-warm: linear-gradient(135deg, #2a1c12, #14110c);  /* warm/quit/recovery cards */
  --hl: #25422f;              /* ayah / word highlight */
  --track: #1f4536;           /* progress-ring + range tracks */
  --switch-off: #2a4a3a;      /* toggle off track */
  --hm1: #1a3a2a;             /* heatmap intensity 1 */
  --hm2: #1f5a3a;             /* heatmap intensity 2 */
  --radius: 18px;
  --shadow: 0 8px 30px rgba(3,20,13,.45); /* emerald-tinted, matches bg hue (no generic black) */
  /* General Arabic (UI, azkar, hadith, du'as): classic Naskh */
  --font-ar: "Amiri","Scheherazade New","Noto Naskh Arabic","Geeza Pro",serif;
  /* Qur'an reader: mushaf-style Quranic typeface */
  --font-quran: "Amiri Quran","Amiri",serif;
  /* Elegant English/Latin UI font */
  --font-en: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Serif accent for English devotional lines (pairs with Amiri's classical feel) */
  --font-serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --arabic-font-size: 1.5rem;
}
/* Light theme */
/* ---------------------------------------------------------------------------
   LIGHT THEME — redesigned: calm warm-neutral base (no saturated mint), white
   cards with soft borders. Accent *text* (--gold-soft) is deep EMERALD so it
   stays readable on light; real gold is kept for metallic details only
   (--gold: borders, CTA, nav underline, dots). --gold-light is the metallic
   tint for those few spots that still want a true-gold fill.
----------------------------------------------------------------------------*/
[data-theme="light"] {
  --bg: #f4f6f1;
  --bg2: #ecefe7;
  --card: #ffffff;
  --card2: #f3f6f1;
  --line: #e3e7dc;
  --green: #0c6f44;
  --green-solid: #0c6f44;
  --green-soft: #08673a;    /* deep emerald — small green labels stay legible (≈6.6:1 white) */
  --gold: #9a7b1f;          /* metallic detail gold (borders / CTA / underline) */
  --gold-light: #b8941f;
  --gold-soft: #094f31;     /* accent TEXT → deeper emerald (≈9:1 on white) */
  --text: #122520;          /* near-black ink, max body contrast */
  --muted: #44654e;         /* darker secondary text (~6:1 on white, readable on tints) */
  --ref: #4a6e5d;           /* citations — deeper sage so 11px source text clears AA (~5.7:1 white, 5.2:1 on card2) */
  --danger: #b8442b;
  --danger-text: #b8442b;   /* 4.95:1 on --bg */
  --inset: #eef3ed;
  --inset-active: #e1efe7;
  --surface: linear-gradient(160deg, #ffffff 0%, #edf5f0 100%);
  --state-done: #e4f2ea;
  --state-amber: #f6edd6;
  --state-warm: linear-gradient(135deg, #fbf6ea, #f3ead6);
  --hl: #e0efe6;
  --track: #d8e6dd;
  --switch-off: #cdddce;
  --hm1: #d6ecdd;
  --hm2: #a3d9b8;
  --shadow: 0 10px 30px rgba(20,55,38,.10);
}
[data-theme="light"] body {
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 38%);
}
[data-theme="light"] .bottomnav { background: rgba(244,246,241,.94); border-top: 1px solid var(--line); }
[data-theme="light"] .intro { background: radial-gradient(1000px 600px at 50% 28%, #dcefe4 0%, #ecefe7 70%); }
/* ── EXPLICIT light (data-theme="light") element overrides ──────────────────
   IMPORTANT: the auto-light (OS) mirrors of these live INSIDE the
   @media(prefers-color-scheme:light) block below. Never put a
   `:root:not([data-theme="dark"]) <el>` rule with hardcoded LIGHT colors at
   top level — it would paint light surfaces in dark-OS mode while the --bg
   token (correctly media-scoped) stays dark → dark bg + light cards. */
[data-theme="light"] .topcard,
[data-theme="light"] .qibla-card { background: linear-gradient(160deg, #ffffff 0%, #edf5f0 100%); border: 1px solid var(--line); }
[data-theme="light"] .garden-card { background: linear-gradient(180deg, #f3f9f5, #e8f3ec); }
[data-theme="light"] .quit-card { background: linear-gradient(135deg, #fbf6ea, #f3ead6); border-color: #e7d8b4; }
[data-theme="light"] .gprog { background: linear-gradient(135deg, #ffffff, #edf5f0); }
[data-theme="light"] .scheck .tag.sunnah { background: #e1efe7; color: var(--green); border-color: #c6e0d0; }
[data-theme="light"] .scheck .tag.fard { background: #f6edd6; color: #765a0f; border-color: #e6d4a6; }
[data-theme="light"] .garden-svg .garden-ground { fill: #cfe2cd; }
[data-theme="light"] .garden-svg .garden-line { stroke: #bcd3c2; }
[data-theme="light"] .t-counter { background: radial-gradient(circle at 50% 32%, #169a63, #0f7a4d); box-shadow: 0 2px 8px rgba(20,55,38,.18); }
[data-theme="light"] .t-counter .t-target { color: rgba(255,255,255,.85); }
[data-theme="light"] .intro-veil { background: radial-gradient(circle at center, transparent 0%, #d6e8dd 100%); opacity: .6; }
[data-theme="light"] .suggestion-card { background: linear-gradient(135deg, #eef6f1, #e2efe8); }
[data-theme="light"] .ramadan-card { background: linear-gradient(135deg, #dde8f8, #c8d8f0); border-color: #7799cc; }
[data-theme="light"] .ramadan-card .rc-row { border-top-color: #b7c6e4; }
[data-theme="light"] .sleep-btn.active { background: #fbe7da; border-color: #d98a5c; color: #9c4520; }
[data-theme="light"] .toast.info { background: #e4f2ea; }
/* Progress-ring tracks: token-based, theme-agnostic — safe at top level */
.ring-track { stroke: var(--track); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f6f1; --bg2: #ecefe7; --card: #ffffff; --card2: #f3f6f1;
    --line: #e3e7dc; --green: #0c6f44; --green-solid: #0c6f44; --green-soft: #08673a;
    --gold: #9a7b1f; --gold-light: #b8941f; --gold-soft: #094f31;
    --text: #122520; --muted: #44654e; --ref: #4a6e5d; --danger: #b8442b; --danger-text: #b8442b;
    --inset: #eef3ed; --inset-active: #e1efe7;
    --surface: linear-gradient(160deg, #ffffff 0%, #edf5f0 100%);
    --state-done: #e4f2ea; --state-amber: #f6edd6;
    --state-warm: linear-gradient(135deg, #fbf6ea, #f3ead6);
    --hl: #e0efe6; --track: #d8e6dd; --switch-off: #cdddce;
    --hm1: #d6ecdd; --hm2: #a3d9b8;
    --shadow: 0 10px 30px rgba(20,55,38,.10);
  }
  :root:not([data-theme="dark"]) body {
    background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 38%);
  }
  :root:not([data-theme="dark"]) .bottomnav { background: rgba(244,246,241,.94); border-top: 1px solid var(--line); }
  :root:not([data-theme="dark"]) .intro { background: radial-gradient(1000px 600px at 50% 28%, #dcefe4 0%, #ecefe7 70%); }
  /* auto-light element mirrors (only inside this media block so they never leak into dark-OS) */
  :root:not([data-theme="dark"]) .topcard,
  :root:not([data-theme="dark"]) .qibla-card { background: linear-gradient(160deg, #ffffff 0%, #edf5f0 100%); border: 1px solid var(--line); }
  :root:not([data-theme="dark"]) .garden-card { background: linear-gradient(180deg, #f3f9f5, #e8f3ec); }
  :root:not([data-theme="dark"]) .quit-card { background: linear-gradient(135deg, #fbf6ea, #f3ead6); border-color: #e7d8b4; }
  :root:not([data-theme="dark"]) .gprog { background: linear-gradient(135deg, #ffffff, #edf5f0); }
  :root:not([data-theme="dark"]) .scheck .tag.sunnah { background: #e1efe7; color: var(--green); border-color: #c6e0d0; }
  :root:not([data-theme="dark"]) .scheck .tag.fard { background: #f6edd6; color: #765a0f; border-color: #e6d4a6; }
  :root:not([data-theme="dark"]) .garden-svg .garden-ground { fill: #cfe2cd; }
  :root:not([data-theme="dark"]) .garden-svg .garden-line { stroke: #bcd3c2; }
  :root:not([data-theme="dark"]) .t-counter { background: radial-gradient(circle at 50% 32%, #169a63, #0f7a4d); box-shadow: 0 2px 8px rgba(20,55,38,.18); }
  :root:not([data-theme="dark"]) .t-counter .t-target { color: rgba(255,255,255,.85); }
  :root:not([data-theme="dark"]) .intro-veil { background: radial-gradient(circle at center, transparent 0%, #d6e8dd 100%); opacity: .6; }
  :root:not([data-theme="dark"]) .suggestion-card { background: linear-gradient(135deg, #eef6f1, #e2efe8); }
  :root:not([data-theme="dark"]) .ramadan-card { background: linear-gradient(135deg, #dde8f8, #c8d8f0); border-color: #7799cc; }
  :root:not([data-theme="dark"]) .ramadan-card .rc-row { border-top-color: #b7c6e4; }
  :root:not([data-theme="dark"]) .ramadan-card .rc-title, :root:not([data-theme="dark"]) .ramadan-card .rc-val { color: #3366bb; }
  :root:not([data-theme="dark"]) .jumuah-banner { background: linear-gradient(135deg, #d4eddf, #c4e4d0); }
  :root:not([data-theme="dark"]) .sleep-btn.active { background: #fbe7da; border-color: #d98a5c; color: #9c4520; }
  :root:not([data-theme="dark"]) .toast.info { background: #e4f2ea; }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
button, select { font-family: inherit; }   /* browsers default these to the system font */
html { scroll-behavior: smooth; font-size: 100%; }
body {
  font-family: var(--font-en);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overscroll-behavior-y: contain;
  /* Plain vertical shift, no chromatic radial halo behind the header */
  background: linear-gradient(180deg, var(--bg2) 0%, var(--bg) 40%);
  background-attachment: fixed;
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh; /* correct mobile viewport (iOS toolbar collapse) */
  padding-bottom: 90px;
}
.wrap { max-width: 560px; margin: 0 auto; padding: 0 16px; }

/* Header */
header { padding: calc(env(safe-area-inset-top) + 18px) 0 8px; text-align: center; }
.bismillah { font-size: 1.4375rem; color: var(--gold-soft); letter-spacing: .5px; margin-bottom: 2px; font-weight: 700; font-family: var(--font-ar); }
.app-name { font-size: 0.8125rem; color: var(--muted); text-transform: uppercase; letter-spacing: 2px; }

/* Greeting + date */
.topcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-top: 12px;
  position: relative;
  overflow: hidden;
}
.greet { font-size: 1.625rem; font-weight: 500; letter-spacing: 0; line-height: 1.15;
  font-family: var(--font-serif); font-style: italic; }
html[dir="rtl"] .greet { font-family: var(--font-ar); font-style: normal; font-weight: 600; }
.date { font-size: 0.7812rem; color: var(--gold-soft); margin-top: 5px; letter-spacing: .02em; opacity: .9; }

/* Next-prayer countdown banner (editorial/luxury) */
.next-prayer { display: flex; align-items: center; gap: 12px; margin-top: 16px;
  padding: 13px 16px; border-radius: 14px;
  background: linear-gradient(120deg, rgba(212,175,55,.14), rgba(212,175,55,.04));
  border: 1px solid rgba(212,175,55,.28); }
.next-prayer .np-icon { font-size: 1.1875rem; flex: 0 0 auto; opacity: .9; }
.next-prayer .np-body { flex: 1; min-width: 0; }
.next-prayer .np-label { font-size: 0.6562rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); opacity: .85; }
.next-prayer .np-name { font-size: 1.125rem; font-weight: 700; color: var(--text); }
.next-prayer .np-sep { color: var(--muted); margin: 0 7px; }
.next-prayer .np-rem { font-size: 0.875rem; color: var(--gold-soft); font-weight: 600; }
.next-prayer .np-time { font-size: 0.9375rem; font-weight: 700; color: var(--text); flex: 0 0 auto; text-align: end; }
html[dir="rtl"] .next-prayer .np-name, html[dir="rtl"] .next-prayer .np-rem { font-family: var(--font-ar); }

/* Progress ring */
.progress-row { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.ring { position: relative; width: 72px; height: 72px; flex: 0 0 auto; }
.ring svg { transform: rotate(-90deg); }
.ring .pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.0625rem; color: var(--gold-soft);
}
.stats { flex: 1; }
.stat-line { font-size: 0.8125rem; color: var(--muted); }
.stat-line b { color: var(--text); font-size: 0.9375rem; }
.streak-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.streak { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
  background: var(--inset-active); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; font-size: 0.8125rem; }
.streak-row .streak { margin-top: 0; }
.prayer-streak { cursor: pointer; transition: transform .08s, border-color .15s; }
.prayer-streak:hover { border-color: var(--gold); }
.prayer-streak:active { transform: scale(.95); }
.streak .fire { font-size: 0.9375rem; color: var(--gold); display: inline-flex; }
.streak .fire svg { width: 14px; height: 14px; }

/* Prayer times */
.prayer-strip {
  display: flex; gap: 8px; overflow-x: auto; margin-top: 12px; padding-bottom: 4px;
  scrollbar-width: none;
}
.prayer-strip::-webkit-scrollbar { display: none; }
.ptile {
  flex: 0 0 auto; min-width: 74px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 8px;
}
.ptile.next { border-color: var(--gold); background: var(--inset-active); }
.ptile .pn { font-size: 0.75rem; color: var(--muted); }
.ptile .pt { font-size: 0.9375rem; font-weight: 700; margin-top: 2px; }
.ptile.next .pn { color: var(--gold-soft); }
html[dir="rtl"] .en-only { display: none; }   /* hide English translation lines in Arabic mode */
.set-city-cta { display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; font-family: inherit;
  background: linear-gradient(120deg, rgba(212,175,55,.16), rgba(212,175,55,.05));
  border: 1px solid rgba(212,175,55,.32); border-radius: 14px; padding: 13px 16px; color: var(--text); text-align: start; }
.set-city-cta:active { background: rgba(212,175,55,.22); }
.set-city-cta .scc-ic { font-size: 1.125rem; flex: 0 0 auto; }
.set-city-cta .scc-tx { flex: 1; font-size: 0.875rem; font-weight: 600; }
.set-city-cta .scc-go { color: var(--gold-soft); font-size: 1.375rem; flex: 0 0 auto; }
html[dir="rtl"] .set-city-cta .scc-go { transform: scaleX(-1); }
.field-hint { font-size: 0.8125rem; color: var(--danger-text); min-height: 1.2em; margin: 4px 2px 8px; }
input[aria-invalid="true"] { border-color: var(--danger); }
.loc-line { font-size: 0.75rem; color: var(--muted); margin-top: 8px; text-align: center; }
.loc-line a { color: var(--green-soft); text-decoration: none; }

/* Tabs */
.tabs { display: flex; gap: 6px; margin-top: 18px; background: var(--card); border: 1px solid var(--line);
  padding: 5px; border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 1 0 auto; white-space: nowrap; text-align: center; padding: 9px 12px; border-radius: 9px; font-size: 0.75rem; font-weight: 600;
  color: var(--muted); cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .12s cubic-bezier(.22,1,.36,1); border: none; background: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.tab svg { width: 14px; height: 14px; flex: 0 0 auto; }
.ic-sm { width: 11px; height: 11px; display: inline-block; vertical-align: -1px; }
.btn-ic, .loc-pin { width: 15px; height: 15px; vertical-align: -3px; margin-inline-end: 6px; display: inline-block; }
.loc-pin { width: 13px; height: 13px; vertical-align: -2px; margin-inline-end: 4px; }
.tab.active { background: linear-gradient(135deg, var(--green), #176e48); color: #fff; }

/* Sections / items */
.section-title { margin: 20px 4px 8px; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--muted); }
.item {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; margin-bottom: 10px; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .12s cubic-bezier(.22,1,.36,1);
}
.item:active { transform: scale(.99); }
.item.done { border-color: var(--green); background: var(--state-done); }
.check {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
  border: 2px solid var(--line); display: flex; align-items: center; justify-content: center;
  margin-top: 2px; transition: background-color .15s, border-color .15s, color .15s, transform .12s cubic-bezier(.22,1,.36,1); font-size: 1rem; color: transparent;
}
.item.done .check { background: var(--green); border-color: var(--green); color: #fff; }
@keyframes checkPop { from { transform: scale(.35); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.item.just-done .check { animation: checkPop .3s cubic-bezier(.22,1,.36,1); }
@media (prefers-reduced-motion: reduce) { .item.just-done .check { animation: none; } }
.item-body { flex: 1; min-width: 0; }
.item-title { font-weight: 600; font-size: 0.9375rem; }
.item.done .item-title { color: var(--green-soft); }
.item-desc { font-size: 0.8125rem; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.item-arabic { font-size: var(--arabic-font-size); color: var(--gold-soft); margin-top: 6px; text-align: right; line-height: 1.9; direction: rtl; font-family: var(--font-ar); }
.item-ref { font-size: 0.6875rem; color: var(--ref); margin-top: 6px; font-style: italic; }
.badge { display: inline-block; font-size: 0.6875rem; padding: 2px 7px; border-radius: 999px;
  background: var(--inset-active); border: 1px solid var(--line); color: var(--gold-soft); margin-left: 6px; vertical-align: middle; }

/* Bottom nav */
.bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0;
  background: rgba(11,31,23,.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); display: flex; justify-content: space-around;
  padding: 8px 0 calc(env(safe-area-inset-bottom) + 8px); z-index: 50;
}
.nav-btn { position: relative; background: none; border: none; color: var(--muted); font-size: 0.6875rem; display: flex;
  flex-direction: column; align-items: center; gap: 3px; cursor: pointer; flex: 1; transition: color .18s; }
.nav-btn .ic { font-size: 1.25rem; transition: transform .18s; display: flex; align-items: center; justify-content: center; height: 24px; }
.nav-btn .ic svg { width: 23px; height: 23px; display: block; }
.nav-btn.active { color: var(--gold-soft); }
.nav-btn.active .ic { transform: translateY(-2px); }
.nav-btn.active::before { content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: 3px; background: var(--gold); }

/* Settings */
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 10px; }
.setting .label { font-size: 0.875rem; font-weight: 600; }
.setting .sub { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.btn { background: linear-gradient(135deg, var(--green), #176e48); color: #fff; border: none;
  padding: 11px 16px; border-radius: 12px; font-size: 0.875rem; font-weight: 600; cursor: pointer; min-height: 44px; }
.btn.ghost { background: none; border: 1px solid var(--line); color: var(--text); }
.btn.gold { background: linear-gradient(135deg, var(--gold), #b8941f); color: #1a1207; }
/* Light mode: a luminous metallic gold pill instead of the flat dull --gold fill.
   Explicit-light at top level; auto-light (OS) mirror lives in the media block. */
[data-theme="light"] .btn.gold {
  background: linear-gradient(135deg, #f3d066 0%, #dcae39 52%, #c2900f 100%);
  color: #3a2b06; font-weight: 800; border: 1px solid rgba(150,110,12,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
  transition: box-shadow .15s, transform .08s;
}
[data-theme="light"] .btn.gold:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .btn.gold {
    background: linear-gradient(135deg, #f3d066 0%, #dcae39 52%, #c2900f 100%);
    color: #3a2b06; font-weight: 800; border: 1px solid rgba(150,110,12,.35);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
    transition: box-shadow .15s, transform .08s;
  }
  :root:not([data-theme="dark"]) .btn.gold:active {
    transform: translateY(1px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
  }
}
.switch { position: relative; width: 48px; height: 28px; flex: 0 0 auto; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; background: var(--switch-off); border-radius: 999px; transition: background-color .2s; }
.slider::before { content: ""; position: absolute; height: 22px; width: 22px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s; }
.switch input:checked + .slider { background: var(--green-soft); }
.switch input:checked + .slider::before { transform: translateX(20px); }
input[type="time"], input[type="text"] {
  background: var(--inset); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 8px 10px; font-size: 0.875rem; font-family: inherit;
}
.hidden { display: none !important; }  /* beats later display:flex rules such as .streak-warn, which otherwise render an empty card */
.quote { text-align: center; color: var(--muted); font-size: 0.9375rem; font-style: italic;
  font-family: var(--font-serif); margin: 24px 8px 8px; line-height: 1.6; }
html[dir="rtl"] .quote { font-family: var(--font-ar); font-size: 0.875rem; }
.footer-note { text-align: center; color: var(--ref); font-size: 0.6875rem; margin: 14px 0; line-height: 1.5; }
/* Numbers align in columns (times, counters, stats) — no digit jitter */
.np-time, .np-rem, .ptile .pt, .t-count, .t-target, .stat-line, .gprog-num, .lb-streak,
.pct, #nextPrayer, .countdown { font-variant-numeric: tabular-nums; }
.reset-link { color: var(--danger); font-size: 0.75rem; text-decoration: underline; cursor: pointer; }

/* Tasbih */
.t-arabic { font-size: calc(var(--arabic-font-size) + 10px); color: var(--gold-soft); direction: rtl; margin-top: 4px; font-family: var(--font-ar); }
.t-translit { font-size: 0.9375rem; color: var(--text); margin-top: 6px; font-weight: 600; }
.t-meaning { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.t-counter {
  width: 180px; height: 180px; margin: 18px auto 8px; border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #1c4634, #0e2a1f);
  border: 3px solid var(--gold); display: flex; flex-direction: column;
  align-items: center; justify-content: center; cursor: pointer; user-select: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.4), inset 0 2px 10px rgba(255,255,255,.05);
  transition: transform .08s;
}
.t-counter:active { transform: scale(.95); }
.t-counter.pulse { animation: pulse .4s; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(212,175,55,.6)} 100%{box-shadow:0 0 0 26px rgba(212,175,55,0)} }
.t-count { font-size: 3.5rem; font-weight: 800; color: #fff; line-height: 1; }
.t-target { font-size: 0.9375rem; color: var(--gold-soft); margin-top: 4px; }
.t-actions { display: flex; gap: 10px; margin-top: 6px; justify-content: center; }
.t-hint { font-size: 0.6875rem; color: var(--muted); margin-top: 10px; }
.dhikr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dchip {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; cursor: pointer; text-align: left; transition: background-color .15s, border-color .15s, color .15s, transform .12s cubic-bezier(.22,1,.36,1);
}
.dchip.active { border-color: var(--gold); background: var(--inset-active); }
.dchip .dn { font-size: 0.8125rem; font-weight: 600; }
.dchip .dt { font-size: 0.6875rem; color: var(--muted); margin-top: 2px; }
.ttot { display: flex; justify-content: space-between; background: var(--card);
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.ttot .tn { font-size: 0.875rem; }
.ttot .tv { font-size: 0.875rem; font-weight: 700; color: var(--gold-soft); }

/* Qur'an */
.q-log { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.qbtn { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 14px; border: none;
  background: linear-gradient(135deg, var(--green), #176e48); color: #fff; font-size: 1.375rem; font-weight: 800; cursor: pointer; }
.qbtn:active { filter: brightness(.94); }
.q-readout { flex: 1; text-align: center; }
.q-readout b { font-size: 1.875rem; font-weight: 800; color: var(--green-soft); display: block; }
.q-readout span { font-size: 0.75rem; color: var(--muted); }
.khatm-bar { height: 12px; background: var(--inset); border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden; margin-top: 10px; }
.khatm-fill { height: 100%; transform: scaleX(0); background: linear-gradient(90deg, var(--green), var(--gold)); transition: transform .4s; }

/* Language switch */
header { position: relative; }
.lang-pill {
  position: absolute; top: calc(env(safe-area-inset-top) + 16px); inset-inline-end: 4px;
  background: var(--card); border: 1px solid var(--line); color: var(--gold-soft);
  border-radius: 999px; padding: 6px 12px; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
}
.lang-pill:active { transform: scale(.96); }
.lang-toggle { display: flex; background: var(--inset); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px; }
.lt-btn { border: none; background: none; color: var(--muted); padding: 7px 12px; border-radius: 7px; position: relative;
  font-size: 0.8125rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.lt-btn.active { background: linear-gradient(135deg, var(--green), #176e48); color: #fff; }

/* RTL (Arabic) */
html[dir="rtl"] body {
  font-family: var(--font-ar);
}
/* Consistency: every UI element uses the same Naskh in Arabic (nav, buttons,
   inputs, tools) so nothing falls back to the Latin UI font */
html[dir="rtl"] button, html[dir="rtl"] input, html[dir="rtl"] select,
html[dir="rtl"] textarea, html[dir="rtl"] .nav-btn, html[dir="rtl"] .nav-btn span,
html[dir="rtl"] .more-tile, html[dir="rtl"] .seg-btn, html[dir="rtl"] .btn {
  font-family: var(--font-ar);
}
html[dir="rtl"] .item-arabic { text-align: right; }
html[dir="rtl"] .item-ref, html[dir="rtl"] .stat-line, html[dir="rtl"] .dchip { text-align: right; }
html[dir="rtl"] .lang-pill { inset-inline-end: 4px; }
html[dir="rtl"] .t-translit { direction: ltr; }

/* Group leaderboard */
.lb-row { display: flex; align-items: center; gap: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 8px; }
.lb-row.me { border-color: var(--gold); background: var(--inset-active); }
.lb-rank { flex: 0 0 auto; width: 24px; text-align: center; font-weight: 800; color: var(--gold-soft); font-size: 0.9375rem; }
.lb-mid { flex: 1; min-width: 0; }
.lb-name { font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.lb-name .you { font-size: 0.6875rem; background: var(--green); color: #fff; padding: 1px 7px; border-radius: 999px; }
.lb-bar { height: 8px; background: var(--inset); border-radius: 999px; overflow: hidden; margin-top: 7px; }
.lb-fill { height: 100%; transform: scaleX(0); background: linear-gradient(90deg, var(--green), var(--green-soft)); transition: transform .5s; }
.lb-fill.done { background: linear-gradient(90deg, var(--gold), var(--gold-soft)); }
.lb-row.resting { opacity: .55; }
.lb-right { flex: 0 0 auto; text-align: right; }
.lb-pct { font-size: 1rem; font-weight: 800; }
.lb-streak { font-size: 0.6875rem; color: var(--muted); margin-top: 2px; white-space: nowrap; }
html[dir="rtl"] .lb-right { text-align: left; }

/* Avatars */
.avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 800; color: #fff;
  position: relative; }
.avatar .dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--green-soft); border: 2px solid var(--card); }
html[dir="rtl"] .avatar .dot { right: auto; left: -1px; }

/* Podium (top 3) */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 6px 2px 4px; }
.pod { flex: 1 1 0; max-width: 120px; background: var(--card); border: 1px solid var(--line);
  border-radius: 16px; padding: 12px 8px 10px; text-align: center; position: relative; }
.pod.p1 { border-color: var(--gold); background: linear-gradient(160deg, var(--inset-active), var(--card));
  padding-top: 18px; transform: translateY(-6px); }
.pod.p2 { border-color: #9fb9ac; }
.pod.p3 { border-color: #b98a5e; }
.pod .pod-streak { line-height: 1.5; }
.pod .crown { position: absolute; top: -16px; left: 0; right: 0; font-size: 1.375rem; }
.pod .pod-av { margin: 0 auto; width: 48px; height: 48px; font-size: 1.0625rem; }
.pod.p1 .pod-av { width: 58px; height: 58px; font-size: 1.25rem; box-shadow: 0 0 0 3px var(--gold); }
.pod .pod-name { font-size: 0.75rem; font-weight: 700; margin-top: 7px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.pod .pod-pct { font-size: 1.125rem; font-weight: 800; margin-top: 2px; }
.pod .pod-medal { font-size: 1rem; margin-top: 1px; }
.pod .pod-streak { font-size: 0.6875rem; color: var(--muted); margin-top: 2px; }

/* Member-count pills under the group header */
#gMemberCount { display: flex; flex-wrap: wrap; gap: 7px; }
.gmc-pill { display: inline-flex; align-items: center; font-size: 0.75rem; font-weight: 600; color: var(--muted);
  background: var(--inset); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; }
.gmc-pill.gmc-active { color: var(--green-soft); }
.gmc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-soft); margin-inline-end: 6px; }

/* Collective group progress */
.gprog { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px; margin: 14px 0 4px; }
.gprog-top { display: flex; justify-content: space-between; align-items: baseline; }
.gprog-title { font-size: 0.8125rem; font-weight: 700; }
.gprog-num { font-size: 0.8125rem; color: var(--gold-soft); font-weight: 700; }
.gprog-bar { height: 10px; background: var(--inset); border: 1px solid var(--line); border-radius: 999px;
  overflow: hidden; margin-top: 10px; }
.gprog-fill { height: 100%; transform: scaleX(0); background: linear-gradient(90deg, var(--green), var(--gold)); transition: transform .5s; }

/* Today / Streak segmented toggle */
.seg-toggle { display: flex; background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 4px; gap: 4px; margin: 14px 0 4px; }
.seg-btn { flex: 1; border: none; background: none; color: var(--muted); padding: 9px;
  border-radius: 8px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.seg-btn.active { background: linear-gradient(135deg, var(--green), #176e48); color: #fff; }

/* Qur'an reader (mushaf) */
.q-search { width: 100%; margin: 12px 0 6px; }
.surah-row { display: flex; align-items: center; gap: 12px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 11px 14px; margin-bottom: 8px; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .12s cubic-bezier(.22,1,.36,1); }
.surah-row:active { transform: scale(.99); }
.surah-row.last { border-color: var(--gold); background: var(--inset-active); }
.surah-num { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: flex;
  align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 700; color: var(--gold-soft);
  background: var(--inset); border: 1px solid var(--line); position: relative; }
.surah-mid { flex: 1; min-width: 0; }
.surah-en { font-size: 0.9375rem; font-weight: 600; }
.surah-meaning { font-size: 0.75rem; color: var(--muted); margin-top: 1px; }
.surah-ar { flex: 0 0 auto; font-size: 1.1875rem; color: var(--gold-soft); font-family: var(--font-ar); }
.surah-meta { font-size: 0.6875rem; color: var(--ref); margin-top: 2px; }

.reader-top { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.reader-back { flex: 0 0 auto; background: var(--card); border: 1px solid var(--line); color: var(--text);
  border-radius: 12px; padding: 9px 14px; font-size: 0.875rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.reader-titlecard { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; text-align: center; margin-bottom: 10px; }
.reader-titlecard .rt-ar { font-size: 1.625rem; color: var(--gold-soft); font-family: var(--font-ar); }
.reader-titlecard .rt-en { font-size: 0.875rem; color: var(--text); margin-top: 4px; font-weight: 600; }
.reader-titlecard .rt-meta { font-size: 0.75rem; color: var(--muted); margin-top: 4px; }
.reader-tools { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 0 0 10px; flex-wrap: wrap; }
.rtool { background: var(--card); border: 1px solid var(--line); color: var(--text); border-radius: 999px;
  padding: 7px 13px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.rtool.active { border-color: var(--gold); color: var(--gold-soft); background: var(--inset-active); }
.bismillah-line { text-align: center; font-size: 1.5rem; color: var(--gold-soft); margin: 6px 0 14px;
  font-family: var(--font-quran); }
.ayah { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; }
.ayah-ar { font-size: 1.5rem; line-height: 2.1; color: var(--text); direction: rtl; text-align: right;
  font-family: var(--font-quran); }
.ayah-num { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 26px;
  padding: 0 6px; margin: 0 4px; border-radius: 50%; background: var(--inset); border: 1px solid var(--gold);
  color: var(--gold-soft); font-size: 0.75rem; font-family: -apple-system, sans-serif; vertical-align: middle; }
.ayah-tr { font-size: 1rem; color: var(--muted); line-height: 1.6; margin-top: 10px;
  padding-top: 10px; border-top: 1px solid var(--line); }
/* Pages (mushaf) */
.page-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; }
.pg-arrow { flex: 0 0 auto; width: 46px; height: 44px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--card); color: var(--gold-soft); font-size: 1.5rem; font-weight: 700; cursor: pointer; }
.pg-arrow:active { background: var(--inset-active); }
.page-jump { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 0.875rem; color: var(--muted); }
.page-jump input { width: 64px; text-align: center; font-size: 1rem; font-weight: 700; color: var(--gold-soft); }
.page-surah-head { text-align: center; font-size: 1.0625rem; font-weight: 700; color: var(--gold-soft);
  background: var(--inset); border: 1px solid var(--line); border-radius: 12px; padding: 8px; margin: 14px 0 8px;
  font-family: var(--font-ar); }
.page-ar { direction: rtl; text-align: justify; line-height: 2.4; color: var(--text); margin: 6px 0;
  font-family: var(--font-quran); }
.page-trs { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.page-trs .ayah-tr { border: none; padding: 0; margin-bottom: 8px; }
.page-trs .ayah-tr b { color: var(--gold-soft); margin-inline-end: 4px; }
.reader-nav { display: flex; gap: 10px; margin: 6px 0 12px; }
.reader-nav .btn { flex: 1; }
.q-loading { text-align: center; color: var(--muted); padding: 30px 0; font-size: 0.875rem; }

/* Salat al-Fara'id (obligatory prayers) */
.faraid-prayer { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 10px; }
.faraid-prayer.next { border-color: var(--gold); background: var(--inset-active); }
.fp-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fp-name { font-size: 1.0625rem; font-weight: 700; }
.fp-name .ar { color: var(--gold-soft); font-size: 1rem; margin-inline-start: 6px; }
.fp-time { font-size: 0.9375rem; font-weight: 700; color: var(--green-soft); white-space: nowrap; }
.fp-rakaat { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; background: var(--inset);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 0.8125rem; }
.fp-rakaat b { color: var(--gold-soft); font-size: 0.9375rem; }
.fp-note { font-size: 0.75rem; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.fp-sunan { font-size: 0.75rem; color: var(--ref); margin-top: 6px; font-style: italic; }
.faraid-total { background: var(--surface); border: 1px solid var(--gold);
  border-radius: var(--radius); padding: 14px 16px; text-align: center; margin: 12px 0; }
.faraid-total b { color: var(--gold-soft); font-size: 1.375rem; }
/* checkable fard + rawatib rows inside a prayer card */
.scheck { display: flex; align-items: center; gap: 11px; padding: 10px 0; cursor: pointer; border-top: 1px solid var(--line); }
.scheck:active { opacity: .7; }
.scheck .cb { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; color: transparent; transition: background-color .15s, border-color .15s, color .15s, transform .12s cubic-bezier(.22,1,.36,1); }
.scheck.done .cb { background: var(--green); border-color: var(--green); color: #fff; }
.scheck .sl { flex: 1; min-width: 0; font-size: 0.875rem; }
.scheck.done .sl { color: var(--green-soft); }
.scheck .tag { font-size: 0.6875rem; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line);
  margin-inline-start: 7px; vertical-align: middle; }
.scheck .tag.fard { background: #2a1c12; color: var(--gold-soft); border-color: #5a4326; }
.scheck .tag.sunnah { background: #14241c; color: var(--green-soft); }
.scheck .sr { flex: 0 0 auto; font-size: 0.75rem; color: var(--muted); }

/* Qibla compass */
.qibla-card { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px; margin-bottom: 10px; text-align: center; }
.qibla-dial { position: relative; width: 180px; height: 180px; margin: 6px auto 12px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #14342600, var(--inset)); border: 2px solid var(--line); }
.qibla-mark { position: absolute; font-size: 0.75rem; color: var(--muted); font-weight: 700; }
.qibla-mark.n { top: 6px; left: 50%; transform: translateX(-50%); color: var(--danger); }
.qibla-mark.s { bottom: 6px; left: 50%; transform: translateX(-50%); }
.qibla-mark.e { right: 8px; top: 50%; transform: translateY(-50%); }
.qibla-mark.w { left: 8px; top: 50%; transform: translateY(-50%); }
.qibla-needle { position: absolute; inset: 0; transition: transform .2s ease-out; }
.qibla-needle .arrow { position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  font-size: 1.875rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.qibla-needle .stem { position: absolute; left: 50%; top: 46px; width: 3px; height: 48px;
  transform: translateX(-50%); background: linear-gradient(var(--gold), transparent); border-radius: 2px; }
.qibla-deg { font-size: 1.375rem; font-weight: 800; color: var(--gold-soft); }
.qibla-sub { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.qibla-btn { margin-top: 10px; }
/* Compact Qibla card on Today */
.qibla-mini { display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 16px; margin-top: 12px; cursor: pointer; color: var(--text); font-family: inherit; }
.qibla-mini:active { background: var(--inset-active); }
.qm-dial { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--gold);
  display: flex; align-items: center; justify-content: center; color: var(--gold-soft); position: relative; }
.qm-needle { transition: transform .25s ease-out; display: flex; }
.qm-info { flex: 1; display: flex; flex-direction: column; }
.qm-deg { font-size: 1rem; font-weight: 700; color: var(--gold-soft); }
.qm-lbl { font-size: 0.75rem; color: var(--muted); }
.qm-go { color: var(--muted); font-size: 1.375rem; }
html[dir="rtl"] .qm-go { transform: scaleX(-1); }

/* Qur'an audio */
.ayah.playing { border-color: var(--gold); background: var(--inset-active); }
.page-ayah { border-radius: 4px; padding: 0 2px; transition: background .2s; cursor: pointer; }
.page-ayah.playing { background: var(--inset-active); outline: 1px solid var(--gold); }
.ayah-play { background: var(--inset); border: 1px solid var(--line); color: var(--gold-soft);
  border-radius: 999px; padding: 5px 13px; font-size: 0.75rem; font-weight: 600; cursor: pointer; margin-top: 10px; }
.ayah-play:active { transform: scale(.97); }
.rtool.playing { border-color: var(--gold); color: var(--gold-soft); background: var(--inset-active); }

/* Intro / hero splash (animated pixel canvas) */
.intro { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(1000px 600px at 50% 28%, #155038 0%, #0b1f17 70%);
  transition: opacity .6s ease, transform .6s ease; user-select: none; }
.intro.gone { opacity: 0; transform: scale(1.05); pointer-events: none; }
.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-veil { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at center, transparent 0%, #0b1f17 100%); opacity: .82; }
.intro-content { position: relative; text-align: center; padding: 24px; max-width: 560px;
  animation: introRise .9s cubic-bezier(.2,.7,.2,1) both; }
@keyframes introRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.intro-bismillah { font-size: 1.625rem; font-weight: 700; margin-bottom: 14px; font-family: var(--font-ar); }
.intro-title { font-size: 2.5rem; font-weight: 800; letter-spacing: 1px; line-height: 1.1; margin: 0; }
.intro-sub { color: var(--muted); font-size: 0.9375rem; margin: 16px 0 28px; line-height: 1.6; }
.intro-enter { padding: 13px 28px; font-size: 1rem; }
.intro-tap { position: absolute; bottom: calc(env(safe-area-inset-bottom) + 18px); left: 0; right: 0;
  text-align: center; font-size: 0.75rem; color: var(--muted); opacity: .7; }
/* Splash brand text: solid themed ink, no gradient clip (readable, and not the generic AI look).
   --gold-soft is gold on dark and deep emerald on light; the title takes the body ink. */
.brand-ink { color: var(--gold-soft); }
.intro-title.brand-ink { color: var(--text); }

/* Garden of deeds */
.garden-card { background: linear-gradient(180deg, #0e3326 0%, #0c2419 100%); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px 0; margin-top: 12px; overflow: hidden; }
.garden-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.garden-title { font-size: 0.875rem; font-weight: 700; }
.garden-cap { font-size: 0.75rem; color: var(--gold-soft); font-weight: 600; text-align: end; }
.garden-svg { display: block; width: 100%; height: 150px; margin-top: 8px; overflow: visible; }
.garden-svg .garden-ground { fill: #0a1c14; }
.garden-svg .garden-line { stroke: #1f4536; }
.garden-note { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); text-align: center; margin-top: 8px;
  font-style: italic; opacity: .85; }
html[dir="rtl"] .garden-note { font-family: var(--font-ar); font-style: normal; font-size: 0.875rem; }
/* Sunbula (wheat-ear) growth — fast, satisfying, then a gentle sway */
@keyframes grow-stalk { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes grain-pop  { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes sway       { 0%,100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
.garden-svg .sunbula { transform-box: fill-box; transform-origin: bottom center;
  animation: grow-stalk .5s cubic-bezier(.22,1,.36,1) both, sway 5s ease-in-out var(--swd,.6s) infinite; }
.garden-svg .grain   { transform-box: fill-box; transform-origin: center;
  animation: grain-pop .42s cubic-bezier(.22,1,.36,1) both; }
@media (prefers-reduced-motion: reduce) {
  .garden-svg .sunbula, .garden-svg .grain { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Azkar library */
.az-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 10px; }
.az-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.az-tl { font-size: 0.875rem; font-weight: 700; }
.az-count { flex: 0 0 auto; font-size: 0.6875rem; padding: 2px 9px; border-radius: 999px; background: var(--inset-active);
  border: 1px solid var(--line); color: var(--gold-soft); font-weight: 700; }
.az-ar { font-size: var(--arabic-font-size); line-height: 2; color: var(--text); direction: rtl; text-align: right; margin-top: 8px;
  font-family: var(--font-ar); }
.az-en { font-size: 0.8125rem; color: var(--muted); margin-top: 8px; line-height: 1.5; }
.az-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.az-ref { font-size: 0.6875rem; color: var(--ref); font-style: italic; }
.az-play { background: var(--inset); border: 1px solid var(--line); color: var(--gold-soft); border-radius: 999px;
  padding: 6px 14px; font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.az-play.playing { border-color: var(--gold); background: var(--inset-active); }
.az-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.icon-btn { background: none; border: none; color: var(--gold-soft);
  width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center;
  justify-content: center; cursor: pointer; padding: 0; position: relative; isolation: isolate; }
.icon-btn::before { content: ''; position: absolute; inset: 5px; border-radius: 999px; z-index: -1;
  background: var(--inset); border: 1px solid var(--line); transition: background .15s, border-color .15s; }
.icon-btn:active::before { background: var(--inset-active); border-color: var(--gold); }
#azkarCats .seg-btn { flex: 0 0 auto; padding: 8px 12px; }

/* Per-prayer consistency chart */
.stat-grid { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.stat-days { display: grid; grid-template-columns: 64px repeat(7, 1fr); gap: 6px; align-items: center; }
.stat-dhead { font-size: 0.6875rem; color: var(--muted); text-align: center; }
.stat-pname { font-size: 0.8125rem; font-weight: 600; }
.stat-cell { aspect-ratio: 1; border-radius: 6px; background: var(--inset); border: 1px solid var(--line); }
.stat-cell.on { background: var(--green); border-color: var(--green-soft); }
.stat-cell.today { box-shadow: 0 0 0 2px var(--gold) inset; }
.stat-pct { display: grid; grid-template-columns: 64px 1fr 40px; gap: 8px; align-items: center; margin-top: 6px; }
.stat-bar { height: 8px; background: var(--inset); border-radius: 999px; overflow: hidden; }
.stat-fill { height: 100%; background: linear-gradient(90deg, var(--green), var(--gold)); transition: transform .5s; }
.stat-pctnum { font-size: 0.75rem; color: var(--gold-soft); font-weight: 700; text-align: end; }
.stat-30 { font-size: 0.6875rem; color: var(--muted); margin: 12px 2px 4px; }

/* Reader: per-ayah actions, transliteration, bookmarks, settings sheet, tafsir */
.ayah-tl { font-size: 0.8125rem; color: var(--green-soft); margin-top: 8px; font-style: italic; line-height: 1.6; }
.ayah-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.ayah-act { background: none; border: none; color: var(--gold-soft); border-radius: 999px;
  padding: 0 12px; font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: inherit;
  min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center;
  position: relative; isolation: isolate; }
.ayah-act::before { content: ''; position: absolute; inset: 11px 0; border-radius: 999px; z-index: -1;
  background: var(--inset); border: 1px solid var(--line); }
.ayah-act:active { transform: scale(.96); }
.ayah.flash { animation: ayahFlash 1.6s ease; }
@keyframes ayahFlash { 0%,40% { background: var(--hl); border-color: var(--gold); } 100% {} }
.bm-row .surah-num { font-size: 0.9375rem; }
.bm-del { flex: 0 0 auto; background: none; border: none; color: var(--danger); font-size: 1rem; cursor: pointer; padding: 4px 8px; }

.sheet { position: fixed; inset: 0; z-index: 300; opacity: 0; pointer-events: none; transition: opacity .25s; }
.sheet.open { opacity: 1; pointer-events: auto; }
.sheet-back { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.sheet-panel { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px 20px 0 0; padding: 16px 18px calc(env(safe-area-inset-bottom) + 20px);
  transform: translateY(100%); transition: transform .25s ease; max-height: 80vh; overflow-y: auto; }
.sheet.open .sheet-panel { transform: none; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sheet-title { font-size: 1rem; font-weight: 700; }
.sheet-x { background: none; border: none; color: var(--muted); font-size: 1.125rem; cursor: pointer; }
.sheet-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.sheet-row span { font-size: 0.875rem; font-weight: 600; }
.sheet-row select { background: var(--inset); border: 1px solid var(--line); color: var(--text); border-radius: 10px;
  padding: 8px 10px; font-size: 0.875rem; font-family: inherit; max-width: 60%; }
.tafsir-ar { font-size: 1.125rem; line-height: 2; color: var(--text); direction: rtl; text-align: justify;
  font-family: var(--font-ar); }

/* Sepia "reading" theme — warm parchment surface for the Qur'an */
.q-read-sepia { background: #f4ecd6; border-radius: 16px; padding: 10px 10px 2px; margin-top: 4px;
  box-shadow: inset 0 2px 14px rgba(120,90,30,.12); }
.q-read-sepia .ayah { background: #fbf6e6; border-color: #e6d8b4; }
.q-read-sepia .ayah.playing, .q-read-sepia .wbw.on { background: #f3e8c4; border-color: #b8941f; }
.q-read-sepia .ayah-ar, .q-read-sepia .page-ar { color: #362912; }
.q-read-sepia .ayah-tr { color: #6b5a38; border-color: #e6d8b4; }
.q-read-sepia .ayah-tl { color: #8a6d2e; }
.q-read-sepia .ayah-num, .q-read-sepia .page-ar .ayah-num { background: #efe3bf; border-color: #b8941f; color: #7a5f12; }
.q-read-sepia .bismillah-line { color: #7a5f12; }
.q-read-sepia .page-surah-head { background: #efe3bf; border-color: #d9c79a; color: #6e5410; }
.q-read-sepia .page-trs { border-color: #e6d8b4; }
.q-read-sepia .page-trs .ayah-tr b { color: #8a6d2e; }
.q-read-sepia .ayah-act { color: #6e5410; }
.q-read-sepia .ayah-act::before { background: #efe3bf; border-color: #d9c79a; }
.q-read-sepia .tj-legend { background: #fbf6e6; border-color: #e6d8b4; }
.q-read-sepia .tj-leg { color: #6b5a38; }
.q-read-sepia .q-loading { color: #8a7a52; }

/* Word-by-word (Tier 3) */
.wbw-grid { display: flex; flex-wrap: wrap; gap: 8px; direction: rtl; }
.wbw { flex: 0 0 auto; min-width: 78px; background: var(--inset); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; text-align: center; }
.wbw-ar { font-size: 1.375rem; color: var(--text); font-family: var(--font-ar); line-height: 1.6; }
.wbw-tl { font-size: 0.75rem; color: var(--green-soft); margin-top: 4px; direction: ltr; font-style: italic; }
.wbw-en { font-size: 0.8125rem; color: var(--gold-soft); margin-top: 2px; direction: ltr; font-weight: 600; }
.wbw.on { background: var(--hl); border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
.wbw.on .wbw-ar { color: var(--gold-soft); }

/* Tajweed legend */
.tj-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; padding: 10px 12px; margin-bottom: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.tj-leg { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6875rem; color: var(--muted); }
.tj-leg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* Adhan banner */
.adhan-banner { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom) + 78px);
  max-width: 536px; margin: 0 auto; z-index: 250; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; background: var(--surface); border: 1px solid var(--gold);
  border-radius: 14px; padding: 12px 16px; box-shadow: var(--shadow); animation: introRise .4s ease both; }
.adhan-banner span { font-size: 0.875rem; font-weight: 600; color: var(--gold-soft); }
.adhan-banner button { background: var(--card); border: 1px solid var(--line); color: var(--text);
  border-radius: 999px; padding: 7px 16px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; font-family: inherit; }

/* Group switcher tabs (multiple groups) */
.gtabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; }
.gtabs::-webkit-scrollbar { display: none; }
.gtab { flex: 0 0 auto; white-space: nowrap; background: var(--card); border: 1px solid var(--line);
  color: var(--muted); border-radius: 999px; padding: 8px 14px; font-size: 0.8125rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.gtab.active { background: linear-gradient(135deg, var(--green), #176e48); color: #fff; border-color: var(--green); }
.gtab-add { color: var(--gold-soft); font-size: 1rem; font-weight: 700; padding: 8px 13px; }

/* Bad-habit / quit tracker */
.quit-card { background: var(--state-warm); border: 1px solid #5a4326;
  border-radius: var(--radius); padding: 16px; margin-top: 12px; text-align: center; }
.quit-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; text-align: start; }
.quit-title { font-size: 0.875rem; font-weight: 700; color: var(--gold-soft); }
.quit-name { font-size: 1rem; font-weight: 700; margin: 6px 0 2px; }
.quit-days { font-size: 3.25rem; font-weight: 800; color: var(--gold-soft); line-height: 1.05; }
.quit-dlabel { font-size: 0.8125rem; color: var(--muted); }
.quit-best { font-size: 0.75rem; color: var(--muted); margin-top: 6px; }
.quit-motiv { font-size: 1rem; color: var(--gold-soft); margin: 14px 0 4px; direction: rtl; line-height: 1.9;
  font-family: var(--font-ar); }
.quit-motiv-en { font-size: 0.75rem; color: var(--muted); font-style: italic; line-height: 1.5; }
.quit-actions { display: flex; gap: 8px; margin-top: 14px; }
.quit-actions .btn { flex: 1; }
.quit-setup input { width: 100%; margin: 10px 0; }
.quit-x { background: none; border: none; color: var(--muted); font-size: 0.8125rem; cursor: pointer; text-decoration: underline; }

/* Smooth view transition + a touch more depth on cards */
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#view-today, #view-faraid, #view-quran, #view-tasbih, #view-group, #view-settings, #view-more {
  animation: viewIn .34s cubic-bezier(.22,1,.36,1) both; }

/* ── Smoothness polish: unified tap feedback + crisp motion ───────── */
.btn, .seg-btn, .dchip, .more-tile, .name-card, .mood-btn, .dua-cat-btn,
.ptile, .gtab, .ayah, .surah-row, .more-back, .nav-btn, .qibla-mini,
.set-city-cta, .az-play, .icon-btn, .quit-card, .pg-arrow, .qbtn, .rtool,
.tab, .lt-btn, .lang-pill, .step-item, .hifz-badge, .bb-block, .speed-btn, .sleep-btn, .reader-back,
.dhikr-tap, .qada-btn, .loc-profile, .arabic-letter, .ayah-play, .ayah-act, .load-more-btn {
  transition: transform .12s cubic-bezier(.22,1,.36,1), filter .15s, background-color .15s, border-color .15s, box-shadow .15s; }
.btn:active, .seg-btn:active, .dchip:active, .more-tile:active, .name-card:active,
.mood-btn:active, .dua-cat-btn:active, .ptile:active, .gtab:active, .surah-row:active,
.more-back:active, .qibla-mini:active, .set-city-cta:active,
.az-play:active, .icon-btn:active, .pg-arrow:active, .qbtn:active, .rtool:active,
.tab:active, .lt-btn:active, .step-item:active, .hifz-badge:active, .speed-btn:active, .sleep-btn:active,
.reader-back:active, .dhikr-tap:active, .qada-btn:active, .loc-profile:active, .arabic-letter:active,
.load-more-btn:active { transform: scale(.96); }
.bb-block:active { background-color: var(--inset-active); }   /* flush segments: tint, don't shrink */
.nav-btn:active .ic { transform: translateY(-1px) scale(.92); }
/* Tap targets: PRODUCT.md requires >=44px for one-handed phone use.
   Sized on the elements themselves rather than an absolutely-positioned
   ::after overlay -- an overlay on buttons this closely spaced would extend
   past its own button and swallow the neighbour's taps. */
.rtool, .bm-del, .sheet-x {
  min-height: 44px; min-width: 44px;
  display: inline-flex; align-items: center; justify-content: center; }

/* gentle scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--inset-active); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media (prefers-reduced-motion: reduce) { #view-today, #view-faraid, #view-quran, #view-tasbih, #view-group, #view-settings { animation: none; } }
/* One elevation per card: the 1px border defines the edge, so no wide drop shadow on top of it */
.topcard, .garden-card, .quit-card, .qibla-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.item, .faraid-prayer, .az-item, .ayah { transition: border-color .15s, background .15s, transform .08s; }

/* Toast notifications */
.toast-wrap { position: fixed; top: calc(env(safe-area-inset-top) + 12px); left: 12px; right: 12px;
  max-width: 536px; margin: 0 auto; z-index: 400; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px;
  font-size: 0.8125rem; font-weight: 600; pointer-events: auto;
  animation: toastIn .3s ease, toastOut .3s ease 3.7s forwards;
  box-shadow: 0 4px 16px rgba(0,0,0,.4); }
.toast.error { background: #3a1a14; border: 1px solid var(--danger); color: #f08070; }
.toast.info  { background: #16402e; border: 1px solid var(--green); color: var(--text); }
.toast.warn  { background: var(--state-amber); border: 1px solid #b8941f; color: var(--gold-soft); }
@keyframes toastIn  { from { opacity:0; transform: translateY(-8px); } to { opacity:1; transform:none; } }
@keyframes toastOut { from { opacity:1; } to { opacity:0; transform: translateY(-6px); } }

/* Day-complete Lottie (celebrateDay in app.js): transient, centred, never takes taps. No colours here: the animation carries its own. */
#celebrate { position: fixed; top: 50%; left: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px; z-index: 350;
  pointer-events: none; transition: opacity .3s ease; }
#celebrate.out { opacity: 0; }
#celebrateBg { position: fixed; top: calc(50% - 100px); left: 50%; width: 224px; height: 232px; margin-left: -112px; z-index: 349;
  border-radius: 28px; background: color-mix(in srgb, var(--card) 92%, transparent); border: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow); pointer-events: none; transition: opacity .3s ease; }
#celebrateBg.out { opacity: 0; }
#celebrateText { position: fixed; top: calc(50% + 90px); left: 16px; right: 16px; text-align: center; font-weight: 700; font-size: 1.0625rem; color: var(--gold-soft); z-index: 350; pointer-events: none; transition: opacity .3s; }
#celebrateText.out { opacity: 0; }
.sync-line { font-size: 0.8125rem; color: var(--muted); text-align: center; margin-top: 8px; min-height: 1.2em; }
.sync-line[data-state="pending"], .sync-line[data-state="offline"] { color: var(--gold-soft); }
@media (prefers-reduced-motion: reduce) { #celebrate, #celebrateBg, #celebrateText { transition: none; } }

/* Offline banner */
.offline-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 500; text-align: center;
  background: var(--state-amber); border-bottom: 1px solid #b8941f; color: var(--gold-soft);
  font-size: 0.75rem; font-weight: 600; padding: calc(env(safe-area-inset-top) + 6px) 0 6px;
  /* visibility (not just transform) so the hidden bar stays out of the
     accessibility tree and out of document.body.innerText; delayed by the
     transition duration so the slide-up animation still plays on hide */
  transform: translateY(-100%); visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s; }
.offline-bar.visible { transform: translateY(0); visibility: visible;
  transition: transform .3s ease, visibility 0s; }

/* Progress dashboard (weekly heatmap in Settings) */
.dash-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 10px 0; }
.dash-cell { aspect-ratio: 1; border-radius: 6px; background: var(--inset); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; font-size: 0.5625rem; color: var(--muted); }
.dash-cell.d0 { background: var(--inset); }
.dash-cell.d1 { background: var(--hm1); border-color: #2a5a3a; }
.dash-cell.d2 { background: var(--hm2); border-color: #2a7a4a; }
.dash-cell.d3 { background: var(--green); border-color: var(--green-soft); }
.dash-cell.d4 { background: var(--gold); border-color: var(--gold-soft); color: #1a1207; }
.dash-label { font-size: 0.6875rem; color: var(--muted); text-align: center; margin-top: 2px; }
.dash-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin: 8px 0; }
.dash-month-cell { aspect-ratio: 1; border-radius: 4px; }

/* Font size slider */
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  background: var(--track); border-radius: 999px; outline: none; cursor: pointer; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px;
  border-radius: 50%; background: var(--green-soft); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%;
  background: var(--green-soft); cursor: pointer; border: none; }

/* Surah load-more */
.load-more-btn { width: 100%; padding: 12px; background: var(--card); border: 1px solid var(--line);
  color: var(--gold-soft); border-radius: 12px; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
  margin-top: 4px; font-family: inherit; }
.load-more-btn:active { background: var(--inset-active); }

/* Hover states (pointer/desktop) */
@media (hover: hover) {
  .item:hover { filter: brightness(1.08); }
  .nav-btn:hover { color: var(--text); }
  .btn:hover { filter: brightness(1.1); }
  .ptile:hover { border-color: var(--green-soft); filter: brightness(1.07); }
  .surah-row:hover { filter: brightness(1.08); }
  .dchip:hover { border-color: var(--gold-soft); }
  .rtool:hover { border-color: var(--green-soft); }
}

/* Button & UI polish */
.btn { letter-spacing: 0.3px; transition: transform .12s cubic-bezier(.22,1,.36,1), filter .15s, box-shadow .15s; }
.btn:active { transform: scale(.97); }
input[type="text"], input[type="time"], input[type="number"] {
  background: var(--card2); border: 1px solid var(--line); color: var(--text);
  border-radius: 10px; padding: 10px 14px; font-size: 0.875rem; font-family: inherit;
  transition: border-color .2s, box-shadow .2s; outline: none;
}
input[type="text"]:focus, input[type="time"]:focus, input[type="number"]:focus {
  border-color: var(--green-soft); box-shadow: 0 0 0 3px rgba(43,182,115,.15);
}
/* Visible placeholder text (token-based → correct in both themes, no leak) */
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input[type="checkbox"] { accent-color: var(--green-soft); }
.section-title { color: var(--gold-soft); }
/* Keyboard focus rings (a11y) */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
button:focus-visible, .nav-btn:focus-visible, .more-tile:focus-visible, .seg-btn:focus-visible,
.item:focus-visible, .ayah:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Skip-to-content link: off-screen until keyboard-focused */
.skip-link { position: fixed; top: 8px; left: 50%; transform: translateX(-50%) translateY(-150%);
  z-index: 9999; background: var(--gold); color: #1a1205; font-weight: 700; padding: 10px 16px;
  border-radius: 8px; text-decoration: none; transition: transform .15s ease; }
.skip-link:focus { transform: translateX(-50%) translateY(0); }
#mainContent:focus { outline: none; }

/* Tablet / landscape */
@media (min-width: 800px) {
  .wrap { max-width: 700px; }
  .bottomnav > * { max-width: 700px; margin: 0 auto; }
  .prayer-strip { justify-content: center; gap: 16px; }
  .ptile { min-width: 90px; }
}

/* Tajweed colorblind patterns */
html.tajweed-cb .tj-ghunna { text-decoration: underline dotted 2px; }
html.tajweed-cb .tj-qalqala { text-decoration: underline wavy 2px; }
html.tajweed-cb .tj-madd { border-bottom: 2px solid currentColor; }
html.tajweed-cb .tj-shaddah { font-weight: 900; }

/* Skeleton bars: one component for every slow fetch (see skel() in app.js).
   Each caller only sets the bar's shape; colours are the card/line tokens. */
.skel { height: .9em; margin: .55em 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--card) 25%, var(--line) 50%, var(--card) 75%);
  background-size: 200% 100%; animation: skel 1.2s ease-in-out infinite; }
.skel:nth-child(3n) { width: 70%; }
[dir="rtl"] .skel { animation-direction: reverse; }
@keyframes skel { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
.prayer-strip .skel { flex: 0 0 74px; height: 64px; margin: 0; border-radius: 14px; }
.q-loading .skel { height: 26px; margin: 16px 0 16px auto; border-radius: 8px; }
#gLeaderboard .skel { width: 100%; height: 58px; margin: 0 0 8px; border-radius: 14px; }   /* full-width rows */

/* Character counter */
.char-count { font-size: 0.6875rem; color: var(--muted); display: block; text-align: right; margin-top: 2px; }

/* Surah infinite-scroll sentinel */
#surahSentinel { height: 1px; }

/* ===== v2.0.0 NEW FEATURES ===== */
/* Practice Search */
.practice-search-wrap { position: relative; margin: 14px 0 8px; }
.practice-search-wrap input { width: 100%; padding-left: 36px; }
.practice-search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 0.9375rem; pointer-events: none; }
.search-count { font-size: 0.75rem; color: var(--muted); margin: 4px 4px 8px; }
#searchResults { }

/* Daily Ayah / Hadith cards */
.daily-card { background: var(--surface); border: 1px solid var(--gold); border-radius: var(--radius); padding: 16px; margin: 12px 0; }
[data-theme="light"] .daily-card { background: linear-gradient(135deg, #e8f4ee, #d4eddf); }
.daily-card .dc-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold-soft); margin-bottom: 8px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.dc-ic { flex: 0 0 auto; opacity: .9; }
.dc-ic-wrap { display: inline-flex; align-items: center; }
.vc-label .dc-ic, .garden-title .dc-ic { vertical-align: middle; }
.garden-title { display: inline-flex; align-items: center; gap: 6px; }
.daily-card .dc-arabic { font-size: 1.375rem; line-height: 2; direction: rtl; text-align: right; font-family: var(--font-ar); color: var(--text); margin-bottom: 10px; }
.daily-card .dc-text { font-size: 1rem; color: var(--text); line-height: 1.6; margin-bottom: 8px; }
.daily-card .dc-ref { font-size: 0.6875rem; color: var(--muted); font-style: italic; }
.daily-card .dc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; }

/* Friday / Ramadan banners */
.jumuah-banner { background: linear-gradient(135deg, #1a4028, #0d2918); border: 1px solid var(--gold); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0; text-align: center; }
[data-theme="light"] .jumuah-banner { background: linear-gradient(135deg, #d4eddf, #c4e4d0); }
.jumuah-banner .jb-title { font-size: 1.25rem; font-weight: 800; color: var(--gold-soft); }
.jumuah-banner .jb-ar { font-size: 1.5rem; font-family: var(--font-ar); color: var(--gold-soft); margin: 6px 0; }
.jumuah-banner .jb-sub { font-size: 0.8125rem; color: var(--muted); }
.ramadan-card { background: linear-gradient(135deg, #1a2a40, #0d1a28); border: 1px solid #4466aa; border-radius: var(--radius); padding: 16px; margin: 12px 0; }
[data-theme="light"] .ramadan-card { background: linear-gradient(135deg, #dde8f8, #c8d8f0); border-color: #7799cc; }
.ramadan-card .rc-title { font-size: 1rem; font-weight: 700; color: #88aaff; margin-bottom: 8px; }
[data-theme="light"] .ramadan-card .rc-title { color: #3366bb; }
.ramadan-card .rc-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid #2a3a5a; font-size: 0.875rem; }
.ramadan-card .rc-val { font-weight: 700; color: #aaccff; }
[data-theme="light"] .ramadan-card .rc-row { border-top-color: #99aabb; }
[data-theme="light"] .ramadan-card .rc-val { color: #3366bb; }

/* Streak warning & milestone */
.streak-warn { background: var(--state-warm); border: 1px solid var(--gold); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0; display: flex; align-items: flex-start; gap: 12px; }
[data-theme="light"] .streak-warn { background: #fff4e0; }
.streak-warn .sw-icon { font-size: 1.375rem; flex: 0 0 auto; }
.streak-warn .sw-body { flex: 1; }
.streak-warn .sw-title { font-size: 0.875rem; font-weight: 700; color: var(--gold-soft); }
.streak-warn .sw-sub { font-size: 0.75rem; color: var(--muted); margin-top: 3px; }
.milestone-modal { position: fixed; inset: 0; z-index: 600; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); }
.milestone-inner { background: var(--surface); border: 2px solid var(--gold); border-radius: var(--radius); padding: 32px 24px; text-align: center; max-width: 320px; margin: 16px; }
.milestone-inner .mi-num { font-size: 4rem; font-weight: 800; color: var(--gold-soft); line-height: 1; }
.milestone-inner .mi-label { font-size: 1.125rem; font-weight: 700; margin: 8px 0 4px; }
.milestone-inner .mi-sub { font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }

/* More view grid */
.more-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.more-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 12px; text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .12s cubic-bezier(.22,1,.36,1);
  display: block; width: 100%; font: inherit; color: inherit; }   /* a <button>: keyboard reachable */
.more-tile .mt-title, .more-tile .mt-sub { display: block; }
/* no double-tap zoom on anything tapped repeatedly (tasbih counter, buttons) */
button, a, [role="button"], .more-tile, #tapZone { touch-action: manipulation; }
.more-tile:active { transform: scale(.97); }
.more-tile .mt-ic { font-size: 1.75rem; margin-bottom: 6px; }
.more-tile .mt-label { font-size: 0.8125rem; font-weight: 600; }
.more-tile .mt-sub { font-size: 0.6875rem; color: var(--muted); margin-top: 2px; }
.more-tile .mt-icon { color: var(--gold-soft); height: 30px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; }
.more-tile .mt-icon svg { width: 27px; height: 27px; }
.section-title .st-ic { display: inline-flex; vertical-align: -3px; margin-inline-end: 6px; color: var(--gold-soft); }
.section-title .st-ic svg { width: 17px; height: 17px; }
.more-panel { display: none; }
.more-panel.open { display: block; }
.more-back { display: flex; align-items: center; gap: 8px; background: none; border: none; color: var(--text); font-size: 0.875rem; font-weight: 600; cursor: pointer; font-family: inherit; margin: 12px 0 16px; padding: 0; }

/* Hifz tracker */
.hifz-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin: 12px 0; }
.hifz-badge { aspect-ratio: 1; border-radius: 8px; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 700; cursor: pointer; background: var(--card); color: var(--muted); transition: background-color .15s, border-color .15s, color .15s, transform .12s cubic-bezier(.22,1,.36,1); user-select: none; }
.hifz-badge.learning { background: var(--state-amber); border-color: var(--gold); color: var(--gold-soft); }
.hifz-badge.memorized { background: var(--state-done); border-color: var(--green); color: var(--green-soft); }
[data-theme="light"] .hifz-badge.learning { background: #fff4cc; }
[data-theme="light"] .hifz-badge.memorized { background: #cceedc; }
.hifz-legend { display: flex; gap: 14px; margin: 8px 0; flex-wrap: wrap; }
.hifz-leg-item { display: flex; align-items: center; gap: 5px; font-size: 0.75rem; color: var(--muted); }
.hifz-leg-dot { width: 12px; height: 12px; border-radius: 3px; }

/* 99 Names grid */
.names-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.name-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .12s cubic-bezier(.22,1,.36,1); }
.name-card:active { transform: scale(.97); }
.name-card .nc-num { font-size: 0.6875rem; color: var(--muted); }
.name-card .nc-ar { font-size: 1.25rem; color: var(--gold-soft); font-family: var(--font-ar); margin: 4px 0; }
.name-card .nc-tl { font-size: 0.75rem; font-weight: 600; }
.name-card .nc-mean { font-size: 0.6875rem; color: var(--muted); }
.name-detail-modal { position: fixed; inset: 0; z-index: 600; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.5); }
.name-detail-inner { background: var(--card); border-radius: 20px 20px 0 0; padding: 28px 24px; width: 100%; max-width: 560px; text-align: center; }
.name-detail-inner .ndi-ar { font-size: 3rem; color: var(--gold-soft); font-family: var(--font-ar); margin: 8px 0; }
.name-detail-inner .ndi-tl { font-size: 1.25rem; font-weight: 700; }
.name-detail-inner .ndi-mean { font-size: 0.9375rem; color: var(--muted); margin-top: 8px; line-height: 1.6; }
.name-detail-inner .ndi-close { margin-top: 20px; }

/* Zakat calculator */
.zakat-result { background: var(--surface); border: 1px solid var(--gold); border-radius: var(--radius); padding: 16px; text-align: center; margin: 12px 0; }
[data-theme="light"] .zakat-result { background: linear-gradient(135deg, #d4eddf, #c4e4d0); }
.zakat-result .zr-label { font-size: 0.75rem; color: var(--muted); }
.zakat-result .zr-amount { font-size: 2.25rem; font-weight: 800; color: var(--gold-soft); }

/* Step guides (Wudu, Salah, Hajj) */
.step-list { margin: 12px 0; }
.step-item { display: flex; align-items: flex-start; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 8px; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .12s cubic-bezier(.22,1,.36,1); }
.step-item.done { border-color: var(--green); background: var(--state-done); }
[data-theme="light"] .step-item.done { background: #cceedc; }
.step-num { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8125rem; color: var(--muted); }
.step-item.done .step-num { background: var(--green); border-color: var(--green); color: #fff; }
.step-body { flex: 1; }
.step-title { font-size: 0.875rem; font-weight: 600; }
.step-desc { font-size: 0.875rem; color: var(--muted); margin-top: 3px; line-height: 1.5; }
.step-ar { font-size: 1.125rem; color: var(--gold-soft); font-family: var(--font-ar); margin-top: 6px; direction: rtl; text-align: right; line-height: 1.9; }

/* Logs: Sadaqah, Gratitude */
.log-entry { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.log-entry .le-main { flex: 1; }
.log-entry .le-title { font-size: 0.875rem; font-weight: 600; }
.log-entry .le-sub { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.log-entry .le-val { font-size: 1rem; font-weight: 800; color: var(--gold-soft); }
.log-del { background: none; border: none; color: var(--danger); font-size: 1.125rem; cursor: pointer; padding: 4px 6px; }

/* Post-salah dhikr panel */
.dhikr-panel { background: var(--card); border: 1px solid var(--green); border-radius: var(--radius); padding: 16px; margin: 10px 0; }
.dhikr-panel .dp-title { font-size: 0.875rem; font-weight: 700; color: var(--green-soft); margin-bottom: 12px; }
.dhikr-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.dhikr-row .dr-text { flex: 1; font-size: 0.8125rem; }
.dhikr-row .dr-ar { font-size: 1rem; color: var(--gold-soft); font-family: var(--font-ar); }
.dhikr-tap { background: var(--inset); border: 1px solid var(--line); color: var(--text); border-radius: 999px; padding: 6px 14px; font-size: 0.8125rem; font-weight: 700; cursor: pointer; min-width: 52px; text-align: center; user-select: none; }
[data-theme="light"] .dhikr-tap { background: #e8f4ee; }
.dhikr-tap.done { background: var(--green); border-color: var(--green); color: #fff; }

/* Qada tracker */
.qada-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.qada-name { flex: 1; font-size: 0.875rem; font-weight: 600; }
.qada-count { font-size: 1.125rem; font-weight: 800; color: var(--gold-soft); width: 36px; text-align: center; }
.qada-btn { background: var(--inset); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 6px 12px; font-size: 1rem; font-weight: 700; cursor: pointer; }
[data-theme="light"] .qada-btn { background: #e8f4ee; }
.qada-btn.minus { color: var(--danger); }

/* Custom dhikr */
.custom-dhikr-item { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; }
.custom-dhikr-item .cdi-main { flex: 1; }
.custom-dhikr-item .cdi-ar { font-size: 1.125rem; color: var(--gold-soft); font-family: var(--font-ar); }
.custom-dhikr-item .cdi-tl { font-size: 0.8125rem; font-weight: 600; }
.custom-dhikr-item .cdi-target { font-size: 0.6875rem; color: var(--muted); }

/* Seerah timeline */
.timeline { margin: 12px 0; }
.tl-item { display: flex; gap: 14px; margin-bottom: 16px; }
.tl-line { display: flex; flex-direction: column; align-items: center; flex: 0 0 auto; }
.tl-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); flex: 0 0 auto; }
.tl-stem { flex: 1; width: 2px; background: var(--line); margin: 4px 0; min-height: 20px; }
.tl-body { flex: 1; padding-bottom: 8px; }
.tl-year { font-size: 0.6875rem; color: var(--gold-soft); font-weight: 700; margin-bottom: 2px; }
.tl-event { font-size: 0.875rem; font-weight: 600; }
.tl-desc { font-size: 0.75rem; color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* Deep stats */
.deep-stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.deep-stat .ds-label { font-size: 0.8125rem; font-weight: 600; }
.deep-stat .ds-sub { font-size: 0.6875rem; color: var(--muted); margin-top: 2px; }
.deep-stat .ds-val { font-size: 1.375rem; font-weight: 800; color: var(--gold-soft); text-align: right; }

/* Audio speed / sleep timer */
.audio-controls { display: flex; gap: 18px 16px; flex-wrap: wrap; align-items: center; justify-content: center; margin: 4px 0 8px; }
.ac-group { display: inline-flex; gap: 6px; align-items: center; flex-wrap: nowrap; }  /* wraps between the Speed and Sleep groups, never inside one */
.ac-label { font-size: 0.6875rem; color: var(--muted); }
.speed-btn { background: var(--card); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 5px 10px; font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.speed-btn.active { border-color: var(--gold); color: var(--gold-soft); background: var(--inset-active); }
[data-theme="light"] .speed-btn.active { background: #d4eddf; }
.sleep-btn { background: var(--card); border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 5px 10px; font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.sleep-btn.active { border-color: #aa6644; color: #ffaa88; background: #2a1a12; }
[data-theme="light"] .sleep-btn.active { background: #ffeedd; }

/* PWA install banner */
.pwa-banner { position: fixed; bottom: calc(env(safe-area-inset-bottom) + 80px); left: 12px; right: 12px; max-width: 536px; margin: 0 auto; background: var(--surface); border: 1px solid var(--green); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; z-index: 240; box-shadow: var(--shadow); animation: introRise .4s ease both; }
[data-theme="light"] .pwa-banner { background: linear-gradient(135deg, #d4eddf, #c4e4d0); }
.pwa-banner .pb-text { flex: 1; font-size: 0.8125rem; line-height: 1.4; }
.pwa-banner .pb-title { font-weight: 700; color: var(--green-soft); }
.pwa-banner .pb-x { background: none; border: none; color: var(--muted); font-size: 1.25rem; cursor: pointer; padding: 0 4px; line-height: 1; }

/* Mood / Emotional check-in */
.mood-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 12px 0; }
.mood-btn { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 6px; text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .12s cubic-bezier(.22,1,.36,1); }
.mood-btn:active { transform: scale(.95); }
.mood-btn.selected { border-color: var(--gold); background: var(--inset-active); }
[data-theme="light"] .mood-btn.selected { background: #d4eddf; }
.mood-btn .mb-ic { font-size: 1.5rem; }
.mood-btn .mb-label { font-size: 0.6875rem; color: var(--muted); margin-top: 4px; }

/* Practice heatmap */
.heatmap { display: flex; flex-wrap: wrap; gap: 3px; margin: 10px 0; }
.hm-cell { width: 12px; height: 12px; border-radius: 2px; background: var(--card); border: 1px solid var(--line); }
.hm-cell.l1 { background: var(--hm1); border-color: var(--hm1); }
.hm-cell.l2 { background: var(--hm2); border-color: var(--hm2); }
.hm-cell.l3 { background: var(--green); border-color: var(--green); }
.hm-cell.l4 { background: var(--gold); border-color: var(--gold); }
[data-theme="light"] .hm-cell.l1 { background: #c8e8d8; border-color: #c8e8d8; }
[data-theme="light"] .hm-cell.l2 { background: #88c8a8; border-color: #88c8a8; }
[data-theme="light"] .hm-cell.l3 { background: var(--green); border-color: var(--green); }

/* Vocab of the day */
.vocab-card { background: var(--card); border: 1px solid var(--gold); border-radius: var(--radius); padding: 16px; margin: 12px 0; }
.vocab-card .vc-word { font-size: 1.75rem; color: var(--gold-soft); font-family: var(--font-ar); direction: rtl; text-align: right; margin-bottom: 6px; }
.vocab-card .vc-tl { font-size: 1.125rem; font-weight: 700; }
.vocab-card .vc-def { font-size: 0.8125rem; color: var(--muted); margin-top: 6px; line-height: 1.5; }

/* Year in review */
.yir-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.yir-stat { text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; }
.yir-stat .ys-num { font-size: 2.5rem; font-weight: 800; color: var(--gold-soft); }
.yir-stat .ys-label { font-size: 0.75rem; color: var(--muted); }

/* Streak recovery challenge */
.recovery-card { background: var(--state-warm); border: 1px solid var(--gold); border-radius: var(--radius); padding: 16px; margin: 12px 0; }
[data-theme="light"] .recovery-card { background: linear-gradient(135deg, #fff4e0, #ffecc0); }
.recovery-card .rec-title { font-size: 0.9375rem; font-weight: 700; color: var(--gold-soft); }
.recovery-card .rec-days { display: flex; gap: 8px; margin-top: 10px; }
.rec-day { flex: 1; background: var(--inset); border: 1px solid var(--line); border-radius: 10px; padding: 10px 6px; text-align: center; font-size: 0.75rem; color: var(--muted); }
[data-theme="light"] .rec-day { background: #f0f8f4; }
.rec-day.done { background: var(--state-done); border-color: var(--green); color: var(--green-soft); }
[data-theme="light"] .rec-day.done { background: #cceedc; }

/* Location profiles */
.loc-profile { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; }
.loc-profile.active { border-color: var(--green); background: var(--state-done); }
[data-theme="light"] .loc-profile.active { background: #cceedc; }
.loc-profile .lp-ic { font-size: 1.25rem; }
.loc-profile .lp-name { font-size: 0.875rem; font-weight: 700; flex: 1; }
.loc-profile .lp-city { font-size: 0.75rem; color: var(--muted); }
.loc-profile .lp-badge { font-size: 0.6875rem; background: var(--green); color: #fff; border-radius: 4px; padding: 2px 6px; }

/* Congregation & Qibla accuracy */
.cong-check { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 0.75rem; color: var(--muted); cursor: pointer; }
.cong-check input { accent-color: var(--green-soft); }
.qibla-accuracy { font-size: 0.75rem; color: var(--green-soft); margin-top: 4px; }

/* Barakah time blocks */
.barakah-blocks { display: flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); margin: 10px 0; }
.bb-block { flex: 1; padding: 10px 4px; text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .12s cubic-bezier(.22,1,.36,1); font-size: 0.6875rem; color: var(--muted); border-right: 1px solid var(--line); }
.bb-block:last-child { border-right: none; }
.bb-block.blessed { background: var(--state-done); color: var(--green-soft); }
[data-theme="light"] .bb-block.blessed { background: #cceedc; }
.bb-block .bb-ic { font-size: 1.125rem; display: block; margin-bottom: 3px; }
.bb-block .bb-lbl { display: block; font-size: 0.6875rem; }

/* Du'a categories */
.dua-cat-btn { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: inherit; color: var(--text); }
.dua-cat-btn.active { background: var(--green-solid); border-color: var(--green-solid); color: #fff; }
.dua-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 10px; }
.dua-card .dua-title { font-size: 0.875rem; font-weight: 700; margin-bottom: 10px; }
.dua-card .dua-ar { font-size: 1.25rem; line-height: 2; direction: rtl; text-align: right; font-family: var(--font-ar); color: var(--text); }
.dua-card .dua-tl { font-size: 0.875rem; color: var(--muted); margin-top: 8px; font-style: italic; }
.dua-card .dua-en { font-size: 1rem; color: var(--text); margin-top: 6px; line-height: 1.6; }
.dua-card .dua-ref { font-size: 0.6875rem; color: var(--muted); margin-top: 8px; }

/* Arabic alphabet learning */
.arabic-letter { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 10px; text-align: center; cursor: pointer; }
.arabic-letter .al-letter { font-size: 2.25rem; font-family: var(--font-ar); color: var(--gold-soft); }
.arabic-letter .al-name { font-size: 0.75rem; font-weight: 600; margin-top: 4px; }
.arabic-letter .al-phon { font-size: 0.6875rem; color: var(--muted); }

/* Session tiles (guided dhikr) */
.session-tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin-bottom: 10px; cursor: pointer; display: flex; align-items: center; gap: 14px; transition: background-color .15s, border-color .15s, color .15s, transform .12s cubic-bezier(.22,1,.36,1); }
.session-tile:active { transform: scale(.98); }
.session-tile .st-ic { font-size: 1.75rem; }
.session-tile .st-name { font-size: 0.9375rem; font-weight: 700; }
.session-tile .st-sub { font-size: 0.75rem; color: var(--muted); margin-top: 3px; }
.session-tile .st-dur { font-size: 0.75rem; color: var(--gold-soft); }

/* Islamic calendar event */
.ic-event { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; display: flex; gap: 12px; align-items: flex-start; }
.ic-event .ice-date { min-width: 50px; text-align: center; background: var(--green); border-radius: 8px; padding: 6px 4px; }
.ic-event .ice-day { font-size: 1.375rem; font-weight: 800; color: #fff; line-height: 1; }
.ic-event .ice-month { font-size: 0.6875rem; color: #cceedd; }
.ic-event .ice-body { flex: 1; }
.ic-event .ice-name { font-size: 0.875rem; font-weight: 600; }
.ic-event .ice-desc { font-size: 0.75rem; color: var(--muted); margin-top: 3px; line-height: 1.5; }

/* Smart suggestions */
.suggestion-card { background: linear-gradient(135deg, #0e1e2a, var(--inset)); border: 1px solid var(--green); border-radius: var(--radius); padding: 14px 16px; margin: 10px 0; }
[data-theme="light"] .suggestion-card { background: linear-gradient(135deg, #d4eddf, #c4e4d0); }
.suggestion-card .sc2-title { font-size: 0.75rem; color: var(--green-soft); font-weight: 700; letter-spacing: .5px; margin-bottom: 8px; }
.suggestion-card .sc2-item { font-size: 0.875rem; padding: 4px 0; border-top: 1px solid var(--line); color: var(--text); }
.suggestion-card .sc2-item:first-of-type { border-top: none; }

/* New Muslim guide */
.pillar-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 10px; }
.pillar-card .pc-num { font-size: 1.75rem; font-weight: 800; color: var(--gold-soft); float: left; margin-right: 10px; line-height: 1; }
.pillar-card .pc-title { font-size: 0.9375rem; font-weight: 700; }
.pillar-card .pc-desc { font-size: 0.9375rem; color: var(--muted); margin-top: 6px; line-height: 1.5; }

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

/* Dyslexia font mode */
.dyslexia-font body, .dyslexia-font .item-title, .dyslexia-font .item-desc,
.dyslexia-font .dc-text, .dyslexia-font input, .dyslexia-font textarea,
.dyslexia-font select { font-family: Georgia, 'Times New Roman', serif; letter-spacing: .03em; word-spacing: .1em; line-height: 1.8; }

/* Names grid / cards */
.name-card .nc-en { font-size: 0.6875rem; color: var(--muted); }

/* Du'a view specific classes (dua-occ, dua-arabic, dua-trans) */
.dua-card .dua-occ { font-size: 0.8125rem; font-weight: 700; color: var(--gold-soft); margin-bottom: 10px; }
.dua-card .dua-arabic { font-size: 1.25rem; line-height: 2; direction: rtl; text-align: right; font-family: var(--font-ar); color: var(--text); margin-bottom: 8px; }
.dua-card .dua-trans { font-size: 1rem; color: var(--text); line-height: 1.6; margin-bottom: 6px; }

/* Vocab card (vc-label, vc-word=English, vc-ar, vc-meaning) */
.vocab-card .vc-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold-soft); margin-bottom: 8px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; }
.vocab-card .vc-ar { font-size: 1.625rem; line-height: 1.6; direction: rtl; text-align: right; font-family: var(--font-ar); color: var(--gold-soft); margin-bottom: 4px; }
.vocab-card .vc-meaning { font-size: 0.8125rem; color: var(--muted); line-height: 1.5; }

/* Year in review — new classes used in JS (ys-ic, ys-val, ys-lbl) */
.yir-stat .ys-ic { font-size: 1.75rem; margin-bottom: 4px; }
.yir-stat .ys-val { font-size: 1.625rem; font-weight: 800; color: var(--gold-soft); }
.yir-stat .ys-lbl { font-size: 0.6875rem; color: var(--muted); margin-top: 2px; }

/* Deep stat — ds-lbl alias for ds-label */
.deep-stat .ds-lbl { font-size: 0.75rem; color: var(--muted); }

/* Timeline — extra classes used in JS */
.tl-item .tl-yr { font-size: 0.6875rem; color: var(--gold-soft); font-weight: 700; min-width: 60px; padding-top: 2px; }
.tl-item .tl-content { flex: 1; }
.tl-item .tl-title { font-size: 0.875rem; font-weight: 600; }

/* IC event — ic-day simple class (vs .ice-day inside .ic-event) */
.ic-event .ic-day { font-weight: 700; color: var(--gold-soft); min-width: 36px; font-size: 0.9375rem; }

/* Barakah block active state */
.bb-block.active { background: var(--state-done); color: var(--green-soft); }
[data-theme="light"] .bb-block.active { background: #cceedc; }

/* Mood button active */
.mood-btn.active { border-color: var(--gold); background: var(--inset-active); }
[data-theme="light"] .mood-btn.active { background: #d4eddf; }

/* ── Offline & downloads panel ──────────────────────────────────── */
.off-intro { font-size: 0.875rem; line-height: 1.6; color: var(--text); margin: 0 0 8px; }
.off-store { margin-bottom: 14px; }
.off-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.off-card .label { font-size: 0.875rem; font-weight: 600; }
.off-card .sub, .off-store.sub { font-size: 0.75rem; color: var(--muted); margin-top: 2px; }
.off-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.off-head.off-sub { margin-top: 14px; }
.off-status { font-size: 0.75rem; color: var(--muted); white-space: nowrap; }
.off-status.ok { color: var(--green); font-weight: 600; }
.off-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.off-actions select { flex: 1; min-width: 0; min-height: 44px; }
.off-actions .btn { min-height: 44px; }
.off-actions .btn:disabled, .off-sbtn:disabled { opacity: .5; cursor: not-allowed; }
.off-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.off-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; margin-top: 12px; }
.off-bar span { display: block; height: 100%; background: var(--green); transition: transform .2s; }
/* Progress fills are full-width bars scaled from the inline-start edge, so the animation never triggers layout (JS sets transform: scaleX(0..1)) */
.khatm-fill, .lb-fill, .gprog-fill, .stat-fill, .off-bar span { width: 100%; transform-origin: left center; }
html[dir="rtl"] .khatm-fill, html[dir="rtl"] .lb-fill, html[dir="rtl"] .gprog-fill, html[dir="rtl"] .stat-fill, html[dir="rtl"] .off-bar span { transform-origin: right center; }
.off-surahs { margin-top: 12px; max-height: 360px; overflow-y: auto; border-top: 1px solid var(--line); }
.off-srow { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.off-snum { width: 28px; text-align: center; font-size: 0.75rem; color: var(--muted); }
.off-sname { flex: 1; min-width: 0; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.off-sbtn { min-height: 44px; padding: 0 12px; font-size: 0.8125rem; }
@media (prefers-reduced-motion: reduce) { .off-bar span { transition: none; } }
.footer-note a { color: var(--green-soft); text-underline-offset: 3px; }

/* Line icons that replaced the emoji (ico() in data.js). They size to the font
   and take the text colour, so both themes stay correct with no extra rules. */
.ico { width: 1em; height: 1em; vertical-align: -.14em; flex: 0 0 auto; }
.mood-btn .ico { display: block; margin: 0 auto 4px; font-size: 1.5rem; color: var(--gold-soft); }
.pod .crown, .ys-ic, .bb-block .ico, .pillar-card .ico, #jumuahBanner .ico, #ramadanCard .ico { color: var(--gold); }
.pod .pod-medal.m1 { color: #d4a72c; }
.pod .pod-medal.m2 { color: #9aa4ad; }
.pod .pod-medal.m3 { color: #b0713a; }
.qibla-needle .arrow .ico { color: var(--gold); }
.toast-ic { display: inline-flex; font-size: 1.125rem; }
.rtool .ico, .ayah-act .ico { font-size: 1rem; }

/* HIG: every tappable gets a 44px hit region. Small segmented buttons and chips keep their
   visual size and extend the hit area vertically with a transparent pseudo-element. */
.lt-btn::before, .seg-btn::before, .dua-cat-btn::before, .speed-btn::before, .sleep-btn::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; bottom: -8px; }
.seg-btn, .dua-cat-btn, .speed-btn, .sleep-btn { position: relative; }

.qada-row .btn { padding: 8px 12px; font-size: 0.8125rem; }   /* still 44px tall via .btn min-height; fits 320px */
.speed-btn::before, .sleep-btn::before { top: -9px; bottom: -9px; }   /* 26px chip + 18px = 44px; rows sit 18px apart so areas touch, never overlap */
.intro-seen #intro { display: none; }   /* set by the inline head script before first paint */
input[type="text"][aria-invalid="true"], input[type="text"][aria-invalid="true"]:focus { border-color: var(--danger-text); }   /* after the generic input rules so it wins */
/* Prayer strip: fade the edge(s) that hide more tiles, so a cut-off tile reads as "scroll for more" */
.prayer-strip.has-more { --fade-l: #000; --fade-r: transparent; }
.prayer-strip.has-less { --fade-l: transparent; --fade-r: #000; }
.prayer-strip.has-less.has-more { --fade-l: transparent; --fade-r: transparent; }
html[dir="rtl"] .prayer-strip.has-more:not(.has-less) { --fade-l: transparent; --fade-r: #000; }
html[dir="rtl"] .prayer-strip.has-less:not(.has-more) { --fade-l: #000; --fade-r: transparent; }
.prayer-strip.has-more, .prayer-strip.has-less {
  -webkit-mask-image: linear-gradient(to right, var(--fade-l) 0, #000 28px, #000 calc(100% - 28px), var(--fade-r) 100%);
  mask-image: linear-gradient(to right, var(--fade-l) 0, #000 28px, #000 calc(100% - 28px), var(--fade-r) 100%); }