/* ==========================================================================
   Aasiya — theme / skin system
   Loaded AFTER assets/styles.css and BEFORE the feature stylesheets.

   html[data-theme="v4"]      Iznik Plate   (DEFAULT) porcelain cream + navy + red + teal
   html[data-theme="v3"]      Iznik Classic  light blue ornament hero
   html[data-theme="v2"]      Cream Floral   warm cream + emerald green
   html[data-theme="v1"]      Porcelain Blue pale aqua + deep teal
   html[data-theme="emerald"] Emerald Night  = the base stylesheet, no-op

   Colours extracted from the owner's artboards in
   designs_assets/aasiya-com-web-app-features/project/*.dc.html
   ========================================================================== */


/* ==========================================================================
   0.  EMERALD — the base stylesheet already IS this theme. No-op on purpose.
   ========================================================================== */
html[data-theme="emerald"] { /* intentionally empty */ }


/* ==========================================================================
   1.  TOKEN BLOCKS
   Every custom property in :root is redefined, plus theme-only additions:
     --accent / --accent-2 / --accent-ink   primary action colour
     --brand-red / --brand-red-deep         the artboards' signature red
     --on-gold                              text that sits on a gold fill
     --glass                                topbar / tabbar / overlay glass
     --hairline                             faint internal divider
     --check-bg / --check-fg / --check-bd   the "prayer done" circle
     --hero-bg / --hero-num / --hero-ring   countdown hero treatment
     --font-display                         serif display face
     --tint-1..6 / --tint-fg-1..6           pastel launcher-icon tiles
   ========================================================================== */

/* -------- v4 · IZNIK PLATE -------------------------------------------------
   body #ece5d8 · app #faf7f1 · cards #ffffff · ink #10245c · navy #1b3a8f
   red #d8232a · teal #0f8fb5 · gold band #d9b46a→#b08a3c · serif display  */
