/* ============================================================
   Namozim — Redesign design tokens & base styles
   ============================================================ */

:root {
  /* Paper / surfaces — restored to original Namozim palette */
  --paper:        #F7F1E8;
  --paper-2:      #F9F6EF;
  --paper-3:      #FFFFFF;
  --paper-line:   #E5DED2;
  --paper-line-2: #D6CCBC;

  /* Ink — original cool-warm mix. mute/faint darkened for WCAG-AA contrast on
     the cream paper (were ~2.85:1 / ~2.0:1, now ~4.6:1 / ~3.1:1). */
  --ink:        #1E293B;
  --ink-soft:   #475569;
  --ink-mute:   #5C6675;
  --ink-faint:  #8A8270;

  /* Sage / Emerald — restored vibrant original */
  --sage:       #15803D;
  --sage-mid:   #16A34A;
  --sage-soft:  #BBF7D0;
  --sage-tint:  #DCFCE7;
  --sage-deep:  #14532D;

  /* Brass — luxe gold for highlights, AI, milestones */
  --brass:      #8B6F3F;
  --brass-mid:  #B89466;
  --brass-soft: #E6CFA1;
  --brass-tint: #F3E7CA;
  --brass-deep: #6E5832;

  /* Crimson — qazo / missed */
  --crimson:    #DC2626;
  --crimson-soft:#FCA5A5;
  --crimson-tint:#FEE2E2;

  /* Night — for the "next prayer" hero, deep emerald instead of warm dark */
  --night:    #0B3A1F;
  --night-2:  #134E2A;
  --night-3:  #1F6B3A;
  --night-glow: #6E5832;

  /* Radii */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 32px;
  --r-2xl: 40px;

  /* Shadows — warm, never blue */
  --sh-1: 0 1px 2px rgba(60, 40, 10, .05);
  --sh-2: 0 6px 18px -8px rgba(60, 40, 10, .12);
  --sh-3: 0 20px 40px -20px rgba(60, 40, 10, .25);
  --sh-night: 0 24px 48px -20px rgba(34, 28, 18, .55);

  /* Type — original Mini App fonts.
     Plus Jakarta Sans and Cormorant Garamond are loaded before the app shell so the UI keeps its previous look. */
  --f-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  --f-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, Inter, sans-serif;
  --f-serif: "Cormorant Garamond", "Newsreader", Georgia, serif;
  --f-launch: var(--f-display);
}

/* Dark mode (Tweaks-driven) ----------------------------------- */
.theme-dark {
  --paper:        #1A160F;
  --paper-2:      #221C13;
  --paper-3:      #2A2218;
  --paper-line:   #3A2F20;
  --paper-line-2: #312717;

  --ink:        #F4ECDC;
  --ink-soft:   #C8BFA9;
  --ink-mute:   #8A8170;
  --ink-faint:  #5A5142;

  --sage-tint:  #2A3A2D;
  --sage-soft:  #3A5040;
  --brass-tint: #382C1A;
  --brass-soft: #57462A;
  --crimson-tint:#3A2020;
  --crimson-soft:#5A2D2D;

  --night:    #0F0C08;
  --night-2:  #1A150D;
  --night-3:  #2A2218;
  --night-glow: #6E5832;

  --sh-1: 0 1px 2px rgba(0, 0, 0, .35);
  --sh-2: 0 6px 18px -8px rgba(0, 0, 0, .55);
  --sh-3: 0 20px 40px -20px rgba(0, 0, 0, .75);
}

/* Accent palette swaps ---------------------------------------- */
.accent-emerald {
  --sage:      #2F6B3F;
  --sage-mid:  #4F8F60;
  --sage-soft: #BFDFC4;
  --sage-tint: #DEEFE2;
}
.accent-teal {
  --sage:      #1F6B68;
  --sage-mid:  #3F8F8C;
  --sage-soft: #BFDDDC;
  --sage-tint: #DEEFEE;
}
.accent-plum {
  --sage:      #5A3A5F;
  --sage-mid:  #7A5380;
  --sage-soft: #D6C5DA;
  --sage-tint: #ECE2EF;
}

/* ===== Base ===== */
* { box-sizing: border-box; }
html {
  margin: 0;
  padding: 0;
  font-size: 16px;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
body {
  margin: 0;
  padding: 0;
  font-family: var(--f-body);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  font-feature-settings: "ss01", "cv11";
}
#root, .app {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

html, body, #root, .app, .app * {
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}

/* ===== App shell ===== */
.app {
  width: 100%;
  height: 100%;
  background: var(--paper);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-family: var(--f-body);
}

.app-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 110px;
  position: relative;
}
.app-scroll::-webkit-scrollbar { display: none; }

/* Page transition defined further below via nzPageFade (opacity only).
   A translateY here would create a containing block and trap fixed toasts. */

/* App-level Islamic decorative bg behind content */
.app-bg-ornament {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.app-bg-ornament svg {
  position: absolute;
}
.app-bg-ornament .orn-mosque {
  display: none;
}
.app-bg-ornament .orn-1 { width: 120px; height: 120px; bottom: 22%; left: -30px;  color: var(--brass-deep); opacity: .08; }
.app-bg-ornament .orn-2 { width: 110px; height: 110px; top: 50%; right: -30px; color: var(--sage); opacity: .12; transform: rotate(18deg); }

/* Subtle islamic geometric watermark — placed in heroes via inline svg */
.girih-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
}


/* Telegram iOS WebView chrome floats over fullscreen Mini Apps.
   Keep the app fullscreen, but reserve a small top space so Close/Menu
   buttons do not cover the Namozim logo. */
:root {
  --namozim-app-top-safe: max(var(--namozim-safe-top, 0px), env(safe-area-inset-top, 0px));
}
html.namozim-tg-ios.namozim-tg-fullscreen .app-header {
  padding-top: max(96px, calc(var(--namozim-app-top-safe) + 54px));
}
html.namozim-tg-android.namozim-tg-fullscreen .app-header {
  padding-top: max(96px, calc(var(--namozim-app-top-safe) + 54px));
}
html.namozim-tg-webapp.namozim-tg-desktop:not(.namozim-tg-fullscreen) .app-header {
  padding-top: max(46px, calc(var(--namozim-app-top-safe) + 30px));
}
html.namozim-tg-webapp.namozim-tg-desktop:not(.namozim-tg-fullscreen) .app-scroll {
  margin-top: 0;
}
html.namozim-tg-webapp:not(.namozim-tg-ios):not(.namozim-tg-fullscreen) .app-header,
html.namozim-tg-ios:not(.namozim-tg-fullscreen) .app-header {
  padding-top: max(70px, calc(var(--namozim-app-top-safe) + 12px));
}

/* ===== Header ===== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 6px;
  background: var(--paper);
  position: relative;
  z-index: 2;
}
.app-header .h-left { display: flex; align-items: center; gap: 10px; }
.app-header .brand-mark {
  width: 46px;
  height: 46px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 20px -12px rgba(8, 48, 34, .55),
              0 0 0 1px rgba(255, 255, 255, .10) inset;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.14), transparent 32%),
    linear-gradient(145deg, #0F5A40 0%, #073427 100%);
  flex-shrink: 0;
}
.app-header .brand-mark img {
  width: 68%;
  height: 68%;
  object-fit: contain;
  display: block;
  border-radius: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .14));
}
.app-header .brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 -8px 18px rgba(0, 0, 0, .14);
}
.app-header .h-title {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -.045em;
  color: var(--ink);
  line-height: 1;
}
.app-header .h-sub {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 800;
}
.app-header .h-right {
  display: flex; align-items: center; gap: 8px;
}

/* Qibla compass — kept small in header, animated needle */
.qibla {
  width: 38px; height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--paper-line);
  background: var(--paper-2);
  position: relative;
  display: grid; place-items: center;
  box-shadow: var(--sh-1);
  overflow: visible;
  appearance: none;
  cursor: pointer;
  color: inherit;
}
.qibla::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px dashed rgba(132, 145, 163, .25);
}
.qibla .needle {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 14px solid var(--sage);
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%) rotate(var(--qibla-deg, 42deg));
  transform-origin: 50% 13px;
  filter: drop-shadow(0 1px 2px rgba(21, 128, 61, .25));
  animation: qiblaSeek 4.5s cubic-bezier(.3, .8, .3, 1) infinite;
}
.qibla .needle::after {
  content: "";
  position: absolute;
  top: 14px; left: -4px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 8px solid var(--brass);
}
.qibla .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--ink-faint);
  z-index: 1;
}
.qibla-label {
  position: absolute;
  bottom: -14px; left: 50%;
  transform: translateX(-50%);
  font-size: 8px;
  letter-spacing: .1em;
  color: var(--ink-mute);
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
}
@keyframes qiblaSeek {
  0%   { transform: translateX(-50%) rotate(calc(var(--qibla-deg, 42deg) - 6deg)); }
  45%  { transform: translateX(-50%) rotate(calc(var(--qibla-deg, 42deg) + 4deg)); }
  60%  { transform: translateX(-50%) rotate(calc(var(--qibla-deg, 42deg) - 2deg)); }
  100% { transform: translateX(-50%) rotate(calc(var(--qibla-deg, 42deg) - 6deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .qibla .needle { animation: none; }
}

/* AI pill — same brass family, now contextual */
.ai-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px;
  padding: 0 14px 0 12px;
  border-radius: 999px;
  background: linear-gradient(140deg, var(--brass) 0%, var(--brass-mid) 100%);
  color: var(--brass-tint);
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0;
  border: 2px solid rgba(255,255,255,.86);
  cursor: pointer;
  box-shadow: 0 8px 18px -8px rgba(139, 111, 63, .58), inset 0 1px 0 rgba(255,255,255,.22);
}
.ai-pill .sp { font-size: 14px; }

/* ===== Section header ===== */
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 22px 20px 10px;
}
.sec-head h2 {
  margin: 0;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -.045em;
  color: var(--ink);
}
.sec-head .meta {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
}
.today-sec-head {
  align-items: center;
}
.today-head-left {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.today-head-left h2 {
  letter-spacing: -.02em;
  word-spacing: .08em;
}
.today-calendar-btn {
  width: 32px;
  height: 32px;
  border-radius: 12px;
  border: 1px solid var(--paper-line-2);
  background: var(--paper-2);
  color: var(--sage);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 18px -14px rgba(11,58,31,.42);
}
.today-calendar-btn svg {
  width: 17px;
  height: 17px;
  stroke-width: 2.2;
}

/* ===== Bottom navigation — iOS Liquid Glass ===== */
.bottom-nav {
  position: absolute;
  bottom: 14px;
  left: 14px; right: 14px;
  height: 64px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .65);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  padding: 6px;
  box-shadow:
    0 12px 36px -10px rgba(11, 58, 31, .18),
    0 2px 6px -2px rgba(34, 28, 18, .08),
    0 0 0 .5px rgba(0, 0, 0, .05),
    inset 0 1px 0 rgba(255, 255, 255, .6);
  z-index: 10;
  overflow: hidden;
}
.bottom-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(120% 80% at 100% 100%, rgba(247, 241, 232, .35), transparent 60%);
  pointer-events: none;
}
.theme-dark .bottom-nav {
  background: rgba(26, 22, 15, .78);
  border-color: rgba(255, 255, 255, .08);
  box-shadow:
    0 12px 36px -10px rgba(0, 0, 0, .55),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}
.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 100%;
  border-radius: 999px;
  background: transparent;
  border: 0;
  color: var(--ink-mute);
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color .18s ease, background .25s ease, transform .14s ease;
  z-index: 1;
}
.nav-item:active { transform: scale(.94); }
.nav-item svg { width: 22px; height: 22px; stroke-width: 2; }
.nav-item.active {
  background: linear-gradient(140deg, var(--sage-tint) 0%, rgba(243, 231, 202, .55) 100%);
  color: var(--sage);
  box-shadow: 0 4px 10px -3px rgba(21, 128, 61, .22);
}
.theme-dark .nav-item.active { color: var(--brass-mid); background: var(--brass-tint); }

/* ============================================================
   BUGUN (Today) screen — clean hero with mosque silhouette
   ============================================================ */
.today-hero {
  margin: 6px 16px 0;
  padding: 16px 18px 0;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 80% at 80% 20%, rgba(184, 148, 102, .25), transparent 55%),
    linear-gradient(160deg, var(--night) 0%, var(--night-2) 55%, var(--night-3) 100%);
  color: var(--brass-tint);
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 36px -20px rgba(11, 58, 31, .55);
  isolation: isolate;
}
.today-hero .crescent-bg {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 110px;
  height: 110px;
  color: #E6CFA1;
  z-index: 0;
}
.today-hero .mosque-bg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 90px;
  color: #0B3A1F;
  opacity: .55;
  z-index: 0;
}

.th-meta {
  position: relative; z-index: 1;
  display: flex; align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244, 230, 199, .65);
  font-weight: 700;
}
.th-meta .dot-emerald {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #22C55E;
  box-shadow: 0 0 8px rgba(34, 197, 94, .8);
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}
.th-meta .sep { opacity: .35; }

.th-body {
  position: relative; z-index: 1;
  margin-top: 12px;
  padding-bottom: 6px;
}
.th-eyebrow {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(229, 207, 160, .55);
  font-weight: 700;
}
.th-row {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.th-name {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 36px;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--brass-tint);
}
.th-count {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.02em;
  color: var(--brass-soft);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
}
.th-count .t-num {
  display: inline-block;
  min-width: 28px;
  text-align: center;
}
.th-count .t-sep {
  opacity: .35;
  margin: 0 1px;
}
.th-foot {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(229, 207, 160, .55);
  display: flex;
  gap: 8px;
  align-items: center;
}
.th-foot .sep { opacity: .35; }
.th-foot .hijri { color: rgba(229, 207, 160, .75); }

.th-progress {
  position: relative; z-index: 1;
  margin-top: 12px;
  padding-bottom: 60px;
}
.th-progress-track {
  height: 4px;
  border-radius: 999px;
  background: rgba(244, 230, 199, .12);
  overflow: hidden;
}
.th-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brass) 0%, var(--brass-mid) 100%);
  border-radius: 999px;
  box-shadow: 0 0 10px rgba(184, 148, 102, .5);
}
.th-progress-labels {
  margin-top: 6px;
  display: flex; justify-content: space-between;
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(244, 230, 199, .5);
  font-weight: 700;
}

/* Old arc no longer used - removed */
.p-status {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-faint);
}
.p-status.ok { color: var(--sage); }

/* ===== Prayer list ===== */
.prayer-list {
  margin: 0 16px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.prayer-row {
  background: var(--paper-2);
  border: 1px solid var(--paper-line-2);
  border-radius: var(--r-lg);
  padding: 12px 14px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  position: relative;
  contain: layout style;
  transition: transform .18s ease, border-color .18s ease;
}
.prayer-row.passed {
  background: transparent;
  border-color: transparent;
  border-bottom: 1px solid var(--paper-line-2);
  border-radius: 0;
  padding: 10px 4px;
  margin: 0 4px;
}
.prayer-row.current {
  background: var(--paper-3);
  border: 1px solid var(--sage);
  box-shadow: 0 8px 20px -18px rgba(21, 128, 61, .26);
  padding: 12px 14px;
}
.prayer-row.current::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 0 3px rgba(21, 128, 61, .07);
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(21, 128, 61, .14); }
  50% { box-shadow: 0 0 0 8px rgba(21, 128, 61, .04); }
}

