:root {
  --zo-dark-green: #0F2A22;
  --zo-emerald: #2F8F5B;
  --zo-gold: #D6B24A;
  --zo-cream: #F8F3E7;
  --zo-card: #FFFDF7;
  --zo-text: #1E1E1E;
  --zo-white: #FFFFFF;
  --zo-muted: #6B6B6B;
  --zo-border: #E8DDC8;
  --zo-soft-green: #E8F3EC;
  --zo-soft-gold: #F3E6B8;
  --zo-shadow: 0 18px 50px rgba(15, 42, 34, 0.10);
  --zo-shadow-soft: 0 10px 28px rgba(15, 42, 34, 0.075);
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--zo-cream) !important;
}

.zo-app-shell,
.zo-app-shell * {
  box-sizing: border-box;
}

.zo-app-shell {
  width: 100%;
  min-height: 100svh;
  background:
    radial-gradient(circle at 8% 4%, rgba(47, 143, 91, 0.10), transparent 28%),
    radial-gradient(circle at 94% 7%, rgba(214, 178, 74, 0.12), transparent 30%),
    var(--zo-cream);
  color: var(--zo-text);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  gap: 22px;
  padding: 18px;
  overflow-x: hidden;
}

.zo-app-shell a {
  color: inherit;
  text-decoration: none;
}

.zo-app-shell button,
.zo-app-shell input {
  font-family: inherit;
}

.zo-svg-icon {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: currentColor;
}

.zo-svg-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.zo-svg-icon svg * {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.zo-mobile-topbar,
.zo-mobile-bottom-nav,
.zo-mobile-support-grid {
  display: none;
}

.zo-sidebar {
  position: sticky;
  top: 18px;
  height: calc(100svh - 36px);
  min-height: 690px;
  border-radius: 26px;
  background: rgba(255, 253, 247, 0.78);
  border: 1px solid rgba(232, 221, 200, 0.92);
  box-shadow: var(--zo-shadow-soft);
  padding: 22px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(16px);
}

.zo-sidebar-brand,
.zo-mobile-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--zo-dark-green);
}

.zo-sidebar-brand {
  font-size: 21px;
  margin-bottom: 24px;
}

.zo-sidebar-brand img,
.zo-mobile-brand img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  border-radius: 12px;
}

.zo-side-nav {
  display: grid;
  gap: 10px;
}

.zo-side-nav a {
  display: flex;
  align-items: center;
  gap: 11px;
  border-radius: 14px;
  padding: 14px 14px;
  color: #14231d;
  font-size: 14px;
  font-weight: 750;
  transition: transform .2s ease, background .2s ease, box-shadow .2s ease, color .2s ease;
}

.zo-side-nav a:hover {
  background: rgba(47, 143, 91, 0.09);
  transform: translateX(2px);
}

.zo-side-nav a.is-active {
  background: linear-gradient(135deg, var(--zo-emerald), #2B7E52);
  color: var(--zo-white);
  box-shadow: 0 12px 25px rgba(47, 143, 91, 0.22);
}

.zo-sidebar-daily {
  margin-top: auto;
}

.zo-main-panel {
  width: min(100%, 1220px);
  padding: 4px 2px 0;
}

.zo-main-header {
  min-height: 126px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 10px;
}

.zo-greeting {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--zo-dark-green);
  font-size: 13px;
  margin-bottom: 12px;
}

.zo-greeting .zo-svg-icon {
  width: 15px;
  height: 15px;
  color: var(--zo-gold);
}

.zo-greeting small {
  color: var(--zo-muted);
  font-weight: 600;
}

.zo-main-header h1 {
  color: var(--zo-dark-green);
  font-size: clamp(36px, 3.25vw, 50px);
  line-height: 1.04;
  letter-spacing: -0.055em;
  margin: 0 0 10px;
  font-weight: 800;
}

.zo-main-header p {
  color: #4C5651;
  font-size: 17px;
  line-height: 1.65;
  max-width: 560px;
  margin: 0;
  font-weight: 500;
}

.zo-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 48px;
}

.zo-header-actions button,
.zo-icon-btn {
  appearance: none;
  border: 0;
  background: rgba(255, 253, 247, 0.78);
  color: var(--zo-dark-green);
  width: 42px;
  height: 42px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--zo-shadow-soft);
  cursor: pointer;
}

.zo-header-actions .zo-svg-icon {
  width: 17px;
  height: 17px;
}

.zo-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--zo-emerald);
  color: var(--zo-white);
  font-weight: 800;
  box-shadow: 0 12px 25px rgba(47, 143, 91, 0.22);
}

.zo-dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(330px, 0.9fr);
  gap: 22px;
  align-items: start;
}

.zo-side-stack {
  display: grid;
  gap: 18px;
}

.zo-card {
  background: rgba(255, 253, 247, 0.92);
  border: 1px solid var(--zo-border);
  border-radius: 24px;
  box-shadow: var(--zo-shadow-soft);
}

.zo-counter-card {
  padding: 27px 32px 23px;
  min-height: 515px;
}

.zo-card-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.zo-card-title {
  color: var(--zo-dark-green);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.zo-current-zikir,
.zo-card-title-row small {
  color: #596861;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.zo-target-chips {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.zo-target-chips button {
  appearance: none;
  border: 1px solid var(--zo-border);
  background: rgba(255, 255, 255, 0.55);
  color: #111;
  border-radius: 13px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, border .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}

.zo-target-chips button:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 143, 91, 0.45);
}

.zo-target-chips button.is-active {
  background: var(--zo-emerald);
  color: var(--zo-white);
  border-color: var(--zo-emerald);
  box-shadow: 0 12px 26px rgba(47, 143, 91, 0.19);
}

.zo-progress-wrap {
  display: grid;
  place-items: center;
}

.zo-progress-button {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  transition: transform .18s ease, filter .18s ease;
}

.zo-progress-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.01);
}

.zo-progress-button:active {
  transform: scale(.985);
}

.zo-progress-button:focus-visible,
.zo-plus-btn:focus-visible,
.zo-action-btn:focus-visible,
.zo-zikir-list button:focus-visible,
.zo-target-chips button:focus-visible {
  outline: 3px solid rgba(214, 178, 74, .42);
  outline-offset: 3px;
}

.zo-progress-ring {
  --zo-progress: 0deg;
  width: min(282px, 58vw);
  height: min(282px, 58vw);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    conic-gradient(var(--zo-emerald) 0deg, var(--zo-emerald) var(--zo-progress), var(--zo-soft-gold) var(--zo-progress), var(--zo-soft-gold) 360deg);
  box-shadow: inset 0 0 0 12px rgba(255, 253, 247, 0.78), 0 18px 45px rgba(15, 42, 34, .08);
  position: relative;
}

.zo-progress-ring::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: inherit;
  background: radial-gradient(circle, #fff 0%, var(--zo-card) 70%);
  box-shadow: inset 0 0 0 1px rgba(232, 221, 200, 0.8);
}

.zo-progress-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  color: var(--zo-dark-green);
  display: grid;
  gap: 5px;
}

.zo-progress-inner strong {
  color: var(--zo-emerald);
  font-size: clamp(62px, 6vw, 82px);
  line-height: 0.95;
  font-weight: 800;
  letter-spacing: -0.06em;
}

.zo-progress-inner span {
  color: #101010;
  font-weight: 800;
  font-size: 17px;
}

.zo-tap-note {
  margin: 12px 0 4px;
  color: #7B7569;
  font-size: 12px;
  font-weight: 700;
}

.zo-remaining {
  margin: 4px 0 20px;
  color: var(--zo-dark-green);
  font-weight: 750;
  font-size: 15px;
}

.zo-counter-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  max-width: 450px;
  margin: 0 auto;
}

.zo-action-btn,
.zo-plus-btn,
.zo-btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.zo-action-btn {
  min-height: 48px;
  gap: 9px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .48);
  color: #1D2C25;
  border: 1px solid var(--zo-border);
  font-size: 14px;
}

.zo-action-btn .zo-svg-icon {
  width: 17px;
  height: 17px;
}

.zo-plus-btn {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zo-emerald), #2A7C51);
  color: var(--zo-white);
  box-shadow: 0 16px 30px rgba(47, 143, 91, .26);
}

.zo-plus-btn .zo-svg-icon {
  width: 34px;
  height: 34px;
}

.zo-action-btn:hover,
.zo-plus-btn:hover,
.zo-btn:hover {
  transform: translateY(-2px);
}

.zo-storage-note {
  margin: 18px 0 0;
  text-align: center;
  color: #7B7569;
  font-size: 12px;
  font-weight: 600;
}

.zo-zikir-select-card {
  padding: 22px;
}

.zo-zikir-search-wrap {
  height: 44px;
  border: 1px solid var(--zo-border);
  border-radius: 14px;
  background: rgba(255, 255, 255, .52);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  margin-bottom: 12px;
}

.zo-zikir-search-wrap .zo-svg-icon {
  color: #7B7569;
  width: 17px;
  height: 17px;
}

.zo-zikir-search-wrap input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  color: var(--zo-dark-green);
  font-size: 14px;
  font-weight: 700;
}

.zo-zikir-search-wrap input::placeholder {
  color: #9A9284;
}

.zo-zikir-list {
  display: grid;
  gap: 10px;
  max-height: 322px;
  overflow: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(47, 143, 91, .4) transparent;
}

.zo-zikir-list button {
  appearance: none;
  border: 1px solid var(--zo-border);
  background: rgba(255, 255, 255, .54);
  color: #111;
  border-radius: 14px;
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  font-weight: 800;
  transition: transform .2s ease, background .2s ease, border .2s ease, color .2s ease;
}

.zo-zikir-list button .zo-svg-icon {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: var(--zo-soft-green);
  color: var(--zo-emerald);
  padding: 7px;
}

.zo-zikir-list button:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 143, 91, .40);
}

.zo-zikir-list button.is-active {
  background: var(--zo-emerald);
  color: var(--zo-white);
  border-color: var(--zo-emerald);
  box-shadow: 0 12px 26px rgba(47, 143, 91, .18);
}

.zo-zikir-list button.is-active .zo-svg-icon {
  background: rgba(255, 255, 255, .16);
  color: var(--zo-white);
}

.zo-room-cta-card,
.zo-wizard-card,
.zo-daily-card {
  position: relative;
  overflow: hidden;
}

.zo-room-cta-card {
  min-height: 172px;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  background:
    radial-gradient(circle at 92% 88%, rgba(255,255,255,.55), transparent 22%),
    linear-gradient(135deg, #FFF2C5 0%, #F8DEA3 100%);
}

.zo-card-kicker {
  display: block;
  margin-bottom: 9px;
  /* Eskiden #B48A22 (2.87:1 — AA başarısız) idi ve zo-zikirmatik-ui.css
     içinde ikinci bir kuralla #7D5F11'e override ediliyordu. Artık tek
     kaynak: --zo-gold-text (zo-global-ui.css :root). Override kaldırıldı. */
  color: var(--zo-gold-text);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: .10em;
  font-weight: 800;
}

.zo-room-cta-card h3,
.zo-wizard-card h3,
.zo-daily-card h3 {
  color: var(--zo-dark-green);
  font-size: 19px;
  line-height: 1.18;
  letter-spacing: -0.035em;
  margin: 0 0 10px;
  font-weight: 800;
}

.zo-room-cta-card p,
.zo-wizard-card p,
.zo-daily-card p {
  color: #586159;
  line-height: 1.55;
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 600;
}

.zo-btn {
  min-height: 44px;
  border-radius: 13px;
  padding: 0 18px;
  background: var(--zo-dark-green);
  color: var(--zo-white) !important;
  font-size: 14px;
  box-shadow: 0 13px 24px rgba(15, 42, 34, .16);
}

.zo-btn-small {
  min-height: 40px;
  padding: 0 16px;
  background: var(--zo-emerald);
}

.zo-illustration {
  width: 86px;
  height: 86px;
  border-radius: 28px;
  background: rgba(255, 253, 247, .62);
  display: grid;
  place-items: center;
  color: var(--zo-gold);
  flex: 0 0 auto;
}

.zo-illustration .zo-svg-icon {
  width: 46px;
  height: 46px;
}

.zo-wizard-card {
  padding: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  background: linear-gradient(135deg, rgba(232, 243, 236, .92), rgba(255, 253, 247, .92));
}

.zo-wizard-card a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .55);
  color: var(--zo-dark-green);
  border: 1px solid var(--zo-border);
  font-size: 22px;
  font-weight: 800;
  flex: 0 0 auto;
}

.zo-daily-card {
  padding: 22px;
  background:
    radial-gradient(circle at 85% 90%, rgba(214, 178, 74, .17), transparent 28%),
    rgba(255, 253, 247, .88);
}

.zo-daily-card small {
  display: block;
  color: #7D796F;
  font-weight: 700;
  margin-bottom: 14px;
}

.zo-today-stats {
  margin-top: 18px;
  padding: 20px 22px;
}

.zo-today-stats h2 {
  font-size: 16px;
  color: var(--zo-dark-green);
  margin: 0 0 14px;
  font-weight: 850;
  letter-spacing: -0.02em;
}

.zo-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.zo-stat-item {
  min-height: 80px;
  display: grid;
  place-items: center;
  gap: 4px;
  text-align: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, .50);
  border: 1px solid rgba(232, 221, 200, .70);
  padding: 10px;
}

.zo-stat-item .zo-svg-icon {
  width: 24px;
  height: 24px;
  color: var(--zo-gold);
}

.zo-stat-item:nth-child(2) .zo-svg-icon,
.zo-stat-item:nth-child(4) .zo-svg-icon {
  color: var(--zo-emerald);
}

.zo-stat-item strong {
  color: var(--zo-dark-green);
  font-size: 21px;
  line-height: 1;
  font-weight: 850;
}

.zo-stat-item small {
  color: #6E756F;
  font-size: 12px;
  font-weight: 750;
}

@media (max-width: 820px) {
  .zo-app-shell {
    grid-template-columns: 1fr;
    padding: 16px;
  }

  .zo-sidebar {
    display: none;
  }

  .zo-mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(248, 243, 231, .84);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(232, 221, 200, .85);
    border-radius: 20px;
    padding: 10px;
    box-shadow: var(--zo-shadow-soft);
  }

  .zo-mobile-brand {
    font-size: 16px;
  }

  .zo-mobile-brand img {
    width: 30px;
    height: 30px;
  }

  .zo-icon-btn span {
    width: 16px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
    display: block;
  }

  .zo-icon-btn {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    width: 40px;
    height: 40px;
    box-shadow: none;
    background: rgba(255,255,255,.50);
    border: 1px solid var(--zo-border);
  }

  .zo-bell span {
    width: auto;
    height: auto;
    background: transparent;
  }

  .zo-main-panel {
    width: min(100%, 840px);
    margin: 0 auto;
    padding-bottom: 90px;
  }

  .zo-main-header {
    min-height: auto;
    margin: 20px 0 16px;
  }

  .zo-main-header h1 {
    font-size: clamp(30px, 6vw, 42px);
  }

  .zo-header-actions {
    display: none;
  }

  .zo-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .zo-side-stack {
    grid-template-columns: 1fr 1fr;
  }

  .zo-zikir-select-card {
    grid-column: 1 / -1;
  }

  .zo-zikir-list {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    padding: 0 2px 5px;
  }

  .zo-zikir-list button {
    min-width: 150px;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
    padding: 12px 10px;
  }

  .zo-mobile-support-grid {
    display: grid;
    margin-top: 18px;
  }

  .zo-today-stats {
    margin-top: 18px;
  }

  .zo-mobile-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: 14px;
    z-index: 50;
    transform: translateX(-50%);
    width: min(calc(100% - 24px), 540px);
    height: 68px;
    display: grid;
    grid-template-columns: 1fr 1fr 74px 1fr 1fr;
    align-items: center;
    border-radius: 23px;
    background: rgba(255, 253, 247, .92);
    border: 1px solid var(--zo-border);
    box-shadow: 0 20px 45px rgba(15, 42, 34, .18);
    backdrop-filter: blur(16px);
    padding: 7px;
  }

  .zo-mobile-bottom-nav a,
  .zo-mobile-bottom-nav button {
    appearance: none;
    border: 0;
    background: transparent;
    color: #5C655F;
    min-height: 52px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }

  .zo-mobile-bottom-nav .zo-svg-icon {
    width: 20px;
    height: 20px;
  }

  .zo-mobile-bottom-nav a.is-active {
    color: var(--zo-emerald);
  }

  /* fix/mobile-nav-primary-button-bug: bu blok önceden bare `button`
     seçicisiyle yazılmıştı ve .zo-mobile-nav-primary sınıfı olmayan
     "Hesap" düğmesini de aynı büyük yeşil dairesel FAB gibi
     gösteriyordu (iki "birincil" görünümlü öğe). Artık yalnız gerçek
     birincil CTA'yı (.zo-mobile-nav-primary) hedefliyor. */
  .zo-mobile-bottom-nav .zo-mobile-nav-primary {
    width: 60px;
    height: 60px;
    min-height: 60px;
    border-radius: 50%;
    background: var(--zo-emerald);
    color: var(--zo-white);
    box-shadow: 0 12px 25px rgba(47, 143, 91, .25);
    margin: -24px auto 0;
  }

  .zo-mobile-bottom-nav .zo-mobile-nav-primary .zo-svg-icon {
    width: 30px;
    height: 30px;
  }
}