html[data-theme="v4"] {
  --ink:          #ece5d8;
  --field:        #faf7f1;
  --surface:      #ffffff;
  --surface-2:    #f6f1e8;
  --line:         rgba(27, 58, 143, .14);
  --gold:         #8f6d21;
  --gold-bright:  #6f5417;
  --gold-dim:     #d3ab55;
  --text:         #10245c;
  --text-dim:     #7186bb;
  --good:         #2f7a63;
  --danger:       #c01d24;

  --accent:       #0f8fb5;
  --accent-2:     #12a6d0;
  --accent-ink:   #ffffff;
  --brand-red:      #d8232a;
  --brand-red-deep: #9e1318;
  --brand-red-soft: #ff8c7f;
  --on-gold:      #ffffff;
  --glass:        rgba(255, 255, 255, .94);
  --hairline:     rgba(27, 58, 143, .10);

  --check-bg:     linear-gradient(140deg, #f0574b, #d8232a 55%, #9e1318);
  --check-fg:     #ffffff;
  --check-bd:     #d8232a;

  --hero-num:     #1b3a8f;
  --hero-ring:    rgba(176, 138, 60, .55);

  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;

  --tint-1: #eef2fb;  --tint-fg-1: #1b3a8f;
  --tint-2: #e8f6fa;  --tint-fg-2: #0f7b9c;
  --tint-3: #fdecec;  --tint-fg-3: #d8232a;
  --tint-4: #f4efe4;  --tint-fg-4: #8f6d21;
  --tint-5: #e3eefb;  --tint-fg-5: #2465ac;
  --tint-6: #eaf4ee;  --tint-fg-6: #2f7a63;
}

/* -------- v3 · IZNIK CLASSIC ----------------------------------------------
   same porcelain ground, cooler: ornament hero in #b9d8f5 / #7fd4ea / #2f7fd6 */
html[data-theme="v3"] {
  --ink:          #ece5d8;
  --field:        #f9f6ef;
  --surface:      #ffffff;
  --surface-2:    #eef2fb;
  --line:         rgba(27, 58, 143, .14);
  --gold:         #8f6d21;
  --gold-bright:  #6f5417;
  --gold-dim:     #d3ab55;
  --text:         #10245c;
  --text-dim:     #7186bb;
  --good:         #2f7a63;
  --danger:       #c01d24;

  --accent:       #2465ac;
  --accent-2:     #2f7fd6;
  --accent-ink:   #ffffff;
  --brand-red:      #d8232a;
  --brand-red-deep: #9e1318;
  --brand-red-soft: #ff8c7f;
  --on-gold:      #ffffff;
  --glass:        rgba(255, 255, 255, .93);
  --hairline:     rgba(27, 58, 143, .10);

  --check-bg:     linear-gradient(140deg, #f0574b, #d8232a 55%, #9e1318);
  --check-fg:     #ffffff;
  --check-bd:     #d8232a;

  --hero-num:     #1b3a8f;
  --hero-ring:    rgba(47, 127, 214, .40);

  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;

  --tint-1: #eef2fb;  --tint-fg-1: #1b3a8f;
  --tint-2: #e8f6fa;  --tint-fg-2: #0f7b9c;
  --tint-3: #fdecec;  --tint-fg-3: #d8232a;
  --tint-4: #f4efe4;  --tint-fg-4: #8f6d21;
  --tint-5: #e3eefb;  --tint-fg-5: #2465ac;
  --tint-6: #e8f6fa;  --tint-fg-6: #2f7a63;
}

/* -------- v2 · CREAM FLORAL ------------------------------------------------
   body #efe9e0 · app #faf7f1 · ink #0f3d31 · emerald #1e7a5f / #1e6b54
   hero = green→navy gradient card, done-check is GREEN in this artboard  */
html[data-theme="v2"] {
  --ink:          #efe9e0;
  --field:        #faf7f1;
  --surface:      #ffffff;
  --surface-2:    #eaf4ee;
  --line:         rgba(18, 77, 60, .16);
  --gold:         #8a6a26;
  --gold-bright:  #6d5316;
  --gold-dim:     #c9a86a;
  --text:         #0f3d31;
  --text-dim:     #6b8a7c;
  --good:         #1e7a5f;
  --danger:       #c01d24;

  --accent:       #1e7a5f;
  --accent-2:     #2f8f78;
  --accent-ink:   #ffffff;
  --brand-red:      #d8232a;
  --brand-red-deep: #9e1318;
  --brand-red-soft: #ff8c7f;
  --on-gold:      #ffffff;
  --glass:        rgba(255, 255, 255, .94);
  --hairline:     rgba(18, 77, 60, .12);

  --check-bg:     linear-gradient(140deg, #2f8f78, #1e7a5f 60%, #16543f);
  --check-fg:     #ffffff;
  --check-bd:     #1e7a5f;

  --hero-num:     #ffffff;
  --hero-ring:    rgba(30, 107, 84, .45);

  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;

  --tint-1: #eaf4ee;  --tint-fg-1: #1e7a5f;
  --tint-2: #eef7f4;  --tint-fg-2: #2f8f78;
  --tint-3: #fdecec;  --tint-fg-3: #d8232a;
  --tint-4: #f4efe4;  --tint-fg-4: #8a6a26;
  --tint-5: #eaf4ee;  --tint-fg-5: #1e6b54;
  --tint-6: #e7f0f8;  --tint-fg-6: #2f6fd0;
}

/* -------- v1 · PORCELAIN BLUE ---------------------------------------------
   body #d3e9ec · app #f9fdfd · ink #0c3244 · teal #0f8fb5 / #19a3c4 / #0f6e8c */
html[data-theme="v1"] {
  --ink:          #d3e9ec;
  --field:        #f9fdfd;
  --surface:      #ffffff;
  --surface-2:    #eef7f8;
  --line:         rgba(14, 116, 144, .16);
  --gold:         #8a6a26;
  --gold-bright:  #6d5316;
  --gold-dim:     #d3ab55;
  --text:         #0c3244;
  --text-dim:     #587f8f;
  --good:         #2f7a63;
  --danger:       #c01d24;

  --accent:       #0f7b9c;
  --accent-2:     #19a3c4;
  --accent-ink:   #ffffff;
  --brand-red:      #d8232a;
  --brand-red-deep: #9e1318;
  --brand-red-soft: #ff8c7f;
  --on-gold:      #ffffff;
  --glass:        rgba(255, 255, 255, .93);
  --hairline:     rgba(14, 116, 144, .12);

  --check-bg:     linear-gradient(140deg, #f0574b, #d8232a 55%, #9e1318);
  --check-fg:     #ffffff;
  --check-bd:     #d8232a;

  --hero-num:     #0f6e8c;
  --hero-ring:    rgba(14, 116, 144, .34);

  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;

  --tint-1: #e0f2f5;  --tint-fg-1: #0f7b9c;
  --tint-2: #ecf6f7;  --tint-fg-2: #19849f;
  --tint-3: #fdecec;  --tint-fg-3: #d8232a;
  --tint-4: #f4efe4;  --tint-fg-4: #8a6a26;
  --tint-5: #dcedf0;  --tint-fg-5: #0c3244;
  --tint-6: #eaf4ee;  --tint-fg-6: #2f7a63;
}


/* ==========================================================================
   2.  SHARED LIGHT-THEME CHROME
   Everything in styles.css (and the feature sheets) that is hard-coded for
   the dark emerald ground gets re-pointed at the tokens above.
   ========================================================================== */

html[data-theme="v1"],
html[data-theme="v2"],
html[data-theme="v3"],
html[data-theme="v4"] { color-scheme: light; }

/* ---------- page ground ---------- */
html[data-theme="v1"] body,
html[data-theme="v2"] body,
html[data-theme="v3"] body,
html[data-theme="v4"] body {
  background: var(--field);
  color: var(--text);
}
html[data-theme="v4"] body {
  background:
    radial-gradient(360px 360px at -8% -4%, rgba(201, 168, 106, .22), transparent 70%),
    radial-gradient(300px 300px at 108% 14%, rgba(201, 168, 106, .18), transparent 68%),
    radial-gradient(1100px 460px at 50% -12%, #ffffff 0%, transparent 62%),
    var(--field);
  background-attachment: fixed;
}
html[data-theme="v3"] body {
  background:
    radial-gradient(360px 360px at -8% -4%, rgba(47, 127, 214, .14), transparent 70%),
    radial-gradient(300px 300px at 108% 14%, rgba(127, 212, 234, .20), transparent 68%),
    radial-gradient(1100px 460px at 50% -12%, #ffffff 0%, transparent 62%),
    var(--field);
  background-attachment: fixed;
}
html[data-theme="v2"] body {
  background:
    radial-gradient(380px 380px at -10% -2%, rgba(30, 122, 95, .14), transparent 70%),
    radial-gradient(320px 320px at 110% 18%, rgba(201, 168, 106, .20), transparent 68%),
    radial-gradient(1100px 460px at 50% -12%, #ffffff 0%, transparent 60%),
    var(--field);
  background-attachment: fixed;
}
html[data-theme="v1"] body {
  background:
    radial-gradient(380px 380px at -8% -4%, rgba(25, 163, 196, .16), transparent 70%),
    radial-gradient(300px 300px at 108% 14%, rgba(14, 116, 144, .12), transparent 68%),
    radial-gradient(1100px 460px at 50% -12%, #ffffff 0%, transparent 62%),
    var(--field);
  background-attachment: fixed;
}

/* ---------- display type ---------- */
html[data-theme="v1"] .view-title,
html[data-theme="v2"] .view-title,
html[data-theme="v3"] .view-title,
html[data-theme="v4"] .view-title,
html[data-theme="v1"] .hero-prayer,
html[data-theme="v2"] .hero-prayer,
html[data-theme="v3"] .hero-prayer,
html[data-theme="v4"] .hero-prayer,
html[data-theme="v1"] .step-card h3,
html[data-theme="v2"] .step-card h3,
html[data-theme="v3"] .step-card h3,
html[data-theme="v4"] .step-card h3,
html[data-theme="v1"] .pv-h1,
html[data-theme="v2"] .pv-h1,
html[data-theme="v3"] .pv-h1,
html[data-theme="v4"] .pv-h1,
html[data-theme="v1"] .pv-step-title,
html[data-theme="v2"] .pv-step-title,
html[data-theme="v3"] .pv-step-title,
html[data-theme="v4"] .pv-step-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: .005em;
}
html[data-theme="v1"] .hero-count, html[data-theme="v2"] .hero-count,
html[data-theme="v3"] .hero-count, html[data-theme="v4"] .hero-count,
html[data-theme="v1"] .cr-num,     html[data-theme="v2"] .cr-num,
html[data-theme="v3"] .cr-num,     html[data-theme="v4"] .cr-num,
html[data-theme="v1"] .ram-big,    html[data-theme="v2"] .ram-big,
html[data-theme="v3"] .ram-big,    html[data-theme="v4"] .ram-big,
html[data-theme="v1"] .tasbih-count, html[data-theme="v2"] .tasbih-count,
html[data-theme="v3"] .tasbih-count, html[data-theme="v4"] .tasbih-count,
html[data-theme="v1"] .t-time,     html[data-theme="v2"] .t-time,
html[data-theme="v3"] .t-time,     html[data-theme="v4"] .t-time {
  font-family: var(--font-display);
  font-weight: 400;
}

/* ---------- topbar / brand ---------- */
html[data-theme="v1"] .brand-logo,
html[data-theme="v2"] .brand-logo,
html[data-theme="v3"] .brand-logo,
html[data-theme="v4"] .brand-logo {
  filter: drop-shadow(0 1px 3px rgba(16, 36, 92, .16));
}
html[data-theme="v1"] .brand-sub,
html[data-theme="v2"] .brand-sub,
html[data-theme="v3"] .brand-sub,
html[data-theme="v4"] .brand-sub { color: var(--brand-red-deep); }
html[data-theme="v1"] .account-btn,
html[data-theme="v2"] .account-btn,
html[data-theme="v3"] .account-btn,
html[data-theme="v4"] .account-btn {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-dim);
}
html[data-theme="v1"] .account-btn:hover,
html[data-theme="v2"] .account-btn:hover,
html[data-theme="v3"] .account-btn:hover,
html[data-theme="v4"] .account-btn:hover { color: var(--accent); border-color: var(--accent); }

html[data-theme="v1"] .nav-title, html[data-theme="v2"] .nav-title,
html[data-theme="v3"] .nav-title, html[data-theme="v4"] .nav-title { color: var(--text); }
html[data-theme="v1"] .nav-back,  html[data-theme="v2"] .nav-back,
html[data-theme="v3"] .nav-back,  html[data-theme="v4"] .nav-back,
html[data-theme="v1"] .back-fab,  html[data-theme="v2"] .back-fab,
html[data-theme="v3"] .back-fab,  html[data-theme="v4"] .back-fab {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 4px 14px rgba(16, 36, 92, .12);
}
html[data-theme="v1"] .section-h, html[data-theme="v2"] .section-h,
html[data-theme="v3"] .section-h, html[data-theme="v4"] .section-h { color: var(--accent); }

/* ---------- hero (shared light behaviour, per-theme skin in §3) ---------- */
html[data-theme="v1"] .hero,
html[data-theme="v2"] .hero,
html[data-theme="v3"] .hero,
html[data-theme="v4"] .hero {
  border: 1px solid var(--hero-ring);
  box-shadow: 0 18px 44px -22px rgba(27, 58, 143, .30);
}
html[data-theme="v1"] .hero-label, html[data-theme="v2"] .hero-label,
html[data-theme="v3"] .hero-label, html[data-theme="v4"] .hero-label { color: var(--text-dim); letter-spacing: .3em; }
html[data-theme="v1"] .hero-count, html[data-theme="v2"] .hero-count,
html[data-theme="v3"] .hero-count, html[data-theme="v4"] .hero-count {
  color: var(--hero-num);
  font-size: 2.6rem;
  letter-spacing: .02em;
  margin-top: 8px;
}
html[data-theme="v1"] .hero-at, html[data-theme="v2"] .hero-at,
html[data-theme="v3"] .hero-at, html[data-theme="v4"] .hero-at { color: var(--text-dim); }
html[data-theme="v1"] .loc-btn, html[data-theme="v2"] .loc-btn,
html[data-theme="v3"] .loc-btn, html[data-theme="v4"] .loc-btn {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-dim);
}
html[data-theme="v1"] .loc-btn:hover, html[data-theme="v2"] .loc-btn:hover,
html[data-theme="v3"] .loc-btn:hover, html[data-theme="v4"] .loc-btn:hover { color: var(--accent); }

/* ---------- buttons / pills ---------- */
html[data-theme="v1"] .pill, html[data-theme="v2"] .pill,
html[data-theme="v3"] .pill, html[data-theme="v4"] .pill {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--accent) 55%, transparent);
}
html[data-theme="v1"] .pill.ghost, html[data-theme="v2"] .pill.ghost,
html[data-theme="v3"] .pill.ghost, html[data-theme="v4"] .pill.ghost {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}
html[data-theme="v1"] .pill.ghost:hover, html[data-theme="v2"] .pill.ghost:hover,
html[data-theme="v3"] .pill.ghost:hover, html[data-theme="v4"] .pill.ghost:hover { border-color: var(--accent); color: var(--accent); }
html[data-theme="v1"] .icon-btn, html[data-theme="v2"] .icon-btn,
html[data-theme="v3"] .icon-btn, html[data-theme="v4"] .icon-btn { color: var(--accent); }
html[data-theme="v1"] .linklike, html[data-theme="v2"] .linklike,
html[data-theme="v3"] .linklike, html[data-theme="v4"] .linklike { color: var(--accent); }

/* adhan toggle */
html[data-theme="v1"] .toggle-pill, html[data-theme="v2"] .toggle-pill,
html[data-theme="v3"] .toggle-pill, html[data-theme="v4"] .toggle-pill {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-dim);
}
html[data-theme="v1"] .toggle-pill .tp-dot, html[data-theme="v2"] .toggle-pill .tp-dot,
html[data-theme="v3"] .toggle-pill .tp-dot, html[data-theme="v4"] .toggle-pill .tp-dot { background: #a5b3d9; }
html[data-theme="v1"] .toggle-pill.on, html[data-theme="v2"] .toggle-pill.on,
html[data-theme="v3"] .toggle-pill.on, html[data-theme="v4"] .toggle-pill.on {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #ffffff;
  box-shadow: 0 4px 18px -6px rgba(216, 35, 42, .55);
}
html[data-theme="v1"] .toggle-pill.on .tp-dot, html[data-theme="v2"] .toggle-pill.on .tp-dot,
html[data-theme="v3"] .toggle-pill.on .tp-dot, html[data-theme="v4"] .toggle-pill.on .tp-dot { background: #ffffff; }
html[data-theme="v2"] .toggle-pill.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 4px 18px -6px rgba(30,122,95,.5); }

/* ---------- prayer times list ---------- */
html[data-theme="v1"] .times li, html[data-theme="v2"] .times li,
html[data-theme="v3"] .times li, html[data-theme="v4"] .times li {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 18px;
}
html[data-theme="v1"] .times li.now, html[data-theme="v3"] .times li.now,
html[data-theme="v4"] .times li.now {
  background: linear-gradient(100deg, rgba(47, 127, 214, .16), rgba(127, 212, 234, .16));
  border-color: rgba(27, 58, 143, .45);
}
html[data-theme="v2"] .times li.now {
  background: var(--surface-2);
  border-color: rgba(30, 122, 95, .45);
}
html[data-theme="v1"] .times li.now .t-time, html[data-theme="v2"] .times li.now .t-time,
html[data-theme="v3"] .times li.now .t-time, html[data-theme="v4"] .times li.now .t-time { color: var(--text); }
html[data-theme="v1"] .t-name, html[data-theme="v2"] .t-name,
html[data-theme="v3"] .t-name, html[data-theme="v4"] .t-name { color: var(--text); font-weight: 600; }
html[data-theme="v1"] .t-name .ar, html[data-theme="v2"] .t-name .ar,
html[data-theme="v3"] .t-name .ar, html[data-theme="v4"] .t-name .ar { color: var(--text-dim); }
html[data-theme="v1"] .t-time, html[data-theme="v2"] .t-time,
html[data-theme="v3"] .t-time, html[data-theme="v4"] .t-time { color: var(--text-dim); font-size: 1.15rem; }
html[data-theme="v1"] .times li.passed, html[data-theme="v2"] .times li.passed,
html[data-theme="v3"] .times li.passed, html[data-theme="v4"] .times li.passed { opacity: .72; }

/* the artboards' filled check circle (RED on v1/v3/v4, GREEN on v2) */
html[data-theme="v1"] .t-check, html[data-theme="v2"] .t-check,
html[data-theme="v3"] .t-check, html[data-theme="v4"] .t-check {
  width: 38px; height: 38px;
  border: 2px solid var(--line);
  color: transparent;
  background: transparent;
}
html[data-theme="v1"] .t-check.done, html[data-theme="v2"] .t-check.done,
html[data-theme="v3"] .t-check.done, html[data-theme="v4"] .t-check.done {
  background: var(--check-bg);
  border-color: var(--check-bd);
  color: var(--check-fg);
  font-weight: 700;
}
html[data-theme="v1"] .sunnah-line, html[data-theme="v2"] .sunnah-line,
html[data-theme="v3"] .sunnah-line, html[data-theme="v4"] .sunnah-line { color: var(--text-dim); }
html[data-theme="v1"] .streak-chip, html[data-theme="v2"] .streak-chip,
html[data-theme="v3"] .streak-chip, html[data-theme="v4"] .streak-chip {
  display: inline-block;
  background: linear-gradient(100deg, #14307a, #2f7fd6 55%, #14307a);
  color: #ffffff;
  border-radius: var(--r-pill);
  padding: 5px 13px;
  font-size: .78rem;
  letter-spacing: .02em;
}
html[data-theme="v2"] .streak-chip { background: linear-gradient(100deg, #0f3d31, #1e7a5f 55%, #0f3d31); }
html[data-theme="v1"] .streak-chip { background: linear-gradient(100deg, #0c3244, #0f8fb5 55%, #0c3244); }

/* ---------- launcher grid — soft pastel tinted icon tiles ---------- */
html[data-theme="v1"] .dash-item, html[data-theme="v2"] .dash-item,
html[data-theme="v3"] .dash-item, html[data-theme="v4"] .dash-item {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  color: var(--text);
  padding: 14px 4px 12px;
  transition: border-color .25s, transform .25s;
}
html[data-theme="v1"] .dash-item:hover, html[data-theme="v2"] .dash-item:hover,
html[data-theme="v3"] .dash-item:hover, html[data-theme="v4"] .dash-item:hover {
  background: var(--surface);
  color: var(--text);
  border-color: var(--accent);
  transform: translateY(-2px);
}
html[data-theme="v1"] .di-icon, html[data-theme="v2"] .di-icon,
html[data-theme="v3"] .di-icon, html[data-theme="v4"] .di-icon {
  width: 34px; height: 34px;
  padding: 6px;
  border-radius: 50%;
  display: grid; place-items: center;
}
/* 6 rotating tints, artboard-derived */
html[data-theme="v1"] .dash-item:nth-child(6n+1) .di-icon,
html[data-theme="v2"] .dash-item:nth-child(6n+1) .di-icon,
html[data-theme="v3"] .dash-item:nth-child(6n+1) .di-icon,
html[data-theme="v4"] .dash-item:nth-child(6n+1) .di-icon { background: var(--tint-1); color: var(--tint-fg-1); }
html[data-theme="v1"] .dash-item:nth-child(6n+2) .di-icon,
html[data-theme="v2"] .dash-item:nth-child(6n+2) .di-icon,
html[data-theme="v3"] .dash-item:nth-child(6n+2) .di-icon,
html[data-theme="v4"] .dash-item:nth-child(6n+2) .di-icon { background: var(--tint-2); color: var(--tint-fg-2); }
html[data-theme="v1"] .dash-item:nth-child(6n+3) .di-icon,
html[data-theme="v2"] .dash-item:nth-child(6n+3) .di-icon,
html[data-theme="v3"] .dash-item:nth-child(6n+3) .di-icon,
html[data-theme="v4"] .dash-item:nth-child(6n+3) .di-icon { background: var(--tint-3); color: var(--tint-fg-3); }
html[data-theme="v1"] .dash-item:nth-child(6n+4) .di-icon,
html[data-theme="v2"] .dash-item:nth-child(6n+4) .di-icon,
html[data-theme="v3"] .dash-item:nth-child(6n+4) .di-icon,
html[data-theme="v4"] .dash-item:nth-child(6n+4) .di-icon { background: var(--tint-4); color: var(--tint-fg-4); }
html[data-theme="v1"] .dash-item:nth-child(6n+5) .di-icon,
html[data-theme="v2"] .dash-item:nth-child(6n+5) .di-icon,
html[data-theme="v3"] .dash-item:nth-child(6n+5) .di-icon,
html[data-theme="v4"] .dash-item:nth-child(6n+5) .di-icon { background: var(--tint-5); color: var(--tint-fg-5); }
html[data-theme="v1"] .dash-item:nth-child(6n) .di-icon,
html[data-theme="v2"] .dash-item:nth-child(6n) .di-icon,
html[data-theme="v3"] .dash-item:nth-child(6n) .di-icon,
html[data-theme="v4"] .dash-item:nth-child(6n) .di-icon { background: var(--tint-6); color: var(--tint-fg-6); }

/* ---------- ask card ---------- */
html[data-theme="v1"] .ask-card, html[data-theme="v2"] .ask-card,
html[data-theme="v3"] .ask-card, html[data-theme="v4"] .ask-card {
  background: var(--surface-2);
  background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 16%, #ffffff), var(--surface));
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius: 20px;
}
html[data-theme="v1"] .ask-icon, html[data-theme="v2"] .ask-icon,
html[data-theme="v3"] .ask-icon, html[data-theme="v4"] .ask-icon,
html[data-theme="v1"] .ask-go, html[data-theme="v2"] .ask-go,
html[data-theme="v3"] .ask-go, html[data-theme="v4"] .ask-go { color: var(--accent); }
html[data-theme="v1"] .ask-text span, html[data-theme="v2"] .ask-text span,
html[data-theme="v3"] .ask-text span, html[data-theme="v4"] .ask-text span { color: var(--text-dim); }

/* ---------- announcement banner (soft parchment + gold rule) ---------- */
html[data-theme="v1"] .ann-banner, html[data-theme="v2"] .ann-banner,
html[data-theme="v3"] .ann-banner, html[data-theme="v4"] .ann-banner {
  background: linear-gradient(120deg, var(--surface-2), var(--surface));
  border: 1px solid var(--gold-dim);
  color: var(--text);
}
html[data-theme="v1"] .ann-mark, html[data-theme="v2"] .ann-mark,
html[data-theme="v3"] .ann-mark, html[data-theme="v4"] .ann-mark { color: var(--gold); }
html[data-theme="v1"] .ann-x, html[data-theme="v2"] .ann-x,
html[data-theme="v3"] .ann-x, html[data-theme="v4"] .ann-x { color: var(--gold); }

/* ---------- ayah of the day / dua / shukr cards ---------- */
html[data-theme="v1"] .ayah-card, html[data-theme="v2"] .ayah-card,
html[data-theme="v3"] .ayah-card, html[data-theme="v4"] .ayah-card {
  position: relative;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border: 1px solid color-mix(in srgb, var(--brand-red) 30%, transparent);
  border-radius: 24px;
}
html[data-theme="v1"] .ayah-card::before, html[data-theme="v2"] .ayah-card::before,
html[data-theme="v3"] .ayah-card::before, html[data-theme="v4"] .ayah-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background-image: linear-gradient(90deg, transparent, var(--brand-red), var(--brand-red-soft), var(--brand-red), transparent);
}
html[data-theme="v2"] .ayah-card { border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
html[data-theme="v2"] .ayah-card::before {
  background-image: linear-gradient(90deg, transparent, var(--accent), #8fbfb0, var(--accent), transparent);
}
html[data-theme="v1"] .ac-label, html[data-theme="v2"] .ac-label,
html[data-theme="v3"] .ac-label, html[data-theme="v4"] .ac-label { color: var(--brand-red); }
html[data-theme="v2"] .ac-label { color: var(--accent); }
html[data-theme="v1"] .ac-ar, html[data-theme="v2"] .ac-ar,
html[data-theme="v3"] .ac-ar, html[data-theme="v4"] .ac-ar { color: var(--text); }
html[data-theme="v1"] .ac-en, html[data-theme="v2"] .ac-en,
html[data-theme="v3"] .ac-en, html[data-theme="v4"] .ac-en { color: var(--text); }
html[data-theme="v1"] .ac-ref, html[data-theme="v2"] .ac-ref,
html[data-theme="v3"] .ac-ref, html[data-theme="v4"] .ac-ref { color: var(--text-dim); }
html[data-theme="v1"] .ac-arrow, html[data-theme="v2"] .ac-arrow,
html[data-theme="v3"] .ac-arrow, html[data-theme="v4"] .ac-arrow { color: var(--accent); border-color: var(--line); }
html[data-theme="v1"] .ayah-card.shukr, html[data-theme="v2"] .ayah-card.shukr,
html[data-theme="v3"] .ayah-card.shukr, html[data-theme="v4"] .ayah-card.shukr {
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
}
html[data-theme="v1"] .ayah-card.shukr::before, html[data-theme="v2"] .ayah-card.shukr::before,
html[data-theme="v3"] .ayah-card.shukr::before, html[data-theme="v4"] .ayah-card.shukr::before {
  background-image: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), var(--accent), transparent);
}
html[data-theme="v1"] .shukr-text, html[data-theme="v2"] .shukr-text,
html[data-theme="v3"] .shukr-text, html[data-theme="v4"] .shukr-text { color: var(--accent); }
html[data-theme="v1"] .shukr-row input, html[data-theme="v2"] .shukr-row input,
html[data-theme="v3"] .shukr-row input, html[data-theme="v4"] .shukr-row input {
  background: var(--surface-2); color: var(--text); border-color: var(--line);
}

/* ---------- install band — stays GOLD on every theme ---------- */
html[data-theme="v1"] .install-row .pill, html[data-theme="v2"] .install-row .pill,
html[data-theme="v3"] .install-row .pill, html[data-theme="v4"] .install-row .pill {
  background: linear-gradient(140deg, #c9a24c, #8f6d21);
  color: #ffffff;
  box-shadow: 0 6px 20px -8px rgba(143, 109, 33, .65);
}
html[data-theme="v1"] .a2hs-step, html[data-theme="v2"] .a2hs-step,
html[data-theme="v3"] .a2hs-step, html[data-theme="v4"] .a2hs-step {
  color: var(--text);
  border-bottom: 1px solid var(--hairline);
}
html[data-theme="v1"] .a2hs-step b, html[data-theme="v2"] .a2hs-step b,
html[data-theme="v3"] .a2hs-step b, html[data-theme="v4"] .a2hs-step b { color: var(--gold); }
html[data-theme="v1"] .a2hs-ico, html[data-theme="v2"] .a2hs-ico,
html[data-theme="v3"] .a2hs-ico, html[data-theme="v4"] .a2hs-ico { color: var(--gold); border-color: var(--gold-dim); }

/* ---------- generic cards / surfaces ---------- */
html[data-theme="v1"] .guide-card, html[data-theme="v2"] .guide-card,
html[data-theme="v3"] .guide-card, html[data-theme="v4"] .guide-card,
html[data-theme="v1"] .menu-item,  html[data-theme="v2"] .menu-item,
html[data-theme="v3"] .menu-item,  html[data-theme="v4"] .menu-item,
html[data-theme="v1"] .biz-card,   html[data-theme="v2"] .biz-card,
html[data-theme="v3"] .biz-card,   html[data-theme="v4"] .biz-card,
html[data-theme="v1"] .name-card,  html[data-theme="v2"] .name-card,
html[data-theme="v3"] .name-card,  html[data-theme="v4"] .name-card,
html[data-theme="v1"] .dua-card,   html[data-theme="v2"] .dua-card,
html[data-theme="v3"] .dua-card,   html[data-theme="v4"] .dua-card,
html[data-theme="v1"] .surah-row,  html[data-theme="v2"] .surah-row,
html[data-theme="v3"] .surah-row,  html[data-theme="v4"] .surah-row,
html[data-theme="v1"] .step-card,  html[data-theme="v2"] .step-card,
html[data-theme="v3"] .step-card,  html[data-theme="v4"] .step-card,
html[data-theme="v1"] .info-body,  html[data-theme="v2"] .info-body,
html[data-theme="v3"] .info-body,  html[data-theme="v4"] .info-body,
html[data-theme="v1"] .voice-row,  html[data-theme="v2"] .voice-row,
html[data-theme="v3"] .voice-row,  html[data-theme="v4"] .voice-row,
html[data-theme="v1"] .idea-row,   html[data-theme="v2"] .idea-row,
html[data-theme="v3"] .idea-row,   html[data-theme="v4"] .idea-row,
html[data-theme="v1"] .admin-row,  html[data-theme="v2"] .admin-row,
html[data-theme="v3"] .admin-row,  html[data-theme="v4"] .admin-row,
html[data-theme="v1"] .set-group,  html[data-theme="v2"] .set-group,
html[data-theme="v3"] .set-group,  html[data-theme="v4"] .set-group,
html[data-theme="v1"] .login-card, html[data-theme="v2"] .login-card,
html[data-theme="v3"] .login-card, html[data-theme="v4"] .login-card,
html[data-theme="v1"] .makkah-card, html[data-theme="v2"] .makkah-card,
html[data-theme="v3"] .makkah-card, html[data-theme="v4"] .makkah-card,
html[data-theme="v1"] .listen-result, html[data-theme="v2"] .listen-result,
html[data-theme="v3"] .listen-result, html[data-theme="v4"] .listen-result,
html[data-theme="v1"] .ram-day,    html[data-theme="v2"] .ram-day,
html[data-theme="v3"] .ram-day,    html[data-theme="v4"] .ram-day,
html[data-theme="v1"] .pv-step,    html[data-theme="v2"] .pv-step,
html[data-theme="v3"] .pv-step,    html[data-theme="v4"] .pv-step,
html[data-theme="v1"] .pv-unit,    html[data-theme="v2"] .pv-unit,
html[data-theme="v3"] .pv-unit,    html[data-theme="v4"] .pv-unit,
html[data-theme="v1"] .pv-chip,    html[data-theme="v2"] .pv-chip,
html[data-theme="v3"] .pv-chip,    html[data-theme="v4"] .pv-chip,
html[data-theme="v1"] .pv-error,   html[data-theme="v2"] .pv-error,
html[data-theme="v3"] .pv-error,   html[data-theme="v4"] .pv-error,
html[data-theme="v1"] .mq-row,     html[data-theme="v2"] .mq-row,
html[data-theme="v3"] .mq-row,     html[data-theme="v4"] .mq-row,
html[data-theme="v1"] .mq-error,   html[data-theme="v2"] .mq-error,
html[data-theme="v3"] .mq-error,   html[data-theme="v4"] .mq-error,
html[data-theme="v1"] .quiz-card,  html[data-theme="v2"] .quiz-card,
html[data-theme="v3"] .quiz-card,  html[data-theme="v4"] .quiz-card,
html[data-theme="v1"] .quiz-mode,  html[data-theme="v2"] .quiz-mode,
html[data-theme="v3"] .quiz-mode,  html[data-theme="v4"] .quiz-mode,
html[data-theme="v1"] .quiz-opt,   html[data-theme="v2"] .quiz-opt,
html[data-theme="v3"] .quiz-opt,   html[data-theme="v4"] .quiz-opt {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="v1"] .guide-card:hover, html[data-theme="v2"] .guide-card:hover,
html[data-theme="v3"] .guide-card:hover, html[data-theme="v4"] .guide-card:hover,
html[data-theme="v1"] .menu-item:hover,  html[data-theme="v2"] .menu-item:hover,
html[data-theme="v3"] .menu-item:hover,  html[data-theme="v4"] .menu-item:hover,
html[data-theme="v1"] .surah-row:hover,  html[data-theme="v2"] .surah-row:hover,
html[data-theme="v3"] .surah-row:hover,  html[data-theme="v4"] .surah-row:hover,
html[data-theme="v1"] .mq-row:hover,     html[data-theme="v2"] .mq-row:hover,
html[data-theme="v3"] .mq-row:hover,     html[data-theme="v4"] .mq-row:hover {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="v1"] .menu-item:hover, html[data-theme="v2"] .menu-item:hover,
html[data-theme="v3"] .menu-item:hover, html[data-theme="v4"] .menu-item:hover { color: var(--accent); }
html[data-theme="v1"] .gc-count, html[data-theme="v2"] .gc-count,
html[data-theme="v3"] .gc-count, html[data-theme="v4"] .gc-count { color: var(--accent); }
html[data-theme="v1"] .info-chip, html[data-theme="v2"] .info-chip,
html[data-theme="v3"] .info-chip, html[data-theme="v4"] .info-chip,
html[data-theme="v1"] .mq-chip,   html[data-theme="v2"] .mq-chip,
html[data-theme="v3"] .mq-chip,   html[data-theme="v4"] .mq-chip,
html[data-theme="v1"] .chat-chips .chip, html[data-theme="v2"] .chat-chips .chip,
html[data-theme="v3"] .chat-chips .chip, html[data-theme="v4"] .chat-chips .chip {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text-dim);
}
html[data-theme="v1"] .info-chip:hover, html[data-theme="v2"] .info-chip:hover,
html[data-theme="v3"] .info-chip:hover, html[data-theme="v4"] .info-chip:hover,
html[data-theme="v1"] .mq-chip:hover,   html[data-theme="v2"] .mq-chip:hover,
html[data-theme="v3"] .mq-chip:hover,   html[data-theme="v4"] .mq-chip:hover,
html[data-theme="v1"] .mq-chip.on,      html[data-theme="v2"] .mq-chip.on,
html[data-theme="v3"] .mq-chip.on,      html[data-theme="v4"] .mq-chip.on {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--surface-2);
}
html[data-theme="v1"] .mq-dist, html[data-theme="v2"] .mq-dist,
html[data-theme="v3"] .mq-dist, html[data-theme="v4"] .mq-dist { color: var(--accent); }
html[data-theme="v1"] .mq-dir, html[data-theme="v2"] .mq-dir,
html[data-theme="v3"] .mq-dir, html[data-theme="v4"] .mq-dir { color: var(--text-dim); border-color: var(--line); }

/* arabic / display accents that were gold-on-dark → ink-on-white */
html[data-theme="v1"] .dua-ar, html[data-theme="v2"] .dua-ar,
html[data-theme="v3"] .dua-ar, html[data-theme="v4"] .dua-ar,
html[data-theme="v1"] .nc-ar,  html[data-theme="v2"] .nc-ar,
html[data-theme="v3"] .nc-ar,  html[data-theme="v4"] .nc-ar,
html[data-theme="v1"] .st-arabic, html[data-theme="v2"] .st-arabic,
html[data-theme="v3"] .st-arabic, html[data-theme="v4"] .st-arabic,
html[data-theme="v1"] .pv-ar,  html[data-theme="v2"] .pv-ar,
html[data-theme="v3"] .pv-ar,  html[data-theme="v4"] .pv-ar,
html[data-theme="v1"] .sh-ar,  html[data-theme="v2"] .sh-ar,
html[data-theme="v3"] .sh-ar,  html[data-theme="v4"] .sh-ar,
html[data-theme="v1"] .comp-ar, html[data-theme="v2"] .comp-ar,
html[data-theme="v3"] .comp-ar, html[data-theme="v4"] .comp-ar,
html[data-theme="v1"] .ay-ar,  html[data-theme="v2"] .ay-ar,
html[data-theme="v3"] .ay-ar,  html[data-theme="v4"] .ay-ar {
  color: var(--text);
}
html[data-theme="v1"] .sr-ar, html[data-theme="v2"] .sr-ar,
html[data-theme="v3"] .sr-ar, html[data-theme="v4"] .sr-ar,
html[data-theme="v1"] .sh-bism, html[data-theme="v2"] .sh-bism,
html[data-theme="v3"] .sh-bism, html[data-theme="v4"] .sh-bism,
html[data-theme="v1"] .pillar-head .ar, html[data-theme="v2"] .pillar-head .ar,
html[data-theme="v3"] .pillar-head .ar, html[data-theme="v4"] .pillar-head .ar { color: var(--accent); }
html[data-theme="v1"] .dua-when, html[data-theme="v2"] .dua-when,
html[data-theme="v3"] .dua-when, html[data-theme="v4"] .dua-when { color: var(--brand-red); }
html[data-theme="v2"] .dua-when { color: var(--accent); }
html[data-theme="v1"] .dua-tr, html[data-theme="v2"] .dua-tr,
html[data-theme="v3"] .dua-tr, html[data-theme="v4"] .dua-tr,
html[data-theme="v1"] .st-translit, html[data-theme="v2"] .st-translit,
html[data-theme="v3"] .st-translit, html[data-theme="v4"] .st-translit,
html[data-theme="v1"] .pv-translit, html[data-theme="v2"] .pv-translit,
html[data-theme="v3"] .pv-translit, html[data-theme="v4"] .pv-translit,
html[data-theme="v1"] .comp-translit, html[data-theme="v2"] .comp-translit,
html[data-theme="v3"] .comp-translit, html[data-theme="v4"] .comp-translit { color: var(--accent); }
html[data-theme="v1"] .comp-title, html[data-theme="v2"] .comp-title,
html[data-theme="v3"] .comp-title, html[data-theme="v4"] .comp-title { color: var(--text); font-family: var(--font-display); font-weight: 400; }
html[data-theme="v1"] .sr-num, html[data-theme="v2"] .sr-num,
html[data-theme="v3"] .sr-num, html[data-theme="v4"] .sr-num { color: var(--accent); border-color: var(--line); }
html[data-theme="v1"] .ay-num, html[data-theme="v2"] .ay-num,
html[data-theme="v3"] .ay-num, html[data-theme="v4"] .ay-num { color: var(--brand-red); }
html[data-theme="v2"] .ay-num { color: var(--accent); }
html[data-theme="v1"] .ayah:hover, html[data-theme="v2"] .ayah:hover,
html[data-theme="v3"] .ayah:hover, html[data-theme="v4"] .ayah:hover,
html[data-theme="v1"] .ayah.marked, html[data-theme="v2"] .ayah.marked,
html[data-theme="v3"] .ayah.marked, html[data-theme="v4"] .ayah.marked,
html[data-theme="v1"] .ayah.playing, html[data-theme="v2"] .ayah.playing,
html[data-theme="v3"] .ayah.playing, html[data-theme="v4"] .ayah.playing { background: var(--surface); }
html[data-theme="v1"] .ayah.playing .ay-ar, html[data-theme="v2"] .ayah.playing .ay-ar,
html[data-theme="v3"] .ayah.playing .ay-ar, html[data-theme="v4"] .ayah.playing .ay-ar { color: var(--accent); }
html[data-theme="v1"] .ay-play, html[data-theme="v2"] .ay-play,
html[data-theme="v3"] .ay-play, html[data-theme="v4"] .ay-play { color: var(--accent); border-color: var(--line); }
html[data-theme="v1"] .st-num, html[data-theme="v2"] .st-num,
html[data-theme="v3"] .st-num, html[data-theme="v4"] .st-num,
html[data-theme="v1"] .pv-step-meta, html[data-theme="v2"] .pv-step-meta,
html[data-theme="v3"] .pv-step-meta, html[data-theme="v4"] .pv-step-meta,
html[data-theme="v1"] .pv-group-h, html[data-theme="v2"] .pv-group-h,
html[data-theme="v3"] .pv-group-h, html[data-theme="v4"] .pv-group-h { color: var(--accent); }
html[data-theme="v1"] .step-dots i.on, html[data-theme="v2"] .step-dots i.on,
html[data-theme="v3"] .step-dots i.on, html[data-theme="v4"] .step-dots i.on { background: var(--accent); }
html[data-theme="v1"] .step-dots i, html[data-theme="v2"] .step-dots i,
html[data-theme="v3"] .step-dots i, html[data-theme="v4"] .step-dots i { background: var(--line); }
html[data-theme="v1"] .step-card img, html[data-theme="v2"] .step-card img,
html[data-theme="v3"] .step-card img, html[data-theme="v4"] .step-card img,
html[data-theme="v1"] .pv-figure img, html[data-theme="v2"] .pv-figure img,
html[data-theme="v3"] .pv-figure img, html[data-theme="v4"] .pv-figure img,
html[data-theme="v1"] .gc-thumb, html[data-theme="v2"] .gc-thumb,
html[data-theme="v3"] .gc-thumb, html[data-theme="v4"] .gc-thumb {
  filter: drop-shadow(0 4px 12px rgba(16, 36, 92, .18));
}

/* ---------- ramadan ---------- */
html[data-theme="v1"] .ram-big, html[data-theme="v2"] .ram-big,
html[data-theme="v3"] .ram-big, html[data-theme="v4"] .ram-big { color: var(--hero-num); }
html[data-theme="v2"] .ram-big { color: var(--accent); }
html[data-theme="v1"] .ram-label, html[data-theme="v2"] .ram-label,
html[data-theme="v3"] .ram-label, html[data-theme="v4"] .ram-label { color: var(--brand-red); }
html[data-theme="v1"] .ram-day.today, html[data-theme="v2"] .ram-day.today,
html[data-theme="v3"] .ram-day.today, html[data-theme="v4"] .ram-day.today {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
html[data-theme="v1"] .goal-bar, html[data-theme="v2"] .goal-bar,
html[data-theme="v3"] .goal-bar, html[data-theme="v4"] .goal-bar { background: var(--surface-2); border-color: var(--line); }
html[data-theme="v1"] .goal-bar i, html[data-theme="v2"] .goal-bar i,
html[data-theme="v3"] .goal-bar i, html[data-theme="v4"] .goal-bar i {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}

/* ---------- forms, inputs, selects ---------- */
html[data-theme="v1"] .set-row, html[data-theme="v2"] .set-row,
html[data-theme="v3"] .set-row, html[data-theme="v4"] .set-row,
html[data-theme="v1"] .zform label, html[data-theme="v2"] .zform label,
html[data-theme="v3"] .zform label, html[data-theme="v4"] .zform label,
html[data-theme="v1"] .zr-row, html[data-theme="v2"] .zr-row,
html[data-theme="v3"] .zr-row, html[data-theme="v4"] .zr-row,
html[data-theme="v1"] .ao-phrase, html[data-theme="v2"] .ao-phrase,
html[data-theme="v3"] .ao-phrase, html[data-theme="v4"] .ao-phrase {
  border-bottom-color: var(--hairline);
}
html[data-theme="v1"] .set-row, html[data-theme="v2"] .set-row,
html[data-theme="v3"] .set-row, html[data-theme="v4"] .set-row { color: var(--text); }
html[data-theme="v1"] .set-row select, html[data-theme="v2"] .set-row select,
html[data-theme="v3"] .set-row select, html[data-theme="v4"] .set-row select,
html[data-theme="v1"] .set-manual input, html[data-theme="v2"] .set-manual input,
html[data-theme="v3"] .set-manual input, html[data-theme="v4"] .set-manual input,
html[data-theme="v1"] .login-card input, html[data-theme="v2"] .login-card input,
html[data-theme="v3"] .login-card input, html[data-theme="v4"] .login-card input,
html[data-theme="v1"] .biz-card input, html[data-theme="v2"] .biz-card input,
html[data-theme="v3"] .biz-card input, html[data-theme="v4"] .biz-card input,
html[data-theme="v1"] .biz-card textarea, html[data-theme="v2"] .biz-card textarea,
html[data-theme="v3"] .biz-card textarea, html[data-theme="v4"] .biz-card textarea,
html[data-theme="v1"] .zform input, html[data-theme="v2"] .zform input,
html[data-theme="v3"] .zform input, html[data-theme="v4"] .zform input,
html[data-theme="v1"] .surah-search, html[data-theme="v2"] .surah-search,
html[data-theme="v3"] .surah-search, html[data-theme="v4"] .surah-search,
html[data-theme="v1"] .lang-select, html[data-theme="v2"] .lang-select,
html[data-theme="v3"] .lang-select, html[data-theme="v4"] .lang-select,
html[data-theme="v1"] .shape-form input, html[data-theme="v2"] .shape-form input,
html[data-theme="v3"] .shape-form input, html[data-theme="v4"] .shape-form input,
html[data-theme="v1"] .chat-inputrow input, html[data-theme="v2"] .chat-inputrow input,
html[data-theme="v3"] .chat-inputrow input, html[data-theme="v4"] .chat-inputrow input {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--line);
}
html[data-theme="v1"] input::placeholder, html[data-theme="v2"] input::placeholder,
html[data-theme="v3"] input::placeholder, html[data-theme="v4"] input::placeholder,
html[data-theme="v1"] textarea::placeholder, html[data-theme="v2"] textarea::placeholder,
html[data-theme="v3"] textarea::placeholder, html[data-theme="v4"] textarea::placeholder { color: var(--text-dim); }
html[data-theme="v1"] .surah-search:focus, html[data-theme="v2"] .surah-search:focus,
html[data-theme="v3"] .surah-search:focus, html[data-theme="v4"] .surah-search:focus,
html[data-theme="v1"] .login-card input:focus, html[data-theme="v2"] .login-card input:focus,
html[data-theme="v3"] .login-card input:focus, html[data-theme="v4"] .login-card input:focus,
html[data-theme="v1"] .chat-inputrow input:focus, html[data-theme="v2"] .chat-inputrow input:focus,
html[data-theme="v3"] .chat-inputrow input:focus, html[data-theme="v4"] .chat-inputrow input:focus,
html[data-theme="v1"] .shukr-row input:focus, html[data-theme="v2"] .shukr-row input:focus,
html[data-theme="v3"] .shukr-row input:focus, html[data-theme="v4"] .shukr-row input:focus { border-color: var(--accent); }
html[data-theme="v1"] .login-label, html[data-theme="v2"] .login-label,
html[data-theme="v3"] .login-label, html[data-theme="v4"] .login-label,
html[data-theme="v1"] .login-msg, html[data-theme="v2"] .login-msg,
html[data-theme="v3"] .login-msg, html[data-theme="v4"] .login-msg,
html[data-theme="v1"] .fineprint, html[data-theme="v2"] .fineprint,
html[data-theme="v3"] .fineprint, html[data-theme="v4"] .fineprint { color: var(--text-dim); }
html[data-theme="v1"] .conv-out, html[data-theme="v2"] .conv-out,
html[data-theme="v3"] .conv-out, html[data-theme="v4"] .conv-out { color: var(--accent); }
html[data-theme="v1"] .zr-row.due b, html[data-theme="v2"] .zr-row.due b,
html[data-theme="v3"] .zr-row.due b, html[data-theme="v4"] .zr-row.due b { color: var(--accent); }

/* ---------- chat ---------- */
html[data-theme="v1"] .msg.user, html[data-theme="v2"] .msg.user,
html[data-theme="v3"] .msg.user, html[data-theme="v4"] .msg.user {
  background: var(--accent);
  color: var(--accent-ink);
}
html[data-theme="v1"] .msg.bot, html[data-theme="v2"] .msg.bot,
html[data-theme="v3"] .msg.bot, html[data-theme="v4"] .msg.bot {
  background: var(--surface);
  border-color: var(--line);
  color: var(--text);
  box-shadow: 0 2px 10px -6px rgba(16, 36, 92, .30);
}
html[data-theme="v1"] .send-btn, html[data-theme="v2"] .send-btn,
html[data-theme="v3"] .send-btn, html[data-theme="v4"] .send-btn {
  background: var(--accent); color: var(--accent-ink);
}
html[data-theme="v1"] .mic-btn, html[data-theme="v2"] .mic-btn,
html[data-theme="v3"] .mic-btn, html[data-theme="v4"] .mic-btn {
  background: var(--surface); border-color: var(--line); color: var(--accent);
}
html[data-theme="v1"] .mic-btn.rec, html[data-theme="v2"] .mic-btn.rec,
html[data-theme="v3"] .mic-btn.rec, html[data-theme="v4"] .mic-btn.rec {
  background: var(--brand-red); border-color: var(--brand-red); color: #ffffff;
}
html[data-theme="v1"] #listenBtn.rec, html[data-theme="v2"] #listenBtn.rec,
html[data-theme="v3"] #listenBtn.rec, html[data-theme="v4"] #listenBtn.rec {
  background: var(--brand-red); color: #ffffff;
}
html[data-theme="v1"] .listen-heard, html[data-theme="v2"] .listen-heard,
html[data-theme="v3"] .listen-heard, html[data-theme="v4"] .listen-heard { color: var(--text-dim); }

/* ---------- community / votes ---------- */
html[data-theme="v1"] .vote, html[data-theme="v2"] .vote,
html[data-theme="v3"] .vote, html[data-theme="v4"] .vote { color: var(--text-dim); border-color: var(--line); }
html[data-theme="v1"] .vote.on, html[data-theme="v2"] .vote.on,
html[data-theme="v3"] .vote.on, html[data-theme="v4"] .vote.on {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
html[data-theme="v1"] .idea-status, html[data-theme="v2"] .idea-status,
html[data-theme="v3"] .idea-status, html[data-theme="v4"] .idea-status { color: var(--good); }
html[data-theme="v1"] .biz-card.probono, html[data-theme="v2"] .biz-card.probono,
html[data-theme="v3"] .biz-card.probono, html[data-theme="v4"] .biz-card.probono { border-color: var(--gold-dim); }
html[data-theme="v1"] .beta-tag, html[data-theme="v2"] .beta-tag,
html[data-theme="v3"] .beta-tag, html[data-theme="v4"] .beta-tag {
  background: var(--good); color: #ffffff;
}

/* ---------- voice picker ---------- */
html[data-theme="v1"] .voice-row.sel, html[data-theme="v2"] .voice-row.sel,
html[data-theme="v3"] .voice-row.sel, html[data-theme="v4"] .voice-row.sel { border-color: var(--accent); }
html[data-theme="v1"] .vr-note, html[data-theme="v2"] .vr-note,
html[data-theme="v3"] .vr-note, html[data-theme="v4"] .vr-note { color: var(--text-dim); }

/* ---------- tasbih ---------- */
html[data-theme="v1"] .tasbih, html[data-theme="v2"] .tasbih,
html[data-theme="v3"] .tasbih, html[data-theme="v4"] .tasbih {
  background: radial-gradient(circle at 35% 28%, #ffffff, var(--surface-2) 72%);
  border: 1px solid var(--gold-dim);
  box-shadow: 0 14px 40px -18px rgba(16, 36, 92, .40);
}
html[data-theme="v1"] .tasbih-count, html[data-theme="v2"] .tasbih-count,
html[data-theme="v3"] .tasbih-count, html[data-theme="v4"] .tasbih-count { color: var(--brand-red); }
html[data-theme="v2"] .tasbih-count { color: var(--accent); }
html[data-theme="v1"] .tasbih-cycle, html[data-theme="v2"] .tasbih-cycle,
html[data-theme="v3"] .tasbih-cycle, html[data-theme="v4"] .tasbih-cycle,
html[data-theme="v1"] .tasbih-dhikr, html[data-theme="v2"] .tasbih-dhikr,
html[data-theme="v3"] .tasbih-dhikr, html[data-theme="v4"] .tasbih-dhikr { color: var(--text-dim); }
html[data-theme="v1"] .tasbih-dhikr .ar, html[data-theme="v2"] .tasbih-dhikr .ar,
html[data-theme="v3"] .tasbih-dhikr .ar, html[data-theme="v4"] .tasbih-dhikr .ar { color: var(--accent); }

/* ---------- adhan overlay ---------- */
html[data-theme="v1"] .adhan-overlay, html[data-theme="v2"] .adhan-overlay,
html[data-theme="v3"] .adhan-overlay, html[data-theme="v4"] .adhan-overlay {
  background: rgba(120, 118, 110, .55);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
}
html[data-theme="v1"] .ao-card, html[data-theme="v2"] .ao-card,
html[data-theme="v3"] .ao-card, html[data-theme="v4"] .ao-card {
  background: var(--surface);
  border-color: var(--gold-dim);
  box-shadow: 0 26px 70px -30px rgba(16, 36, 92, .55);
}
html[data-theme="v1"] .ao-head, html[data-theme="v2"] .ao-head,
html[data-theme="v3"] .ao-head, html[data-theme="v4"] .ao-head { color: var(--gold); }
html[data-theme="v1"] .ao-ar, html[data-theme="v2"] .ao-ar,
html[data-theme="v3"] .ao-ar, html[data-theme="v4"] .ao-ar { color: var(--text); }
html[data-theme="v1"] .ao-tr, html[data-theme="v2"] .ao-tr,
html[data-theme="v3"] .ao-tr, html[data-theme="v4"] .ao-tr { color: var(--accent); }
html[data-theme="v1"] .ao-en, html[data-theme="v2"] .ao-en,
html[data-theme="v3"] .ao-en, html[data-theme="v4"] .ao-en { color: var(--text-dim); }

/* ---------- tab bar (dark glass → light glass) ---------- */
html[data-theme="v1"] .tabbar, html[data-theme="v2"] .tabbar,
html[data-theme="v3"] .tabbar, html[data-theme="v4"] .tabbar {
  background: var(--glass);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -8px 26px -20px rgba(16, 36, 92, .55);
}
html[data-theme="v1"] .tab, html[data-theme="v2"] .tab,
html[data-theme="v3"] .tab, html[data-theme="v4"] .tab { color: var(--text-dim); }
html[data-theme="v1"] .tab.active, html[data-theme="v2"] .tab.active,
html[data-theme="v3"] .tab.active, html[data-theme="v4"] .tab.active { color: var(--accent); }

/* ---------- toast ---------- */
html[data-theme="v1"] .toast, html[data-theme="v2"] .toast,
html[data-theme="v3"] .toast, html[data-theme="v4"] .toast {
  background: var(--text);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 12px 32px -14px rgba(16, 36, 92, .6);
}

/* ---------- pray view (pray.css) ---------- */
html[data-theme="v1"] .pv-rail, html[data-theme="v2"] .pv-rail,
html[data-theme="v3"] .pv-rail, html[data-theme="v4"] .pv-rail {
  background: var(--surface-2);
  border-color: var(--line);
}
html[data-theme="v1"] .pv-rail-item, html[data-theme="v2"] .pv-rail-item,
html[data-theme="v3"] .pv-rail-item, html[data-theme="v4"] .pv-rail-item { background: var(--surface); }
html[data-theme="v1"] .pv-rail-item.on, html[data-theme="v2"] .pv-rail-item.on,
html[data-theme="v3"] .pv-rail-item.on, html[data-theme="v4"] .pv-rail-item.on {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 3px 12px -6px rgba(16, 36, 92, .35);
}
html[data-theme="v1"] .pv-rail-item.on .pv-rail-n, html[data-theme="v2"] .pv-rail-item.on .pv-rail-n,
html[data-theme="v3"] .pv-rail-item.on .pv-rail-n, html[data-theme="v4"] .pv-rail-item.on .pv-rail-n { color: var(--accent); }
html[data-theme="v1"] .pv-rail-img, html[data-theme="v2"] .pv-rail-img,
html[data-theme="v3"] .pv-rail-img, html[data-theme="v4"] .pv-rail-img { filter: none; opacity: .85; }
html[data-theme="v1"] .pv-btn-gold, html[data-theme="v2"] .pv-btn-gold,
html[data-theme="v3"] .pv-btn-gold, html[data-theme="v4"] .pv-btn-gold {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 4px 16px -4px color-mix(in srgb, var(--accent) 55%, transparent);
}
html[data-theme="v1"] .pv-btn-ghost, html[data-theme="v2"] .pv-btn-ghost,
html[data-theme="v3"] .pv-btn-ghost, html[data-theme="v4"] .pv-btn-ghost {
  color: var(--text); border-color: var(--line); background: var(--surface);
}
html[data-theme="v1"] .pv-resume, html[data-theme="v2"] .pv-resume,
html[data-theme="v3"] .pv-resume, html[data-theme="v4"] .pv-resume {
  background: var(--surface-2); color: var(--accent); border-top-color: var(--line);
}
html[data-theme="v1"] .pv-resume:hover, html[data-theme="v2"] .pv-resume:hover,
html[data-theme="v3"] .pv-resume:hover, html[data-theme="v4"] .pv-resume:hover {
  background: var(--surface-2);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
html[data-theme="v1"] .pv-chip:hover, html[data-theme="v2"] .pv-chip:hover,
html[data-theme="v3"] .pv-chip:hover, html[data-theme="v4"] .pv-chip:hover,
html[data-theme="v1"] .pv-unit:hover, html[data-theme="v2"] .pv-unit:hover,
html[data-theme="v3"] .pv-unit:hover, html[data-theme="v4"] .pv-unit:hover {
  background: var(--surface-2); border-color: var(--accent);
}
html[data-theme="v1"] .pv-chip-ar, html[data-theme="v2"] .pv-chip-ar,
html[data-theme="v3"] .pv-chip-ar, html[data-theme="v4"] .pv-chip-ar,
html[data-theme="v1"] .pv-chips-2 .pv-chip-ar, html[data-theme="v2"] .pv-chips-2 .pv-chip-ar,
html[data-theme="v3"] .pv-chips-2 .pv-chip-ar, html[data-theme="v4"] .pv-chips-2 .pv-chip-ar,
html[data-theme="v1"] .pv-h1-ar, html[data-theme="v2"] .pv-h1-ar,
html[data-theme="v3"] .pv-h1-ar, html[data-theme="v4"] .pv-h1-ar,
html[data-theme="v1"] .pv-unit-rak, html[data-theme="v2"] .pv-unit-rak,
html[data-theme="v3"] .pv-unit-rak, html[data-theme="v4"] .pv-unit-rak,
html[data-theme="v1"] .pv-crumb-back, html[data-theme="v2"] .pv-crumb-back,
html[data-theme="v3"] .pv-crumb-back, html[data-theme="v4"] .pv-crumb-back,
html[data-theme="v1"] .pv-wudu-kicker, html[data-theme="v2"] .pv-wudu-kicker,
html[data-theme="v3"] .pv-wudu-kicker, html[data-theme="v4"] .pv-wudu-kicker,
html[data-theme="v1"] .pv-wudu-go, html[data-theme="v2"] .pv-wudu-go,
html[data-theme="v3"] .pv-wudu-go, html[data-theme="v4"] .pv-wudu-go { color: var(--accent); }
html[data-theme="v1"] .pv-badge, html[data-theme="v2"] .pv-badge,
html[data-theme="v3"] .pv-badge, html[data-theme="v4"] .pv-badge { color: var(--text-dim); border-color: var(--line); }
html[data-theme="v1"] .pv-badge-fard, html[data-theme="v2"] .pv-badge-fard,
html[data-theme="v3"] .pv-badge-fard, html[data-theme="v4"] .pv-badge-fard,
html[data-theme="v1"] .pv-badge-witr, html[data-theme="v2"] .pv-badge-witr,
html[data-theme="v3"] .pv-badge-witr, html[data-theme="v4"] .pv-badge-witr { color: var(--accent); border-color: var(--accent); }
html[data-theme="v1"] .pv-wudu, html[data-theme="v2"] .pv-wudu,
html[data-theme="v3"] .pv-wudu, html[data-theme="v4"] .pv-wudu {
  background: var(--surface-2);
  background: linear-gradient(140deg, color-mix(in srgb, var(--accent) 12%, #ffffff), var(--surface) 70%);
  border-color: var(--line);
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
html[data-theme="v1"] .pv-progress, html[data-theme="v2"] .pv-progress,
html[data-theme="v3"] .pv-progress, html[data-theme="v4"] .pv-progress { background: var(--line); }
html[data-theme="v1"] .pv-progress i, html[data-theme="v2"] .pv-progress i,
html[data-theme="v3"] .pv-progress i, html[data-theme="v4"] .pv-progress i {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
html[data-theme="v1"] .pv-done-mark, html[data-theme="v2"] .pv-done-mark,
html[data-theme="v3"] .pv-done-mark, html[data-theme="v4"] .pv-done-mark {
  border-color: var(--accent);
  background: var(--surface-2);
  background: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 22%, transparent) 0 40%, transparent 41%);
}

/* ---------- quiz ---------- */
html[data-theme="v1"] .quiz-progress, html[data-theme="v2"] .quiz-progress,
html[data-theme="v3"] .quiz-progress, html[data-theme="v4"] .quiz-progress { background: var(--line); }
html[data-theme="v1"] .quiz-progress-fill, html[data-theme="v2"] .quiz-progress-fill,
html[data-theme="v3"] .quiz-progress-fill, html[data-theme="v4"] .quiz-progress-fill {
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
}
html[data-theme="v1"] .quiz-feedback.is-right, html[data-theme="v2"] .quiz-feedback.is-right,
html[data-theme="v3"] .quiz-feedback.is-right, html[data-theme="v4"] .quiz-feedback.is-right {
  background: #eaf4ee; color: #15523f; border-color: rgba(30, 122, 95, .45);
}
html[data-theme="v1"] .quiz-feedback.is-wrong, html[data-theme="v2"] .quiz-feedback.is-wrong,
html[data-theme="v3"] .quiz-feedback.is-wrong, html[data-theme="v4"] .quiz-feedback.is-wrong {
  background: #fdecec; color: #8a1319; border-color: rgba(216, 35, 42, .45);
}
html[data-theme="v1"] .quiz-quote, html[data-theme="v2"] .quiz-quote,
html[data-theme="v3"] .quiz-quote, html[data-theme="v4"] .quiz-quote { background: var(--surface-2); }

/* ---------- QIBLA page chrome (qibla2.css)
   The gold instrument itself (case / knurl / bezel / dial / .q2-turn banner)
   is deliberately left untouched — only the page chrome around it adapts. ---- */
html[data-theme="v1"] .q2-title, html[data-theme="v2"] .q2-title,
html[data-theme="v3"] .q2-title, html[data-theme="v4"] .q2-title {
  background: linear-gradient(178deg, #b8913f 0%, #8a6520 26%, #6a4a12 52%, #3f2c07 70%, #8a6520 86%, #b8913f 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html[data-theme="v1"] .q2-sub, html[data-theme="v2"] .q2-sub,
html[data-theme="v3"] .q2-sub, html[data-theme="v4"] .q2-sub { color: var(--gold); }
html[data-theme="v1"] .q2-stage, html[data-theme="v2"] .q2-stage,
html[data-theme="v3"] .q2-stage, html[data-theme="v4"] .q2-stage {
  filter: drop-shadow(0 24px 44px rgba(70, 52, 10, .35));
}
html[data-theme="v1"] .q2-tile, html[data-theme="v2"] .q2-tile,
html[data-theme="v3"] .q2-tile, html[data-theme="v4"] .q2-tile {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px -12px rgba(16, 36, 92, .35);
}
html[data-theme="v1"] .q2-tile .k, html[data-theme="v2"] .q2-tile .k,
html[data-theme="v3"] .q2-tile .k, html[data-theme="v4"] .q2-tile .k { color: var(--text-dim); }
html[data-theme="v1"] .q2-tile .v, html[data-theme="v2"] .q2-tile .v,
html[data-theme="v3"] .q2-tile .v, html[data-theme="v4"] .q2-tile .v { color: var(--text); }
html[data-theme="v1"] .q2-chip, html[data-theme="v2"] .q2-chip,
html[data-theme="v3"] .q2-chip, html[data-theme="v4"] .q2-chip {
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text-dim);
}
/* .q2-chip.on and .q2-turn keep the instrument's gold banner exactly as authored */
html[data-theme="v1"] .q2-chip.on, html[data-theme="v2"] .q2-chip.on,
html[data-theme="v3"] .q2-chip.on, html[data-theme="v4"] .q2-chip.on { color: #241a06; }
html[data-theme="v1"] .cr-num, html[data-theme="v2"] .cr-num,
html[data-theme="v3"] .cr-num, html[data-theme="v4"] .cr-num { color: var(--hero-num); }
html[data-theme="v2"] .cr-num { color: var(--accent); }
html[data-theme="v1"] .cr-hint, html[data-theme="v2"] .cr-hint,
html[data-theme="v3"] .cr-hint, html[data-theme="v4"] .cr-hint,
html[data-theme="v1"] .cdir, html[data-theme="v2"] .cdir,
html[data-theme="v3"] .cdir, html[data-theme="v4"] .cdir { color: var(--text-dim); }


/* ==========================================================================
   3.  PER-THEME HERO TREATMENTS
   ========================================================================== */

/* -------- v4 — WHITE card with the Iznik plate as a centred ring ---------- */
html[data-theme="v4"] .hero {
  background:
    radial-gradient(circle at 50% 48%, rgba(255,255,255,.97) 0 30%, rgba(255,255,255,.92) 41%,
                    rgba(255,255,255,.50) 52%, rgba(255,255,255,0) 66%),
    url('/assets/brand/iznik-plate.webp') center 48% / 296px 296px no-repeat,
    #ffffff;
  border: 1px solid var(--hero-ring);
  outline: 3px solid rgba(176, 138, 60, .14);
  outline-offset: 3px;
  border-radius: 30px;
}
html[data-theme="v4"] .hero-pattern { display: none; }
html[data-theme="v4"] .hero-inner { padding: 40px 24px 34px; }
html[data-theme="v4"] .hero-prayer { color: var(--text); font-size: 2.6rem; }
html[data-theme="v4"] .hero-count { color: var(--hero-num); font-size: 3rem; }

/* -------- v3 — Iznik ornament hero on a pale blue plate ------------------- */
html[data-theme="v3"] .hero {
  background:
    radial-gradient(circle at 50% 46%, rgba(255,255,255,.95) 0 30%, rgba(255,255,255,.45) 52%, rgba(255,255,255,0) 66%),
    linear-gradient(160deg, #e3eefb 0%, #b9d8f5 60%, #cfe3f8 100%);
  border-radius: 28px;
}
html[data-theme="v3"] .hero-pattern {
  opacity: .30;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='88' viewBox='0 0 88 88'%3E%3Cg fill='none' stroke='%232f7fd6' stroke-width='1'%3E%3Cpath d='M44 4 54 34 84 44 54 54 44 84 34 54 4 44 34 34Z'/%3E%3Ccircle cx='44' cy='44' r='12'/%3E%3C/g%3E%3Cg fill='none' stroke='%23d8232a' stroke-width='.7'%3E%3Ccircle cx='44' cy='44' r='30'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 88px 88px;
}
html[data-theme="v3"] .hero-prayer { color: var(--text); font-size: 2.6rem; }
html[data-theme="v3"] .hero-count { color: var(--hero-num); font-size: 3rem; }

/* -------- v2 — deep green→navy gradient card, white type ------------------ */
html[data-theme="v2"] .hero {
  background: linear-gradient(120deg, #1e6b54 0%, #12503f 45%, #0d2a6e 100%);
  border: 1px solid rgba(13, 42, 110, .35);
  border-radius: 22px;
}
html[data-theme="v2"] .hero-pattern {
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%237fc4ec' stroke-width='1'%3E%3Cpath d='M36 6 C48 18 48 30 36 42 C24 30 24 18 36 6Z'/%3E%3Ccircle cx='36' cy='52' r='8'/%3E%3C/g%3E%3C/svg%3E");
}
html[data-theme="v2"] .hero-label { color: #7fc4ec; }
html[data-theme="v2"] .hero-prayer { color: #ffffff; font-size: 2.6rem; }
html[data-theme="v2"] .hero-count  { color: #ffffff; font-size: 3rem; }
html[data-theme="v2"] .hero-at     { color: #b9d4f2; }
html[data-theme="v2"] .loc-btn {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .28);
  color: #eaf4ee;
}
html[data-theme="v2"] .loc-btn:hover { color: #ffffff; border-color: rgba(255,255,255,.6); }

/* -------- v1 — porcelain-blue plate with a teal rosette ------------------- */
html[data-theme="v1"] .hero {
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.96) 0 32%, rgba(255,255,255,.55) 54%, rgba(255,255,255,0) 70%),
    linear-gradient(160deg, #e0f2f5 0%, #cdeaef 58%, #ecf6f7 100%);
  border-radius: 28px;
}
html[data-theme="v1"] .hero-pattern {
  opacity: .26;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%230f8fb5' stroke-width='1'%3E%3Cpath d='M42 4 51 33 80 42 51 51 42 80 33 51 4 42 33 33Z'/%3E%3Ccircle cx='42' cy='42' r='11'/%3E%3C/g%3E%3Cg fill='none' stroke='%23d8232a' stroke-width='.7'%3E%3Ccircle cx='42' cy='42' r='28'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 84px 84px;
}
html[data-theme="v1"] .hero-prayer { color: var(--text); font-size: 2.6rem; }
html[data-theme="v1"] .hero-count  { color: var(--hero-num); font-size: 3rem; }


/* ==========================================================================
   4.  WIDE SCREENS
   ========================================================================== */
@media (min-width: 700px) {
  html[data-theme="v1"] .hero-prayer, html[data-theme="v2"] .hero-prayer,
  html[data-theme="v3"] .hero-prayer, html[data-theme="v4"] .hero-prayer { font-size: 3rem; }
}