.p-ico {
  width: 48px; height: 48px;
  border-radius: 16px;
  display: grid; place-items: center;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.p-ico svg { width: 100%; height: 100%; display: block; }
.p-fajr    { background: linear-gradient(160deg, #3B2E80 0%, #6D5DC8 60%, #F0A07A 100%); }
.p-shuruq  { background: linear-gradient(155deg, #FFE4B5 0%, #FDA85C 60%, #F26A3F 100%); }
.p-dhuhr   { background: linear-gradient(155deg, #FEF3C7 0%, #FCD34D 55%, #F59E0B 100%); }
.p-asr     { background: linear-gradient(155deg, #FED7AA 0%, #FB923C 55%, #C2410C 100%); }
.p-maghrib { background: linear-gradient(155deg, #FCA5A5 0%, #DC2626 60%, #7F1D1D 100%); }
.p-isha    { background: linear-gradient(155deg, #1E1B4B 0%, #312E81 50%, #0B1240 100%); }

.prayer-row.current .p-ico {
  width: 48px; height: 48px;
  border-radius: 16px;
}
.prayer-row.passed .p-ico {
  width: 42px; height: 42px;
  border-radius: 13px;
  opacity: .85;
}

.p-name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.005em;
  color: var(--ink);
  line-height: 1.1;
}
.prayer-row.passed .p-name { color: var(--ink-mute); font-size: 18px; }
.p-meta {
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.prayer-row.current .p-name { font-size: 20px; }
.prayer-row.current .p-meta { color: var(--sage); font-weight: 600; }

.p-action {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  min-width: 0;
}
.btn-done {
  height: 38px; padding: 0 16px;
  border-radius: 999px;
  background: var(--sage);
  color: var(--paper-2);
  border: 0;
  font-family: var(--f-body); font-size: 13px; font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-done svg { width: 14px; height: 14px; stroke-width: 3; }
.btn-done.done {
  background: var(--sage-tint);
  color: var(--sage);
}
.prayer-status-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  max-width: 170px;
}
.btn-prayer-status,
.btn-make-up,
.btn-undo-status {
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid var(--paper-line-2);
  font-family: var(--f-body);
  font-size: 11px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.btn-prayer-status {
  padding: 0 11px;
  background: var(--paper-3);
  color: var(--ink-soft);
  gap: 5px;
}
.btn-prayer-status svg {
  width: 12px;
  height: 12px;
  stroke-width: 3;
}
.btn-prayer-status.ok {
  background: var(--sage);
  border-color: var(--sage);
  color: var(--paper-2);
}
.btn-prayer-status.qaza {
  background: var(--crimson-tint);
  border-color: rgba(220,38,38,.18);
  color: var(--crimson);
}
.btn-make-up {
  padding: 0 12px;
  background: var(--sage);
  border-color: var(--sage);
  color: var(--paper-2);
}
.btn-undo-status {
  min-height: 30px;
  padding: 0 10px;
  background: transparent;
  color: var(--ink-mute);
}
.prayer-row.missed {
  border-color: rgba(220,38,38,.22);
  background: linear-gradient(180deg, var(--paper-2), rgba(254,242,242,.72));
}
.prayer-row.missed .p-meta {
  color: var(--crimson);
  font-weight: 700;
}
.prayer-row.made-up {
  border-color: rgba(139,111,63,.22);
  background: linear-gradient(180deg, var(--paper-2), rgba(246,239,220,.72));
}
.prayer-row.made-up .p-meta {
  color: var(--brass-deep);
  font-weight: 700;
}
.btn-iconish {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--paper-line);
  color: var(--ink-mute);
  display: grid; place-items: center;
  cursor: pointer;
}
.btn-iconish svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

.p-time-only {
  font-family: var(--f-body);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.status-menu {
  position: relative;
  z-index: 30;
  display: inline-flex;
  justify-content: flex-end;
}
.status-menu.open { z-index: 300; }
.prayer-row:has(.status-menu.open),
.cdd-prayer-row:has(.status-menu.open) {
  z-index: 220;
}
.status-menu-trigger {
  min-width: 0;
  height: 28px;
  padding: 0 2px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0;
  box-shadow: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.status-menu-trigger svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
  transition: transform .16s ease;
}
.status-menu.open .status-menu-trigger svg { transform: rotate(180deg); }
.status-menu-ok .status-menu-trigger {
  background: transparent;
  border-color: transparent;
  color: var(--sage);
}
.status-menu-qaza .status-menu-trigger {
  background: transparent;
  border-color: transparent;
  color: var(--crimson);
}
.status-menu-made-up .status-menu-trigger {
  background: transparent;
  border-color: transparent;
  color: var(--brass-deep);
}
.status-menu-trigger:disabled {
  opacity: .58;
  cursor: not-allowed;
}
.status-menu.saving .status-menu-trigger,
.prayer-row.saving .status-menu-trigger,
.cdd-prayer-row.saving .status-menu-trigger {
  opacity: .66;
  pointer-events: none;
}
.status-menu-popover {
  position: absolute;
  top: calc(100% + 5px);
  right: 0;
  width: 154px;
  padding: 5px;
  border-radius: 16px;
  border: 1px solid var(--paper-line-2);
  background: rgba(255,252,246,.99);
  box-shadow: 0 18px 46px -18px rgba(11,58,31,.52);
  display: grid;
  gap: 4px;
  z-index: 500;
}
.status-menu-up .status-menu-popover {
  top: auto;
  bottom: calc(100% + 5px);
}
.status-menu-popover button {
  min-height: 33px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--f-body);
  font-size: 11.5px;
  font-weight: 850;
  text-align: left;
  padding: 0 9px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.status-menu-popover button svg {
  width: 13px;
  height: 13px;
  stroke-width: 3;
  flex: 0 0 auto;
}
.status-menu-popover button.ok { color: var(--sage); }
.status-menu-popover button.qaza { color: var(--crimson); }
.status-menu-popover button.made-up { color: var(--brass-deep); background: rgba(246,239,220,.55); }
.status-menu-popover button.neutral { color: var(--ink-mute); }
.status-menu-popover button:hover {
  background: var(--paper-3);
}

/* ============================================================
   REJA (Plan) screen — journey metaphor
   ============================================================ */
.plan-hero {
  margin: 6px 16px 0;
  padding: 18px 20px 18px;
  border-radius: var(--r-xl);
  background: var(--paper-2);
  border: 1px solid var(--paper-line-2);
  position: relative;
  overflow: hidden;
}
.plan-hero .girih-bg { opacity: .05; }
.plan-eyebrow {
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink-mute);
  text-transform: uppercase;
  font-weight: 800;
}
.plan-big {
  margin-top: 6px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 52px;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.plan-big .unit {
  font-size: 13px;
  color: var(--ink-mute);
  font-weight: 700;
  font-family: var(--f-body);
  letter-spacing: .04em;
  margin-left: 6px;
  vertical-align: baseline;
  display: inline-block;
  text-transform: uppercase;
}
.plan-sub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 600;
}
.plan-sub strong { color: var(--sage); font-weight: 800; }

/* Journey line — a horizontal path from start to finish */
.journey {
  margin-top: 16px;
  position: relative;
  height: 48px;
}
.journey-track {
  position: absolute;
  top: 26px; left: 0; right: 0;
  height: 4px;
  background: var(--paper-line);
  border-radius: 999px;
  overflow: hidden;
}
.journey-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 52%;
  background: linear-gradient(90deg, var(--sage) 0%, var(--sage-mid) 100%);
  border-radius: 999px;
}
.journey-pin {
  position: absolute;
  top: 18px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--paper-3);
  border: 3px solid var(--sage);
  transform: translateX(-50%);
  box-shadow: 0 4px 10px -4px rgba(74,107,79,.6);
}
.journey-pin.start { left: 0; background: var(--sage); border-color: var(--sage); }
.journey-pin.now { left: 52%; }
.journey-pin.end {
  right: -10px; left: auto; transform: none;
  background: var(--paper-3);
  border-color: var(--brass);
}
.journey-label {
  position: absolute; top: 0;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 700;
}
.journey-label.start { left: 0; }
.journey-label.now {
  left: 52%; transform: translateX(-50%);
  color: var(--sage); font-weight: 800;
}
.journey-label.end { right: 0; }
.journey-foot {
  position: absolute; bottom: 0;
  font-size: 10px; color: var(--ink-faint);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.journey-foot.start { left: 0; }
.journey-foot.end { right: 0; }

.plan-stats {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.plan-stat .l {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 800;
}
.plan-stat .v {
  margin-top: 3px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.plan-stat .v.success { color: var(--sage); }
.plan-stat:nth-child(2) .v { color: var(--brass-deep); }
.plan-stat:nth-child(3) .v { color: #2563EB; }

/* Today's goal card */
.goal-card {
  margin: 14px 16px 0;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--sage) 0%, var(--sage-mid) 100%);
  color: var(--paper-2);
  position: relative;
  overflow: hidden;
}
.goal-card .girih-bg { opacity: .1; }
.goal-top { display: flex; align-items: flex-start; justify-content: space-between; position: relative; z-index: 1; }
.goal-eyebrow {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(244, 230, 199, .7); font-weight: 700;
}
.goal-num {
  margin-top: 4px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 44px;
  letter-spacing: -.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.goal-num .of { color: rgba(244, 230, 199, .5); font-size: 22px; margin-left: 4px; }
.goal-lbl { font-size: 12px; color: rgba(244, 230, 199, .75); margin-top: 6px; font-weight: 500; }
.goal-date {
  text-align: right;
  font-size: 11px;
  color: rgba(244, 230, 199, .65);
  font-family: var(--f-display);
  font-style: italic;
  font-size: 14px;
  font-weight: 500;
}
.goal-track {
  margin-top: 14px;
  height: 6px;
  background: rgba(244, 230, 199, .18);
  border-radius: 999px;
  overflow: hidden;
  position: relative; z-index: 1;
}
.goal-track .fill { height: 100%; width: 40%; background: var(--brass-tint); border-radius: 999px; }

/* Qaza list — per prayer, with stepper */
.qaza-list {
  margin: 14px 16px 0;
  display: flex; flex-direction: column; gap: 8px;
}
.qaza-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--paper-2);
  border: 1px solid var(--paper-line-2);
  border-radius: var(--r-lg);
}
.qaza-ico {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--brass-tint);
  color: var(--brass);
  display: grid; place-items: center;
}
.qaza-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.qaza-row .nm {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -.005em;
  color: var(--ink);
}
.qaza-row .ct {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-mute);
  font-weight: 500;
}
.qaza-row .ct .r { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.qaza-step {
  display: flex; align-items: center;
  background: var(--paper-3);
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  padding: 4px;
  gap: 4px;
}
.qaza-step button {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--paper-2);
  border: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  display: grid; place-items: center;
}
.qaza-step button.plus {
  background: var(--sage);
  color: var(--brass-tint);
}
.qaza-step button:disabled { opacity: .35; cursor: default; }
.qaza-step .qty {
  min-width: 24px;
  text-align: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: var(--ink);
}

/* ============================================================
   KALENDAR screen
   ============================================================ */
.cal-card {
  margin: 6px 16px 0;
  padding: 20px;
  border-radius: var(--r-xl);
  background: var(--paper-2);
  border: 1px solid var(--paper-line-2);
}
.cal-top {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.cal-month {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1.1;
}
.cal-month .hijri {
  display: block;
  font-family: var(--f-body);
  font-size: 11px;
  letter-spacing: .1em;
  color: var(--ink-mute);
  font-weight: 600;
  margin-top: 2px;
  text-transform: uppercase;
}
.cal-nav { display: flex; gap: 6px; }
.cal-nav button {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--paper-3);
  border: 1px solid var(--paper-line);
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  display: grid; place-items: center;
}
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 8px;
}
.cal-weekdays div {
  text-align: center;
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--ink-faint);
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 0;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.cal-day {
  aspect-ratio: 1;
  border-radius: 12px;
  display: grid; place-items: center;
  position: relative;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  contain: layout style;
}
.cal-day.empty { color: var(--ink-faint); }
.cal-day.l-1 { background: rgba(74, 107, 79, .14); }
.cal-day.l-2 { background: rgba(74, 107, 79, .28); }
.cal-day.l-3 { background: rgba(74, 107, 79, .55); color: var(--paper-2); }
.cal-day.l-4 { background: var(--sage); color: var(--paper-2); }
.cal-day.miss { background: var(--crimson-tint); color: var(--crimson); }
.cal-day.today {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}
.cal-day .dot-row {
  position: absolute;
  bottom: 4px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 2px;
}
.cal-day .dot-row span { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .8; }

.cal-legend {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--paper-line-2);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--ink-mute);
  font-weight: 600;
  text-transform: uppercase;
}
.cal-legend .scale {
  display: flex; align-items: center; gap: 4px;
}
.cal-legend .scale span {
  width: 12px; height: 12px; border-radius: 3px;
}

.cal-day-detail {
  margin: 14px 16px 0;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--paper-2);
  border: 1px solid var(--paper-line-2);
}
.cdd-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
}
.cdd-date {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.cdd-date .hijri {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-mute);
  font-family: var(--f-body);
  font-weight: 600;
  margin-top: 2px;
  text-transform: uppercase;
}
.cdd-score {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--sage);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.cdd-score .of { color: var(--ink-faint); font-size: 16px; }
.cdd-pray {
  display: flex; flex-direction: column; gap: 6px;
}
.cdd-pray .row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--paper-line-2);
  font-size: 13px;
}
.cdd-pray .row:last-child { border-bottom: 0; }
.cdd-pray .nm { font-family: var(--f-display); font-weight: 600; font-size: 16px; color: var(--ink); }
.cdd-pray .right { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.cdd-pray .tm {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.cdd-pray .st {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  padding: 4px 10px; border-radius: 999px;
}
.cdd-pray .st.ok { background: var(--sage-tint); color: var(--sage); }
.cdd-pray .st.late { background: var(--brass-tint); color: var(--brass); }
.cdd-pray .st.qaza { background: var(--crimson-tint); color: var(--crimson); }

/* ============================================================
   NATIJA (Stats) screen — minimal, no emoji
   ============================================================ */
.streak-hero {
  margin: 6px 16px 0;
  padding: 18px 20px 14px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(60% 50% at 90% 0%, rgba(184, 148, 102, .22), transparent 60%),
    linear-gradient(160deg, var(--night) 0%, var(--night-2) 55%, var(--night-3) 100%);
  color: var(--brass-tint);
  position: relative;
  overflow: hidden;
  box-shadow: 0 18px 36px -20px rgba(11, 58, 31, .55);
  isolation: isolate;
}
.streak-hero .mosque-bg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: 100%;
  height: 70px;
  color: #0B3A1F;
  z-index: 0;
  opacity: .55;
}
.streak-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  position: relative; z-index: 1;
}
.streak-eb {
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(229, 207, 160, .55);
  font-weight: 700;
}
.streak-row {
  margin-top: 6px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.streak-num {
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 48px;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--brass-tint);
  font-variant-numeric: tabular-nums;
}
.streak-unit {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(229, 207, 160, .55);
  margin-left: 2px;
}
.streak-flame {
  margin-left: auto;
  display: inline-grid;
  place-items: center;
  width: 28px; height: 28px;
  color: var(--brass-mid);
  filter: drop-shadow(0 0 8px rgba(184, 148, 102, .55));
  align-self: center;
}
.streak-flame svg { width: 22px; height: 22px; }
.streak-record {
  text-align: right;
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(244, 230, 199, .08);
  border: 1px solid rgba(244, 230, 199, .12);
}
.rec-lbl {
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(229, 207, 160, .55);
  font-weight: 700;
}
.rec-val {
  margin-top: 2px;
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.02em;
  color: var(--brass-tint);
  font-variant-numeric: tabular-nums;
}
.rec-val span { font-size: 10px; font-weight: 700; color: rgba(229, 207, 160, .55); margin-left: 2px; letter-spacing: .08em; text-transform: uppercase; }

/* Weekly mini bar */
.week-strip {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  position: relative; z-index: 1;
}
.wk { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wk-bar {
  width: 14px; height: 36px;
  border-radius: 4px;
  background: rgba(244, 230, 199, .12);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.wk-fill {
  width: 100%;
  background: linear-gradient(0deg, var(--brass) 0%, var(--brass-mid) 100%);
  border-radius: 4px;
}
.wk-d {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(229, 207, 160, .5);
}
.wk.is-today .wk-d { color: var(--brass-tint); }
.wk.is-today .wk-bar {
  outline: 1px solid rgba(244, 230, 199, .25);
  outline-offset: 1px;
}

/* Metric tiles — color-coded for variety */
.metric-grid {
  margin: 14px 16px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.metric-tile {
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--paper-2);
  border: 1px solid var(--paper-line-2);
  position: relative;
  overflow: hidden;
}
.metric-tile::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: currentColor;
  opacity: .6;
}
.metric-tile .m-l {
  font-size: 9.8px;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 800;
}
.metric-tile .m-v {
  margin-top: 4px;
  font-family: var(--f-display);
  font-weight: 900;
  font-size: 28px;
  letter-spacing: -.04em;
  line-height: 1;
  color: currentColor;
  font-variant-numeric: tabular-nums;
}
.metric-tile .m-s {
  margin-top: 3px;
  font-size: 10px;
  color: var(--ink-mute);
  font-weight: 600;
  letter-spacing: .04em;
}
.tone-sage { color: var(--sage); }
.tone-brass { color: var(--brass-deep); }
.tone-amber { color: #D97706; }
.tone-blue { color: #2563EB; }
.tone-crimson { color: var(--crimson); }

/* Namoz bar per-prayer color */
.bar-fajr    { background: linear-gradient(90deg, #6D5DC8 0%, #F0A07A 100%); }
.bar-dhuhr   { background: linear-gradient(90deg, #FCD34D 0%, #F59E0B 100%); }
.bar-asr     { background: linear-gradient(90deg, #FB923C 0%, #C2410C 100%); }
.bar-maghrib { background: linear-gradient(90deg, #DC2626 0%, #7F1D1D 100%); }
.bar-isha    { background: linear-gradient(90deg, #312E81 0%, #0B1240 100%); }

.heatmap-card, .namoz-chart {
  margin: 14px 16px 0;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--paper-2);
  border: 1px solid var(--paper-line-2);
}
.chart-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.chart-head strong {
  font-family: var(--f-display);
  font-weight: 600; font-size: 18px;
  letter-spacing: -.01em;
}
.chart-head small {
  font-size: 11px; letter-spacing: .1em; color: var(--ink-mute);
  text-transform: uppercase; font-weight: 600;
}

.heatmap-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
}
.heatmap-grid .cell {
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--paper-line-2);
  position: relative;
}
.heatmap-grid .cell.l-1 { background: rgba(74, 107, 79, .18); }
.heatmap-grid .cell.l-2 { background: rgba(74, 107, 79, .38); }
.heatmap-grid .cell.l-3 { background: rgba(74, 107, 79, .65); }
.heatmap-grid .cell.l-4 { background: var(--sage); }
.heatmap-grid .cell.miss { background: var(--crimson-tint); }

.namoz-bar {
  display: grid;
  grid-template-columns: 70px 1fr 32px;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.namoz-bar .nm {
  font-family: var(--f-display); font-weight: 600; font-size: 15px;
  color: var(--ink);
}
.namoz-bar .track {
  height: 8px;
  background: var(--paper-line-2);
  border-radius: 999px;
  overflow: hidden;
}
.namoz-bar .fill {
  height: 100%;
  background: var(--sage);
  border-radius: 999px;
}
.namoz-bar .fill.warn { background: var(--brass-mid); }
.namoz-bar .pct {
  font-family: var(--f-body);
  font-size: 13px; font-weight: 700; color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ai-card {
  margin: 14px 16px 0;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border-radius: var(--r-lg);
  background: var(--brass-tint);
  border: 1px solid var(--brass-soft);
}
.ai-card .ic {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--brass);
  color: var(--brass-tint);
  display: grid; place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}
.ai-card .body {
  flex: 1;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.ai-card .body strong {
  display: block;
  font-family: var(--f-display);
  font-weight: 600; font-size: 16px; color: var(--ink);
  margin-bottom: 2px;
  letter-spacing: -.005em;
}

/* ============================================================
   SOZLAMALAR (Settings) screen
   ============================================================ */
.set-section {
  margin: 0 16px;
  display: flex; flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--paper-line-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.set-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--paper-line-2);
  cursor: pointer;
  contain: layout style;
}
.set-row:last-child { border-bottom: 0; }
.set-ico {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: grid; place-items: center;
}
.set-ico svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.set-ico.sage { background: var(--sage-tint); color: var(--sage); }
.set-ico.brass { background: var(--brass-tint); color: var(--brass); }
.set-ico.crimson { background: var(--crimson-tint); color: var(--crimson); }
.set-name {
  font-family: var(--f-display);
  font-weight: 600; font-size: 15px;
  color: var(--ink); line-height: 1.15;
  letter-spacing: -.005em;
}
.set-desc {
  margin-top: 2px;
  font-size: 11px;
  color: var(--ink-mute);
  font-weight: 500;
  line-height: 1.3;
}
.set-meta {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); font-weight: 700;
  white-space: nowrap;
}
.set-right,
.set-control {
  min-width: 0;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.chev {
  width: 14px; height: 14px;
  fill: none; stroke: var(--ink-faint); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto;
}

.toggle {
  width: 42px; height: 24px;
  border-radius: 999px;
  background: var(--paper-line);
  position: relative;
  cursor: pointer;
  transition: background .18s ease;
}
.toggle .knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--paper-3);
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
  transition: transform .18s ease;
}
.toggle.on { background: var(--sage); }
.toggle.on .knob { transform: translateX(18px); }

/* Language segmented switch */
.lang-switch {
  display: inline-flex;
  background: var(--paper-line);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.lang-switch button {
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--ink-mute);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.lang-switch button.on {
  background: var(--paper-3);
  color: var(--sage);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.set-row.lang-row { grid-template-columns: 36px 1fr auto; }

/* Sec section header (settings) */
.set-sec-head {
  padding: 18px 20px 8px;
  font-family: var(--f-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Helpers */
.spacer-24 { height: 24px; }
.spacer-12 { height: 12px; }

/* App fade in after splash (CSS transition, simple) */
.app {
  transition: opacity .42s ease;
}
.app.is-launching .app-header,
.app.is-launching .app-scroll,
.app.is-launching .bottom-nav {
  opacity: 0;
  transform: translateY(6px);
}
.app .app-header,
.app .app-scroll,
.app .bottom-nav {
  transition: opacity .5s cubic-bezier(.22, .9, .22, 1), transform .5s cubic-bezier(.22, .9, .22, 1);
}

/* ============================================================
   Settings action modals + browser auth
   ============================================================ */
.modal-backdrop,
.auth-shell {
  position: fixed;
  /* Keyboard-aware anchor (visual-viewport vars) instead of inset:0, so the
     phone/OTP inputs sit above the keyboard smoothly. */
  left: 0;
  right: 0;
  top: var(--namozim-modal-top, 0px);
  bottom: auto;
  height: var(--namozim-modal-vh, var(--modal-vh-fallback, 100dvh));
  z-index: 120;
  background: rgba(15, 23, 42, .34);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px;
  backdrop-filter: blur(5px);
}
.auth-shell { align-items: center; background: var(--paper); padding: 24px; }
.auth-card-mini {
  width: min(560px, 100%);
  max-height: min(82vh, 720px);
  overflow: auto;
  background: var(--paper-2);
  border: 1px solid var(--paper-line-2);
  border-radius: 28px;
  box-shadow: 0 22px 80px rgba(15, 23, 42, .22);
}
.modal-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 10px;
  background: linear-gradient(180deg, var(--paper-2), rgba(255,255,255,.88));
  border-bottom: 1px solid var(--paper-line);
}
.modal-head h3 { font-family: var(--f-display); font-size: 22px; color: var(--ink); }
.modal-head button {
  border: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--paper-line);
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
}
/* modal-body padding removed — controlled per-child (modal-stack, modal-footer) */
.modal-field { display: grid; gap: 6px; margin-bottom: 12px; font-size: 12px; font-weight: 800; color: var(--ink-mute); letter-spacing: .04em; text-transform: uppercase; }
.modal-field input,
.modal-field select,
.modal-field textarea {
  width: 100%;
  border: 1px solid var(--paper-line-2);
  border-radius: 16px;
  padding: 12px 14px;
  background: var(--paper-1);
  color: var(--ink);
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  outline: none;
}
.modal-field textarea { resize: vertical; min-height: 96px; }
.mini-btn {
  border: 1px solid var(--paper-line-2);
  border-radius: 16px;
  padding: 11px 14px;
  background: var(--paper-3);
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.mini-btn.primary { background: var(--sage); border-color: var(--sage); color: #fff; }
.mini-btn.danger { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.mini-btn.wide { width: 100%; margin-top: 8px; }
.mini-btn.link { background: var(--brass-tint); color: var(--brass); }
.mini-btn:disabled { opacity: .55; cursor: wait; }
.city-pick-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 360px; overflow: auto; }
.city-pick-list button,
.chips button {
  border: 1px solid var(--paper-line-2);
  background: var(--paper-1);
  border-radius: 16px;
  padding: 10px;
  color: var(--ink);
  font-weight: 700;
  cursor: pointer;
}
.city-pick-list button.active,
.chips button.on { background: var(--sage-tint); color: var(--sage); border-color: var(--sage); }
.target-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.modal-check { display:flex; align-items:center; gap:10px; margin: 4px 0 12px; font-weight:700; color:var(--ink); }
.chips { display:flex; flex-wrap:wrap; gap:8px; margin: 10px 0 12px; }
.preview-box { margin-top:12px; padding:14px; border-radius:18px; background:var(--sage-tint); color:var(--ink); display:grid; gap:4px; }
.preview-box small { color:var(--ink-mute); font-weight:700; }
.session-list { display:grid; gap:8px; }
.session-item { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border:1px solid var(--paper-line); border-radius:16px; background:var(--paper-1); }
.session-item b { display:block; font-size:14px; }
.session-item small { display:block; color:var(--ink-mute); font-size:11px; margin-top:3px; }
.settings-toast,
.modal-msg,
.auth-msg {
  margin: 12px 16px 0;
  padding: 10px 12px;
  border-radius: 16px;
  background: var(--brass-tint);
  color: var(--brass);
  font-size: 12px;
  font-weight: 800;
}
.modal-msg { margin: 14px 0 0; }
.auth-card-mini { padding: 24px 22px 28px; text-align:center; max-width: 420px; }
.auth-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 14px;
}
.auth-back-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-mute);
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.auth-back-link::before { content: "←"; margin-right: 6px; }
.auth-back-link:hover { color: var(--sage); }
.auth-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 36px;
  padding: 3px;
  border-radius: 999px;
  background: var(--paper-line);
  border: 1px solid var(--paper-line-2);
  flex: none;
}
.auth-lang-switch button {
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mute);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .04em;
  cursor: pointer;
}
.auth-lang-switch button.on {
  background: var(--paper-1);
  color: var(--sage);
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}
.auth-logo-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.auth-logo-mini {
  display: block;
  width:72px;
  height:72px;
  box-sizing: border-box;
  padding: 14px;
  border-radius:9999px;
  object-fit: contain;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.14), transparent 32%),
    linear-gradient(145deg, #0F5A40 0%, #073427 100%);
  box-shadow: 0 16px 28px -16px rgba(11,58,31,.5), 0 0 0 1px rgba(255,255,255,.10) inset;
}
.auth-card-mini h1 { font-family:var(--f-display); font-size:30px; margin-top:14px; color:var(--ink); }
.auth-card-mini p { color:var(--ink-mute); line-height:1.45; margin: 8px 0 16px; }
.auth-actions { display:grid; gap:8px; margin: 12px 0; }
.auth-form { text-align:left; display:grid; gap:8px; margin-top:14px; }
.auth-form label { font-size:11px; font-weight:800; color:var(--ink-mute); text-transform:uppercase; letter-spacing:.06em; }
.auth-form input { width:100%; border:1px solid var(--paper-line-2); border-radius:16px; padding:12px 14px; background:var(--paper-1); font:inherit; }
.about-box { text-align:center; display:grid; gap:10px; justify-items:center; }
.about-box img { width:64px; height:64px; border-radius:18px; }
.about-box a { color:var(--sage); font-weight:800; }
.danger-text { color: var(--crimson); font-weight:700; line-height:1.45; margin-bottom:12px; }
.empty-mini,
.loading-mini { padding:16px; text-align:center; color:var(--ink-mute); font-weight:700; }
@media (min-width: 740px) {
  .modal-backdrop { align-items:center; }
}

/* ============================================================
   Calendar status editor + modal polish fixes
   ============================================================ */
.cal-day.selected {
  box-shadow: 0 0 0 2px var(--sage), 0 10px 22px -16px rgba(11,58,31,.55);
}
.cal-day .dot-row span.good { background: var(--sage); }
.cal-day .dot-row span.bad { background: var(--crimson); }
.cal-day .dot-row span.empty { background: var(--ink-faint); opacity: .35; }
.cdd-prayer-card {
  border-bottom: 1px solid var(--paper-line-2);
  padding: 8px 0 10px;
}
.cdd-prayer-card:last-child { border-bottom: 0; }
.cdd-prayer-card .row { border-bottom: 0; padding: 0 0 8px; }
.cdd-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.cdd-actions button {
  border: 1px solid var(--paper-line-2);
  border-radius: 999px;
  padding: 8px 6px;
  background: var(--paper-3);
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .02em;
  cursor: pointer;
}
.cdd-actions button.active.ok,
.cdd-actions button:hover:not(:disabled):first-child {
  background: var(--sage-tint);
  color: var(--sage);
  border-color: rgba(21,128,61,.3);
}
.cdd-actions button.active.qaza,
.cdd-actions button:hover:not(:disabled):nth-child(2) {
  background: var(--crimson-tint);
  color: var(--crimson);
  border-color: rgba(220,38,38,.25);
}
.cdd-actions button.active.neutral,
.cdd-actions button:hover:not(:disabled):nth-child(3) {
  background: var(--brass-tint);
  color: var(--brass-deep);
  border-color: rgba(184,148,102,.3);
}
.cdd-actions button:disabled { opacity: .45; cursor: not-allowed; }
.cdd-prayer-card.disabled .cdd-actions { opacity: .8; }

.help-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.help-card {
  text-align: left;
  border: 1px solid var(--paper-line-2);
  background: linear-gradient(180deg, var(--paper-1), var(--paper-2));
  border-radius: 18px;
  padding: 13px 14px;
  cursor: pointer;
  color: var(--ink);
}
.help-card b {
  display: block;
  font-family: var(--f-display);
  font-size: 16px;
  line-height: 1.05;
}
.help-card small {
  display: block;
  margin-top: 6px;
  color: var(--ink-mute);
  font-weight: 650;
  line-height: 1.28;
}
.help-card:hover {
  border-color: rgba(21,128,61,.28);
  box-shadow: 0 10px 24px -20px rgba(11,58,31,.45);
}

/* ============================================================
   Product-level layout rebuild v6: compact nav, safe sheets,
   calendar status editor, and settings panels
   ============================================================ */
:root {
  --paper-1: var(--paper-2);
  --nav-h: 66px;
  --nav-bottom: max(10px, env(safe-area-inset-bottom));
  --app-x: 16px;
  --modal-vh-fallback: 100vh;
  --modal-safe-top: max(14px, var(--namozim-safe-top, env(safe-area-inset-top, 0px)));
  --modal-safe-bottom: max(14px, var(--namozim-safe-bottom, env(safe-area-inset-bottom, 0px)));
}

@supports (height: 100dvh) {
  :root { --modal-vh-fallback: 100dvh; }
}

.app-scroll {
  padding-bottom: calc(var(--nav-h) + var(--nav-bottom) + 22px);
}

.bottom-nav {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: var(--nav-bottom);
  height: 60px;
  padding: 4px;
  border-radius: 28px;
  overflow: hidden;
  z-index: 30;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(214, 204, 188, .82);
  box-shadow: 0 14px 34px -22px rgba(15, 23, 42, .38), inset 0 1px 0 rgba(255,255,255,.78);
}
.bottom-nav .nav-item,
.nav-item {
  min-width: 0;
  border-radius: 22px;
  gap: 1px;
  font-size: 9px;
  letter-spacing: .01em;
  font-weight: 850;
  padding: 3px 1px 2px;
}
.nav-item svg { width: 19px; height: 19px; stroke-width: 2.1; }
.nav-item.nav-settings svg {
  width: 21px;
  height: 21px;
  stroke-width: 2.25;
}
.nav-item.active {
  transform: none;
  background: linear-gradient(160deg, rgba(220,252,231,.94), rgba(243,231,202,.50));
  box-shadow: 0 8px 18px -14px rgba(21,128,61,.55);
}
.nav-item.nav-settings.active {
  color: var(--sage);
  background: linear-gradient(160deg, rgba(220,252,231,.98), rgba(255,255,255,.62));
}
.nav-item.nav-settings.active svg {
  filter: drop-shadow(0 2px 4px rgba(21,128,61,.18));
}
body.namozim-modal-open .bottom-nav {
  opacity: 0;
  transform: translateY(110%);
  pointer-events: none;
}
body.namozim-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}
body.namozim-modal-open .app-scroll { overflow: hidden; }

/* Overlay system */
.modal-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--namozim-modal-top, 0px);
  bottom: auto;
  height: var(--namozim-modal-vh, var(--modal-vh-fallback));
  z-index: 500;
  overflow: hidden;
  /* NO transition on top/height: these vars now track the keyboard via the
     visual viewport, and animating them fought the OS keyboard slide (the jump).
     Let the OS move the keyboard; the modal follows instantly, frame-by-frame. */
  background: rgba(15,23,42,.36);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: var(--modal-safe-top) 14px var(--modal-safe-bottom);
  box-sizing: border-box;
  overscroll-behavior: contain;
}
.modal-backdrop-center { align-items: center; }
.modal-card {
  width: min(430px, 100%);
  max-width: 100%;
  max-height: min(760px, calc(var(--namozim-modal-vh, var(--modal-vh-fallback)) - var(--modal-safe-top) - var(--modal-safe-bottom)));
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: 1px solid var(--paper-line-2);
  border-radius: 30px;
  box-shadow: 0 30px 90px -28px rgba(15, 23, 42, .44);
  box-sizing: border-box;
}
.modal-card-center {
  max-height: min(620px, calc(var(--namozim-modal-vh, var(--modal-vh-fallback)) - var(--modal-safe-top) - var(--modal-safe-bottom)));
  border-radius: 30px;
}
.modal-card-tall {
  max-height: min(860px, calc(var(--namozim-modal-vh, var(--modal-vh-fallback)) - var(--modal-safe-top) - var(--modal-safe-bottom)));
}
.modal-grabber {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: rgba(132,145,163,.34);
  align-self: center;
  margin: 10px 0 0;
  flex: 0 0 auto;
}
.modal-head {
  position: sticky;
  top: 0;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--paper-line);
  z-index: 3;
  box-sizing: border-box;
  overflow: hidden;
}
.modal-head h3 {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(22px, 7vw, 36px);
  line-height: 1;
  letter-spacing: -.06em;
  color: var(--ink);
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-close,
.modal-head button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(214,204,188,.64);
  color: var(--ink);
  font-size: 30px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}
.modal-body::-webkit-scrollbar,
.modal-body > .modal-stack::-webkit-scrollbar,
.modal-body > .city-modal-stack::-webkit-scrollbar,
.city-pick-list-v2::-webkit-scrollbar { display: none; }
.modal-stack {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  gap: 14px;
  padding-bottom: 16px;
}
.modal-body > .modal-stack {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px 16px;
  box-sizing: border-box;
}
.modal-body > .modal-msg {
  flex: 0 0 auto;
  margin: 0 20px 12px;
}
.modal-footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px 20px calc(12px + var(--namozim-safe-bottom, env(safe-area-inset-bottom, 0px)));
  background: var(--paper-2);
  border-top: 1px solid var(--paper-line);
  box-sizing: border-box;
  z-index: 3;
}
.modal-body > .about-box {
  flex: 1 1 0%;
  min-height: 0;
  overflow-y: auto;
  padding: 26px 22px 24px;
}
.modal-field {
  display: grid;
  gap: 8px;
  margin: 0;
  min-width: 0;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  color: var(--ink-mute);
  letter-spacing: .055em;
  text-transform: uppercase;
}
.modal-field input,
.modal-field select,
.modal-field textarea,
.auth-form input {
  min-height: 52px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--paper-line-2);
  border-radius: 18px;
  padding: 12px 16px;
  background: rgba(255,255,255,.48);
  color: var(--ink);
  font: inherit;
  font-size: max(16px, 1em); /* Prevent iOS auto-zoom on focus */
  font-weight: 800;
  outline: none;
  text-transform: none;
  letter-spacing: 0;
}
.modal-field textarea { min-height: 118px; resize: vertical; line-height: 1.35; font-size: max(16px, 1em); }
.modal-field small { color: var(--ink-mute); text-transform: none; letter-spacing: 0; font-weight: 650; }
.modal-two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 108px); gap: 12px; }
.modal-date-range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal-date-range input[type="date"] {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  font-size: max(16px, 1em); /* Prevent iOS zoom on focus */
  padding: 10px 10px;
}
.sheet-note {
  border: 1px solid var(--paper-line);
  background: rgba(243,231,202,.44);
  color: var(--ink-soft);
  border-radius: 20px;
  padding: 13px 14px;
  font-weight: 750;
  line-height: 1.35;
}
.mini-btn {
  min-height: 50px;
  border-radius: 18px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 900;
  border: 1px solid var(--paper-line-2);
  background: rgba(255,255,255,.58);
  box-shadow: 0 6px 16px -14px rgba(15,23,42,.30);
}
.mini-btn.primary { background: var(--sage); border-color: var(--sage); color: white; }
.mini-btn.danger { background: var(--crimson); border-color: var(--crimson); color: white; }
.mini-btn.danger.subtle { min-height: 36px; padding: 8px 12px; border-radius: 999px; font-size: 12px; }
.mini-btn.wide { width: 100%; margin: 0; }
.card-check {
  padding: 14px;
  border: 1px solid var(--paper-line);
  border-radius: 20px;
  background: rgba(255,255,255,.34);
  margin: 0;
}

.modal-body > .city-modal-stack {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 16px 20px 0;
  gap: 12px;
  box-sizing: border-box;
}
.city-modal-stack .modal-field { flex: 0 0 auto; }
.city-pick-list-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.city-pick-list-v2 button {
  min-height: 50px;
  border-radius: 18px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 900;
  background: rgba(255,255,255,.42);
}
.city-pick-list-v2 button.active {
  background: var(--sage-tint);
  color: var(--sage);
  border-color: rgba(21,128,61,.44);
}
.plan-target-list { display: grid; gap: 10px; }
.plan-target-row,
.session-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 66px;
  padding: 12px 14px;
  border: 1px solid var(--paper-line);
  border-radius: 22px;
  background: rgba(255,255,255,.38);
}
.plan-target-row b,
.session-item b { display: block; font-size: 16px; color: var(--ink); }
.plan-target-row small,
.session-item small { display: block; margin-top: 3px; font-size: 11px; color: var(--ink-mute); font-weight: 750; }
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 42px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255,255,255,.54);
  border: 1px solid var(--paper-line);
}
.stepper button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--sage);
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}
.stepper button:first-child { background: rgba(132,145,163,.13); color: var(--ink-mute); }
.stepper button:disabled { opacity: .36; }
.stepper strong { min-width: 30px; text-align: center; font-size: 16px; color: var(--ink); }
.chips-v2 { margin: 0; gap: 8px; }
.chips-v2 button { min-height: 38px; border-radius: 999px; padding: 8px 13px; font-weight: 900; }
.preview-box { border-radius: 22px; padding: 16px; margin: 0; }
.session-item.current { border-color: rgba(21,128,61,.28); background: var(--sage-tint); }
.session-pill { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--sage); color:#fff; font-weight:900; }
.help-card-grid-v2 { grid-template-columns: 1fr; gap: 10px; margin: 0; }
.help-card-grid-v2 .help-card {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 2px 12px;
  align-items: center;
  text-align: left;
  min-height: 72px;
  border-radius: 22px;
  background: rgba(255,255,255,.42);
  padding: 13px 14px;
}
.help-card-grid-v2 .help-card.active { background: var(--sage-tint); border-color: rgba(21,128,61,.38); }
.help-ico { grid-row: span 2; width: 42px; height: 42px; border-radius: 16px; display:grid; place-items:center; color:var(--sage); background: var(--sage-tint); font-weight: 900; }
.help-card-grid-v2 .help-card b { font-size: 16px; line-height: 1.1; }
.help-card-grid-v2 .help-card small { margin: 0; font-size: 12px; line-height: 1.25; }
.about-box-v2 { padding: 8px 2px 24px; }
.about-box-v2 img { width: 72px; height: 72px; border-radius: 22px; }
.about-box-v2 h3 { margin: 0; font-size: 28px; letter-spacing: -.05em; }
.about-box-v2 p { max-width: 330px; margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.45; }
.about-links { display:flex; gap: 14px; margin-top: 4px; }
.about-links a { color: var(--sage); font-weight: 900; text-decoration-thickness: 2px; }
.settings-toast { position: sticky; bottom: calc(var(--nav-h) + var(--nav-bottom) + 8px); margin: 14px 20px; z-index: 20; }