@media (max-width: 760px) {
  .zo-app-shell {
    padding: 10px;
  }

  .zo-main-header {
    margin-top: 16px;
  }

  .zo-greeting {
    font-size: 12px;
    margin-bottom: 9px;
  }

  .zo-greeting small {
    display: none;
  }

  .zo-main-header h1 {
    font-size: 31px;
    letter-spacing: -0.05em;
  }

  .zo-main-header p {
    font-size: 14px;
    line-height: 1.55;
  }

  .zo-counter-card,
  .zo-zikir-select-card,
  .zo-room-cta-card,
  .zo-wizard-card,
  .zo-daily-card,
  .zo-today-stats {
    border-radius: 20px;
  }

  .zo-counter-card {
    padding: 18px 14px 18px;
    min-height: auto;
  }

  .zo-card-title-row {
    margin-bottom: 14px;
  }

  .zo-card-title {
    font-size: 17px;
  }

  .zo-current-zikir,
  .zo-card-title-row small {
    font-size: 12px;
  }

  .zo-target-chips {
    gap: 8px;
    margin-bottom: 17px;
  }

  .zo-target-chips button {
    min-height: 38px;
    border-radius: 11px;
    font-size: 13px;
  }

  .zo-progress-ring {
    width: min(244px, 72vw);
    height: min(244px, 72vw);
    box-shadow: inset 0 0 0 9px rgba(255, 253, 247, 0.82), 0 14px 30px rgba(15, 42, 34, .07);
  }

  .zo-progress-ring::before {
    inset: 13px;
  }

  .zo-progress-inner strong {
    font-size: 62px;
  }

  .zo-tap-note {
    margin-top: 10px;
  }

  .zo-remaining {
    margin-bottom: 14px;
  }

  .zo-counter-actions {
    grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr);
    gap: 10px;
  }

  .zo-action-btn {
    min-height: 44px;
    font-size: 12px;
  }

  .zo-action-btn .zo-svg-icon {
    width: 15px;
    height: 15px;
  }

  .zo-plus-btn {
    width: 62px;
    height: 62px;
  }

  .zo-plus-btn .zo-svg-icon {
    width: 30px;
    height: 30px;
  }

  .zo-storage-note {
    font-size: 12px;
  }

  .zo-side-stack {
    grid-template-columns: 1fr;
    gap: 13px;
  }

  .zo-zikir-select-card {
    padding: 16px;
  }

  .zo-zikir-search-wrap {
    height: 40px;
  }

  .zo-zikir-list button {
    min-width: 118px;
    min-height: 86px;
    font-size: 12px;
    border-radius: 14px;
  }

  .zo-zikir-list button .zo-svg-icon {
    width: 28px;
    height: 28px;
  }

  .zo-room-cta-card,
  .zo-wizard-card,
  .zo-daily-card {
    padding: 18px;
  }

  .zo-room-cta-card h3,
  .zo-wizard-card h3,
  .zo-daily-card h3 {
    font-size: 17px;
  }

  .zo-room-cta-card p,
  .zo-wizard-card p,
  .zo-daily-card p {
    font-size: 13px;
  }

  .zo-illustration {
    width: 62px;
    height: 62px;
    border-radius: 20px;
  }

  .zo-illustration .zo-svg-icon {
    width: 34px;
    height: 34px;
  }

  .zo-today-stats {
    padding: 17px 14px;
  }

  .zo-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
  }

  .zo-stat-item {
    min-height: 70px;
    border-radius: 14px;
    padding: 8px 4px;
  }

  .zo-stat-item strong {
    font-size: 17px;
  }

  .zo-stat-item small {
    font-size: 12px;
  }

  .zo-stat-item .zo-svg-icon {
    width: 20px;
    height: 20px;
  }
}

@media (max-width: 420px) {
  .zo-mobile-brand span {
    font-size: 14px;
  }

  .zo-main-header h1 {
    font-size: 29px;
  }

  .zo-target-chips {
    grid-template-columns: repeat(4, 1fr);
  }

  .zo-counter-actions {
    grid-template-columns: 1fr 58px 1fr;
  }

  .zo-plus-btn {
    width: 58px;
    height: 58px;
  }

  .zo-action-btn span {
    display: none;
  }
}

/* =========================
   v0.3 polish overrides
   ========================= */
.zo-main-panel {
  position: relative;
  width: min(100%, 1280px);
}

.zo-app-shell {
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  padding: 14px;
}

.zo-sidebar {
  top: 14px;
  height: calc(100svh - 28px);
  min-height: 620px;
  padding: 18px 16px;
  border-radius: 22px;
}

.zo-sidebar-brand {
  margin-bottom: 18px;
  min-height: 54px;
}

.zo-sidebar-brand img {
  width: 154px;
  max-width: 100%;
  height: auto;
  border-radius: 0;
}

.zo-side-nav {
  gap: 8px;
}

.zo-side-nav a {
  min-height: 48px;
  padding: 12px 12px;
  font-size: 13px;
}

.zo-side-nav a .zo-svg-icon {
  width: 18px;
  height: 18px;
}

.zo-daily-card {
  padding: 18px;
}

.zo-main-header {
  position: relative;
  min-height: 88px;
  margin-bottom: 12px;
  padding: 2px 0 6px;
  gap: 16px;
  align-items: flex-start;
}

.zo-header-copy {
  position: relative;
  z-index: 2;
}

.zo-greeting {
  font-size: 12px;
  margin-bottom: 8px;
}

.zo-main-header h1 {
  font-size: clamp(32px, 2.65vw, 44px);
  margin-bottom: 6px;
}

.zo-main-header p {
  font-size: 15px;
  line-height: 1.5;
  max-width: 620px;
}

.zo-header-actions {
  position: relative;
  z-index: 3;
  padding-top: 10px;
  gap: 10px;
}

.zo-header-actions button,
.zo-mobile-top-actions .zo-icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(232, 221, 200, 0.96);
}

.zo-header-actions button .zo-svg-icon,
.zo-mobile-top-actions .zo-icon-btn .zo-svg-icon {
  width: 18px;
  height: 18px;
}

.zo-mobile-topbar {
  position: relative;
}

.zo-mobile-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.zo-floating-panels {
  position: absolute;
  top: 62px;
  right: 0;
  z-index: 30;
  display: grid;
  gap: 10px;
  pointer-events: none;
}

.zo-quick-panel {
  width: min(320px, calc(100vw - 26px));
  background: rgba(255, 253, 247, 0.98);
  border: 1px solid var(--zo-border);
  border-radius: 20px;
  box-shadow: 0 20px 46px rgba(15, 42, 34, 0.14);
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  pointer-events: none;
}

.zo-quick-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.zo-floating-panels.has-open {
  pointer-events: auto;
}

.zo-quick-panel .zo-panel-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--zo-dark-green);
}

.zo-quick-panel .zo-panel-title .zo-svg-icon {
  width: 18px;
  height: 18px;
  color: var(--zo-gold);
}

.zo-quick-panel p {
  margin: 0 0 12px;
  color: #5f655f;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 600;
}

.zo-panel-actions {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.zo-quick-panel .zo-action-btn {
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
}

.zo-panel-link,
.zo-panel-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--zo-emerald) !important;
  font-weight: 800;
}

.zo-panel-note {
  color: #7b7569 !important;
}

.zo-sync-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--zo-border);
}

.zo-sync-panel > strong {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--zo-dark-green);
}

.zo-sync-panel [data-zo-sync-status][data-type="success"] {
  color: #1f7a4d !important;
}

.zo-sync-panel [data-zo-sync-status][data-type="error"] {
  color: #a43d35 !important;
}

.zo-sync-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.zo-sync-actions button {
  min-height: 38px;
  border: 1px solid var(--zo-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, .78);
  color: var(--zo-dark-green);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.zo-sync-actions button:last-child {
  grid-column: 1 / -1;
  color: #8f342d;
}

.zo-header-leaf {
  position: absolute;
  top: -12px;
  right: 72px;
  width: 170px;
  height: 110px;
  z-index: 1;
  pointer-events: none;
}

.zo-header-leaf::before,
.zo-header-leaf::after {
  content: "";
  position: absolute;
  border-radius: 100% 0 100% 0 / 100% 0 100% 0;
  transform: rotate(-18deg);
  opacity: .28;
}

.zo-header-leaf::before {
  width: 82px;
  height: 120px;
  right: 10px;
  top: 2px;
  background: radial-gradient(circle at 45% 35%, rgba(79, 167, 112, .55), rgba(47, 143, 91, .18) 64%, transparent 70%);
}

.zo-header-leaf::after {
  width: 56px;
  height: 86px;
  right: 74px;
  top: 18px;
  transform: rotate(-28deg);
  background: radial-gradient(circle at 45% 35%, rgba(214, 178, 74, .52), rgba(214, 178, 74, .12) 62%, transparent 72%);
}

.zo-dashboard-grid {
  grid-template-columns: minmax(0, 1.42fr) minmax(320px, 0.9fr);
  gap: 18px;
}

.zo-counter-card {
  padding: 22px 24px 20px;
  min-height: auto;
}

.zo-card-title-row {
  margin-bottom: 16px;
}

.zo-card-title {
  font-size: 18px;
}

.zo-target-chips {
  gap: 10px;
  margin-bottom: 16px;
}

.zo-target-chips button {
  min-height: 40px;
  border-radius: 12px;
  font-size: 13px;
}

.zo-progress-ring {
  width: min(244px, 50vw);
  height: min(244px, 50vw);
}

.zo-progress-ring::before {
  inset: 14px;
}

.zo-progress-inner strong {
  font-size: clamp(56px, 5vw, 74px);
}

.zo-progress-inner span {
  font-size: 15px;
}

.zo-tap-note {
  margin: 10px 0 4px;
}

.zo-remaining {
  margin-bottom: 14px;
}

.zo-counter-actions {
  max-width: 420px;
  gap: 12px;
}

.zo-action-btn {
  min-height: 46px;
  padding: 0 14px;
}

.zo-action-btn .zo-svg-icon {
  width: 16px;
  height: 16px;
}

.zo-action-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
}

.zo-plus-btn {
  width: 68px;
  height: 68px;
}

.zo-plus-btn .zo-svg-icon {
  width: 30px;
  height: 30px;
}

.zo-prayer-note {
  margin: 14px 0 5px;
  text-align: center;
  color: var(--zo-dark-green);
  font-size: 13px;
  font-weight: 700;
}

.zo-storage-note {
  margin-top: 8px;
}

.zo-zikir-select-card {
  padding: 18px;
}

.zo-zikir-list {
  max-height: 286px;
}

.zo-zikir-list button {
  min-height: 48px;
  padding: 8px 12px;
}

.zo-zikir-list button span:last-child {
  line-height: 1.3;
}

.zo-room-cta-card {
  min-height: 154px;
  padding: 20px;
}

.zo-wizard-card {
  padding: 18px 20px;
}

.zo-today-stats {
  margin-top: 0;
  padding: 18px;
}

.zo-today-stats h2 {
  margin-bottom: 12px;
}

.zo-stat-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.zo-stat-item {
  min-height: 76px;
}

@media (max-width: 820px) {
  .zo-app-shell {
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .zo-main-panel {
    width: min(100%, 980px);
  }

  .zo-main-header {
    margin: 14px 0 14px;
  }

  .zo-main-header p {
    max-width: 100%;
  }

  .zo-header-leaf {
    top: -8px;
    right: 56px;
    width: 130px;
    height: 90px;
  }

  .zo-floating-panels {
    top: 58px;
    right: 0;
  }

  .zo-side-stack {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }

  .zo-zikir-select-card {
    grid-column: 1 / -1;
  }

  .zo-side-stats {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .zo-main-panel {
    padding-bottom: 92px;
  }

  .zo-main-header {
    padding-right: 0;
  }

  .zo-main-header h1 {
    font-size: 31px;
  }

  .zo-main-header p {
    font-size: 14px;
  }

  .zo-header-leaf {
    width: 96px;
    height: 74px;
    right: 0;
    top: 0;
    opacity: .9;
  }

  .zo-floating-panels {
    top: 64px;
    left: 0;
    right: auto;
  }

  .zo-quick-panel {
    width: min(100vw - 22px, 340px);
  }

  .zo-counter-card {
    padding: 18px 14px 18px;
  }

  .zo-progress-ring {
    width: min(224px, 70vw);
    height: min(224px, 70vw);
  }

  .zo-prayer-note {
    font-size: 12px;
  }

  .zo-zikir-list {
    max-height: none;
  }

  .zo-side-stats {
    order: 4;
  }

  .zo-mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 35;
    background: rgba(248, 243, 231, .9);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(232, 221, 200, .85);
    border-radius: 18px;
    padding: 10px 12px;
    box-shadow: var(--zo-shadow-soft);
  }

  .zo-mobile-brand {
    gap: 8px;
  }

  .zo-mobile-brand img {
    width: 98px;
    height: auto;
    border-radius: 0;
  }

  .zo-mobile-brand span {
    display: none;
  }
}

@media (max-width: 420px) {
  .zo-header-actions button,
  .zo-mobile-top-actions .zo-icon-btn {
    width: 40px;
    height: 40px;
    border-radius: 13px;
  }

  .zo-stat-grid {
    gap: 8px;
  }
}

/* ===== v0.4 refinements ===== */
.zo-app-shell {
  grid-template-columns: 214px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.zo-sidebar {
  min-height: calc(100vh - 34px);
  padding: 18px 16px;
}

.zo-sidebar-brand img {
  max-width: 156px;
}

.zo-side-nav {
  gap: 8px;
}

.zo-side-nav a {
  min-height: 50px;
}

.zo-sidebar-daily {
  margin-top: auto;
  padding: 16px 14px;
}

.zo-sidebar-daily p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zo-main-panel {
  padding-top: 4px;
}

.zo-main-header {
  margin: 4px 0 14px;
  align-items: start;
}

.zo-main-header h1 {
  font-size: clamp(38px, 4.2vw, 56px);
  line-height: 1.02;
  margin: 8px 0 10px;
}

.zo-main-header p {
  max-width: 640px;
}

.zo-dashboard-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.72fr);
  gap: 18px;
  align-items: start;
}

.zo-counter-card,
.zo-zikir-select-card,
.zo-progress-insight-card,
.zo-room-cta-card,
.zo-wizard-card {
  border-radius: 28px;
}

.zo-counter-card {
  padding: 22px 24px 20px;
}

.zo-card-title-row {
  margin-bottom: 14px;
}

.zo-current-zikir-spotlight {
  text-align: center;
  margin: 6px auto 10px;
  max-width: 420px;
}

.zo-mini-kicker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(47, 143, 91, 0.08);
  color: var(--zo-green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.zo-current-zikir-spotlight h2 {
  margin: 10px 0 5px;
  color: var(--zo-dark-green);
  font-size: clamp(24px, 2.5vw, 30px);
  line-height: 1.12;
}

.zo-current-zikir-spotlight p {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  color: var(--zo-muted);
  font-size: 14px;
}

.zo-current-zikir-spotlight p strong {
  color: var(--zo-dark-green);
  font-size: 15px;
}

.zo-progress-wrap {
  margin-top: 8px;
}

.zo-progress-ring {
  box-shadow: inset 0 0 0 1px rgba(214, 178, 74, .18), 0 16px 40px rgba(23, 45, 36, .06);
}

.zo-counter-actions-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.zo-live-zikir-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  background: linear-gradient(180deg, rgba(47,143,91,.11), rgba(47,143,91,.07));
  border: 1px solid rgba(47,143,91,.15);
  border-radius: 999px;
  color: var(--zo-dark-green);
  font-size: 13px;
  font-weight: 800;
}

.zo-live-zikir-pill .zo-svg-icon {
  width: 16px;
  height: 16px;
  color: var(--zo-gold);
}

.zo-counter-actions {
  margin-top: 0;
}

.zo-action-btn,
.zo-plus-btn {
  box-sizing: border-box;
}

.zo-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.zo-zikir-select-card {
  padding: 18px 18px 16px;
}

.zo-zikir-list {
  max-height: 300px;
}

.zo-zikir-list-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.zo-soft-btn {
  flex: 1 1 auto;
  min-height: 44px;
  border-radius: 14px;
  border: 1px dashed rgba(47, 143, 91, .28);
  background: rgba(255,255,255,.65);
  color: var(--zo-dark-green);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}

.zo-soft-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(47, 143, 91, .42);
}

.zo-soft-btn.is-danger {
  border-style: solid;
  border-color: rgba(180, 72, 72, .18);
  color: #8a3d3d;
}

.zo-progress-insight-card {
  padding: 18px;
}

.zo-progress-insight-body {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
}

