@font-face { font-family: "Amiri Quran"; src: url(fonts/amiri-quran-ar.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; font-display: swap; }
@font-face { font-family: "Amiri Quran"; src: url(fonts/amiri-quran-lat.woff2) format("woff2"); unicode-range: U+0000-00FF; font-display: swap; }

/* Noto Sans Bengali (variable 400–600): clear Bangla digits (the previous font drew ১ almost like ৬). */
@font-face { font-family: "Noto Sans Bengali"; font-weight: 400 600; src: url(fonts/noto-bengali.woff2) format("woff2"); unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; font-display: swap; }
@font-face { font-family: "Noto Sans Bengali"; font-weight: 400 600; src: url(fonts/noto-bengali-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }

:root {
  --bg: #f6f3ea;
  --surface: #fffdf7;
  --surface-2: #efe9da;
  --ink: #1d2622;
  --ink-2: #55615b;
  --ink-3: #87918b;
  --line: #e2dccb;
  --brand: #0f3d33;
  --brand-ink: #f3e7c6;
  --gold: #b08a3e;
  --accent: #0f6b55;
  --hl: #fff2c9;
  --ar-size: 30px;
  --bn-size: 18px;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(15, 61, 51, .06), 0 4px 16px rgba(15, 61, 51, .06);
  color-scheme: light;
}
:root[data-theme="sepia"] {
  --bg: #f1e6cf; --surface: #f8eedb; --surface-2: #e9dbbd; --line: #dccaa5;
  --ink: #3b2f1e; --ink-2: #6b5a40; --ink-3: #94825f; --hl: #f5dc9f;
}
:root[data-theme="dark"] {
  --bg: #0e1513; --surface: #16201d; --surface-2: #1d2a26; --line: #26332f;
  --ink: #e8e4d8; --ink-2: #a9b2ab; --ink-3: #75817a;
  --brand: #0b2a23; --brand-ink: #e9d9ac; --gold: #d0ab5c; --accent: #5cc6a6; --hl: #2b3a2a;
  --shadow: none;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0e1513; --surface: #16201d; --surface-2: #1d2a26; --line: #26332f;
    --ink: #e8e4d8; --ink-2: #a9b2ab; --ink-3: #75817a;
    --brand: #0b2a23; --brand-ink: #e9d9ac; --gold: #d0ab5c; --accent: #5cc6a6; --hl: #2b3a2a;
    --shadow: none;
    color-scheme: dark;
  }
}
/* The Android app's designs (Settings → Home design): every page in their colours */
:root[data-style="classic"] {
  --bg: #f5eedd; --surface: #fffbf1; --surface-2: #efe5cc; --line: #e0d2af;
  --ink: #2b2316; --ink-2: #65583f; --ink-3: #94876a; --brand: #0f3d33; --brand-ink: #f3e7c6; --gold: #a57a2c; --accent: #8c6420; --hl: #fff0c4;
  color-scheme: light;
}
:root[data-style="noir"] {
  --bg: #0b0b0a; --surface: #161513; --surface-2: #211f1b; --line: #2e2a22;
  --ink: #f2ead6; --ink-2: #bfb49b; --ink-3: #8b826e; --brand: #0b0b0a; --brand-ink: #e2c27a; --gold: #d7b260; --accent: #d7b260; --hl: #2e2716;
  color-scheme: dark;
}
:root[data-style="mono"] {
  --bg: #f2f2f2; --surface: #ffffff; --surface-2: #e9e9e9; --line: #d6d6d6;
  --ink: #0d0d0d; --ink-2: #474747; --ink-3: #7a7a7a; --brand: #0d0d0d; --brand-ink: #ffffff; --gold: #0d0d0d; --accent: #0d0d0d; --hl: #e6e6e6;
  color-scheme: light;
}
:root[data-style="blue"] {
  --bg: #eef2f8; --surface: #fcfdff; --surface-2: #e3eaf4; --line: #d7dfeb;
  --ink: #14213a; --ink-2: #4d5b74; --ink-3: #8390a6; --brand: #132b57; --brand-ink: #f1e3be; --gold: #b8913e; --accent: #2457a6; --hl: #fff2c9;
  color-scheme: light;
}
:root[data-style="cream"] {
  --bg: #faf4e8; --surface: #fffdf8; --surface-2: #f3ead8; --line: #e8dcc3;
  --ink: #2e2416; --ink-2: #6a5a40; --ink-3: #9a8a6e; --brand: #6b4a1f; --brand-ink: #fff6e3; --gold: #a9792a; --accent: #9a6b22; --hl: #fff0c4;
  color-scheme: light;
}
:root[data-style="mono"][data-theme="dark"] {
  --bg: #000; --surface: #111; --surface-2: #1c1c1c; --line: #2c2c2c;
  --ink: #f4f4f4; --ink-2: #b5b5b5; --ink-3: #828282; --brand: #000; --brand-ink: #fff; --gold: #f4f4f4; --accent: #f4f4f4; --hl: #262626;
  color-scheme: dark;
}
:root[data-style="blue"][data-theme="dark"] {
  --bg: #0b1220; --surface: #131c2e; --surface-2: #1b2640; --line: #243150;
  --ink: #e6eaf2; --ink-2: #a5b0c4; --ink-3: #73809a; --brand: #0e1c3c; --brand-ink: #e9d9ac; --gold: #d0ab5c; --accent: #7fa8f0; --hl: #26324a;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-style="mono"]:not([data-theme]) {
    --bg: #000; --surface: #111; --surface-2: #1c1c1c; --line: #2c2c2c;
    --ink: #f4f4f4; --ink-2: #b5b5b5; --ink-3: #828282; --brand: #000; --brand-ink: #fff; --gold: #f4f4f4; --accent: #f4f4f4; --hl: #262626;
    color-scheme: dark;
  }
  :root[data-style="blue"]:not([data-theme]) {
    --bg: #0b1220; --surface: #131c2e; --surface-2: #1b2640; --line: #243150;
    --ink: #e6eaf2; --ink-2: #a5b0c4; --ink-3: #73809a; --brand: #0e1c3c; --brand-ink: #e9d9ac; --gold: #d0ab5c; --accent: #7fa8f0; --hl: #26324a;
    color-scheme: dark;
  }
  /* classic is a light design: the phone's dark mode leaves it light */
  :root[data-style="cream"]:not([data-theme]) {
    --bg: #faf4e8; --surface: #fffdf8; --surface-2: #f3ead8; --line: #e8dcc3;
    --ink: #2e2416; --ink-2: #6a5a40; --ink-3: #9a8a6e; --brand: #6b4a1f; --brand-ink: #fff6e3; --gold: #a9792a; --accent: #9a6b22; --hl: #fff0c4;
    color-scheme: light;
  }
  :root[data-style="classic"]:not([data-theme]) {
    --bg: #f5eedd; --surface: #fffbf1; --surface-2: #efe5cc; --line: #e0d2af;
    --ink: #2b2316; --ink-2: #65583f; --ink-3: #94876a; --brand: #0f3d33; --brand-ink: #f3e7c6; --gold: #a57a2c; --accent: #8c6420; --hl: #fff0c4;
    color-scheme: light;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans Bengali", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100dvh;
  padding-bottom: env(safe-area-inset-bottom);
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input { font: inherit; color: inherit; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ar { font-family: "Amiri Quran", "KFGQPC Uthmanic Script HAFS", serif; direction: rtl; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 4px;
  padding: calc(env(safe-area-inset-top) + 8px) 8px 8px 16px;
  background: var(--brand); color: var(--brand-ink);
}
.topbar .titles { flex: 1; min-width: 0; }
.topbar h1 { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar p { margin: 0; font-size: 12.5px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; flex: none; }
.icon-btn:active { background: rgba(127, 127, 127, .18); }
#backBtn { margin-left: -8px; }

main { max-width: 760px; margin: 0 auto; padding: 0 16px 8px; outline: none; }

/* ---------- home ---------- */

.tabs { position: sticky; top: 64px; z-index: 10; display: flex; gap: 6px; padding: 10px 0; background: var(--bg); }
.tab { flex: 1; padding: 8px 0; border-radius: 999px; font-size: 15px; color: var(--ink-2); background: var(--surface-2); }
.tab[aria-selected="true"] { background: var(--accent); color: #fff; font-weight: 600; }
:root[data-theme="dark"] .tab[aria-selected="true"] { color: #0e1513; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .tab[aria-selected="true"] { color: #0e1513; } }

.filter { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); margin: 2px 0 10px; outline: none; }
.filter:focus { border-color: var(--accent); }

.list { list-style: none; margin: 0; padding: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.list li:last-child .row { border-bottom: 0; }
.row:active { background: var(--surface-2); }
.num {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  font-size: 14px; font-weight: 600; color: var(--gold);
  background: var(--surface-2); border-radius: 12px; transform: rotate(45deg);
}
.num > span { transform: rotate(-45deg); }
.row .mid { flex: 1; min-width: 0; }
.row .name { font-weight: 600; font-size: 16.5px; }
.row .meta { font-size: 13px; color: var(--ink-3); }
.row .arname { font-size: 24px; color: var(--accent); line-height: 1.2; }
.empty { text-align: center; color: var(--ink-3); padding: 40px 16px; }

/* ---------- reader ---------- */
/* the surah's header: one card — the name beside its Arabic, a line of facts, what is read, the actions as a toolbar */
.surah-head { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); margin: 12px 0 4px; padding: 12px 14px 6px; }
.sv-top { display: flex; align-items: center; gap: 10px; }
.sv-names { flex: 1; min-width: 0; }
.surah-head .bn { font-size: 18px; font-weight: 600; line-height: 1.4; }
.surah-head .meta { color: var(--ink-3); font-size: 13px; line-height: 1.45; }
.surah-head .alt-names { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.surah-head .arname { font-size: 30px; line-height: 1.5; color: var(--accent); flex: none; }
.sv-prog { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.sv-bar { flex: 1; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; }
.sv-bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; }
.sv-prog .meta { font-size: 12px; white-space: nowrap; }
.sv-tools { display: flex; margin: 8px -8px 0; }
.sv-tools button { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; border-radius: 10px; background: none; color: var(--accent); font: inherit; cursor: pointer; }
.sv-tools button[hidden] { display: none; }
.sv-tools button:hover { background: var(--surface-2); }
.sv-tools button:disabled { opacity: .7; cursor: default; }
.sv-tools .ic { font-size: 19px; line-height: 24px; }
.sv-tools .lb { font-size: 11.5px; line-height: 14px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bismillah { text-align: center; font-size: 26px; color: var(--ink); padding: 6px 0 2px; }

.ayah { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); margin: 12px 0; padding: 14px 16px 10px; scroll-margin-top: 80px; transition: background .3s; }
.ayah.playing, .ayah.flash { background: var(--hl); }
.ayah.speaking { box-shadow: 0 0 0 2px var(--accent); }
.reading { background: var(--hl); border-radius: 8px; box-shadow: 0 0 0 4px var(--hl); transition: background .2s; }
.listen-btn { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 7px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 600; font-size: 14.5px; }
.listen-btn svg { width: 18px; height: 18px; }
select.filter { appearance: auto; }
.ayah .bar { display: flex; align-items: center; gap: 2px; margin: -4px -8px 4px 0; }
.ayah .ref { font-size: 13px; font-weight: 600; color: var(--gold); padding: 2px 10px; border-radius: 999px; background: var(--surface-2); margin-right: auto; }
.ayah .bar .icon-btn { width: 38px; height: 38px; color: var(--ink-3); }
.ayah .bar .icon-btn.on { color: var(--gold); }
.ayah .bar .icon-btn.on svg { fill: currentColor; }
.ayah .arabic { font-size: var(--ar-size); line-height: 2.05; text-align: right; margin: 4px 0 10px; word-spacing: 2px; }
.ayah .bangla { font-size: var(--bn-size); line-height: 1.75; margin: 0 0 6px; }
.ayah .uc { font-size: calc(var(--bn-size) - 1px); line-height: 1.7; margin: 0 0 6px; color: var(--accent); }
.ayah .uc .lbl { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--gold); background: var(--surface-2); border-radius: 6px; padding: 0 6px; margin-right: 6px; vertical-align: 2px; }
.ayah .tr { font-family: system-ui, sans-serif; font-style: italic; font-size: calc(var(--bn-size) - 3px); line-height: 1.6; color: var(--ink-3); margin: 0 0 8px; }
.ayah .bangla { border-top: 1px solid var(--line); padding-top: 8px; }
body.no-ar .ayah .arabic, body.no-ar .bismillah, body.no-uc .ayah .uc, body.no-tr .ayah .tr { display: none; }
.fn { display: inline-block; min-width: 1.5em; padding: 0 4px; margin: 0 1px; border-radius: 6px; font-size: .72em; line-height: 1.5; vertical-align: super; color: var(--accent); background: var(--surface-2); font-weight: 600; }
.tafsir-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--accent); padding: 6px 0; }
.tafsir-toggle svg { width: 16px; height: 16px; transition: transform .2s; }
.tafsir-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.tafsir { border-top: 1px dashed var(--line); margin-top: 6px; padding-top: 8px; font-size: calc(var(--bn-size) - 2px); color: var(--ink-2); }
.note { margin: 0 0 14px; }
.note .nn { display: inline-block; font-weight: 600; color: var(--accent); margin-right: 6px; }
.note b, .intro b { color: var(--ink); }
.ar-in { font-family: "Amiri Quran", serif; font-size: 1.25em; direction: rtl; unicode-bidi: isolate; }
.ar-uc { color: var(--accent); }
body.no-uc .ar-uc { display: none; }

.pager { display: flex; gap: 10px; margin: 20px 0; }
.pager a { flex: 1; text-align: center; padding: 12px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: var(--accent); font-weight: 600; font-size: 15px; }

/* ---------- search ---------- */
.result { display: block; text-decoration: none; color: inherit; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.result .ref { font-size: 13px; font-weight: 600; color: var(--gold); }
.result p { margin: 2px 0 0; font-size: 15.5px; }
mark { background: var(--hl); color: inherit; border-radius: 3px; padding: 0 1px; }
.count { font-size: 13.5px; color: var(--ink-3); margin: 0 2px 8px; }

/* ---------- sheet ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 40; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  max-width: 760px; margin: 0 auto; max-height: 82dvh; display: flex; flex-direction: column;
  background: var(--surface); border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom);
  animation: up .22s ease-out;
}
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 8px auto 0; }
.sheet-head { display: flex; align-items: center; padding: 4px 8px 4px 18px; border-bottom: 1px solid var(--line); }
.sheet-head h2 { flex: 1; margin: 0; font-size: 17px; font-weight: 600; }
.sheet-body { overflow-y: auto; padding: 14px 18px 24px; font-size: 16.5px; line-height: 1.75; }
.intro p { margin: 0 0 12px; }

.setting { padding: 12px 0; border-bottom: 1px solid var(--line); }
.setting:last-child { border-bottom: 0; }
.setting label, .setting .lbl { display: flex; justify-content: space-between; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.setting .lbl span, .setting label span { color: var(--ink-3); font-weight: 400; }
.setting input[type="range"] { width: 100%; accent-color: var(--accent); }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { flex: 1; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: 14.5px; }
.seg button[aria-pressed="true"] { background: var(--accent); color: #fff; font-weight: 600; }
.switch { display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 15px; }
.switch input { width: 22px; height: 22px; accent-color: var(--accent); }
.btn { width: 100%; padding: 12px; border-radius: 12px; background: var(--accent); color: #fff; font-weight: 600; font-size: 15px; }
.btn:disabled { opacity: .6; }
.small { font-size: 13px; color: var(--ink-3); margin: 6px 0 0; }
.credit { font-size: 13px; color: var(--ink-3); text-align: center; margin: 24px 8px; line-height: 1.6; }
.credit a { color: var(--accent); }

/* ---------- fast scroller (long surahs) ---------- */
.fscroll { position: fixed; right: 2px; bottom: calc(96px + env(safe-area-inset-bottom)); width: 30px; z-index: 25; pointer-events: none; }
.fs-track { position: absolute; top: 0; bottom: 0; right: 6px; width: 4px; border-radius: 4px; background: color-mix(in srgb, var(--ink-2, #888) 18%, transparent); overflow: hidden; }
.fs-fill { width: 100%; border-radius: 4px; background: var(--accent); opacity: .45; }
.fs-thumb { position: absolute; top: 0; right: 0; width: 16px; height: 44px; border-radius: 8px; background: var(--accent); opacity: .55; pointer-events: auto; touch-action: none; cursor: grab; transition: opacity .2s, width .15s; }
.fs-thumb::before { content: ""; position: absolute; inset: -6px -2px -6px -18px; }   /* bigger touch target */
.fscroll.active .fs-thumb { opacity: .9; }
.fscroll.dragging .fs-thumb { opacity: 1; width: 20px; cursor: grabbing; }
.fs-bubble { position: absolute; right: 28px; top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: var(--brand, #0b2a23); color: var(--brand-ink, #fff); font-size: 13.5px; box-shadow: 0 4px 14px rgba(0,0,0,.25); opacity: 0; transition: opacity .2s; pointer-events: none; }
.fscroll.dragging .fs-bubble { opacity: 1; }

/* ---------- player / toast ---------- */
.player {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 30;
  max-width: 560px; margin: 0 auto; display: flex; align-items: center; gap: 2px; padding: 6px 6px 6px 8px;
  border-radius: 18px; background: var(--brand); color: var(--brand-ink); box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
.player .play { background: var(--brand-ink); color: var(--brand); }
.player .play svg { fill: currentColor; }
.pl-label { flex: 1; min-width: 0; font-size: 14px; padding: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 50; background: #222; color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 14px; max-width: calc(100% - 32px); }

.spinner { margin: 60px auto; width: 32px; height: 32px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.ayah-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.listen-chip { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 6px 14px 6px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; }
.listen-chip svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.ayah.speaking .listen-chip { background: var(--gold); }
:root[data-theme="dark"] .listen-chip { color: #0e1513; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .listen-chip { color: #0e1513; } }

/* ---------- reading progress ---------- */
.pbar { height: 4px; border-radius: 2px; background: var(--surface-2); margin-top: 5px; overflow: hidden; }
.pbar i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.done { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--surface-2); border-radius: 6px; padding: 1px 6px; vertical-align: 2px; }
.ayah.read .ref::after { content: " ✓"; color: var(--accent); }
.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); margin-top: 8px; }

/* ---------- per-surah "where I left off" ---------- */
.cont-head { font-size: 14px; font-weight: 600; color: var(--ink-2); margin: 16px 2px 6px; }
.cont-list { display: flex; flex-direction: column; gap: 8px; }
.cont { display: flex; align-items: center; gap: 10px; padding: 12px 8px 12px 14px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--brand), #1a5a4a); color: var(--brand-ink); text-decoration: none; box-shadow: var(--shadow); }
.cont .mid { flex: 1; min-width: 0; }
.cont .name { font-weight: 600; font-size: 16px; }
.cont .meta { font-size: 13px; opacity: .85; }
.cont .pbar { background: rgba(255, 255, 255, .18); }
.cont .pbar i { background: var(--brand-ink); }
.cont .go { flex: none; padding: 7px 12px; border-radius: 999px; background: var(--brand-ink); color: var(--brand); font-weight: 600; font-size: 13.5px; }
.cont-x { flex: none; width: 30px; height: 30px; border-radius: 50%; color: var(--brand-ink); opacity: .6; font-size: 14px; }
.cont-x:active { background: rgba(255, 255, 255, .15); }
.row .pos { color: var(--accent); font-weight: 600; }
.resume-bar { position: sticky; top: 64px; z-index: 5; display: flex; align-items: center; gap: 8px; margin: 10px 0 0;
  padding: 8px 6px 8px 14px; border-radius: 12px; background: var(--hl); font-size: 14.5px; box-shadow: var(--shadow); }
.resume-bar span { flex: 1; }
.resume-bar .go { padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #fff; text-decoration: none; font-weight: 600; font-size: 13.5px; white-space: nowrap; }
.resume-bar button { width: 30px; height: 30px; border-radius: 50%; color: var(--ink-3); }

/* ---------- original book viewer ---------- */
.book-chip { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-size: 13.5px; }
.book-chip + .listen-chip { margin-left: 0; }
.bookv { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: #2a2a2a; }
.bv-top { display: flex; align-items: center; gap: 4px; padding: calc(env(safe-area-inset-top) + 6px) 6px 6px; background: var(--brand); color: var(--brand-ink); }
.bv-title { flex: 1; min-width: 0; line-height: 1.3; }
.bv-title b { display: block; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bv-title small { display: block; font-size: 11.5px; opacity: .8; }
.bv-scroll { flex: 1; overflow: auto; -webkit-overflow-scrolling: touch; text-align: center; }
.bv-scroll img { display: block; width: 100%; max-width: none; margin: 0 auto; background: #fff; }
.bv-scroll { touch-action: pan-x pan-y; }   /* a pinch zooms the page scan (app.js), not the whole screen */
.bv-missing { color: #ddd; padding: 60px 20px; }
.bv-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px calc(env(safe-area-inset-bottom) + 8px); background: var(--brand); color: var(--brand-ink); }
.bv-bottom button { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: var(--brand-ink); font-size: 14px; font-weight: 600; }
.bv-bottom span { font-size: 14px; font-weight: 600; }
.bv-scroll img { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ---------- account ---------- */
#accountBtn.on { color: var(--brand-ink); background: rgba(255, 255, 255, .14); }
.acct .seg { margin-bottom: 12px; }
.acct .fl { display: block; font-size: 14px; font-weight: 600; margin: 8px 0 0; }
.acct .fl input { margin: 4px 0 0; }
.acct form .btn { margin-top: 14px; }
.acct .err { color: #c0392b; min-height: 1em; }
.acct .err.ok, .acct .ok { color: var(--accent); }
.acct .fl small { display: block; font-weight: 400; font-size: 12.5px; color: var(--ink-3); margin-top: 3px; min-height: 1em; }
.acct .fl small.ok { color: var(--accent); } .acct .fl small.err { color: #c0392b; }
.acct-nudge { color: #b45309; }
#acEdit, #acProfile { margin-top: 10px; }
.acct-who { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.acct-who b { display: block; font-size: 17px; }
.acct-who small { color: var(--ink-3); font-size: 13px; line-height: 1.5; }
.avatar { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-size: 22px; font-weight: 600; }
.acct .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acct .frow .fl { min-width: 0; }
@media (max-width: 360px) { .acct .frow { grid-template-columns: 1fr; } }
.acct .fl { margin-top: 6px; }
.acct .fl input { padding: 9px 12px; }
.acct .linkbtn { display: block; margin: 10px auto 0; color: var(--accent); font-size: 14px; text-decoration: underline; }
.acct .otp { font-size: 22px; letter-spacing: 8px; text-align: center; font-weight: 600; }

/* ---------- home: dates, prayer times, Quran ---------- */
.today-card { margin: 14px 0 0; padding: 10px 14px; border-radius: 16px; color: var(--brand-ink); box-shadow: var(--shadow);
  background: radial-gradient(120% 120% at 100% 0%, #2a7a63 0%, transparent 60%), linear-gradient(150deg, #0f3d33, #145545); }
.today-card { display: flex; align-items: center; gap: 12px; }
.tc-main { flex: 1; min-width: 0; }
.tc-greet { font-size: 14px; line-height: 1.4; opacity: .92; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-greet b { color: #e9d9ac; font-weight: 600; }
.tc-dates { margin-top: 2px; font-size: 12.5px; line-height: 1.45; opacity: .88; }
.tc-dates b { font-weight: 600; opacity: 1; }
.tc-clock { flex: none; display: flex; flex-direction: column; align-items: flex-end; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .15); }
.tc-clock b { font-size: 24px; font-weight: 600; line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tc-clock b i { font-style: normal; font-size: 15px; opacity: .75; }
.tc-clock b small { font-size: 11px; font-weight: 600; margin-left: 3px; color: #e9d9ac; }

/* home top: the day's sky from horizon to horizon (the sun's path with the waqts on it, hills and mosques at the
   horizon), then a panel with what runs now. Each part of the day has its own sky and ink. */
.hw { --sky: linear-gradient(180deg, #e4f2ee 0%, #d3e9e1 42%, #f4ddb0 100%); --sk-ink: #11332b; --sk-ink2: rgba(17,51,43,.72);
  --hill1: rgba(36,104,86,.28); --hill2: rgba(22,78,62,.5); --mosq: #1b5546; --path: rgba(17,51,43,.4); --trail: #e5a53a;
  --mark: #1b5546; --pill: #fff; --box: rgba(255,255,255,.72); --boxline: rgba(17,51,43,.18); --star: transparent;
  position: relative; margin: 12px 0 0; border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); background: var(--surface); }
.hw[data-phase="dawn"] { --sky: linear-gradient(180deg, #dfe3f1 0%, #ead5cc 50%, #f3b98c 100%); --hill1: rgba(70,80,110,.28); --hill2: rgba(52,58,88,.5); --mosq: #34385a; --mark: #34385a; }
.hw[data-phase="dusk"] { --sky: linear-gradient(180deg, #e7dfea 0%, #f0cbab 50%, #eb9a60 100%); --hill1: rgba(110,70,60,.28); --hill2: rgba(88,50,44,.5); --mosq: #4f2f2a; --mark: #4f2f2a; --trail: #d9782f; }
.hw[data-phase="eve"], .hw[data-phase="night"] { --sk-ink: #fff; --sk-ink2: rgba(255,255,255,.75); --path: rgba(255,255,255,.3); --trail: #cfd8ff;
  --mark: #fff; --pill: rgba(255,255,255,.16); --box: rgba(255,255,255,.1); --boxline: rgba(255,255,255,.2); --star: #fff; }
.hw[data-phase="eve"] { --sky: linear-gradient(180deg, #1d2b4d 0%, #3b3f66 55%, #74505f 100%); --hill1: rgba(10,14,30,.35); --hill2: rgba(8,10,24,.55); --mosq: #0d1226; }
.hw[data-phase="night"] { --sky: linear-gradient(180deg, #0c1a2e 0%, #13283f 55%, #1c3a47 100%); --hill1: rgba(0,0,0,.3); --hill2: rgba(0,0,0,.5); --mosq: #07111c; }
.hw-scene { padding: 11px 14px 18px; background: var(--sky); color: var(--sk-ink); }
.hw-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hw-date { display: flex; flex-direction: column; min-width: 0; color: var(--sk-ink); text-decoration: none; line-height: 1.4; }
.hw-date b { font-size: 14.5px; font-weight: 700; }
.hw-date small { font-size: 12px; color: var(--sk-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-right { flex: none; max-width: 52%; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hw-loc { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; padding: 6px 11px 6px 9px; border-radius: 99px;
  background: #0f5a47; color: #fff; font-size: 12.5px; font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.hw-loc svg { flex: none; width: 14px; height: 14px; fill: currentColor; stroke: none; }
.hw-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-loc .gps { flex: none; font-size: 10px; opacity: .85; }
.hw-loc i { font-style: normal; opacity: .75; font-size: 10px; }
.hw-clock { font-size: 15px; font-weight: 700; color: var(--sk-ink); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2; }
.hw-clock i { font-style: normal; font-size: 12px; opacity: .7; }
.hw-clock small { font-size: 10px; font-weight: 700; margin-left: 3px; color: #c98a1a; }
.hw[data-phase="eve"] .hw-clock small, .hw[data-phase="night"] .hw-clock small { color: #ffe3a3; }
.hw-sky { position: relative; margin: 0 -14px 0; }
.hw-sky svg { display: block; width: 100%; height: auto; overflow: visible; stroke: none; stroke-width: 1; }
.hw-sky svg circle { stroke: none; }
.hw-stars circle { fill: var(--star); opacity: .55; animation: hw-twinkle 3s ease-in-out infinite alternate; }
@keyframes hw-twinkle { from { opacity: .2; } to { opacity: .8; } }
.hw-hill1 { fill: var(--hill1); } .hw-hill2 { fill: var(--hill2); } .hw-mosq { fill: var(--mosq); opacity: .9; }
/* the path, the trail the body has come, the forbidden stretches, the horizon */
.hw-path { fill: none; stroke: var(--path); stroke-width: 1.2; stroke-dasharray: 1.5 4; }
.hw-trail { fill: none; stroke: var(--trail); stroke-width: 2.6; stroke-linecap: round; opacity: .95; }
.hw-fpath { fill: none; stroke: #e5483b; stroke-width: 4; stroke-linecap: round; opacity: .85; }
.hw-horizon { stroke: var(--path); stroke-width: .8; }
.hw-mark circle { fill: var(--mark); }
.hw-mark .hw-pill { fill: var(--pill); }
.hw-mark .hw-endbox { fill: var(--box); stroke: var(--boxline); stroke-width: .8; }
.hw-sky svg .hw-mark .hw-endbox { stroke: var(--boxline); }
.hw-mark text { fill: var(--sk-ink); font-size: 10px; }
.hw-mark .l { opacity: .8; }
.hw-mark .v { font-size: 10.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* the bodies */
.hw-body { transition: transform 1s linear; }
.hw-sun { fill: #ffd255; } .hw-glow { fill: rgba(255,200,70,.35); } .hw-halo { fill: rgba(255,200,70,.16); }
.hw-rays line { stroke: rgba(240,180,40,.85); stroke-width: 2; stroke-linecap: round; }
.hw-rays { animation: hw-spin 40s linear infinite; }
@keyframes hw-spin { to { transform: rotate(360deg); } }
.hw[data-low="1"] .hw-sun { fill: #ffb05a; } .hw[data-low="1"] .hw-glow { fill: rgba(255,140,60,.38); } .hw[data-low="1"] .hw-halo { fill: rgba(255,140,60,.18); r: 40; }
.hw[data-low="1"] .hw-rays line { stroke: rgba(255,170,90,.7); }
.hw-mglow { fill: rgba(255,255,255,.1); } .hw-moon-dark { fill: rgba(255,255,255,.08); }
.hw-moon { fill: #f1eee4; } .hw-crater { fill: rgba(180,176,160,.55); }
@media (prefers-reduced-motion: reduce) { .hw-rays, .hw-stars circle { animation: none; } .hw-body { transition: none; } }
/* the little qibla compass in the sky's corner */
.hw-sky .hw-qibla { position: absolute; left: 12px; top: 0; display: flex; flex-direction: column; align-items: center; color: var(--sk-ink); text-decoration: none; font-size: 10px; line-height: 1.2; }
.hw-sky .hw-qibla svg { width: 38px; height: 38px; overflow: visible; }
.hw-qibla .q-ring { fill: var(--box); stroke: var(--boxline); stroke-width: 1; transition: fill .3s; }
.hw-qibla.on .q-ring { fill: rgba(46,204,113,.55); }
.hw-qibla .q-n { fill: #d9452f; font-size: 6.5px; font-weight: 700; text-anchor: middle; }
.hw-qibla .q-tk { stroke: var(--path); stroke-width: 1; }
.hw-qibla .q-arrow { fill: #d79a25; }
.hw-qibla .q-kaaba { fill: #1b1b1b; stroke: #d79a25; stroke-width: .8; }
.hw-qibla small { color: var(--sk-ink2); }
/* the panel: what runs now, its countdown, a bar to its end */
.hw-panel { position: relative; margin-top: -12px; padding: 11px 14px 12px; border-radius: 20px 20px 0 0; background: var(--surface); color: var(--ink); }
.hw-now { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hw-cur { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hw-cur small { font-size: 12px; color: var(--ink-2); }
.hw-cur b { font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hw-rot { display: inline-grid; overflow: hidden; vertical-align: bottom; }
.hw-rot i { grid-area: 1 / 1; font-style: normal; opacity: 0; animation: hw-rot 7.5s ease-in-out infinite; }
.hw-rot i:nth-child(2) { animation-delay: 2.5s; } .hw-rot i:nth-child(3) { animation-delay: 5s; }
@keyframes hw-rot { 0% { opacity: 0; transform: translateY(70%); } 5%, 33.3% { opacity: 1; transform: none; } 38.3%, 100% { opacity: 0; transform: translateY(-70%); } }
@media (prefers-reduced-motion: reduce) { .hw-rot i { animation: none; opacity: 1; } .hw-rot i + i { display: none; } }
.hw-cd { flex: none; display: flex; flex-direction: column; align-items: center; padding: 4px 11px; border-radius: 12px; line-height: 1.2;
  background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.hw-cd b { font-size: 20px; font-weight: 700; letter-spacing: .5px; font-variant-numeric: tabular-nums; }
.hw-cd small { font-size: 10.5px; color: var(--ink-2); }
.hw-bar { position: relative; height: 6px; margin-top: 9px; border-radius: 99px; background: var(--line); overflow: hidden; }
.hw-bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: linear-gradient(90deg, #e9b24f, #f6d58a); transition: width .6s; }
.hw[data-kind="forb"] .hw-bar i { background: linear-gradient(90deg, #e5483b, #ff9a8a); }
.hw[data-kind="forb"] .hw-cur b { color: #d9452f; }
.hw-ends { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.hw-ends a { min-width: 0; padding: 4px 11px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.hw-ends a b { color: var(--accent); font-weight: 700; }
.hw-forb { margin: 10px 0 0; padding: 6px 10px; border-radius: 10px; background: #c0392b; color: #fff; font-size: 12.5px; font-weight: 600; text-align: center; }

/* today's five, classic: deep green in a fine gold frame, a column each between gold rules, the running one in an arch */
.wq { --g: #d6b25e; position: relative; margin-top: 12px; padding: 14px 10px 10px; border-radius: 22px; color: #f4ecd6; box-shadow: var(--shadow);
  background: radial-gradient(120% 90% at 50% 0%, #15604d 0%, #0d4236 55%, #0a3129 100%); }
.wq::before { content: ''; position: absolute; inset: 5px; border-radius: 18px; border: 1px solid rgba(214,178,94,.38); pointer-events: none; }
.wq-h { position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 8px 10px; }
.wq-h b { font-size: 16px; font-weight: 700; color: var(--g); letter-spacing: .3px; }
.wq-h b::before, .wq-h b::after { content: '۞'; margin: 0 6px; font-size: 12px; opacity: .7; }
.wq-h b::before { margin-left: 0; }
.wq-sum { display: inline-flex; align-items: center; gap: 7px; color: #f4ecd6; font-weight: 700; font-size: 13px; text-decoration: none; font-variant-numeric: tabular-nums; }
.wq-pips { display: inline-flex; gap: 3px; }
.wq-pips i { width: 10px; height: 4px; border-radius: 2px; background: rgba(244,236,214,.25); }
.wq-pips i.on { background: var(--g); }
.wq-cols { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.wq-c { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 12px 2px 8px; color: inherit; text-align: center; background: none; font-size: inherit; font-weight: inherit; vertical-align: top;
  border-radius: 40px 40px 12px 12px; }
.wq-c + .wq-c::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: linear-gradient(transparent, rgba(214,178,94,.4), transparent); }
.wq-c.now::before, .wq-c.now + .wq-c::before { display: none; }
.wq .wq-c.now { background: linear-gradient(180deg, rgba(214,178,94,.22), rgba(214,178,94,.06)); box-shadow: inset 0 0 0 1px rgba(214,178,94,.6); }
.wq-i { width: 24px; height: 24px; fill: none; stroke: var(--g); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 3px; }
.wq-c b { font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.wq-at { font-size: 14px; font-weight: 700; color: var(--g); font-variant-numeric: tabular-nums; }
.wq-c small { font-size: 10.5px; opacity: .65; font-variant-numeric: tabular-nums; }
/* the mark: an empty ring to tap, gold when prayed */
.wq-m { display: grid; place-items: center; width: 24px; height: 24px; margin-top: 6px; border-radius: 50%; border: 1.5px solid rgba(244,236,214,.35);
  font-size: 11px; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.wq .wq-c.done .wq-m { background: var(--g); border-color: var(--g); color: #2b2006; }
.wq-c.now:not(.done) .wq-m { border-color: var(--g); box-shadow: 0 0 0 4px rgba(214,178,94,.18); animation: wq-pulse 2s ease-in-out infinite; }
.wq-c.missed .wq-m { border: 1.5px dashed #e9a46a; color: #e9a46a; }
@keyframes wq-pulse { 50% { box-shadow: 0 0 0 7px rgba(214,178,94,0); } }
@media (prefers-reduced-motion: reduce) { .wq-c.now .wq-m { animation: none; } }
.wq-c em { min-height: 14px; margin-top: 3px; font-style: normal; font-size: 10.5px; line-height: 1.3; opacity: .8; white-space: nowrap; }
.wq-c.done em { color: var(--g); opacity: 1; font-weight: 600; }
.wq-c.missed em { color: #e9a46a; opacity: 1; }
.wq-c.now em { color: var(--g); opacity: 1; font-weight: 700; }
.wq-tip { position: relative; margin: 6px 0 2px; text-align: center; font-size: 11px; opacity: .55; }
/* the running waqt's dot (the five are not marked any more) */
.wq-dot { width: 10px; height: 10px; margin: 8px auto 0; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 4px rgba(214,178,94,.18); animation: wq-pulse 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .wq-dot { animation: none; } }

/* three shortcuts */
.hs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.hs a { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 10px 8px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.hs-i { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: 18px; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.hs-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hs-t b { font-size: 13px; font-weight: 700; line-height: 1.25; }
.hs-t small { font-size: 11px; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 340px) { .hs a { flex-direction: column; align-items: flex-start; } }

/* today's ayah on a night scene */
.ha { position: relative; display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 14px 44px 14px 16px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(150deg, #0f4d3f, #0a2f28); color: #fff; text-decoration: none; box-shadow: var(--shadow); }
.ha-bg { position: absolute; right: 0; bottom: 0; width: 60%; height: 100%; opacity: .28; pointer-events: none; }
.ha-moon { fill: #f6d58a; } .ha-mosq { fill: #000; }
.ha-k { position: relative; color: #f6d58a; font-size: 13px; font-weight: 700; }
.ha-ar { position: relative; font-size: 24px; line-height: 1.7; text-align: right; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ha-t { position: relative; font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ha-src { position: relative; font-size: 12.5px; opacity: .8; }
.ha-go { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.14); font-size: 18px; }

/* sahri · iftar · countdown */
.fs-strip { display: block; margin-top: 12px; padding: 10px 12px 12px; border-radius: 18px; color: #fff; text-decoration: none; box-shadow: var(--shadow); background: linear-gradient(135deg, #17463f, #1f5a50); }
.fs-strip.ram { background: linear-gradient(135deg, #1d2b55, #3a2f6b); }
.fs-h { display: block; font-size: 12.5px; opacity: .88; }
.fs-cols { display: grid; grid-template-columns: 1fr 1fr 1.25fr; margin-top: 6px; text-align: center; }
.fs-cols > span { display: flex; flex-direction: column; line-height: 1.3; }
.fs-cols > span + span { border-left: 1px solid rgba(255,255,255,.18); }
.fs-cols b { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fs-cols .cd b { color: #f2c46b; }
.fs-cols small { font-size: 12px; opacity: .85; }

/* forbidden and nafl times */
.tb { margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.tb-h { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.tb-h + .tb-r { margin-top: 4px; }
.tb-h.forb b { color: #c0392b; }
:root[data-theme="dark"] .tb-h.forb b { color: #ff8a7a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .tb-h.forb b { color: #ff8a7a; } }
.tb-h a { font-size: 13px; color: var(--accent); text-decoration: none; }
.tb .small { margin: 4px 0 8px; }
.tb-forb { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.tb-forb span { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 12px; background: color-mix(in srgb, #c0392b 16%, var(--surface)); line-height: 1.35; }
.tb-forb span.on { background: #c0392b; color: #fff; }
.tb-forb small { font-size: 12px; opacity: .85; }
.tb-forb b { font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-r { display: flex; align-items: flex-start; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line); }
.tb-i { width: 26px; font-size: 18px; }
.tb-l { flex: 1; font-size: 14.5px; }
.tb-v { display: flex; flex-direction: column; align-items: flex-end; font-size: 14px; font-weight: 600; text-align: right; }
.tb-v small { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 400; color: var(--ink-2); }
.tb-v small i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* main features */
.feat { margin-top: 14px; }
.feat-h { font-size: 15px; }
.feat .quick { margin-top: 8px; grid-template-columns: repeat(4, 1fr); }
.feat .quick > * { min-height: 78px; }
.feat .quick span { font-size: 24px; }
.feat .quick b { font-size: 12.5px; }
@media (max-width: 340px) { .feat .quick { grid-template-columns: repeat(3, 1fr); } }
.tc-clock span { font-size: 11.5px; opacity: .75; }
.quran-btn { display: flex; align-items: center; gap: 14px; margin: 12px 0 0; padding: 16px; border-radius: 20px; text-decoration: none; color: var(--brand-ink);
  background: radial-gradient(circle at 0% 100%, rgba(208, 171, 92, .28), transparent 50%), linear-gradient(140deg, #17614f, #0f3d33); box-shadow: 0 8px 24px rgba(15, 61, 51, .22); }
.qb-ar { flex: none; width: 66px; height: 66px; display: grid; place-items: center; border-radius: 18px; background: rgba(0, 0, 0, .2); color: #e9d9ac; font-size: 26px; line-height: 1; }
.qb-txt { flex: 1; min-width: 0; }
.qb-txt b { display: block; font-size: 20px; }
.qb-txt small { display: block; font-size: 13px; opacity: .85; }
.qb-go { flex: none; padding: 9px 14px; border-radius: 999px; background: #e9d9ac; color: #0f3d33; font-weight: 600; font-size: 14px; white-space: nowrap; }
@media (max-width: 400px) { .quran-btn { flex-wrap: wrap; } .qb-go { width: 100%; text-align: center; } }
.city { display: block; width: 100%; text-align: left; font-size: 15.5px; }
.city-div { font-size: 13px; font-weight: 600; color: var(--gold); padding: 12px 0 4px; }
.quran-btn.top { margin-top: 12px; }
.pl-mode { flex: none; max-width: 42%; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.14); color: var(--brand-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lsw { padding: 8px 0; border-bottom: 1px solid var(--line); }
.lsw:last-of-type { border-bottom: 0; }
.lsw small { flex: 1; margin-left: 8px; font-weight: 400; color: var(--ink-3); font-size: 13px; }
.ayah .arabic.reading { border-radius: 10px; }
.powered { text-align: center; margin: -10px 0 26px; font-size: 13px; color: var(--ink-3); letter-spacing: .2px; }
.powered a { color: var(--accent); text-decoration: none; }
/* dark accent is light green: dark text on "now" highlights */

/* ---- settings ---- */
.set-nav { position: sticky; top: -14px; z-index: 3; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: -14px -18px 0; padding: 10px 18px; background: var(--surface); border-bottom: 1px solid var(--line); }
.set-nav::-webkit-scrollbar { display: none; }
.set-nav button { flex: none; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.set-acct { display: flex; align-items: center; gap: 12px; width: 100%; margin: 12px 0 4px; padding: 12px 14px; border-radius: 16px; text-align: left; color: var(--brand-ink); background: linear-gradient(150deg, #0f3d33, #17614f); }
.set-acct .avatar { width: 44px; height: 44px; font-size: 20px; background: rgba(255, 255, 255, .16); }
.sa-txt { flex: 1; min-width: 0; }
.sa-txt b { display: block; font-size: 16px; }
.sa-txt small { display: block; font-size: 12.5px; opacity: .8; }
.chev { flex: none; font-size: 22px; line-height: 1; opacity: .6; }
.set-sec { margin-top: 14px; padding: 4px 14px; border-radius: 16px; background: var(--surface-2); scroll-margin-top: 52px; }
.set-sec h3 { margin: 10px 0 2px; font-size: 13px; font-weight: 700; letter-spacing: .3px; color: var(--gold); }
.set-sec .setting { border-bottom-color: color-mix(in srgb, var(--line) 70%, transparent); }
.set-sec .setting:last-child { border-bottom: 0; }
.set-sec .seg button { background: var(--surface); }
.set-sec .seg button[aria-pressed="true"] { background: var(--accent); }
.set-sec .small { margin-top: 6px; }
.set-sec > .small { padding-bottom: 10px; }
.setting.tg { padding: 10px 0; }
.switch > span { flex: 1; min-width: 0; }
.setting .switch > span { color: var(--ink); font-weight: 600; }
.switch > span small, .seg.vlist small { display: block; font-size: 12.5px; font-weight: 400; color: var(--ink-3); margin-top: 1px; }
/* toggle switch */
.switch input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 44px; height: 26px; margin: 0 0 0 10px; border-radius: 999px; background: var(--line); cursor: pointer; transition: background .2s; }
.switch input[type="checkbox"]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.switch input[type="checkbox"]:checked { background: var(--accent); }
.switch input[type="checkbox"]:checked::after { transform: translateX(18px); }
.switch input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* vertical option list (reciter, voice) */
.seg.vlist { flex-direction: column; gap: 0; border-radius: 12px; overflow: hidden; background: var(--surface); }
.set-sec .seg.vlist button, .seg.vlist button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: 0; text-align: left; background: var(--surface); color: var(--ink); font-size: 15px; border-bottom: 1px solid var(--line); }
.seg.vlist button:last-child { border-bottom: 0; }
.set-sec .seg.vlist button[aria-pressed="true"], .seg.vlist button[aria-pressed="true"] { background: var(--surface); color: var(--accent); font-weight: 600; }
.seg.vlist button::after { content: ''; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line); }
.seg.vlist button[aria-pressed="true"]::after { content: '✓'; display: grid; place-items: center; font-size: 12px; color: #fff; background: var(--accent); box-shadow: none; }
/* preview of the text sizes */
.preview { margin-bottom: 10px; padding: 12px; border-radius: 12px; background: var(--surface); border: 1px dashed var(--line); }
.pv-ar { font-size: var(--ar-size); line-height: 2.05; text-align: center; margin-bottom: 4px; }
.pv-bn { font-size: var(--bn-size); line-height: 1.75; text-align: center; color: var(--ink-2); }
/* rows that open another sheet */
.set-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 0; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); color: var(--ink); }
.set-row > span:first-child { font-weight: 600; font-size: 15px; }
.set-row small { flex: 1; min-width: 0; text-align: right; font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.set-row .chev { color: var(--ink-3); }
.btn.danger { color: #b3261e; border-color: color-mix(in srgb, #b3261e 35%, var(--line)); }
:root[data-theme="dark"] .btn.danger { color: #f2b8b5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .btn.danger { color: #f2b8b5; } }
.set-about { margin: 18px 0 4px; text-align: center; font-size: 12.5px; color: var(--ink-3); }
#sheetBody .powered { margin: 4px 0 16px; }
:root[data-theme="dark"] :is(.seg button[aria-pressed="true"], .btn:not(.ghost)) { color: #0e1513; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) :is(.seg button[aria-pressed="true"], .btn:not(.ghost)) { color: #0e1513; } }
:root[data-theme="dark"] .set-sec .seg.vlist button[aria-pressed="true"] { color: var(--accent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .set-sec .seg.vlist button[aria-pressed="true"] { color: var(--accent); } }

/* ---- Allah's 99 names ---- */
.names-card { display: flex; align-items: center; gap: 12px; margin: 12px 0 0; padding: 12px 14px; border-radius: 20px; text-decoration: none; color: var(--ink); background: var(--surface); box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); }
.nc-ar { flex: none; min-width: 74px; padding: 8px 6px; border-radius: 14px; text-align: center; font-size: 22px; line-height: 1.5; color: var(--gold); background: color-mix(in srgb, var(--gold) 12%, var(--surface)); }
.nc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nc-txt small { font-size: 11.5px; color: var(--gold); font-weight: 600; }
.nc-txt b { font-size: 17px; }
.nc-txt span { font-size: 13.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nc-go { flex: none; font-size: 13px; font-weight: 600; color: var(--accent); }
.names-intro { margin: 14px 0 12px; padding: 16px; border-radius: 20px; color: var(--brand-ink); background: linear-gradient(150deg, #0f3d33, #17614f); text-align: center; }
.ni-ar { font-size: 26px; line-height: 1.8; color: #e9d9ac; }
.names-intro p { margin: 8px 0 0; font-size: 14px; line-height: 1.7; opacity: .92; }
.names-intro a { color: #e9d9ac; }
.names-intro small { display: block; font-size: 12px; opacity: .75; }
.names-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 640px) { .names-grid { grid-template-columns: repeat(3, 1fr); } }
.nm { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 12px 8px 10px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); text-align: center; min-width: 0; }
.nm[hidden] { display: none; }
.nm-no { position: absolute; top: 8px; left: 8px; min-width: 24px; height: 24px; padding: 0 4px; display: grid; place-items: center; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--gold); background: var(--surface-2); }
.nm-tag { position: absolute; top: 8px; right: 8px; padding: 1px 6px; border-radius: 6px; font-size: 10px; font-weight: 600; color: #fff; background: var(--gold); }
.nm-ar { font-size: 26px; line-height: 1.9; margin: 12px 0 2px; color: var(--accent); }
.nm b { font-size: 15px; }
.nm small { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.nm.today { box-shadow: inset 0 0 0 2px var(--gold), var(--shadow); }
.nm-detail { text-align: center; }
.nd-ar { font-size: 44px; line-height: 1.7; color: var(--accent); }
.nd-uc { font-size: 18px; font-weight: 600; }
.nd-uc span { font-size: 14px; font-weight: 400; color: var(--ink-3); font-family: system-ui, sans-serif; }
.nd-mean { display: inline-block; margin: 8px 0 4px; padding: 4px 14px; border-radius: 999px; font-weight: 600; color: var(--gold); background: var(--surface-2); }
.nd-desc { text-align: left; margin: 10px 0; }
.nd-lbl { text-align: left; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--gold); }
.nd-refs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nm-ref { padding: 4px 10px; border-radius: 999px; font-size: 13.5px; text-decoration: none; color: var(--accent); background: var(--surface-2); }
.nm-detail .small { text-align: left; }
.nd-nav { display: flex; gap: 8px; margin-top: 16px; }
.nd-nav .btn { margin: 0; }
.nd-nav .btn:disabled { opacity: .4; }

/* ---- home quick links ---- */
.quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.quick > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 84px; padding: 10px 4px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); text-align: center; min-width: 0; }
.quick span { font-size: 26px; line-height: 1.2; }
.quick b { font-size: 13.5px; line-height: 1.3; }
.quick small { font-size: 11.5px; color: var(--ink-3); }
.quick:not(.open) > .more { display: none; }
.quick-more { display: block; margin: 10px auto 0; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--accent); font-size: 14px; font-weight: 600; }
.rate-card { position: relative; display: flex; flex-direction: column; gap: 10px; margin-top: 12px; padding: 14px 40px 14px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.rate-card .rc-txt { display: flex; flex-direction: column; gap: 2px; }
.rate-card .rc-txt small { color: var(--ink-3); font-size: 13px; }
.rate-card .rc-btns { display: flex; gap: 8px; }
.rate-card .rc-btns .btn { flex: 1; margin: 0; padding: 9px; text-align: center; text-decoration: none; font-size: 14px; }
.rate-card .rc-x { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; color: var(--ink-3); }

/* ---- qibla ---- */
.qibla { margin: 14px 0 20px; padding: 16px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); text-align: center; transition: background .3s; }
.q-status { font-size: 16px; font-weight: 600; min-height: 1.6em; }
.q-wrap { position: relative; width: min(86vw, 320px); margin: 10px auto 4px; container-type: inline-size; --h: 0deg; }
/* sits at its compass angle on the dial (rotates with it) but the text itself stays upright */
.q-lbl { position: absolute; left: 50%; top: 50%; padding: 1px 8px; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1.6;
  color: var(--ink); background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); white-space: nowrap; pointer-events: none;
  transform: translate(-50%, -50%) rotate(calc(var(--a) - var(--h))) translateY(-31cqw) rotate(calc(var(--h) - var(--a)));
  transition: transform .12s linear; }
.q-lbl.n { color: #fff; background: #c0392b; }
.compass { width: 100%; height: auto; display: block; }
.compass .ring { fill: var(--surface-2); stroke: var(--line); stroke-width: 2; }
.compass .tk { stroke: var(--ink-3); stroke-width: 1.2; }
.compass .tk.big { stroke: var(--ink-2); stroke-width: 2.2; }
.compass .north { fill: #c0392b; }
.compass .qline { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 6; }
.compass .kaaba rect { fill: #1b1b1b; stroke: var(--gold); stroke-width: 1.5; }
.compass .kaaba .kb { fill: var(--gold); stroke: none; }
.compass .needle { fill: var(--accent); }
.compass .hub { fill: var(--accent); }
#qDial { transition: transform .12s linear; }
.q-hint { font-size: 14.5px; color: var(--ink-2); min-height: 1.5em; }
.qibla.on { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.qibla.on .q-status { color: var(--accent); }
.qibla.on .compass .needle { fill: var(--gold); }
#qPerm { margin-top: 10px; }
.q-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.q-facts > div { display: flex; flex-direction: column; padding: 10px 6px; border-radius: 14px; background: var(--surface-2); }
.q-facts small, .q-facts span { font-size: 12px; color: var(--ink-3); }
.q-facts b { font-size: 20px; color: var(--accent); }
.q-place { margin-top: 8px; }
.q-place .gps { font-size: 9.5px; font-weight: 700; padding: 1px 5px; border-radius: 6px; background: var(--surface-2); color: var(--ink-2); }
a.set-row { text-decoration: none; }
.q-tips { margin: 10px 0 0; padding-left: 20px; text-align: left; font-size: 13.5px; color: var(--ink-2); line-height: 1.7; }

/* ---- 99 names audio ---- */
.names-listen { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 12px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.names-listen .btn { width: auto; flex: none; padding: 10px 16px; }
.names-listen .switch { flex: 1; min-width: 0; font-size: 14.5px; }
.names-listen .switch > span { color: var(--ink); font-weight: 600; }
.names-listen .switch small { display: block; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.nm { cursor: pointer; }
.nm-say { position: absolute; right: 6px; bottom: 6px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: var(--accent); background: var(--surface-2); }
.nm-say svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nm-say svg path:first-child { fill: currentColor; }
.nm small { padding: 0 30px; }
.nm.playing { box-shadow: inset 0 0 0 2px var(--accent), var(--shadow); }
.nm.playing .nm-say { color: #fff; background: var(--accent); }
.nd-say { display: flex; gap: 8px; margin-top: 12px; }
.nd-say .btn { margin: 0; }
.nd-say .btn.on { background: var(--accent); color: #fff; }
:root[data-theme="dark"] :is(.nm.playing .nm-say, .nd-say .btn.on, .mq-act .btn.on) { color: #0e1513; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) :is(.nm.playing .nm-say, .nd-say .btn.on, .mq-act .btn.on) { color: #0e1513; } }


/* ---- duas ---- */
.dua-search { margin-top: 14px; }
.dua-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .dua-grid { grid-template-columns: repeat(3, 1fr); } }
.dua-grid[hidden], #duaList[hidden] { display: none; }
.dcat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 104px; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.dcat-i { font-size: 26px; line-height: 1.2; margin-bottom: 4px; }
.dcat b { font-size: 15px; line-height: 1.35; }
.dcat small { margin-top: auto; font-size: 12.5px; color: var(--ink-3); }
.dcat:active { transform: scale(.98); }
.dua-top { display: flex; align-items: center; gap: 10px; margin: 14px 0 6px; }
.dua-back { flex: none; padding: 7px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.dua-top-t { min-width: 0; font-size: 15px; font-weight: 600; color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dua-sec { scroll-margin-top: 80px; }
.dua-sec h3 { margin: 18px 2px 8px; font-size: 15px; color: var(--gold); }
.dua { margin-bottom: 10px; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.dua[hidden], .dua-sec[hidden] { display: none; }
.dua-head { display: flex; align-items: flex-start; gap: 8px; }
.dua-head b { flex: 1; font-size: 15.5px; line-height: 1.45; }
.dua-share { flex: none; width: 34px; height: 34px; margin: -4px -6px 0 0; color: var(--ink-3); }
.dua-ar { margin: 10px 0 8px; font-size: calc(var(--ar-size) * .78); line-height: 1.95; text-align: right; color: var(--ink); }
.dua-uc, .dua-bn { margin: 0 0 6px; font-size: calc(var(--bn-size) - 2px); line-height: 1.7; }
.dua-uc { color: var(--accent); }
.dua-uc .lbl, .dua-bn .lbl { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; font-size: 11.5px; font-weight: 600; color: var(--gold); background: var(--surface-2); vertical-align: 2px; }
.dua-bn { color: var(--ink-2); }
.dua-note { margin: 4px 0 6px; padding: 6px 10px; border-radius: 10px; font-size: 13px; line-height: 1.6; color: var(--ink-2); background: var(--surface-2); }
.dua-src { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-3); }
.dua-ar, .dua-uc, .dua-bn { white-space: pre-line; }
.dua-intro { margin: -2px 2px 10px; font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }


/* ---- tasbih ---- */
.tsb { margin: 14px 0 20px; padding: 14px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.tsb-mode { margin-bottom: 10px; }
.tsb-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; list-style: none; margin: 0 0 6px; padding: 0; }
.tsb-steps li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 8px 4px 6px; border-radius: 12px; background: var(--surface-2); cursor: pointer; line-height: 1.3; text-align: center; }
.tsb-steps b { font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.tsb-steps small { font-size: 11px; color: var(--ink-3); }
.tsb-steps li.now { background: var(--accent); }
.tsb-steps li.now :is(b, small) { color: #fff; }
.tsb-steps li.done { opacity: .55; }
.tsb-steps li.done small { color: var(--accent); font-weight: 600; }
.tsb-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 0 0 8px; }
.tsb-chips button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; padding: 7px 6px; border-radius: 12px; background: var(--surface-2); line-height: 1.3; }
.tsb-chips b { font-size: 13px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsb-chips .ar { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsb-chips [aria-pressed="true"] { background: var(--accent); }
.tsb-chips [aria-pressed="true"] :is(b, .ar) { color: #fff; }
.tsb-target { margin-bottom: 6px; }
.tsb-text { min-height: 120px; display: flex; flex-direction: column; justify-content: center; padding: 6px 4px; }
.tsb-ar { font-size: calc(var(--ar-size) * .9); line-height: 1.9; color: var(--ink); }
.tsb-uc { font-size: 15px; font-weight: 600; color: var(--accent); line-height: 1.5; }
.tsb-bn { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin-top: 2px; }
.tsb-btn { position: relative; display: grid; place-items: center; width: min(62vw, 230px); aspect-ratio: 1; margin: 10px auto 12px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #2a8a6e, #0f3d33 75%); box-shadow: 0 10px 30px rgba(15, 61, 51, .35), inset 0 2px 0 rgba(255, 255, 255, .15);
  color: #fff; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .08s; }
.tsb-btn:active { transform: scale(.96); }
.tsb-ring { position: absolute; inset: -8px; border-radius: 50%; --p: 0;
  background: conic-gradient(var(--gold) calc(var(--p) * 1%), color-mix(in srgb, var(--gold) 18%, transparent) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); }
.tsb-in { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.tsb-in b { font-size: 56px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tsb-in small { font-size: 16px; opacity: .8; min-height: 1.2em; }
.tsb.done .tsb-btn { background: radial-gradient(circle at 35% 30%, #d0ab5c, #8a6a26 75%); }
.tsb-tools { display: flex; justify-content: center; gap: 8px; }
.tsb-tools button { padding: 8px 14px; border-radius: 999px; background: var(--surface-2); font-size: 14px; font-weight: 600; color: var(--ink-2); }
.tsb-tools [aria-pressed="false"] { opacity: .5; }
.tsb-today { margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); }
.tsb-src { text-align: left; }
.dua-tsb { display: block; text-align: center; text-decoration: none; margin: 0 0 10px; }
:root[data-theme="dark"] :is(.tsb-steps li.now :is(b, small), .tsb-chips [aria-pressed="true"] :is(b, .ar)) { color: #0e1513; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) :is(.tsb-steps li.now :is(b, small), .tsb-chips [aria-pressed="true"] :is(b, .ar)) { color: #0e1513; } }

/* ---- progress & khatm ---- */
.pg-hero { display: flex; align-items: center; gap: 16px; margin: 14px 0 0; padding: 16px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); }
.pg-ring { flex: none; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, var(--surface) 78%, transparent 79%), conic-gradient(var(--accent) calc(var(--p) * 1%), var(--surface-2) 0); }
.pg-ring b { font-size: 20px; }
.pg-hero span { font-size: 14px; color: var(--ink-2); }
.pg-big { font-size: 28px; color: var(--accent); }
.pg-hero small { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
.pg-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
.pg-tiles > div { display: flex; flex-direction: column; align-items: center; padding: 10px 4px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.pg-tiles b { font-size: 22px; }
.pg-tiles small { font-size: 12px; color: var(--ink-3); }
.pg-card { margin-top: 12px; padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.pg-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.pg-h b { font-size: 15.5px; }
.pg-h small { font-size: 12.5px; color: var(--ink-3); }
.pg-chart { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; height: 150px; align-items: end; border-bottom: 1px solid var(--line); }
.pg-col { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; outline: none; }
.pg-col i { width: 60%; max-width: 28px; border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--accent) 55%, var(--surface)); }
.pg-col.today i { background: var(--accent); }
.pg-v { font-size: 11.5px; color: var(--ink-2); min-height: 1.2em; }
.pg-d { position: absolute; bottom: -20px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; }
.pg-col.today .pg-d { color: var(--ink); font-weight: 600; }
.pg-col:is(:hover, :focus-visible)::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); z-index: 2; padding: 4px 8px; border-radius: 8px; white-space: nowrap; font-size: 12px; color: var(--surface); background: var(--ink); }
.pg-col:first-child:is(:hover, :focus-visible)::after { left: 0; transform: none; }
.pg-col:last-child:is(:hover, :focus-visible)::after { left: auto; right: 0; transform: none; }
.pg-card:has(.pg-chart) { padding-bottom: 30px; }
.kh-days { margin: 4px 0; }
.kh-today { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); }
.kh-today span { font-size: 13px; color: var(--ink-2); }
.kh-today b { display: block; font-size: 20px; color: var(--accent); }
.kh-bars { display: grid; gap: 6px; margin-top: 10px; }
.kh-bars > div { display: grid; grid-template-columns: 38px 1fr 40px; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.kh-bars .pbar { margin: 0; height: 8px; }
.kh-bars b { text-align: right; font-size: 13px; }
.kh-time i { background: var(--gold); }
.kh-status { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--accent); }
.kh-status.behind { color: #b3261e; }
:root[data-theme="dark"] .kh-status.behind { color: #f2b8b5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .kh-status.behind { color: #f2b8b5; } }
.kh-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kh-actions .btn { flex: 1 1 auto; width: auto; margin: 0; text-align: center; text-decoration: none; }
.kh-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); font-size: 14px; }
.kh-line b { color: var(--accent); font-size: 14px; white-space: nowrap; }
.pg-link { margin: 14px 0 0; }

/* ---- hifz ---- */
.hz-range { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hz-range label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; font-weight: 600; }
.hz-range select { padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-weight: 400; }
.hifz .btn { margin-top: 12px; }
body.hifz-hide .ayah:not(.reveal) :is(.uc, .tr, .bangla, .alt-tr) { filter: blur(7px); user-select: none; cursor: pointer; }
body.hifz-hide .ayah:not(.reveal) .bangla .fn { pointer-events: none; }

/* ---- share as image ---- */
.share-prev { display: grid; place-items: center; min-height: 200px; margin-bottom: 10px; border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.share-prev img { display: block; width: 100%; max-width: 360px; height: auto; }
.share-sheet .btn { display: block; margin-top: 8px; text-align: center; text-decoration: none; }

.dua-play { flex: none; width: 34px; height: 34px; margin: -4px -2px 0 0; color: var(--accent); }
.dua-play.on { background: var(--accent); color: var(--surface); }
.dua-play svg { fill: currentColor; stroke: none; }

/* ---- learn ---- */
.learn-grid .dcat small { line-height: 1.4; }
.ln-intro { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); font-size: 14.5px; line-height: 1.7; }
.ln-steps { list-style: none; margin: 0; padding: 0; }
.ln-step { margin-bottom: 10px; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.ln-h { display: flex; align-items: center; gap: 10px; }
.ln-h b { flex: 1; font-size: 15.5px; line-height: 1.4; }
.ln-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--surface); font-size: 14px; font-weight: 600; }
.ln-x { flex: none; padding: 2px 8px; border-radius: 99px; background: var(--surface-2); font-size: 13px; font-weight: 600; color: var(--accent); }
.ln-p { margin: 8px 0 0; font-size: 14.5px; line-height: 1.75; white-space: pre-line; }
.ln-link { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; }
.ln-foot { margin: 14px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line); font-size: 13px; line-height: 1.6; color: var(--ink-2); }
#lnTsb { margin: 0 0 12px; }
.hz-count { margin: 0 0 8px; font-size: 14px; font-weight: 600; color: var(--accent); }
.hz-list { list-style: none; margin: 0; padding: 0; }
.hz-list li { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.hz-chk { display: grid; place-items: center; width: 48px; align-self: stretch; cursor: pointer; }
.hz-chk input { width: 20px; height: 20px; accent-color: var(--accent); }
.hz-list a { flex: 1; display: flex; flex-direction: column; padding: 10px 12px 10px 0; color: var(--ink); text-decoration: none; }
.hz-list b { font-size: 15px; }
.hz-list small { font-size: 12.5px; color: var(--ink-3); }
.hz-list li:has(input:checked) b { color: var(--accent); }
.tsb-ar.long { font-size: 22px; line-height: 2; max-height: 40vh; overflow-y: auto; }
.tsb-mode button { padding-inline: 4px; font-size: 13.5px; white-space: nowrap; }
.tsb-all { margin-top: 10px; border-radius: 14px; background: var(--surface-2); }
.tsb-all summary { padding: 10px 12px; font-size: 14px; cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.tsb-all summary::-webkit-details-marker { display: none; }
.tsb-all summary b { color: var(--accent); }
.tsb-all summary span { margin-left: auto; font-size: 13px; color: var(--ink-3); }
.tsb-all summary span::after { content: ' ▾'; }
.tsb-all[open] summary span::after { content: ' ▴'; }
.tsb-all .tsb-steps { margin: 0; padding: 0 8px 8px; }

/* ---- daily cards ---- */
.daily-card { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.dc-k { font-size: 12.5px; color: var(--ink-3); }
.dc-ar { font-size: 20px; line-height: 1.85; text-align: right; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dc-t { font-size: 14.5px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dc-src { font-size: 12.5px; color: var(--ink-3); }
.dc-src b { float: right; color: var(--accent); font-size: 13px; }
.daily-card.hadith { border-left: 3px solid var(--gold); }
.tc-dates a { color: inherit; text-decoration: none; }

/* ---- calendar ---- */
.cal-card { margin-top: 12px; padding: 12px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.cal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: center; }
.cal-head b { display: block; font-size: 17px; }
.cal-head small { font-size: 12px; color: var(--ink-3); }
.cal-head .icon-btn { font-size: 26px; line-height: 1; width: 40px; height: 40px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-top: 10px; }
.cal-wd { text-align: center; font-size: 11.5px; color: var(--ink-3); padding-bottom: 2px; }
.cal-d { display: flex; flex-direction: column; align-items: center; padding: 5px 0 4px; border-radius: 10px; background: var(--surface-2); min-width: 0; }
.cal-d b { font-size: 15px; line-height: 1.3; }
.cal-d small { font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.cal-d.fri b { color: var(--accent); }
.cal-d.bid { box-shadow: inset 0 -3px 0 var(--gold); }
.cal-d.ev { background: color-mix(in srgb, var(--gold) 30%, var(--surface)); }
.cal-d.today { background: var(--accent); }
.cal-d.today b, .cal-d.today small { color: var(--surface); }
.cal-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.cal-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 4px; border-radius: 3px; vertical-align: -1px; }
.lg-ev { background: color-mix(in srgb, var(--gold) 30%, var(--surface)); border: 1px solid var(--line); }
.lg-bid { background: var(--surface-2); box-shadow: inset 0 -3px 0 var(--gold); }
.lg-today { background: var(--accent); }
#calToday { margin-top: 10px; }
.cal-ev { margin-top: 10px; padding: 10px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); border-left: 3px solid var(--gold); }
.cal-ev b { font-size: 15px; } .cal-ev small { display: block; font-size: 12.5px; color: var(--ink-3); }
.cal-ev p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.65; }
.sec-h { margin: 18px 0 8px; font-size: 16px; }
.cal-up { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.cal-cd { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 58px; height: 52px; border-radius: 12px; background: var(--surface-2); }
.cal-cd b { font-size: 18px; line-height: 1.2; color: var(--accent); } .cal-cd small { font-size: 10.5px; color: var(--ink-3); }
.cal-up > div b { font-size: 15px; } .cal-up > div small { display: block; font-size: 12.5px; color: var(--ink-3); }

/* ---- zakat ---- */
.zk { display: grid; gap: 8px; }
.zk-f { display: grid; grid-template-columns: 1fr minmax(110px, 40%) auto; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.zk-f span { font-size: 14px; font-weight: 600; line-height: 1.4; }
.zk-f small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-3); }
.zk-f input { width: 100%; min-width: 0; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; text-align: right; }
.zk-f i { font-style: normal; font-size: 13px; color: var(--ink-3); min-width: 22px; }
.zk-f.minus { border-left: 3px solid #b3261e; }
.zk-res { margin-top: 12px; padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.zk-row { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.zk-due { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding: 12px; border-radius: 12px; background: var(--accent); color: var(--surface); }
.zk-due b { font-size: 22px; }
.zk-msg { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.zk-msg.ok { color: var(--accent); font-weight: 600; }

/* ---- baby names ---- */
.bn-tab { margin: 12px 0 8px; }
.bn-list { display: grid; gap: 8px; margin-top: 8px; }
.bn-row { padding: 10px 14px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.bn-row div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bn-row b { font-size: 17px; }
.bn-row .ar { font-size: 22px; color: var(--accent); }
.bn-row p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* ---- notes & highlights ---- */
.ayah.hl-y { background: color-mix(in srgb, #f5d547 22%, var(--surface)); }
.ayah.hl-g { background: color-mix(in srgb, #5cc48a 20%, var(--surface)); }
.ayah.hl-b { background: color-mix(in srgb, #5aa3e8 20%, var(--surface)); }
.ayah.hl-p { background: color-mix(in srgb, #ee7fb0 20%, var(--surface)); }
.note-row.hl-y { border-left: 4px solid #e0b818; } .note-row.hl-g { border-left: 4px solid #3aa86c; }
.note-row.hl-b { border-left: 4px solid #3b86d1; } .note-row.hl-p { border-left: 4px solid #d65b94; }
.ayah-note { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; line-height: 1.65; white-space: pre-line; cursor: pointer; }
.hl-pick { display: flex; gap: 10px; }
.hl-pick button { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--line); font-size: 16px; color: var(--ink-3); background: var(--surface); }
.hl-pick button[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; }
.hlc-y { background: #f5d547 !important; } .hlc-g { background: #5cc48a !important; } .hlc-b { background: #5aa3e8 !important; } .hlc-p { background: #ee7fb0 !important; }
.note-sheet textarea { width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; font-size: 15px; line-height: 1.6; resize: vertical; }
.note-sheet .btn { margin-top: 10px; }
.topic-ayah .dc-ar { -webkit-line-clamp: unset; display: block; }
.topic-ayah .dc-t { -webkit-line-clamp: unset; display: block; }

/* ---- word by word ---- */
.wbw { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.wbw .w { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; }
.wbw .w b { font-size: calc(var(--ar-size) * .8); font-weight: 400; line-height: 1.6; }
.wbw .w small { direction: ltr; font-size: 12.5px; line-height: 1.35; color: var(--ink-2); max-width: 9em; text-align: center; }
.wbw .w.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
body.no-ar .wbw { display: none; }
body.hifz-hide .ayah:not(.reveal) .wbw small { filter: blur(6px); }

/* ---- tajweed (quran.com colours; lighter in dark mode) ---- */
:root { --tj-grey: #9a9a9a; --tj-m1: #537fff; --tj-m2: #4050ff; --tj-m3: #2144c1; --tj-m4: #000ebc; --tj-q: #dd0008; --tj-gh: #ff7e1e; --tj-ik: #9400a8; --tj-iks: #d500b7; --tj-iq: #26bffd; --tj-ig: #169777; --tj-iwg: #169200; --tj-is: #58b800; }
:root[data-theme="dark"] { --tj-m1: #8fb0ff; --tj-m2: #8a95ff; --tj-m3: #7d9bff; --tj-m4: #6f7dff; --tj-q: #ff6b6f; --tj-ik: #d77ce6; --tj-iks: #f07ad9; --tj-ig: #3fcca5; --tj-iwg: #5fd15a; --tj-is: #8fe04a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) { --tj-m1: #8fb0ff; --tj-m2: #8a95ff; --tj-m3: #7d9bff; --tj-m4: #6f7dff; --tj-q: #ff6b6f; --tj-ik: #d77ce6; --tj-iks: #f07ad9; --tj-ig: #3fcca5; --tj-iwg: #5fd15a; --tj-is: #8fe04a; } }
.tj-ham_wasl, .tj-slnt, .tj-laam_shamsiyah, .tj-idgham_mutajanisayn, .tj-idgham_mutaqaribayn { color: var(--tj-grey); }
.tj-madda_normal { color: var(--tj-m1); } .tj-madda_permissible { color: var(--tj-m2); } .tj-madda_obligatory { color: var(--tj-m3); } .tj-madda_necessary { color: var(--tj-m4); }
.tj-qalaqah { color: var(--tj-q); } .tj-ghunnah { color: var(--tj-gh); } .tj-ikhafa { color: var(--tj-ik); } .tj-ikhafa_shafawi { color: var(--tj-iks); }
.tj-iqlab { color: var(--tj-iq); } .tj-idgham_ghunnah { color: var(--tj-ig); } .tj-idgham_wo_ghunnah { color: var(--tj-iwg); } .tj-idgham_shafawi { color: var(--tj-is); }
.tj-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tj-legend li { display: flex; align-items: center; gap: 12px; }
.tj-dot { flex: none; width: 36px; text-align: center; font-family: "Amiri Quran", serif; font-size: 28px; line-height: 1.4; }
.tj-legend b { display: block; font-size: 14px; } .tj-legend small { font-size: 12.5px; color: var(--ink-2); }

/* ---- prayer times ---- */
.pr-line { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; }
.pr-l-i { font-size: 28px; }
.pr-l-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pr-l-t small, .pr-l-n small { font-size: 12px; color: var(--ink-3); }
.pr-l-t b { font-size: 15.5px; }
.pr-l-n { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.pr-l-n b { font-size: 20px; color: var(--accent); line-height: 1.2; }
.pr-hero { margin-top: 12px; padding: 16px; border-radius: 20px; text-align: center; color: #fff; background: linear-gradient(135deg, #0f3d33, #17614f); box-shadow: var(--shadow); }
.pr-hero small { font-size: 13px; opacity: .9; }
.pr-forb { color: #ffd2cc; font-weight: 600; }
.pr-next { margin-top: 6px; font-size: 17px; }
.pr-next b { font-size: 22px; color: #e9d9ac; }
.pr-cd { margin-top: 4px; font-size: 40px; font-weight: 600; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.pr-cd small { display: block; font-size: 12px; font-weight: 400; opacity: .8; letter-spacing: 0; }
.pr-day { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; text-align: center; }
.pr-day b { display: block; font-size: 16px; }
.pr-day small { font-size: 12.5px; color: var(--ink-3); }
.pr-day .icon-btn { font-size: 26px; width: 40px; height: 40px; }
.pr-today { margin-top: 8px; }
.pr-si { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
@media (min-width: 560px) { .pr-si { grid-template-columns: repeat(4, 1fr); } }
.pr-si > div { display: flex; flex-direction: column; align-items: center; padding: 10px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.pr-si small { font-size: 12.5px; color: var(--ink-3); }
.pr-si b { font-size: 22px; color: var(--accent); }
.pr-list { list-style: none; margin: 10px 0 0; padding: 0; border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); }
.pr-row { display: grid; grid-template-columns: 34px 1fr auto 64px; align-items: center; gap: 6px; padding: 11px 14px; border-top: 1px solid var(--line); }
.pr-row:first-child { border-top: 0; }
.pr-i { font-size: 20px; }
.pr-n { font-size: 15px; }
.pr-n em { font-style: normal; font-size: 11.5px; padding: 1px 6px; border-radius: 99px; background: var(--accent); color: var(--surface); }
.pr-row b { font-size: 17px; text-align: right; }
.pr-row small { font-size: 12px; color: var(--ink-3); }
.pr-row.now { background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.pr-row.next b { color: var(--accent); }
.pr-sunrise, .pr-noon { color: var(--ink-2); }
.pr-box { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.pr-box h3 { margin: 0 0 6px; font-size: 15.5px; }
.pr-box ul { margin: 0 0 6px; padding-left: 18px; font-size: 14px; line-height: 1.8; }
.pr-box p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-2); }
.pr-note { border-left: 3px solid var(--gold); }
.pr-src { font-size: 12.5px !important; color: var(--ink-3) !important; }
#prMonth { margin-top: 12px; }
.pr-month { display: grid; gap: 6px; margin-top: 10px; }
.pr-mday { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.pr-mday.today { outline: 2px solid var(--accent); }
.pr-md { flex: none; width: 42px; display: flex; flex-direction: column; align-items: center; }
.pr-md b { font-size: 18px; }
.pr-md small { font-size: 11px; color: var(--ink-3); }
.pr-mday.fri .pr-md b { color: var(--accent); }
.pr-mday dl { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px 6px; margin: 0; }
.pr-mday dl div { min-width: 0; }
.pr-mday dt { font-size: 10.5px; color: var(--ink-3); }
.pr-mday dd { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; }
@media (min-width: 560px) { .pr-mday dl { grid-template-columns: repeat(8, 1fr); } }
.pr-place { margin-top: 12px; }
.pr-forb-box { margin-top: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); border-left: 3px solid #b3261e; }
.pr-forb-box h3 { margin: 0 0 8px; font-size: 15.5px; }
.pr-fb { display: grid; gap: 6px; }
.pr-fb > div { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); }
.pr-fb span { flex: 1; font-size: 14px; }
.pr-fb b { font-size: 15.5px; font-variant-numeric: tabular-nums; }
.pr-fb em { font-style: normal; font-size: 11.5px; padding: 1px 8px; border-radius: 99px; background: #b3261e; color: #fff; }
.pr-fb > div.now { background: color-mix(in srgb, #b3261e 14%, var(--surface)); }
.pr-sunset { color: var(--ink-2); }
/* ---- one footer for every page; room for the audio player when it is open ---- */
.site-foot { max-width: 760px; margin: 16px auto 0; padding: 14px 16px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); text-align: center; font-size: 13px; color: var(--ink-3); }
.site-foot a { color: var(--accent); text-decoration: none; }
body:has(#player:not([hidden])) .site-foot { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.sheet .powered { margin: 18px 0 8px; }
.sh-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14.5px; }
.sh-opts > span { font-weight: 600; }
.sh-opts label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.sh-opts input { width: 18px; height: 18px; accent-color: var(--accent); }
.sh-opts label.off { opacity: .45; cursor: default; }
.share-prev.busy img { opacity: .5; }
.share-prev img { max-height: 60vh; width: auto; max-width: 100%; }
/* ---- share sheet: design, size, range ---- */
.sh-look { display: grid; gap: 8px; margin: 10px 0 4px; }
.sh-themes { display: flex; gap: 10px; justify-content: center; }
.sh-themes button { width: 38px; height: 38px; border-radius: 50%; border: 3px solid var(--c); background: linear-gradient(135deg, var(--a), var(--b)); cursor: pointer; }
.sh-themes button[aria-pressed="true"] { outline: 3px solid var(--accent); outline-offset: 2px; }
.sh-size button { font-size: 13px; padding-inline: 4px; }
.sh-scale { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.sh-scale input { flex: 1; accent-color: var(--accent); }
.sh-note { margin: 0; }
.sh-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; font-size: 14.5px; }
.sh-range label { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.sh-range select { padding: 7px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }
.sh-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sh-presets button { padding: 6px 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.sh-presets button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--surface); }
.sh-split { display: flex; align-items: center; gap: 6px; font-size: 13.5px; }
.sh-split input { width: 18px; height: 18px; accent-color: var(--accent); }
.sh-hint { margin: 0 0 8px; }
.share-prev { cursor: zoom-in; }
.vid-sheet .share-prev { cursor: default; }
.vid-sheet .share-prev :is(video, canvas) { display: block; width: auto; max-width: 100%; max-height: 60vh; }
.share-prev.many { display: flex; gap: 8px; overflow-x: auto; justify-content: flex-start; padding: 6px; }
.share-prev.many img { max-height: 46vh; flex: none; }
.sh-full { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 12px; background: rgba(0,0,0,.88); cursor: zoom-out; }
.sh-full img { max-width: 100%; max-height: 100%; object-fit: contain; }
.nd-say { flex-wrap: wrap; }
/* ---- prayer notifications ---- */
.pr-notify .switch { margin: 0; }
.pn-opts { margin-top: 8px; }
.pn-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pn-chip { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-2); font-size: 13.5px; cursor: pointer; }
.pn-chip input { width: 16px; height: 16px; accent-color: var(--accent); }
.pn-chip:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
/* ---- salah tracker ---- */
.st-today { display: grid; grid-template-columns: auto repeat(5, 1fr); align-items: center; gap: 6px; margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.st-l { font-size: 13px; color: var(--ink-2); line-height: 1.3; } .st-l b { display: block; font-size: 16px; color: var(--accent); }
.st-w { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; cursor: pointer; }
.st-w i { font-style: normal; font-size: 17px; line-height: 1.2; color: var(--ink-3); }
.st-w small { font-size: 11.5px; }
.st-w.on { background: var(--accent); border-color: var(--accent); color: var(--surface); } .st-w.on i { color: var(--surface); }
.st-w.later { opacity: .55; }
.st-grid { display: grid; grid-template-columns: 52px repeat(7, 1fr); gap: 4px; align-items: center; }
.st-dh { text-align: center; font-size: 12px; color: var(--ink-3); line-height: 1.2; } .st-dh small { display: block; font-size: 11px; }
.st-dh.today { color: var(--accent); font-weight: 600; }
.st-wn { font-size: 13px; }
.st-c { height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--surface); font: inherit; font-size: 15px; cursor: pointer; }
.st-c.on { background: color-mix(in srgb, var(--accent) 75%, var(--surface)); border-color: transparent; }
.st-c.jm { background: var(--accent); }
.qz { display: grid; gap: 6px; }
.qz-r { display: grid; grid-template-columns: 1fr 40px 60px 40px; align-items: center; gap: 6px; }
.qz-r b { text-align: center; font-size: 18px; }
.qz-b { height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: 20px; cursor: pointer; }
/* ---- Ramadan ---- */
.rm-card { display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 18px; color: #fff; text-decoration: none; background: linear-gradient(135deg, #1d2b55, #3a2f6b); box-shadow: var(--shadow); }
.rm-moon { font-size: 30px; } .rm-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rm-t small { font-size: 12px; opacity: .85; } .rm-t b { font-size: 15.5px; }
.rm-cd { display: flex; flex-direction: column; align-items: flex-end; } .rm-cd small { font-size: 11.5px; opacity: .85; } .rm-cd b { font-size: 15px; color: #f3dc9a; }
.rm-table { display: grid; gap: 3px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.rm-th, .rm-tr { display: grid; grid-template-columns: 44px 1fr 72px 72px; align-items: center; gap: 4px; text-align: center; }
.rm-th { font-size: 12px; color: var(--ink-3); }
.rm-tr { padding: 3px 0; border-radius: 8px; } .rm-tr.today { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); font-weight: 600; } .rm-tr.odd { background: color-mix(in srgb, var(--gold) 18%, var(--surface)); }
.rm-ck { height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface-2); color: var(--surface); cursor: pointer; }
.rm-ck.on { background: var(--accent); border-color: var(--accent); } .rm-ck.tw.on { background: #5b4b9a; border-color: #5b4b9a; }
.rm-tips { margin: 10px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: var(--ink-2); }
/* ---- large text mode ---- */
body.big main, body.big .topbar, body.big .player, body.big .sheet, body.big .site-foot { zoom: 1.15; }
/* ---- home layout settings ---- */
.home-cfg { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.home-cfg li { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 12px; background: var(--surface-2); }
.home-cfg label { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 14px; }
.home-cfg input { width: 18px; height: 18px; accent-color: var(--accent); }
.home-cfg .icon-btn { width: 34px; height: 34px; font-size: 13px; }
.home-cfg .icon-btn:disabled { opacity: .3; }
.set-help { margin-bottom: 10px; }
/* ---- sleep timer ---- */
.pl-sleep { font-size: 18px; }
.pl-sleep.on { background: var(--brand-ink); color: var(--brand); border-radius: 50%; }
/* ---- manual ---- */
.help { display: grid; gap: 8px; margin-top: 10px; }
.help-sec { border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.help-sec summary { padding: 12px 14px; font-weight: 600; font-size: 15px; cursor: pointer; }
.help-b { padding: 0 14px 14px; white-space: pre-wrap; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
/* ---- 40 hadith ---- */
.hd-list { list-style: none; margin: 10px 0 0; padding: 0; }
.hd { margin-bottom: 10px; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.hd-by { margin: 6px 0 0; font-size: 13px; color: var(--ink-3); }
.hd-t { margin: 6px 0 0; font-size: 15px; line-height: 1.8; }
/* ---- prophets ---- */
.pp-list { display: grid; gap: 8px; }
.pp { border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.pp summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px; cursor: pointer; list-style: none; }
.pp summary::-webkit-details-marker { display: none; }
.pp-n { flex: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pp-n b { font-size: 16px; } .pp-n .ar { font-size: 24px; color: var(--accent); }
.pp-b { padding: 0 14px 14px; font-size: 14.5px; line-height: 1.8; }
.pp-b p { margin: 0 0 8px; } .pp-l { color: var(--accent); font-weight: 600; }
/* ---- alphabet ---- */
.ab-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; direction: rtl; }
@media (min-width: 560px) { .ab-grid { grid-template-columns: repeat(7, 1fr); } }
.ab { display: flex; flex-direction: column; align-items: center; padding: 8px 2px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; direction: ltr; }
.ab-l { display: block; height: 88px; font-size: 40px; line-height: 66px; color: var(--accent); }   /* room for the tails of ج ر س ص… */ .ab b { font-size: 13.5px; } .ab small { font-size: 10.5px; color: var(--ink-3); text-align: center; line-height: 1.3; }
.ab.on, .ab-h.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.ab-forms { display: grid; gap: 2px; padding: 8px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); font-size: 13px; }
.ab-fh, .ab-fr { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); align-items: center; text-align: center; gap: 4px; }
.ab-fh { color: var(--ink-3); font-size: 12px; } .ab-fr .ar { font-size: 26px; line-height: 2.1; } .ab-fr > span:first-child { text-align: left; }
.ab-hr { display: grid; gap: 8px; }
.ab-h { display: flex; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ab-h .ar { flex: none; min-width: 90px; text-align: center; font-size: 32px; line-height: 2.1; color: var(--accent); }
.ab-h b { display: block; font-size: 15px; } .ab-h small { display: block; font-size: 12.5px; color: var(--ink-2); } .ab-h em { font-style: normal; font-size: 13px; color: var(--accent); }
/* ---- quiz ---- */
.qz-top { display: flex; justify-content: space-between; margin-top: 14px; font-size: 14px; color: var(--ink-2); }
.qz-q { margin-top: 12px; padding: 16px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.qz-q h3 { margin: 0 0 12px; font-size: 18px; line-height: 1.5; }
.qz-opts { display: grid; gap: 8px; }
.qz-o { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.qz-o.right { background: #1f7a4d; border-color: #1f7a4d; color: #fff; } .qz-o.wrong { background: #b3261e; border-color: #b3261e; color: #fff; }
.qz-o:disabled { cursor: default; }
.qz-why { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.qz-q .btn { margin-top: 12px; }
.qz-end { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 20px; padding: 20px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.qz-end h3 { margin: 6px 0 0; }
.sq-in { margin-top: 8px; }
.bk-in { display: block; margin-top: 8px; text-align: center; cursor: pointer; }

/* adhkar status and nafl fasting */
.tsb-amal { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-2); text-align: center; }
.nf-hero p { margin: 4px 0 10px; font-size: 14px; }
.nf-d { border: 0; font: inherit; color: inherit; cursor: pointer; }
.nf-d:disabled { cursor: default; opacity: .5; }
.nf-d.today:disabled, .nf-d.sp:disabled, .nf-d.wk:disabled { opacity: 1; }
.nf-d.wk { box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--accent) 50%, transparent); }
.nf-d.sp { background: color-mix(in srgb, var(--gold) 50%, var(--surface)); }
.nf-d.no { opacity: 1; background: repeating-linear-gradient(135deg, var(--surface-2) 0 4px, color-mix(in srgb, #c0392b 20%, var(--surface-2)) 4px 6px); }
.nf-d.on { background: var(--accent); }
.nf-d.on b, .nf-d.on small { color: var(--surface); }
.nf-d.today:not(.on) { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--surface-2); }
.nf-d.today.sp:not(.on) { background: color-mix(in srgb, var(--gold) 50%, var(--surface)); }
.nf-d.today:not(.on) b, .nf-d.today:not(.on) small { color: var(--ink); }
.lg-sp { background: color-mix(in srgb, var(--gold) 50%, var(--surface)); }
.lg-wk { background: var(--surface-2); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--accent) 50%, transparent); }
.lg-on { background: var(--accent); }
.lg-no { background: repeating-linear-gradient(135deg, var(--surface-2) 0 3px, color-mix(in srgb, #c0392b 30%, var(--surface-2)) 3px 5px); }

/* extra translations */
.ayah .tr-by { display: block; margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--accent); }
.alt-tr { border-top: 1px dashed var(--line); padding-top: 8px; margin-bottom: 6px; }
.alt-tr .tr-by { margin-top: 8px; }
.alt-tr p { margin: 0; font-size: calc(var(--bn-size, 18px) * .92); line-height: 1.75; color: var(--ink-2); }
/* Dr. Zakaria's translation switched off: the chosen ones take its place */
body.no-zak .ayah > .bangla { display: none; }
body.no-zak .alt-tr { border-top: 1px solid var(--line); }
body.no-zak .alt-tr p { font-size: var(--bn-size, 18px); color: inherit; }
body.no-zak #ayahs.tr-fail .ayah > .bangla { display: block; }
/* English interface: Bangla translations only with "Bangla translation too" */
body.en:not(.en-bn) .ayah.has-en > .alt-tr { display: none; }
.tr-pick { display: grid; gap: 4px; }
.tr-pick .switch { padding: 6px 0; }

/* kids mode */
body.kids #searchBtn, body.kids #accountBtn, body.kids #settingsBtn { display: none; }
.kd-hero { margin-top: 12px; padding: 18px 16px; border-radius: 22px; text-align: center; color: #fff; background: linear-gradient(135deg, #0f9d58, #00897b 55%, #1e88e5); box-shadow: var(--shadow); }
.kd-hi { font-size: 20px; font-weight: 700; }
.kd-stars { margin-top: 6px; font-size: 18px; } .kd-stars b { font-size: 30px; }
.kd-hero small { display: block; margin-top: 6px; opacity: .9; }
.kd-mini { display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: 99px; background: rgba(255,255,255,.2); color: #fff; text-decoration: none; font-size: 22px; letter-spacing: 2px; }
.kd-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 14px; }
.kd-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 8px; border-radius: 22px; text-decoration: none; color: #fff; box-shadow: var(--shadow); text-align: center; }
.kd-tile span { font-size: 44px; line-height: 1.1; } .kd-tile b { font-size: 18px; } .kd-tile small { font-size: 12.5px; opacity: .92; }
.kd-tile:active { transform: scale(.97); }
.kd-tile.c1 { background: #43a047; } .kd-tile.c2 { background: #1e88e5; } .kd-tile.c3 { background: #fb8c00; }
.kd-tile.c4 { background: #8e24aa; } .kd-tile.c5 { background: #00897b; } .kd-tile.c6 { background: #e53935; }
.kd-parent { display: block; margin: 18px auto 0; padding: 8px 16px; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; }
.kd-list { display: grid; gap: 8px; margin-top: 12px; }
.kd-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.kd-row.done { background: color-mix(in srgb, var(--gold) 22%, var(--surface)); }
.kd-no { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-weight: 700; }
.kd-rt { flex: 1; min-width: 0; } .kd-rt b { display: block; font-size: 17px; } .kd-rt small { color: var(--ink-3); font-size: 12.5px; }
.kd-ar { font-size: 22px; } .kd-st { font-size: 24px; }
.kd-top { display: flex; justify-content: center; margin-top: 12px; }
.kd-ayah { position: relative; margin-top: 12px; padding: 14px 14px 12px 56px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); border: 2px solid transparent; }
.kd-ayah.now { border-color: var(--accent); }
.kd-play { position: absolute; left: 10px; top: 14px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--accent); color: var(--surface); font-size: 16px; cursor: pointer; }
.kd-ayah-ar, .kd-dua-ar { font-size: calc(var(--ar-size) + 4px); line-height: 2.1; text-align: right; direction: rtl; }
.kd-uc { margin: 6px 0 0; color: var(--accent); font-size: calc(var(--bn-size) + 1px); line-height: 1.7; }
.kd-bn { margin: 6px 0 0; font-size: var(--bn-size); line-height: 1.75; }
.kd-done { display: block; width: 100%; margin: 18px 0 6px; padding: 16px; border: 0; border-radius: 18px; background: #f4b400; color: #3a2a00; font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; box-shadow: var(--shadow); }
.kd-done.got { background: var(--surface-2); color: var(--ink-2); cursor: default; }
.kd-dua { margin-top: 12px; padding: 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); }
.kd-dua.done { background: color-mix(in srgb, var(--gold) 18%, var(--surface)); }
.kd-dua-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .kd-dua-h b { font-size: 17px; }
.kd-learn { margin-top: 10px; padding: 8px 16px; border: 0; border-radius: 99px; background: #f4b400; color: #3a2a00; font: inherit; font-weight: 700; cursor: pointer; }
.kd-dua.done .kd-learn { background: var(--surface-2); color: var(--ink-2); }
.kd-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.kd-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: 18px; background: var(--surface-2); text-align: center; opacity: .6; }
.kd-badge.got { background: var(--surface); box-shadow: var(--shadow); opacity: 1; }
.kd-badge span { font-size: 40px; } .kd-badge b { font-size: 15px; } .kd-badge small { font-size: 12px; color: var(--ink-3); }
.kd-pin { display: block; width: 100%; max-width: 220px; margin: 8px 0; font-size: 22px; letter-spacing: 8px; text-align: center; }
.kd-forgot { margin-top: 14px; } .kd-forgot summary { cursor: pointer; color: var(--accent); }
.kd-party { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; background: rgba(0,0,0,.35); }
.kd-party i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: kd-fall 2.6s ease-in forwards; }
@keyframes kd-fall { to { top: 105%; transform: rotate(540deg); } }
.kd-party-box { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 28px; border-radius: 24px; background: var(--surface); box-shadow: 0 10px 40px rgba(0,0,0,.3); text-align: center; animation: kd-pop .45s cubic-bezier(.2,1.6,.4,1); }
.kd-party-box span { font-size: 64px; line-height: 1; } .kd-party-box b { font-size: 20px; } .kd-party-box small { color: var(--ink-2); }
@keyframes kd-pop { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kd-party i { display: none; } .kd-party-box { animation: none; } }

/* nearby mosques */
.mq-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.mq-bar .btn { margin: 0; }
.mq-km-seg { margin-top: 10px; }
.mq-more { margin-top: 12px; }
.mq-note { margin-top: 10px; text-align: center; }
.mq { margin-top: 10px; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.mq-h { display: flex; justify-content: space-between; gap: 10px; }
.mq-h b { font-size: 16px; } .mq-h small { display: block; font-size: 12.5px; color: var(--ink-3); }
.mq-km { flex: none; font-size: 13px; color: var(--accent); font-weight: 600; }
.mq-times { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mq-times span { display: flex; flex-direction: column; align-items: center; min-width: 56px; padding: 4px 8px; border-radius: 10px; background: var(--surface-2); }
.mq-times small { font-size: 11px; color: var(--ink-3); } .mq-times b { font-size: 15px; }
.mq-by { margin: 6px 0 0; }
.mq-act { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mq-act .btn, .mq-bar .btn { display: inline-flex; align-items: center; justify-content: center; width: auto; flex: 1 1 auto; margin: 0; padding: 6px 12px; font-size: 13.5px; text-decoration: none; }
.mq-act .btn.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.mq-warn { color: #b45309; }
:root[data-theme="dark"] :is(.mq-warn, .acct-nudge) { color: #fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) :is(.mq-warn, .acct-nudge) { color: #fbbf24; } }
.mq-mine { margin-top: 10px; }
.mq-mine b { font-weight: 600; }
.mq-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 10px 0; }
.mq-form label { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--ink-2); }
.mq-form input { padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font: inherit; }
#mqAdd { margin-top: 14px; }

/* English interface */
.en-tr { border-top: 1px solid var(--line); padding-top: 8px; margin-bottom: 6px; }
.en-tr p { margin: 0; font-family: system-ui, sans-serif; font-size: calc(var(--bn-size) - 1px); line-height: 1.65; }
body.en:not(.en-bn) .ayah.has-en > .bangla, body.en:not(.en-bn) .ayah.has-en > .uc { display: none; }
body.en .ayah.has-en > .bangla { border-top: 0; }
body.hifz-hide .ayah:not(.reveal) .en-tr { filter: blur(7px); user-select: none; cursor: pointer; }
.lang-offer { display: flex; gap: 8px; margin-top: 12px; }
.lang-offer .btn { flex: 1; margin: 0; }

/* logo before the page name */
.topbar .brand { flex: none; display: block; width: 40px; height: 40px; margin-right: 8px; border-radius: 10px; overflow: hidden; }
.topbar .brand img { display: block; width: 100%; height: 100%; }

/* the full logo (settings, user guide, home footer) */
.logo-full { display: block; width: min(300px, 78%); height: auto; margin: 4px auto 14px; border-radius: 18px; box-shadow: var(--shadow); }
.logo-full.home { width: min(220px, 60%); margin: 22px auto 4px; }

/* Qaida */
.kd-tile.c7 { background: #6d4c41; }
.qd-list { display: grid; gap: 8px; margin-top: 12px; }
.qd-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.qd-row.done { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.qd-no { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-2); font-weight: 700; color: var(--accent); }
.qd-rt { flex: 1; min-width: 0; } .qd-rt b { display: block; font-size: 16px; } .qd-rt small { font-size: 12.5px; color: var(--ink-3); }
.qd-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.qd-group { padding: 8px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); text-align: center; }
.qd-group small { display: block; font-size: 12px; color: var(--ink-2); }
.qd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.qd-chip { min-width: 48px; height: 70px; padding: 0 8px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); color: var(--accent); font-size: 28px; line-height: 2; cursor: pointer; }
.qd-split { display: grid; gap: 6px; margin-top: 12px; }
.qd-split > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 14px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); font-size: 26px; line-height: 2; }
.qd-split > div > span:last-child { color: var(--accent); font-size: 24px; }
.qd-all { margin: 0; padding: 4px 12px; font-size: 13px; width: auto; }
.qd-table { display: grid; gap: 6px; margin-top: 8px; }
.qd-tr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.qd-cell, .qd-word { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 4px 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.qd-cell .ar { display: block; height: 2.7em; font-size: 32px; line-height: 2em; }   /* room under the letter for kasra */ .qd-cell small, .qd-word small { font-size: 13px; color: var(--ink-2); }
.qd-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; margin-top: 8px; }
.qd-words.sm { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.qd-word .ar { display: block; height: 2.7em; font-size: 26px; line-height: 2em; white-space: nowrap; } .qd-words.sm .qd-word .ar { font-size: 22px; }
.qd-on { border-color: var(--accent) !important; background: color-mix(in srgb, var(--accent) 14%, var(--surface)) !important; }
.qd-snip { display: block; width: 100%; margin-top: 8px; padding: 6px 12px 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--ink); font: inherit; text-align: center; cursor: pointer; }
.qd-snip .qd-ar { display: block; font-size: 28px; line-height: 2.5; padding-bottom: 6px; }
.qd-snip small { font-size: 12px; color: var(--ink-3); }
.qd-signs { display: grid; gap: 10px; }
.qd-signs > div { display: flex; align-items: center; gap: 14px; }
.qd-signs .ar { flex: none; min-width: 64px; text-align: center; font-size: 30px; line-height: 1.8; color: var(--accent); }
.qd-signs b { display: block; font-size: 15px; } .qd-signs small { font-size: 13px; color: var(--ink-2); }
.qd-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.qd-bar .btn { margin: 0; width: auto; }
.qd-ayah { margin-top: 12px; padding: 12px 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); border: 2px solid transparent; }
.qd-ayah.now { border-color: var(--accent); }
.qd-ah { display: flex; align-items: center; gap: 10px; }
.qd-ah .kd-play { position: static; flex: none; }
.qd-ayah-ar { font-size: calc(var(--ar-size) + 4px); line-height: 2.2; text-align: right; margin-top: 4px; }
.qd-nomean .qd-mean, .qd-nomean .qd-word small { display: none; }

/* prayer timetable: year switch and month buttons */
.pr-mpick { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 12px; }
.pr-mpick b { font-size: 18px; } .pr-mpick .icon-btn { font-size: 26px; width: 40px; height: 40px; }
.pr-mchips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 8px; }
@media (min-width: 560px) { .pr-mchips { grid-template-columns: repeat(6, 1fr); } }
.pr-mchips button { padding: 8px 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.pr-mchips button.now { border-color: var(--accent); }
.pr-mchips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--surface); }

/* pronunciation and makhraj in the Arabic lessons */
.ab em { margin-top: 4px; font-style: normal; font-size: 10.5px; line-height: 1.35; color: var(--accent); text-align: center; }
.ab-detail { position: sticky; top: 70px; z-index: 5; margin: 10px 0; padding: 12px 14px; border-radius: 18px; background: var(--surface); box-shadow: 0 6px 24px rgba(0,0,0,.18); border: 1px solid var(--accent); }
.abd-top { display: flex; align-items: center; gap: 14px; }
.abd-top > div { flex: 1; } .abd-top p { margin: 2px 0 0; font-size: 14px; }
.abd-top div .ar { font-size: 22px; color: var(--ink-2); }
.abd-l { flex: none; width: 70px; height: 84px; font-size: 52px; line-height: 70px; text-align: center; color: var(--accent); background: var(--surface-2); border-radius: 14px; }
.abd-mk { margin: 10px 0 6px; font-size: 14.5px; line-height: 1.6; }
.ab-detail .qd-tr { margin-top: 8px; }
.qd-chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: flex-start; height: auto; padding: 0 8px 6px; }
.qd-chip .ar { display: block; height: 58px; font-size: 28px; line-height: 50px; }
.qd-chip small { font-size: 11.5px; color: var(--ink-2); }
.qd-word em, .qd-cell em { font-style: normal; font-size: 13.5px; color: var(--accent); }
.qd-uc { display: block; margin: 4px 0 4px; font-size: 14.5px; line-height: 1.6; color: var(--accent); }
.qd-rl { display: flex; align-items: baseline; gap: 8px; margin: 8px 2px 2px; font-size: 13px; }
.qd-rl .ar { font-size: 22px; color: var(--accent); } .qd-rl small { color: var(--ink-3); }
.qd-split > div { align-items: flex-start; }
.qd-sw, .qd-sp { display: flex; flex-direction: column; } .qd-sp { align-items: flex-end; }
.qd-sw em { font-style: normal; font-size: 14px; color: var(--accent); line-height: 1.4; }
.qd-sp small { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }

.qd-split .qd-sr { display: flex; flex-direction: row; justify-content: space-between; text-align: left; cursor: pointer; }
.qd-signs .qd-signrow { display: block; }
.qd-signhead { display: flex; align-items: center; gap: 14px; }
.qd-signrow .qd-snip { margin-top: 6px; }
.qd-sign { color: #c0392b; font-size: 1.25em; }

.qd-testbtn { display: flex; margin-top: 12px; }
.qd-test .qd-cell:not(.shown) small, .qd-test .qd-word:not(.shown) em, .qd-test .qd-word:not(.shown) small, .qd-test .qd-sr:not(.shown) .qd-sp small { visibility: hidden; }

/* home: "my mosques" — a swipeable card per saved mosque with jamaat times */
.mq-home { margin-top: 12px; }
.mqh-track { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.mqh-track::-webkit-scrollbar { display: none; }
.mqh-card { flex: 0 0 100%; scroll-snap-align: center; box-sizing: border-box; padding: 12px 14px; border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); }
.mqh-track:has(.mqh-card:nth-child(2)) .mqh-card { flex-basis: 92%; }
.mqh-h { display: flex; align-items: center; gap: 10px; }
.mqh-i { font-size: 22px; }
.mqh-t { display: flex; flex-direction: column; min-width: 0; }
.mqh-t small { font-size: 12px; color: var(--ink-3); }
.mqh-t b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mqh-times { display: flex; gap: 6px; margin-top: 10px; }
.mqh-times span { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 5px 2px; border-radius: 10px; background: var(--surface-2); }
.mqh-times small { font-size: 11px; color: var(--ink-3); }
.mqh-times b { font-size: 14px; }
.mqh-times .past { opacity: .55; }
.mqh-times .next { background: var(--brand); color: var(--brand-ink); }
.mqh-times .next small { color: inherit; opacity: .85; }
.mqh-n { margin: 8px 0 0; }
.mqh-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.mqh-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.mqh-dots i.on { background: var(--brand); }

/* ---- chat ---- */
.ch-tile { position: relative; }
.ch-n { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: #c62828; color: #fff; font: 600 12px/18px inherit; font-style: normal; text-align: center; }
.ch-tile .ch-n { position: absolute; top: 6px; right: 10px; }
.ch-row { display: flex; gap: 8px; } .ch-row .btn { margin-top: 0; }
.ch-find { margin-top: 4px; }
.ch-item { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; margin-bottom: 8px; }
.ch-item.new { border-left: 3px solid var(--accent); }
.ch-av { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); font-weight: 600; font-size: 18px; }
.ch-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ch-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.ch-top small, .ch-top time { color: var(--ink-3); font-size: 12px; font-weight: 400; }
.ch-last { color: var(--ink-2); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-opt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ch-opt input { margin-top: 4px; width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.ch-opt small { display: block; color: var(--ink-3); font-size: 13px; margin-top: 2px; }
.ch-blk { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; } .ch-blk .btn { width: auto; margin: 0; padding: 8px 12px; }
.ch-thread { display: flex; flex-direction: column; min-height: 60vh; }
.ch-bar .btn { margin: 0 0 8px; padding: 8px; font-size: 13px; }
.ch-menu { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; } .ch-menu[hidden] { display: none; }
.ch-menu .btn { margin: 0; }
.ch-msgs { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 4px 0 12px; }
.ch-day { align-self: center; font-size: 12px; color: var(--ink-3); background: var(--surface-2); padding: 2px 10px; border-radius: 999px; margin: 8px 0 2px; }
.ch-msg { max-width: 82%; padding: 8px 12px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.ch-msg p { margin: 0; line-height: 1.5; }
.ch-msg time { display: block; text-align: right; font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.ch-msg.mine { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.ch-msg.mine time { color: rgba(255, 255, 255, .75); }
.ch-msg.theirs { align-self: flex-start; border-bottom-left-radius: 4px; }
.ch-form { position: sticky; bottom: 0; display: flex; gap: 8px; align-items: flex-end; padding: 8px 0; background: var(--bg); }
.ch-form textarea { flex: 1; resize: none; max-height: 120px; padding: 10px 14px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); outline: none; font: inherit; }
.ch-form textarea:focus { border-color: var(--accent); }
.ch-form .btn { width: 46px; height: 46px; padding: 0; border-radius: 50%; flex: none; }
#chRows { display: flex; flex-direction: column; gap: 6px; }
/* chat v2: avatars, presence, bubbles, typing, ticks, quick replies */
@keyframes ch-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ch-blink { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes ch-shim { to { background-position: -200% 0; } }
.ch-av { position: relative; background: linear-gradient(135deg, hsl(var(--h, 160) 45% 38%), hsl(calc(var(--h, 160) + 40) 50% 28%)); color: #fff; }
.ch-av.big { width: 46px; height: 46px; font-size: 20px; }
.ch-on { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; background: #2ecc71; border: 2px solid var(--surface); }
.ch-search { display: flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); border: 1px solid var(--line); margin-top: 4px; }
.ch-search:focus-within { border-color: var(--accent); }
.ch-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 13px 0; outline: none; font: inherit; color: inherit; }
.ch-row { gap: 8px; margin: 10px 0 4px; }
.ch-pill { flex: 1; padding: 9px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--accent); font-weight: 600; font-size: 14px; cursor: pointer; transition: transform .12s, background .12s; }
.ch-pill:active { transform: scale(.96); }
.ch-pill:disabled { opacity: .5; }
.ch-pill.danger { color: #b3261e; }
.ch-item { animation: ch-pop .25s ease both; transition: transform .12s; }
.ch-item:active { transform: scale(.985); }
.ch-item.new .ch-last { color: var(--ink); font-weight: 600; }
.ch-n { background: var(--accent); }
.ch-empty { text-align: center; color: var(--ink-3); padding: 28px 12px; }
.ch-empty span { display: block; font-size: 44px; margin-bottom: 6px; }
.ch-empty p { margin: 0; line-height: 1.7; }
.ch-hero { text-align: center; padding: 6px 0 2px; } .ch-hero span { font-size: 44px; } .ch-hero h2 { margin: 4px 0; font-size: 19px; }
.ch-skel div { height: 62px; border-radius: 14px; margin-bottom: 8px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: ch-shim 1.2s linear infinite; }
.ch-thread { padding-bottom: 4px; }
.ch-head { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin: 0 -2px 6px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.ch-hi { flex: 1; min-width: 0; display: flex; flex-direction: column; } .ch-hi b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-hi small { color: var(--ink-3); font-size: 12.5px; } .ch-hi small.on { color: #1e9e57; font-weight: 600; }
.ch-head .ch-pill { flex: none; padding: 6px 14px; font-size: 18px; line-height: 1; }
.ch-menu .ch-pill { text-align: left; }
.ch-msgs { gap: 0; padding: 6px 0 10px; }
#chRows { gap: 3px; }
.ch-msg { animation: ch-pop .18s ease both; position: relative; padding: 7px 12px 5px; border-radius: 18px; }
.ch-msg:not(.join) { margin-top: 6px; }
.ch-msg.mine { background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000)); border-bottom-right-radius: 5px; }
.ch-msg.theirs { border-bottom-left-radius: 5px; }
.ch-msg.join.mine { border-top-right-radius: 7px; } .ch-msg.join.theirs { border-top-left-radius: 7px; }
.ch-msg a { color: inherit; text-decoration: underline; }
.ch-meta { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-top: 1px; }
.ch-meta time { display: inline; margin: 0; font-size: 11px; color: var(--ink-3); }
.ch-msg.mine .ch-meta time { color: rgba(255, 255, 255, .75); }
.ch-t { font-size: 11px; color: rgba(255, 255, 255, .7); letter-spacing: -2px; } .ch-t.seen { color: #8fe3ff; }
.ch-fail { color: #ffd2cc; font-size: 13px; }
.ch-msg.failed { opacity: .85; outline: 1px dashed #b3261e; }
.ch-retry { display: block; margin-top: 4px; font-size: 12px; color: #fff; text-decoration: underline; }
.ch-day { margin: 12px 0 4px; }
.ch-typing { align-self: flex-start; display: flex; gap: 4px; padding: 11px 14px; margin-top: 6px; border-radius: 18px; border-bottom-left-radius: 5px; background: var(--surface); box-shadow: var(--shadow); }
.ch-typing[hidden] { display: none; }
.ch-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: ch-blink 1.1s infinite; }
.ch-typing i:nth-child(2) { animation-delay: .15s; } .ch-typing i:nth-child(3) { animation-delay: .3s; }
.ch-down { position: sticky; bottom: 118px; display: block; margin: 0 auto; padding: 7px 14px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 13px; box-shadow: var(--shadow); animation: ch-pop .2s; }
.ch-down[hidden] { display: none; }
.ch-quick { position: sticky; bottom: 58px; display: flex; gap: 6px; overflow-x: auto; padding: 6px 0; background: var(--bg); scrollbar-width: none; }
.ch-quick::-webkit-scrollbar { display: none; }
.ch-quick button { flex: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13.5px; }
.ch-quick button:active { background: var(--surface-2); }
.ch-form { bottom: 0; padding: 6px 0 8px; }
.ch-form textarea { border-radius: 22px; padding: 12px 16px; }
.ch-form .btn { transition: transform .12s; } .ch-form .btn:active { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) { .ch-item, .ch-msg, .ch-down { animation: none; } .ch-typing i, .ch-skel div { animation: none; } }
.ch-banner { display: block; width: 100%; margin: 10px 0 0; padding: 11px 14px; border-radius: 14px; text-align: left; background: color-mix(in srgb, var(--accent) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); color: var(--ink); font-size: 14px; line-height: 1.5; }
.ch-banner:disabled { opacity: .6; }
.ch-reqcard { margin-bottom: 10px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 8%, var(--surface)); padding-bottom: 8px; }
.ch-reqcard .ch-item { box-shadow: none; background: transparent; margin-bottom: 0; }
.ch-reqb { display: flex; gap: 8px; padding: 0 12px; } .ch-reqb .btn { margin: 0; flex: 2; padding: 10px; } .ch-reqb .ch-pill { flex: 1; }
.ch-req { margin: 8px 0; padding: 14px; border-radius: 16px; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); }
.ch-req p { margin: 0 0 10px; line-height: 1.6; } .ch-req .ch-reqb { padding: 0; }
.ch-note { margin: 10px 0; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.ch-link { display: inline; padding: 0; margin: 0 4px; background: none; border: 0; color: var(--accent); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.mq-search { display: flex; align-items: center; gap: 8px; padding: 0 14px; margin: 10px 0 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.mq-search:focus-within { border-color: var(--accent); }
.mq-search input { flex: 1; min-width: 0; border: 0; background: transparent; padding: 12px 0; outline: none; font: inherit; color: inherit; }
.mq-x { padding: 4px 6px; color: var(--ink-3); font-size: 15px; }
.mq-x[hidden], #mqKm[hidden] { display: none; }
.sh-desc { display: block; margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }
.sh-desc textarea { margin: 4px 0 0; resize: vertical; line-height: 1.5; }

/* ---------- Hafezi Quran (15-line pages) ---------- */
@font-face { font-family: 'KFGQPC Nastaleeq'; src: url('fonts/kfgqpc-nastaleeq.ttf') format('truetype'); font-display: block; }
.hz-wrap { max-width: 560px; margin: 0 auto; }
.hz-page { --hz-bg: #fffaf0; --hz-ink: #1b1b1b; --hz-frame: #b8925a;
  padding: 10px 12px; border: 3px double var(--hz-frame); border-radius: 6px; background: var(--hz-bg); color: var(--hz-ink);
  font-family: 'KFGQPC Nastaleeq', serif; line-height: 1; box-shadow: var(--shadow); user-select: none; touch-action: pan-y; }
.hz-line { display: flex; justify-content: space-between; align-items: center; height: 2.05em; white-space: nowrap; }
.hz-line.hz-c { justify-content: center; gap: .3em; }
.hz-measure .hz-line { justify-content: flex-start; gap: 4px; }
.hz-w, .hz-end { display: inline-block; }
.hz-end { color: var(--accent); cursor: pointer; padding: 0 1px; }
.hz-sh, .hz-bism { justify-content: center; }
.hz-sh span { display: block; width: 100%; text-align: center; padding: .1em 0 .25em; border: 1px solid var(--hz-frame); border-radius: 4px;
  background: color-mix(in srgb, var(--hz-frame) 16%, transparent); font-size: .92em; }
.hz-foot { text-align: center; margin: 6px 0 2px; font-size: 13px; color: var(--ink-3); }
.hz-nav { display: flex; gap: 8px; margin-top: 8px; }
.hz-nav .btn { flex: 1; margin: 0; padding: 10px 6px; font-size: 14px; }
.hz-nav .btn:disabled { opacity: .4; }
.hz-note { text-align: center; margin-top: 10px; }
.hz-go { display: flex; gap: 8px; }
.hz-go input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 15px; }
.hz-go .btn { width: auto; margin: 0; padding: 10px 18px; }
.hz-h { margin: 16px 0 8px; font-size: 15px; }
.hz-juz { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.hz-juz button { padding: 9px 0; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 14px; }
.hz-juz button.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.hz-surahs { display: flex; flex-direction: column; gap: 4px; }
.hz-surahs button { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; border-radius: 10px; background: var(--surface); color: var(--ink); text-align: left; font-size: 14px; }
.hz-surahs small { color: var(--ink-3); white-space: nowrap; }
:root[data-theme="dark"] .hz-page { --hz-bg: #1d1f1c; --hz-ink: #ece6d6; --hz-frame: #8a7146; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .hz-page { --hz-bg: #1d1f1c; --hz-ink: #ece6d6; --hz-frame: #8a7146; } }

/* ---------- Bukhari & Muslim ---------- */
.hb-books { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 6px; }
.hb-book { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.hb-book b { font-size: 15px; color: var(--accent); } .hb-book small { font-size: 12.5px; color: var(--ink-3); }
.hb-h { margin: 16px 0 4px; font-size: 16px; }
.hb-chs { display: grid; gap: 6px; margin-top: 10px; }
.hb-ch { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.hb-cn { flex: 1; min-width: 0; display: flex; flex-direction: column; } .hb-cn small { color: var(--ink-3); font-size: 12.5px; }
.hb-ch .chev { color: var(--accent); }
.hb .ln-h b { flex: 1; } .hb-i { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.hb-ar { margin-top: 8px; } .hb-ar summary { cursor: pointer; color: var(--accent); font-size: 13.5px; }
.hb-ar .ar { margin: 6px 0 0; font-size: calc(var(--ar-size, 26px) * .8); line-height: 2; }
#hbMore { margin-top: 8px; }
.hb.flash { box-shadow: 0 0 0 2px var(--accent); }

/* ---------- দোয়া কবুলের আমল ---------- */
.dk-nav { position: sticky; top: 64px; z-index: 5; display: flex; gap: 6px; overflow-x: auto; margin: 10px -4px 6px; padding: 6px 4px; background: var(--bg); scrollbar-width: none; }
.dk-nav a { flex: none; padding: 7px 12px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-size: 13.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.dk-sec { scroll-margin-top: 120px; }
.dk-sec h3 { margin: 18px 2px 8px; font-size: 15.5px; color: var(--gold); }
.dk-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.dk-i { padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.dk-i b { font-size: 15px; } .dk-i p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.75; }
.dk-amal { margin-bottom: 8px; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.dk-amal summary { cursor: pointer; font-weight: 600; font-size: 15px; }
.dk-steps { margin: 10px 0 0; padding-left: 20px; font-size: 14.5px; line-height: 1.75; }
.dk-to { margin-top: 8px; }
.dk-count { margin-top: 10px; padding: 14px; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.dk-c-top, .dk-c-bot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.dk-target button { padding: 5px 10px; font-size: 13px; }
.dk-tap { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 12px 0; padding: 22px 10px; border-radius: 20px; background: var(--accent); color: #fff; }
.dk-tap b { font-size: 44px; line-height: 1.1; } .dk-tap small { font-size: 15px; opacity: .9; } .dk-tap span { margin-top: 6px; font-size: 12.5px; opacity: .8; }
.dk-tap:active { transform: scale(.98); }
.dk-c-bot .btn { width: auto; margin: 0; padding: 7px 12px; font-size: 13px; }
.dk-caution { margin-top: 14px; }
.kh-line + .dua-grid { margin-top: 12px; }

/* ---------- bottom navigation ---------- */
.bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 28; display: flex; justify-content: center;
  padding: 4px 6px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
.bnav[hidden] { display: none; }
.bnav > * { flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 5px;
  text-decoration: none; color: var(--ink-3); font-size: 12px; line-height: 1.3; border-radius: 12px; -webkit-tap-highlight-color: transparent; }
.bnav svg { width: 24px; height: 24px; padding: 2px 14px; box-sizing: content-box; border-radius: 999px; transition: background .2s, color .2s; }
.bnav [aria-current] { color: var(--accent); font-weight: 600; }
.bnav [aria-current] svg { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.bnav > *:active svg { background: color-mix(in srgb, var(--accent) 22%, transparent); }
body.has-nav { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
body.has-nav .player { bottom: calc(70px + env(safe-area-inset-bottom)); }
body.has-nav .toast { bottom: calc(140px + env(safe-area-inset-bottom)); }
body.has-nav .site-foot { padding-bottom: 18px; }
body.has-nav:has(#player:not([hidden])) .site-foot { padding-bottom: 86px; }
body.big .bnav { zoom: 1.1; }
.more-grid { margin: 4px 0 8px; }
.more-grid > * { box-shadow: none; background: var(--surface-2); min-height: 78px; }

/* para list */
.jz-badge { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; vertical-align: 2px;
  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.jz-badge.done { background: var(--surface-2); color: var(--ink-3); }
.row.jz-now { outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: -2px; }

/* wider line spacing (Settings → লাইনের ফাঁক) */
body.wide-lines .ayah .arabic { line-height: 2.6; }
body.wide-lines .ayah .bangla { line-height: 2; }
body.wide-lines .ayah .uc { line-height: 1.95; }
body.wide-lines .pv-ar { line-height: 2.6; }
body.wide-lines .pv-bn { line-height: 2; }
.pr-mz { display: block; font-size: 12.5px; color: var(--ink-3); font-weight: 400; }

/* ---------- settings: a page of its own ---------- */
.set-page { padding-bottom: 24px; }
.set-page .set-nav { top: 64px; z-index: 6; margin: 0 -16px; padding: 10px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
.set-page .set-acct { margin-top: 14px; }
.set-page .set-sec { scroll-margin-top: 118px; background: var(--surface); box-shadow: var(--shadow); }
.set-page .set-sec .seg button { background: var(--surface-2); }
.set-page .set-sec .seg button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.set-page .set-sec .seg.vlist, .set-page .set-sec .seg.vlist button { background: var(--surface-2); }
.set-page .set-sec .seg.vlist button[aria-pressed="true"] { background: var(--surface-2); color: var(--accent); }
.set-page .logo-full { display: block; width: 60%; max-width: 280px; margin: 20px auto 4px; height: auto; border-radius: 14px; }
.set-page .pr-notify { padding: 12px 0; }
.set-page #toneTry { margin-top: 8px; }
/* a time adjustment for each waqt's notification */
.pn-off { margin-top: 10px; }
.pn-off .lbl { margin-bottom: 4px; }
.pn-off label { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; font-weight: 400; font-size: 14.5px; margin: 0; }
.pn-off select { padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 14px; }
/* durud / istighfar reminders */
.dzr-opts { margin-top: 8px; }
.dzr-opts .lbl { font-size: 13.5px; margin-bottom: 6px; }
/* 15 minutes to 8 hours: two even rows of five */
.seg.dzr-every { display: grid; grid-template-columns: repeat(5, 1fr); }
.seg.dzr-every button { padding: 8px 4px; font-size: 13.5px; }
.dzr-win { display: flex; gap: 10px; margin-top: 10px; }
.dzr-win label { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; font-weight: 600; margin: 0; }
.dzr-win input { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; }

/* "পড়া চলছে": one row of small cards, swiped sideways, when more than one surah is being read */
.cont { position: relative; }
.cont-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.cont-foot small { font-size: 12.5px; opacity: .85; }
.cont-list.row { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 4px; }
.cont-list.row::-webkit-scrollbar { display: none; }
.cont-list.row .cont { flex: none; width: 172px; scroll-snap-align: start; padding: 10px 12px 12px; }
.cont-list.row .cont .name { font-size: 15px; padding-right: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cont-list.row .cont .meta { font-size: 12.5px; }
.cont-list.row .cont .go { padding: 5px 10px; font-size: 12.5px; }
.cont-list.row .cont-x { position: absolute; top: 2px; right: 2px; }
/* settings: a row's choices in a sheet */
.set-sheet .seg + .small, .set-sheet .vlist + .small { margin-top: 8px; }
.set-sheet .setting:first-child { padding-top: 4px; }
.set-sheet #setDone { display: block; width: 100%; margin-top: 16px; }
.set-sheet #toneTry { margin-top: 10px; }
.set-sheet .pr-notify h3 { display: none; }
.set-page .set-row > span:first-child { white-space: nowrap; }

/* sahri & iftar full screen (#/sawm): no top or bottom bar, one large countdown */
body.sawm-on .topbar { display: none; }
body.sawm-on #view { padding: 0; max-width: none; }
.sawm { position: relative; min-height: 100dvh; min-height: calc(var(--eqh, 1dvh) * 100); display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 18px) 20px calc(env(safe-area-inset-bottom) + 22px); color: #fff; text-align: center;
  background: linear-gradient(180deg, #0b2a33, #12304a 55%, #1c4a55); }
.sawm[data-part="day"] { background: linear-gradient(180deg, #2d4466, #8a5a48 70%, #b0643e); }
.sawm-x { position: absolute; top: calc(env(safe-area-inset-top) + 10px); right: 12px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 18px; }
.sawm-top { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.sawm-top b { font-size: 22px; font-weight: 600; }
.sawm-top small { font-size: 14px; opacity: .85; }
.sawm-mid { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.sawm-mid small { font-size: 17px; opacity: .9; }
.sawm-mid b { font-size: clamp(54px, 17vw, 120px); font-weight: 600; letter-spacing: 2px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sawm-mid span { margin-top: 4px; padding: 6px 16px; border-radius: 999px; background: rgba(255,255,255,.14); color: #f2c46b; font-size: 16px; font-weight: 600; }
.sawm-times { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 420px; }
.sawm-times span { display: flex; flex-direction: column; padding: 12px 8px; border-radius: 16px; background: rgba(255,255,255,.1); }
.sawm-times small { font-size: 13.5px; opacity: .85; }
.sawm-times b { font-size: 28px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sawm-foot { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sawm-foot a { padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; text-decoration: none; font-size: 14px; }
.fs-full { display: block; margin-top: 8px; padding: 6px 0 0; border-top: 1px solid rgba(255,255,255,.15); text-align: center; font-size: 13px; font-weight: 600; opacity: .95; }
/* place picker: search the world */
.pl-now { display: flex; gap: 10px; align-items: center; padding: 10px 12px; margin: 0 0 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.pl-now > span { font-size: 20px; }
.pl-now small { display: block; font-size: 12px; opacity: .7; }
.pl-now b { font-size: 15px; }
.pl-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pl-row > span { display: flex; flex-direction: column; min-width: 0; }
.pl-row small { font-size: 12.5px; opacity: .65; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-row em { font-style: normal; color: var(--gold); font-weight: 700; }
.pl-wait { padding: 10px 2px; }
/* the place picker's little map */
.pl-map { position: relative; height: 190px; margin: 0 0 10px; border-radius: 14px; overflow: hidden; background: #dfe6e2; border: 1px solid var(--line); }
.pl-map iframe { display: block; width: 100%; height: 100%; border: 0; }