/* Al-Burhaniya — page-level styles */

/* ---------- Dashboard hero ---------- */
.dash-hero { position: relative; overflow: hidden; }
.dash-hero .hero-grid {
  display: flex; justify-content: space-between; gap: 1.25rem; flex-wrap: wrap;
  align-items: flex-start;
}
.dash-hero .greeting { font-size: clamp(1.3rem, 2.6vw, 1.8rem); margin: 0 0 .25rem; }
.dash-hero .meta-line { display: flex; flex-wrap: wrap; gap: .5rem .9rem; font-size: var(--fs-sm); color: #d9e9e0; align-items: center; }
.dash-hero .meta-line .mi { display: inline-flex; gap: .35rem; align-items: center; }
.dash-hero .streak-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  background: #ffffff1a; border: 1px solid #ffffff30;
  border-radius: var(--r-full); padding: .35rem .8rem;
  font-weight: 700; font-size: var(--fs-sm); color: var(--light-gold);
  margin-block-start: .7rem;
}
.hero-clock {
  background: #ffffff14; border: 1px solid #ffffff26; border-radius: var(--r-lg);
  padding: .8rem 1.1rem; text-align: center; min-width: 170px;
}
.hero-clock .t { font-size: 1.7rem; font-weight: 750; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.hero-clock .l { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: #cfe3d7; }

/* Next prayer strip */
.prayer-strip {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .4rem; margin-block-start: 1rem;
}
.prayer-strip .p-cell {
  background: #ffffff12; border: 1px solid #ffffff1e; border-radius: var(--r-md);
  text-align: center; padding: .5rem .25rem;
}
.prayer-strip .p-cell.current { background: var(--grad-gold); color: #241d05; border-color: transparent; }
.prayer-strip .p-cell .pn { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; opacity: .85; }
.prayer-strip .p-cell .pt { font-weight: 750; font-size: .98rem; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .prayer-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Today progress ring cluster */
.today-cluster { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
.today-cluster .tc-stats { display: flex; flex-direction: column; gap: .3rem; }
.today-cluster .tc-line { font-size: var(--fs-sm); color: var(--text-2); display: flex; gap: .4rem; align-items: center; }
.today-cluster .tc-big { font-size: var(--fs-xl); font-weight: 750; }

/* ---------- Azkar cards ---------- */
.azkar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1rem; }
.azkar-card { display: flex; flex-direction: column; gap: .7rem; position: relative; overflow: hidden; }
.azkar-card.done { border-color: color-mix(in srgb, var(--gold) 65%, var(--border)); }
.azkar-card .az-ar {
  font-family: var(--font-quran); direction: rtl; text-align: right;
  font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 2;
  background: var(--card-2); border-radius: var(--r-md);
  padding: .75rem .9rem; border: 1px solid var(--border);
}
.azkar-card .az-ur { font-family: var(--font-urdu); direction: rtl; text-align: right; font-size: .92rem; color: var(--text-2); line-height: 2; }
.azkar-card .az-title { font-weight: 700; font-size: 1.06rem; line-height: 1.55; margin-block: .3rem .45rem; }
html[lang='ur'] .azkar-card .az-title { font-size: 1.16rem; line-height: 2; }
.azkar-card .az-meta { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.azkar-card .az-count { font-weight: 750; font-variant-numeric: tabular-nums; }
.azkar-card .tick {
  position: absolute; top: .7rem; inset-inline-end: .7rem;
  width: 30px; height: 30px; border-radius: 50%; background: var(--success);
  color: #fff; display: grid; place-items: center;
  transform: scale(0); transition: transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
.azkar-card.done .tick {
  transform: scale(1);
  background: var(--gold); color: #2b2205;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold) 25%, transparent);
}
.tap-zone {
  border: 1.5px dashed var(--border-strong); border-radius: var(--r-md);
  padding: .7rem; text-align: center; cursor: pointer; font-weight: 650;
  color: var(--accent); background: var(--bg-elevated);
  transition: background var(--speed), border-color var(--speed);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.tap-zone:active { background: var(--accent-soft); border-color: var(--accent); }
.tap-zone.completed {
  background: #f7efcf; border: 1.5px solid var(--gold); color: #7a5f0e;
  font-weight: 750; pointer-events: none; cursor: default;
}
[data-theme='dark'] .tap-zone.completed { background: #3a3212; color: var(--light-gold); border-color: #544716; }

/* Read flow: reader button above Mark-as-read; gate hint while locked */
.tap-zone.read-zone { display: flex; align-items: center; justify-content: center; gap: .5rem; background: var(--card-2); }
.tap-zone.read-zone:active { background: var(--accent-soft); }
.tap-zone[disabled] { opacity: .55; cursor: not-allowed; }
.az-gate { text-align: center; margin-block-start: .35rem; }
/* Image reader: bundled aorad page scans (tap opens full size, pinch-zoom on phone) */
.reader-img { display: flex; flex-direction: column; gap: .65rem; }
.reader-img .ri-count {
  font-size: var(--fs-sm); font-weight: 750; color: var(--text-2);
  text-align: center; font-variant-numeric: tabular-nums;
}
.reader-img .ri-zoom {
  display: block; border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; background: var(--card-2); cursor: zoom-in;
}
.reader-img .ri-zoom img { width: 100%; height: auto; display: block; }
.reader-img .ri-nav { display: flex; justify-content: center; gap: .6rem; }
.reader-img .ri-btn { min-height: 44px; }

/* ---------- Prayer times page ---------- */
.prayer-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; }
@media (max-width: 900px) { .prayer-layout { grid-template-columns: 1fr; } }
.prayer-list { display: flex; flex-direction: column; }
.prayer-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem .9rem; border-radius: var(--r-md); gap: .75rem;
  border: 1px solid transparent;
}
.prayer-row + .prayer-row { margin-block-start: .3rem; }
.prayer-row .pr-name { display: flex; align-items: center; gap: .7rem; font-weight: 650; }
.prayer-row .pr-icon {
  width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center;
  background: var(--card-2); color: var(--accent);
}
.prayer-row .pr-time { font-variant-numeric: tabular-nums; font-weight: 750; font-size: var(--fs-md); }
.prayer-row.current {
  background: var(--grad-emerald-gold); color: #f2f7f4; border-color: transparent;
}
.prayer-row.current .pr-icon { background: #ffffff22; color: var(--light-gold); }
.prayer-row.sunrise-row { color: var(--text-2); font-size: var(--fs-sm); }
.countdown-box { text-align: center; padding: 1rem; }
.countdown-box .cd-val {
  font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: .03em;
  background: var(--grad-emerald-gold); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
[data-theme='dark'] .countdown-box .cd-val { background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; }
.countdown-box .cd-label { color: var(--text-3); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .1em; }
.countdown-box .cd-prayer { font-size: var(--fs-lg); font-weight: 700; margin-block-start: .3rem; }

/* ---------- Qibla ---------- */
.qibla-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .qibla-wrap { grid-template-columns: 1fr; } }
.compass {
  position: relative; width: min(320px, 86vw); aspect-ratio: 1;
  margin: 0 auto; border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #14523b, #0a2e21 75%);
  box-shadow: inset 0 0 0 10px #0c4a3433, inset 0 0 0 12px #cdae3a55, var(--shadow-2);
  border: 3px solid var(--gold);
}
.compass .rose { position: absolute; inset: 0; transition: transform .25s ease-out; }
.compass .dir {
  position: absolute; font-weight: 800; color: #e9f3ee; font-size: .8rem;
  text-shadow: 0 1px 4px #0008;
}
.compass .dir.n { top: 8px; left: 50%; transform: translateX(-50%); color: var(--light-gold); }
.compass .dir.s { bottom: 8px; left: 50%; transform: translateX(-50%); }
.compass .dir.e { right: 10px; top: 50%; transform: translateY(-50%); }
.compass .dir.w { left: 10px; top: 50%; transform: translateY(-50%); }
.compass .needle {
  position: absolute; inset: 0; display: grid; place-items: center;
  transition: transform .3s ease-out;
}
.compass .kaiba-pin {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 34px; height: 34px; border-radius: 10px; background: #111; color: var(--gold);
  display: grid; place-items: center; font-size: .55rem; font-weight: 800;
  border: 2px solid var(--gold); z-index: 2;
}
.compass .q-arrow {
  width: 0; height: 0; border-inline: 14px solid transparent;
  border-block-end: 64px solid var(--light-gold);
  filter: drop-shadow(0 4px 8px #0007);
}
.compass .q-arrow::after {
  content: ''; display: block; width: 0; height: 0;
  border-inline: 8px solid transparent; border-block-end: 34px solid #14523b;
  transform: translate(-8px, -34px) rotate(180deg);
}
.compass .center-dot {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 18px; height: 18px; background: var(--gold); border-radius: 50%;
  border: 3px solid #0a2e21; z-index: 3;
}

/* ---------- Calendar ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem; }
.cal-grid .dow {
  text-align: center; font-size: .68rem; font-weight: 750; text-transform: uppercase;
  color: var(--text-3); padding: .35rem 0; letter-spacing: .05em;
}
.cal-cell {
  min-height: 74px; border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: .35rem .4rem; background: var(--card); position: relative;
  display: flex; flex-direction: column; gap: .1rem;
}
.cal-cell .g { font-weight: 700; font-size: .85rem; }
.cal-cell .h { font-size: .66rem; color: var(--text-3); }
.cal-cell.out { opacity: .4; }
.cal-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.cal-cell.event::after {
  content: ''; position: absolute; bottom: 5px; inset-inline-end: 5px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}
.cal-cell .ev-label { font-size: .6rem; color: var(--gold); font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .cal-cell { min-height: 54px; padding: .2rem .25rem; }
  .cal-cell .h { display: none; }
  .cal-cell .ev-label { display: none; }
}

/* ---------- Duas ---------- */
.dua-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1rem; }
.dua-card .d-ar {
  font-family: var(--font-arabic); direction: rtl; text-align: right;
  font-size: clamp(1.2rem, 2.5vw, 1.45rem); line-height: 2.1; color: var(--text);
}
.dua-card .d-tr { color: var(--text-2); font-size: var(--fs-sm); border-inline-start: 3px solid var(--gold); padding-inline-start: .7rem; }
.dua-card .d-ctx { display: inline-flex; }

/* ---------- Tasbeeh (redesigned cards) ---------- */
.tasbeeh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 1.1rem; }
.tas-card {
  text-align: center; position: relative; overflow: hidden;
  padding: 1rem 1.05rem 1.05rem;
  background:
    radial-gradient(150px 90px at 50% -8%, color-mix(in srgb, var(--gold) 15%, transparent), transparent 72%),
    var(--card);
  border: 1px solid color-mix(in srgb, var(--gold) 32%, var(--border));
  transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
}
.tas-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.tas-card .t-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-block-end: .5rem;
}
.tas-card .hept-badge {
  width: 36px; height: 36px;
  display: grid; place-items: center; font-weight: 800; font-size: .92rem;
  background: var(--grad-emerald-gold); color: var(--light-gold);
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
.tas-card .t-pct {
  font-size: .72rem; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  padding: .24rem .6rem; border-radius: var(--r-full);
  background: var(--accent-soft); color: var(--accent);
}
.tas-card.lap-done .t-pct { background: #f7efcf; color: #8a6d12; }
[data-theme='dark'] .tas-card.lap-done .t-pct { background: #3a3212; color: var(--light-gold); }
.tas-card .t-ar {
  font-family: var(--font-arabic); font-size: 1.5rem; line-height: 1.7;
  direction: rtl; margin-block-end: .1rem;
}
.tas-card .t-ur {
  font-family: var(--font-urdu); font-size: .88rem; color: var(--text-3);
  line-height: 2; /* Nastaliq — never let lines merge, even in an English UI */
  direction: rtl; margin-block-end: .5rem;
}
.tas-card .t-dial { display: grid; place-items: center; margin-block: .15rem .65rem; }
.tas-card .t-ringin { display: grid; place-items: center; line-height: 1.05; }
.tas-card .t-ringin .t-count {
  font-size: 2.15rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text);
}
.tas-card .t-ringin i {
  font-style: normal; font-size: .78rem; font-weight: 700; color: var(--text-3);
  font-variant-numeric: tabular-nums; margin-block-start: .15rem;
}
.tas-card .t-target { color: var(--text-3); font-size: var(--fs-sm); margin-block: .55rem .4rem; }
.tas-card .tap-big {
  width: 100%; margin-block-start: .85rem; padding: .9rem 1rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-size: .98rem; font-weight: 750; color: #fff;
  background: var(--grad-emerald);
  border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
  border-radius: var(--r-full); cursor: pointer; user-select: none;
  -webkit-tap-highlight-color: transparent;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--emerald) 28%, transparent);
  transition: transform .12s, filter var(--speed), box-shadow var(--speed);
}
.tas-card .tap-big:hover { filter: brightness(1.07); }
.tas-card .tap-big:active { transform: scale(.97); }
.tas-card .tap-big:disabled {
  background: var(--grad-gold); color: #4a3a06; cursor: default; box-shadow: none;
}
.tas-card .tap-big .tb-plus {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 1.05rem; font-weight: 800; line-height: 1;
  background: #ffffff2e;
}
.tas-card .tap-big:disabled .tb-plus { background: #00000018; }
.tas-card .tap-big .tb-label {
  min-width: 0; max-width: calc(100% - 42px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tas-card .t-actions {
  display: flex; gap: .45rem; justify-content: center; margin-block-start: .8rem;
  padding-block-start: .7rem; border-block-start: 1px dashed var(--border);
}
.tas-card.lap-done { border-color: color-mix(in srgb, var(--gold) 75%, transparent); }
.tas-card.lap-done .hept-badge { animation: badgePop .55s ease; }

/* ---------- Phone: tasbeeh = two cute compact cards per row ---------- */
@media (max-width: 700px) {
  .tasbeeh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .tas-card { padding: .7rem .62rem .72rem; }
  .tas-card .t-top { margin-block-end: .35rem; }
  .tas-card .hept-badge { width: 28px; height: 28px; font-size: .8rem; }
  .tas-card .t-pct { font-size: .62rem; padding: .18rem .5rem; }
  .tas-card .t-ar { font-size: 1.12rem; line-height: 1.6; }
  .tas-card .t-ur { font-size: .76rem; margin-block-end: .3rem; }
  .tas-card .t-dial { margin-block: .1rem .45rem; }
  .tas-card .t-dial .ring { width: 92px !important; height: 92px !important; }
  .tas-card .t-dial svg { width: 92px; height: 92px; }
  .tas-card .t-ringin .t-count { font-size: 1.45rem; }
  .tas-card .t-ringin i { font-size: .65rem; margin-block-start: .05rem; }
  .tas-card .t-target { font-size: .66rem; margin-block: .42rem .3rem; }
  .tas-card .tap-big { margin-block-start: .6rem; padding: .68rem .55rem; font-size: .85rem; gap: .4rem; }
  .tas-card .tap-big .tb-plus { width: 21px; height: 21px; font-size: .92rem; }
  .tas-card .tap-big .tb-label { max-width: calc(100% - 34px); }
  .tas-card .t-actions { margin-block-start: .55rem; padding-block-start: .5rem; gap: .35rem; }
  .tas-card .t-actions .btn { padding: .36rem .55rem; font-size: .76rem; min-height: 30px; }

  /* KPI tiles: tighter, still readable */
  .report-kpis { gap: .55rem; }
  .kpi { padding: .7rem .75rem; }
  .kpi .k-val { font-size: 1.22rem; }
}

/* Floating widget */
.tas-widget {
  position: fixed; z-index: 150; width: 250px;
  background: var(--dark-card); color: #e9f0ec;
  border: 1px solid #cdae3a55; border-radius: var(--r-lg);
  box-shadow: var(--shadow-2); overflow: hidden;
  inset-inline-end: 18px; inset-block-end: calc(var(--bottomnav-h) + 18px);
}
.tas-widget .w-head {
  display: flex; align-items: center; gap: .45rem;
  padding: .45rem .6rem; background: var(--grad-emerald);
  cursor: grab; user-select: none;
}
.tas-widget .w-head:active { cursor: grabbing; }
.tas-widget .w-head img { width: 22px; height: 22px; }
.tas-widget .w-head .w-title { font-size: .75rem; font-weight: 700; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tas-widget .w-btn {
  width: 26px; height: 26px; border: 0; border-radius: 7px; background: #ffffff1c;
  color: #e9f0ec; display: grid; place-items: center; cursor: pointer; padding: 0;
}
.tas-widget .w-btn:hover { background: #ffffff30; }
.tas-widget .w-body { padding: .7rem; text-align: center; }
.tas-widget .w-ar { font-family: var(--font-arabic); font-size: 1.05rem; direction: rtl; color: var(--light-gold); }
.tas-widget .w-count { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tas-widget .w-tap {
  width: 100%; margin-block-start: .5rem; padding: .75rem;
  border-radius: var(--r-md); border: 1px solid #cdae3a66;
  background: #0c4a34; color: var(--light-gold);
  font-weight: 750; font-size: .95rem; cursor: pointer;
}
.tas-widget .w-tap:active { transform: scale(.98); }
.tas-widget .w-gauge { height: 5px; background: #ffffff18; border-radius: 99px; overflow: hidden; margin-block-start: .55rem; }
.tas-widget .w-gauge span { display: block; height: 100%; background: var(--grad-gold); transition: width var(--speed); }
.tas-widget .w-pos {
  font-size: .6rem; color: #ffffff77; text-align: center; padding: .25rem; background: #00000030;
}
.tas-widget .w-menu { padding: .4rem; display: none; flex-direction: column; gap: .2rem; }
.tas-widget .w-menu.open { display: flex; }
.tas-widget .w-menu button {
  text-align: start; background: none; border: 0; color: #dfeae4;
  padding: .45rem .55rem; border-radius: 7px; cursor: pointer; font-size: .8rem;
  display: flex; gap: .5rem; align-items: center;
}
.tas-widget .w-menu button:hover { background: #ffffff14; }
.tas-widget.minimized .w-body, .tas-widget.minimized .w-pos { display: none; }
.tas-widget.light { background: var(--card); color: var(--text); border-color: var(--border); }
.tas-widget.light .w-tap { background: var(--accent); color: #fff; border-color: var(--accent); }
.tas-widget.light .w-ar { color: var(--accent); }
.tas-widget.light .w-menu button { color: var(--text); }
.tas-widget.light .w-menu button:hover { background: var(--card-2); }

/* ---------- Quran reader ---------- */
.quran-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 960px) { .quran-layout { grid-template-columns: 1fr; } }
.q-side { position: sticky; top: calc(var(--header-h) + 12px); max-height: calc(100dvh - var(--header-h) - 40px); overflow: auto; }
@media (max-width: 960px) { .q-side { position: static; max-height: 320px; } }
.surah-item {
  display: flex; align-items: center; gap: .7rem; width: 100%;
  padding: .55rem .65rem; border: 0; background: none; cursor: pointer;
  border-radius: var(--r-md); text-align: start; color: var(--text);
}
.surah-item:hover { background: var(--card-2); }
.surah-item.active { background: var(--accent-soft); color: var(--accent); }
.surah-item .si-num {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center;
  font-size: .7rem; font-weight: 750; background: var(--card-2);
  clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
}
.surah-item .si-name { flex: 1; min-width: 0; }
.surah-item .si-en { font-size: .8rem; font-weight: 650; }
.surah-item .si-meta { font-size: .66rem; color: var(--text-3); }
.surah-item .si-ar { font-family: var(--font-arabic); font-size: 1rem; }
.reader { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.reader.night { background: #0a100d; border-color: #1c2a23; color: #d9e4de; }
.reader.night .ayah { border-color: #1c2a23; }
.reader.night .ayah:hover { background: #14211b; }
.reader-head {
  padding: .9rem 1rem; background: var(--grad-emerald-gold); color: #f0f6f2;
  display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between;
}
.reader-head .rh-title { font-weight: 750; }
.reader-head .rh-sub { font-size: var(--fs-xs); color: #cfe3d7; }
.reader-tools {
  display: flex; flex-wrap: wrap; gap: .45rem; padding: .7rem .9rem;
  border-block-end: 1px solid var(--border); align-items: center; background: var(--card-2);
}
.reader.night .reader-tools { background: #0e1712; border-color: #1c2a23; }
.reader-body { padding: .5rem; max-height: min(72dvh, 900px); overflow-y: auto; }
.bism {
  text-align: center; font-family: var(--font-quran); font-size: 1.5rem;
  color: var(--gold); padding: .8rem; direction: rtl;
}
.ayah {
  display: block; padding: .85rem .85rem; border-radius: var(--r-md);
  border: 1px solid transparent; transition: background var(--speed);
}
.ayah:hover { background: var(--card-2); }
.ayah.bookmarked { background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.ayah .a-text {
  font-family: var(--font-quran); direction: rtl; text-align: right;
  font-size: var(--quran-fs, 1.6rem); line-height: 2.5;
}
.ayah .a-num {
  display: inline-grid; place-items: center; min-width: 30px; height: 30px;
  margin-inline-start: .35rem; font-size: .62rem; font-weight: 750;
  color: var(--gold); font-family: var(--font-ui);
  border: 1.5px solid var(--gold); border-radius: 50%;
  vertical-align: middle; padding: 0 4px; line-height: 1;
}
.ayah-actions { display: flex; gap: .3rem; margin-block-start: .4rem; opacity: 0; transition: opacity var(--speed); }
.ayah:hover .ayah-actions, .ayah:focus-within .ayah-actions, .ayah.bookmarked .ayah-actions { opacity: 1; }
@media (hover: none) { .ayah-actions { opacity: 1; } }
.search-results { max-height: 300px; overflow: auto; }

/* ---------- Monthly report ---------- */
.report-head-card { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; }
.report-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; }
.kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: .8rem .9rem;
}
.kpi .k-val { font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; }
.kpi .k-label { font-size: var(--fs-xs); color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.kpi .k-sub { font-size: var(--fs-sm); color: var(--text-2); }

/* ---------- Monthly report: Completion history as separate day cards (phone) ---------- */
.rep-cards { display: none; gap: .7rem; }
.day-card {
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: .78rem .85rem .82rem;
}
.day-card .dc-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: .7rem; margin-block-end: .5rem;
}
.day-card .dc-when { display: flex; flex-direction: column; min-width: 0; }
.day-card .dc-when b { font-size: .96rem; }
.day-card .dc-date { color: var(--text-3); }
.day-card .dc-meter { display: flex; align-items: center; gap: .6rem; margin-block-end: .58rem; }
.day-card .dc-meter .grow { flex: 1; min-width: 0; }
.day-card .dc-meter b { font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.day-card .dc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; }
.day-card .dc-cell {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: .42rem .45rem .46rem; text-align: center; min-width: 0;
}
.day-card .dc-cell .dc-k {
  display: block; font-size: .66rem; color: var(--text-3);
  line-height: 1.7; overflow-wrap: anywhere;
}
.day-card .dc-cell .dc-v {
  display: block; font-size: .95rem; font-weight: 750; margin-block-start: .08rem;
  font-variant-numeric: tabular-nums;
}
html[lang='ur'] .day-card .dc-cell .dc-k { font-size: .7rem; line-height: 2; }
/* ---------- Admin mureed records as cards (phone) ---------- */
.user-card {
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: .8rem .85rem;
}
.user-card .uc-top { display: flex; align-items: center; gap: .7rem; margin-block-end: .55rem; }
.user-card .uc-top .grow { min-width: 0; }
.user-card .uc-top b { display: block; overflow-wrap: anywhere; }
.user-card .uc-top .xsmall { overflow-wrap: anywhere; }
.user-card .uc-facts { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-end: .6rem; }
.user-card .uc-f {
  display: inline-flex; align-items: center; gap: .3rem; min-width: 0;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-full);
  padding: .22rem .6rem; font-size: var(--fs-xs); color: var(--text-2);
  overflow-wrap: anywhere;
}
.user-card .uc-f .uc-k { color: var(--text-3); font-weight: 650; flex: none; }
.user-card .uc-meter { display: flex; align-items: center; gap: .6rem; margin-block-end: .62rem; }
.user-card .uc-meter .grow { flex: 1; min-width: 0; }
.user-card .uc-meter b { font-variant-numeric: tabular-nums; }
.user-card .uc-foot { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.user-card .uc-foot .btn-group { flex: none; }
/* Completion history: header + data read centered (user request) */
#rep-table table.data th, #rep-table table.data td,
#mr-table table.data th, #mr-table table.data td { text-align: center; }

@media (max-width: 720px) {
  #rep-table { display: none; }
  #mr-table { display: none; }
  .swap-cards > .table-wrap { display: none; }
  .rep-cards { display: grid; }
}

/* ---------- Murshad mureed card ---------- */
.mureed-card .mc-top { display: flex; gap: .8rem; align-items: center; }
.mureed-card .mc-name {
  font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.mureed-card .mc-tag { display: flex; margin-block-start: .55rem; }
.mureed-card .mc-city { font-size: var(--fs-xs); color: var(--text-3); display: flex; gap: .25rem; align-items: center; }
.mureed-card .mc-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem;
  margin-block: .75rem; text-align: center;
}
.mureed-card .mc-stats .ms { background: var(--card-2); border-radius: var(--r-sm); padding: .45rem .3rem; }
.mureed-card .mc-stats .ms b { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.mureed-card .mc-stats .ms span { font-size: .62rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.mureed-card .mc-foot { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }

/* ---------- Detail page ---------- */
.detail-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.profile-block { text-align: center; }
.profile-block .avatar { margin: 0 auto .6rem; }
.kv { display: flex; justify-content: space-between; gap: .75rem; padding: .5rem 0; border-block-end: 1px dashed var(--border); font-size: var(--fs-sm); }
.kv:last-child { border: 0; }
.kv .k { color: var(--text-3); }
.kv .v { font-weight: 650; text-align: end; }

/* ---------- Analytics ---------- */
.an-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }
.an-grid .span-3 { grid-column: span 3; }
.an-grid .span-4 { grid-column: span 4; }
.an-grid .span-6 { grid-column: span 6; }
.an-grid .span-8 { grid-column: span 8; }
.an-grid .span-12 { grid-column: span 12; }
@media (max-width: 1100px) {
  .an-grid .span-3, .an-grid .span-4 { grid-column: span 6; }
  .an-grid .span-8 { grid-column: span 12; }
}
@media (max-width: 720px) {
  .an-grid .span-3, .an-grid .span-4, .an-grid .span-6, .an-grid .span-8 { grid-column: span 12; }
}

/* ---------- Announcement banner ---------- */
.announce {
  display: flex; gap: .8rem; align-items: flex-start;
  background: var(--grad-emerald-gold); color: #f0f6f2;
  border-radius: var(--r-lg); padding: .9rem 1rem; margin-block-end: 1rem;
  position: relative; overflow: hidden;
}
.announce .a-icon { flex: none; color: var(--light-gold); }
.announce h4 { margin: 0 0 .15rem; color: #fff; font-size: var(--fs-md); }
.announce p { margin: 0; font-size: var(--fs-sm); color: #dcece4; }
.announce .a-close { margin-inline-start: auto; background: none; border: 0; color: #ffffffcc; cursor: pointer; }

/* ---------- Onboarding ---------- */
.onboard-steps { display: flex; flex-direction: column; gap: .55rem; }
.onboard-step {
  display: flex; gap: .75rem; align-items: center; padding: .65rem .75rem;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--card);
}
.onboard-step .os-num {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 750; font-size: .8rem;
  background: var(--card-2); color: var(--text-2); border: 1.5px solid var(--border-strong);
}
.onboard-step.done .os-num { background: var(--success); color: #fff; border-color: var(--success); }
.onboard-step .os-label { flex: 1; font-size: var(--fs-sm); font-weight: 600; }

/* ---------- Status gate (pending/declined) ---------- */
.gate-screen {
  min-height: 100dvh; display: grid; place-items: center;
  padding: 1.5rem; background: var(--grad-hero); text-align: center;
}
.gate-card {
  background: var(--card); border-radius: var(--r-xl); box-shadow: var(--shadow-2);
  padding: clamp(1.5rem, 5vw, 2.5rem); width: min(480px, 100%);
  border: 1px solid var(--border);
}
.gate-card .g-icon {
  width: 84px; height: 84px; margin: 0 auto 1rem; border-radius: 26px;
  display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
}
.gate-card .g-icon.pending { background: #faf3dd; color: var(--warning); }
.gate-card .g-icon.declined { background: var(--danger-soft); color: var(--danger); }

/* ---------- Ramadan ---------- */
.ramadan-hero {
  background: linear-gradient(135deg, #1a1230, #0e1712 70%);
  color: #efe8ff; border-radius: var(--r-lg); padding: clamp(1rem, 3vw, 1.6rem);
  border: 1px solid #cdae3a44;
}
.ramadan-hero h2 { color: var(--light-gold); margin: 0 0 .3rem; }
.ramadan-table .pr-time-cell { font-variant-numeric: tabular-nums; font-weight: 650; }
.ramadan-table tr.today-row { background: color-mix(in srgb, var(--gold) 14%, transparent); }

/* ---------- Profile ---------- */
.profile-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 1rem; align-items: start; }
@media (max-width: 860px) { .profile-layout { grid-template-columns: 1fr; } }
.photo-upload { text-align: center; }
.photo-upload .avatar { cursor: pointer; position: relative; }
.photo-upload .cam {
  position: absolute; bottom: -2px; inset-inline-end: -2px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--gold);
  color: #241d05; display: grid; place-items: center; border: 2px solid var(--card);
}
.upload-progress { height: 5px; background: var(--card-2); border-radius: 99px; overflow: hidden; margin-block-start: .5rem; }
.upload-progress span { display: block; height: 100%; background: var(--grad-emerald); transition: width .2s; }

/* ---------- Weather pill ---------- */
.weather-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-full); padding: .35rem .8rem;
  font-size: var(--fs-sm); font-weight: 650; box-shadow: var(--shadow-1);
}
.weather-pill .wt { font-variant-numeric: tabular-nums; }

/* ---------- First-time welcome ---------- */
.welcome-banner {
  background: var(--grad-emerald-gold); color: #f0f6f2;
  border-radius: var(--r-lg); padding: 1.1rem 1.25rem;
  display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;
  position: relative; overflow: hidden; margin-block-end: 1rem;
}
.welcome-banner h2 { color: #fff; margin: 0 0 .2rem; font-size: var(--fs-lg); }
.welcome-banner p { margin: 0; color: #d8e9e0; font-size: var(--fs-sm); }
.welcome-banner .w-logo { width: 56px; height: 56px; flex: none; }

/* ---------- Print ---------- */
@media print {
  .sidebar, .topbar, .bottom-nav, .page-actions, .offline-banner, .toast-root { display: none !important; }
  .shell { padding: 0 !important; }
  .content { max-width: none; padding: 0; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* dark: gate status icons */
[data-theme='dark'] .gate-card .g-icon.pending { background: #35300f; color: var(--light-gold); }
[data-theme='dark'] .gate-card .g-icon.declined { background: #3d1c18; color: #f0a49b; }

/* ---------- Admin reports: distinct export tiles (unique accent per type) ---------- */
.rep-tile { display: flex; flex-direction: column; gap: .85rem; }
.rep-tile .rt-head { display: flex; align-items: center; gap: .75rem; }
.rep-tile .rt-icon {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--rc, var(--accent)) 15%, transparent);
  color: var(--rc, var(--accent));
}
.rep-tile .rt-txt { min-width: 0; }
.rep-tile h3 { margin: 0; font-size: .98rem; line-height: 1.3; }
.rep-tile .rt-txt .xsmall { display: block; margin-block-start: .15rem; }
.rep-tile .rt-actions { display: flex; flex-direction: column; gap: .5rem; margin-block-start: auto; }
.rep-tile[data-tile='system'] { --rc: #1f7a4e; }
.rep-tile[data-tile='murshad'] { --rc: #b98a12; }
.rep-tile[data-tile='city'] { --rc: #2563c9; }
.rep-tile[data-tile='activity'] { --rc: #7c5cd6; }
.rep-tile[data-tile='assignments'] { --rc: #d97706; }
.period-select { width: auto; min-width: 190px; }

@media (max-width: 560px) {
  .rep-tile .rt-icon { width: 48px; height: 48px; border-radius: 14px; }
  .rep-tile h3 { font-size: 1.03rem; }
  .rep-tile .rt-actions .btn { min-height: 44px; } /* comfortable tap targets on phones */
  .admin-period { flex-direction: column; align-items: stretch !important; }
  .admin-period .period-select { width: 100%; min-width: 0; }
}

/* ---------- Phone app pass: content grids tighten, lists breathe ---------- */
@media (max-width: 700px) {
  .azkar-grid, .dua-grid, .report-kpis { gap: .75rem; }
  .list { gap: .5rem; }
}