.zo-vertical-progress {
  --zo-side-progress: 0%;
  position: relative;
  width: 22px;
  min-height: 180px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(214,178,74,.14), rgba(47,143,91,.08));
  border: 1px solid rgba(47,143,91,.12);
  overflow: hidden;
  justify-self: center;
}

.zo-vertical-progress-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--zo-side-progress);
  background: linear-gradient(180deg, var(--zo-gold), var(--zo-green));
  border-radius: inherit;
}

.zo-insight-content {
  display: grid;
  gap: 14px;
}

.zo-insight-main {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.zo-insight-main strong {
  font-size: 34px;
  line-height: 1;
  color: var(--zo-dark-green);
}

.zo-insight-main small {
  color: var(--zo-muted);
}

.zo-insight-mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.zo-insight-mini-grid div {
  min-height: 76px;
  border-radius: 16px;
  border: 1px solid rgba(227, 215, 188, .88);
  background: rgba(255,255,255,.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 12px;
}

.zo-insight-mini-grid b {
  display: block;
  color: var(--zo-dark-green);
  font-size: 22px;
  line-height: 1;
  margin-bottom: 6px;
}

.zo-insight-mini-grid span {
  color: var(--zo-muted);
  font-size: 12px;
  font-weight: 700;
}

.zo-room-cta-card {
  min-height: 150px;
}

.zo-prayer-note {
  max-width: 540px;
  margin: 14px auto 6px;
}

@media (max-width: 820px) {
  .zo-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .zo-side-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .zo-zikir-select-card,
  .zo-progress-insight-card {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .zo-main-header h1 {
    font-size: 31px;
  }

  .zo-dashboard-grid {
    gap: 14px;
  }

  .zo-counter-card {
    padding: 18px 14px 18px;
  }

  .zo-zikir-list-actions {
    flex-direction: column;
  }

  .zo-progress-insight-body {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .zo-vertical-progress {
    min-height: 148px;
    width: 18px;
  }

  .zo-insight-main strong {
    font-size: 28px;
  }
}

/* ===== v0.5 simplification & layout tightening ===== */
.zo-page-wrap,
.zo-app-shell {
  max-width: var(--zo-container-max, 1300px);
  margin-left: auto;
  margin-right: auto;
}

.zo-app-shell {
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 18px;
}

.zo-main-panel {
  max-width: 100%;
}

.zo-main-header {
  margin: 0 0 12px;
}

.zo-main-header h1 {
  font-size: clamp(30px, 3.1vw, 44px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 6px 0 6px;
}

.zo-main-header p {
  font-size: 15px;
  max-width: 620px;
}

.zo-greeting {
  gap: 8px;
  margin-bottom: 2px;
}

.zo-greeting small {
  font-size: 12px;
}

.zo-header-actions {
  margin-top: 4px;
}

.zo-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 18px;
  align-items: start;
}

.zo-side-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-content: start;
}

.zo-counter-card {
  min-height: 0;
  padding: 18px 20px 16px;
}

.zo-card-title-row {
  margin-bottom: 12px;
}

.zo-current-zikir {
  font-size: 15px;
}

.zo-target-chips {
  gap: 10px;
}

.zo-target-chips button {
  min-height: 54px;
}

.zo-custom-zikir-inline {
  margin: 12px auto 10px;
  max-width: 520px;
}

.zo-custom-zikir-inline label {
  display: block;
  margin-bottom: 8px;
  color: var(--zo-dark-green);
  font-size: 13px;
  font-weight: 800;
}

.zo-custom-zikir-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px;
  gap: 10px;
}

.zo-custom-zikir-row input {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(214, 178, 74, .36);
  background: rgba(255,255,255,.88);
  padding: 0 16px;
  font-size: 14px;
  color: var(--zo-dark-green);
  outline: none;
}

.zo-custom-zikir-row input:focus {
  border-color: rgba(47,143,91,.45);
  box-shadow: 0 0 0 4px rgba(47,143,91,.08);
}

.zo-custom-zikir-row .zo-soft-btn {
  min-height: 48px;
  border-style: solid;
  background: rgba(47,143,91,.08);
}

.zo-current-zikir-spotlight {
  margin: 6px auto 8px;
}

.zo-current-zikir-spotlight h2 {
  font-size: clamp(22px, 2.2vw, 28px);
}

.zo-progress-wrap {
  margin-top: 2px;
}

.zo-progress-ring {
  width: min(310px, 72vw);
  height: min(310px, 72vw);
}

.zo-tap-note {
  margin-top: 10px;
}

.zo-remaining {
  margin-top: 6px;
}

.zo-counter-actions-wrap {
  gap: 10px;
}

.zo-counter-actions {
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
  justify-content: center;
}

.zo-prayer-note,
.zo-storage-note {
  text-align: center;
}

.zo-zikir-select-card,
.zo-progress-insight-card {
  padding: 16px;
}

.zo-zikir-list {
  max-height: 280px;
}

.zo-zikir-list button {
  min-height: 48px;
}

.zo-progress-insight-card {
  min-height: 260px;
}

.zo-progress-insight-body {
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 16px;
}

.zo-vertical-progress {
  width: 20px;
  min-height: 190px;
}

.zo-insight-content {
  gap: 12px;
}

.zo-insight-main {
  align-items: center;
}

.zo-insight-main strong {
  font-size: 32px;
}

.zo-insight-mini-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.zo-insight-mini-grid div {
  min-height: 70px;
}

.zo-sidebar {
  padding-bottom: 16px;
}

.zo-side-nav .zo-side-cta {
  margin-top: 6px;
  background: linear-gradient(135deg, #0F2A22 0%, #1d4a3d 100%);
  color: #fff;
  box-shadow: 0 14px 30px rgba(15,42,34,.14);
}

.zo-side-nav .zo-side-cta .zo-svg-icon {
  color: #D6B24A;
}

.zo-sidebar-daily {
  margin-top: 12px;
}

@media (max-width: 1360px) {
  .zo-page-wrap,
  .zo-app-shell {
    max-width: 1240px;
  }
  .zo-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) 390px;
  }
}

@media (max-width: 820px) {
  .zo-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .zo-side-stack {
    grid-template-columns: 1fr 1fr;
  }
  .zo-progress-insight-card {
    min-height: 0;
  }
}

@media (max-width: 860px) {
  .zo-side-stack {
    grid-template-columns: 1fr;
  }
  .zo-custom-zikir-row {
    grid-template-columns: 1fr;
  }
  .zo-progress-ring {
    width: min(280px, 78vw);
    height: min(280px, 78vw);
  }
}

/* ===== v0.6 layout polish ===== */
html, body {
  background: linear-gradient(180deg, #f8f3e7 0%, #f3ecdc 100%);
}

.zo-page-wrap {
  width: 100%;
  max-width: none;
  background:
    radial-gradient(circle at 92% 7%, rgba(214,178,74,.08), transparent 18%),
    radial-gradient(circle at 7% 5%, rgba(47,143,91,.06), transparent 20%),
    linear-gradient(180deg, #fbf7ee 0%, #f8f3e7 100%);
}

.zo-app-shell {
  max-width: var(--zo-container-max, 1300px);
  width: 100%;
  padding: 18px 18px 20px;
  margin: 0 auto;
  grid-template-columns: 198px minmax(0, 1fr);
  gap: 18px;
}

.zo-sidebar {
  padding: 16px 14px;
  min-height: calc(100vh - 36px);
}

.zo-sidebar-brand {
  margin-bottom: 12px;
}

.zo-sidebar-brand img {
  max-width: 138px;
}

.zo-side-nav {
  gap: 7px;
}

.zo-side-nav a {
  min-height: 46px;
  padding: 0 14px;
}

.zo-side-nav .zo-side-cta {
  margin-top: 4px;
}

.zo-main-panel {
  padding-top: 2px;
}

.zo-main-header {
  margin: 0 0 10px;
}

.zo-main-header h1 {
  font-size: clamp(32px, 3vw, 42px);
  margin: 4px 0 4px;
}

.zo-main-header p {
  font-size: 14px;
  max-width: 620px;
}

.zo-greeting {
  margin-bottom: 0;
}

.zo-dashboard-grid {
  grid-template-columns: minmax(560px, 1fr) 375px;
  gap: 16px;
  align-items: start;
}

.zo-counter-card {
  padding: 16px 18px 14px;
}

.zo-card-title-row {
  align-items: center;
  margin-bottom: 12px;
}

.zo-card-helper {
  font-size: 12px;
  font-weight: 700;
  color: var(--zo-muted);
}

.zo-target-chips {
  gap: 8px;
}

.zo-target-chips button {
  min-height: 50px;
}

.zo-custom-zikir-inline {
  margin: 10px auto 8px;
  max-width: 540px;
}

.zo-custom-zikir-inline label {
  font-size: 12px;
  margin-bottom: 6px;
}

.zo-custom-zikir-row {
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 8px;
}

.zo-custom-zikir-row input,
.zo-custom-zikir-row .zo-soft-btn {
  min-height: 44px;
}

.zo-current-zikir-spotlight {
  max-width: 100%;
  margin: 6px auto 6px;
}

.zo-mini-kicker {
  padding: 6px 10px;
  font-size: 12px;
}

.zo-current-zikir-spotlight h2 {
  font-size: clamp(28px, 3vw, 38px);
  margin: 8px 0 2px;
}

.zo-current-zikir-spotlight p {
  font-size: 15px;
}

.zo-progress-wrap {
  margin-top: 4px;
}

.zo-progress-ring {
  width: 270px;
  height: 270px;
}

.zo-progress-inner strong {
  font-size: 68px;
}

.zo-progress-inner span {
  font-size: 15px;
}

.zo-tap-note {
  margin-top: 8px;
  font-size: 13px;
}

.zo-remaining {
  margin-top: 4px;
  font-size: 16px;
}

.zo-live-zikir-pill {
  min-height: 38px;
  padding: 0 14px;
}

.zo-counter-actions {
  max-width: 340px;
  gap: 10px;
}

.zo-action-btn {
  min-height: 50px;
}

.zo-plus-btn {
  width: 64px;
  height: 64px;
}

.zo-prayer-note {
  margin: 12px auto 4px;
}

.zo-storage-note {
  margin-top: 0;
  font-size: 12px;
}

.zo-side-stack {
  gap: 14px;
}

.zo-zikir-select-card,
.zo-progress-insight-card,
.zo-quick-link-card {
  padding: 14px;
  border-radius: 24px;
}

.zo-zikir-search-wrap input {
  min-height: 44px;
}

.zo-zikir-list {
  max-height: 174px;
  overflow-y: auto;
  padding-right: 4px;
}

.zo-zikir-list button {
  min-height: 48px;
  margin-bottom: 8px;
}

.zo-zikir-list button:last-child {
  margin-bottom: 0;
}

.zo-progress-insight-card {
  min-height: 0;
}

.zo-progress-insight-body {
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 14px;
}

.zo-vertical-progress {
  width: 18px;
  min-height: 150px;
}

.zo-insight-main strong {
  font-size: 24px;
}

.zo-insight-main small {
  font-size: 13px;
}

.zo-insight-mini-grid {
  gap: 8px;
}

.zo-insight-mini-grid div {
  min-height: 60px;
  padding: 10px 12px;
}

.zo-insight-mini-grid b {
  font-size: 18px;
  margin-bottom: 4px;
}

.zo-insight-mini-grid span {
  font-size: 12px;
}

.zo-quick-link-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, rgba(15,42,34,.04), rgba(214,178,74,.12));
}

.zo-quick-link-card h3 {
  margin: 6px 0 6px;
  color: var(--zo-dark-green);
  font-size: 28px;
  line-height: 1.1;
}

.zo-quick-link-card p {
  margin: 0;
  color: var(--zo-muted);
  font-size: 14px;
}

.zo-quick-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 14px;
  background: var(--zo-dark-green);
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(15,42,34,.12);
}

.zo-mobile-support-grid {
  display: none;
}

@media (max-width: 1320px) {
  .zo-app-shell {
    max-width: 1260px;
  }
  .zo-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) 360px;
  }
}

@media (max-width: 820px) {
  .zo-app-shell {
    grid-template-columns: 1fr;
    max-width: 980px;
  }

  .zo-sidebar {
    min-height: auto;
  }

  .zo-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .zo-side-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .zo-zikir-list {
    max-height: 174px;
  }
}

@media (max-width: 920px) {
  .zo-side-stack {
    grid-template-columns: 1fr;
  }

  .zo-quick-link-card {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .zo-quick-link-btn {
    width: fit-content;
  }
}

@media (max-width: 760px) {
  .zo-app-shell {
    padding: 14px 12px 84px;
  }

  .zo-main-header h1 {
    font-size: 30px;
  }

  .zo-target-chips {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .zo-progress-ring {
    width: min(248px, 78vw);
    height: min(248px, 78vw);
  }

  .zo-progress-inner strong {
    font-size: 58px;
  }

  .zo-custom-zikir-row {
    grid-template-columns: 1fr;
  }

  .zo-zikir-list {
    max-height: 168px;
  }
}

/* ===== v0.7 desktop polish / unified shell ===== */
html, body {
  background: #F8F3E7 !important;
}

.zo-page-wrap {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  background:
    radial-gradient(circle at 88% 8%, rgba(214,178,74,.07), transparent 22%),
    radial-gradient(circle at 8% 10%, rgba(47,143,91,.055), transparent 24%),
    linear-gradient(180deg, #F8F3E7 0%, #F8F3E7 100%) !important;
}

.zo-app-shell {
  max-width: var(--zo-container-max, 1300px) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 18px 18px 22px !important;
  grid-template-columns: 198px minmax(0, 1fr) !important;
  gap: 18px !important;
  background: transparent !important;
  align-items: start !important;
}

.zo-main-panel {
  width: 100% !important;
  max-width: none !important;
  padding-top: 0 !important;
}

/* Sidebar compact CTA stack */
.zo-sidebar {
  padding: 16px 14px !important;
  min-height: calc(100vh - 36px) !important;
  border-radius: 24px !important;
}

.zo-sidebar-brand {
  min-height: auto !important;
  margin-bottom: 12px !important;
}

.zo-sidebar-brand img {
  max-width: 138px !important;
}

.zo-side-nav {
  gap: 7px !important;
}

.zo-side-nav a {
  min-height: 44px !important;
  padding: 0 13px !important;
  border-radius: 13px !important;
}

.zo-side-nav .zo-side-cta {
  margin-top: 3px !important;
}

.zo-sidebar-room-card {
  margin-top: 14px;
  padding: 15px 14px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 18%, rgba(214,178,74,.28), transparent 34%),
    linear-gradient(135deg, rgba(255,253,247,.92), rgba(246,231,186,.72));
  border: 1px solid rgba(214,178,74,.27);
  box-shadow: 0 14px 34px rgba(15,42,34,.07);
}

.zo-sidebar-room-card h3 {
  margin: 8px 0 7px;
  color: var(--zo-dark-green);
  font-size: 17px;
  line-height: 1.15;
}

.zo-sidebar-room-card p {
  margin: 0 0 12px;
  color: #62685f;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 650;
}

.zo-sidebar-room-card .zo-btn-small {
  min-height: 40px;
  padding-inline: 16px;
  border-radius: 13px;
}

.zo-sidebar-daily {
  margin-top: 12px !important;
  padding: 15px 14px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 90% 10%, rgba(47,143,91,.12), transparent 32%),
    rgba(255,253,247,.86) !important;
  border: 1px solid rgba(232,221,200,.78) !important;
}

.zo-sidebar-daily h3 {
  margin: 7px 0 7px !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
}

.zo-sidebar-daily p {
  font-size: 12px !important;
  line-height: 1.46 !important;
  -webkit-line-clamp: 2 !important;
}

/* Header */
.zo-main-header {
  margin: 0 0 10px !important;
  min-height: 78px !important;
  align-items: start !important;
}

.zo-greeting {
  margin-bottom: 0 !important;
  gap: 8px !important;
}

.zo-greeting strong {
  font-size: 12px !important;
}

.zo-greeting small {
  font-size: 12px !important;
}

.zo-main-header h1 {
  font-size: clamp(30px, 2.8vw, 40px) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.035em !important;
  margin: 4px 0 4px !important;
}

.zo-main-header p {
  max-width: 640px !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

.zo-header-actions {
  margin-top: 3px !important;
}

/* Grid */
.zo-dashboard-grid {
  grid-template-columns: minmax(0, 1fr) 360px !important;
  gap: 16px !important;
  align-items: start !important;
}

.zo-side-stack {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  align-content: start !important;
}

/* Main counter card */
.zo-counter-card {
  padding: 16px 18px 14px !important;
  border-radius: 26px !important;
  min-height: auto !important;
}

.zo-card-title-row {
  margin-bottom: 10px !important;
}

.zo-card-title {
  font-size: 18px !important;
}

.zo-card-helper {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--zo-muted) !important;
}

.zo-target-chips {
  gap: 8px !important;
  margin-bottom: 8px !important;
}

.zo-target-chips button {
  min-height: 46px !important;
  border-radius: 13px !important;
}

/* Minimal custom zikr input */
.zo-custom-zikir-inline {
  max-width: 438px !important;
  margin: 8px auto 8px !important;
}

.zo-custom-zikir-inline label {
  display: none !important;
}

.zo-custom-zikir-row {
  grid-template-columns: minmax(0, 1fr) 82px !important;
  gap: 8px !important;
}

.zo-custom-zikir-row input {
  min-height: 40px !important;
  border-radius: 13px !important;
  padding: 0 13px !important;
  font-size: 13px !important;
  background: rgba(255,253,247,.82) !important;
}

.zo-custom-zikir-row .zo-soft-btn {
  min-height: 40px !important;
  border-radius: 13px !important;
  font-size: 12px !important;
  background: rgba(47,143,91,.09) !important;
}

/* Selected zikr focus */
.zo-current-zikir-spotlight {
  margin: 8px auto 5px !important;
}

.zo-mini-kicker {
  padding: 5px 10px !important;
  font-size: 12px !important;
}

.zo-current-zikir-spotlight h2 {
  font-size: clamp(30px, 3.2vw, 42px) !important;
  margin: 8px 0 2px !important;
  line-height: 1.05 !important;
}

.zo-current-zikir-spotlight p {
  font-size: 15px !important;
}

/* Counter ring */
.zo-progress-ring {
  width: 265px !important;
  height: 265px !important;
}

.zo-progress-inner strong {
  font-size: 66px !important;
}

.zo-tap-note {
  margin-top: 8px !important;
  font-size: 12px !important;
}

.zo-remaining {
  margin-top: 3px !important;
  font-size: 15px !important;
}

.zo-live-zikir-pill {
  min-height: 36px !important;
  padding: 0 13px !important;
  font-size: 12px !important;
}

.zo-counter-actions {
  max-width: 330px !important;
  gap: 10px !important;
}

.zo-action-btn {
  min-height: 48px !important;
}

.zo-plus-btn {
  width: 62px !important;
  height: 62px !important;
}

.zo-prayer-note {
  margin: 11px auto 3px !important;
  font-size: 12px !important;
}

.zo-storage-note {
  margin-top: 0 !important;
  font-size: 12px !important;
}

/* Right rail cards */
.zo-zikir-select-card,
.zo-progress-insight-card,
.zo-quick-link-card {
  padding: 14px !important;
  border-radius: 24px !important;
}

.zo-zikir-select-card .zo-card-title-row {
  margin-bottom: 10px !important;
}

.zo-zikir-search-wrap {
  margin-bottom: 10px !important;
}

.zo-zikir-search-wrap input {
  min-height: 42px !important;
  border-radius: 14px !important;
}

/* Zikir list: no icons, less gaps */
.zo-zikir-list {
  max-height: 160px !important;
  overflow-y: auto !important;
  padding-right: 4px !important;
}

.zo-zikir-list button {
  min-height: 44px !important;
  margin-bottom: 7px !important;
  padding: 0 14px !important;
  border-radius: 13px !important;
  display: flex !important;
  justify-content: flex-start !important;
}

.zo-zikir-list button .zo-svg-icon {
  display: none !important;
}

.zo-zikir-list button span {
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}

.zo-zikir-list button.is-active {
  box-shadow: 0 12px 22px rgba(47,143,91,.16) !important;
}

/* Progress card compact */
.zo-progress-insight-body {
  grid-template-columns: 18px minmax(0, 1fr) !important;
  gap: 13px !important;
}

.zo-vertical-progress {
  width: 18px !important;
  min-height: 142px !important;
}

.zo-insight-main strong {
  font-size: 24px !important;
}

.zo-insight-mini-grid {
  gap: 8px !important;
}

.zo-insight-mini-grid div {
  min-height: 58px !important;
  padding: 10px 11px !important;
  border-radius: 14px !important;
}

.zo-insight-mini-grid b {
  font-size: 18px !important;
  margin-bottom: 3px !important;
}

.zo-insight-mini-grid span {
  font-size: 12px !important;
}

/* Wizard card redesign */
.zo-quick-link-card.zo-wizard-card {
  position: relative;
  overflow: hidden;
  min-height: 154px;
  display: grid !important;
  grid-template-columns: 1fr !important;
  align-items: start !important;
  gap: 12px !important;
  background:
    radial-gradient(circle at 94% 8%, rgba(214,178,74,.26), transparent 32%),
    radial-gradient(circle at 0% 100%, rgba(47,143,91,.10), transparent 38%),
    linear-gradient(135deg, rgba(255,253,247,.98), rgba(248,243,231,.98)) !important;
}

.zo-quick-link-card.zo-wizard-card::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -32px;
  width: 126px;
  height: 126px;
  border-radius: 50%;
  border: 1px solid rgba(214,178,74,.28);
  background: rgba(214,178,74,.08);
  pointer-events: none;
}