/* Settings modal design alignment: match the quieter Namozim settings UI. */
.modal-card {
  border-radius: 28px;
  background: var(--paper-2);
  border-color: var(--paper-line-2);
  box-shadow: 0 22px 70px -30px rgba(15, 23, 42, .42);
  font-family: var(--f-body);
  font-size: 15px;
}
.modal-card,
.modal-card button,
.modal-card input,
.modal-card select,
.modal-card textarea {
  font-family: var(--f-body);
}
.modal-grabber {
  width: 38px;
  height: 4px;
  margin-top: 10px;
  background: rgba(132, 145, 163, .28);
}
.modal-head {
  min-height: 72px;
  padding: 16px 20px 12px;
}
.modal-head h3 {
  font-family: var(--f-display);
  font-size: clamp(21px, 5.65vw, 23px);
  font-weight: 700;
  letter-spacing: -.018em;
  line-height: 1.05;
}
.modal-card-delete .modal-head h3,
.modal-card-calculator .modal-head h3 {
  font-size: clamp(20px, 5.35vw, 22px);
}
.modal-card-delete .modal-head h3 {
  font-size: clamp(19px, 5vw, 21px);
  letter-spacing: -.012em;
}
.modal-close,
.modal-head button {
  width: 42px;
  height: 42px;
  min-width: 42px;
  background: rgba(214, 204, 188, .56);
  position: relative;
  font-size: 0;
  font-weight: 600;
  line-height: 1;
  overflow: hidden;
}
.modal-close::before,
.modal-close::after,
.modal-head button::before,
.modal-head button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 17px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}
.modal-close::before,
.modal-head button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal-close::after,
.modal-head button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.modal-body > .modal-stack {
  gap: 13px;
  padding: 16px 20px 16px;
}
.modal-footer {
  padding: 12px 20px calc(12px + var(--namozim-safe-bottom, env(safe-area-inset-bottom, 0px)));
  background: var(--paper-2);
}
.sheet-note {
  border-radius: 18px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-soft);
}
.modal-field {
  gap: 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}
