/* ── Performance optimizations (safe) ── */

/* Eliminate 300ms tap delay on Android Chrome */
button, a, input, select, textarea,
.drawer-item, .nb, .feat-btn, .tr-check, .tsb-tap-btn,
.hdr-menu-btn, .hdr-icon-btn, [onclick] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Prevent text selection lag on nav/interactive elements */
.drawer-item, .nb, .feat-btn, .hdr-menu-btn,
.hdr-icon-btn, .app-header {
  user-select: none;
  -webkit-user-select: none;
}

/* GPU hints — no layout impact */
.app-header { will-change: transform; }
.hero-card { contain: layout style; }

/* Smooth motion — respect accessibility preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.1ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SAINIFY SALAH — Premium Theme v3
   Deep teal + gold Islamic design system
═══════════════════════════════════════════════════════════════ */

/* Load Arabic & Latin fonts together for best performance */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Scheherazade+New:wght@400;500;600;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

/* ─── CSS Variables — Light Theme ─── */
:root {
  --font: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-arabic: 'Noto Naskh Arabic', 'Scheherazade New', 'Amiri', 'Traditional Arabic', serif;

  /* Core palette */
  --teal:    #1C7A6E;
  --teal2:   #0F5A51;
  --teal-lt: #E8F5F3;
  --teal-xlt:#F0FAF8;
  --gold:    #C9912A;
  --gold-lt: #FFF8EC;
  --amber:   #E5930A;
  --red:     #DC2626;
  --red-lt:  #FEF2F2;
  --green:   #16A34A;
  --green-lt:#F0FDF4;
  --blue:    #1D4ED8;
  --blue-lt: #EFF6FF;
  --purple:  #7C3AED;
  --purple-lt:#F5F3FF;
  --pink:    #BE185D;
  --pink-lt: #FDF2F8;

  /* Surfaces */
  --bg:      #F4F6F9;
  --surface: #FFFFFF;
  --surface2:#F8FAFB;
  --border:  #E2E8F0;
  --border2: #CBD5E1;

  /* Text */
  --t1:      #0F172A;
  --t2:      #334155;
  --t3:      #64748B;
  --t4:      #94A3B8;
  --t-inv:   #FFFFFF;

  /* Shadows */
  --sh-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --sh:     0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --sh-lg:  0 10px 32px rgba(0,0,0,.14), 0 4px 8px rgba(0,0,0,.08);
  --sh-xl:  0 20px 60px rgba(0,0,0,.18);

  /* Radii */
  --r-sm: 8px;
  --r:    14px;
  --r-lg: 20px;
  --r-xl: 28px;

  /* Spacing */
  --nav-h: 64px;
  --hdr-h: 56px;
}

/* ─── Dark Theme ─── */
[data-theme="dark"] {
  --bg:      #0A0E1A;
  --surface: #111827;
  --surface2:#1A2236;
  --border:  #1E2D42;
  --border2: #2D3F58;
  --t1:      #F1F5F9;
  --t2:      #CBD5E1;
  --t3:      #94A3B8;
  --t4:      #64748B;
  --teal-lt: #0C2A25;
  --teal-xlt:#0A1F1C;
  --gold-lt: #1A1200;
  --red-lt:  #1A0A0A;
  --green-lt:#0A1A0F;
  --blue-lt: #0A0F1A;
  --purple-lt:#120A1A;
  --pink-lt: #1A0A12;
  --sh-sm:  0 1px 3px rgba(0,0,0,.3);
  --sh:     0 4px 12px rgba(0,0,0,.4);
  --sh-lg:  0 10px 32px rgba(0,0,0,.5);
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { height: 100%; overflow: hidden; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--t1);
  height: 100%;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  font-size: 14px;
  line-height: 1.5;
}
body.preload * { transition: none !important; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font); }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* ─── App Shell ─── */
#app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
  /* Ensures flex children get correct sizing on Android */
  max-height: 100vh;
  max-height: 100dvh;
}

/* ─── Header ─── */
.app-header {
  height: var(--hdr-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 4px 0 8px;
  gap: 4px;
  position: relative;
  z-index: 100;
  flex-shrink: 0;
  box-shadow: var(--sh-sm);
}
.hdr-menu-btn {
  width: 40px; height: 40px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 5px;
  border-radius: var(--r-sm);
  transition: background .2s;
  flex-shrink: 0;
}
.hdr-menu-btn:active { background: var(--border); }
.hdr-menu-btn span {
  display: block; width: 20px; height: 2px;
  background: var(--t2); border-radius: 2px;
  transition: .2s;
}
.hdr-center { flex: 1; display: flex; justify-content: center; }
.hdr-title {
  font-size: 16px; font-weight: 700;
  color: var(--t1); letter-spacing: -.3px;
}
.hdr-right { display: flex; align-items: center; gap: 2px; }
.hdr-icon-btn {
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
  color: var(--t2);
}
.hdr-icon-btn:active { background: var(--border); }

/* ─── Views ─── */
/* ─── Views — Android-safe scrolling layout ─── */
.view {
  display: none;
  flex-direction: column;
  /* Fill space between header and nav */
  flex: 1 1 0;
  min-height: 0;
  /* Don't use overflow:hidden here — let .view-scroll handle it */
  overflow: visible;
  position: relative;
}
.view.active {
  display: flex;
}
/* The scrollable container inside each view */
.view-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: scroll; /* scroll not auto — more reliable on Android */
  overflow-x: hidden;
  padding-bottom: calc(var(--nav-h) + 32px);
  /* Critical for smooth touch scroll on Android Chrome/WebView */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  /* Prevent content from collapsing */
  width: 100%;
}
.view-scroll::-webkit-scrollbar { display: none; }

/* Main view scroll — same rules */
.main-view-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  padding-bottom: calc(var(--nav-h) + 32px);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  width: 100%;
}
.main-view-scroll::-webkit-scrollbar { display: none; }

/* ─── Bottom Nav ─── */
#nav {
  height: var(--nav-h);
  background: var(--surface);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: stretch;
  /* FIXED: flex-shrink:0 + order keeps it at bottom of #app flex column */
  position: relative;
  z-index: 100;
  flex-shrink: 0;
  order: 999;
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
  /* Safe area for notch/home-bar devices */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nb {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border-radius: 0;
  transition: background .15s;
  position: relative;
  min-width: 0;
}
.nb:active { background: var(--teal-lt); }
.nb-icon { font-size: 20px; line-height: 1; transition: transform .2s; }
.nb-label { font-size: 10px; font-weight: 600; color: var(--t3); letter-spacing: .3px; white-space: nowrap; transition: color .2s; }
.nb.active .nb-label { color: var(--teal); }
.nb.active .nb-icon { transform: scale(1.1); }
.nb.active::after {
  content: '';
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 32px; height: 3px;
  background: var(--teal);
  border-radius: 0 0 4px 4px;
}

/* ─── Drawer ─── */
/* ─── Drawer styles → see drawer.css (loaded in index.html) ─── */

/* ─── Cards ─── */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 18px;
  margin: 0 16px 14px;
  box-shadow: var(--sh);
  border: 1px solid var(--border);
}
.card-title {
  font-size: 15px; font-weight: 700;
  color: var(--t1); margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.card-title-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.card-title-row .card-title { margin-bottom: 0; }

/* ─── Section Header ─── */
.section-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
}
.section-header h2 { font-size: 16px; font-weight: 700; color: var(--t1); }
.section-header .hdr-date { font-size: 12px; color: var(--t3); font-weight: 500; }