.zo-wizard-copy {
  position: relative;
  z-index: 1;
}

.zo-quick-link-card h3 {
  margin: 6px 0 6px !important;
  color: var(--zo-dark-green) !important;
  font-size: 23px !important;
  line-height: 1.1 !important;
}

.zo-quick-link-card p {
  max-width: 260px;
  font-size: 12px !important;
  line-height: 1.45 !important;
  color: #62685f !important;
}

.zo-quick-link-btn {
  position: relative;
  z-index: 1;
  width: fit-content !important;
  min-width: 128px !important;
  min-height: 42px !important;
  border-radius: 13px !important;
  background: var(--zo-dark-green) !important;
  color: #fff !important;
  font-size: 13px !important;
  box-shadow: 0 14px 26px rgba(15,42,34,.14) !important;
}

/* remove mobile duplicated helper on desktop */
.zo-mobile-support-grid {
  display: none !important;
}

@media (max-width: 820px) {
  .zo-app-shell {
    grid-template-columns: 1fr !important;
    max-width: 980px !important;
  }

  .zo-dashboard-grid {
    grid-template-columns: 1fr !important;
  }

  .zo-side-stack {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 920px) {
  .zo-side-stack {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 760px) {
  .zo-app-shell {
    padding: 14px 12px 86px !important;
  }

  .zo-main-header h1 {
    font-size: 30px !important;
  }

  .zo-custom-zikir-row {
    grid-template-columns: 1fr !important;
  }

  .zo-progress-ring {
    width: min(248px, 78vw) !important;
    height: min(248px, 78vw) !important;
  }

  .zo-progress-inner strong {
    font-size: 58px !important;
  }

  .zo-zikir-list {
    max-height: 160px !important;
  }

  .zo-quick-link-card p {
    max-width: 100%;
  }
}

/* ===== v0.8 final desktop refinement ===== */

/* remove duplicated lower active-zikir pill and clean action rhythm */
.zo-live-zikir-pill {
  display: none !important;
}

.zo-counter-actions-wrap {
  gap: 8px !important;
}

.zo-counter-actions {
  margin-top: 4px !important;
}

/* selected zikr heading: still strong, less oversized */
.zo-current-zikir-spotlight {
  margin: 9px auto 6px !important;
}

.zo-mini-kicker {
  margin-bottom: 4px !important;
  padding: 5px 10px !important;
  letter-spacing: .075em !important;
}

.zo-current-zikir-spotlight h2 {
  font-size: clamp(27px, 2.72vw, 38px) !important;
  line-height: 1.06 !important;
  margin: 7px 0 2px !important;
}

.zo-current-zikir-spotlight p {
  font-size: 14px !important;
}

/* custom zikr helper: smaller, less dominant */
.zo-custom-zikir-inline {
  max-width: 398px !important;
  margin: 7px auto 8px !important;
}

.zo-custom-zikir-row {
  grid-template-columns: minmax(0, 1fr) 76px !important;
  gap: 7px !important;
}

.zo-custom-zikir-row input,
.zo-custom-zikir-row .zo-soft-btn {
  min-height: 38px !important;
  border-radius: 12px !important;
}

.zo-custom-zikir-row input {
  font-size: 12px !important;
  padding-inline: 12px !important;
}

.zo-custom-zikir-row .zo-soft-btn {
  font-size: 12px !important;
  padding-inline: 10px !important;
}

/* zikir select: less gap, cleaner item rhythm */
.zo-zikir-select-card {
  padding: 13px 13px 12px !important;
}

.zo-zikir-select-card .zo-card-title-row {
  margin-bottom: 8px !important;
}

.zo-zikir-search-wrap {
  margin-bottom: 8px !important;
}

.zo-zikir-search-wrap input {
  min-height: 40px !important;
}

.zo-zikir-list {
  max-height: 148px !important;
  padding-right: 3px !important;
}

.zo-zikir-list button {
  min-height: 41px !important;
  margin-bottom: 5px !important;
  padding: 0 13px !important;
  border-radius: 12px !important;
}

.zo-zikir-list button span {
  font-size: 12.5px !important;
}

.zo-zikir-list button.is-active {
  box-shadow: 0 10px 20px rgba(47,143,91,.13) !important;
}

/* sidebar: remove duplicate CTA from menu, make sidebar cards more intentional */
.zo-side-nav a {
  min-height: 43px !important;
}

.zo-sidebar-room-card {
  margin-top: 12px !important;
  padding: 16px 14px 15px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(214,178,74,.34), transparent 32%),
    linear-gradient(145deg, rgba(255,253,247,.95), rgba(247,231,185,.78)) !important;
}

.zo-sidebar-room-card h3 {
  font-size: 17px !important;
  margin: 7px 0 7px !important;
}

.zo-sidebar-room-card p {
  font-size: 12px !important;
  line-height: 1.42 !important;
  margin-bottom: 11px !important;
}

.zo-sidebar-room-card .zo-btn-small {
  min-height: 38px !important;
  border-radius: 12px !important;
  padding-inline: 15px !important;
}

.zo-sidebar-daily {
  margin-top: 12px !important;
  padding: 16px 14px !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 90% 8%, rgba(47,143,91,.13), transparent 35%),
    linear-gradient(145deg, rgba(255,253,247,.94), rgba(241,247,238,.72)) !important;
}

.zo-sidebar-daily h3 {
  font-size: 18px !important;
}

.zo-sidebar-daily .zo-btn-small {
  min-height: 38px !important;
  border-radius: 12px !important;
}

/* wizard card: stronger hierarchy, cleaner CTA */
.zo-quick-link-card.zo-wizard-card {
  min-height: 162px !important;
  padding: 16px !important;
  border-radius: 24px !important;
  align-content: space-between !important;
  background:
    radial-gradient(circle at 92% 105%, rgba(214,178,74,.18), transparent 34%),
    radial-gradient(circle at 3% 100%, rgba(47,143,91,.08), transparent 38%),
    linear-gradient(140deg, rgba(255,253,247,.99), rgba(249,241,217,.92)) !important;
}

.zo-quick-link-card.zo-wizard-card::after {
  right: -34px !important;
  bottom: -38px !important;
  width: 118px !important;
  height: 118px !important;
  border-color: rgba(214,178,74,.22) !important;
  background: rgba(214,178,74,.055) !important;
}

.zo-quick-link-card h3 {
  font-size: 22px !important;
  margin: 5px 0 6px !important;
}

.zo-quick-link-card p {
  max-width: 285px !important;
  font-size: 12px !important;
  line-height: 1.43 !important;
}

.zo-quick-link-btn {
  min-width: 122px !important;
  min-height: 40px !important;
  border-radius: 12px !important;
  font-size: 12.5px !important;
  box-shadow: 0 11px 22px rgba(15,42,34,.13) !important;
}

/* progress card typography: slightly better balance */
.zo-progress-insight-card {
  padding: 14px !important;
}

.zo-progress-insight-card .zo-card-title-row {
  margin-bottom: 10px !important;
}

.zo-progress-insight-body {
  gap: 12px !important;
}

.zo-vertical-progress {
  min-height: 140px !important;
}

.zo-insight-main strong {
  font-size: 25px !important;
}

.zo-insight-mini-grid div {
  min-height: 56px !important;
  border-radius: 13px !important;
}

/* bottom alignment: make center and right rail finish in the same visual lane on desktop */
@media (min-width: 1181px) {
  .zo-dashboard-grid {
    align-items: stretch !important;
  }

  .zo-side-stack {
    height: 100% !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  .zo-quick-link-card.zo-wizard-card {
    min-height: 0 !important;
  }

  .zo-counter-card {
    height: 100% !important;
  }
}

/* top icon boxes slightly quieter */
.zo-header-actions button,
.zo-mobile-top-actions .zo-icon-btn {
  width: 41px !important;
  height: 41px !important;
  border-radius: 13px !important;
  box-shadow: 0 10px 22px rgba(15,42,34,.07) !important;
}

/* keep mobile safe */
@media (max-width: 760px) {
  .zo-custom-zikir-row {
    grid-template-columns: 1fr !important;
  }

  .zo-current-zikir-spotlight h2 {
    font-size: 28px !important;
  }

  .zo-zikir-list {
    max-height: 150px !important;
  }
}


/* ===== v0.9 refinement pass ===== */

/* Global visual consistency */
.zo-shell,
.zo-dashboard-grid,
.zo-sidebar,
.zo-counter-card,
.zo-zikir-select-card,
.zo-progress-insight-card,
.zo-quick-link-card,
.zo-sidebar-room-card,
.zo-sidebar-daily {
  box-sizing: border-box;
}

/* Main heading: roughly 30% smaller */
.zo-main-header h1 {
  font-size: clamp(25px, 2.1vw, 34px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.04em !important;
  margin: 0 0 8px !important;
}

.zo-main-header p {
  font-size: 15px !important;
  line-height: 1.55 !important;
  max-width: 620px !important;
}

/* Sidebar structure: cards sit better and bottom edge feels complete */
.zo-sidebar {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100% !important;
  padding-bottom: 16px !important;
  border-radius: 28px !important;
}

.zo-sidebar-brand {
  margin-bottom: 8px !important;
}

.zo-side-nav {
  margin-bottom: 10px !important;
}

.zo-side-nav a {
  min-height: 42px !important;
  gap: 10px !important;
  padding: 0 14px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
}

.zo-side-nav a i {
  width: 18px !important;
  min-width: 18px !important;
  text-align: center !important;
  font-size: 15px !important;
  color: currentColor !important;
}

.zo-sidebar-room-card {
  margin-top: 4px !important;
  padding: 18px 16px 16px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 96% 10%, rgba(214,178,74,.28), transparent 34%),
    linear-gradient(145deg, rgba(255,253,247,.98), rgba(248,238,203,.92)) !important;
  box-shadow: inset 0 0 0 1px rgba(214,178,74,.20) !important;
}

.zo-sidebar-room-card .zo-card-kicker {
  margin-bottom: 8px !important;
  font-size: 12px !important;
  letter-spacing: .15em !important;
}

.zo-sidebar-room-card h3 {
  font-size: 18px !important;
  line-height: 1.18 !important;
  margin: 0 0 8px !important;
  max-width: 150px !important;
}

.zo-sidebar-room-card p {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  margin: 0 0 12px !important;
  max-width: 165px !important;
}

.zo-sidebar-room-card .zo-btn-small {
  min-height: 40px !important;
  border-radius: 13px !important;
}

.zo-sidebar-daily {
  margin-top: auto !important;
  padding: 18px 16px 16px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at 94% 12%, rgba(47,143,91,.11), transparent 34%),
    linear-gradient(145deg, rgba(255,253,247,.98), rgba(240,248,239,.94)) !important;
  box-shadow: inset 0 0 0 1px rgba(47,143,91,.12) !important;
}

.zo-sidebar-daily .zo-card-kicker {
  margin-bottom: 7px !important;
  font-size: 12px !important;
  letter-spacing: .15em !important;
}

.zo-sidebar-daily h3 {
  font-size: 17px !important;
  line-height: 1.18 !important;
  margin: 0 0 8px !important;
}

.zo-sidebar-daily p {
  display: block !important;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: unset !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  max-height: none !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  margin: 0 0 10px !important;
}

.zo-sidebar-daily small {
  display: block !important;
  margin-bottom: 12px !important;
}

.zo-sidebar-daily .zo-btn-small {
  min-height: 40px !important;
  border-radius: 13px !important;
}

/* Main counter card and title balance */
.zo-counter-card .zo-card-head {
  margin-bottom: 10px !important;
}

.zo-counter-card .zo-card-head strong {
  font-size: 16px !important;
}

.zo-current-zikir-spotlight h2 {
  font-size: clamp(25px, 2.25vw, 36px) !important;
  line-height: 1.07 !important;
  margin: 7px 0 2px !important;
}

/* Custom zikr row: slightly tighter */
.zo-custom-zikir-inline {
  max-width: 370px !important;
  margin: 8px auto 10px !important;
}

.zo-custom-zikir-row {
  grid-template-columns: minmax(0, 1fr) 70px !important;
  gap: 6px !important;
}

.zo-custom-zikir-row input,
.zo-custom-zikir-row .zo-soft-btn {
  min-height: 36px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
}

/* Zikir select card: reduce vertical waste */
.zo-zikir-select-card {
  padding: 12px !important;
  border-radius: 24px !important;
}

.zo-zikir-select-card .zo-card-title-row {
  margin-bottom: 8px !important;
}