.modal-field input,
.modal-field select,
.modal-field textarea,
.auth-form input {
  min-height: 50px;
  border-radius: 16px;
  padding: 12px 14px;
  background: var(--paper-1);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.modal-field textarea {
  min-height: 108px;
  line-height: 1.38;
}
.modal-date-range input[type="date"] {
  min-height: 50px;
  padding: 10px 10px;
}
.mini-btn {
  min-height: 50px;
  border-radius: 16px;
  padding: 12px 16px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.mini-btn:disabled {
  opacity: .58;
  cursor: not-allowed;
}
.card-check {
  min-height: 56px;
  border-radius: 18px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
}
.modal-body > .city-modal-stack {
  padding: 16px 20px 0;
  gap: 12px;
}
.city-pick-list-v2 {
  gap: 8px;
  padding-bottom: calc(12px + var(--namozim-safe-bottom, env(safe-area-inset-bottom, 0px)));
}
.city-pick-list-v2 button {
  min-height: 48px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
}
.plan-target-list {
  gap: 9px;
}
.plan-target-row,
.session-item {
  min-height: 62px;
  padding: 11px 13px;
  border-radius: 18px;
  background: var(--paper-1);
}
.plan-target-row b,
.session-item b {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
}
.plan-target-row small,
.session-item small {
  font-size: 11px;
  font-weight: 500;
}
.stepper {
  min-height: 40px;
  padding: 4px;
}
.stepper button {
  width: 32px;
  height: 32px;
  font-size: 21px;
  font-weight: 700;
}
.stepper strong {
  min-width: 28px;
  font-size: 15px;
  font-weight: 700;
}
.chips-v2 {
  gap: 8px;
}
.chips-v2 button {
  min-height: 36px;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
}
.preview-box {
  border-radius: 18px;
  padding: 14px;
}
.help-card-grid-v2 {
  gap: 9px;
}
.help-card-grid-v2 .help-card {
  min-height: 68px;
  grid-template-columns: 38px 1fr;
  gap: 2px 11px;
  border-radius: 18px;
  padding: 12px 13px;
}
.help-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
}
.help-card-grid-v2 .help-card b {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
}
.help-card-grid-v2 .help-card small {
  font-size: 11px;
  font-weight: 500;
}
.about-box-v2 {
  gap: 10px;
  padding: 8px 2px 24px;
}
.about-box-v2 img {
  width: 78px;
  height: 78px;
  box-sizing: border-box;
  padding: 15px;
  border-radius: 9999px;
  object-fit: contain;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.14), transparent 32%),
    linear-gradient(145deg, #0F5A40 0%, #073427 100%);
  box-shadow: 0 16px 28px -16px rgba(11,58,31,.55), 0 0 0 1px rgba(255,255,255,.10) inset;
}
.about-box-v2 h3 {
  font-family: var(--f-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.about-box-v2 p {
  font-size: 15px;
  line-height: 1.45;
}
.about-links a {
  font-size: 15px;
}
.danger-text {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
.modal-card-city {
  max-height: min(640px, calc(var(--namozim-modal-vh, var(--modal-vh-fallback)) - var(--modal-safe-top) - var(--modal-safe-bottom)));
}
.modal-body > .city-location-stack {
  padding: 16px 20px 0;
  gap: 12px;
}
.city-selected-pill {
  min-height: 48px;
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--paper-line-2);
  background: var(--paper-1);
  color: var(--ink);
}
.city-selected-pill strong {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.005em;
}
.city-pin {
  width: 19px;
  height: 19px;
  display: grid;
  place-items: center;
  color: var(--sage);
}
.city-pin svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.city-chevron {
  color: var(--ink-mute);
  font-size: 22px;
  line-height: 1;
  transform: translateY(-2px);
}
.city-dropdown-list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--paper-line-2);
  border-radius: 22px;
  background: var(--paper-1);
  padding: 8px;
  box-sizing: border-box;
}
.city-dropdown-list::-webkit-scrollbar { display: none; }
.city-dropdown-list button {
  min-height: 48px;
  width: 100%;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 0 16px;
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.005em;
}
.city-dropdown-list button.active {
  background: var(--sage-tint);
  color: var(--sage);
}
.sessions-modal-stack {
  gap: 8px;
}
.session-list-v2 {
  display: grid;
  gap: 8px;
}
.sessions-modal-stack .session-item {
  min-height: auto;
  padding: 10px 12px;
  border-radius: 16px;
  gap: 10px;
  background: var(--paper-1);
  border-color: var(--paper-line);
}
.sessions-modal-stack .session-item b {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
}
.sessions-modal-stack .session-item small {
  font-size: 10.5px;
  font-weight: 500;
}
.sessions-modal-stack .mini-btn.danger.subtle {
  min-height: 34px;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 700;
}
.sessions-modal-stack .session-pill {
  width: 28px;
  height: 28px;
  font-size: 13px;
}
.metrics-modal-stack {
  gap: 10px;
}
.metrics-periods {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.metrics-periods button {
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid var(--paper-line-2);
  background: var(--paper-1);
  color: var(--ink-mute);
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 700;
}
.metrics-periods button.on {
  background: var(--sage-tint);
  border-color: rgba(21,128,61,.34);
  color: var(--sage);
}
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.metric-card-mini {
  min-height: 74px;
  border: 1px solid var(--paper-line);
  border-radius: 18px;
  background: var(--paper-1);
  padding: 13px;
  display: grid;
  align-content: center;
  gap: 5px;
}
.metric-card-mini b {
  font-family: var(--f-display);
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.025em;
  color: var(--ink);
}
.metric-card-mini span {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-mute);
}
.metrics-list {
  display: grid;
  gap: 8px;
}
.metrics-active-card {
  border: 1px solid var(--paper-line);
  border-radius: 20px;
  background: var(--paper-1);
  padding: 12px;
  display: grid;
  gap: 10px;
}
.metrics-active-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.metrics-active-head b {
  display: block;
  font-family: var(--f-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.metrics-active-head small {
  display: block;
  margin-top: 3px;
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 650;
}
.metrics-active-head > span {
  min-width: 42px;
  height: 34px;
  border-radius: 999px;
  background: var(--sage-tint);
  color: var(--sage);
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 800;
}
.metrics-list-head {
  margin-top: 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.metrics-user-row {
  min-height: 54px;
  padding: 10px 12px;
  border: 1px solid var(--paper-line);
  border-radius: 16px;
  background: var(--paper-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.metrics-user-row b {
  display: block;
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
}
.metrics-user-row small {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-mute);
}
.metrics-user-row span {
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--sage-tint);
  color: var(--sage);
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.qibla-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: grid;
  place-items: center;
  padding: max(14px, env(safe-area-inset-top, 0px)) 16px max(14px, env(safe-area-inset-bottom, 0px));
  background: rgba(12,18,27,.42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.qibla-modal-card {
  width: min(392px, 100%);
  border-radius: 28px;
  border: 1px solid var(--paper-line-2);
  background: var(--paper-2);
  box-shadow: 0 28px 82px -34px rgba(15,23,42,.50);
  padding: 18px;
  color: var(--ink);
  font-family: var(--f-body);
}
.qibla-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.qibla-modal-head h3 {
  margin: 0;
  font-family: var(--f-display);
  font-size: 22px;
  font-weight: 750;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.qibla-modal-head p {
  margin: 5px 0 0;
  color: var(--ink-mute);
  font-size: 13px;
  font-weight: 700;
}
.qibla-modal-head button {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(214,204,188,.56);
  color: var(--ink);
  position: relative;
  font-size: 0;
  line-height: 1;
  overflow: hidden;
}
.qibla-modal-head button::before,
.qibla-modal-head button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: center;
}
.qibla-modal-head button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.qibla-modal-head button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.qibla-compass-large {
  position: relative;
  width: min(272px, 72vw);
  aspect-ratio: 1;
  margin: 12px auto 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.78), rgba(226,236,215,.48) 55%, rgba(246,239,220,.62));
  border: 1px solid rgba(21,128,61,.15);
  box-shadow: inset 0 0 0 14px rgba(255,255,255,.24), 0 22px 50px -34px rgba(11,58,31,.55);
}
.qibla-ring {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  border: 1px solid rgba(21,128,61,.16);
}
.qibla-ring.ring-b {
  inset: 48px;
  border-color: rgba(139,111,63,.18);
}
.qibla-arrow-large {
  position: absolute;
  inset: 0;
  transform: rotate(var(--qibla-rotation, 42deg));
  transition: transform .28s ease;
}
.qibla-arrow-large span {
  position: absolute;
  top: 24px;
  left: 50%;
  width: 18px;
  height: 92px;
  transform: translateX(-50%);
  clip-path: polygon(50% 0, 100% 100%, 50% 76%, 0 100%);
  background: linear-gradient(180deg, var(--sage), #0B5D3E);
  filter: drop-shadow(0 9px 14px rgba(11,93,62,.23));
}
.qibla-center-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74px;
  height: 74px;
  transform: translate(-50%, -50%);
  /* Circular dark-green brand badge (matches the header brand-mark) so the
     transparent gold logo mark reads cleanly instead of sitting on a flat
     green square left over from the old square app-icon. */
  border-radius: 9999px;
  overflow: hidden;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.14), transparent 32%),
    linear-gradient(145deg, #0F5A40 0%, #073427 100%);
  display: grid;
  place-items: center;
  box-shadow: 0 14px 26px -18px rgba(11,58,31,.62), 0 0 0 1px rgba(255,255,255,.10) inset;
}
.qibla-center-mark img {
  width: 48px;
  height: 48px;
  object-fit: contain;
}
.qibla-dir {
  position: absolute;
  font-family: var(--f-display);
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-mute);
}
.q-n { top: 9px; left: 50%; transform: translateX(-50%); }
.q-s { bottom: 9px; left: 50%; transform: translateX(-50%); }
.q-e { right: 12px; top: 50%; transform: translateY(-50%); }
.q-w { left: 12px; top: 50%; transform: translateY(-50%); }
.qibla-readout {
  display: grid;
  justify-items: center;
  gap: 4px;
  margin-bottom: 14px;
  text-align: center;
}
.qibla-readout b {
  font-family: var(--f-display);
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--sage);
}
.qibla-readout span {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}
.qibla-readout small {
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 600;
}

.ai-chat-backdrop {
  position: fixed;
  /* Anchor to the keyboard-aware visual-viewport vars (like .modal-backdrop)
     instead of inset:0, so the chat (and its "savol yozing" input) rides above
     the keyboard smoothly instead of being shoved by iOS. */
  left: 0;
  right: 0;
  top: var(--namozim-modal-top, 0px);
  bottom: auto;
  height: var(--namozim-modal-vh, var(--modal-vh-fallback, 100dvh));
  z-index: 1520;
  display: grid;
  place-items: end center;
  padding: max(12px, env(safe-area-inset-top, 0px)) 14px max(12px, env(safe-area-inset-bottom, 0px));
  background: rgba(12,18,27,.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.ai-chat-card {
  width: min(430px, 100%);
  max-height: min(720px, calc(var(--namozim-modal-vh, var(--modal-vh-fallback, 100dvh)) - 28px));
  border-radius: 28px;
  border: 1px solid var(--paper-line-2);
  background: var(--paper-2);
  box-shadow: 0 28px 82px -34px rgba(15,23,42,.52);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--f-body);
}
.ai-chat-head {
  flex: 0 0 auto;
  min-height: 74px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 44px 1fr 40px;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--paper-line);
}
.ai-orb {
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, var(--brass), var(--brass-mid));
  color: var(--brass-tint);
  border: 2px solid rgba(255,255,255,.72);
  box-shadow: 0 10px 20px -14px rgba(139,111,63,.70);
  font-weight: 900;
}
.ai-chat-head h3 {
  margin: 0;
  font-family: var(--f-display);
  font-size: 20px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
}
.ai-chat-head p {
  margin: 5px 0 0;
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 650;
}
.ai-chat-head button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(214,204,188,.56);
  color: var(--ink);
  position: relative;
  font-size: 0;
}
.ai-chat-head button::before,
.ai-chat-head button::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}
.ai-chat-head button::before { transform: translate(-50%, -50%) rotate(45deg); }
.ai-chat-head button::after { transform: translate(-50%, -50%) rotate(-45deg); }
.ai-chat-body {
  flex: 1 1 auto;
  min-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.ai-chat-body::-webkit-scrollbar { display: none; }
.ai-msg {
  display: flex;
}
.ai-msg span {
  max-width: 84%;
  border-radius: 18px;
  padding: 11px 13px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.36;
  white-space: pre-wrap;
}
.ai-msg.bot { justify-content: flex-start; }
.ai-msg.bot span {
  background: var(--paper-1);
  border: 1px solid var(--paper-line);
  color: var(--ink-soft);
}
.ai-msg.user { justify-content: flex-end; }
.ai-msg.user span {
  background: var(--sage);
  color: #fff;
  border: 1px solid rgba(21,128,61,.10);
}
.ai-msg.typing span {
  color: var(--ink-mute);
}
.ai-quick-row {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 14px 10px;
}
.ai-quick-row::-webkit-scrollbar { display: none; }
.ai-quick-row button {
  flex: 0 0 auto;
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid var(--paper-line-2);
  background: var(--paper-1);
  color: var(--ink-soft);
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
}
.ai-chat-error {
  margin: 0 14px 8px;
  color: var(--crimson);
  font-size: 12px;
  font-weight: 700;
}
.ai-chat-input {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--paper-line);
  background: rgba(255,252,246,.76);
}
.ai-chat-input textarea {
  min-height: 44px;
  max-height: 94px;
  resize: none;
  border: 1px solid var(--paper-line-2);
  border-radius: 16px;
  background: var(--paper-1);
  color: var(--ink);
  font-family: var(--f-body);
  /* 16px min: iOS Safari/WebView auto-zooms (and reflows) any focused input
     with font-size < 16px, which reads as a slow, janky keyboard open. */
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  padding: 12px 13px;
  outline: none;
}
.ai-chat-input button {
  min-width: 82px;
  height: 44px;
  border: 0;
  border-radius: 16px;
  background: var(--sage);
  color: #fff;
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 800;
}
.ai-chat-input button:disabled {
  opacity: .48;
}

/* Calendar status editor rebuild */
.cal-day-detail-v2 {
  margin: 14px 16px 0;
  border-radius: 28px;
  padding: 22px 18px 18px;
}
.cdd-head { align-items: flex-start; gap: 12px; }
.cdd-date { font-size: clamp(26px, 7.2vw, 36px); line-height: 1.05; letter-spacing: -.06em; }
.cdd-date .hijri { margin-top: 6px; font-size: 13px; letter-spacing: .08em; }
.cdd-score { font-size: 34px; line-height: 1; }
.cdd-score .of { font-size: 17px; }
.cdd-pray-v2 { display: grid; gap: 0; }
.cdd-prayer-card { display: none; }
.cdd-prayer-row {
  padding: 15px 0 14px;
  border-bottom: 1px solid var(--paper-line-2);
  display: grid;
  gap: 10px;
  contain: layout style;
}
.cdd-prayer-row:last-child { border-bottom: 0; }
.cdd-prayer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.cdd-name-block {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.cdd-name-block .nm {
  font-family: var(--f-display);
  font-size: clamp(24px, 5.8vw, 30px);
  font-weight: 900;
  letter-spacing: -.05em;
  color: var(--ink);
}
.cdd-name-block .tm {
  font-size: clamp(19px, 4.8vw, 24px);
  font-weight: 900;
  color: var(--ink);
  letter-spacing: .02em;
}
.cdd-status-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 7px 12px 6px;
  font-size: 11px;
  line-height: 1;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: var(--paper-line);
  color: var(--ink-mute);
}
.cdd-status-pill.ok { background: var(--sage-tint); color: var(--sage); }
.cdd-status-pill.qaza { background: var(--crimson-tint); color: var(--crimson); }
.cdd-status-pill.late { background: var(--brass-tint); color: var(--brass-deep); }
.cdd-status-pill.neutral { background: rgba(132,145,163,.12); color: var(--ink-mute); }
.cdd-segmented {
  justify-self: end;
  width: min(100%, 310px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: rgba(255,255,255,.42);
}
.cdd-segmented button {
  min-height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .02em;
  cursor: pointer;
}
.cdd-segmented button.active.ok { background: var(--sage-tint); color: var(--sage); box-shadow: inset 0 0 0 1px rgba(21,128,61,.18); }
.cdd-segmented button.active.qaza { background: var(--crimson-tint); color: var(--crimson); box-shadow: inset 0 0 0 1px rgba(220,38,38,.15); }
.cdd-segmented button.active.neutral { background: var(--paper-3); color: var(--ink-soft); box-shadow: var(--sh-1); }
.cdd-segmented button:disabled { opacity: .42; cursor: not-allowed; }
.cdd-prayer-row.disabled .cdd-segmented { opacity: .72; }

/* Stats naming/card polish */
.namoz-chart .chart-head strong { line-height: 1.12; }
.namoz-chart { border-radius: 28px; }

@media (max-width: 370px) {
  .bottom-nav { left: 10px; right: 10px; height: 56px; }
  .nav-item { font-size: 8px; }
  .nav-item svg { width: 18px; height: 18px; }
  .modal-backdrop { padding-left: 8px; padding-right: 8px; }
  .modal-head { padding-left: 16px; padding-right: 16px; }
  .modal-body > .modal-stack { padding-left: 16px; padding-right: 16px; }
  .modal-footer { padding-left: 16px; padding-right: 16px; }
  .modal-two-col,
  .modal-date-range { grid-template-columns: 1fr; }
  .city-pick-list-v2 { grid-template-columns: 1fr; }
  .modal-body > .city-modal-stack { padding-left: 16px; padding-right: 16px; }
  .cdd-name-block { flex-direction: column; align-items: flex-start; gap: 2px; }
  .cdd-segmented { width: 100%; }
}


/* ============================================================
   Calendar detail revert v7: restore original compact list
   ============================================================ */
.cal-day-detail {
  margin: 14px 16px 0;
  padding: 18px 20px;
  border-radius: var(--r-lg);
  background: var(--paper-2);
  border: 1px solid var(--paper-line-2);
}
.cdd-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.cdd-date {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ink);
}
.cdd-date .hijri {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--ink-mute);
  font-family: var(--f-body);
  font-weight: 600;
  margin-top: 2px;
  text-transform: uppercase;
}
.cdd-score {
  font-family: var(--f-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--sage);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.cdd-score .of { color: var(--ink-faint); font-size: 16px; }
.cdd-pray {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cdd-pray .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--paper-line-2);
  font-size: 13px;
}
.cdd-pray .row:last-child { border-bottom: 0; }
.cdd-pray .nm {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
}
.cdd-pray .right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.cdd-pray .tm {
  font-family: var(--f-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.cdd-pray .st {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}
.cdd-pray .st.ok { background: var(--sage-tint); color: var(--sage); }
.cdd-pray .st.late { background: var(--brass-tint); color: var(--brass); }
.cdd-pray .st.qaza { background: var(--crimson-tint); color: var(--crimson); }
.cdd-pray .st:not(.ok):not(.late):not(.qaza) { color: var(--ink-mute); background: rgba(132,145,163,.10); }

/* Today + calendar status actions */
.cal-day-detail-v2 {
  border-radius: 28px;
  padding: 22px 18px 18px;
}
.cal-day-detail-v2 .cdd-head {
  align-items: flex-start;
  margin-bottom: 12px;
}
.cal-day-detail-v2 .cdd-date {
  font-size: clamp(22px, 5.8vw, 28px);
  font-weight: 800;
  letter-spacing: -.035em;
}
.cal-day-detail-v2 .cdd-pray-v2 {
  display: grid;
  gap: 0;
}
.cal-day-detail-v2 .cdd-prayer-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--paper-line-2);
  display: grid;
  gap: 6px;
  position: relative;
}
.cal-day-detail-v2 .cdd-prayer-row:last-child { border-bottom: 0; }
.cal-day-detail-v2 .cdd-prayer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cal-day-detail-v2 .cdd-name-block {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.cal-day-detail-v2 .cdd-name-block .nm {
  font-family: var(--f-display);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ink);
}
.cal-day-detail-v2 .cdd-name-block .tm {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-mute);
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.cal-day-detail-v2 .cdd-status-pill {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 10px;
  line-height: 1;
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .08em;
  background: rgba(132,145,163,.12);
  color: var(--ink-mute);
}
.cal-day-detail-v2 .cdd-status-pill.ok { background: var(--sage-tint); color: var(--sage); }
.cal-day-detail-v2 .cdd-status-pill.qaza { background: var(--crimson-tint); color: var(--crimson); }
.cal-day-detail-v2 .cdd-status-pill.late { background: var(--brass-tint); color: var(--brass-deep); }
.cdd-status-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  position: relative;
}
.cdd-segmented {
  justify-self: end;
  width: min(100%, 292px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--paper-line);
  border-radius: 999px;
  background: rgba(255,255,255,.42);
}
.cdd-segmented button {
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-mute);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  cursor: pointer;
}
.cdd-segmented button.active.ok { background: var(--sage-tint); color: var(--sage); box-shadow: inset 0 0 0 1px rgba(21,128,61,.18); }
.cdd-segmented button.active.qaza { background: var(--crimson-tint); color: var(--crimson); box-shadow: inset 0 0 0 1px rgba(220,38,38,.15); }
.cdd-segmented button.active.neutral { background: var(--paper-3); color: var(--ink-soft); box-shadow: var(--sh-1); }
.cdd-segmented button:disabled { opacity: .42; cursor: not-allowed; }
.cdd-make-up {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 13px;
  border-radius: 999px;
  border: 1px solid var(--sage);
  background: var(--sage);
  color: var(--paper-2);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}
.cdd-make-up.subtle {
  background: var(--paper-3);
  border-color: var(--paper-line-2);
  color: var(--ink-mute);
}
.cdd-make-up:disabled { opacity: .45; cursor: not-allowed; }