/* ─── Hero Card ─── */
.hero-card {
  position: relative; overflow: hidden;
  min-height: 280px;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  margin-bottom: 20px;
}
.hero-slider { position: absolute; inset: 0; }
.hs-panel {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .8s;
}
.hs-panel.active { opacity: 1; }
.hs-fajr    { background: linear-gradient(160deg, #0F1B3D 0%, #1A2E6B 50%, #2D4A8A 100%); }
.hs-duhr    { background: linear-gradient(160deg, #0A2A20 0%, #0D4A38 50%, #1A7A58 100%); }
.hs-asr     { background: linear-gradient(160deg, #2A1A00 0%, #5A3800 50%, #8C6000 100%); }
.hs-maghrib { background: linear-gradient(160deg, #3D0A1A 0%, #6B1A2A 50%, #C2344A 100%); }
.hs-isha    { background: linear-gradient(160deg, #0A0A1A 0%, #1A1A3D 50%, #2A2A6B 100%); }

.hero-deco {
  position: absolute; inset: 0; pointer-events: none;
}
.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(40px); opacity: .25;
}
.hero-orb-1 {
  width: 200px; height: 200px;
  background: rgba(255,220,100,.4);
  top: -60px; right: -60px;
  animation: orb-pulse 4s ease-in-out infinite;
}
.hero-orb-2 {
  width: 150px; height: 150px;
  background: rgba(100,220,200,.3);
  bottom: -40px; left: -40px;
  animation: orb-pulse 5s ease-in-out infinite reverse;
}
@keyframes orb-pulse {
  0%, 100% { transform: scale(1); opacity: .25; }
  50% { transform: scale(1.2); opacity: .35; }
}
.hero-crescent {
  position: absolute; top: 16px; right: 70px;
  font-size: 32px; opacity: .3;
  animation: crescent-sway 6s ease-in-out infinite;
}
@keyframes crescent-sway {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}
.hero-geo-pattern {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M40 0l40 40-40 40L0 40z'/%3E%3C/g%3E%3C/svg%3E");
}

.hero-content-layer {
  position: relative; z-index: 2;
  padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 6px;
}
.hero-top-row {
  display: flex; align-items: center; justify-content: space-between;
}
.hero-city-row {
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
  border-radius: 20px; padding: 5px 12px;
  border: 1px solid rgba(255,255,255,.15);
}
.hero-city-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 6px #4ADE80;
  animation: dot-pulse 2s infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.hero-city-name { font-size: 12px; font-weight: 600; color: rgba(255,255,255,.95); }
.hero-update-icon { font-size: 11px; }
.hero-notif-btn {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}

.hero-date-row {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 0;
}
.hero-hijri { font-family: var(--font-arabic); font-size: 14px; color: rgba(255,255,255,.85); }
.hero-date-dot { color: rgba(255,255,255,.4); }
.hero-greg { font-size: 12px; color: rgba(255,255,255,.7); font-weight: 500; }

.hero-clock-wrap {
  display: flex; align-items: baseline; gap: 4px;
  margin: 2px 0 0;
}
.hero-clock-main { display: flex; align-items: baseline; gap: 6px; }
.hct-hm { font-size: 54px; font-weight: 800; color: #fff; letter-spacing: -2px; line-height: 1; }
.hct-ampm { font-size: 16px; font-weight: 700; color: rgba(255,255,255,.7); }
.hero-clock-secs { font-size: 20px; font-weight: 500; color: rgba(255,255,255,.5); align-self: flex-end; padding-bottom: 4px; }

.hero-prayer-arabic-row {
  font-family: var(--font-arabic);
  font-size: 22px; color: rgba(255,255,255,.9);
  line-height: 1.3;
}

.hero-next-pill {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 40px; padding: 8px 14px;
  margin-top: 4px;
}
.hnp-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; color: rgba(255,255,255,.6); text-transform: uppercase; }
.hnp-name { font-size: 13px; font-weight: 700; color: #fff; }
.hnp-time { font-size: 13px; color: rgba(255,255,255,.8); font-weight: 600; }
.hnp-cd { font-size: 11px; color: var(--gold); font-weight: 700; margin-left: auto; white-space: nowrap; }

.hero-remaining-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  padding-top: 2px;
}
.hrr-left .hrr-lbl { font-size: 10px; font-weight: 600; letter-spacing: .8px; color: rgba(255,255,255,.5); text-transform: uppercase; }
.hrr-left .hrr-val { font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -1px; line-height: 1.1; }
.hrr-right { text-align: right; }
.hrr-date-lbl { font-size: 12px; color: rgba(255,255,255,.6); font-weight: 500; }
.hrr-minus { font-size: 11px; color: rgba(255,255,255,.4); }

.hero-perm-bar {
  display: none;
  background: rgba(255,160,0,.15);
  border: 1px solid rgba(255,160,0,.3);
  border-radius: 12px; margin-top: 8px;
}
.hero-perm-bar.show { display: block; }
.hpb-btn {
  width: 100%; padding: 10px 14px;
  display: flex; align-items: center; gap: 8px;
  color: rgba(255,220,100,.95); font-size: 13px; font-weight: 600;
}
.hpb-arrow { margin-left: auto; }

/* ─── Next Prayer Banner ─── */
.next-prayer-banner {
  background: var(--surface);
  border-radius: var(--r-lg);
  margin: 0 16px 14px;
  padding: 16px 18px;
  box-shadow: var(--sh);
  border: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.next-prayer-banner::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--teal);
  border-radius: 4px 0 0 4px;
}
.npb-left .npb-label { font-size: 11px; font-weight: 600; letter-spacing: .5px; color: var(--t3); text-transform: uppercase; }
.npb-left .npb-name { font-size: 20px; font-weight: 800; color: var(--t1); margin-top: 2px; }
.npb-countdown { text-align: right; }
.npb-cd-label { font-size: 11px; color: var(--t3); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.npb-cd-time { font-size: 24px; font-weight: 800; color: var(--teal); letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.npb-progress-wrap {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 3px; background: var(--border);
}
.npb-progress { height: 100%; background: var(--teal); transition: width .5s linear; border-radius: 0 2px 2px 0; }
.npb-row { display: flex; align-items: center; justify-content: space-between; }

/* ─── Prayer Cards Grid ─── */
.prayer-cards-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 16px 4px;
}
.prayer-card {
  background: var(--surface);
  border-radius: var(--r);
  padding: 14px;
  box-shadow: var(--sh-sm);
  border: 1.5px solid var(--border);
  display: flex; flex-direction: column; gap: 4px;
  position: relative; overflow: hidden;
  transition: all .2s;
  cursor: pointer;
}
.prayer-card.current {
  border-color: var(--teal);
  background: var(--teal-xlt);
  box-shadow: 0 0 0 3px rgba(28,122,110,.12), var(--sh);
}
.prayer-card.next {
  border-color: var(--gold);
  background: var(--gold-lt);
}
.prayer-card:active { transform: scale(.97); }
.pc-icon { font-size: 22px; }
.pc-name { font-size: 12px; font-weight: 700; color: var(--t2); letter-spacing: .3px; text-transform: uppercase; }
.pc-time { font-size: 20px; font-weight: 800; color: var(--t1); letter-spacing: -1px; line-height: 1; margin-top: 2px; }
.pc-jamaat { font-size: 11px; color: var(--t3); font-weight: 500; }
.pc-badge {
  position: absolute; top: 10px; right: 10px;
  font-size: 9px; font-weight: 700; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 10px;
  text-transform: uppercase;
}
.pc-badge.cur { background: var(--teal); color: #fff; }
.pc-badge.nxt { background: var(--gold); color: #fff; }
.prayer-card.current .pc-time { color: var(--teal2); }

/* ─── Feature Grid ─── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 16px;
  margin-bottom: 20px;
}
.feat-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--surface);
  border-radius: var(--r);
  padding: 14px 8px;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--border);
  transition: all .2s;
}
.feat-btn:active { transform: scale(.94); background: var(--teal-lt); }
.feat-icon-wrap {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.fi-teal    { background: var(--teal-lt); }
.fi-orange  { background: #FFF3E0; }
.fi-yellow  { background: var(--gold-lt); }
.fi-purple  { background: var(--purple-lt); }
.fi-blue    { background: var(--blue-lt); }
.fi-green   { background: var(--green-lt); }
.fi-pink    { background: var(--pink-lt); }
.fi-red     { background: var(--red-lt); }
.feat-label { font-size: 11px; font-weight: 600; color: var(--t2); text-align: center; line-height: 1.3; }

/* ─── Prayer Mini Row ─── */
.prayer-mini-row {
  display: flex; gap: 8px;
  padding: 0 16px 4px;
  overflow-x: auto;
}
.prayer-mini-row::-webkit-scrollbar { display: none; }
.pm-card {
  flex-shrink: 0;
  background: var(--surface);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1.5px solid var(--border);
  min-width: 70px;
  transition: all .2s;
}
.pm-card.active {
  background: var(--teal);
  border-color: var(--teal);
}
.pm-card.active .pm-name, .pm-card.active .pm-time { color: #fff; }
.pm-name { font-size: 10px; font-weight: 700; color: var(--t3); text-transform: uppercase; letter-spacing: .3px; }
.pm-time { font-size: 13px; font-weight: 700; color: var(--t1); }

/* ─── Hadith Card ─── */
.hadith-card {
  background: linear-gradient(135deg, var(--teal2) 0%, var(--teal) 100%);
  border-radius: var(--r-lg);
  margin: 0 16px 14px;
  padding: 18px;
  display: flex; gap: 14px;
  box-shadow: var(--sh);
}
.hadith-icon { font-size: 28px; flex-shrink: 0; }
.hadith-label { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 6px; }
.hadith-txt { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.95); font-style: italic; }
.hadith-src { font-size: 11px; color: rgba(255,255,255,.5); margin-top: 6px; font-weight: 600; }

/* ─── Ramadan Banner ─── */
.ram-banner {
  background: linear-gradient(135deg, #1E1B4B, #3730A3);
  border-radius: var(--r-lg);
  margin: 0 16px 14px;
  padding: 18px;
  box-shadow: var(--sh);
  display: none;
}
.ram-banner.show { display: block; }
.ram-title { font-family: var(--font-arabic); font-size: 16px; color: rgba(255,255,255,.9); text-align: center; margin-bottom: 14px; }
.ram-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ram-item { background: rgba(255,255,255,.1); border-radius: 10px; padding: 10px; text-align: center; }
.ram-lbl { font-size: 10px; color: rgba(255,255,255,.6); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.ram-time { font-size: 17px; font-weight: 800; color: #fff; margin-top: 3px; }

/* ─── Settings ─── */
.settings-section {
  background: var(--surface);
  border-radius: var(--r-lg);
  margin: 0 16px 14px;
  overflow: hidden;
  box-shadow: var(--sh-sm);
  border: 1px solid var(--border);
}
.settings-section-title {
  font-size: 12px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--teal);
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border);
  background: var(--teal-xlt);
}
.set-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.set-row:last-child { border-bottom: none; }
.set-label { flex: 1; min-width: 0; }
.set-label-text { font-size: 14px; font-weight: 600; color: var(--t1); }
.set-label-desc { font-size: 12px; color: var(--t3); margin-top: 2px; }

/* ─── Toggle ─── */
.toggle { position: relative; display: inline-block; width: 48px; height: 26px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.tog-sl {
  position: absolute; cursor: pointer; inset: 0;
  background: var(--border2); border-radius: 26px;
  transition: .3s;
}
.tog-sl::before {
  content: ''; position: absolute;
  width: 20px; height: 20px; border-radius: 50%;
  left: 3px; bottom: 3px; background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: .3s;
}
.toggle input:checked + .tog-sl { background: var(--teal); }
.toggle input:checked + .tog-sl::before { transform: translateX(22px); }

/* ─── Select ─── */
.set-select {
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: 10px; padding: 8px 12px;
  font-size: 13px; font-weight: 500;
  color: var(--t1); max-width: 160px;
  -webkit-appearance: none;
}

/* ─── Buttons ─── */
.btn-primary {
  display: block; width: 100%;
  padding: 13px 18px;
  border-radius: var(--r);
  font-size: 14px; font-weight: 700;
  background: var(--teal); color: #fff;
  box-shadow: 0 4px 12px rgba(28,122,110,.3);
  transition: all .2s;
  text-align: center;
}
.btn-primary:active { transform: scale(.97); opacity: .9; }
.btn-primary.teal { background: var(--teal); }
.btn-primary.gold { background: var(--gold); box-shadow: 0 4px 12px rgba(201,145,42,.3); }
.btn-primary.red  { background: var(--red);  box-shadow: 0 4px 12px rgba(220,38,38,.3); }

.btn-outline {
  display: block; width: 100%;
  padding: 12px 18px;
  border-radius: var(--r);
  font-size: 14px; font-weight: 600;
  background: transparent;
  border: 2px solid var(--border2);
  color: var(--t2);
  transition: all .2s;
  text-align: center;
}
.btn-outline:active { background: var(--bg); }

.btn-small {
  padding: 7px 13px;
  border-radius: 10px;
  font-size: 12px; font-weight: 700;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  color: var(--t2);
  transition: all .15s;
  flex-shrink: 0;
}
.btn-small.teal { background: var(--teal-lt); color: var(--teal); border-color: rgba(28,122,110,.3); }
.btn-small.gold { background: var(--gold-lt); color: var(--gold); border-color: rgba(201,145,42,.3); }
.btn-small.danger { background: var(--red-lt); color: var(--red); border-color: rgba(220,38,38,.3); }
.btn-small:active { transform: scale(.95); }

.install-btn {
  display: block; width: calc(100% - 32px);
  margin: 0 16px 14px;
  padding: 14px;
  background: linear-gradient(135deg, var(--teal2), var(--teal));
  color: #fff; border-radius: var(--r);
  font-size: 14px; font-weight: 700;
  text-align: center;
  box-shadow: var(--sh);
}

/* ─── Tracker ─── */
.tracker-prayers { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.tr-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.tr-row:last-child { border-bottom: none; }
.tr-info { flex: 1; }
.tr-name { font-size: 15px; font-weight: 700; color: var(--t1); }
.tr-time { font-size: 12px; color: var(--t3); margin-top: 1px; }
.tr-check {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2.5px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: all .2s;
  flex-shrink: 0;
}
.tr-check.done { background: var(--teal); border-color: var(--teal); color: #fff; }
.tr-check.done::after { content: '✓'; }
.tr-check.missed { background: var(--red-lt); border-color: var(--red); color: var(--red); }
.tr-check.missed::after { content: '✗'; }

.streak-card { background: linear-gradient(135deg, #451A03 0%, #92400E 100%); border-color: transparent; }
.streak-card .card-title { color: #fff; }
.streak-body { flex: 1; }
.streak-num { font-size: 64px; font-weight: 900; color: #fff; line-height: 1; letter-spacing: -3px; }
.streak-label { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 4px; }

/* ─── Heatmap ─── */
.heatmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 10px; }
.hm-cell {
  aspect-ratio: 1; border-radius: 4px;
  background: var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: var(--t4);
  transition: all .2s;
  cursor: pointer;
}
.hm-cell:active { transform: scale(.9); }
.hm-s0 { background: var(--border); }
.hm-s1 { background: rgba(28,122,110,.2); }
.hm-s2 { background: rgba(28,122,110,.45); }
.hm-s3 { background: rgba(28,122,110,.7); }
.hm-s5 { background: var(--teal); }
.heatmap-legend { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--t3); justify-content: flex-end; }
.hm-swatch { width: 12px; height: 12px; border-radius: 3px; }
.s0 { background: var(--border); }
.s2 { background: rgba(28,122,110,.45); }
.s5 { background: var(--teal); }

/* ─── Tasbeeh ─── */
.tsb-tabs { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; padding-bottom: 4px; }
.tsb-tab {
  flex-shrink: 0; padding: 7px 14px; border-radius: 20px;
  font-size: 12px; font-weight: 700;
  background: var(--surface2); color: var(--t2);
  border: 1.5px solid var(--border);
  transition: all .2s;
}
.tsb-tab.active { background: var(--teal); color: #fff; border-color: transparent; }
.tsb-arabic { font-family: var(--font-arabic); font-size: 28px; color: var(--teal); text-align: center; margin-bottom: 6px; line-height: 1.4; }
.tsb-english { font-size: 13px; color: var(--t3); text-align: center; margin-bottom: 16px; }
.tsb-counter-display { text-align: center; margin-bottom: 16px; }
.tsb-cnt { font-size: 72px; font-weight: 900; color: var(--teal); letter-spacing: -3px; line-height: 1; }
.tsb-of { font-size: 18px; color: var(--t3); }
.tsb-tap-btn {
  width: 100%; padding: 20px;
  background: var(--teal); color: #fff;
  border-radius: var(--r-xl);
  font-size: 18px; font-weight: 800;
  letter-spacing: .5px;
  box-shadow: 0 6px 20px rgba(28,122,110,.4);
  transition: all .15s;
  margin-bottom: 10px;
}
.tsb-tap-btn:active { transform: scale(.95); box-shadow: 0 2px 8px rgba(28,122,110,.3); }
.tsb-reset-btn {
  width: 100%; padding: 12px;
  background: var(--surface2);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  font-size: 13px; font-weight: 600; color: var(--t3);
}

/* ─── Qaza ─── */
.qaza-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 16px 4px; }
.qaza-stat {
  background: var(--surface);
  border-radius: var(--r);
  padding: 16px;
  text-align: center;
  border: 1.5px solid var(--border);
  box-shadow: var(--sh-sm);
}
.qaza-stat.danger { border-color: rgba(220,38,38,.3); background: var(--red-lt); }
.qaza-stat.warn   { border-color: rgba(201,145,42,.3); background: var(--gold-lt); }
.qaza-stat.ok     { border-color: rgba(22,163,74,.3);  background: var(--green-lt); }
.qaza-stat.info   { border-color: rgba(28,122,110,.3); background: var(--teal-lt); }
.qs-num { font-size: 36px; font-weight: 900; color: var(--t1); line-height: 1; }
.qaza-stat.danger .qs-num { color: var(--red); }
.qaza-stat.warn   .qs-num { color: var(--gold); }
.qaza-stat.ok     .qs-num { color: var(--green); }
.qaza-stat.info   .qs-num { color: var(--teal); }
.qs-lbl { font-size: 11px; color: var(--t3); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }

.qaza-prayer-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.qaza-prayer-row:last-child { border-bottom: none; }
.qpr-name { font-size: 15px; font-weight: 700; color: var(--t1); }
.qpr-sub { font-size: 12px; color: var(--t3); margin-top: 2px; }
.qpr-controls { display: flex; align-items: center; gap: 8px; }
.qpr-minus, .qpr-plus {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 700;
  transition: all .15s;
}
.qpr-minus { background: var(--red-lt); color: var(--red); border: 1.5px solid rgba(220,38,38,.3); }
.qpr-plus  { background: var(--teal-lt); color: var(--teal); border: 1.5px solid rgba(28,122,110,.3); }
.qpr-minus:active, .qpr-plus:active { transform: scale(.9); }
.qpr-count { font-size: 18px; font-weight: 800; min-width: 36px; text-align: center; color: var(--t1); }

/* ─── Roza ─── */
.roza-today-card {
  background: linear-gradient(160deg, #1E1B4B 0%, #3730A3 100%);
  margin: 16px 16px 0;
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--sh-lg);
}
.roza-arabic { font-family: var(--font-arabic); font-size: 20px; color: rgba(255,255,255,.8); text-align: center; margin-bottom: 4px; }
.roza-question { font-size: 14px; color: rgba(255,255,255,.7); text-align: center; margin-bottom: 16px; }
.roza-times-row { display: flex; gap: 10px; margin-bottom: 16px; }
.roza-time-box { flex: 1; background: rgba(255,255,255,.1); border-radius: 12px; padding: 12px; text-align: center; }
.roza-time-lbl { font-size: 11px; color: rgba(255,255,255,.6); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.roza-time-val { font-size: 20px; font-weight: 800; margin-top: 4px; }
.roza-time-val.teal { color: #5EEAD4; }
.roza-time-val.gold { color: #FCD34D; }
.roza-btns { display: flex; gap: 10px; }
.roza-btn {
  flex: 1; padding: 13px;
  border-radius: var(--r); font-size: 13px; font-weight: 700;
  transition: all .2s;
}
.done-btn   { background: rgba(22,163,74,.2);  color: #4ADE80; border: 2px solid rgba(22,163,74,.4); }
.missed-btn { background: rgba(220,38,38,.2);  color: #F87171; border: 2px solid rgba(220,38,38,.4); }
.roza-btn:active { transform: scale(.96); }

.roza-dashboard { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.roza-ring-wrap { flex-shrink: 0; position: relative; }
.ring-svg { transform: rotate(-90deg); }
.ring-bg   { fill: none; stroke: var(--border); stroke-width: 10; }
.ring-fill { fill: none; stroke: var(--teal); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s; }
.ring-text { font-size: 22px; font-weight: 900; fill: var(--t1); text-anchor: middle; transform: rotate(90deg) translate(0, -130px); }
.ring-sub  { font-size: 10px; fill: var(--t3); text-anchor: middle; font-weight: 700; letter-spacing: 1px; transform: rotate(90deg) translate(0, -114px); }
.roza-stats-col { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.roza-stat-box { border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; }
.roza-stat-box.green { background: var(--green-lt); }
.roza-stat-box.red   { background: var(--red-lt); }
.rsb-num { font-size: 22px; font-weight: 900; }
.roza-stat-box.green .rsb-num { color: var(--green); }
.roza-stat-box.red   .rsb-num { color: var(--red); }
.rsb-lbl { font-size: 12px; color: var(--t3); font-weight: 600; }

.roza-calendar-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 10px; }
.roza-day {
  aspect-ratio: 1; border-radius: 8px;
  background: var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--t3);
  cursor: pointer; transition: all .15s;
}
.roza-day:active { transform: scale(.9); }
.roza-day.fasted { background: var(--green); color: #fff; }
.roza-day.missed { background: var(--red); color: #fff; }

/* ─── Qibla ─── */
.qibla-container { padding: 20px 16px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.compass-outer {
  width: 280px; height: 280px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--sh-lg), inset 0 0 0 2px var(--border);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.compass-ring {
  width: 250px; height: 250px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, var(--teal-lt) 0%, var(--surface2) 60%, var(--border) 100%);
  border: 2px solid var(--teal);
  position: relative;
  transition: transform .3s ease-out;
}
.compass-dirs span {
  position: absolute;
  font-size: 14px; font-weight: 800; color: var(--t2);
  text-transform: uppercase;
}
.cd-n { top: 8px; left: 50%; transform: translateX(-50%); color: var(--red); }
.cd-s { bottom: 8px; left: 50%; transform: translateX(-50%); }
.cd-e { right: 10px; top: 50%; transform: translateY(-50%); }
.cd-w { left: 10px; top: 50%; transform: translateY(-50%); }
.compass-needle-wrap {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center;
  transition: transform .5s ease-out;
}
.needle-north {
  width: 4px; height: 60px;
  background: linear-gradient(to bottom, var(--red), rgba(220,38,38,.3));
  border-radius: 4px 4px 0 0;
  margin-bottom: -1px;
}
.kaaba-indicator { font-size: 28px; line-height: 1; position: relative; z-index: 2; }
.needle-south {
  width: 4px; height: 50px;
  background: linear-gradient(to top, var(--t3), rgba(100,116,139,.3));
  border-radius: 0 0 4px 4px;
  margin-top: -1px;
}
.compass-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 8px rgba(28,122,110,.5);
  z-index: 3;
}
.compass-status { font-size: 14px; color: var(--t2); font-weight: 600; text-align: center; }
.qibla-info-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 20px;
  width: 100%;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
}
.qibla-deg { font-size: 48px; font-weight: 900; color: var(--teal); letter-spacing: -2px; }
.qibla-deg-label { font-size: 13px; color: var(--t3); margin-bottom: 8px; }
.qibla-note { font-size: 12px; color: var(--t3); line-height: 1.6; }

/* ─── Duas ─── */
.duas-cats-wrap { padding: 12px 0 4px; overflow-x: auto; }
.duas-cats { display: flex; gap: 8px; padding: 0 16px; min-width: max-content; }
.duas-cat-btn {
  padding: 8px 16px; border-radius: 20px;
  font-size: 13px; font-weight: 700;
  background: var(--surface); color: var(--t2);
  border: 1.5px solid var(--border);
  transition: all .15s; white-space: nowrap;
}
.duas-cat-btn.active { background: var(--teal); color: #fff; border-color: transparent; }

.dua-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
}
.dua-step { font-size: 11px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }
.dua-arabic { font-family: var(--font-arabic); font-size: 22px; color: var(--t1); text-align: right; direction: rtl; line-height: 1.7; margin-bottom: 8px; }
.dua-trans { font-size: 12px; color: var(--t3); font-style: italic; margin-bottom: 6px; line-height: 1.6; }
.dua-hinglish { font-size: 13px; color: var(--teal); font-weight: 500; line-height: 1.6; margin-bottom: 6px; }
.dua-english { font-size: 13px; color: var(--t2); line-height: 1.6; margin-bottom: 8px; }
.dua-note { font-size: 11px; color: var(--t4); background: var(--bg); padding: 6px 10px; border-radius: 8px; border-left: 3px solid var(--teal); }

/* ─── Asma ul Husna ─── */
.asma-hero {
  background: linear-gradient(160deg, #0F2044 0%, #1A3A7A 100%);
  padding: 28px 20px 24px;
  text-align: center;
  margin-bottom: 16px;
}
.asma-hero-ar { font-family: var(--font-arabic); font-size: 22px; color: rgba(255,255,255,.8); margin-bottom: 6px; line-height: 1.6; }
.asma-hero-title { font-size: 22px; font-weight: 800; color: #fff; }
.asma-hero-sub { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 4px; }
.asma-search-wrap { padding: 0 16px 16px; }
.asma-search {
  width: 100%; padding: 12px 16px;
  border-radius: var(--r);
  border: 1.5px solid var(--border);
  background: var(--surface);
  font-size: 14px; color: var(--t1);
}
.asma-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 20px; }
.asma-card {
  background: var(--surface);
  border-radius: var(--r);
  padding: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  display: flex; flex-direction: column; gap: 4px;
}
.asma-num { font-size: 11px; font-weight: 700; color: var(--teal); }
.asma-arabic { font-family: var(--font-arabic); font-size: 20px; color: var(--t1); text-align: right; direction: rtl; line-height: 1.4; }
.asma-english { font-size: 12px; font-weight: 700; color: var(--t2); }
.asma-meaning { font-size: 11px; color: var(--t3); line-height: 1.5; }

/* ─── Zakat ─── */
.zakat-hero { background: linear-gradient(160deg, #1A1200 0%, #4D3500 100%); padding: 24px 20px; text-align: center; margin-bottom: 16px; }
.zakat-hero-icon { font-size: 48px; margin-bottom: 10px; }
.zakat-hero-title { font-size: 22px; font-weight: 800; color: #fff; }
.zakat-hero-sub { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 4px; }
.zakat-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); gap: 12px; }
.zakat-row:last-child { border-bottom: none; }
.zakat-row > span { font-size: 13px; color: var(--t2); font-weight: 500; flex: 1; }
.num-input {
  width: 100px; padding: 8px 12px;
  border-radius: 10px; border: 1.5px solid var(--border);
  background: var(--surface2); font-size: 13px; color: var(--t1);
  font-family: var(--font); text-align: right;
}
.zakat-result-card {
  background: linear-gradient(135deg, var(--teal2), var(--teal));
  margin: 0 16px 20px; border-radius: var(--r-lg);
  padding: 20px; box-shadow: var(--sh-lg);
}
.zr-label { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 4px; }
.zr-nisab { font-size: 18px; font-weight: 700; color: rgba(255,255,255,.8); margin-bottom: 14px; }
.zr-wealth { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 14px; }
.zr-amount { font-size: 36px; font-weight: 900; color: #fff; letter-spacing: -1px; }
.zr-divider { height: 1px; background: rgba(255,255,255,.2); margin: 12px 0; }
.zr-eligible { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9); margin-top: 10px; padding: 8px 12px; background: rgba(0,0,0,.15); border-radius: 8px; }

/* ─── Calendar ─── */
.calendar-dual-header { display: flex; gap: 10px; margin-bottom: 16px; }
.cal-header-item { flex: 1; background: var(--teal-lt); border-radius: 12px; padding: 12px; text-align: center; }
.cal-h-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--teal); }
.cal-h-val { font-size: 14px; font-weight: 700; color: var(--t1); margin-top: 3px; }
.calendar-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-nav-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--surface2); border: 1.5px solid var(--border); font-size: 18px; color: var(--t2); display: flex; align-items: center; justify-content: center; }
.cal-nav-title { font-size: 15px; font-weight: 700; color: var(--t1); }
.cal-days-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 6px; }
.cal-days-header span { text-align: center; font-size: 11px; font-weight: 700; color: var(--t3); text-transform: uppercase; padding: 4px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 10px; }
.cal-day {
  aspect-ratio: 1; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: var(--t2);
  cursor: pointer; transition: all .15s;
  position: relative;
}
.cal-day:active { transform: scale(.9); }
.cal-day.today { background: var(--teal); color: #fff; font-weight: 800; }
.cal-day.friday { color: var(--teal); font-weight: 800; }
.cal-day.has-event::after { content: ''; position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.cal-day.other-month { color: var(--t4); }
.cal-legend { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--t3); padding-top: 8px; border-top: 1px solid var(--border); }
.cal-event-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cal-event-dot.ramadan { background: var(--purple); }
.cal-event-dot.friday { background: var(--teal); }
.cal-event-dot.islamic { background: var(--gold); }

.islamic-event-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 0; border-bottom: 1px solid var(--border);
}
.islamic-event-item:last-child { border-bottom: none; }
.iei-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.iei-name { font-size: 14px; font-weight: 700; color: var(--t1); }
.iei-date { font-size: 12px; color: var(--t3); margin-top: 2px; }
.iei-days { font-size: 13px; font-weight: 700; color: var(--teal); margin-left: auto; white-space: nowrap; flex-shrink: 0; }

/* ─── Stats ─── */
.stats-week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.swg-day { text-align: center; }
.swg-label { font-size: 10px; font-weight: 700; color: var(--t4); text-transform: uppercase; margin-bottom: 4px; }
.swg-bar-wrap { height: 60px; background: var(--border); border-radius: 4px; overflow: hidden; position: relative; }
.swg-bar-fill { position: absolute; bottom: 0; left: 0; right: 0; background: var(--teal); border-radius: 4px; transition: height .5s; }
.swg-pct { font-size: 9px; color: var(--t3); margin-top: 3px; }

.stats-ring-card { display: flex; flex-direction: column; align-items: center; }
.stats-ring-wrap { position: relative; width: 140px; height: 140px; margin-bottom: 14px; }
.stats-ring-wrap svg { position: absolute; inset: 0; }
.stats-ring-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.stats-ring-pct { font-size: 28px; font-weight: 900; color: var(--teal); }
.stats-ring-lbl { font-size: 11px; color: var(--t3); font-weight: 600; }
.stats-month-row { display: flex; gap: 20px; }
.stats-month-stat { text-align: center; }
.stats-month-stat span { display: block; font-size: 24px; font-weight: 900; color: var(--t1); }
.stats-month-stat small { font-size: 11px; color: var(--t3); font-weight: 600; }
.prayer-bar-row { margin-bottom: 10px; }
.pbr-label { display: flex; justify-content: space-between; margin-bottom: 4px; }
.pbr-name { font-size: 13px; font-weight: 700; color: var(--t1); }
.pbr-pct { font-size: 12px; color: var(--teal); font-weight: 700; }
.pbr-bar { height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.pbr-fill { height: 100%; background: var(--teal); border-radius: 4px; transition: width .8s; }

/* ─── Modals ─── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  z-index: 500;
  display: flex; align-items: flex-end; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
  backdrop-filter: blur(4px);
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-box {
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 24px 20px 32px;
  width: 100%; max-width: 480px;
  transform: translateY(40px);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
  max-height: 85vh; overflow-y: auto;
}
.modal-overlay.open .modal-box { transform: translateY(0); }
.modal-handle { width: 40px; height: 4px; background: var(--border2); border-radius: 2px; margin: 0 auto 16px; }
.modal-title { font-size: 18px; font-weight: 800; color: var(--t1); margin-bottom: 6px; }
.modal-desc { font-size: 13px; color: var(--t3); margin-bottom: 16px; }
.modal-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.modal-lbl { font-size: 14px; font-weight: 600; color: var(--t2); }
.modal-btns { display: flex; gap: 10px; margin-top: 16px; }
.modal-btns > * { flex: 1; }
.time-input {
  padding: 10px 14px; border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface2); font-size: 15px;
  color: var(--t1); font-family: var(--font);
}
.modal-reset-btn { width: 100%; padding: 12px; margin-top: 8px; color: var(--t3); font-size: 13px; font-weight: 600; text-align: center; }
.modal-input {
  width: 100%; padding: 13px 16px;
  border: 1.5px solid var(--border); border-radius: var(--r);
  background: var(--surface2); font-size: 14px;
  color: var(--t1); font-family: var(--font);
  margin-bottom: 12px;
}
.login-icon-wrap { font-size: 40px; text-align: center; margin-bottom: 12px; }
.login-err { color: var(--red); font-size: 13px; font-weight: 600; display: none; margin-bottom: 10px; }
.login-err.show { display: block; }
.qaza-inp-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.qaza-inp-row span { font-size: 15px; font-weight: 600; color: var(--t1); }
.modal-overlay.center { align-items: center; }
.modal-overlay.center .modal-box { border-radius: var(--r-xl); }
.confirm-icon { font-size: 36px; text-align: center; margin-bottom: 8px; }
.confirm-msg { font-size: 16px; font-weight: 600; color: var(--t1); text-align: center; margin-bottom: 14px; }

/* ─── Toast ─── */
#toast {
  position: fixed; bottom: calc(var(--nav-h) + 16px); left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1A2236; color: #fff;
  padding: 12px 20px; border-radius: var(--r);
  font-size: 14px; font-weight: 600;
  box-shadow: var(--sh-lg);
  z-index: 9999;
  opacity: 0; pointer-events: none;
  transition: all .3s;
  max-width: 300px; text-align: center;
}
#toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ─── Location Screen ─── */
.location-screen {
  position: fixed; inset: 0;
  background: linear-gradient(160deg, #0A0E1A 0%, #0F1F3D 50%, #0A2A20 100%);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
/* When hidden, make completely non-interactive */
.location-screen[style*="display:none"],
.location-screen[style*="display: none"] {
  pointer-events: none !important;
  visibility: hidden !important;
}
.ls-particles { position: absolute; inset: 0; pointer-events: none; }
.ls-particle {
  position: absolute; border-radius: 50%;
  background: rgba(28,122,110,.4);
  animation: float-up 8s infinite;
}
.ls-particle:nth-child(1) { width: 8px; height: 8px; left: 20%; animation-delay: 0s; }
.ls-particle:nth-child(2) { width: 5px; height: 5px; left: 40%; animation-delay: 1.5s; }
.ls-particle:nth-child(3) { width: 10px; height: 10px; left: 60%; animation-delay: 3s; }
.ls-particle:nth-child(4) { width: 6px; height: 6px; left: 75%; animation-delay: 4.5s; }
.ls-particle:nth-child(5) { width: 7px; height: 7px; left: 30%; animation-delay: 2s; }
.ls-particle:nth-child(6) { width: 4px; height: 4px; left: 85%; animation-delay: 5.5s; }
@keyframes float-up {
  0% { transform: translateY(100vh) scale(0); opacity: 0; }
  10% { opacity: .8; }
  90% { opacity: .4; }
  100% { transform: translateY(-100px) scale(1.5); opacity: 0; }
}
.ls-body { position: relative; z-index: 2; width: 100%; max-width: 380px; text-align: center; }
.ls-icon-wrap { position: relative; display: inline-block; margin-bottom: 16px; }
.ls-glow-ring {
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(28,122,110,.15);
  border: 2px solid rgba(28,122,110,.4);
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  animation: glow-pulse 2s ease-in-out infinite;
}
@keyframes glow-pulse { 0%, 100% { transform: translate(-50%,-50%) scale(1); opacity: .6; } 50% { transform: translate(-50%,-50%) scale(1.2); opacity: 1; } }
.ls-mosque { font-size: 56px; position: relative; z-index: 2; }
.ls-title { font-size: 28px; font-weight: 900; color: #fff; letter-spacing: -1px; }
.ls-arabic { font-family: var(--font-arabic); font-size: 18px; color: rgba(255,255,255,.6); margin-top: 6px; line-height: 1.6; }
.ls-subtitle { font-size: 13px; color: rgba(255,255,255,.4); margin-bottom: 24px; }
.ls-card { background: var(--surface); border-radius: var(--r-xl); padding: 20px; box-shadow: var(--sh-xl); text-align: left; margin-bottom: 14px; }
.ls-perm-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.ls-perm-row:last-of-type { border-bottom: none; margin-bottom: 16px; }
.ls-perm-icon-wrap { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.ls-icon-loc { background: var(--blue-lt); }
.ls-icon-notif { background: var(--purple-lt); }
.ls-perm-name { font-size: 14px; font-weight: 700; color: var(--t1); }
.ls-perm-desc { font-size: 12px; color: var(--t3); margin-top: 2px; }
.ls-perm-check { font-size: 18px; color: var(--t4); margin-left: auto; font-weight: 700; }
.ls-perm-check.ok { color: var(--green); }
.ls-allow-btn {
  width: 100%; padding: 15px;
  background: linear-gradient(135deg, var(--teal2), var(--teal));
  color: #fff; border-radius: var(--r);
  font-size: 16px; font-weight: 800;
  box-shadow: 0 6px 20px rgba(28,122,110,.4);
  margin-bottom: 10px;
  transition: all .2s;
}
.ls-allow-btn:active { transform: scale(.97); }
.ls-skip-btn { width: 100%; padding: 12px; color: var(--t3); font-size: 13px; font-weight: 600; }
.ls-note { font-size: 11px; color: rgba(255,255,255,.35); text-align: center; }

/* ─── Overlays ─── */
.full-overlay {
  position: fixed; inset: 0; z-index: 900;
  background: linear-gradient(160deg, #0A0A1A 0%, #1A2A1A 100%);
  display: none;
  flex-direction: column; align-items: center; justify-content: center;
  padding: 24px;
}
.full-overlay.show { display: flex; }
.fo-dismiss-btn { position: absolute; top: 20px; right: 20px; padding: 8px 16px; background: rgba(255,255,255,.1); border-radius: 20px; color: rgba(255,255,255,.7); font-size: 13px; font-weight: 600; }
.fo-icon { font-size: 72px; margin-bottom: 16px; }
.fo-title { font-size: 28px; font-weight: 900; color: #fff; text-align: center; letter-spacing: -1px; }
.fo-label { font-size: 14px; color: rgba(255,255,255,.5); text-transform: uppercase; letter-spacing: 2px; margin-top: 8px; }
.fo-timer { font-size: 64px; font-weight: 900; color: var(--teal); letter-spacing: -3px; font-variant-numeric: tabular-nums; }
.fo-inst { font-size: 16px; color: rgba(255,255,255,.8); margin-top: 12px; }
.fo-arabic { font-family: var(--font-arabic); font-size: 20px; color: rgba(255,255,255,.6); margin-top: 6px; }
.salah-active-overlay { background: linear-gradient(160deg, #0A0A0A 0%, #001A14 100%); }
.so-star { font-size: 28px; margin-bottom: 8px; color: var(--gold); animation: spin-slow 10s linear infinite; }
@keyframes spin-slow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.so-sub { font-size: 14px; color: rgba(255,255,255,.5); margin-top: 6px; }
.so-back { font-size: 13px; color: rgba(255,255,255,.4); margin-top: 20px; }

/* ─── Wudu Guide ─── */
.wudu-step {
  background: var(--surface);
  border-radius: var(--r);
  padding: 16px;
  margin: 0 16px 10px;
  display: flex; gap: 14px;
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
}
.wudu-step-num {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--teal); color: #fff;
  font-size: 16px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.wudu-step-body { flex: 1; }
.wudu-step-title { font-size: 15px; font-weight: 700; color: var(--t1); }
.wudu-step-ar { font-family: var(--font-arabic); font-size: 18px; color: var(--teal); text-align: right; direction: rtl; margin: 4px 0; }
.wudu-step-desc { font-size: 13px; color: var(--t3); line-height: 1.6; }

/* ─── Hadith View ─── */
.hadith-big-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  margin: 16px;
  padding: 24px;
  border: 1px solid var(--border);
  box-shadow: var(--sh);
}
.hadith-cat-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 14px; }
.hadith-big-ar { font-family: var(--font-arabic); font-size: 24px; color: var(--t1); text-align: right; direction: rtl; line-height: 1.8; margin-bottom: 14px; border-bottom: 1px solid var(--border); padding-bottom: 14px; }
.hadith-big-en { font-size: 15px; color: var(--t2); line-height: 1.7; font-style: italic; margin-bottom: 12px; }
.hadith-big-src { font-size: 12px; font-weight: 700; color: var(--teal); }
.hadith-big-lesson { background: var(--teal-lt); border-radius: 10px; padding: 12px 14px; margin-top: 12px; font-size: 13px; color: var(--teal2); line-height: 1.6; border-left: 3px solid var(--teal); }

/* ─── Quiz ─── */
.quiz-hero { background: linear-gradient(160deg, #1E1B4B, #3730A3); padding: 24px 20px; text-align: center; margin-bottom: 16px; }
.quiz-hero-title { font-size: 22px; font-weight: 800; color: #fff; }
.quiz-hero-sub { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 4px; }
.quiz-score-strip { background: rgba(255,255,255,.1); border-radius: 12px; padding: 10px 16px; margin-top: 16px; display: flex; gap: 20px; justify-content: center; }
.quiz-score-strip span { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9); }
.quiz-card { background: var(--surface); border-radius: var(--r-lg); margin: 0 16px 14px; padding: 20px; border: 1px solid var(--border); box-shadow: var(--sh); }
.quiz-q-num { font-size: 11px; font-weight: 700; letter-spacing: .5px; color: var(--teal); text-transform: uppercase; margin-bottom: 10px; }
.quiz-question { font-size: 16px; font-weight: 700; color: var(--t1); line-height: 1.5; margin-bottom: 18px; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-option {
  padding: 13px 16px; border-radius: 12px;
  border: 2px solid var(--border);
  font-size: 14px; font-weight: 600; color: var(--t2);
  text-align: left; transition: all .15s;
}
.quiz-option:active { transform: scale(.98); }
.quiz-option.correct { background: var(--green-lt); border-color: var(--green); color: var(--green); }
.quiz-option.wrong   { background: var(--red-lt);   border-color: var(--red);   color: var(--red); }
.quiz-option.selected { background: var(--teal-lt); border-color: var(--teal); color: var(--teal); }

/* ─── Stories ─── */
.story-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  margin: 0 16px 14px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
}
.story-header { padding: 16px 16px 12px; display: flex; align-items: flex-start; gap: 12px; }
.story-icon { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }
.story-title { font-size: 16px; font-weight: 800; color: var(--t1); line-height: 1.3; }
.story-meta { font-size: 11px; color: var(--t3); margin-top: 3px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.story-excerpt { padding: 0 16px 14px; font-size: 13px; color: var(--t2); line-height: 1.7; }
.story-read-btn { margin: 0 16px 16px; }
.story-full { padding: 0 16px 20px; font-size: 14px; color: var(--t2); line-height: 1.8; display: none; }
.story-full.expanded { display: block; }

/* ─── Reminders ─── */
.reminders-hero { background: linear-gradient(160deg, #1A1A3D 0%, #2D2D6B 100%); padding: 28px 20px 24px; text-align: center; position: relative; overflow: hidden; }
.rh-shimmer { position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); animation: shimmer 3s infinite; }
@keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.rh-icon { font-size: 40px; margin-bottom: 8px; position: relative; }
.rh-title { font-size: 22px; font-weight: 800; color: #fff; position: relative; }
.rh-subtitle { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 4px; position: relative; }
.rem-filter-wrap { padding: 12px 0 6px; overflow-x: auto; }
.rem-filters { display: flex; gap: 8px; padding: 0 16px; min-width: max-content; }
.rem-filter-btn {
  padding: 7px 14px; border-radius: 20px;
  font-size: 13px; font-weight: 700;
  background: var(--surface); color: var(--t2);
  border: 1.5px solid var(--border); white-space: nowrap;
  transition: all .15s;
}
.rem-filter-btn.active { background: var(--teal); color: #fff; border-color: transparent; }
.reminders-list { padding: 0 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.reminder-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--sh-sm);
  cursor: pointer;
  transition: transform .15s;
}
.reminder-card:active { transform: scale(.98); }
.rem-cat { font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; margin-bottom: 8px; display: inline-block; padding: 2px 8px; border-radius: 8px; }
.rem-arabic { font-family: var(--font-arabic); font-size: 20px; color: var(--teal); text-align: right; direction: rtl; line-height: 1.6; margin-bottom: 6px; }
.rem-title { font-size: 15px; font-weight: 700; color: var(--t1); margin-bottom: 4px; }
.rem-text { font-size: 13px; color: var(--t3); line-height: 1.6; }
.rem-notif-header { padding: 14px 16px; font-size: 14px; font-weight: 700; color: var(--t1); background: var(--teal-xlt); border-bottom: 1px solid var(--border); }

/* ─── Install Banner ─── */
.install-banner {
  background: linear-gradient(135deg, var(--teal2), var(--teal));
  border-radius: var(--r-lg); margin: 0 16px 14px;
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--sh);
}
.ib-icon { font-size: 28px; flex-shrink: 0; }
.ib-text { flex: 1; }
.ib-title { font-size: 14px; font-weight: 700; color: #fff; }
.ib-sub { font-size: 12px; color: rgba(255,255,255,.7); }
.ib-install-btn { background: rgba(255,255,255,.2); border: 2px solid rgba(255,255,255,.4); color: #fff; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; flex-shrink: 0; }
.ib-close { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.15); color: rgba(255,255,255,.7); font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ─── Admin ─── */
.admin-notice { background: rgba(220,38,38,.06); border: 1px solid rgba(220,38,38,.2); border-radius: 10px; padding: 12px 14px; margin: 0 16px 12px; font-size: 13px; color: var(--t2); line-height: 1.6; }
.admin-notif-test-box { margin: 14px 16px; background: var(--surface2); border-radius: var(--r); padding: 14px; border: 1px solid var(--border); }
.admin-notif-title { font-size: 13px; font-weight: 700; color: var(--t1); margin-bottom: 4px; }
.admin-notif-desc { font-size: 12px; color: var(--t3); margin-bottom: 12px; }
.admin-notif-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.admin-test-all-btn { width: 100%; }
.per-prayer-notif-list { padding: 6px 16px; }
.ppn-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.ppn-row:last-child { border-bottom: none; }
.ppn-row span { font-size: 14px; font-weight: 600; color: var(--t1); }

/* ─── Themes Grid ─── */
.themes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px 16px; }
.theme-btn {
  border-radius: var(--r); padding: 12px 8px;
  border: 2.5px solid var(--border);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: all .2s;
}
.theme-btn.active { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(28,122,110,.15); }
.theme-swatch { width: 36px; height: 36px; border-radius: 50%; margin-bottom: 2px; }
.theme-name { font-size: 11px; font-weight: 700; color: var(--t2); text-align: center; }

/* ─── Masjid Times ─── */
.masjid-time-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); }
.masjid-time-item:last-child { border-bottom: none; }
.mt-name { font-size: 14px; font-weight: 700; color: var(--t1); }
.mt-time { font-size: 14px; color: var(--teal); font-weight: 700; }
.mt-badge { font-size: 10px; background: var(--teal-lt); color: var(--teal); padding: 2px 8px; border-radius: 8px; font-weight: 700; }
.mt-reset { font-size: 12px; color: var(--red); font-weight: 600; }

/* ─── Birthday ─── */
.bday-hero-card { background: linear-gradient(160deg, #0A0A2A, #1A1A5A); padding: 28px 20px 24px; text-align: center; margin-bottom: 16px; }
.bday-hero-icon { font-size: 52px; margin-bottom: 12px; }
.bday-hero-title { font-size: 24px; font-weight: 900; color: #fff; }
.bday-hero-sub { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 4px; }
.bday-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.bday-tab { flex: 1; padding: 10px; border-radius: 12px; font-size: 13px; font-weight: 700; background: var(--surface2); color: var(--t2); border: 1.5px solid var(--border); transition: all .2s; }
.bday-tab.active { background: var(--teal); color: #fff; border-color: transparent; }
.bday-row { margin-bottom: 14px; }
.bday-label { display: block; font-size: 13px; font-weight: 600; color: var(--t2); margin-bottom: 6px; }
.bday-result { background: var(--teal-lt); border-radius: var(--r); padding: 16px; }
.bday-result p { font-size: 14px; color: var(--teal2); font-weight: 500; margin-bottom: 6px; line-height: 1.5; }

/* ─── Quran ─── */
.quran-tabs { display: flex; gap: 8px; padding: 12px 16px; overflow-x: auto; }
.quran-tab { flex-shrink: 0; padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 700; background: var(--surface2); color: var(--t2); border: 1.5px solid var(--border); transition: all .15s; }
.quran-tab.active { background: var(--teal); color: #fff; border-color: transparent; }
.surah-list { padding: 0 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.surah-row {
  background: var(--surface); border-radius: var(--r);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  border: 1px solid var(--border); box-shadow: var(--sh-sm);
  cursor: pointer; transition: all .15s;
}
.surah-row:active { background: var(--teal-lt); transform: scale(.99); }
.surah-num { width: 36px; height: 36px; border-radius: 10px; background: var(--teal-lt); color: var(--teal); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.surah-info { flex: 1; min-width: 0; }
.surah-name { font-size: 15px; font-weight: 700; color: var(--t1); }
.surah-meta { font-size: 11px; color: var(--t3); margin-top: 2px; font-weight: 500; }
.surah-arabic { font-family: var(--font-arabic); font-size: 18px; color: var(--teal); }
.ayah-reader { padding: 0 16px 20px; }
.ayah-item { padding: 16px 0; border-bottom: 1px solid var(--border); }
.ayah-item:last-child { border-bottom: none; }
.ayah-arabic { font-family: var(--font-arabic); font-size: 24px; color: var(--t1); text-align: right; direction: rtl; line-height: 1.9; margin-bottom: 8px; }
.ayah-num { font-size: 11px; font-weight: 700; color: var(--teal); margin-bottom: 4px; }
.ayah-trans { font-size: 13px; color: var(--t3); line-height: 1.7; }
.ayah-hinglish { font-size: 13px; color: var(--teal2); font-weight: 500; margin-top: 4px; line-height: 1.6; font-style: italic; }
.quran-back-btn { padding: 12px 16px; display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--teal); }

/* ─── Namaz Guide ─── */
.namaz-hero { background: linear-gradient(160deg, #003D38 0%, #006B5E 100%); padding: 24px 20px; text-align: center; margin-bottom: 0; }
.namaz-hero-title { font-size: 22px; font-weight: 800; color: #fff; }
.namaz-hero-sub { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 4px; }
.namaz-tabs { display: flex; background: var(--surface2); border-bottom: 1px solid var(--border); }
.namaz-tab { flex: 1; padding: 13px; font-size: 13px; font-weight: 700; color: var(--t3); border-bottom: 3px solid transparent; transition: all .2s; }
.namaz-tab.active { color: var(--teal); border-bottom-color: var(--teal); }

/* ─── Ramadan view ─── */
.ramadan-hero { background: linear-gradient(160deg, #1E1B4B 0%, #312E81 100%); padding: 28px 20px 24px; text-align: center; margin-bottom: 16px; position: relative; overflow: hidden; }
.ramadan-hero::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ffffff' fill-opacity='0.08'/%3E%3C/svg%3E"); }
.ramadan-hero-moon { font-size: 48px; position: relative; }
.ramadan-hero-title { font-family: var(--font-arabic); font-size: 28px; color: #fff; position: relative; line-height: 1.4; }
.ramadan-hero-sub { font-size: 13px; color: rgba(255,255,255,.5); margin-top: 4px; position: relative; }

/* ─── Divider ─── */
.divider { height: 1px; background: var(--border); margin: 14px 0; }
.sub-title { font-size: 14px; font-weight: 700; color: var(--t1); }
.sub-desc { font-size: 12px; color: var(--t3); margin-top: 2px; }
.qaza-roza-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.qaza-roza-num { font-size: 28px; font-weight: 900; color: var(--red); }
.taraweeh-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; }
.taraweeh-info { font-size: 13px; color: var(--t3); margin-top: 4px; }
.taraweeh-bar-bg { height: 8px; background: var(--border); border-radius: 4px; margin-top: 8px; overflow: hidden; }
.taraweeh-bar-fill { height: 100%; background: var(--purple); border-radius: 4px; transition: width .5s; }

/* ─── Footer ─── */
.footer { text-align: center; padding: 20px 16px; }
.footer-main { font-size: 12px; color: var(--t4); font-weight: 600; }
.footer-sub { font-size: 11px; color: var(--t4); margin-top: 3px; }

/* ─── Loading ─── */
.loading-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; gap: 12px; color: var(--t3); font-size: 14px; }
.spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--teal); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 32px 20px; gap: 10px; }
.empty-icon { font-size: 48px; opacity: .5; }
.empty-text { font-size: 14px; color: var(--t3); text-align: center; font-weight: 500; }
.muted-text { font-size: 13px; color: var(--t4); padding: 8px 0; }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--t3); flex-wrap: wrap; margin-top: 8px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.legend-dot.green { background: var(--green); }
.legend-dot.yellow { background: var(--gold); }
.legend-dot.red { background: var(--red); }
.legend-dot.gray { background: var(--border2); }

/* ─── Status Legend ─── */
.status-legend { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--t3); flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--border); margin-top: 8px; }

/* ─── Notification Test Section ─── */
.notif-health-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.notif-health-row:last-child { border-bottom: none; }
.nhr-icon { font-size: 18px; width: 24px; text-align: center; }
.nhr-label { flex: 1; font-size: 13px; color: var(--t2); font-weight: 500; }
.nhr-status { font-size: 12px; font-weight: 700; }
.nhr-status.ok { color: var(--green); }
.nhr-status.warn { color: var(--gold); }
.nhr-status.fail { color: var(--red); }

/* ─── Update perm sheet ─── */
#update-perm-sheet .modal-box { padding-top: 20px; }
.ups-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.ups-row:last-of-type { border-bottom: none; margin-bottom: 14px; }
.ups-icon { font-size: 24px; width: 32px; text-align: center; flex-shrink: 0; }
.ups-label { flex: 1; font-size: 14px; font-weight: 600; color: var(--t1); }
.ups-status { font-size: 12px; font-weight: 700; color: var(--t3); }
.ups-status.ok { color: var(--green); }
.ups-status.denied { color: var(--red); }
.ups-city-input { width: 100%; padding: 12px 16px; border-radius: var(--r); border: 1.5px solid var(--border); background: var(--surface2); font-size: 14px; color: var(--t1); font-family: var(--font); }

/* ─── Per-prayer notif section ─── */
.per-prayer-notif-section { margin: 10px 16px; background: var(--surface2); border-radius: var(--r); padding: 14px; border: 1px solid var(--border); }
.ppns-title { font-size: 13px; font-weight: 700; color: var(--t1); margin-bottom: 12px; }
.ppns-grid { display: flex; flex-direction: column; gap: 8px; }
.ppns-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.ppns-row:last-child { border-bottom: none; }
.ppns-name { font-size: 14px; font-weight: 700; color: var(--t1); flex: 1; }
.ppns-time { font-size: 12px; color: var(--t3); }

/* ─── Monthly schedule print ─── */
@media print {
  .app-header, #nav, .side-drawer, .drawer-overlay, #toast, .full-overlay,
  .install-banner, .install-btn, .hero-card, .feature-grid, .hadith-card { display: none !important; }
  .view { display: block !important; position: relative !important; }
  #view-calendar { display: block !important; }
  .card { box-shadow: none; border: 1px solid #ccc; }
}

/* ─── Responsive ─── */
@media (min-width: 400px) {
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 480px) {
  .feature-grid { grid-template-columns: repeat(6, 1fr); }
  .asma-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Accessibility / Focus ─── */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
button:focus-visible { outline: 2px solid var(--teal); }

/* ─── Transitions ─── */
.view { will-change: auto; }
.card, .feat-btn, .prayer-card, .dua-card, .reminder-card, .surah-row {
  transition: transform .15s, box-shadow .15s, background .2s;
}

/* ─── Dark mode overrides ─── */
[data-theme="dark"] .app-header { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] #nav { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] .prayer-card.current { background: rgba(28,122,110,.15); }
[data-theme="dark"] .card { background: var(--surface); }
[data-theme="dark"] .modal-box { background: var(--surface); }
[data-theme="dark"] .side-drawer { background: var(--surface); }
[data-theme="dark"] .asma-search { background: var(--surface2); color: var(--t1); }
[data-theme="dark"] .modal-input { background: var(--surface2); color: var(--t1); }
[data-theme="dark"] .set-select { background: var(--surface2); color: var(--t1); }
[data-theme="dark"] .num-input { background: var(--surface2); color: var(--t1); }
[data-theme="dark"] .time-input { background: var(--surface2); color: var(--t1); }
[data-theme="dark"] .ups-city-input { background: var(--surface2); color: var(--t1); }

/* ─── Extra: Jumuah Section ─── */
.jumuah-section-card {
  background: linear-gradient(135deg, #451A03, #92400E);
  border-radius: var(--r-lg); margin: 0 16px 14px;
  padding: 18px; box-shadow: var(--sh);
}
.jumuah-title { font-size: 16px; font-weight: 800; color: #fff; margin-bottom: 12px; }
.jumuah-sessions { display: flex; flex-direction: column; gap: 8px; }
.jumuah-session { background: rgba(255,255,255,.12); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; justify-content: space-between; }
.jus-name { font-size: 14px; font-weight: 700; color: #fff; }
.jus-time { font-size: 16px; font-weight: 800; color: #FCD34D; }
.jus-loc { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 2px; }

/* ─── Notification History ─── */
.notif-log-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.notif-log-item:last-child { border-bottom: none; }
.nli-title { font-size: 13px; font-weight: 700; color: var(--t1); }
.nli-body { font-size: 12px; color: var(--t3); }
.nli-time { font-size: 10px; color: var(--t4); margin-top: 2px; }

/* ─── Reminder Detail Modal ─── */
.rdm-overlay {
  position: fixed; inset: 0; z-index: 600;
  background: rgba(0,0,0,.7);
  display: flex; align-items: flex-end;
  opacity: 0; pointer-events: none; transition: opacity .25s;
  backdrop-filter: blur(4px);
}
.rdm-overlay.open { opacity: 1; pointer-events: all; }
.rdm-box {
  background: var(--surface);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  padding: 24px 20px 36px;
  width: 100%; max-width: 480px; margin: 0 auto;
  max-height: 80vh; overflow-y: auto;
  transform: translateY(40px);
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.rdm-overlay.open .rdm-box { transform: translateY(0); }
.rdm-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; background: var(--border); color: var(--t2); font-size: 14px; display: flex; align-items: center; justify-content: center; }
.rdm-category-badge { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; background: var(--teal-lt); color: var(--teal); margin-bottom: 12px; }
.rdm-arabic { font-family: var(--font-arabic); font-size: 22px; color: var(--teal); direction: rtl; text-align: right; line-height: 1.6; margin-bottom: 10px; }
.rdm-title { font-size: 18px; font-weight: 800; color: var(--t1); margin-bottom: 8px; }
.rdm-text { font-size: 14px; color: var(--t2); line-height: 1.7; margin-bottom: 10px; }
.rdm-source { font-size: 12px; font-weight: 700; color: var(--t3); margin-bottom: 16px; padding: 8px 12px; background: var(--bg); border-radius: 8px; }
.rdm-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.rdm-share-btn, .rdm-wa-btn, .rdm-ig-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 10px;
  font-size: 13px; font-weight: 700;
  transition: all .15s;
}
.rdm-share-btn { background: var(--teal-lt); color: var(--teal); border: 1px solid rgba(28,122,110,.3); }
.rdm-wa-btn { background: #E8F9ED; color: #1B7A30; border: 1px solid rgba(27,122,48,.3); }
.rdm-ig-btn { background: var(--pink-lt); color: var(--pink); border: 1px solid rgba(190,24,93,.3); }
.rdm-share-btn:active, .rdm-wa-btn:active, .rdm-ig-btn:active { transform: scale(.96); }

/* ─── Confetti ─── */
#confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 99999; display: none; }

/* ─── Fmt badge ─── */
.fmt-fixed-badge { background: var(--teal-lt); color: var(--teal); padding: 5px 12px; border-radius: 10px; font-size: 12px; font-weight: 700; flex-shrink: 0; }

/* ─── Search overlay ─── */
.search-overlay { position: fixed; inset: 0; z-index: 400; background: var(--bg); display: flex; flex-direction: column; }
.search-header { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.search-input { flex: 1; padding: 10px 14px; border-radius: var(--r); border: 1.5px solid var(--border); background: var(--surface2); font-size: 15px; color: var(--t1); font-family: var(--font); }
.search-close { padding: 8px 14px; color: var(--teal); font-size: 14px; font-weight: 700; }
.search-results { flex: 1; overflow-y: auto; padding: 12px 16px; }
.search-result-item { padding: 12px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.sri-title { font-size: 14px; font-weight: 700; color: var(--t1); }
.sri-sub { font-size: 12px; color: var(--t3); margin-top: 3px; }
.sri-type { font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--teal); text-transform: uppercase; }

/* ─── About modal content ─── */
.about-icon { font-size: 52px; text-align: center; margin-bottom: 12px; }
.about-name { font-size: 20px; font-weight: 900; color: var(--t1); text-align: center; }
.about-ver { font-size: 13px; color: var(--teal); font-weight: 600; text-align: center; margin-bottom: 16px; }
.about-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.about-row:last-child { border-bottom: none; }
.about-icon-sm { font-size: 18px; width: 24px; text-align: center; }
.about-lbl { font-size: 13px; font-weight: 600; color: var(--t2); }

/* ─── Offset/Jumuah modal inputs ─── */
.offset-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); gap: 12px; }
.offset-row:last-child { border-bottom: none; }
.offset-name { font-size: 14px; font-weight: 700; color: var(--t1); }
.offset-inp { width: 70px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface2); font-size: 14px; color: var(--t1); text-align: center; }
.jum-session-row { padding: 12px 0; border-bottom: 1px solid var(--border); }
.jum-session-row:last-child { border-bottom: none; }
.jum-row-inner { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.jum-inp { flex: 1; min-width: 90px; padding: 9px 12px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface2); font-size: 13px; color: var(--t1); }

/* ─── Stats achievements ─── */
.achievement-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.achievement-item:last-child { border-bottom: none; }
.ach-icon { font-size: 28px; }
.ach-name { font-size: 14px; font-weight: 700; color: var(--t1); }
.ach-desc { font-size: 12px; color: var(--t3); margin-top: 2px; }
.ach-badge { margin-left: auto; background: var(--gold-lt); color: var(--gold); padding: 4px 10px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ─── Admin tap ─── */
#admin-section { display: none; }

/* ── Quran reader extra styles ── */
.quran-last-read { margin: 0 16px 14px; background: var(--teal-lt); border: 1px solid rgba(28,122,110,.3); border-radius: var(--r); padding: 14px; cursor: pointer; }
.srh-controls { display: flex; gap: 6px; flex-wrap: wrap; }
.srh-ctrl-btn { padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--surface2); border: 1.5px solid var(--border); color: var(--t2); transition: all .15s; }
.srh-ctrl-btn.active { background: var(--teal); color: #fff; border-color: transparent; }
.surah-title-card { background: linear-gradient(135deg, var(--teal2), var(--teal)); padding: 20px; margin: 0 16px 14px; border-radius: var(--r-lg); text-align: center; }
.stc-num { font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.stc-arabic { font-family: var(--font-arabic); font-size: 28px; color: #fff; margin: 6px 0; line-height: 1.4; }
.stc-name { font-size: 16px; font-weight: 700; color: rgba(255,255,255,.9); }
.stc-meta { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 4px; }
.bismillah-text { font-family: var(--font-arabic); font-size: 22px; text-align: center; color: var(--teal); padding: 12px; margin-bottom: 8px; }
.ayahs-container { padding: 0 16px 20px; }
.ayah-block { padding: 16px 0; border-bottom: 1px solid var(--border); }
.ayah-block:last-child { border-bottom: none; }
.ayah-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.ayah-number-badge { width: 28px; height: 28px; border-radius: 50%; background: var(--teal-lt); color: var(--teal); font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ayah-actions { display: flex; gap: 4px; }
.ayah-action-btn { width: 28px; height: 28px; border-radius: 8px; background: var(--surface2); font-size: 14px; display: flex; align-items: center; justify-content: center; }
.ayah-arabic { font-family: var(--font-arabic); font-size: var(--ar-size, 28px); color: var(--t1); text-align: right; direction: rtl; line-height: 1.9; margin-bottom: 8px; }
.ayah-meanings-block { display: flex; flex-direction: column; gap: 4px; }
.aym-row { display: flex; gap: 8px; align-items: flex-start; }
.aym-lang { font-size: 10px; font-weight: 700; background: var(--teal-lt); color: var(--teal); padding: 2px 6px; border-radius: 4px; margin-top: 2px; flex-shrink: 0; }
.aym-hi-tag { background: var(--gold-lt); color: var(--gold); }
.aym-hd-tag { background: var(--purple-lt); color: var(--purple); }
.aym-ur-tag { background: var(--blue-lt); color: var(--blue); }
.aym-text { font-size: 13px; color: var(--t2); line-height: 1.6; flex: 1; }
.aym-hindi { font-size: 13px; }
.quran-lang-hint { font-size: 12px; color: var(--t3); padding: 6px 16px; background: var(--bg); text-align: center; }
.quran-back-btn { display: flex; align-items: center; gap: 6px; padding: 12px 16px; font-size: 14px; font-weight: 700; color: var(--teal); }
.juz-row { padding: 14px 16px; background: var(--surface); border-bottom: 1px solid var(--border); cursor: pointer; display: flex; align-items: center; gap: 14px; }
.juz-num { font-size: 16px; font-weight: 800; color: var(--teal); min-width: 50px; }
.juz-name { font-size: 14px; font-weight: 700; color: var(--t1); flex: 1; }
.juz-range { font-size: 12px; color: var(--t3); }
.surah-reader-header { background: var(--bg); padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border); }
.sr-num { width: 36px; height: 36px; border-radius: 10px; background: var(--teal-lt); color: var(--teal); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sr-body { flex: 1; min-width: 0; }
.sr-name-en { font-size: 15px; font-weight: 700; color: var(--t1); }
.sr-meta { font-size: 11px; color: var(--t3); margin-top: 2px; }
.sr-arabic { font-family: var(--font-arabic); font-size: 18px; color: var(--teal); }

/* ── Toast colors ── */
.toast-green { background: var(--green); }
.toast-red { background: var(--red); }
.toast-gold { background: var(--gold); }

/* ── Permission sheet ── */
#perm-sheet { position: fixed; inset: 0; z-index: 800; }

/* ── Search overlay ── */
.search-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .2s; display: flex; flex-direction: column; justify-content: flex-start; padding-top: 60px; backdrop-filter: blur(4px); }
.search-overlay.show { opacity: 1; pointer-events: all; }
.search-header { background: var(--surface); margin: 0 16px; border-radius: var(--r-lg); padding: 12px 16px; display: flex; align-items: center; gap: 10px; box-shadow: var(--sh-xl); }
.search-input { flex: 1; border: none; background: transparent; font-size: 15px; color: var(--t1); font-family: var(--font); outline: none; }
.search-close { color: var(--teal); font-size: 14px; font-weight: 700; }
.search-results { background: var(--surface); margin: 10px 16px; border-radius: var(--r-lg); overflow-y: auto; max-height: 70vh; box-shadow: var(--sh-xl); }
.search-result-item { padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.search-result-item:last-child { border-bottom: none; }
.search-result-item:active { background: var(--teal-lt); }
.sri-type { font-size: 10px; font-weight: 700; color: var(--teal); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.sri-title { font-size: 14px; font-weight: 700; color: var(--t1); }

/* ── Sac (Surah API card) ── */
.sac-icon { font-size: 36px; margin-bottom: 12px; }
.sac-title { font-size: 15px; font-weight: 700; color: var(--t1); margin-bottom: 6px; }
.sac-desc { font-size: 13px; color: var(--t3); margin-bottom: 16px; line-height: 1.6; }

/* ── Modal open class ── */
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal-overlay.open .modal-box { transform: translateY(0); }
.rdm-overlay.open .rdm-box { transform: translateY(0); }
.rdm-overlay.open { opacity: 1; pointer-events: all; }

/* ── Per-prayer notif panel ── */
#per-prayer-notif-panel { padding: 0 16px 8px; }

/* ── Additional feature badge ── */
.datetag { font-size: 11px; color: var(--t4); }


/* ═══════════════════════════════════════════════
   CRITICAL ANDROID SCROLL FIX — DO NOT REMOVE
   Ensures proper flex layout and touch scroll
═══════════════════════════════════════════════ */

/* Full height chain */
html, body {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}


/* Prevent any overlay from blocking scroll */
.drawer-overlay:not(.open),
.modal-overlay:not(.open),
.rdm-overlay:not(.open),
.search-overlay:not(.show) {
  pointer-events: none !important;
}

/* Location screen when hidden */
#location-screen[style*="display: none"],
#location-screen[style*="display:none"] {
  pointer-events: none !important;
  visibility: hidden !important;
  z-index: -1 !important;
}

/* Perm sheet backdrop */
#perm-sheet > div:first-child:not(.ps-card) {
  /* only intercept if sheet is visible */
}


/* ═══════════════════════════════════════════════
   ARABIC TEXT — Beautiful Islamic rendering
═══════════════════════════════════════════════ */

/* All Arabic text elements */
.dua-arabic,
.ayah-arabic,
.hero-prayer-arabic-row,
.asma-arabic,
.hadith-big-ar,
.rem-arabic,
.rdm-arabic,
.roza-arabic,
.ramadan-hero-title,
.wudu-step-ar,
.bismillah-text,
.ls-arabic,
.dh-arabic,
.hero-hijri,
[lang="ar"],
[dir="rtl"] {
  font-family: 'Noto Naskh Arabic', 'Scheherazade New', 'Amiri', 'Traditional Arabic', serif !important;
  direction: rtl;
  text-align: right;
  /* Critical for proper Arabic ligatures and letter-spacing */
  font-feature-settings: "calt" 1, "liga" 1, "clig" 1;
  -webkit-font-feature-settings: "calt" 1, "liga" 1;
  /* Smooth Arabic text rendering */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  /* Proper line height for Arabic diacritics */
  line-height: 2 !important;
  /* No letter-spacing for Arabic */
  letter-spacing: 0 !important;
  word-spacing: 2px;
}

/* Quran Arabic text — larger, more beautiful */
.ayah-arabic {
  font-family: 'Scheherazade New', 'Noto Naskh Arabic', 'Amiri', serif !important;
  font-size: var(--ar-size, 28px) !important;
  line-height: 2.2 !important;
  color: var(--t1);
  padding: 8px 0;
  /* Extra care for Quran rendering */
  font-weight: 400;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Dua Arabic text */
.dua-arabic {
  font-family: 'Noto Naskh Arabic', 'Scheherazade New', 'Amiri', serif !important;
  font-size: 22px !important;
  line-height: 2.2 !important;
  color: var(--t1);
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

/* Bismillah */
.bismillah-text {
  font-family: 'Scheherazade New', 'Noto Naskh Arabic', serif !important;
  font-size: 24px !important;
  line-height: 2 !important;
  color: var(--teal);
  text-align: center;
  direction: rtl;
  padding: 12px 20px;
  margin-bottom: 8px;
}

/* Asma ul Husna Arabic */
.asma-arabic {
  font-family: 'Noto Naskh Arabic', 'Scheherazade New', serif !important;
  font-size: 22px !important;
  line-height: 1.8 !important;
  text-align: right;
  direction: rtl;
}

/* Hero prayer name */
.hero-prayer-arabic-row {
  font-family: 'Scheherazade New', 'Noto Naskh Arabic', serif !important;
  font-size: 26px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* Reminder Arabic */
.rem-arabic, .rdm-arabic {
  font-family: 'Noto Naskh Arabic', 'Scheherazade New', serif !important;
  font-size: 22px !important;
  line-height: 2 !important;
}

/* Drawer Arabic subtitle */
.dh-arabic {
  font-family: 'Noto Naskh Arabic', 'Scheherazade New', serif !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  direction: rtl;
}

/* Hijri date in hero */
.hero-hijri {
  font-family: 'Noto Naskh Arabic', serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

/* Inline Arabic spans in dynamic content */
[style*="font-family:var(--font-arabic)"],
[style*="font-family: var(--font-arabic)"] {
  font-family: 'Noto Naskh Arabic', 'Scheherazade New', 'Amiri', serif !important;
  line-height: 2 !important;
  letter-spacing: 0 !important;
}

/* ═══════════════════════════════════════════════
   MUSHAF MODE — Real Quran page styling
═══════════════════════════════════════════════ */

/* Mushaf page background */
.mushaf-page {
  background: #F5F0E8;
  padding: 14px;
  min-height: 100%;
}

.mushaf-inner {
  background: #FEFCF7;
  border: 2px solid #C8A96E;
  border-radius: 6px;
  padding: 16px 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.15), inset 0 0 0 1px rgba(200,169,110,.3);
  position: relative;
}

.mushaf-surah-header {
  text-align: center;
  border-bottom: 2px solid #C8A96E;
  padding-bottom: 10px;
  margin-bottom: 14px;
}

.mushaf-bismillah {
  text-align: center;
  font-family: 'Scheherazade New', serif !important;
  font-size: 22px;
  color: #2C1A0E;
  margin-bottom: 14px;
  line-height: 2;
  border-bottom: 1px solid #E8D4A0;
  padding-bottom: 10px;
}

.mushaf-text {
  font-family: 'Scheherazade New', serif !important;
  font-size: 26px;
  color: #1A0A00;
  text-align: justify;
  direction: rtl;
  line-height: 2.6;
  word-spacing: 4px;
  text-align-last: right;
}

.mushaf-ayah-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #C8A96E;
  color: #fff;
  font-size: 10px;
  font-family: sans-serif !important;
  vertical-align: middle;
  margin: 0 2px;
  cursor: pointer;
  flex-shrink: 0;
}

.mushaf-ayah-num:hover, .mushaf-ayah-num:active {
  background: var(--teal);
  transform: scale(1.1);
}

/* Ayah meaning popup */
#ayah-meaning-popup {
  animation: slide-up .25s ease-out;
}

@keyframes slide-up {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* Quran toolbar selects */
.quran-toolbar-select {
  padding: 5px 8px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  font-size: 12px;
  background: var(--surface2);
  color: var(--t1);
  font-family: var(--font);
  -webkit-appearance: none;
}

/* 3-language tag badges */
.lang-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
  display: inline-block;
}
.lang-en     { background: var(--teal-lt);   color: var(--teal); }
.lang-hi     { background: var(--gold-lt);   color: var(--gold); }
.lang-hindi  { background: var(--purple-lt); color: var(--purple); }
.lang-trans  { background: var(--blue-lt);   color: var(--blue); }

/* ═══════════════════════════════════════════════════
   SAINIFY SALAH v4.1 — Premium Feature Styles
   Quran, Adhkar, Share, Language, Transitions, Cards
═══════════════════════════════════════════════════ */

/* ── Daily Ayah Card ── */
.daily-ayah-card {
  margin: 0 16px 14px;
  background: linear-gradient(135deg, #0F2044 0%, #1C4A6E 100%);
  border-radius: 18px;
  padding: 20px;
  border: 1px solid rgba(212,175,55,0.3);
  box-shadow: 0 4px 20px rgba(28,122,110,0.2);
}
.dac-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.dac-label { font-size:12px; font-weight:700; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.6); }
.dac-share { background:rgba(255,255,255,0.1); border:none; border-radius:8px; padding:6px 10px; color:#fff; font-size:16px; cursor:pointer; }
.dac-arabic { font-family:var(--font-arabic); font-size:22px; color:#fff; text-align:right; direction:rtl; line-height:1.8; margin-bottom:10px; }
.dac-text { font-size:14px; color:rgba(255,255,255,0.85); line-height:1.6; font-style:italic; margin-bottom:8px; }
.dac-ref { font-size:11px; color:#D4AF37; font-weight:600; }

/* ── Enhanced Quran Reader ── */
.quran-surah-header {
  display:flex; align-items:center; gap:12px;
  padding:12px 16px; background:var(--surface);
  border-bottom:1px solid var(--border); flex-shrink:0;
  position:sticky; top:0; z-index:10;
}
.quran-back-btn { color:var(--teal); font-size:18px; font-weight:700; padding:6px 4px; min-width:32px; }
.qsh-info { flex:1; min-width:0; }
.qsh-name { font-family:var(--font-arabic); font-size:20px; font-weight:700; color:var(--t1); direction:rtl; }
.qsh-sub { font-size:11px; color:var(--t3); margin-top:1px; }
.qsh-actions { display:flex; gap:6px; }
.qsh-btn { width:34px; height:34px; border-radius:10px; background:var(--surface2); border:1px solid var(--border); font-size:16px; display:flex; align-items:center; justify-content:center; }

.quran-goal-bar { padding:8px 16px 0; }
.qgb-inner { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--t3); }
.qgb-track { flex:1; height:4px; background:var(--border); border-radius:2px; overflow:hidden; }
.qgb-fill { height:100%; background:var(--teal); border-radius:2px; transition:width 0.3s; }

.bismillah {
  font-family:var(--font-arabic); font-size:26px; text-align:center;
  padding:20px 16px 8px; color:var(--teal); direction:rtl; line-height:1.8;
}

.quran-audio-bar {
  margin:12px 16px; padding:12px 16px;
  background:var(--surface); border-radius:14px;
  border:1px solid var(--border); box-shadow:var(--sh-sm);
}
.qab-label { font-size:12px; font-weight:600; color:var(--t3); margin-bottom:8px; }
.qab-controls { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.qab-btn { padding:7px 14px; background:var(--teal); color:#fff; border-radius:8px; font-size:13px; font-weight:600; border:none; cursor:pointer; }
.qab-btn:active { opacity:0.8; }
.qab-select { flex:1; padding:7px 8px; border-radius:8px; border:1px solid var(--border); background:var(--surface); font-size:12px; color:var(--t2); font-family:var(--font); min-width:0; }

.ayah-card {
  padding:16px; margin:0 16px 10px;
  background:var(--surface); border-radius:16px;
  border:1px solid var(--border); box-shadow:var(--sh-sm);
  transition:box-shadow 0.2s;
}
.ayah-card:active { box-shadow:var(--sh); }
.ayah-num-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.ayah-num { width:32px; height:32px; border-radius:50%; background:var(--teal); color:#fff; font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ayah-actions { display:flex; gap:4px; }
.ayah-btn { width:30px; height:30px; border-radius:8px; background:var(--surface2); border:1px solid var(--border); font-size:14px; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.ayah-btn.bookmarked { background:var(--gold-lt); border-color:var(--gold); }
.ayah-arabic { font-family:var(--font-arabic); font-size:22px; line-height:2; text-align:right; direction:rtl; color:var(--t1); margin-bottom:10px; cursor:pointer; }
.ayah-arabic.mem-hidden { filter:blur(8px); background:var(--border); border-radius:8px; padding:4px; transition:filter 0.3s; }
.ayah-arabic.mem-hidden:active { filter:none; }
.ayah-transliteration { font-size:13px; color:var(--teal); font-style:italic; margin-bottom:6px; line-height:1.5; }
.ayah-hinglish { font-size:13px; color:var(--teal); font-style:italic; margin-bottom:6px; line-height:1.5; }
.ayah-translation { font-size:13px; color:var(--t2); line-height:1.6; }

/* ── Adhkar ── */
.adhkar-header { padding:20px 16px 8px; }
.adhkar-title { font-size:20px; font-weight:800; color:var(--t1); margin-bottom:4px; }
.adhkar-date { font-size:12px; color:var(--t3); }
.adhkar-progress-bar { height:6px; background:var(--border); margin:8px 16px 16px; border-radius:3px; overflow:hidden; }
.adhkar-progress-fill { height:100%; background:linear-gradient(90deg, var(--teal), #22C55E); border-radius:3px; transition:width 0.4s; }
.adhkar-list { padding:0 16px 20px; display:flex; flex-direction:column; gap:12px; }
.adhkar-item {
  background:var(--surface); border-radius:16px; padding:16px;
  border:1px solid var(--border); box-shadow:var(--sh-sm);
  transition:border-color 0.2s, background 0.2s;
}
.adhkar-item.adhkar-done { border-color:var(--teal); background:var(--teal-xlt); }
.adhkar-arabic { font-family:var(--font-arabic); font-size:20px; line-height:1.9; text-align:right; direction:rtl; color:var(--t1); margin-bottom:8px; }
.adhkar-transliteration { font-size:12px; color:var(--teal); font-style:italic; margin-bottom:4px; }
.adhkar-english { font-size:13px; color:var(--t2); line-height:1.5; margin-bottom:8px; }
.adhkar-count { font-size:12px; font-weight:700; color:var(--gold); margin-bottom:8px; }
.adhkar-check-btn { width:100%; padding:10px; background:var(--border); color:var(--t2); border-radius:10px; font-size:13px; font-weight:600; border:none; cursor:pointer; transition:background 0.2s, color 0.2s; }
.adhkar-check-btn.checked { background:var(--teal); color:#fff; }

/* ── Welcome Modal ── */
.welcome-modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.7);
  z-index:9999; display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.welcome-modal {
  background:linear-gradient(160deg, #0D1B2A, #1C4A6E);
  border-radius:24px; padding:32px 24px;
  max-width:340px; width:100%; text-align:center;
  border:1px solid rgba(212,175,55,0.3);
  transform:scale(0.85); opacity:0;
  transition:transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s;
}
.welcome-modal.wm-animate { transform:scale(1); opacity:1; }
.wm-icon { font-size:60px; margin-bottom:12px; }
.wm-title { font-size:22px; font-weight:800; color:#fff; margin-bottom:6px; }
.wm-arabic { font-family:var(--font-arabic); font-size:18px; color:rgba(255,255,255,0.7); margin-bottom:12px; direction:rtl; }
.wm-text { font-size:14px; color:rgba(255,255,255,0.8); line-height:1.6; margin-bottom:20px; }
.wm-features { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:24px; }
.wmf-item { background:rgba(255,255,255,0.1); border-radius:10px; padding:10px 8px; font-size:12px; color:rgba(255,255,255,0.9); font-weight:600; }
.wm-btn { width:100%; padding:14px; background:var(--teal); color:#fff; border-radius:14px; font-size:16px; font-weight:700; border:none; cursor:pointer; }

/* ── Language buttons ── */
.lang-btn {
  padding:14px 12px; background:var(--surface2); border:1.5px solid var(--border);
  border-radius:12px; font-size:15px; font-weight:600; color:var(--t1);
  cursor:pointer; transition:border-color 0.2s, background 0.2s;
  font-family:var(--font);
}
.lang-btn:active { background:var(--teal-lt); border-color:var(--teal); color:var(--teal); }

/* ── Page transition ── */
.view.active { animation: viewIn 0.22s ease both; }
@keyframes viewIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Glassmorphism cards ── */
.glass-card {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 18px;
}

/* ── Fix bottom nav safe area ── */
#nav {
  padding-bottom: env(safe-area-inset-bottom, 0px);
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}
.view-scroll, .main-view-scroll {
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 24px);
}

/* ── Dark theme additions ── */
[data-theme="dark"] .daily-ayah-card { background: linear-gradient(135deg, #0A1628 0%, #0F2A44 100%); }
[data-theme="dark"] .ayah-card { background:var(--surface); }
[data-theme="dark"] .adhkar-item { background:var(--surface); }
[data-theme="dark"] .quran-audio-bar { background:var(--surface); }
[data-theme="dark"] .lang-btn { background:var(--surface); }
[data-theme="dark"] .welcome-modal { background:linear-gradient(160deg,#0A0E1A,#0F2044); }