.zo-zikir-select-card .zo-card-title-row strong {
  font-size: 16px !important;
}

.zo-zikir-search-wrap {
  margin-bottom: 7px !important;
}

.zo-zikir-search-wrap input {
  min-height: 38px !important;
  border-radius: 13px !important;
  font-size: 13px !important;
}

.zo-zikir-list {
  max-height: 136px !important;
  gap: 0 !important;
  padding-right: 2px !important;
}

.zo-zikir-list button {
  min-height: 39px !important;
  margin-bottom: 4px !important;
  padding: 0 13px !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.zo-zikir-list button span,
.zo-zikir-list button {
  font-size: 12.5px !important;
  line-height: 1.2 !important;
}

.zo-zikir-list button:last-child {
  margin-bottom: 0 !important;
}

/* Right rail cards */
.zo-progress-insight-card,
.zo-quick-link-card.zo-wizard-card {
  border-radius: 24px !important;
}

.zo-progress-insight-card {
  padding: 14px !important;
}

.zo-quick-link-card.zo-wizard-card {
  min-height: 170px !important;
  padding: 16px !important;
  background:
    radial-gradient(circle at 96% 100%, rgba(214,178,74,.16), transparent 35%),
    linear-gradient(145deg, rgba(255,253,247,.98), rgba(248,240,214,.9)) !important;
}

.zo-quick-link-card .zo-card-kicker {
  margin-bottom: 8px !important;
  font-size: 12px !important;
  letter-spacing: .15em !important;
}

.zo-quick-link-card h3 {
  font-size: 18px !important;
  line-height: 1.2 !important;
  margin: 0 0 7px !important;
}

.zo-quick-link-card p {
  max-width: 255px !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
}

.zo-quick-link-btn {
  min-width: 116px !important;
  min-height: 40px !important;
  border-radius: 13px !important;
}

/* Better full-column rhythm on desktop */
@media (min-width: 1181px) {
  .zo-dashboard-grid {
    align-items: stretch !important;
  }

  .zo-sidebar {
    height: 100% !important;
  }
}

/* Mobile safety */
@media (max-width: 760px) {
  .zo-main-header h1 {
    font-size: 28px !important;
  }
  .zo-sidebar-room-card,
  .zo-sidebar-daily {
    margin-top: 12px !important;
  }
  .zo-zikir-list {
    max-height: 145px !important;
  }
}


/* ===== v1.0 desktop finish / interaction pass ===== */

/* H1 stays Online Zikirmatik; keep it compact and secondary to counter */
.zo-main-header h1 {
  font-size: clamp(25px, 2.05vw, 34px) !important;
  line-height: 1.06 !important;
  letter-spacing: -0.04em !important;
}

/* Desktop height rhythm: sidebar, center card and right rail finish cleaner */
@media (min-width: 1181px) {
  .zo-app-shell {
    align-items: stretch !important;
  }

  .zo-sidebar {
    height: auto !important;
    min-height: 0 !important;
    border-radius: 28px !important;
  }

  .zo-main-panel {
    display: grid !important;
    grid-template-rows: auto 1fr !important;
    min-height: 0 !important;
  }

  .zo-dashboard-grid {
    height: 100% !important;
    align-items: stretch !important;
  }

  .zo-counter-card {
    height: 100% !important;
  }

  .zo-side-stack {
    height: 100% !important;
    grid-template-rows: auto auto minmax(0, 1fr) !important;
  }

  .zo-quick-link-card.zo-wizard-card {
    min-height: 0 !important;
  }
}

/* Font Awesome menu polish */
.zo-side-nav a i {
  width: 18px !important;
  min-width: 18px !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
  color: currentColor !important;
}

.zo-side-nav a {
  min-height: 41px !important;
  box-shadow: none !important;
}

.zo-side-nav a.is-active {
  box-shadow: 0 10px 22px rgba(47,143,91,.14) !important;
}

/* Room CTA: cleaner and less cramped */
.zo-sidebar-room-card h3 {
  font-size: 17px !important;
  line-height: 1.18 !important;
  max-width: 156px !important;
}

.zo-sidebar-room-card p {
  font-size: 12px !important;
  line-height: 1.45 !important;
  max-width: 162px !important;
}

/* Günün zikri: do not cut the verse */
.zo-sidebar-daily p {
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  max-height: none !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

/* Zikir select list: tighten vertical gaps more */
.zo-zikir-select-card {
  padding: 11px 12px 11px !important;
}

.zo-zikir-search-wrap {
  margin-bottom: 6px !important;
}

.zo-zikir-list {
  max-height: 126px !important;
}

.zo-zikir-list button {
  min-height: 37px !important;
  margin-bottom: 3px !important;
  border-radius: 11px !important;
}

.zo-zikir-list button span {
  font-size: 12px !important;
}

/* Meaning under selected zikr */
.zo-zikir-meaning {
  display: block;
  max-width: 460px;
  margin: 7px auto 0;
  color: rgba(15, 42, 34, .62);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
}

/* Button hover effects */
.zo-btn,
.zo-btn-small,
.zo-soft-btn,
.zo-action-btn,
.zo-plus-btn,
.zo-target-chips button,
.zo-header-actions button,
.zo-mobile-top-actions .zo-icon-btn,
.zo-zikir-list button,
.zo-quick-link-btn,
.zo-progress-button {
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    background .18s ease,
    color .18s ease,
    opacity .18s ease !important;
}

@media (hover: hover) {
  .zo-btn:hover,
  .zo-btn-small:hover,
  .zo-soft-btn:hover,
  .zo-action-btn:hover:not(:disabled),
  .zo-plus-btn:hover,
  .zo-target-chips button:hover,
  .zo-header-actions button:hover,
  .zo-mobile-top-actions .zo-icon-btn:hover,
  .zo-zikir-list button:hover,
  .zo-quick-link-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(15, 42, 34, .13) !important;
  }

  .zo-progress-button:hover .zo-progress-ring {
    transform: translateY(-1px) scale(1.01);
    box-shadow: inset 0 0 0 1px rgba(214,178,74,.2), 0 20px 48px rgba(23,45,36,.09) !important;
  }

  .zo-action-btn:hover:not(:disabled),
  .zo-soft-btn:hover,
  .zo-target-chips button:hover:not(.is-active) {
    border-color: rgba(47,143,91,.34) !important;
  }
}

.zo-action-btn:disabled,
.zo-action-btn[disabled] {
  pointer-events: none;
}

/* Counter spacing adjusted after meaning line */
.zo-current-zikir-spotlight {
  margin-bottom: 8px !important;
}

.zo-progress-wrap {
  margin-top: 2px !important;
}

/* Top right icons calmer */
.zo-header-actions button,
.zo-mobile-top-actions .zo-icon-btn {
  box-shadow: 0 8px 18px rgba(15,42,34,.055) !important;
}

/* Wizard card stays refined */
.zo-quick-link-card h3 {
  font-size: 18px !important;
}

.zo-quick-link-card p {
  font-size: 12px !important;
}

@media (max-width: 760px) {
  .zo-zikir-meaning {
    font-size: 12px;
    max-width: 92%;
  }
}


/* ===== v1.1 compact desktop finish ===== */

/* Compact the whole desktop view: no unnecessary vertical scroll on normal desktop screens */
@media (min-width: 1181px) {
  .zo-app-shell {
    align-items: start !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .zo-main-panel {
    display: block !important;
    min-height: 0 !important;
  }

  .zo-dashboard-grid {
    align-items: start !important;
    height: auto !important;
  }

  .zo-counter-card,
  .zo-sidebar,
  .zo-side-stack,
  .zo-quick-link-card.zo-wizard-card {
    height: auto !important;
    min-height: 0 !important;
  }

  .zo-side-stack {
    grid-template-rows: none !important;
  }
}

/* Sidebar: clean bottom radius without forced long blank area */
.zo-sidebar {
  align-self: start !important;
  border-radius: 26px !important;
  padding-bottom: 14px !important;
}

.zo-sidebar-daily {
  margin-top: 12px !important;
}

/* Sidebar menu refinement */
.zo-side-nav a {
  min-height: 40px !important;
  border-radius: 13px !important;
}

.zo-side-nav a.is-active {
  box-shadow: 0 9px 20px rgba(47,143,91,.12) !important;
}

/* Main card compact spacing */
.zo-counter-card {
  padding-top: 15px !important;
  padding-bottom: 13px !important;
}

.zo-target-chips {
  margin-bottom: 7px !important;
}

.zo-current-zikir-spotlight {
  margin-top: 7px !important;
  margin-bottom: 6px !important;
}

.zo-current-zikir-spotlight h2 {
  font-size: clamp(24px, 2.08vw, 34px) !important;
  margin-top: 6px !important;
}

.zo-zikir-meaning {
  margin-top: 6px !important;
  color: rgba(15,42,34,.64) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

.zo-progress-ring {
  width: 248px !important;
  height: 248px !important;
}

.zo-progress-inner strong {
  font-size: 60px !important;
}

.zo-tap-note {
  margin-top: 7px !important;
}

.zo-remaining {
  margin-top: 2px !important;
}

.zo-counter-actions {
  margin-top: 4px !important;
}

.zo-action-btn i {
  width: 16px !important;
  min-width: 16px !important;
  text-align: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.zo-plus-btn {
  width: 58px !important;
  height: 58px !important;
}

.zo-prayer-note {
  margin-top: 9px !important;
}

.zo-storage-note {
  font-size: 12px !important;
}

/* Right rail compact cards */
.zo-zikir-select-card {
  padding: 11px 12px 10px !important;
}

.zo-zikir-list {
  max-height: 116px !important;
}

.zo-zikir-list button {
  min-height: 34px !important;
  margin-bottom: 3px !important;
  padding: 0 12px !important;
}

.zo-progress-insight-card {
  padding: 13px !important;
}

.zo-vertical-progress {
  min-height: 128px !important;
}

.zo-insight-mini-grid div {
  min-height: 52px !important;
}

/* Zikir Sihirbazı compact */
.zo-quick-link-card.zo-wizard-card {
  min-height: 136px !important;
  padding: 14px !important;
}

.zo-quick-link-card h3 {
  font-weight: 850 !important;
  font-size: 17px !important;
}

.zo-quick-link-card p {
  font-size: 12px !important;
  line-height: 1.42 !important;
  max-width: 260px !important;
}

.zo-quick-link-btn {
  min-height: 38px !important;
}

/* Sidebar CTA and daily cards */
.zo-sidebar-room-card {
  padding: 16px 14px 14px !important;
  border-radius: 22px !important;
}

.zo-sidebar-room-card h3 {
  font-weight: 850 !important;
  font-size: 17px !important;
  line-height: 1.16 !important;
}

.zo-sidebar-room-card p {
  font-size: 12px !important;
  line-height: 1.42 !important;
}

.zo-sidebar-daily {
  padding: 16px 14px 14px !important;
  border-radius: 22px !important;
}

.zo-sidebar-daily h3 {
  font-size: 17px !important;
}

.zo-sidebar-daily p {
  font-size: 12px !important;
  line-height: 1.42 !important;
}

/* Hover enhancement: keep strong but elegant */
@media (hover: hover) {
  .zo-btn:hover,
  .zo-btn-small:hover,
  .zo-soft-btn:hover,
  .zo-action-btn:hover:not(:disabled),
  .zo-plus-btn:hover,
  .zo-target-chips button:hover,
  .zo-zikir-list button:hover,
  .zo-quick-link-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 13px 24px rgba(15,42,34,.12) !important;
  }
}

@media (max-width: 760px) {
  .zo-progress-ring {
    width: min(238px, 76vw) !important;
    height: min(238px, 76vw) !important;
  }

  .zo-current-zikir-spotlight h2 {
    font-size: 27px !important;
  }
}


/* ===== v1.2 final text/label refinement ===== */
.zo-sidebar-room-card h3 {
  font-weight: 900 !important;
  letter-spacing: -0.015em !important;
}

.zo-insight-mini-grid span {
  line-height: 1.2 !important;
  word-break: keep-all !important;
}

.zo-zikir-meaning {
  font-style: normal !important;
  letter-spacing: -0.005em !important;
}


/* ===== v1.3 background image + sidebar/logo polish ===== */

/* Full-width visual background test */
html,
body {
  background-color: #F8F3E7 !important;
}

.zo-app-shell {
  position: relative !important;
  isolation: isolate !important;
  background: transparent !important;
}

.zo-app-shell::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, rgba(248, 243, 231, 0.82) 0%, rgba(248, 243, 231, 0.76) 48%, rgba(248, 243, 231, 0.82) 100%),
    var(--zo-bg-image, none) center top / cover no-repeat !important;
}

.zo-app-shell > * {
  position: relative;
  z-index: 1;
}

/* Logo roughly +25% larger, without breaking sidebar */
.zo-sidebar-brand img {
  width: 172px !important;
  max-width: 100% !important;
  height: auto !important;
}

.zo-mobile-brand img {
  width: 122px !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Give logo a little room after enlargement */
.zo-sidebar-brand {
  margin-bottom: 12px !important;
}

/* Sidebar menu text slightly smaller */
.zo-side-nav a {
  font-size: 13px !important;
  line-height: 1.2 !important;
  min-height: 39px !important;
  gap: 9px !important;
}

.zo-side-nav a i {
  font-size: 13px !important;
  width: 17px !important;
  min-width: 17px !important;
}

/* Compact active item after logo growth */
.zo-side-nav a.is-active {
  box-shadow: 0 8px 18px rgba(47,143,91,.12) !important;
}

/* Reset button icon alignment safeguard */
.zo-action-btn[data-zo-reset] i,
.zo-action-btn[data-zo-undo] i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

@media (max-width: 760px) {
  .zo-app-shell::before {
    position: absolute !important;
    background:
      linear-gradient(180deg, rgba(248, 243, 231, 0.86) 0%, rgba(248, 243, 231, 0.78) 100%),
      var(--zo-bg-image, none) center top / cover no-repeat !important;
  }

  .zo-mobile-brand img {
    width: 120px !important;
  }
}

/* ===== v1.4 admin-controlled background + menu clarity ===== */
.zo-app-shell::before {
  background:
    linear-gradient(90deg, rgba(248, 243, 231, 0.82) 0%, rgba(248, 243, 231, 0.76) 48%, rgba(248, 243, 231, 0.82) 100%),
    var(--zo-bg-image, none) center top / cover no-repeat !important;
}

.zo-side-nav a[href*="zikir-sihirbazi"] span {
  letter-spacing: -0.015em;
}

@media (max-width: 760px) {
  .zo-app-shell::before {
    background:
      linear-gradient(180deg, rgba(248, 243, 231, 0.86) 0%, rgba(248, 243, 231, 0.78) 100%),
      var(--zo-bg-image, none) center top / cover no-repeat !important;
  }
}


/* ===== v1.5 mobile/tablet responsive pass ===== */

/* Mobile baseline safety */
.zo-app-shell,
.zo-app-shell * {
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  overflow-x: hidden !important;
}

/* Tablet layout: desktop sidebar hidden, app becomes stacked */
@media (max-width: 820px) {
  .zo-app-shell {
    width: 100% !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    padding: 14px 14px 92px !important;
    display: block !important;
  }

  .zo-sidebar {
    display: none !important;
  }

  .zo-mobile-topbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 10px !important;
    z-index: 80 !important;
    width: 100% !important;
    margin: 0 auto 14px !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(232, 221, 200, .86) !important;
    background: rgba(255, 253, 247, .78) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    box-shadow: 0 12px 30px rgba(15,42,34,.08) !important;
  }

  .zo-mobile-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
  }

  .zo-mobile-brand img {
    width: 132px !important;
    max-width: 42vw !important;
    height: auto !important;
  }

  .zo-mobile-brand span {
    display: none !important;
  }

  .zo-mobile-top-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  .zo-main-panel {
    width: 100% !important;
    max-width: none !important;
    padding-bottom: 0 !important;
  }

  .zo-main-header {
    min-height: auto !important;
    margin: 8px 0 14px !important;
    padding: 0 2px !important;
  }

  .zo-header-actions {
    display: none !important;
  }

  .zo-header-leaf {
    display: none !important;
  }

  .zo-greeting {
    justify-content: center !important;
    text-align: center !important;
    margin-bottom: 4px !important;
  }

  .zo-main-header h1 {
    text-align: center !important;
    font-size: clamp(27px, 5.4vw, 38px) !important;
    line-height: 1.08 !important;
    margin: 0 0 6px !important;
  }

  .zo-main-header p {
    text-align: center !important;
    max-width: 620px !important;
    margin: 0 auto !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  .zo-dashboard-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .zo-counter-card {
    order: 1 !important;
  }

  .zo-side-stack {
    order: 2 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .zo-zikir-select-card {
    grid-column: 1 / -1 !important;
    order: 1 !important;
  }

  .zo-progress-insight-card {
    order: 2 !important;
  }

  .zo-wizard-card,
  .zo-quick-link-card.zo-wizard-card {
    order: 3 !important;
  }

  .zo-mobile-support-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-top: 12px !important;
  }

  .zo-mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr 64px 1fr 1fr !important;
    align-items: center !important;
    position: fixed !important;
    left: max(10px, env(safe-area-inset-left)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    /* 2026-09-14 BULGU: 761-1180px (tablet) aralığında nav EKRAN DIŞINA
       taşıyordu (left:-260px ölçüldü). Kök neden: satır ~871'deki
       max-width:1180px kuralı left:50%+transform:translateX(-50%) ile
       ortalıyor; bu kural (aynı breakpoint, daha SONRA) left/right'ı
       kenara sabitliyor ama eski transform'u SIFIRLAMIYORDU — kenara
       sabitlenmiş left değeri, hâlâ uygulanan -50% genişlik kaydırmasıyla
       toplanıp navı görünmez kılıyordu. transform:none bunu keser. */
    transform: none !important;
    width: auto !important;
    z-index: 90 !important;
    min-height: 68px !important;
    padding: 8px 10px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(232, 221, 200, .92) !important;
    background: rgba(255, 253, 247, .88) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    box-shadow: 0 18px 44px rgba(15,42,34,.16) !important;
  }

  .zo-mobile-bottom-nav a,
  .zo-mobile-bottom-nav button {
    min-width: 0 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    min-height: 50px !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--zo-dark-green) !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  .zo-mobile-bottom-nav .zo-svg-icon {
    width: 19px !important;
    height: 19px !important;
  }

  /* fix/mobile-nav-primary-button-bug: bkz. yukarıdaki not — bare `button`
     yerine .zo-mobile-nav-primary. */
  .zo-mobile-bottom-nav .zo-mobile-nav-primary {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    border-radius: 50% !important;
    background: var(--zo-emerald) !important;
    color: #fff !important;
    box-shadow: 0 14px 30px rgba(47,143,91,.28) !important;
    transform: translateY(-16px) !important;
  }

  .zo-mobile-bottom-nav .zo-mobile-nav-primary .zo-svg-icon {
    width: 29px !important;
    height: 29px !important;
  }
}

/* Phone layout */
@media (max-width: 760px) {
  .zo-app-shell {
    max-width: 100% !important;
    padding: 10px 10px 92px !important;
  }

  .zo-app-shell::before {
    position: fixed !important;
    background:
      linear-gradient(180deg, rgba(248,243,231,.90) 0%, rgba(248,243,231,.82) 55%, rgba(248,243,231,.92) 100%),
      var(--zo-bg-image, none) center top / cover no-repeat !important;
  }

  .zo-mobile-topbar {
    top: 8px !important;
    margin-bottom: 12px !important;
    padding: 9px 10px !important;
    border-radius: 18px !important;
  }

  .zo-mobile-brand img {
    width: 122px !important;
    max-width: 50vw !important;
  }

  .zo-mobile-top-actions .zo-icon-btn {
    width: 39px !important;
    height: 39px !important;
    border-radius: 13px !important;
  }

  .zo-greeting {
    font-size: 12px !important;
  }

  .zo-greeting small {
    display: none !important;
  }

  .zo-main-header {
    margin: 6px 0 12px !important;
  }

  .zo-main-header h1 {
    font-size: 29px !important;
    letter-spacing: -0.035em !important;
  }

  .zo-main-header p {
    font-size: 13px !important;
    max-width: 330px !important;
  }

  .zo-counter-card,
  .zo-zikir-select-card,
  .zo-progress-insight-card,
  .zo-quick-link-card,
  .zo-mobile-support-grid .zo-card {
    border-radius: 22px !important;
  }

  .zo-counter-card {
    padding: 14px 12px 14px !important;
  }

  .zo-card-title-row {
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }

  .zo-card-title {
    font-size: 17px !important;
  }

  .zo-card-helper {
    display: none !important;
  }

  .zo-target-chips {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 7px !important;
    margin-bottom: 9px !important;
  }

  .zo-target-chips button {
    min-height: 42px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    padding: 0 4px !important;
  }

  .zo-custom-zikir-inline {
    max-width: 100% !important;
    margin: 7px 0 9px !important;
  }

  .zo-custom-zikir-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 74px !important;
    gap: 7px !important;
  }

  .zo-custom-zikir-row input,
  .zo-custom-zikir-row .zo-soft-btn {
    min-height: 39px !important;
  }

  .zo-custom-zikir-row input {
    font-size: 12px !important;
  }

  .zo-mini-kicker {
    font-size: 12px !important;
    padding: 5px 9px !important;
  }

  .zo-current-zikir-spotlight h2 {
    font-size: clamp(26px, 9vw, 34px) !important;
    line-height: 1.08 !important;
    margin-top: 7px !important;
  }

  .zo-current-zikir-spotlight p {
    font-size: 13px !important;
  }

  .zo-zikir-meaning {
    max-width: 96% !important;
    margin-top: 6px !important;
    font-size: 12px !important;
    line-height: 1.42 !important;
  }

  .zo-progress-ring {
    width: min(238px, 73vw) !important;
    height: min(238px, 73vw) !important;
  }

  .zo-progress-inner strong {
    font-size: 55px !important;
  }

  .zo-progress-inner span {
    font-size: 13px !important;
  }

  .zo-tap-note {
    max-width: 240px !important;
    margin: 7px auto 0 !important;
    font-size: 12px !important;
  }

  .zo-remaining {
    font-size: 14px !important;
    margin-top: 4px !important;
  }

  .zo-counter-actions {
    width: 100% !important;
    max-width: 330px !important;
    display: grid !important;
    grid-template-columns: 1fr 58px 1fr !important;
    gap: 8px !important;
    align-items: center !important;
    margin: 9px auto 0 !important;
  }

  .zo-action-btn {
    min-height: 44px !important;
    border-radius: 14px !important;
    font-size: 12px !important;
  }

  .zo-plus-btn {
    width: 58px !important;
    height: 58px !important;
  }

  .zo-prayer-note {
    max-width: 280px !important;
    margin: 10px auto 3px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .zo-storage-note {
    max-width: 280px !important;
    margin: 0 auto !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  .zo-side-stack {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .zo-zikir-select-card,
  .zo-progress-insight-card,
  .zo-quick-link-card.zo-wizard-card {
    padding: 12px !important;
  }

  .zo-zikir-list {
    max-height: 132px !important;
  }

  .zo-zikir-list button {
    min-height: 38px !important;
  }

  .zo-progress-insight-body {
    grid-template-columns: 18px minmax(0, 1fr) !important;
    gap: 11px !important;
  }

  .zo-vertical-progress {
    min-height: 118px !important;
  }

  .zo-insight-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .zo-insight-mini-grid div {
    min-height: 52px !important;
    padding: 9px !important;
  }

  .zo-quick-link-card.zo-wizard-card {
    min-height: auto !important;
  }

  .zo-quick-link-card p {
    max-width: 100% !important;
  }

  .zo-mobile-support-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  .zo-mobile-support-grid .zo-sidebar-room-card,
  .zo-mobile-support-grid .zo-daily-card {
    display: block !important;
    padding: 14px 13px !important;
    min-height: auto !important;
  }

  .zo-mobile-bottom-nav {
    min-height: 64px !important;
    padding: 7px 8px !important;
    border-radius: 22px !important;
    grid-template-columns: 1fr 1fr 58px 1fr 1fr !important;
  }

  .zo-mobile-bottom-nav a,
  .zo-mobile-bottom-nav button {
    font-size: 12px !important;
  }

  .zo-mobile-bottom-nav a span,
  .zo-mobile-bottom-nav button span {
    max-width: 52px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .zo-mobile-bottom-nav .zo-mobile-nav-primary {
    width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    transform: translateY(-14px) !important;
  }
}

/* Small phones */
@media (max-width: 420px) {
  .zo-app-shell {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .zo-mobile-brand img {
    width: 112px !important;
  }

  .zo-main-header h1 {
    font-size: 26px !important;
  }

  .zo-target-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .zo-custom-zikir-row {
    grid-template-columns: 1fr !important;
  }

  .zo-progress-ring {
    width: min(220px, 72vw) !important;
    height: min(220px, 72vw) !important;
  }

  .zo-progress-inner strong {
    font-size: 50px !important;
  }

  .zo-counter-actions {
    grid-template-columns: 1fr 54px 1fr !important;
  }

  .zo-action-btn span {
    font-size: 12px !important;
  }
}


/* ===== v1.6 mobile hard-fix pass ===== */
/* This block intentionally comes last and overrides older responsive rules. */

/* Tablet + mobile: reset desktop pressure */
@media (max-width: 820px) {
  body .zo-app-shell {
    display: block !important;
    width: 100% !important;
    max-width: 780px !important;
    margin: 0 auto !important;
    padding: 10px 10px 92px !important;
    overflow: visible !important;
  }

  body .zo-sidebar {
    display: none !important;
  }

  body .zo-main-panel {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  body .zo-dashboard-grid,
  body .zo-side-stack,
  body .zo-mobile-support-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  body .zo-counter-card,
  body .zo-zikir-select-card,
  body .zo-progress-insight-card,
  body .zo-quick-link-card,
  body .zo-mobile-support-grid .zo-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}

/* Phone-first actual interface */
@media (max-width: 768px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  body .zo-app-shell {
    max-width: 430px !important;
    padding: 8px 8px 88px !important;
  }

  body .zo-app-shell::before {
    position: fixed !important;
    inset: 0 !important;
    background:
      linear-gradient(180deg, rgba(248,243,231,.93) 0%, rgba(248,243,231,.87) 58%, rgba(248,243,231,.94) 100%),
      var(--zo-bg-image, none) center top / cover no-repeat !important;
  }

  body .zo-mobile-topbar {
    display: flex !important;
    position: sticky !important;
    top: 7px !important;
    z-index: 100 !important;
    width: 100% !important;
    min-height: 58px !important;
    margin: 0 0 10px !important;
    padding: 8px 9px !important;
    border-radius: 18px !important;
    background: rgba(255,253,247,.84) !important;
    border: 1px solid rgba(232,221,200,.86) !important;
    box-shadow: 0 10px 26px rgba(15,42,34,.08) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  body .zo-mobile-brand img {
    width: 118px !important;
    max-width: 48vw !important;
    height: auto !important;
  }

  body .zo-mobile-brand span {
    display: none !important;
  }

  body .zo-mobile-top-actions {
    display: flex !important;
    gap: 7px !important;
  }

  /* ROADMAP P1 madde 1: dokunma hedefi 44x44. Buradaki 38px'lik
     "min-width: ... !important", zo-zikirmatik-ui.css'teki (max-width:760px)
     "min-width/min-height: 44px" niyetini !important olduğu için yeniyordu;
     sonuç ölçülen 38x44'lük hedefti. Kaynak değer 44'e çekilerek katman
     eklemeden düzeltildi. */
  body .zo-mobile-top-actions .zo-icon-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 13px !important;
  }

  body .zo-main-header {
    margin: 6px 0 10px !important;
    padding: 0 4px !important;
    text-align: center !important;
    min-height: 0 !important;
  }

  body .zo-greeting {
    display: inline-flex !important;
    justify-content: center !important;
    font-size: 12px !important;
    margin: 0 0 3px !important;
  }

  body .zo-greeting small {
    display: none !important;
  }

  body .zo-main-header h1 {
    font-size: 26px !important;
    line-height: 1.08 !important;
    letter-spacing: -0.035em !important;
    text-align: center !important;
    margin: 0 0 5px !important;
  }

  body .zo-main-header p {
    font-size: 12.5px !important;
    line-height: 1.42 !important;
    max-width: 330px !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  body .zo-header-actions,
  body .zo-header-leaf {
    display: none !important;
  }

  body .zo-card,
  body .zo-counter-card,
  body .zo-zikir-select-card,
  body .zo-progress-insight-card,
  body .zo-quick-link-card {
    border-radius: 20px !important;
  }

  body .zo-counter-card {
    padding: 12px 10px 12px !important;
  }

  body .zo-card-title-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 9px !important;
  }

  body .zo-card-title {
    font-size: 16px !important;
  }

  body .zo-card-helper {
    display: none !important;
  }

  body .zo-target-chips {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin: 0 0 8px !important;
  }

  body .zo-target-chips button {
    min-width: 0 !important;
    min-height: 39px !important;
    padding: 0 2px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  body .zo-custom-zikir-inline {
    max-width: 100% !important;
    margin: 0 0 8px !important;
  }

  body .zo-custom-zikir-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 70px !important;
    gap: 6px !important;
  }

  body .zo-custom-zikir-row input,
  body .zo-custom-zikir-row .zo-soft-btn {
    min-height: 37px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
  }

  body .zo-mini-kicker {
    font-size: 12px !important;
    padding: 4px 8px !important;
  }

  body .zo-current-zikir-spotlight {
    margin: 6px auto 6px !important;
  }

  body .zo-current-zikir-spotlight h2 {
    font-size: clamp(25px, 8.2vw, 32px) !important;
    line-height: 1.08 !important;
    margin: 6px 0 2px !important;
    word-break: keep-all !important;
  }

  body .zo-current-zikir-spotlight p {
    font-size: 12.5px !important;
  }

  body .zo-zikir-meaning {
    max-width: 94% !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    margin: 5px auto 0 !important;
  }

  body .zo-progress-ring {
    width: min(218px, 68vw) !important;
    height: min(218px, 68vw) !important;
  }

  body .zo-progress-inner strong {
    font-size: 48px !important;
  }

  body .zo-progress-inner span {
    font-size: 12px !important;
  }

  body .zo-tap-note {
    max-width: 235px !important;
    margin: 6px auto 0 !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body .zo-remaining {
    margin: 3px 0 0 !important;
    font-size: 13px !important;
  }

  body .zo-counter-actions {
    display: grid !important;
    grid-template-columns: 1fr 54px 1fr !important;
    gap: 7px !important;
    max-width: 315px !important;
    margin: 8px auto 0 !important;
    align-items: center !important;
  }

  body .zo-action-btn {
    min-height: 42px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    gap: 6px !important;
  }

  body .zo-plus-btn {
    width: 54px !important;
    height: 54px !important;
  }

  body .zo-prayer-note {
    max-width: 280px !important;
    margin: 9px auto 2px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  body .zo-storage-note {
    max-width: 280px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
  }

  /* Put functional panels in useful order on mobile */
  body .zo-zikir-select-card {
    order: 1 !important;
    padding: 11px !important;
  }

  body .zo-progress-insight-card {
    order: 2 !important;
    padding: 11px !important;
  }

  body .zo-quick-link-card.zo-wizard-card {
    order: 3 !important;
    padding: 12px !important;
  }

  body .zo-zikir-search-wrap input {
    min-height: 38px !important;
    font-size: 12.5px !important;
  }

  body .zo-zikir-list {
    max-height: 124px !important;
  }

  body .zo-zikir-list button {
    min-height: 36px !important;
    margin-bottom: 3px !important;
    border-radius: 11px !important;
  }

  body .zo-zikir-list button span {
    font-size: 12px !important;
  }

  body .zo-progress-insight-body {
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  body .zo-vertical-progress {
    width: 16px !important;
    min-height: 112px !important;
  }

  body .zo-insight-main strong {
    font-size: 22px !important;
  }

  body .zo-insight-mini-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  body .zo-insight-mini-grid div {
    min-height: 49px !important;
    padding: 8px !important;
    border-radius: 12px !important;
  }

  body .zo-insight-mini-grid b {
    font-size: 16px !important;
  }

  body .zo-insight-mini-grid span {
    font-size: 12px !important;
  }

  body .zo-quick-link-card.zo-wizard-card {
    min-height: auto !important;
  }

  body .zo-quick-link-card h3 {
    font-size: 17px !important;
  }

  body .zo-quick-link-card p {
    max-width: 100% !important;
    font-size: 12px !important;
  }

  body .zo-quick-link-btn {
    min-height: 38px !important;
    min-width: 112px !important;
    font-size: 12px !important;
  }

  body .zo-mobile-support-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin-top: 10px !important;
  }

  body .zo-mobile-support-grid .zo-sidebar-room-card,
  body .zo-mobile-support-grid .zo-daily-card {
    display: block !important;
    padding: 13px !important;
    min-height: auto !important;
    margin: 0 !important;
    border-radius: 20px !important;
  }

  body .zo-mobile-support-grid h3 {
    font-size: 16px !important;
  }

  body .zo-mobile-support-grid p {
    max-width: 100% !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  body .zo-mobile-bottom-nav {
    display: grid !important;
    grid-template-columns: 1fr 1fr 56px 1fr 1fr !important;
    position: fixed !important;
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 999 !important;
    min-height: 62px !important;
    padding: 7px 8px !important;
    border-radius: 22px !important;
    background: rgba(255,253,247,.9) !important;
    border: 1px solid rgba(232,221,200,.92) !important;
    box-shadow: 0 18px 44px rgba(15,42,34,.16) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  body .zo-mobile-bottom-nav a,
  body .zo-mobile-bottom-nav button {
    min-width: 0 !important;
    border: 0 !important;
    background: transparent !important;
    text-decoration: none !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    color: var(--zo-dark-green) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  body .zo-mobile-bottom-nav a span,
  body .zo-mobile-bottom-nav button span {
    max-width: 48px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body .zo-mobile-bottom-nav .zo-svg-icon {
    width: 18px !important;
    height: 18px !important;
  }

  /* fix/mobile-nav-primary-button-bug (2026-09-14 tekrarı): bu blok bare
     `button` seçicisiyle yazılmıştı — o an tek <button> olan "Hesap"
     sekmesi, gerçek birincil CTA ("Oluştur", bir <a>) yerine büyük yeşil
     dairesel FAB gibi görünüyordu (aynı hata daha önce burada, satır
     ~915'te, farklı bir breakpoint'te bulunup düzeltilmişti — bu kopya
     unutulmuştu). .zo-mobile-nav-primary sınıfına taşındı. */
  body .zo-mobile-bottom-nav .zo-mobile-nav-primary {
    width: 54px !important;
    height: 54px !important;
    min-height: 54px !important;
    border-radius: 50% !important;
    background: var(--zo-emerald) !important;
    color: #fff !important;
    transform: translateY(-14px) !important;
    box-shadow: 0 14px 30px rgba(47,143,91,.28) !important;
  }

  body .zo-mobile-bottom-nav .zo-mobile-nav-primary .zo-svg-icon {
    width: 28px !important;
    height: 28px !important;
  }
}

/* Very small phones */
@media (max-width: 390px) {
  body .zo-app-shell {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  body .zo-mobile-brand img {
    width: 108px !important;
  }

  /* ROADMAP P1 madde 1: 390px altında da 44x44 korunur (ölçüm: taşma yok). */
  body .zo-mobile-top-actions .zo-icon-btn {
    width: 44px !important;
    height: 44px !important;
  }

  body .zo-main-header h1 {
    font-size: 24px !important;
  }

  body .zo-target-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body .zo-custom-zikir-row {
    grid-template-columns: 1fr !important;
  }

  body .zo-progress-ring {
    width: min(204px, 66vw) !important;
    height: min(204px, 66vw) !important;
  }

  body .zo-progress-inner strong {
    font-size: 44px !important;
  }

  body .zo-counter-actions {
    grid-template-columns: 1fr 50px 1fr !important;
  }

  body .zo-plus-btn {
    width: 50px !important;
    height: 50px !important;
  }

  body .zo-action-btn span {
    font-size: 12px !important;
  }
}


/* ===== v1.7 admin settings + instructions support ===== */
.zo-hide-meaning .zo-zikir-meaning {
  display: none !important;
}

.zo-hide-mobile-nav .zo-mobile-bottom-nav {
  display: none !important;
}

@media (max-width: 820px) {
  .zo-hide-mobile-nav {
    padding-bottom: 16px !important;
  }
}

.zo-bg-overlay-light::before {
  background:
    linear-gradient(90deg, rgba(248, 243, 231, 0.70) 0%, rgba(248, 243, 231, 0.58) 48%, rgba(248, 243, 231, 0.72) 100%),
    var(--zo-bg-image, none) center top / cover no-repeat !important;
}

.zo-bg-overlay-medium::before {
  background:
    linear-gradient(90deg, rgba(248, 243, 231, 0.82) 0%, rgba(248, 243, 231, 0.76) 48%, rgba(248, 243, 231, 0.82) 100%),
    var(--zo-bg-image, none) center top / cover no-repeat !important;
}

.zo-bg-overlay-strong::before {
  background:
    linear-gradient(90deg, rgba(248, 243, 231, 0.92) 0%, rgba(248, 243, 231, 0.88) 48%, rgba(248, 243, 231, 0.94) 100%),
    var(--zo-bg-image, none) center top / cover no-repeat !important;
}

@media (max-width: 760px) {
  .zo-bg-overlay-light::before {
    background:
      linear-gradient(180deg, rgba(248, 243, 231, 0.78) 0%, rgba(248, 243, 231, 0.70) 100%),
      var(--zo-bg-image, none) center top / cover no-repeat !important;
  }

  .zo-bg-overlay-medium::before {
    background:
      linear-gradient(180deg, rgba(248, 243, 231, 0.86) 0%, rgba(248, 243, 231, 0.78) 100%),
      var(--zo-bg-image, none) center top / cover no-repeat !important;
  }

  .zo-bg-overlay-strong::before {
    background:
      linear-gradient(180deg, rgba(248, 243, 231, 0.94) 0%, rgba(248, 243, 231, 0.90) 100%),
      var(--zo-bg-image, none) center top / cover no-repeat !important;
  }
}


/* ===== v1.8 responsive background + mobile UX final pass ===== */

/* responsive background sources */
.zo-app-shell::before {
  background:
    linear-gradient(90deg, rgba(248,243,231,.82) 0%, rgba(248,243,231,.76) 48%, rgba(248,243,231,.82) 100%),
    var(--zo-bg-desktop, var(--zo-bg-image)) center top / cover no-repeat !important;
}

@media (max-width: 1440px) {
  .zo-app-shell::before {
    background:
      linear-gradient(90deg, rgba(248,243,231,.84) 0%, rgba(248,243,231,.78) 48%, rgba(248,243,231,.84) 100%),
      var(--zo-bg-laptop, var(--zo-bg-desktop, var(--zo-bg-image))) center top / cover no-repeat !important;
  }
}

@media (max-width: 820px) {
  .zo-app-shell::before {
    background:
      linear-gradient(180deg, rgba(248,243,231,.88) 0%, rgba(248,243,231,.80) 52%, rgba(248,243,231,.90) 100%),
      var(--zo-bg-tablet, var(--zo-bg-mobile, var(--zo-bg-image))) center top / cover no-repeat !important;
  }
}

@media (max-width: 760px) {
  .zo-app-shell::before {
    background:
      linear-gradient(180deg, rgba(248,243,231,.91) 0%, rgba(248,243,231,.84) 56%, rgba(248,243,231,.92) 100%),
      var(--zo-bg-mobile, var(--zo-bg-tablet, var(--zo-bg-image))) center top / cover no-repeat !important;
  }
}

/* disable mobile double-tap zoom feeling on controls.
   Madde 3 (feature/final-ux-pass-2): .zo-progress-button (ana sayaç) bu
   listeden çıkarıldı — touch-action:manipulation tarayıcının native
   double-tap-to-zoom hareketini tamamen engelliyordu, oysa sayaçta bu
   beklenen bir davranış. Diğer kontroller (nav, aksiyon butonları) hızlı
   tek-tık tepkisi için manipulation'ı korur. */
.zo-app-shell button,
.zo-app-shell a,
.zo-mobile-bottom-nav button {
  touch-action: manipulation !important;
  -webkit-user-select: none;
  user-select: none;
}

.zo-progress-button {
  -webkit-user-select: none;
  user-select: none;
}

@media (max-width: 760px) {
  .zo-custom-zikir-row input,
  .zo-zikir-search-wrap input {
    font-size: 16px !important; /* prevents iOS input zoom */
  }
}

/* celebration */
.zo-celebration {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
  background: radial-gradient(circle, rgba(214,178,74,.12), transparent 42%);
}

.zo-celebration.is-visible {
  display: flex;
  animation: zoCelebrationFade 2.6s ease both;
}

.zo-celebration-card {
  max-width: min(360px, calc(100vw - 36px));
  padding: 22px 24px;
  border-radius: 26px;
  text-align: center;
  color: var(--zo-dark-green);
  background: rgba(255,253,247,.94);
  border: 1px solid rgba(214,178,74,.36);
  box-shadow: 0 28px 70px rgba(15,42,34,.18);
  transform-origin: center;
  animation: zoCelebrationPop .6s cubic-bezier(.2,1.2,.2,1) both;
}

.zo-celebration-card strong {
  display: block;
  font-size: 24px;
  margin-bottom: 8px;
}

.zo-celebration-card span {
  display: block;
  color: rgba(15,42,34,.68);
  font-size: 14px;
  line-height: 1.45;
  font-weight: 750;
}

@keyframes zoCelebrationPop {
  from { transform: scale(.78) translateY(12px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes zoCelebrationFade {
  0% { opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* meaning hidden state */
.zo-zikir-meaning[hidden] {
  display: none !important;
}

/* infinite target polish */
.zo-target-chips {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}

/* Mobile: counter first, header lower */
@media (max-width: 760px) {
  .zo-main-panel {
    display: flex !important;
    flex-direction: column !important;
  }

  .zo-dashboard-grid {
    order: 1 !important;
  }

  .zo-main-header {
    order: 2 !important;
    margin: 12px 0 10px !important;
    padding: 10px 12px !important;
    border-radius: 20px !important;
    background: rgba(255,253,247,.62) !important;
    border: 1px solid rgba(232,221,200,.55) !important;
    box-shadow: 0 10px 24px rgba(15,42,34,.045) !important;
  }

  .zo-mobile-support-grid {
    order: 3 !important;
  }

  .zo-main-header h1 {
    font-size: 24px !important;
  }

  .zo-main-header p {
    font-size: 12px !important;
    line-height: 1.42 !important;
  }

  .zo-counter-card {
    padding: 13px 10px 12px !important;
  }

  .zo-card-title-row {
    margin-bottom: 8px !important;
  }

  .zo-target-chips {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }

  .zo-target-chips button {
    min-height: 40px !important;
    font-size: 12px !important;
  }

  .zo-custom-zikir-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .zo-custom-zikir-row .zo-soft-btn {
    min-height: 42px !important;
    font-size: 13px !important;
  }

  .zo-current-zikir-spotlight h2 {
    font-size: clamp(24px, 8vw, 31px) !important;
  }

  .zo-progress-ring {
    width: min(232px, 70vw) !important;
    height: min(232px, 70vw) !important;
  }

  /* Madde 3: mobil breakpoint'te de manipulation yeniden uygulanmasın
     (bkz. yukarıdaki temel kural) — sayaçta native double-tap-zoom açık
     kalmalı. */

  .zo-progress-inner strong {
    font-size: 52px !important;
  }

  .zo-counter-actions {
    grid-template-columns: 1fr 68px 1fr !important;
    max-width: 340px !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .zo-action-btn {
    min-height: 48px !important;
    border-radius: 15px !important;
    font-size: 13px !important;
    background: rgba(255,253,247,.92) !important;
  }

  .zo-action-btn i,
  .zo-action-btn .zo-svg-icon {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
  }

  .zo-plus-btn {
    width: 68px !important;
    height: 68px !important;
    box-shadow: 0 18px 36px rgba(47,143,91,.28) !important;
  }

  .zo-mobile-bottom-nav {
    grid-template-columns: 1fr 1fr 62px 1fr 1fr !important;
  }

  .zo-mobile-bottom-nav .zo-mobile-nav-primary {
    width: 62px !important;
    height: 62px !important;
    min-height: 62px !important;
    transform: translateY(-16px) !important;
  }

  .zo-mobile-bottom-nav .zo-mobile-nav-primary .zo-svg-icon {
    width: 31px !important;
    height: 31px !important;
  }

  .zo-tap-note {
    font-size: 12px !important;
  }

  .zo-remaining {
    font-size: 14px !important;
  }
}

/* Small phones: avoid crowding with five chips */
@media (max-width: 390px) {
  .zo-target-chips {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .zo-progress-ring {
    width: min(214px, 66vw) !important;
    height: min(214px, 66vw) !important;
  }

  .zo-counter-actions {
    grid-template-columns: 1fr 60px 1fr !important;
  }

  .zo-plus-btn {
    width: 60px !important;
    height: 60px !important;
  }
}

/* ===== v1.9 UI/UX refinements ===== */
.zo-card-title-row {
  align-items: center;
}

.zo-counter-card .zo-card-title-row {
  justify-content: flex-start;
  margin-bottom: 12px;
}

.zo-zikir-select-card .zo-card-title-row small {
  color: #6F786F;
  font-weight: 700;
}

.zo-current-zikir-spotlight {
  margin-top: 18px;
  margin-bottom: 8px;
  gap: 8px;
}

.zo-current-zikir-spotlight .zo-mini-kicker {
  display: none !important;
}

.zo-current-zikir-spotlight h2 {
  margin-top: 0;
}

.zo-current-zikir-spotlight p {
  margin-top: -2px;
}

.zo-zikir-list {
  gap: 8px !important;
}

.zo-zikir-list button {
  min-height: 54px;
}

.zo-custom-zikir-inline {
  margin-top: 10px;
}

.zo-quick-link-card .zo-card-kicker {
  letter-spacing: .12em;
}

.zo-quick-link-card h3,
.zo-sidebar-room-card h3 {
  font-weight: 800;
}

.zo-main-header h1 {
  font-size: clamp(32px, 3vw, 42px);
}

/* Make card backgrounds consistent over image background */
.zo-main-header,
.zo-card,
.zo-sidebar,
.zo-mobile-topbar {
  backdrop-filter: blur(14px);
}

/* Mobile & tablet improvements */
@media (max-width: 760px) {
  .zo-main-panel {
    display: flex !important;
    flex-direction: column !important;
  }

  .zo-dashboard-grid {
    order: 1 !important;
  }

  .zo-mobile-support-grid {
    order: 3 !important;
  }

  .zo-main-header {
    order: 4 !important;
    margin: 14px 2px 96px !important;
    padding: 16px 14px !important;
    min-height: auto !important;
    align-items: center !important;
    text-align: center;
  }

  .zo-header-copy {
    width: 100%;
  }

  .zo-greeting {
    justify-content: center;
    margin-bottom: 8px !important;
  }

  .zo-header-actions,
  .zo-header-leaf {
    display: none !important;
  }

  .zo-main-header h1 {
    font-size: 24px !important;
    margin-bottom: 8px !important;
  }

  .zo-main-header p {
    max-width: none !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  /* horizontally scrollable target chips */
  .zo-target-chips {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
    margin-bottom: 10px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }

  .zo-target-chips::-webkit-scrollbar {
    display: none;
  }

  .zo-target-chips button {
    flex: 0 0 120px !important;
    min-width: 120px !important;
    min-height: 44px !important;
    scroll-snap-align: start;
  }

  .zo-custom-zikir-inline {
    margin-top: 0 !important;
  }

  .zo-custom-zikir-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .zo-custom-zikir-inline label {
    font-size: 12px;
  }

  .zo-zikir-list {
    gap: 6px !important;
  }

  .zo-zikir-list button {
    min-height: 46px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }

  .zo-current-zikir-spotlight {
    margin-top: 14px !important;
    gap: 6px !important;
  }

  .zo-current-zikir-spotlight h2 {
    font-size: clamp(24px, 8.2vw, 36px) !important;
  }

  .zo-progress-wrap {
    margin-top: 8px;
  }

  .zo-mobile-bottom-nav {
    left: 50% !important;
    right: auto !important;
    width: min(calc(100% - 16px), 420px) !important;
    transform: translateX(-50%) !important;
    bottom: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    grid-template-columns: 1fr 1fr 62px 1fr 1fr !important;
    justify-items: center !important;
  }

  .zo-mobile-bottom-nav a,
  .zo-mobile-bottom-nav button {
    width: 100% !important;
    justify-content: center !important;
  }

  .zo-mobile-bottom-nav a span,
  .zo-mobile-bottom-nav button span {
    font-size: 12px !important;
  }
}

@media (max-width: 390px) {
  .zo-target-chips button {
    flex-basis: 112px !important;
    min-width: 112px !important;
  }

  .zo-mobile-bottom-nav {
    width: min(calc(100% - 12px), 390px) !important;
  }
}

/* ===== v2.0 mobile critical fixes ===== */
@media (max-width: 760px) {
  /* Put intro block at the real bottom on mobile */
  body .zo-main-panel {
    display: flex !important;
    flex-direction: column !important;
  }

  body .zo-dashboard-grid {
    order: 1 !important;
  }

  body .zo-mobile-support-grid {
    order: 2 !important;
  }

  body .zo-main-header {
    order: 99 !important;
    margin: 14px 0 94px !important;
    padding: 16px 14px !important;
    min-height: auto !important;
    text-align: center !important;
    border-radius: 22px !important;
    background: rgba(255,253,247,.72) !important;
    border: 1px solid rgba(232,221,200,.70) !important;
    box-shadow: 0 10px 28px rgba(15,42,34,.06) !important;
  }

  body .zo-main-header .zo-header-copy,
  body .zo-main-header h1,
  body .zo-main-header p {
    width: 100% !important;
    text-align: center !important;
  }

  body .zo-main-header h1 {
    font-size: 24px !important;
    line-height: 1.1 !important;
    margin: 0 0 8px !important;
  }

  body .zo-main-header p {
    max-width: 330px !important;
    margin: 0 auto !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
  }

  body .zo-greeting {
    justify-content: center !important;
    margin-bottom: 8px !important;
  }

  body .zo-greeting small {
    display: none !important;
  }

  body .zo-header-actions,
  body .zo-header-leaf {
    display: none !important;
  }

  /* Target chips: horizontal slider, custom input separate */
  body .zo-target-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    grid-template-columns: none !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 0 6px !important;
    margin: 0 0 10px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
  }

  body .zo-target-chips::-webkit-scrollbar {
    display: none !important;
  }

  body .zo-target-chips button {
    flex: 0 0 124px !important;
    width: 124px !important;
    min-width: 124px !important;
    max-width: 124px !important;
    min-height: 46px !important;
    scroll-snap-align: start !important;
    border-radius: 14px !important;
    font-size: 13px !important;
  }

  body .zo-custom-zikir-inline {
    margin-top: 0 !important;
    max-width: 100% !important;
  }

  body .zo-custom-zikir-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  body .zo-custom-zikir-row .zo-soft-btn {
    min-height: 44px !important;
    font-size: 13px !important;
  }

  /* Mobile bottom menu centered and never shifted left */
  body .zo-mobile-bottom-nav {
    display: grid !important;
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    bottom: max(10px, env(safe-area-inset-bottom)) !important;
    width: min(calc(100vw - 18px), 430px) !important;
    transform: translateX(-50%) !important;
    z-index: 9999 !important;
    grid-template-columns: 1fr 1fr 64px 1fr 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 0 !important;
    min-height: 66px !important;
    padding: 8px 10px !important;
    border-radius: 24px !important;
    box-sizing: border-box !important;
  }

  body .zo-mobile-bottom-nav a,
  body .zo-mobile-bottom-nav button {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
  }

  /* fix/mobile-nav-primary-button-bug (2026-09-14 tekrarı): bkz. yukarıdaki
     ~5341 notu — bare `button` "Hesap"yi (tek <button>) merkez sütuna
     (grid-column:3) zorluyordu; gerçek birincil CTA "Oluştur" bir <a>
     olduğu için bu kuraldan hiç faydalanmıyor, otomatik yerleşimle 4.
     sütuna düşüyordu (ölçüldü: Hesap merkezde, Oluştur sağa kaymış).
     .zo-mobile-nav-primary sınıfına taşındı. */
  body .zo-mobile-bottom-nav .zo-mobile-nav-primary {
    grid-column: 3 !important;
    justify-self: center !important;
    width: 64px !important;
    height: 64px !important;
    min-height: 64px !important;
    max-width: 64px !important;
    transform: translateY(-18px) !important;
  }

  body .zo-mobile-bottom-nav a span,
  body .zo-mobile-bottom-nav button span {
    max-width: 58px !important;
    font-size: 12px !important;
  }

  /* Counter card compact polish */
  body .zo-counter-card {
    padding-top: 13px !important;
  }

  body .zo-current-zikir-spotlight {
    margin-top: 12px !important;
  }

  body .zo-progress-ring {
    width: min(226px, 68vw) !important;
    height: min(226px, 68vw) !important;
  }

  body .zo-plus-btn {
    width: 70px !important;
    height: 70px !important;
  }
}

@media (max-width: 390px) {
  body .zo-target-chips button {
    flex-basis: 116px !important;
    width: 116px !important;
    min-width: 116px !important;
    max-width: 116px !important;
  }

  body .zo-mobile-bottom-nav {
    width: min(calc(100vw - 12px), 390px) !important;
    grid-template-columns: 1fr 1fr 58px 1fr 1fr !important;
  }

  /* fix/mobile-nav-primary-button-bug (2026-09-14 tekrarı): bkz. ~5341
     notu — .zo-mobile-nav-primary sınıfına taşındı. */
  body .zo-mobile-bottom-nav .zo-mobile-nav-primary {
    width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
  }
}

/* topbar icons: fix invisible filled blobs */
.zo-icon-btn .zo-svg-icon,
.zo-header-actions button .zo-svg-icon,
.zo-mobile-top-actions .zo-icon-btn .zo-svg-icon {
  width: 18px !important;
  height: 18px !important;
  color: var(--zo-dark-green) !important;
}

.zo-icon-btn .zo-svg-icon path,
.zo-header-actions button .zo-svg-icon path,
.zo-mobile-top-actions .zo-icon-btn .zo-svg-icon path,
.zo-quick-panel .zo-panel-title .zo-svg-icon path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

.zo-header-actions button,
.zo-mobile-top-actions .zo-icon-btn {
  background: rgba(255,253,247,.88) !important;
  color: var(--zo-dark-green) !important;
}

/* quick settings panel readability */
.zo-floating-panels {
  color: var(--zo-dark-green) !important;
}

.zo-quick-panel,
.zo-quick-panel * {
  color: var(--zo-dark-green) !important;
}

.zo-quick-panel p,
.zo-panel-note {
  color: #5f655f !important;
}

.zo-quick-panel .zo-action-btn {
  background: rgba(255,253,247,.92) !important;
  color: var(--zo-dark-green) !important;
}

@media (max-width: 760px) {
  body .zo-floating-panels {
    position: fixed !important;
    top: 76px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(calc(100vw - 22px), 360px) !important;
    z-index: 9998 !important;
  }

  body .zo-quick-panel {
    width: 100% !important;
  }
}

/* ===== v2.1 mobile UI repair pass ===== */

/* mobile top action icons: visible, not dark dots */
.zo-mobile-top-actions .zo-icon-btn i,
.zo-quick-panel .zo-panel-title i,
.zo-panel-menu i {
  color: var(--zo-dark-green) !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.zo-mobile-top-actions .zo-icon-btn {
  background: rgba(255,253,247,.92) !important;
  color: var(--zo-dark-green) !important;
}

.zo-mobile-top-actions .zo-icon-btn .zo-svg-icon {
  width: 18px !important;
  height: 18px !important;
  stroke: var(--zo-dark-green) !important;
}

/* floating panels readability */
.zo-floating-panels,
.zo-floating-panels * {
  color: var(--zo-dark-green) !important;
}

.zo-quick-panel {
  background: #fffdf7 !important;
  border: 1px solid rgba(232,221,200,.92) !important;
  box-shadow: 0 22px 50px rgba(15,42,34,.14) !important;
}

.zo-quick-panel p,
.zo-panel-note,
.zo-panel-link {
  color: rgba(15,42,34,.70) !important;
}

.zo-panel-menu {
  display: grid;
  gap: 8px;
}

.zo-panel-menu a {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: 13px;
  text-decoration: none;
  background: rgba(248,243,231,.72);
  border: 1px solid rgba(232,221,200,.78);
  color: var(--zo-dark-green) !important;
  font-weight: 800;
}

.zo-panel-menu a:hover {
  background: rgba(47,143,91,.09);
}

/* updated create card copy */
.zo-wizard-card h3 {
  font-size: 20px !important;
  line-height: 1.15 !important;
}

.zo-wizard-card p {
  max-width: 330px !important;
}

/* background: use device-specific images with a lighter mobile overlay */
.zo-app-shell::before {
  background:
    linear-gradient(90deg, rgba(248,243,231,.80) 0%, rgba(248,243,231,.70) 48%, rgba(248,243,231,.78) 100%),
    var(--zo-bg-desktop, var(--zo-bg-image)) center top / cover no-repeat !important;
}

@media (max-width: 1440px) {
  .zo-app-shell::before {
    background:
      linear-gradient(90deg, rgba(248,243,231,.80) 0%, rgba(248,243,231,.72) 48%, rgba(248,243,231,.80) 100%),
      var(--zo-bg-laptop, var(--zo-bg-desktop, var(--zo-bg-image))) center top / cover no-repeat !important;
  }
}

@media (max-width: 820px) {
  .zo-app-shell::before {
    background:
      linear-gradient(180deg, rgba(248,243,231,.82) 0%, rgba(248,243,231,.70) 52%, rgba(248,243,231,.84) 100%),
      var(--zo-bg-tablet, var(--zo-bg-mobile, var(--zo-bg-image))) center top / cover no-repeat !important;
  }
}

@media (max-width: 760px) {
  .zo-app-shell::before,
  body .zo-app-shell::before,
  .zo-bg-overlay-light::before,
  .zo-bg-overlay-medium::before,
  .zo-bg-overlay-strong::before {
    background:
      linear-gradient(180deg, rgba(248,243,231,.78) 0%, rgba(248,243,231,.66) 52%, rgba(248,243,231,.82) 100%),
      var(--zo-bg-mobile, var(--zo-bg-tablet, var(--zo-bg-image))) center top / cover no-repeat !important;
  }
}

/* mobile: put intro card at the bottom, not before the counter */
@media (max-width: 760px) {
  body .zo-main-panel {
    display: flex !important;
    flex-direction: column !important;
  }

  body .zo-floating-panels {
    order: 0 !important;
  }

  body .zo-dashboard-grid {
    order: 1 !important;
  }

  body .zo-mobile-support-grid {
    order: 2 !important;
  }

  /* zo-app-shell zaten calc(108px + safe-area) alt dolgu taşıyor (sabit alt
     navigasyonu temizlemek için); header burada order:9 ile en sona
     taşındığından eski 96px alt boşluk (üstte, sayaçtan önceyken anlamlıydı)
     bu dolguyla üst üste biniyor ve ~230px boş alan bırakıyordu. */
  body .zo-main-header {
    order: 9 !important;
    margin: 12px 2px 16px !important;
    padding: 14px 13px !important;
    min-height: auto !important;
    text-align: center !important;
  }

  body .zo-header-copy {
    width: 100% !important;
  }

  body .zo-greeting {
    justify-content: center !important;
    margin-bottom: 6px !important;
  }

  body .zo-main-header h1 {
    font-size: 24px !important;
    line-height: 1.08 !important;
    margin-bottom: 7px !important;
  }

  body .zo-main-header p {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }
}

/* mobile target chips: horizontal slider, 3 visible, no custom input inside slider */
@media (max-width: 760px) {
  body .zo-target-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 0 2px 5px !important;
    margin: 0 0 7px !important;
    scroll-snap-type: x proximity !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
  }

  body .zo-target-chips::-webkit-scrollbar {
    display: none !important;
  }

  body .zo-target-chips button {
    flex: 0 0 calc((100% - 16px) / 3) !important;
    min-width: calc((100% - 16px) / 3) !important;
    max-width: calc((100% - 16px) / 3) !important;
    min-height: 42px !important;
    padding: 0 6px !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    scroll-snap-align: start !important;
  }

  body .zo-custom-zikir-inline {
    margin: 0 0 12px !important;
    max-width: 100% !important;
  }

  body .zo-custom-zikir-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 78px !important;
    gap: 6px !important;
    align-items: center !important;
  }

  body .zo-custom-zikir-row input {
    min-height: 42px !important;
    border-radius: 13px !important;
    font-size: 16px !important;
    padding-inline: 12px !important;
  }

  body .zo-custom-zikir-row .zo-soft-btn {
    min-height: 42px !important;
    border-radius: 13px !important;
    font-size: 12px !important;
    padding: 0 8px !important;
  }
}

/* counter breathing on mobile */
@media (max-width: 760px) {
  body .zo-current-zikir-spotlight {
    margin: 18px auto 12px !important;
  }

  body .zo-current-zikir-spotlight h2 {
    margin-bottom: 4px !important;
  }

  body .zo-progress-wrap {
    margin-top: 12px !important;
    margin-bottom: 10px !important;
  }

  body .zo-progress-ring {
    width: min(238px, 72vw) !important;
    height: min(238px, 72vw) !important;
  }

  body .zo-tap-note {
    margin-top: 12px !important;
  }

  body .zo-remaining {
    margin-top: 5px !important;
  }

  body .zo-counter-actions {
    grid-template-columns: 1fr 68px 1fr !important;
    max-width: 100% !important;
    gap: 8px !important;
    margin: 14px auto 0 !important;
  }

  body .zo-action-btn {
    min-height: 50px !important;
    display: inline-flex !important;
    gap: 7px !important;
    font-size: 12.5px !important;
    background: rgba(255,253,247,.92) !important;
  }

  body .zo-action-btn span {
    display: inline !important;
  }

  body .zo-plus-btn {
    width: 68px !important;
    height: 68px !important;
    flex: 0 0 68px !important;
  }
}

/* bottom nav: no confusing + button, centered and stable */
@media (max-width: 760px) {
  body .zo-mobile-bottom-nav {
    left: 50% !important;
    right: auto !important;
    width: min(calc(100vw - 16px), 430px) !important;
    transform: translateX(-50%) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    justify-items: stretch !important;
    gap: 2px !important;
    min-height: 66px !important;
    padding: 7px 8px !important;
    overflow: visible !important;
  }

  body .zo-mobile-bottom-nav a,
  body .zo-mobile-bottom-nav button,
  body .zo-mobile-bottom-nav .zo-mobile-nav-primary,
  body .zo-mobile-bottom-nav .zo-mobile-daily-btn {
    width: 100% !important;
    height: 52px !important;
    min-height: 52px !important;
    border-radius: 16px !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--zo-dark-green) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 3px !important;
    font-size: 12px !important;
  }

  body .zo-mobile-bottom-nav .zo-mobile-nav-primary {
    background: var(--zo-emerald) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(47,143,91,.22) !important;
  }

  body .zo-mobile-bottom-nav button .zo-svg-icon,
  body .zo-mobile-bottom-nav a .zo-svg-icon {
    width: 18px !important;
    height: 18px !important;
  }

  body .zo-mobile-bottom-nav .zo-mobile-nav-primary .zo-svg-icon {
    width: 20px !important;
    height: 20px !important;
  }

  body .zo-mobile-bottom-nav span {
    max-width: 58px !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: center !important;
  }
}

@media (max-width: 380px) {
  body .zo-target-chips button {
    flex-basis: calc((100% - 8px) / 2.25) !important;
    min-width: calc((100% - 8px) / 2.25) !important;
    max-width: calc((100% - 8px) / 2.25) !important;
  }

  body .zo-mobile-bottom-nav {
    width: min(calc(100vw - 10px), 390px) !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }

  body .zo-mobile-bottom-nav span {
    font-size: 12px !important;
  }
}

/* v2.1 desktop target chips fit 6 options */
@media (min-width: 761px) { .zo-target-chips { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 8px !important; } .zo-target-chips button { min-width: 0 !important; padding-inline: 6px !important; } }

/* ===== v3.4 mobile background visibility repair ===== */
.zo-app-shell::before {
  z-index: 0 !important;
}

.zo-app-shell > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  body .zo-app-shell::before {
    background-position: center top !important;
  }

  body .zo-mobile-bg-position-center::before {
    background-position: center center !important;
  }

  body .zo-mobile-bg-position-bottom::before {
    background-position: center bottom !important;
  }

  body .zo-mobile-overlay-light::before {
    background-image:
      linear-gradient(180deg, rgba(248,243,231,.64) 0%, rgba(248,243,231,.50) 52%, rgba(248,243,231,.72) 100%),
      var(--zo-bg-mobile, var(--zo-bg-tablet, var(--zo-bg-image))) !important;
  }

  body .zo-mobile-overlay-medium::before {
    background-image:
      linear-gradient(180deg, rgba(248,243,231,.76) 0%, rgba(248,243,231,.64) 52%, rgba(248,243,231,.80) 100%),
      var(--zo-bg-mobile, var(--zo-bg-tablet, var(--zo-bg-image))) !important;
  }

  body .zo-mobile-overlay-strong::before {
    background-image:
      linear-gradient(180deg, rgba(248,243,231,.88) 0%, rgba(248,243,231,.80) 52%, rgba(248,243,231,.90) 100%),
      var(--zo-bg-mobile, var(--zo-bg-tablet, var(--zo-bg-image))) !important;
  }

  body .zo-mobile-bg-off::before {
    background-image: linear-gradient(180deg, #f8f3e7 0%, #f3ecdc 100%) !important;
  }
}

/* 2026-09-16 (breakpoint birleştirmesi QA turu, bkz. ROADMAP.md P1 madde 8):
 * `.zo-dashboard-grid`'in masaüstü 2 sütunlu düzeni (`minmax(0,1fr) 360px`,
 * yukarıda ~satır 2877, `!important`) her zaman masaüstünde aktifti — ama
 * masaüstü daha önce yalnız >=1181px'te başladığı için ilk sütun hiçbir
 * zaman 500px'in altına düşmüyordu. Ana sayfa eşiği 820px'e taşınınca bu
 * düzen 821-1180px aralığında da devreye girdi; bu aralıkta ilk sütun
 * 174-533px'e kadar daralabiliyor, ki bu genişlikte "Özel Sayı/33/99/100/
 * 1000/∞" hedef çipleri (.zo-target-chips, 6 öğe) üst üste biniyor ve
 * okunaksız hale geliyordu (production'da ölçüldü: 821px'te çip
 * konteyneri 136px, her çip yalnız ~23px). Kök neden bu iki sütunlu
 * düzenin hiçbir zaman bu kadar dar bir toplam genişlikte çalışacak
 * şekilde tasarlanmamış olması. Çözüm: PageChrome ailesinin de kullandığı
 * "kompakt masaüstü" aralığında (sidebar görünür ama tam genişlik değil)
 * dashboard'u tek sütuna zorla — tam olarak bu aralığın ESKİ (1180'e
 * kilitli mobil paket) davranışıyla aynı, yalnız artık sidebar da
 * görünür kalıyor. */
@media (min-width: 821px) and (max-width: 1180px) {
  .zo-dashboard-grid {
    grid-template-columns: 1fr !important;
  }
}