@media (max-width: 370px) {
  .today-head-left { gap: 6px; }
  .today-calendar-btn { width: 30px; height: 30px; }
  .prayer-status-actions {
    max-width: 128px;
    flex-wrap: wrap;
  }
  .btn-prayer-status {
    min-height: 30px;
    padding: 0 9px;
    font-size: 10px;
  }
  .cdd-status-controls {
    align-items: stretch;
    flex-direction: column;
  }
  .cdd-segmented {
    width: 100%;
  }
}

/* Recent qaza actions — last 30 undoable actions */
.qaza-history-card {
  margin: 14px 16px 0;
}
.qaza-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qaza-history-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--paper-2);
  border: 1px solid var(--paper-line-2);
  border-radius: var(--r-lg);
}
.qaza-history-row b {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
}
.qaza-history-row small {
  display: block;
  margin-top: 3px;
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 500;
}
.qaza-history-row .mini-btn {
  min-height: 32px;
  padding: 0 12px;
  white-space: nowrap;
}
.metrics-segments {
  margin-top: -2px;
}

/* Auth login refinements: language switch stays on top, site backlink sits under logo. */
.auth-top-row {
  justify-content: center;
  margin-bottom: 16px;
}
.auth-logo-stack .auth-back-link {
  margin: 0 auto;
  font-size: 12px;
  line-height: 1.2;
}
.auth-logo-stack .auth-back-link::before {
  font-size: 14px;
}

.otp-timer-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--paper-line-2);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--sage-tint), rgba(255,255,255,.72));
  color: var(--ink);
  animation: otp-soft-pulse 1.8s ease-in-out infinite;
}
.otp-timer-card.expired {
  background: var(--brass-tint);
  animation: none;
}
.otp-timer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
}
.otp-timer-head b {
  color: var(--sage);
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.otp-timer-card.expired .otp-timer-head b {
  color: var(--brass);
}
.otp-progress {
  height: 8px;
  border-radius: 999px;
  background: rgba(21,128,61,.12);
  overflow: hidden;
}
.otp-progress span {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sage), rgba(21,128,61,.72), var(--sage));
  transition: width .35s ease;
}
.otp-timer-card.expired .otp-progress span {
  background: var(--brass);
}
.otp-timer-card small {
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 800;
}
@keyframes otp-soft-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(21,128,61,0); }
  50% { box-shadow: 0 10px 24px rgba(21,128,61,.08); }
}


/* Login layout: keep logo centered and place back link under it. */
.auth-logo-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.auth-logo-stack .auth-logo-mini {
  margin: 0 auto;
}

.auth-logo-stack .auth-back-link {
  margin: 0 auto;
}

/* Women Mode: privacy-friendly, soft states. */
.women-mode-section {
  display: grid;
  gap: 12px;
}
.women-mode-note,
.women-mode-disclaimer {
  padding: 12px 14px;
  border: 1px solid var(--paper-line-2);
  border-radius: 18px;
  background: rgba(255,255,255,.58);
  color: var(--ink-mute);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}
.women-mode-disclaimer {
  font-size: 12px;
  opacity: .86;
}
.women-mode-banner,
.women-mode-active-card,
.women-mode-start-card,
.women-mode-supportive-settings {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(74,107,79,.16);
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(246,241,230,.84), rgba(255,255,255,.72));
  box-shadow: 0 12px 32px -24px rgba(11,58,31,.35);
}
.women-mode-banner b,
.women-mode-active-card b,
.women-mode-start-card b,
.women-mode-supportive-settings b {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
}
.women-mode-banner span,
.women-mode-active-card span,
.women-mode-start-card span,
.women-mode-supportive-settings span {
  color: var(--ink-mute);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.women-mode-actions,
.women-mode-quick-actions,
.women-mode-frequency {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.women-mode-date-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.women-mode-date-row input {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--paper-line-2);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  color: var(--ink);
  font-weight: 750;
}
.women-mode-chip {
  min-height: 34px;
  padding: 8px 12px;
  border: 1px solid var(--paper-line-2);
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  color: var(--ink-mute);
  font-weight: 850;
}
.women-mode-chip.active {
  border-color: rgba(74,107,79,.28);
  background: rgba(74,107,79,.12);
  color: var(--sage);
}
.status-menu-excused .status-menu-trigger,
.cdd-status-pill.excused,
.prayer-row.excused .p-meta {
  color: var(--ink-mute);
}
.prayer-row.excused {
  border-color: rgba(74,107,79,.10);
  background: rgba(246,241,230,.50);
}
.prayer-row.excused .p-ico {
  opacity: .7;
}
.cal-day.excused {
  background: rgba(122,113,92,.12);
  color: var(--ink-mute);
}

/* Women Mode compact UX: keep only nifos option and match Namozim typography scale. */
.women-mode-section {
  gap: 8px;
  border-radius: 22px;
  font-family: var(--f-body);
}
.women-mode-section .set-row {
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 8px 12px;
}
.women-mode-section .set-ico {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}
.women-mode-section .set-name {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 750;
  letter-spacing: -.01em;
}
.women-mode-section .set-desc {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
}
.women-mode-note,
.women-mode-disclaimer {
  padding: 9px 11px;
  border-radius: 15px;
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
}
.women-mode-note small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1.25;
}
.women-mode-banner,
.women-mode-active-card,
.women-mode-start-card,
.women-mode-supportive-settings {
  gap: 7px;
  padding: 10px;
  border-radius: 18px;
  box-shadow: 0 8px 22px -20px rgba(11,58,31,.28);
}
.women-mode-cycle-type-single {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}
.women-mode-cycle-type-single button {
  width: 100%;
  justify-content: flex-start;
  min-height: 34px;
  border-radius: 14px;
  padding: 8px 11px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -.01em;
}
.women-mode-section .mini-btn {
  min-height: 36px;
  border-radius: 14px;
  padding: 8px 11px;
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 750;
  letter-spacing: -.01em;
  box-shadow: 0 5px 14px -14px rgba(15,23,42,.30);
}
.women-mode-section .mini-btn.wide {
  min-height: 40px;
  margin-top: 2px;
}
.women-mode-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.women-mode-section .modal-field {
  gap: 6px;
  margin: 0;
  font-family: var(--f-body);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .065em;
}
.women-mode-section .modal-field input {
  min-height: 40px;
  border-radius: 14px;
  padding: 8px 11px;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 750;
}
.women-mode-active-card b,
.women-mode-start-card b,
.women-mode-supportive-settings b {
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 750;
}
.women-mode-active-card span,
.women-mode-start-card span,
.women-mode-supportive-settings span,
.women-mode-supportive-settings .sheet-note {
  font-family: var(--f-body);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
}


/* Women Mode v018 compact/nifos fallback. Covers both new and any stale two-chip JSX. */
.women-mode-section {
  gap: 8px !important;
  font-family: var(--f-body) !important;
}
.women-mode-note,
.women-mode-disclaimer {
  padding: 8px 10px !important;
  border-radius: 14px !important;
  font-family: var(--f-body) !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  line-height: 1.32 !important;
}
.women-mode-note small {
  display: block !important;
  margin-top: 2px !important;
  font-size: 10.5px !important;
  line-height: 1.25 !important;
}
.women-mode-start-card,
.women-mode-active-card,
.women-mode-supportive-settings {
  gap: 7px !important;
  padding: 9px !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 20px -20px rgba(11,58,31,.28) !important;
}
.women-mode-cycle-type {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
  margin: 0 !important;
}
.women-mode-cycle-type button:first-child:not(:only-child) {
  display: none !important;
}
.women-mode-cycle-type button,
.women-mode-cycle-type button:last-child,
.women-mode-cycle-type-single button {
  width: 100% !important;
  justify-content: flex-start !important;
  min-height: 34px !important;
  padding: 8px 11px !important;
  border-radius: 14px !important;
  font-family: var(--f-body) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  letter-spacing: -.01em !important;
}
.women-mode-cycle-type button:last-child {
  border-color: rgba(19,139,67,.38) !important;
  background: rgba(22,163,74,.12) !important;
  color: var(--sage) !important;
}
.women-mode-quick-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 7px !important;
}
.women-mode-section .mini-btn,
.women-mode-quick-actions .mini-btn,
.women-mode-start-card .mini-btn {
  min-height: 34px !important;
  border-radius: 14px !important;
  padding: 8px 11px !important;
  font-family: var(--f-body) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}
.women-mode-start-card .field {
  gap: 5px !important;
}
.women-mode-start-card .field label,
.women-mode-start-card label {
  font-family: var(--f-body) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}
.women-mode-start-card input[type="date"] {
  min-height: 34px !important;
  padding: 7px 10px !important;
  border-radius: 14px !important;
  font-family: var(--f-body) !important;
  font-size: 13px !important;
  font-weight: 750 !important;
}
.women-mode-start-card .mini-btn.primary.wide {
  min-height: 38px !important;
  margin-top: 2px !important;
}



/* Women Mode patch 3: expose the two primary actions near the top without changing backend logic. */
.women-mode-primary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.women-mode-primary-action {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  gap: 3px;
  align-content: center;
  min-width: 0;
  min-height: 72px;
  padding: 12px 12px;
  border: 1px solid rgba(19,139,67,.22);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(22,163,74,.13), rgba(255,255,255,.72));
  color: var(--ink);
  text-align: left;
  box-shadow: 0 10px 24px -22px rgba(11,58,31,.32);
  cursor: pointer;
  touch-action: manipulation;
}
.women-mode-primary-action.accent {
  border-color: rgba(176,132,69,.28);
  background: linear-gradient(135deg, rgba(176,132,69,.14), rgba(255,255,255,.72));
}
.women-mode-primary-action:active {
  transform: translateY(1px) scale(.99);
}
.women-mode-primary-action b,
.women-mode-primary-action span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.women-mode-primary-action b {
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 13px;
  font-weight: 850;
  line-height: 1.18;
}
.women-mode-primary-action span {
  color: var(--ink-mute);
  font-family: var(--f-body);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
}
@media (max-width: 380px) {
  .women-mode-primary-actions { grid-template-columns: minmax(0, 1fr); }
  .women-mode-primary-action { min-height: 58px; }
}

/* Hotfix: Telegram iOS may re-apply text autosizing after background/foreground.
   Keep the Mini App typography pinned to the designed pixel sizes. */
html, body, #root, .app, .app * {
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}
html, body, #root { font-size: 16px !important; }
.sec-head h2 { font-size: 20px !important; line-height: 1.05 !important; }
.th-name { font-size: 36px !important; line-height: 1 !important; }
.th-count { font-size: 22px !important; line-height: 1 !important; }
.p-name { font-size: 20px !important; line-height: 1.1 !important; }
.prayer-row.passed .p-name { font-size: 18px !important; }
.prayer-row.current .p-name { font-size: 20px !important; }
.p-meta { font-size: 12px !important; line-height: 1.25 !important; }
.status-menu-trigger { font-size: 12px !important; }
.bottom-nav .nav-item, .nav-item { font-size: 9px !important; }
.cal-day-detail-v2 .cdd-date { font-size: clamp(22px, 5.8vw, 28px) !important; }
.cal-day-detail-v2 .cdd-name-block .nm { font-size: 19px !important; }
.cal-day-detail-v2 .cdd-name-block .tm { font-size: 13px !important; }
.cal-day-detail-v2 .cdd-status-pill { font-size: 10px !important; }


/* Launch splash overlay: scoped presentation-only opening animation. */
/* Launch text uses the same original Mini App font stack as the app. */
.launch-splash {
  font-family: var(--f-launch);
  position: fixed;
  inset: 0;
  width: 100%;
  min-height: 100%;
  height: var(--namozim-vh, 100dvh);
  padding: calc(var(--namozim-safe-top, 0px) + 24px) 24px calc(var(--namozim-safe-bottom, 0px) + 24px);
  box-sizing: border-box;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  z-index: 9999;
  color: rgba(255, 255, 255, .94);
  background-color: #0a2f25;
  background:
    radial-gradient(circle at 50% 30%, rgba(45, 128, 90, .34), transparent 34%),
    radial-gradient(circle at 50% 66%, rgba(243, 210, 122, .10), transparent 30%),
    linear-gradient(160deg, #08281f 0%, #0d4432 52%, #061d17 100%);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.launch-splash.is-exiting,
.launch-splash.is-leaving {
  will-change: opacity;
}

.launch-splash::before,
.launch-splash::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.launch-splash::before {
  background:
    radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .08), transparent 28%),
    radial-gradient(circle at 50% 46%, rgba(243, 210, 122, .12), transparent 36%);
}

.launch-splash::after {
  background: radial-gradient(ellipse at center, transparent 54%, rgba(2, 18, 14, .34) 100%);
}

.launch-splash.is-exiting,
.launch-splash.is-leaving {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.launch-splash__poster {
  width: min(100%, 360px);
  min-height: min(420px, calc(var(--namozim-vh, 100dvh) - var(--namozim-safe-top, 0px) - var(--namozim-safe-bottom, 0px) - 48px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3.4vh, 20px);
  text-align: center;
  opacity: 1;
  transform: translateZ(0);
  animation: launchSplashPosterIn .32s cubic-bezier(.2, .82, .22, 1) .02s both;
}

.launch-splash__logo-wrap {
  width: clamp(100px, 28vw, 124px);
  max-width: 32vh;
  aspect-ratio: 1;
  border-radius: 9999px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .18), transparent 34%),
    radial-gradient(circle at 50% 75%, rgba(243, 210, 122, .14), transparent 40%),
    linear-gradient(145deg, #0f5a40 0%, #063024 100%);
  border: 0;
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .24),
    0 0 0 1px rgba(255, 255, 255, .08),
    0 0 46px rgba(243, 210, 122, .16);
  flex: 0 0 auto;
}

.launch-splash__logo {
  width: 70%;
  height: 70%;
  object-fit: contain;
  border-radius: 0;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .16));
}

.launch-splash__brand {
  display: grid;
  gap: 6px;
  max-width: 100%;
}

.launch-splash__title {
  margin: 0;
  font-family: var(--f-launch);
  font-size: clamp(40px, 11vw, 56px);
  line-height: .98;
  font-weight: 700;
  letter-spacing: -.04em;
  text-shadow: 0 4px 18px rgba(0, 0, 0, .22);
}

.launch-splash__tagline {
  margin: 0;
  font-family: var(--f-launch);
  font-size: clamp(13px, 3.8vw, 16px);
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .76);
}

.launch-splash__loader {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 18px;
  margin-top: 2px;
}

.launch-splash__loader span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(243, 210, 122, .88);
  box-shadow: 0 0 12px rgba(243, 210, 122, .28);
  animation: launchSplashDot 1s ease-in-out infinite;
}

.launch-splash__loader span:nth-child(2) { animation-delay: .14s; }
.launch-splash__loader span:nth-child(3) { animation-delay: .28s; }

@keyframes launchSplashPosterIn {
  from { opacity: .98; transform: translate3d(0, 4px, 0) scale(.996); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes launchSplashDot {
  0%, 80%, 100% { transform: translateY(0); opacity: .46; }
  40% { transform: translateY(-4px); opacity: 1; }
}

@media (max-height: 560px) {
  .launch-splash {
    padding-top: calc(var(--namozim-safe-top, 0px) + 16px);
    padding-bottom: calc(var(--namozim-safe-bottom, 0px) + 16px);
  }

  .launch-splash__poster {
    min-height: 320px;
    gap: 10px;
  }

  .launch-splash__logo-wrap {
    width: clamp(86px, 24vw, 108px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .launch-splash,
  .launch-splash *,
  .launch-splash *::before,
  .launch-splash *::after {
    animation: none !important;
    transition: opacity .08s linear, visibility .08s linear !important;
  }

  .launch-splash__poster {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* v16 patch 1: safe modal responsive fixes for qazo/add-plan/calculator. */
.qazo-add-date-count {
  grid-template-columns: minmax(0, 1fr) minmax(92px, 122px);
  align-items: end;
}
.qazo-add-date-count .modal-field,
.qazo-calculator-date-range .modal-field,
.plan-target-row > div {
  min-width: 0;
}
.qazo-add-date-count input[type="date"],
.qazo-calculator-date-range input[type="date"],
.qazo-count-picker {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.qazo-count-picker {
  text-align: center;
  text-align-last: center;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.qazo-calculator-date-range {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}
.qazo-calculator-date-range input[type="date"] {
  text-align: center;
  font-size: 16px;
}
.plan-target-row {
  align-items: center;
}
.plan-target-row .stepper {
  flex: 0 0 auto;
  align-self: center;
}
.stepper button,
.stepper strong {
  display: grid;
  place-items: center;
  line-height: 1;
}
.stepper button {
  padding: 0;
}
@media (max-width: 480px) {
  .qazo-calculator-date-range {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 390px) {
  .qazo-add-date-count {
    grid-template-columns: minmax(0, 1fr) minmax(82px, 104px);
    gap: 8px;
  }
  .qazo-add-date-count .modal-field input,
  .qazo-add-date-count .modal-field select {
    padding-left: 10px;
    padding-right: 10px;
  }
}
@media (max-width: 340px) {
  .qazo-add-date-count {
    grid-template-columns: 1fr;
  }
}

/* v17 patch 1 follow-up: force mobile-safe qazo/calculator layouts to avoid iOS date/select overlap. */
.qazo-add-date-count,
.modal-body > .modal-stack .qazo-add-date-count {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(92px, 118px) !important;
  column-gap: 14px !important;
  row-gap: 10px !important;
  align-items: end !important;
  overflow: visible;
}
.qazo-add-date-count .modal-field,
.qazo-calculator-date-range .modal-field {
  min-width: 0 !important;
  max-width: 100%;
  overflow: hidden;
}
.qazo-add-date-count input[type="date"],
.qazo-add-date-count select,
.qazo-count-picker,
.qazo-calculator-date-range input[type="date"] {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.qazo-add-date-count input[type="date"],
.qazo-calculator-date-range input[type="date"] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qazo-count-picker {
  height: 50px;
  text-align: center;
  text-align-last: center;
  font-variant-numeric: tabular-nums;
}
.qazo-calculator-date-range,
.modal-body > .modal-stack .qazo-calculator-date-range {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: end !important;
}
.plan-target-row {
  display: flex !important;
  align-items: center !important;
}
.plan-target-row > div:first-child {
  min-width: 0 !important;
  flex: 1 1 auto;
}
.plan-target-row .stepper {
  flex: 0 0 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
}
.plan-target-row .stepper button,
.plan-target-row .stepper strong {
  display: grid !important;
  place-items: center !important;
  line-height: 1 !important;
}
@media (max-width: 480px) {
  .qazo-add-date-count,
  .modal-body > .modal-stack .qazo-add-date-count,
  .qazo-calculator-date-range,
  .modal-body > .modal-stack .qazo-calculator-date-range {
    grid-template-columns: 1fr !important;
  }
}

/* v18 patch 1 correction: use clean native picker shells instead of visible iOS date/select controls. */
.native-picker-control {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  min-height: 54px;
  box-sizing: border-box;
  border: 1px solid var(--paper-line-2);
  border-radius: 18px;
  background: rgba(255,255,255,.48);
  color: var(--ink);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42);
}
.native-picker-control-value {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0 18px;
  text-align: center;
  font: inherit;
  font-size: max(16px, 1em);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  letter-spacing: 0;
  pointer-events: none;
}
.native-picker-control::after {
  content: '';
  position: absolute;
  right: 17px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-65%) rotate(45deg);
  opacity: .76;
  pointer-events: none;
}
.date-picker-control::after {
  display: none;
}
.native-picker-control-input,
.native-picker-control-select {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: transparent !important;
  color: transparent !important;
  opacity: 0.01 !important;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.native-picker-control-input::-webkit-date-and-time-value {
  color: transparent;
}
.native-picker-control-input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.qazo-add-date-count,
.modal-body > .modal-stack .qazo-add-date-count,
.qazo-calculator-date-range,
.modal-body > .modal-stack .qazo-calculator-date-range {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 13px !important;
  overflow: visible !important;
}
.qazo-add-date-count .modal-field,
.qazo-calculator-date-range .modal-field {
  overflow: visible !important;
  margin-bottom: 0 !important;
}
.qazo-add-date-count .native-picker-control,
.qazo-calculator-date-range .native-picker-control {
  min-height: 56px;
}
.qazo-add-date-count input[type="date"],
.qazo-add-date-count select,
.qazo-calculator-date-range input[type="date"] {
  border: 0 !important;
}
.qazo-count-picker {
  text-align: initial;
  text-align-last: initial;
}
.plan-target-row .stepper {
  height: 48px !important;
  min-height: 48px !important;
  padding: 4px !important;
}
.plan-target-row .stepper button {
  display: grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  padding: 0 !important;
  line-height: 1 !important;
  transform: translateY(0) !important;
}
.plan-target-row .stepper strong {
  display: grid !important;
  place-items: center !important;
  min-width: 38px !important;
  height: 40px !important;
  line-height: 1 !important;
}

/* Patch 2: tab-local scroll reset + polished bottom toast for city save. */
.settings-bottom-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h, 66px) + var(--nav-bottom, max(10px, env(safe-area-inset-bottom))) + 18px);
  z-index: 5200;
  max-width: min(360px, calc(100vw - 44px));
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(250, 238, 202, .96);
  color: #7a5a22;
  border: 1px solid rgba(173, 134, 61, .22);
  box-shadow: 0 16px 40px -22px rgba(27, 22, 12, .45), inset 0 1px 0 rgba(255,255,255,.62);
  font-size: 13px;
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  pointer-events: none;
  transform: translate3d(-50%, 14px, 0) scale(.98);
  opacity: 0;
  animation: namozim-bottom-toast 1000ms cubic-bezier(.2,.9,.2,1) both;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@keyframes namozim-bottom-toast {
  0% { opacity: 0; transform: translate3d(-50%, 16px, 0) scale(.98); }
  16% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  78% { opacity: 1; transform: translate3d(-50%, 0, 0) scale(1); }
  100% { opacity: 0; transform: translate3d(-50%, 12px, 0) scale(.985); }
}

@media (prefers-reduced-motion: reduce) {
  .settings-bottom-toast {
    animation: none;
    opacity: 1;
    transform: translate3d(-50%, 0, 0);
  }
}

/* Women Mode patch 3 v21: two shortcut cards behave as tabs; only one form is visible. */
.women-mode-panel-tabs {
  align-items: stretch;
}
.women-mode-primary-action.active {
  border-color: rgba(19,139,67,.40);
  background: linear-gradient(135deg, rgba(22,163,74,.18), rgba(255,255,255,.82));
  box-shadow: inset 0 0 0 1px rgba(19,139,67,.10), 0 12px 24px -22px rgba(11,58,31,.35);
}
.women-mode-primary-action.accent.active {
  border-color: rgba(176,132,69,.42);
  background: linear-gradient(135deg, rgba(176,132,69,.18), rgba(255,255,255,.84));
}
.women-mode-panel-card {
  margin-top: 2px;
  overflow: visible;
}
.women-mode-panel-card .modal-field {
  width: 100%;
}
.women-mode-panel-card .native-picker-control,
.women-mode-panel-card select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border-radius: 16px;
}
.women-mode-panel-card .women-mode-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
.women-mode-panel-card .women-mode-actions .mini-btn {
  width: 100%;
}
@media (min-width: 430px) {
  .women-mode-panel-card .women-mode-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Patch 4: smoother modal motion and touch feedback, without changing flows. */
.modal-backdrop {
  opacity: 0;
  animation: namozim-modal-backdrop-in 190ms cubic-bezier(.2,.9,.2,1) both;
}
.modal-backdrop.is-closing {
  animation: namozim-modal-backdrop-out 170ms cubic-bezier(.32,0,.67,0) both;
  pointer-events: none;
}
.modal-backdrop .modal-card {
  opacity: 0;
  transform: translate3d(0, 18px, 0) scale(.985);
  transform-origin: bottom center;
  animation: namozim-modal-sheet-in 230ms cubic-bezier(.16,1,.3,1) 18ms both;
}
.modal-backdrop-center .modal-card,
.modal-backdrop .modal-card-center {
  transform: translate3d(0, 6px, 0) scale(.97);
  transform-origin: center center;
  animation-name: namozim-modal-center-in;
}
.modal-backdrop.is-closing .modal-card {
  animation: namozim-modal-sheet-out 170ms cubic-bezier(.32,0,.67,0) both;
}
.modal-backdrop.is-closing.modal-backdrop-center .modal-card,
.modal-backdrop.is-closing .modal-card-center {
  animation-name: namozim-modal-center-out;
}
@keyframes namozim-modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes namozim-modal-backdrop-out {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes namozim-modal-sheet-in {
  from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.982); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes namozim-modal-sheet-out {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, 16px, 0) scale(.985); }
}
@keyframes namozim-modal-center-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0) scale(.97); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes namozim-modal-center-out {
  from { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  to { opacity: 0; transform: translate3d(0, 6px, 0) scale(.975); }
}
.mini-btn,
.modal-close,
.modal-head button,
.set-row,
.toggle,
.city-pick-list-v2 button,
.chips-v2 button,
.stepper button,
.native-picker-control,
.women-mode-action-card,
.help-card-grid-v2 .help-card,
.card-check {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 150ms cubic-bezier(.2,.9,.2,1),
    box-shadow 150ms cubic-bezier(.2,.9,.2,1),
    border-color 150ms ease,
    background-color 150ms ease,
    opacity 150ms ease;
}
.mini-btn:not(:disabled):active,
.modal-close:active,
.modal-head button:active,
.set-row:active,
.toggle:active,
.city-pick-list-v2 button:active,
.chips-v2 button:active,
.stepper button:not(:disabled):active,
.native-picker-control:active,
.women-mode-action-card:active,
.help-card-grid-v2 .help-card:active,
.card-check:active {
  transform: scale(.985);
}
.mini-btn.primary:not(:disabled):active,
.stepper button:not(:disabled):active {
  transform: scale(.96);
}
.modal-field input:focus-visible,
.modal-field select:focus-visible,
.modal-field textarea:focus-visible,
.native-picker-control:focus-within {
  border-color: rgba(21,128,61,.46);
  box-shadow: 0 0 0 4px rgba(21,128,61,.10);
}
@media (prefers-reduced-motion: reduce) {
  .modal-backdrop,
  .modal-backdrop.is-closing,
  .modal-backdrop .modal-card,
  .modal-backdrop.is-closing .modal-card,
  .settings-bottom-toast {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .mini-btn,
  .modal-close,
  .modal-head button,
  .set-row,
  .toggle,
  .city-pick-list-v2 button,
  .chips-v2 button,
  .stepper button,
  .native-picker-control,
  .women-mode-action-card,
  .help-card-grid-v2 .help-card,
  .card-check {
    transition: none !important;
  }
}

/* ============================================================
   AYOLLAR REJIMI — Kalendar redizayni (full-screen, integratsiya)
   .wm-screen ostida scope qilingan.
   ============================================================ */
.wm-screen-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: var(--paper);
  animation: wmOverlayIn .28s cubic-bezier(.4,0,.2,1);
}
@keyframes wmOverlayIn { from { transform: translateY(10px); } to { transform: none; } }
.wm-screen-overlay.is-closing { animation: wmOverlayOut .2s ease forwards; }
@keyframes wmOverlayOut { from { opacity: 1; } to { opacity: 0; } }

/* ============================================================
   Ayollar rejimi — redizayn. Namozim vizual tokenlari asosida.
   Barcha qoidalar .wm-screen ichida scope qilingan.
   ============================================================ */

.wm-screen {
  /* Paper / surfaces */
  --paper:        #F7F1E8;
  --paper-2:      #F9F6EF;
  --paper-3:      #FFFFFF;
  --paper-line:   #E5DED2;
  --paper-line-2: #D6CCBC;

  /* Ink */
  --ink:        #1E293B;
  --ink-soft:   #475569;
  --ink-mute:   #8491A3;
  --ink-faint:  #B5AC97;

  /* Sage / Emerald */
  --sage:       #15803D;
  --sage-mid:   #16A34A;
  --sage-soft:  #BBF7D0;
  --sage-tint:  #DCFCE7;
  --sage-deep:  #14532D;

  /* Brass — gold highlights */
  --brass:      #8B6F3F;
  --brass-mid:  #B89466;
  --brass-soft: #E6CFA1;
  --brass-tint: #F3E7CA;
  --brass-deep: #6E5832;

  /* Rose — ayollar rejimi uchun yumshoq, mehrli aksent (qizil emas) */
  --rose:       #B16374;
  --rose-mid:   #C98494;
  --rose-soft:  #EBC9D1;
  --rose-tint:  #F6E6EA;
  --rose-deep:  #7E4250;

  --crimson:    #DC2626;
  --crimson-tint:#FEE2E2;

  --night:    #0B3A1F;
  --night-2:  #134E2A;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 32px;

  --sh-1: 0 1px 2px rgba(60, 40, 10, .05);
  --sh-2: 0 6px 18px -8px rgba(60, 40, 10, .12);
  --sh-3: 0 20px 40px -20px rgba(60, 40, 10, .22);

  --f-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --f-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --f-serif: "Cormorant Garamond", Georgia, serif;

  position: relative;
  width: 100%;
  height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.wm-screen *, .wm-screen *::before, .wm-screen *::after { box-sizing: border-box; }
.wm-screen button { font-family: inherit; cursor: pointer; }

/* ===== In-app header (Namozim uslubi) ===== */
.wm-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: max(56px, calc(var(--namozim-app-top-safe, 0px) + 16px)) 18px 14px;
  position: relative;
  z-index: 4;
  flex-shrink: 0;
}
.wm-head {
  background: var(--paper);
  border-bottom: 1px solid var(--paper-line);
}
.wm-head .wm-back {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 1px solid var(--paper-line-2);
  background: var(--paper);
  display: grid; place-items: center;
  box-shadow: none;
  flex-shrink: 0;
  transition: transform .14s ease, background .15s ease;
}
.wm-head .wm-back:active { transform: scale(.92); background: var(--paper-2); }
.wm-head .wm-back svg { width: 19px; height: 19px; stroke: var(--ink-soft); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wm-head .wm-htitle { font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -.02em; }
.wm-head .wm-hsub { font-size: 12px; color: var(--ink-mute); font-weight: 600; margin-top: 1px; }

/* scroll body */
.wm-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 18px 46px;
  -webkit-overflow-scrolling: touch;
}
.wm-body::-webkit-scrollbar { width: 0; }

/* ===== Generic surfaces ===== */
.wm-card {
  background: var(--paper-3);
  border-radius: var(--r-lg);
  padding: 18px;
  box-shadow: var(--sh-2);
}
.wm-card.flat { box-shadow: var(--sh-1); border: 1px solid var(--paper-line); }

/* ===== Crescent / moon mark ===== */
.wm-mark {
  width: 66px; height: 66px; border-radius: 999px;
  display: grid; place-items: center;
  background: radial-gradient(120% 120% at 30% 25%, var(--rose-tint), var(--rose-soft));
  color: var(--rose-deep);
  box-shadow: inset 0 0 0 1px rgba(177,99,116,.18), var(--sh-2);
}
.wm-mark svg { width: 32px; height: 32px; }

/* ===== Buttons ===== */
.wm-btn {
  border: 0; border-radius: 16px;
  min-height: 54px; padding: 0 20px;
  font-family: var(--f-display); font-weight: 750; font-size: 15.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  background: var(--paper-3); color: var(--ink);
  border: 1px solid var(--paper-line-2);
}
.wm-btn:active { transform: scale(.985); }
.wm-btn.primary { background: var(--rose); color: #fff; border-color: var(--rose); box-shadow: 0 12px 26px -14px rgba(126,66,80,.6); }
.wm-btn.primary:active { background: var(--rose-deep); }
.wm-btn.sage { background: var(--sage); color: #fff; border-color: var(--sage); box-shadow: 0 12px 26px -14px rgba(20,83,45,.55); }
.wm-btn.ghost { background: transparent; border: 0; color: var(--ink-mute); min-height: 46px; font-weight: 650; }
.wm-btn.outline { background: transparent; border: 1.5px solid var(--rose-soft); color: var(--rose-deep); }
.wm-btn:disabled { opacity: .5; }
.wm-btn.sm { min-height: 44px; font-size: 14px; border-radius: 13px; }

/* ===== Pills / segmented ===== */
.wm-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 4px; padding: 4px;
  background: var(--paper-2);
  border: 1px solid var(--paper-line);
  border-radius: 16px;
}
.wm-seg button {
  border: 0; background: transparent; border-radius: 12px;
  min-height: 40px; font-weight: 700; font-size: 13.5px; color: var(--ink-mute);
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.wm-seg button.on { background: var(--paper-3); color: var(--ink); box-shadow: var(--sh-1); }

/* ===== Toggle ===== */
.wm-toggle { width: 48px; height: 28px; border-radius: 999px; background: var(--paper-line-2); position: relative; flex-shrink: 0; transition: background .18s ease; border: 0; }
.wm-toggle .k { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .18s cubic-bezier(.4,0,.2,1); }
.wm-toggle.on { background: var(--sage); }
.wm-toggle.on .k { transform: translateX(20px); }

/* ===== Row ===== */
.wm-row { display: flex; align-items: center; gap: 13px; }
.wm-row .wm-ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex-shrink: 0; }
.wm-row .wm-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wm-ico.rose { background: var(--rose-tint); color: var(--rose-deep); }
.wm-ico.sage { background: var(--sage-tint); color: var(--sage); }
.wm-ico.brass { background: var(--brass-tint); color: var(--brass); }
/* .wm-rt is used both inside .wm-row and standalone (e.g. the supportive-push
   card uses .wm-card.flat > .wm-rt). The title/description rules must NOT be
   scoped to .wm-row, otherwise <b> and <span> stay inline and the title runs
   straight into the description ("...eslatmalarUzrli kunlarda..."). */
.wm-rt { flex: 1; min-width: 0; }
.wm-rt b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; line-height: 1.3; }
.wm-rt span { display: block; font-size: 12.5px; color: var(--ink-mute); font-weight: 550; line-height: 1.4; margin-top: 4px; }

/* ===== Note / disclaimer ===== */
.wm-note { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.wm-fine { font-size: 11.5px; line-height: 1.45; color: var(--ink-mute); }

.wm-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }

/* ===== Date field ===== */
.wm-date {
  width: 100%; min-height: 48px; border-radius: 14px;
  border: 1px solid var(--paper-line-2); background: var(--paper-3);
  padding: 0 14px; font-family: var(--f-body); font-weight: 650; font-size: 14px; color: var(--ink);
}
.wm-date:focus { outline: none; border-color: var(--rose-mid); }

/* entrance helpers — faqat transform (opacity yo'q), shunda offscreen'da ham ko'rinadi */
.wm-fade { animation: wmFade .32s cubic-bezier(.4,0,.2,1); }
@keyframes wmFade { from { transform: translateY(8px); } to { transform: none; } }
.wm-slide { animation: wmSlide .34s cubic-bezier(.4,0,.2,1); }
@keyframes wmSlide { from { transform: translateX(20px); } to { transform: none; } }

/* progress dots */
.wm-dots { display: flex; gap: 6px; justify-content: center; }
.wm-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--paper-line-2); transition: background .2s ease, width .2s ease; }
.wm-dots i.on { background: var(--rose); width: 20px; }

/* divider */
.wm-div { height: 1px; background: var(--paper-line); margin: 4px 0; }

/* ===== Bugun ekrani preview ===== */
.wm-today-preview { display: flex; flex-direction: column; gap: 14px; }
.wm-tp-head { display: flex; align-items: center; gap: 10px; padding: 2px; }
.wm-tp-brand { display: flex; align-items: center; gap: 10px; flex: 1; }
.wm-tp-logo { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: radial-gradient(120% 120% at 30% 25%, var(--night-2), var(--night)); color: var(--brass-soft); }
.wm-tp-logo svg { width: 22px; height: 22px; }
.wm-tp-title { font-family: var(--f-display); font-weight: 800; font-size: 16px; }
.wm-tp-sub { font-size: 11px; color: var(--ink-mute); font-weight: 600; }
.wm-tp-qibla { width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--paper-line); background: var(--paper-3); display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--sage); }

.wm-today-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 14px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--rose-tint), #fff);
  border: 1px solid var(--rose-soft);
  box-shadow: var(--sh-2);
}
.wm-tb-ico { width: 38px; height: 38px; border-radius: 12px; background: var(--rose-soft); color: var(--rose-deep); display: grid; place-items: center; flex-shrink: 0; }
.wm-tb-ico svg { width: 20px; height: 20px; }
.wm-tb-txt { flex: 1; min-width: 0; }
.wm-tb-txt b { display: block; font-family: var(--f-display); font-weight: 800; font-size: 14px; color: var(--rose-deep); }
.wm-tb-txt span { display: block; font-size: 12px; color: var(--ink-soft); font-weight: 550; line-height: 1.35; margin-top: 2px; }
.wm-tb-end { border: 0; background: var(--rose); color: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 750; font-size: 12.5px; flex-shrink: 0; }

.wm-tp-hero {
  margin-top: 2px;
  border-radius: var(--r-lg);
  background: radial-gradient(130% 120% at 50% 0%, var(--night-2), var(--night));
  color: #fff;
  padding: 30px 20px 34px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.wm-tp-hero-moon { width: 58px; height: 58px; border-radius: 999px; background: rgba(255,255,255,.08); display: grid; place-items: center; color: var(--brass-soft); }
.wm-tp-hero-moon svg { width: 30px; height: 30px; }
.wm-tp-hero-t { font-family: var(--f-display); font-weight: 750; font-size: 16px; margin: 8px 0 4px; }
.wm-tp-hero-s { font-size: 12.5px; color: rgba(255,255,255,.66); font-weight: 500; margin: 0; }

/* ===== Hero (intro) ===== */
.wm-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 8px 6px 4px;
}
.wm-hero h2 { font-family: var(--f-display); font-weight: 800; font-size: 22px; line-height: 1.18; letter-spacing: -.02em; margin: 4px 0 4px; }
.wm-hero p { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; max-width: 30ch; }

/* explanatory / religious note block */
.wm-explain {
  display: flex; flex-direction: column; gap: 9px; align-items: center; text-align: center;
  padding: 16px 16px; border-radius: var(--r-md);
  background: var(--sage-tint); border: 1px solid var(--sage-soft);
}
.wm-explain .wm-ei { color: var(--sage); flex-shrink: 0; }
.wm-explain .wm-ei svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wm-explain p { margin: 0 auto; font-size: 12.5px; line-height: 1.55; color: var(--sage-deep); font-weight: 550; max-width: 34ch; text-align: center; }

.wm-privacy { display: flex; gap: 9px; align-items: center; justify-content: center; color: var(--ink-mute); font-size: 11.5px; font-weight: 600; }
.wm-privacy svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ===== Type cards ===== */
.wm-types { display: grid; gap: 10px; }
.wm-type {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px; border-radius: var(--r-md);
  background: var(--paper-3); border: 1.5px solid var(--paper-line);
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; width: 100%;
}
.wm-type:active { transform: scale(.99); }
.wm-type.on { border-color: var(--rose-mid); background: var(--rose-tint); box-shadow: 0 10px 24px -16px rgba(126,66,80,.5); }
.wm-type .wm-tico { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--rose-soft); color: var(--rose-deep); flex-shrink: 0; }
.wm-type.on .wm-tico { background: var(--rose); color: #fff; }
.wm-type .wm-tico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wm-type .wm-tt { flex: 1; }
.wm-type .wm-tt b { display: block; font-family: var(--f-display); font-weight: 750; font-size: 16px; }
.wm-type .wm-tt span { display: block; font-size: 12.5px; color: var(--ink-mute); font-weight: 550; margin-top: 2px; }
.wm-type .wm-tcheck { width: 24px; height: 24px; border-radius: 999px; border: 2px solid var(--paper-line-2); display: grid; place-items: center; flex-shrink: 0; color: #fff; }
.wm-type.on .wm-tcheck { background: var(--rose); border-color: var(--rose); }
.wm-type .wm-tcheck svg { width: 14px; height: 14px; opacity: 0; }
.wm-type.on .wm-tcheck svg { opacity: 1; }

/* ===== Active card ===== */
.wm-active {
  border-radius: var(--r-xl);
  background: radial-gradient(130% 120% at 50% -10%, var(--night-2), var(--night));
  color: #fff; padding: 26px 22px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: var(--sh-3);
}
.wm-active .wm-a-moon { width: 60px; height: 60px; border-radius: 999px; background: rgba(255,255,255,.08); display: grid; place-items: center; color: var(--brass-soft); margin-bottom: 4px; }
.wm-active .wm-a-moon svg { width: 32px; height: 32px; }
.wm-active .wm-a-kicker { font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-soft); margin-bottom: 4px; }
.wm-active .wm-a-day { font-family: var(--f-serif); font-weight: 600; font-size: 38px; line-height: 1; margin-bottom: 4px; }
.wm-active .wm-a-meta { font-size: 13px; color: rgba(255,255,255,.7); font-weight: 500; }
.wm-active .wm-a-rea { font-size: 12.5px; color: rgba(255,255,255,.6); line-height: 1.5; margin-top: 8px; max-width: 28ch; }

/* ===== Reminder block ===== */
.wm-remind { display: grid; gap: 12px; }
.wm-freq-time { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wm-freq-time .wm-label { margin: 0; }

/* expandable section */
.wm-expand-head { display: flex; align-items: center; gap: 10px; width: 100%; background: transparent; border: 0; padding: 4px 2px; }
.wm-expand-head .wm-eh-ico { color: var(--rose-deep); }
.wm-expand-head .wm-eh-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.wm-expand-head b { flex: 1; text-align: left; font-family: var(--f-display); font-weight: 700; font-size: 14px; }
.wm-expand-head .wm-chev { color: var(--ink-mute); transition: transform .2s ease; }
.wm-expand-head.open .wm-chev { transform: rotate(90deg); }
.wm-expand-head .wm-chev svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* field group */
.wm-field { display: grid; gap: 6px; }
.wm-field > .wm-label { margin: 0; }
.wm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ===== Variant B — wizard step ===== */
.wm-step { flex: 1; display: flex; flex-direction: column; padding: 4px 2px 0; }
.wm-step-illus {
  align-self: center; width: 108px; height: 108px; border-radius: 999px;
  display: grid; place-items: center; margin: 8px 0 18px;
  background: radial-gradient(120% 120% at 35% 25%, var(--rose-tint), var(--rose-soft));
  color: var(--rose-deep);
  box-shadow: inset 0 0 0 1px rgba(177,99,116,.2), 0 24px 48px -28px rgba(126,66,80,.5);
  position: relative;
}
.wm-step-illus::after {
  content: ''; position: absolute; inset: -14px; border-radius: 999px;
  border: 1.5px solid var(--rose-soft); opacity: .5;
}
.wm-step-illus svg { width: 52px; height: 52px; }
.wm-step h2 { font-family: var(--f-serif); font-weight: 600; font-size: 30px; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 10px; text-align: center; }
.wm-step .wm-lead { font-size: 14px; line-height: 1.55; color: var(--ink-soft); text-align: center; margin: 0 auto; max-width: 30ch; }
.wm-step-spacer { flex: 1; min-height: 14px; }
.wm-step-cta { display: grid; gap: 9px; padding-top: 14px; }
.wm-step-foot { text-align: center; padding-top: 12px; }

/* big option (B) */
.wm-bigopt {
  width: 100%; display: flex; align-items: center; gap: 15px; text-align: left;
  padding: 18px; border-radius: var(--r-lg);
  background: var(--paper-3); border: 1.5px solid var(--paper-line);
  transition: background .15s ease, border-color .15s ease, transform .15s ease; box-shadow: var(--sh-1);
}
.wm-bigopt:active { transform: scale(.99); }
.wm-bigopt.on { border-color: var(--rose-mid); background: var(--rose-tint); }
.wm-bigopt .wm-bo-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--rose-soft); color: var(--rose-deep); flex-shrink: 0; }
.wm-bigopt.on .wm-bo-ico { background: var(--rose); color: #fff; }
.wm-bigopt .wm-bo-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wm-bigopt .wm-bo-t b { display: block; font-family: var(--f-display); font-weight: 750; font-size: 17px; }
.wm-bigopt .wm-bo-t span { display: block; font-size: 13px; color: var(--ink-mute); font-weight: 550; margin-top: 3px; }

.wm-head-dots { margin-left: auto; }

/* ===== Variant C — calendar ===== */
.wm-cal-card { background: var(--paper-3); border-radius: var(--r-lg); padding: 16px 14px 18px; box-shadow: var(--sh-2); }
.wm-cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding: 0 4px; }
.wm-cal-nav b { font-family: var(--f-display); font-weight: 750; font-size: 15.5px; }
.wm-cal-nav button { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--paper-line); background: var(--paper-2); display: grid; place-items: center; color: var(--ink-soft); }
.wm-cal-nav button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wm-cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.wm-cal-wd span { text-align: center; font-size: 10.5px; font-weight: 800; color: var(--ink-faint); letter-spacing: .04em; padding: 4px 0; }
.wm-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.wm-cal-cell {
  aspect-ratio: 1 / 1; border: 0; background: transparent;
  display: grid; place-items: center; position: relative;
  font-family: var(--f-body); font-weight: 650; font-size: 13.5px; color: var(--ink);
  border-radius: 11px;
}
.wm-cal-cell.mute { color: var(--ink-faint); opacity: .5; }
.wm-cal-cell.future { color: var(--ink-faint); opacity: .4; pointer-events: none; }
.wm-cal-cell.today::after { content: ''; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 999px; background: var(--sage); }
.wm-cal-cell.inrange { background: var(--rose-tint); border-radius: 0; }
.wm-cal-cell.inrange.today::after { background: var(--rose); }
.wm-cal-cell.edge { background: var(--rose); color: #fff; border-radius: 11px; box-shadow: 0 6px 14px -8px rgba(126,66,80,.7); z-index: 1; }
.wm-cal-cell.edge.today::after { background: #fff; }
.wm-cal-cell.rstart { border-top-left-radius: 11px; border-bottom-left-radius: 11px; }
.wm-cal-cell.rend { border-top-right-radius: 11px; border-bottom-right-radius: 11px; }
.wm-cal-hint { text-align: center; font-size: 12px; color: var(--ink-mute); font-weight: 600; margin-top: 12px; }

.wm-sum { display: grid; gap: 6px; padding: 16px; border-radius: var(--r-md); background: var(--rose-tint); border: 1px solid var(--rose-soft); }
.wm-sum b { font-family: var(--f-display); font-weight: 800; font-size: 15px; color: var(--rose-deep); }
.wm-sum span { font-size: 12.5px; color: var(--ink-soft); font-weight: 550; }

/* tanlovdagi (saqlanmagan) qirralar — halqa bilan ajratiladi */
.wm-cal-cell.sel { box-shadow: inset 0 0 0 2px var(--rose-mid); color: var(--rose-deep); background: var(--rose-tint); border-radius: 11px; }
.wm-cal-cell.sel.edge { background: var(--rose); color: #fff; box-shadow: 0 6px 14px -8px rgba(126,66,80,.7); }
/* davom etayotgan davr bugungi qirrasi */
.wm-cal-cell.edge.ongoing { background: var(--sage); box-shadow: 0 6px 14px -8px rgba(20,83,45,.7); }
.wm-cal-cell.edge.ongoing.today::after { background: #fff; }

/* saqlangan davrlar ro'yxati */
.wm-saved { display: grid; gap: 8px; }
.wm-saved-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: var(--r-md);
  background: var(--paper-3); border: 1px solid var(--paper-line);
  contain: layout style;
}
.wm-saved-item .wm-si-dot { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; background: var(--rose-tint); color: var(--rose-deep); }
.wm-saved-item.ongoing .wm-si-dot { background: var(--sage-tint); color: var(--sage); }
.wm-saved-item .wm-si-dot svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wm-saved-item .wm-si-t { flex: 1; min-width: 0; }
.wm-saved-item .wm-si-t b { display: block; font-family: var(--f-display); font-weight: 750; font-size: 13.5px; }
.wm-saved-item .wm-si-t span { display: block; font-size: 11.5px; color: var(--ink-mute); font-weight: 600; margin-top: 1px; }
.wm-saved-item .wm-si-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--sage); background: var(--sage-tint); padding: 4px 9px; border-radius: 999px; flex-shrink: 0; }
.wm-saved-item .wm-si-x { width: 30px; height: 30px; border-radius: 999px; border: 0; background: var(--paper-2); color: var(--ink-mute); display: grid; place-items: center; flex-shrink: 0; }
.wm-saved-item .wm-si-x svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wm-saved-empty { text-align: center; font-size: 12px; color: var(--ink-mute); font-weight: 600; padding: 14px; }

/* ============================================================
   Patch — Ayollar rejimi UX + butun ilova bo'ylab micro-motion
   (DS: ease-out, 150–200ms, springs/looplar yo'q)
   ============================================================ */

/* Ruhlantiruvchi eslatmalar — sarlavha qatori va tavsif alohida ajratilgan */
.wm-supportive { display: flex; flex-direction: column; gap: 0; }
.wm-supportive-row { display: flex; align-items: center; gap: 13px; }
.wm-supportive-title { flex: 1; min-width: 0; font-family: var(--f-display); font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; color: var(--ink); }
.wm-supportive-desc {
  display: block; margin-top: 11px; padding-top: 11px;
  border-top: 1px solid var(--paper-line);
  font-size: 12.5px; line-height: 1.5; color: var(--ink-mute); font-weight: 550;
}

/* Header amallari — bosish javobi */
.ai-pill { transition: transform .15s cubic-bezier(.2,.9,.2,1), box-shadow .15s ease; }
.ai-pill:active { transform: scale(.94); }
.qibla { transition: transform .15s cubic-bezier(.2,.9,.2,1); }
.qibla:active { transform: scale(.93); }

/* Kalendar kunlari — tap va tanlash micro-animatsiyasi */
.wm-cal-cell { transition: background .16s ease, color .16s ease, box-shadow .18s cubic-bezier(.2,.9,.2,1), transform .12s ease; }
.wm-cal-cell:not(.mute):not(.future):active { transform: scale(.9); }
.wm-cal-cell.edge, .wm-cal-cell.sel { animation: wmCellPop .2s cubic-bezier(.2,.9,.2,1); }
@keyframes wmCellPop { from { transform: scale(.78); } to { transform: scale(1); } }

/* Togglelar — bosishda yengil javob */
.wm-toggle { transition: background .18s ease, transform .14s ease; }
.wm-toggle:active { transform: scale(.95); }

/* Saqlangan davrlar — paydo bo'lish + bosish */
.wm-saved-item { transition: transform .14s ease, border-color .16s ease; animation: wmFade .3s cubic-bezier(.4,0,.2,1); }
.wm-saved-item:active { transform: scale(.99); }
.wm-saved-item .wm-si-x { transition: transform .14s ease, background .15s ease, color .15s ease; }
.wm-saved-item .wm-si-x:active { transform: scale(.88); background: var(--rose-tint); color: var(--rose-deep); }
.wm-saved-item .wm-si-badge { transition: transform .14s ease; }
.wm-saved-item .wm-si-badge:active { transform: scale(.94); }

/* Segment tugmalari — tanlovga javob */
.wm-seg button:active { transform: scale(.96); }

/* Intro hero belgisi — yumshoq kirish */
.wm-hero .wm-mark { animation: wmMarkIn .42s cubic-bezier(.2,.82,.22,1) both; }
@keyframes wmMarkIn { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .wm-cal-cell.edge, .wm-cal-cell.sel, .wm-saved-item, .wm-hero .wm-mark { animation: none !important; }
  .ai-pill, .qibla, .wm-cal-cell, .wm-toggle, .wm-saved-item,
  .wm-saved-item .wm-si-x, .wm-saved-item .wm-si-badge, .wm-seg button { transition: none !important; }
}

/* ============================================================
   NIGHT MODE TOGGLE BUTTON (header, kompas oldida)
   ============================================================ */
.night-toggle {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 999px;
  border: 1px solid var(--paper-line-2);
  background: var(--paper-3);
  color: var(--ink-soft);
  cursor: pointer;
  transition: transform .15s cubic-bezier(.2,.9,.2,1), background .18s ease, color .18s ease, box-shadow .2s ease, border-color .18s ease;
}
.night-toggle svg { width: 19px; height: 19px; }
.night-toggle:active { transform: scale(.9); }
.night-toggle.on {
  color: #04140D;
  background: var(--sage);
  border-color: var(--sage);
}

/* ── Night mode transition ──
   PERF: never transition the universal selector (`*`, `*::before/after`).
   On a mobile WebView that forces the engine to build a transition + composite
   layer for EVERY node at once → 200-500ms freeze on each toggle.
   The theme itself is driven by CSS custom properties on html.namozim-night,
   so the recolour is instant for free. We only fade the few large background
   surfaces, which costs almost nothing and keeps the switch smooth. */
html.namozim-night-transitioning,
html.namozim-night-transitioning body,
html.namozim-night-transitioning #root,
html.namozim-night-transitioning .app,
html.namozim-night-transitioning .app-header,
html.namozim-night-transitioning .bottom-nav {
  /* Only fade the solid base color. We deliberately do NOT transition the
     `background` shorthand: in night mode .app gains two radial-gradient glow
     layers (top-centre + bottom-right) that .app does not have in light mode.
     Animating background between "1 solid layer" and "3 layers" makes the two
     glows visibly grow/sweep in — they appear to split apart as they pass under
     the header logo. Letting background-image swap instantly removes that. */
  transition:
    color 180ms ease,
    background-color 180ms ease !important;
}

/* ============================================================
   NIGHT MODE — neon dark theme.
   <html class="namozim-night"> orqali yoqiladi. Faqat ranglar va
   neon urg'ular o'zgaradi; tuzilma va komponent ko'rinishi saqlanadi.
   ============================================================ */
html.namozim-night {
  --paper:        #070E0B;
  --paper-1:      #0A130E;
  --paper-2:      #0D1812;
  --paper-3:      #14241C;
  --paper-line:   #1C2E25;
  --paper-line-2: #294035;

  --ink:        #EAFBF1;
  --ink-soft:   #A6C6B6;
  --ink-mute:   #74917F;
  --ink-faint:  #4C6358;

  --sage:       #2DE38C;
  --sage-mid:   #1FD07E;
  --sage-soft:  rgba(45,227,140,.36);
  --sage-tint:  rgba(45,227,140,.13);
  --sage-deep:  #C6FBDF;

  --brass:      #E7C46A;
  --brass-mid:  #D4AE55;
  --brass-soft: rgba(231,196,106,.36);
  --brass-tint: rgba(231,196,106,.12);
  --brass-deep: #F4E3B2;

  --crimson:     #FF5D6E;
  --crimson-tint: rgba(255,93,110,.15);

  --rose:       #E97AA0;
  --rose-mid:   #D86B92;
  --rose-soft:  rgba(233,122,160,.36);
  --rose-tint:  rgba(233,122,160,.13);
  --rose-deep:  #FBD4E1;

  --night:    #06140D;
  --night-2:  #0B2417;
}
html.namozim-night,
html.namozim-night body,
html.namozim-night #root { background: #040907 !important; }

/* App surface — neon glow ambiance */
html.namozim-night .app {
  background:
    radial-gradient(125% 80% at 50% -10%, rgba(45,227,140,.12), transparent 56%),
    radial-gradient(95% 60% at 105% 112%, rgba(45,227,140,.07), transparent 60%),
    var(--paper);
}
html.namozim-night .app-header { background: transparent; }

/* Header night-toggle reads neon */
html.namozim-night .night-toggle.on {
  box-shadow: 0 0 18px -2px rgba(45,227,140,.6);
}
html.namozim-night .ai-pill {
  border: 1px solid rgba(45,227,140,.4);
  box-shadow: 0 0 16px -6px rgba(45,227,140,.5);
}

/* Today hero — dark glass with neon edge instead of bright green fill */
html.namozim-night .today-hero {
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(45,227,140,.16), transparent 60%),
    linear-gradient(155deg, #0E2018 0%, #06110C 100%) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(45,227,140,.28);
  box-shadow: 0 0 46px -14px rgba(45,227,140,.45), inset 0 0 0 1px rgba(45,227,140,.06);
}
html.namozim-night .th-name,
html.namozim-night .th-count .t-num,
html.namozim-night .th-count .t-sep {
  color: var(--sage);
  text-shadow: 0 0 18px rgba(45,227,140,.55);
}
html.namozim-night .th-progress-fill {
  box-shadow: 0 0 12px rgba(45,227,140,.7);
}

/* Active prayer — neon ring */
html.namozim-night .prayer-row.current {
  border-color: var(--sage);
  box-shadow: 0 0 26px -10px rgba(45,227,140,.6);
}
html.namozim-night .prayer-row.current::before {
  box-shadow: 0 0 0 3px rgba(45,227,140,.18);
}

/* Bottom nav active — neon */
html.namozim-night .nav-item.active {
  color: var(--sage);
  text-shadow: 0 0 14px rgba(45,227,140,.55);
}
html.namozim-night .nav-item.active svg {
  filter: drop-shadow(0 0 7px rgba(45,227,140,.6));
}

/* Primary actions — neon glow */
html.namozim-night .mini-btn.primary,
html.namozim-night .wm-btn.sage {
  box-shadow: 0 0 22px -6px rgba(45,227,140,.6);
}
html.namozim-night .mini-btn.primary { color: #04140D; }
html.namozim-night .wm-btn.primary {
  box-shadow: 0 0 22px -6px rgba(233,122,160,.6);
}
html.namozim-night .toggle.on,
html.namozim-night .wm-toggle.on {
  box-shadow: 0 0 16px -3px rgba(45,227,140,.6);
}

/* Brand mark subtle glow */
html.namozim-night .brand-mark {
  box-shadow: 0 0 22px -6px rgba(45,227,140,.5);
}

/* Streak / AI / metric surfaces follow tokens; add neon to streak hero */
html.namozim-night .streak-hero {
  box-shadow: 0 0 40px -16px rgba(45,227,140,.4);
  border: 1px solid rgba(45,227,140,.18);
}
html.namozim-night .streak-num { color: var(--sage); text-shadow: 0 0 16px rgba(45,227,140,.5); }

/* Modals + women-mode screen inherit night tokens */
html.namozim-night .modal-card,
html.namozim-night .ai-chat-card,
html.namozim-night .qibla-modal-card {
  box-shadow: 0 24px 70px -28px rgba(0,0,0,.8), 0 0 0 1px rgba(45,227,140,.08);
}
html.namozim-night .modal-backdrop,
html.namozim-night .ai-chat-backdrop,
html.namozim-night .qibla-modal-backdrop { background: rgba(2,6,4,.62); }

html.namozim-night .wm-screen {
  --paper:        #070E0B;
  --paper-2:      #0D1812;
  --paper-3:      #14241C;
  --paper-line:   #1C2E25;
  --paper-line-2: #294035;
  --ink:        #EAFBF1;
  --ink-soft:   #A6C6B6;
  --ink-mute:   #74917F;
  --ink-faint:  #4C6358;
  --sage:       #2DE38C;
  --sage-mid:   #1FD07E;
  --sage-soft:  rgba(45,227,140,.36);
  --sage-tint:  rgba(45,227,140,.13);
  --sage-deep:  #C6FBDF;
  --brass:      #E7C46A;
  --brass-tint: rgba(231,196,106,.12);
  --rose:       #E97AA0;
  --rose-mid:   #D86B92;
  --rose-soft:  rgba(233,122,160,.36);
  --rose-tint:  rgba(233,122,160,.13);
  --rose-deep:  #FBD4E1;
  --night:    #06140D;
  --night-2:  #0B2417;
}
html.namozim-night .wm-cal-cell.edge { box-shadow: 0 0 16px -4px rgba(233,122,160,.7); }

/* ----- Night: frosted-white fills -> dark, so text never goes invisible ----- */
html.namozim-night .bottom-nav {
  background: rgba(9, 17, 13, .86) !important;
  border-color: rgba(45, 227, 140, .16) !important;
  box-shadow: 0 -2px 30px -18px rgba(45, 227, 140, .4), 0 14px 34px -22px rgba(0, 0, 0, .6) !important;
}
html.namozim-night .modal-field input,
html.namozim-night .modal-field select,
html.namozim-night .modal-field textarea,
html.namozim-night .auth-form input,
html.namozim-night .ai-chat-input textarea {
  background: rgba(255, 255, 255, .05) !important;
  color: var(--ink) !important;
  border-color: var(--paper-line-2) !important;
}
html.namozim-night .ai-chat-input { background: rgba(9, 17, 13, .8) !important; }
html.namozim-night .modal-field input::placeholder,
html.namozim-night .modal-field textarea::placeholder,
html.namozim-night .ai-chat-input textarea::placeholder { color: var(--ink-faint); }
html.namozim-night .stepper,
html.namozim-night .stepper button,
html.namozim-night .city-pick-list-v2 button,
html.namozim-night .plan-target-row,
html.namozim-night .plan-mode-seg,
html.namozim-night .plan-mode-seg button,
html.namozim-night .cdd-segmented,
html.namozim-night .cdd-segmented button,
html.namozim-night .women-mode-action-card,
html.namozim-night .women-mode-primary-action,
html.namozim-night .women-mode-start-card input,
html.namozim-night .women-mode-chip,
html.namozim-night .session-item,
html.namozim-night .preview-box,
html.namozim-night .help-card-grid-v2 .help-card,
html.namozim-night .native-picker-control {
  background: rgba(255, 255, 255, .06) !important;
  color: var(--ink);
}
/* Any remaining frosted-white control surfaces inside night modals */
html.namozim-night .modal-card [style*="rgba(255"],
html.namozim-night .sheet-note { color: var(--ink); }
html.namozim-night .wm-cal-cell.edge.ongoing { box-shadow: 0 0 16px -4px rgba(45,227,140,.7); }

/* ============================================================
   PATCH v92 — UX polish + night-mode fixes
   • AI pill text visibility
   • bottom nav active = neon ring (matches reference)
   • status menu / qazo+ado rows readable on dark
   • current prayer neon gradient
   • plan "bugungi maqsad" text visibility
   • women-mode header clears Telegram chrome
   • swipe / paging transition
   ============================================================ */

/* ---- AI pill — was invisible in night (color was 12%-opacity brass) ---- */
html.namozim-night .ai-pill {
  background: linear-gradient(140deg, rgba(45,227,140,.20) 0%, rgba(45,227,140,.07) 100%);
  color: var(--sage);
  border: 1px solid rgba(45,227,140,.46);
  box-shadow: 0 0 18px -6px rgba(45,227,140,.5), inset 0 1px 0 rgba(255,255,255,.05);
  text-shadow: 0 0 12px rgba(45,227,140,.45);
}
html.namozim-night .ai-pill .sp { color: var(--brass); text-shadow: 0 0 10px rgba(231,196,106,.55); }

/* ---- Bottom nav active — dark neon ring instead of cream pill ---- */
html.namozim-night .nav-item.active,
html.namozim-night .nav-item.nav-settings.active {
  background: linear-gradient(155deg, rgba(45,227,140,.20) 0%, rgba(45,227,140,.05) 100%);
  color: var(--sage);
  box-shadow: inset 0 0 0 1px rgba(45,227,140,.36), 0 0 18px -6px rgba(45,227,140,.5);
  text-shadow: 0 0 14px rgba(45,227,140,.55);
}
html.namozim-night .nav-item.active svg,
html.namozim-night .nav-item.nav-settings.active svg {
  filter: drop-shadow(0 0 7px rgba(45,227,140,.6));
}

/* ---- Status dropdown — was a near-white box on the dark UI ---- */
html.namozim-night .status-menu-popover {
  background: rgba(11,20,15,.98);
  border-color: var(--paper-line-2);
  box-shadow: 0 18px 46px -18px rgba(0,0,0,.78), 0 0 0 1px rgba(45,227,140,.08);
}
html.namozim-night .status-menu-popover button { color: var(--ink-soft); }
html.namozim-night .status-menu-popover button.ok { color: var(--sage); }
html.namozim-night .status-menu-popover button.qaza { color: var(--crimson); }
html.namozim-night .status-menu-popover button.made-up { color: var(--brass-deep); background: rgba(231,196,106,.14); }
html.namozim-night .status-menu-popover button.neutral { color: var(--ink-mute); }
html.namozim-night .status-menu-popover button:hover { background: rgba(255,255,255,.06); }
html.namozim-night .status-menu-made-up .status-menu-trigger { color: var(--brass); text-shadow: 0 0 12px rgba(231,196,106,.55); }
html.namozim-night .status-menu-qaza .status-menu-trigger { color: var(--crimson); text-shadow: 0 0 12px rgba(255,93,110,.55); }
html.namozim-night .status-menu-ok .status-menu-trigger { color: var(--sage); }

/* ---- "Qazo bo'ldi" (red) + "Ado etildi" (yellow) rows — consistent + neon ---- */
html.namozim-night .prayer-row.missed {
  border-color: rgba(255,93,110,.40);
  background: linear-gradient(180deg, var(--paper-3) 0%, rgba(255,93,110,.11) 100%);
  box-shadow: 0 0 26px -10px rgba(255,93,110,.55);
}
html.namozim-night .prayer-row.missed .p-meta {
  color: var(--crimson);
  text-shadow: 0 0 12px rgba(255,93,110,.5);
}
html.namozim-night .prayer-row.made-up {
  border-radius: var(--r-lg);
  padding: 12px 14px;
  margin: 0;
  border: 1px solid rgba(231,196,106,.40);
  border-color: rgba(231,196,106,.40);
  background: linear-gradient(180deg, var(--paper-3) 0%, rgba(231,196,106,.11) 100%);
  box-shadow: 0 0 26px -10px rgba(231,196,106,.5);
}
html.namozim-night .prayer-row.made-up .p-meta {
  color: var(--brass);
  text-shadow: 0 0 12px rgba(231,196,106,.5);
}

/* ---- Current prayer — neon green gradient (reference look) ---- */
html.namozim-night .prayer-row.current {
  background: linear-gradient(155deg, rgba(45,227,140,.15) 0%, var(--paper-3) 62%);
  border-color: var(--sage);
  box-shadow: 0 0 28px -10px rgba(45,227,140,.6);
}
html.namozim-night .prayer-row.current .p-meta { color: var(--sage); }

/* ---- Plan "Bugungi maqsad" card — green fill made cream text vanish ---- */
html.namozim-night .goal-card {
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(45,227,140,.16), transparent 60%),
    linear-gradient(155deg, #0E2018 0%, #06110C 100%);
  color: var(--ink);
  border: 1px solid rgba(45,227,140,.28);
  box-shadow: 0 0 40px -16px rgba(45,227,140,.4);
}
html.namozim-night .goal-eyebrow { color: var(--sage); }
html.namozim-night .goal-num { color: var(--ink); text-shadow: 0 0 16px rgba(45,227,140,.35); }
html.namozim-night .goal-num .of { color: var(--ink-mute); }
html.namozim-night .goal-lbl { color: var(--ink-soft); }
html.namozim-night .goal-date { color: var(--ink-mute); }
html.namozim-night .goal-track { background: rgba(255,255,255,.08); }
html.namozim-night .goal-track .fill { background: var(--sage); box-shadow: 0 0 12px rgba(45,227,140,.55); }

/* ---- Women's mode full-screen header must clear Telegram chrome ---- */
html.namozim-tg-webapp:not(.namozim-tg-fullscreen) .wm-head {
  padding-top: max(70px, calc(var(--namozim-app-top-safe, 0px) + 16px));
}
html.namozim-tg-ios.namozim-tg-fullscreen .wm-head,
html.namozim-tg-android.namozim-tg-fullscreen .wm-head {
  padding-top: max(104px, calc(var(--namozim-app-top-safe, 0px) + 60px));
}
html.namozim-tg-webapp.namozim-tg-desktop:not(.namozim-tg-fullscreen) .wm-head {
  padding-top: max(50px, calc(var(--namozim-app-top-safe, 0px) + 30px));
}

/* ---- Swipe / paging navigation (no slide animation, per request) ---- */
.app-scroll { overscroll-behavior-y: contain; }
/* Page transition: opacity only. A transform on .page would create a
   containing block and trap position:fixed toasts inside the scroll area
   (that's why notifications appeared mid-list instead of pinned bottom). */
.page { animation: nzPageFade .2s ease both; }
@keyframes nzPageFade { from { opacity: 0; } to { opacity: 1; } }

/* ---- Notifications/messages always sit as a bottom snackbar (not over content) ---- */
.settings-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--nav-h, 66px) + var(--nav-bottom, max(10px, env(safe-area-inset-bottom))) + 18px);
  transform: translateX(-50%);
  margin: 0;
  z-index: 5200;
  width: max-content;
  max-width: min(360px, calc(100vw - 44px));
  padding: 11px 16px;
  border-radius: 999px;
  background: rgba(250, 238, 202, .98);
  color: #7a5a22;
  border: 1px solid rgba(173, 134, 61, .28);
  box-shadow: 0 16px 40px -22px rgba(27, 22, 12, .5), inset 0 1px 0 rgba(255,255,255,.6);
  font-size: 13px; font-weight: 900; line-height: 1.15; text-align: center;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: nzToastIn .22s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes nzToastIn { from { opacity: 0; transform: translate3d(-50%, 14px, 0); } to { opacity: 1; transform: translate3d(-50%, 0, 0); } }
html.namozim-night .settings-toast,
html.namozim-night .settings-bottom-toast {
  background: rgba(15, 28, 21, .98);
  color: var(--brass-deep);
  border: 1px solid rgba(231, 196, 106, .34);
  box-shadow: 0 16px 44px -20px rgba(0,0,0,.82), 0 0 0 1px rgba(231,196,106,.1);
}
@media (prefers-reduced-motion: reduce) {
  .settings-toast { animation: none; transform: translateX(-50%); }
}

/* ---- Today hero progress — harmonize the cycle neon with the green theme ---- */
html.namozim-night .th-progress-track { background: rgba(45, 227, 140, .12); }
html.namozim-night .th-progress-fill {
  background: linear-gradient(90deg, var(--sage-mid) 0%, var(--sage) 100%);
  box-shadow: 0 0 12px rgba(45, 227, 140, .55);
}



/* Namozim Mini App: block copy and text selection */
html, body, #root, #root *, .app-shell, .app-shell * {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
input, textarea, select, [contenteditable="true"], .namozim-allow-select, .namozim-allow-select * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}
img, svg {
  -webkit-user-drag: none !important;
  user-drag: none !important;
}
::selection { background: transparent; }
::-moz-selection { background: transparent; }

/* ── Swipe navigation transition (swipe-nav.js adds these classes) ── */
/* Swiping left (→ next tab) */
@keyframes nzSwipeNext {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
/* Swiping right (→ prev tab) */
@keyframes nzSwipePrev {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.nz-swipe-next .page { animation: nzSwipeNext .22s ease both; }
.nz-swipe-prev .page { animation: nzSwipePrev .22s ease both; }
@media (prefers-reduced-motion: reduce) {
  .nz-swipe-next .page,
  .nz-swipe-prev .page { animation: none; }
}

/* ============================================================
   PERF — touch devices (mobile / Telegram WebView)
   backdrop-filter: blur() must re-sample + blur everything behind the element
   on EVERY frame. On phones that is the single biggest cause of scroll and
   modal-open jank. Disable it on coarse-pointer devices and compensate with a
   more opaque background so surfaces still read as solid. Desktop keeps the
   glass blur (it can afford it).
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .bottom-nav,
  .auth-shell,
  .modal-backdrop,
  .qibla-modal-backdrop,
  .ai-chat-backdrop,
  .settings-bottom-toast,
  .settings-toast {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .bottom-nav { background: rgba(255, 255, 255, .94); }
  html.namozim-night .bottom-nav { background: rgba(9, 17, 13, .96) !important; }
  .modal-backdrop { background: rgba(15, 23, 42, .55); }
  html.namozim-night .modal-backdrop,
  html.namozim-night .ai-chat-backdrop,
  html.namozim-night .qibla-modal-backdrop { background: rgba(2, 6, 4, .8); }
}

/* Lazy-loaded screen placeholder spinner (e.g. Settings chunk) */
.screen-lazy-loading {
  display: grid;
  place-items: center;
  min-height: 50vh;
}
.screen-lazy-spinner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid var(--paper-line-2, rgba(0,0,0,.12));
  border-top-color: var(--sage, #15803D);
  animation: screen-lazy-spin .7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .screen-lazy-spinner { animation-duration: 1.4s; }
}
@keyframes screen-lazy-spin { to { transform: rotate(360deg); } }

/* ============================================================
   PRODUCTION POLISH — focus ring, press states, spring toggle,
   status-menu entrance, skeleton loaders. Mostly cheap, GPU-only.
   ============================================================ */

/* Keyboard focus ring (was only on modal inputs) — accessibility. */
.app-header button:focus-visible,
.bottom-nav button:focus-visible,
.status-menu-trigger:focus-visible,
.status-menu-popover button:focus-visible,
.toggle:focus-visible,
.qaza-step button:focus-visible,
.wm-cal-cell:focus-visible,
.mini-btn:focus-visible,
.ai-pill:focus-visible,
.qibla:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 2px;
  border-radius: 12px;
}

/* Press feedback (iOS-like tap-down) on the two highest-traffic controls. */
@media (prefers-reduced-motion: no-preference) {
  .prayer-row { transition: transform .12s cubic-bezier(.2,.9,.2,1), background .18s ease, box-shadow .18s ease; }
  .prayer-row:active { transform: scale(.985); }
  .qaza-step button:active,
  .status-menu-trigger:active,
  .ai-pill:active,
  .night-toggle:active,
  .qibla:active { transform: scale(.92); }
}

/* Toggle knob — spring/overshoot snap instead of linear (UISwitch feel). */
.toggle .knob { transition: transform .26s cubic-bezier(.34,1.56,.64,1) !important; }

/* Status menu popover — subtle scale+fade in (was instant pop). */
@media (prefers-reduced-motion: no-preference) {
  .status-menu-popover { transform-origin: top right; animation: nzMenuIn .14s cubic-bezier(.2,.9,.2,1); }
  .status-menu-up .status-menu-popover { transform-origin: bottom right; }
}
@keyframes nzMenuIn { from { opacity: 0; transform: scale(.92) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }

/* ── Skeleton loaders (cold load, no cached data) ── */
.sk-page { padding: 4px 0 24px; }
.sk { position: relative; overflow: hidden; background: var(--paper-2, #efe9dd); border-radius: 12px; }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: nzShimmer 1.25s infinite; }
html.namozim-night .sk { background: var(--paper-3, #14241c); }
html.namozim-night .sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }
.sk-hero { height: 188px; border-radius: 26px; margin-bottom: 22px; }
.sk-rowhead { display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 16px; }
.sk-row { display: flex; align-items: center; gap: 14px; padding: 14px 4px; }
.sk-ico { width: 52px; height: 52px; border-radius: 15px; flex-shrink: 0; }
.sk-row-txt { flex: 1; min-width: 0; }
.sk-pill { width: 92px; height: 30px; border-radius: 999px; flex-shrink: 0; }
.sk-line { border-radius: 7px; }
@keyframes nzShimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sk::after { animation: none; } }

/* ============================================================
   OILA REJIMI (Family mode) screen
   The full-screen shell (overlay / header / scroll body) reuses the
   mini-app's women-mode pattern: .wm-screen-overlay > .wm-screen >
   .wm-head + .wm-body. That gives identical Telegram safe-area handling
   (back button clears the Telegram chrome), the same entrance/exit
   animation, and shared light/night tokens. Only the family-specific
   CONTENT below is bespoke.
   ============================================================ */
.fam-err { background: var(--crimson-tint, rgba(220,38,38,.1)); color: var(--crimson, #DC2626); border-radius: 14px; padding: 11px 14px; font-size: 13px; font-weight: 600; }
.fam-card { background: var(--paper-1); border: 1px solid var(--paper-line); border-radius: 20px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.fam-label { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); }
.fam-input { width: 100%; box-sizing: border-box; border: 1px solid var(--paper-line-2); border-radius: 14px; background: var(--paper-2); color: var(--ink); font-family: var(--f-body); font-size: 16px; font-weight: 600; padding: 13px 14px; outline: none; }
.fam-input:focus-visible { border-color: var(--sage); outline: 2px solid var(--sage); outline-offset: 1px; }
.fam-btn { border: 0; border-radius: 16px; min-height: 52px; font-family: var(--f-display); font-weight: 750; font-size: 15px; cursor: pointer; transition: transform .14s cubic-bezier(.2,.9,.2,1); }
.fam-btn:active { transform: scale(.97); }
.fam-btn.primary { background: var(--sage); color: #fff; }
.fam-btn.sage { background: var(--sage-tint); color: var(--sage); }
.fam-btn.ghost { background: transparent; color: var(--ink-mute); min-height: 46px; font-weight: 650; }
.fam-btn:disabled { opacity: .55; }
.fam-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fam-fine { font-size: 12px; line-height: 1.5; color: var(--ink-mute); }
.fam-row { display: flex; align-items: center; gap: 12px; }
.fam-rt { flex: 1; min-width: 0; }
.fam-rt b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 14.5px; color: var(--ink); }
.fam-rt span { display: block; font-size: 12.5px; color: var(--ink-mute); font-weight: 550; line-height: 1.4; margin-top: 3px; }
.fam-seg { display: flex; gap: 4px; background: var(--paper-3); border-radius: 14px; padding: 4px; }
.fam-seg button { flex: 1; border: 0; background: transparent; color: var(--ink-mute); font-weight: 650; font-size: 13px; padding: 9px 6px; border-radius: 11px; cursor: pointer; }
.fam-seg button.on { background: var(--paper); color: var(--sage); box-shadow: 0 1px 4px -1px rgba(0,0,0,.12); }
.fam-picker { margin-bottom: 4px; }
.fam-members { display: flex; flex-direction: column; gap: 10px; }
.fam-member { background: var(--paper-1); border: 1px solid var(--paper-line); border-radius: 18px; padding: 14px 16px; }
.fam-member.self { border-color: var(--sage-soft); background: var(--sage-tint); }
.fam-m-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fam-m-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fam-m-name b { font-family: var(--f-display); font-weight: 750; font-size: 16px; color: var(--ink); }
.fam-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--sage); background: var(--sage-tint); border-radius: 999px; padding: 3px 8px; }
.fam-tag.owner { color: var(--brass, #B7791F); background: var(--brass-tint, rgba(183,121,31,.12)); }
.fam-x { width: 30px; height: 30px; border-radius: 999px; border: 0; background: var(--paper-3); color: var(--ink-mute); font-size: 20px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.fam-m-body { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.fam-dots { display: flex; gap: 7px; }
.fam-dot { width: 16px; height: 16px; border-radius: 999px; background: var(--paper-line-2); }
.fam-dot.ok { background: var(--sage); }
.fam-dot.qaza { background: var(--crimson, #DC2626); }
.fam-dot.made-up { background: var(--brass, #B7791F); }
.fam-m-stats { display: flex; gap: 10px; }
.fam-stat { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.fam-hidden { margin-top: 10px; font-size: 13px; color: var(--ink-mute); font-style: italic; }
.fam-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.fam-empty { text-align: center; padding: 24px 12px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fam-empty-ic, .fam-join-ic { font-size: 44px; }
.fam-empty h3, .fam-join-t { font-family: var(--f-display); font-weight: 800; font-size: 22px; color: var(--ink); margin: 4px 0; }
.fam-empty p { font-size: 14px; line-height: 1.5; color: var(--ink-soft); max-width: 30ch; margin: 0; }
.fam-link { word-break: break-all; font-size: 13px; color: var(--sage); background: var(--paper-3); border-radius: 12px; padding: 11px 13px; font-weight: 600; }
.fam-viewers { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.fam-viewer { display: flex; align-items: center; justify-content: space-between; padding: 11px 2px; border-top: 1px solid var(--paper-line); font-size: 14.5px; color: var(--ink); font-weight: 600; }
.fam-viewer input { width: 20px; height: 20px; accent-color: var(--sage); }
.fam-loading { display: grid; place-items: center; padding: 60px 0; }