/* ══ DESIGN TOKENS ══════════════════════════════════════════════ */
:root {
  --bg: #080c18;
  --bg2: #0d1226;
  --card: #111827;
  --card2: #0f1520;
  --border: rgba(255, 255, 255, .07);
  --border2: rgba(255, 255, 255, .12);
  --text: #e8eeff;
  --muted: #7a8fa8;
  --sub: #364d68;
  --accent: #2dd4bf;
  --accent2: #14b8a6;
  --warn: #f59e0b;
  --danger: #f87171;
  --ok: #4ade80;
  --r: 12px;
  --r-sm: 8px;
  --r-xs: 6px;
  --shadow: 0 4px 24px rgba(0, 0, 0, .35);
  --glow: 0 0 32px rgba(45, 212, 191, .08);
  --font: 'Poppins', system-ui, sans-serif;
}

[data-theme="day"] {
  --bg: #f5f7ff;
  --bg2: #eceffe;
  --card: #ffffff;
  --card2: #f7f8ff;
  --border: rgba(0, 0, 0, .07);
  --border2: rgba(0, 0, 0, .12);
  --text: #0f172a;
  --muted: #4b5e78;
  --sub: #9fb3c8;
  --accent: #0d9488;
  --accent2: #0f766e;
  --warn: #d97706;
  --danger: #dc2626;
  --ok: #16a34a;
  --shadow: 0 2px 18px rgba(0, 0, 0, .07);
  --glow: 0 0 24px rgba(13, 148, 136, .07);
}

/* ══ PER-LANGUAGE FONTS & DIRECTION ════════════════════════════ */
[data-lang="bn"] {
  --font: 'Hind Siliguri', system-ui, sans-serif
}

[data-lang="ar"] {
  --font: 'Amiri', serif;
  direction: rtl
}

[data-lang="ur"] {
  --font: 'Noto Nastaliq Urdu', serif;
  direction: rtl
}

[data-lang="ps"] {
  --font: 'Noto Nastaliq Urdu', serif;
  direction: rtl
}

[data-lang="ar"] body,
[data-lang="ur"] body,
[data-lang="ps"] body {
  line-height: 1.9
}

/* ══ RESET ═══════════════════════════════════════════════════════ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  min-height: 100dvh;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
}

/* ══ LAYOUT ══════════════════════════════════════════════════════ */
.page-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 16px 16px
}

.two-col {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 16px;
  align-items: start
}

@media(max-width:900px) {
  .two-col {
    grid-template-columns: 1fr
  }
}

.hide {
  display: none !important
}

/* ══ HEADER ══════════════════════════════════════════════════════ */
.hdr {
  position: sticky;
  top: 0;
  z-index: 400;
  direction: ltr;
  background: var(--bg);
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--border);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

.hdr.hdr-hidden {
  transform: translateY(-110%)
}
/* Header never hides on desktop — only hide-on-scroll on mobile */
@media(min-width:961px) {
  .hdr,
  .hdr.hdr-hidden {
    transform: none !important;
    transition: none;
  }
}
.hdr-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 16px
}

.hdr-top {
  display: flex;
  align-items: center;
  gap: 10px
}

.hdr-brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px
}

.hdr-logo {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  object-fit: contain;
  flex-shrink: 0
}

.hdr-brand-text h1 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.3px;
  white-space: nowrap
}

.hdr-brand-text h1 em {
  color: var(--accent);
  font-style: normal
}

/* Desktop nav (stacked second row) */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  background: var(--card);
  border: 1px solid var(--border);
  transition: color .15s, border-color .15s, box-shadow .15s, transform .15s;
}

.nav-link i {
  font-size: 15px
}

.nav-link:hover {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 12px rgba(45, 212, 191, .2);
  transform: translateY(-1px);
}

.nav-link.donate-link {
  color: var(--warn);
  border-color: rgba(245, 158, 11, .3);
  background: rgba(245, 158, 11, .06)
}

.nav-link.donate-link:hover {
  border-color: var(--warn);
  box-shadow: 0 0 12px rgba(245, 158, 11, .18)
}

/* Header right */
.hdr-right {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  font-size: 16px;
}

.icon-btn:hover {
  color: var(--text);
  border-color: var(--border2);
  background: var(--card)
}

.status-dot {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  padding: 5px 10px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sub)
}

.dot.ok {
  background: var(--ok)
}

.dot.saving {
  background: var(--warn);
  animation: blink .8s infinite
}

.dot.err {
  background: var(--danger)
}

@keyframes blink {

  0%,
  100% {
    opacity: 1
  }

  50% {
    opacity: .25
  }
}

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4.5px;
  width: 36px;
  height: 36px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: .2s;
}

.hamburger:hover {
  border-color: var(--border2);
  background: var(--card)
}

.hamburger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--muted);
  border-radius: 2px;
  transition: transform .25s, opacity .2s;
  transform-origin: center;
}

.hamburger.open span:nth-child(1) {
  transform: translateY(6px) rotate(45deg)
}

.hamburger.open span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0)
}

.hamburger.open span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg)
}

/* Mobile nav — curtain slides from top, BELOW sticky header (z-index:200 < header:400) */
.mobile-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  direction: ltr;
  background: linear-gradient(160deg, var(--card) 0%, var(--bg2) 100%);
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
  will-change: transform;
}

.mobile-nav.open {
  transform: translateY(0)
}

/* 3-column card grid: 6 nav items = 2 even rows */
.mob-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 14px 8px;
}

.mob-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 14px 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--bg2);
  border-radius: var(--r);
  cursor: pointer;
  font-family: var(--font);
  transition: color .15s, border-color .15s, background .15s, transform .15s;
  overflow: hidden;
}

.mob-nav-link span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mob-nav-link i {
  font-size: 20px
}

.mob-nav-link:hover,
.mob-nav-link:active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(45, 212, 191, .06);
  transform: translateY(-2px);
}

/* Donate: full-width row, horizontal layout */
.mob-nav-link.donate-mob {
  grid-column: 1/-1;
  flex-direction: row;
  gap: 8px;
  padding: 13px 16px;
  color: var(--warn);
  border-color: rgba(245, 158, 11, .3);
  background: rgba(245, 158, 11, .05);
  justify-content: center;
}

.mob-nav-link.donate-mob:hover,
.mob-nav-link.donate-mob:active {
  border-color: var(--warn);
  background: rgba(245, 158, 11, .1);
}

/* Lang row inside mobile nav — single button + popup */
.mob-nav-lang {
  padding: 0 14px 14px
}

.mob-lang-wrap {
  position: relative
}

.mob-lang-single {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: color .15s, border-color .15s;
}

.mob-lang-single i.lg {
  font-size: 17px;
  flex-shrink: 0
}

.mob-lang-single:hover {
  color: var(--accent);
  border-color: var(--accent)
}

.mob-lang-single #mob-lang-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

/* Mobile globe button — hidden everywhere (language via hamburger menu) */
.mob-globe-btn {
  display: none
}

@media(max-width:960px) {
  .lang-wrap {
    display: none
  }
}

/* ── Language Overlay ────────────────────────────────────────────── */
#lang-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  transform: translateY(-100%);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
}

#lang-overlay.open {
  transform: translateY(0)
}

.lo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
  flex-shrink: 0;
}

.lo-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
}

.lo-title i {
  font-size: 20px;
  color: var(--accent)
}

.lo-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: .15s;
}

.lo-close:hover {
  color: var(--text);
  border-color: var(--border2)
}

.lo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 16px 20px 32px;
}

@media(min-width:500px) {
  .lo-grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

.lo-lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  font-family: var(--font);
  transition: .15s;
}

.lo-lang-item:hover,
.lo-lang-item.lang-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(45, 212, 191, .06);
}

.lo-lang-flag {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0
}

.lo-lang-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.lo-lang-check {
  color: var(--ok);
  font-size: 15px;
  flex-shrink: 0;
  display: none
}

.lo-lang-item.lang-active .lo-lang-check {
  display: block
}

/* ── Install Banner ─────────────────────────────────────────────── */
#install-banner {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 500;
  background: var(--card);
  border-top: 1px solid var(--border2);
  padding: 12px 16px;
  gap: 10px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 -4px 24px rgba(0, 0, 0, .3);
}

#install-banner.show {
  display: flex
}

#install-banner > i {
  font-size: 20px;
  color: var(--accent);
  flex-shrink: 0
}

#install-trigger-btn i { color: inherit; }
.install-dismiss i      { color: inherit; }

#install-banner span {
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  flex: 1
}

#install-trigger-btn {
  padding: 8px 16px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: #032923;
  border: none;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font);
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  white-space: nowrap;
  transition: .15s;
}

#install-trigger-btn:hover {
  background: var(--accent2)
}

.install-dismiss {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--sub);
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .15s;
}

.install-dismiss:hover {
  border-color: var(--border2);
  color: var(--muted)
}

/* Lang dropdown */
.lang-wrap {
  position: relative
}

.lang-drop {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  min-width: 148px;
  z-index: 500;
  max-height: 320px;
  overflow-y: auto;
  box-shadow: var(--shadow);
}

.lang-opt {
  width: 100%;
  text-align: center;
  padding: 10px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font);
  font-weight: 500;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  transition: background .12s;
}

.lang-opt:last-child {
  border-bottom: none
}

.lang-opt:hover,
.lang-opt.active {
  background: var(--bg2);
  color: var(--accent)
}

/* Responsive */
@media(max-width:960px) {
  .desktop-nav {
    display: none
  }

  .hamburger {
    display: flex
  }

  .mob-bottom-tabs {
    display: flex !important
  }

  .lang-wrap {
    display: none
  }

  .hdr-brand {
    flex: 1 1 auto;
    min-width: 0
  }

  .hdr-brand-text h1 {
    font-size: 14px;
    white-space: normal;
    line-height: 1.3
  }

  .section-hdr {
    justify-content: center
  }

  .section-title {
    justify-content: center;
    text-align: center
  }

  .section-hdr-btns {
    display: flex !important;
    gap: 4px;
    align-items: center;
    flex-shrink: 0
  }

  body {
    padding-bottom: calc(60px + env(safe-area-inset-bottom))
  }
}

@media(min-width:961px) {
  .hamburger {
    display: none
  }

  .mobile-nav {
    display: none !important
  }
}

@media(max-width:600px) {
  .status-dot {
    display: none
  }
}

/* ══ DESKTOP OVERRIDES ════════════════════════════════════════════ */
@media(min-width:961px) {
  .mob-bottom-tabs {
    display: none !important
  }

  /* ── Glass top header (sticky, horizontal) ── */
  .hdr {
    background: rgba(8, 12, 24, .75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 2px 32px rgba(0, 0, 0, .22);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }

  [data-theme="day"] .hdr {
    background: rgba(245, 247, 255, .82);
    box-shadow: 0 2px 20px rgba(0, 0, 0, .07);
    border-bottom: 1px solid rgba(0, 0, 0, .07);
  }

  /* Content panes — 3-column: stats | schedule | juz */
  .content-panes {
    display: grid;
    grid-template-columns: 240px 1fr 280px;
    grid-template-rows: 1fr auto;
    gap: 16px 16px;
    align-items: stretch;
  }

  /* Desktop footer: spans all 3 columns in row 2 */
  .desktop-footer {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
    padding: 8px 0 4px;
  }

  /* display:contents lets stats-panel and juz-panel become direct grid children */
  #tab-progress {
    display: contents !important
  }

  #stats-panel {
    grid-column: 1;
    position: sticky;
    top: 16px
  }

  #tab-schedule {
  grid-column: 2;
  display: flex !important;
  flex-direction: column;
  /* Fixed children (session-card, section-hdr) escape overflow regardless */
  overflow: visible;
}
/* Desktop: dock session card under header (never moves) */
@media (min-width: 961px) {
  #tab-schedule {
    /* create space so content below doesn't go under the fixed card */
    padding-top: calc(var(--sess-h, 110px) + 16px);
  }

  .session-card {
    position: fixed;
    top: calc(var(--hdr-h, 68px) + 12px);
    left: var(--sess-left, 0px);
    width: var(--sess-w, 600px);
    z-index: 200;
    background: var(--card);
    box-shadow: 0 6px 24px rgba(0,0,0,.18);
  }
}
  #juz-panel {
    grid-column: 3;
    position: sticky;
    top: 16px
  }

  .section-hdr-btns {
    display: flex !important
  }

  /* 2-column day cards */
  .day-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px
  }
}

/* ══ CARDS ═══════════════════════════════════════════════════════ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px;
}

.card-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-title i {
  font-size: 15px;
  color: var(--accent)
}

/* ══ STATS ROW ═══════════════════════════════════════════════════ */
.stats-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 16px;
  flex: 1;
  min-width: 90px;
}

.stat-icon {
  font-size: 16px;
  color: var(--accent);
  margin-bottom: 4px
}

.stat-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1
}

.stat-lbl {
  font-size: 10px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%
}

.prog-bar {
  height: 4px;
  background: var(--border2);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 16px
}

.prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 999px;
  transition: .5s
}

/* ══ FORM ════════════════════════════════════════════════════════ */
.flabel {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin: 12px 0 5px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

select,
input[type=number],
input[type=date],
input[type=text] {
  width: 100%;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--text);
  font-size: 13px;
  font-family: var(--font);
  font-weight: 500;
  outline: none;
  transition: border-color .15s;
}

select:focus,
input:focus {
  border-color: var(--accent)
}

.row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}

.tiny {
  font-size: 11px;
  color: var(--sub);
  margin-top: 4px
}

/* ══ BUTTONS ══════════════════════════════════════════════════════ */
.btn {
  cursor: pointer;
  border: none;
  border-radius: var(--r-sm);
  padding: 10px 18px;
  font-weight: 600;
  font-size: 13px;
  font-family: var(--font);
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: .15s;
  white-space: nowrap;
}

.btn i {
  font-size: 15px
}

.btn-primary {
  background: var(--accent);
  color: #032923;
  border-radius: 999px;
  padding: 11px 22px;
}

.btn-primary:hover {
  background: var(--accent2);
  transform: translateY(-1px)
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border2);
}

.btn-ghost:hover {
  color: var(--text);
  border-color: var(--border2);
  background: var(--card)
}

.btn-danger {
  background: rgba(248, 113, 113, .1);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, .2);
}

.btn-danger:hover {
  background: rgba(248, 113, 113, .18)
}

.btn:disabled {
  opacity: .35;
  cursor: not-allowed
}

.btn-sm {
  padding: 6px 12px;
  font-size: 12px
}

.btn-sm.btn-primary {
  padding: 7px 14px;
  border-radius: var(--r-sm)
}

.btn-start {
  background: rgba(45, 212, 191, .1);
  color: var(--accent);
  border: 1px solid rgba(45, 212, 191, .2);
}

.btn-start:hover {
  background: rgba(45, 212, 191, .18)
}

.btn-pause {
  background: rgba(245, 158, 11, .1);
  color: var(--warn);
  border: 1px solid rgba(245, 158, 11, .2);
}

.btn-pause:hover {
  background: rgba(245, 158, 11, .18)
}

.actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px
}

/* ══ MODE TABS ════════════════════════════════════════════════════ */
.mode-tabs {
  display: flex;
  gap: 3px;
  background: var(--bg2);
  border-radius: var(--r-sm);
  padding: 3px;
  border: 1px solid var(--border);
}

.mode-tab {
  flex: 1;
  text-align: center;
  padding: 7px 4px;
  border-radius: var(--r-xs);
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  background: transparent;
  border: none;
  transition: .15s;
  font-family: var(--font);
  letter-spacing: .2px;
}

.mode-tab.active {
  background: var(--accent);
  color: #032923
}

.mode-tab:hover:not(.active) {
  color: var(--text);
  background: var(--border)
}

/* ══ CHIPS ════════════════════════════════════════════════════════ */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px
}

.chip {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border2);
  background: var(--bg2);
  color: var(--muted);
}

.chip.j {
  border-color: rgba(245, 158, 11, .3);
  color: var(--warn)
}

.chip.h {
  border-color: rgba(167, 139, 250, .3);
  color: #c4b5fd
}

.chip.r {
  border-color: rgba(45, 212, 191, .25);
  color: var(--accent)
}

.chip.p {
  border-color: rgba(96, 165, 250, .3);
  color: #93c5fd
}

.chip.s {
  border-color: rgba(74, 222, 128, .25);
  color: var(--ok)
}

.chip.done {
  border-color: rgba(74, 222, 128, .3);
  background: rgba(74, 222, 128, .07);
  color: var(--ok)
}

/* ══ JUZ GRID ════════════════════════════════════════════════════ */
.juz-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 14px;
}

.juz-sstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 6px;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* right column: no right border */
.juz-sstat:nth-child(2n) {
  border-right: none;
}

/* bottom row (last 2): no bottom border */
.juz-sstat:nth-last-child(-n+2) {
  border-bottom: none;
}

.juz-sstat-val {
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  color: var(--text)
}

.juz-sstat-val.jss-done {
  color: var(--ok)
}

.juz-sstat-val.jss-act {
  color: var(--accent)
}

.juz-sstat-lbl {
  font-size: 9px;
  font-weight: 600;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%
}

.juz-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  overflow: hidden;
  contain: layout style paint
}

@media(min-width:961px) {
  .juz-grid {
    grid-template-columns: repeat(5, 1fr)
  }
}

@media(max-width:500px) {
  .juz-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 5px
  }
}

.juz-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 4px 7px;
  cursor: default;
  transition: transform .15s, border-color .2s, box-shadow .2s;
}

.juz-cell:hover {
  transform: translateY(-2px);
  border-color: var(--border2)
}

.juz-cell.j-planned {
  border-color: rgba(45, 212, 191, .2)
}

.juz-cell.j-active {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(45, 212, 191, .1)
}

.juz-cell.j-done {
  border-color: rgba(74, 222, 128, .35);
  background: rgba(74, 222, 128, .04)
}

/* Circular ring */
.juz-ring-wrap {
  position: relative;
  width: min(42px, 100%);
  aspect-ratio: 1
}

.juz-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg)
}

.juz-ring-bg {
  fill: none;
  stroke: var(--border2);
  stroke-width: 3.5
}

.juz-ring-fill {
  fill: none;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 0 100;
  transition: stroke-dasharray .5s ease-out;
}

.j-active .juz-ring-fill {
  stroke: var(--accent)
}

.j-done .juz-ring-fill {
  stroke: var(--ok)
}

.j-planned .juz-ring-fill {
  stroke: rgba(45, 212, 191, .4)
}

.juz-ring-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.juz-ring-inner .jn {
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  color: var(--text)
}

.juz-cell.j-active .juz-ring-inner .jn {
  color: var(--accent)
}

.juz-cell.j-done .juz-ring-inner .jn {
  color: var(--ok)
}

.juz-cell .jlbl {
  font-size: 8px;
  font-weight: 600;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-top: 4px;
  line-height: 1
}

.juz-cell .jpct {
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1
}

.juz-cell.j-active .jpct {
  color: var(--accent)
}

.juz-cell.j-done .jpct {
  color: var(--ok)
}

.juz-cell.j-done {
  box-shadow: 0 0 0 1px rgba(74, 222, 128, .25)
}

/* ══ JCARD TABS (Juz | Page) ══════════════════════════════════════ */
.jcard-tabs {
  display: flex;
  gap: 4px;
  margin: 8px 0 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px
}

.jcard-tab {
  flex: 1;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  color: var(--sub);
  background: none;
  border: none;
  cursor: pointer;
  transition: all .2s;
  text-transform: uppercase;
  letter-spacing: .5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px
}

.jcard-tab:hover {
  background: var(--bg2);
  color: var(--text)
}

.jcard-tab.active {
  background: var(--bg2);
  color: var(--accent)
}

/* ══ PAGE GRID ════════════════════════════════════════════════════ */
.page-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 12px
}

.page-sstat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px 4px;
  background: var(--bg2);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* right column: no right border */
.page-sstat:nth-child(2n) {
  border-right: none;
}

/* bottom row (last 2): no bottom border */
.page-sstat:nth-last-child(-n+2) {
  border-bottom: none;
}

.page-sstat-val {
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  color: var(--text)
}

.page-sstat-val.pss-done {
  color: var(--ok)
}

.page-sstat-val.pss-act {
  color: var(--accent)
}

.page-sstat-lbl {
  font-size: 9px;
  font-weight: 600;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(22, 1fr);
  gap: 2px
}

.page-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  background: var(--border);
  transition: transform .1s, filter .1s;
  cursor: default
}

.page-cell:hover {
  transform: scale(1.4);
  z-index: 1;
  position: relative;
  filter: brightness(1.15)
}

.page-cell.pc-none {
  background: var(--bg2);
  opacity: .35
}

.page-cell.pc-planned {
  background: var(--border2)
}

.page-cell.pc-partial {
  background: var(--accent);
  opacity: .55
}

.page-cell.pc-done {
  background: var(--ok)
}

.pg-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border)
}

.pgl-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--sub)
}

.pgl-dot {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0
}

/* ══ PGBOX MODE TABS ══════════════════════════════════════════════ */
.pgbox-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px
}

.pg-mode-tabs {
  display: flex;
  gap: 2px;
  flex: 1;
  background: var(--bg2);
  border-radius: var(--r-sm);
  padding: 2px
}

.pg-mtab {
  flex: 1;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  border: none;
  background: none;
  color: var(--sub);
  cursor: pointer;
  transition: all .15s;
  text-transform: uppercase;
  letter-spacing: .5px
}

.pg-mtab:hover {
  color: var(--text)
}

.pg-mtab.active {
  background: var(--card);
  color: var(--accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12)
}

.pg-pane {
  display: none
}

.pg-pane.active {
  display: block
}

.pg-calc-info {
  font-size: 11px;
  color: var(--sub);
  margin-top: 5px;
  font-weight: 500
}

.pg-para-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 2px 0
}

.pg-para-lbl {
  font-size: 11px;
  color: var(--sub);
  font-weight: 600;
  white-space: nowrap
}

.pg-juz-sel {
  padding: 3px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer
}

/* ══ DAY CARDS ════════════════════════════════════════════════════ */
.day-list {
  display: flex;
  flex-direction: column;
  gap: 8px
}

.day-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  transition: .15s;
}

.day-card.done-card {
  border-color: rgba(74, 222, 128, .2);
  background: rgba(74, 222, 128, .02);
}

.day-card.today-card {
  border-color: var(--accent);
  box-shadow: var(--glow)
}

.dcard-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  cursor: pointer;
  user-select: none;
}

.dcard-head:hover {
  background: rgba(255, 255, 255, .02)
}

.day-num {
  min-width: 40px;
  text-align: center;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r-xs);
  padding: 5px 4px;
}

.day-num .dn-n {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  color: var(--text)
}

.day-num .dn-lbl {
  font-size: 8px;
  font-weight: 600;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 2px
}

.dcard-info {
  flex: 1;
  min-width: 0
}

.dcard-date {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted)
}

.dcard-date .greg {
  font-weight: 600;
  color: var(--text)
}

.dcard-ayah {
  font-size: 11px;
  color: var(--sub);
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.dcard-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto
}

.dcard-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  min-width: 36px;
  text-align: right
}

.mini-bar {
  width: 60px;
  height: 4px;
  background: var(--border2);
  border-radius: 999px;
  overflow: hidden
}

.mini-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 999px;
  transition: .3s
}

.done-badge {
  font-size: 10px;
  font-weight: 700;
  background: rgba(74, 222, 128, .1);
  color: var(--ok);
  border: 1px solid rgba(74, 222, 128, .25);
  border-radius: 999px;
  padding: 3px 9px;
  white-space: nowrap;
}

.chev {
  font-size: 13px;
  color: var(--sub);
  transition: transform .2s;
  margin-left: 2px
}

.day-card.open .chev {
  transform: rotate(180deg)
}

.dcard-body {
  display: none;
  padding: 0 16px 16px;
  border-top: 1px solid var(--border)
}

.day-card.open .dcard-body {
  display: block
}

.dcard-units {
  padding: 10px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}

.pgbox {
  margin-top: 12px
}

.pgbox-eta {
  font-size: 11px;
  color: var(--sub);
  white-space: nowrap;
  flex-shrink: 0
}

.pg-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px
}

.pg-input-row input[type=number] {
  max-width: 72px
}

.pg-sep {
  color: var(--sub);
  font-size: 13px
}

.pg-total {
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  font-weight: 500
}

input[type=range] {
  width: 100%;
  accent-color: var(--accent);
  cursor: pointer
}

.pgbar-track {
  height: 6px;
  background: var(--border2);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px
}

.pgbar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 999px;
  transition: .2s
}

.timer-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.timer-disp {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
  min-width: 80px;
  flex-shrink: 0;
}

.timer-btns {
  display: flex;
  gap: 6px;
  margin-left: auto;
  flex-shrink: 0
}

.timer-foot {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 7px;
  font-size: 10px;
  color: var(--sub);
  font-weight: 500;
}

.timer-foot i {
  font-size: 10px;
  color: var(--accent);
  flex-shrink: 0
}

.tf-sep {
  color: var(--border2)
}

.surah-list {
  margin-top: 8px
}

.surah-seg {
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.surah-seg:last-child {
  border-bottom: none
}

.surah-seg .sn {
  color: var(--text);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 65%
}

.surah-seg .sn-ar {
  color: var(--sub);
  font-size: 11px;
  font-weight: 400;
  font-family: serif;
  margin-left: 4px
}

.surah-seg .sa {
  color: var(--accent);
  font-size: 11px;
  font-weight: 600
}

/* ══ SESSION TIMER ════════════════════════════════════════════════ */
.session-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 20px;
}

.sess-main {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap
}

.sess-time {
  font-size: 30px;
  font-weight: 700;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  letter-spacing: -.5px;
}

.sess-info {
  flex: 1;
  min-width: 0
}

.sess-label {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 2px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.sess-pages {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}

.sess-btns {
  display: flex;
  gap: 6px;
  flex-shrink: 0
}

@media(max-width:480px) {
  .sess-main {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "time btns" "info info";
    gap: 6px 10px
  }

  .sess-time {
    grid-area: time;
    font-size: 24px;
    align-self: center
  }

  .sess-btns {
    grid-area: btns;
    align-self: center
  }

  .sess-info {
    grid-area: info
  }

  .sess-label {
    white-space: normal;
    overflow: visible;
    text-overflow: unset
  }
}

/* ══ DATE RANGE ═══════════════════════════════════════════════════ */
.date-range-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.date-range-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap
}

.dr-block {
  flex: 1;
  min-width: 130px
}

.dr-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--sub);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 3px
}

.dr-greg {
  font-size: 14px;
  font-weight: 700;
  color: var(--text)
}

.dr-hijri {
  font-size: 12px;
  color: var(--accent);
  margin-top: 1px
}

.dr-arrow {
  font-size: 18px;
  color: var(--border2);
  flex: 0
}

.dr-plan .dr-greg {
  color: var(--warn);
  font-size: 13px
}

.preview-dates {
  width: 100%;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  padding-top: 12px
}

.pd-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
}

.pd-row:last-child {
  border-bottom: none
}

.pd-lbl {
  font-size: 11px;
  color: var(--sub);
  min-width: 50px;
  font-weight: 500
}

.pd-greg {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  flex: 1
}

.pd-hijri {
  font-size: 12px;
  color: var(--accent)
}

/* ══ SECTION HEADER ═══════════════════════════════════════════════ */
.section-hdr {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: var(--bg);
  padding: 10px 0 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}

.section-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  display: flex;
  gap: 8px;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.section-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.section-title i {
  font-size: 15px;
  color: var(--accent);
  flex-shrink: 0
}

/* ══ SURAH SELECT ═════════════════════════════════════════════════ */
.surah-ayah-group {
  display: flex;
  gap: 6px;
  align-items: flex-end
}

.surah-ayah-group select {
  flex: 2
}

.surah-ayah-group input {
  flex: 1
}

/* ══ LOADING ══════════════════════════════════════════════════════ */
.loading {
  text-align: center;
  padding: 40px;
  color: var(--sub);
  font-size: 13px
}

.loading-spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 0 auto 12px;
}

@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}

.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--sub)
}

.empty i {
  font-size: 36px;
  margin-bottom: 10px;
  display: block;
  color: var(--border2)
}

/* ══ TOAST ════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  padding: 10px 18px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  font-family: var(--font);
  transition: opacity .25s, transform .25s;
  transform: translateY(8px);
  pointer-events: none;
}

.toast.show {
  opacity: 1;
  transform: translateY(0)
}

.toast.saved {
  background: #0f2419;
  color: var(--ok);
  border: 1px solid rgba(74, 222, 128, .25)
}

.toast.saving {
  background: #201a07;
  color: var(--warn);
  border: 1px solid rgba(245, 158, 11, .25)
}

.toast.error {
  background: #200a0a;
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, .25)
}

/* ══ APP FOOTER ═══════════════════════════════════════════════════ */
.app-footer {
  margin-top: auto;
  padding: 14px 4px 4px;
  border-top: 1px solid var(--border);
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  color: var(--txt2);
  opacity: .5;
  letter-spacing: .02em;
  flex-shrink: 0;
  line-height: 2;
}

.app-footer a,
.app-footer a:link,
.app-footer a:visited {
  color: inherit;
  text-decoration: none !important;
  transition: color .15s, opacity .15s;
}

.app-footer a:hover {
  opacity: 1;
  color: var(--accent);
}

.app-footer-sep {
  margin: 0 3px;
  opacity: .5;
}

.app-footer-ver {
  font-family: monospace;
  font-size: 10px;
  letter-spacing: .04em;
  opacity: .8;
}

/* Desktop footer hidden on mobile — hamburger menu has its own */
.desktop-footer {
  display: none !important;
}

@media(min-width: 961px) {
  .desktop-footer {
    display: block !important;
  }
}

/* Mobile nav footer — compact, centered, no overflow */
.mob-nav-footer {
  margin-top: 4px;
  padding: 8px 12px 14px;
  border-top: 1px solid var(--border);
  border-radius: 0;
  font-size: 10px;
  line-height: 1.9;
  text-align: center;
  word-break: break-word;
}

/* ══ SPLASH SCREEN ════════════════════════════════════════════════ */
#splash-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity .5s ease;
  pointer-events: all;
}

#splash-screen.splash-done {
  opacity: 0;
  pointer-events: none;
}

.splash-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.splash-logo {
  width: 72px;
  height: 72px;
  animation: splash-pop .55s cubic-bezier(.34, 1.56, .64, 1) both;
}

@keyframes splash-pop {
  from { transform: scale(.4); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.splash-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.2;
}

/* Typewriter reveal — wraps text; border-right = blinking cursor */
.splash-type-wrap {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
  border-right: 2.5px solid var(--accent);
  vertical-align: bottom;
  animation:
    splash-reveal 1.8s steps(22, end) .35s forwards,
    splash-caret  .65s step-end       .35s infinite;
}

@keyframes splash-reveal {
  to { max-width: 400px; }
}

@keyframes splash-caret {
  50% { border-color: transparent; }
}

/* Stop cursor after splash fades */
.splash-done .splash-type-wrap {
  animation: none;
  border-color: transparent;
}

.splash-bar-wrap {
  width: 160px;
  height: 3px;
  background: var(--border2);
  border-radius: 99px;
  overflow: hidden;
  opacity: 0;
  animation: splash-bar-appear .3s ease .6s forwards;
}

@keyframes splash-bar-appear {
  to { opacity: 1; }
}

.splash-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--accent), var(--primary, #6366f1));
  border-radius: 99px;
  animation: splash-progress 2.2s cubic-bezier(.4, 0, .2, 1) .6s forwards;
}

@keyframes splash-progress {
  0%   { width: 0%; }
  60%  { width: 75%; }
  100% { width: 92%; }
}

/* ══ DONATION MODAL ═══════════════════════════════════════════════ */
.donate-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, .6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s;
  backdrop-filter: blur(4px);
}

.donate-overlay.open {
  opacity: 1;
  pointer-events: all
}

.donate-modal {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: var(--r);
  padding: 32px 28px;
  max-width: 400px;
  width: 100%;
  box-shadow: var(--shadow);
  text-align: center;
  transform: translateY(16px) scale(.96);
  transition: transform .22s;
}

.donate-overlay.open .donate-modal {
  transform: translateY(0) scale(1)
}

.donate-modal .dm-icon {
  font-size: 36px;
  color: var(--warn);
  margin-bottom: 10px
}

.donate-modal h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 5px
}

.donate-modal p {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 24px;
  line-height: 1.6
}

.donate-btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 16px
}

.btn-vipps {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  background: #ff5b24;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: .15s;
  font-family: var(--font);
}

.btn-vipps:hover {
  background: #e54e1e;
  transform: translateY(-2px)
}

.btn-paypal {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 999px;
  background: #003087;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: .15s;
  font-family: var(--font);
}

.btn-paypal:hover {
  background: #002060;
  transform: translateY(-2px)
}

.donate-close {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--muted);
  border-radius: var(--r-xs);
  padding: 7px 20px;
  cursor: pointer;
  font-size: 12px;
  font-family: var(--font);
  font-weight: 600;
  transition: .15s;
}

.donate-close:hover {
  border-color: var(--border2);
  color: var(--text)
}

/* ══ SCROLLBAR ════════════════════════════════════════════════════ */
::-webkit-scrollbar {
  width: 4px;
  height: 4px
}

::-webkit-scrollbar-track {
  background: transparent
}

::-webkit-scrollbar-thumb {
  background: var(--border2);
  border-radius: 2px
}

/* ══ RESPONSIVE TWEAKS ════════════════════════════════════════════ */
@media(max-width:600px) {
  .stats-row {
    gap: 6px
  }

  .stat {
    min-width: 70px;
    padding: 10px 8px
  }

  .stat-val {
    font-size: 16px
  }

  .mini-bar {
    width: 50px
  }

  .dcard-right {
    flex-wrap: wrap;
    justify-content: flex-end
  }
}

/* ══ MOBILE BOTTOM TABS ═══════════════════════════════════════════ */
.mob-bottom-tabs {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: var(--card);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -2px 16px rgba(0, 0, 0, .2);
}

.mbt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 10px 4px 8px;
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: color .15s;
}

.mbt i {
  font-size: 20px
}

.mbt.active {
  color: var(--accent)
}

.mbt:active {
  opacity: .7
}

/* Settings tab card layout */
.settings-tab-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px;
}
/* ══ SCHEDULE PINNING (MOBILE STICKY, DESKTOP FIXED) ═══════════ */

/* Ensure schedule column doesn't clip sticky/fixed children */
#tab-schedule{
  overflow: visible;
  align-self: start;
}

/* ───────────────
   MOBILE (<=960px): sticky inside flow
   ─────────────── */
@media (max-width: 960px){
  #tab-schedule{
    display:flex;
    flex-direction:column;
  }

  #tab-schedule .session-card{
    position: sticky;
    top: var(--hdr-h, 68px);
    z-index: 98;
    background: var(--card) !important;
    border-bottom: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
    margin-bottom: 12px;
  }

  #tab-schedule .section-hdr{
    position: sticky;
    top: calc(var(--hdr-h, 68px) + var(--sess-h, 108px));
    z-index: 97;
    background: var(--bg) !important;
    padding: 10px 0 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
  }

  #tab-schedule .day-list{ padding-top:0; }
}

/* ───────────────
   DESKTOP (>=961px): fixed under header, never moves
   ─────────────── */
@media (min-width: 961px){

  /* Reserve space so day list starts exactly under the fixed bars */
  #tab-schedule{
    padding-top: calc(var(--sess-h, 110px) + var(--shdr-h, 54px) + 24px) !important;
  }

  #tab-schedule .session-card{
    position: fixed !important;
    top: calc(var(--hdr-h, 68px) + 12px) !important;
    left: var(--sess-left, 16px) !important;
    width: var(--sess-w, 640px) !important;
    z-index: 999 !important;
    margin: 0 !important;
  }

  #tab-schedule .section-hdr{
    position: fixed !important;
    top: calc(var(--hdr-h, 68px) + 12px + var(--sess-h, 110px) + 12px) !important;
    left: var(--sess-left, 16px) !important;
    width: var(--sess-w, 640px) !important;
    z-index: 998 !important;
    margin: 0 !important;
  }

  #tab-schedule .day-list{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  #tab-schedule .day-list > *:first-child{
    margin-top: 0 !important;
  }
}

/* ── Desktop: all 3 columns — equal height, no scrollbars, content fits ── */
@media(min-width: 961px) {

  /* ── Shared height: fill the 1fr grid row (grid handles footer row) ── */
  #stats-panel,
  #tab-schedule,
  #juz-panel {
    height: 100%;
    overflow: hidden;
  }

  /* ── Left column: stack date-range + stats + progress bar ── */
  #stats-panel {
    position: sticky;
    top: calc(var(--hdr-h, 116px) + 16px);
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* Stats boxes shrink slightly at tight heights */
  #stats-panel .stat {
    padding: 10px 10px;
  }

  #stats-panel .stats-row {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  #stats-panel .prog-bar {
    flex-shrink: 0;
    margin-bottom: 0;
  }

  #stats-panel .date-range-card {
    flex-shrink: 0;
  }

  /* ── Right column: juz-panel ── */
  #juz-panel {
    position: sticky;
    top: calc(var(--hdr-h, 116px) + 16px);
  }

  /* Card sizes to its content — no artificial stretch */
  #juz-panel #juz-tracker-card {
    height: auto;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* Title and tabs don't grow/shrink */
  #juz-panel .card-title,
  #juz-panel .jcard-tabs {
    flex-shrink: 0;
  }

  /* Pane sizes to content — no fill */
  #juz-panel #jt-juz-pane,
  #juz-panel #jt-page-pane {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* Summary bar — fixed height */
  #juz-panel .juz-summary,
  #juz-panel .page-summary {
    flex-shrink: 0;
    margin-bottom: 8px;
  }

  /* Juz grid: 6 cols, rows auto-sized to content (cells stay compact/square) */
  #juz-panel .juz-grid {
    flex-shrink: 0;
    overflow: hidden;
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    gap: 4px;
    align-content: start;
  }

  /* Compact square-ish cells — reduced padding + smaller ring */
  #juz-panel .juz-cell {
    padding: 5px 3px 4px;
    overflow: hidden;
    justify-content: center;
  }

  #juz-panel .juz-ring-wrap {
    width: min(30px, 90%);
  }

  /* Page grid fills remaining pane height */
  #juz-panel .page-grid {
    flex: 1;
    min-height: 0;
    align-content: start;
  }

  /* Legend is compact and fixed at bottom */
  #juz-panel .pg-legend {
    flex-shrink: 0;
    margin-top: 6px;
    padding-top: 6px;
  }
}

/* ===============================
   DESKTOP: lock session + section header
   =============================== */
@media (min-width: 961px) {

  /* Reserve space for BOTH fixed bars (prevents useless empty gap) */
  #tab-schedule {
    padding-top: calc(var(--sess-h, 110px) + var(--shdr-h, 54px) + 20px) !important;
  }

  /* Session card fixed inside schedule column */
  #tab-schedule .session-card {
    position: fixed !important;
    top: calc(var(--hdr-h, 68px) + 12px) !important;
    left: var(--sess-left, 16px) !important;
    width: var(--sess-w, 640px) !important;
    z-index: 999 !important;
    margin: 0 !important;
  }

  /* Section header fixed directly under session card (aligned to same column) */
  #tab-schedule .section-hdr {
    position: fixed !important;
    top: calc(var(--hdr-h, 68px) + 12px + var(--sess-h, 110px) + 12px) !important;
    left: var(--sess-left, 16px) !important;
    width: var(--sess-w, 640px) !important;
    z-index: 998 !important;

    /* IMPORTANT: remove flow margins that create “open space” */
    margin: 0 !important;
    border-radius: 12px;
  }
}

@media (min-width: 961px) {
  #day-list .day-row,
  #day-list .day-card,
  #day-list > div {
    scroll-margin-top: calc(var(--hdr-h, 58px) + var(--sess-h, 90px) + var(--shdr-h, 54px) + 40px);
  }
}
@media (min-width: 961px) {
  #day-list { margin-top: 0 !important; padding-top: 0 !important; }
  #day-list > *:first-child { margin-top: 0 !important; }
}
@media (min-width: 961px) {
  #tab-schedule .section-hdr { position: fixed !important; }
}

/* ─── DAY PLACEHOLDER ───────────────────────────────────────────────── */
#day-placeholder { padding: 0; }
.ph-list  { display: flex; flex-direction: column; gap: 8px; }
.ph-active { border-color: var(--primary, #6366f1) !important; box-shadow: 0 0 0 3px rgba(99,102,241,.12) !important; }
.ph-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--card);
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  user-select: none;
}
.ph-card:hover { border-color: var(--primary, #6366f1); box-shadow: 0 4px 20px rgba(99,102,241,.15); transform: translateY(-1px); }
.ph-today { border-color: var(--accent, #22c55e) !important; box-shadow: 0 0 0 3px rgba(34,197,94,.12) !important; }
.ph-done  { border-color: rgba(34,197,94,.35) !important; background: rgba(34,197,94,.03) !important; }
.ph-left  { text-align: center; flex-shrink: 0; width: 40px; }
.ph-num   { font-size: 26px; font-weight: 800; color: var(--primary, #6366f1); line-height: 1; }
.ph-lbl   { font-size: 9px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 1px; }
.ph-mid   { flex: 1; min-width: 0; }
.ph-date  { font-size: 12px; font-weight: 500; color: var(--text); margin-bottom: 5px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ph-sep   { color: var(--muted); }
.ph-hij   { color: var(--muted); font-size: 11px; }
.ph-now   { background: var(--accent, #22c55e); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 99px; text-transform: uppercase; letter-spacing: .04em; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 7px; }
.ph-prog-row { display: flex; align-items: center; gap: 8px; }
.ph-bar   { flex: 1; height: 5px; background: var(--bg2, rgba(0,0,0,.07)); border-radius: 99px; overflow: hidden; }
.ph-fill  { height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 99px; transition: width .4s cubic-bezier(.4,0,.2,1); }
.ph-pct   { font-size: 11px; font-weight: 700; color: var(--accent, #22c55e); flex-shrink: 0; min-width: 38px; text-align: right; }
.ph-arrow { flex-shrink: 0; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(99,102,241,.1); color: var(--primary, #6366f1); font-size: 14px; transition: background .2s, color .2s, transform .2s; }
.ph-card:hover .ph-arrow { background: var(--primary, #6366f1); color: #fff; transform: scale(1.08); }

/* ─── DAY SHEET (bottom drawer) ─────────────────────────────────────── */
#day-sheet-backdrop { position: fixed; inset: 0; z-index: 1199; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#day-sheet {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(700px, 100vw); max-height: 88vh; z-index: 1200;
  background: var(--bg); border-radius: 22px 22px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 -12px 48px rgba(0,0,0,.28);
  animation: sheet-rise .32s cubic-bezier(.32,.72,0,1);
}
#day-sheet.hide { display: none; animation: none; }
@keyframes sheet-rise {
  from { transform: translateX(-50%) translateY(100%); }
  to   { transform: translateX(-50%) translateY(0); }
}
.day-sheet-hdr { display: flex; align-items: center; padding: 10px 16px 8px; border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 8px; }
.day-sheet-handle { flex: 1; display: flex; justify-content: center; }
.day-sheet-handle::before { content: ''; display: block; width: 38px; height: 4px; background: var(--border); border-radius: 99px; }
.day-sheet-close-btn { color: var(--muted); }
#day-sheet-content { flex: 1; overflow-y: auto; padding: 12px 12px 32px; }
#day-sheet-content .day-card { margin: 0; border-radius: var(--r); }

/* ─── CALENDAR POPUP ─────────────────────────────────────────────────── */
#cal-backdrop { position: fixed; inset: 0; z-index: 1099; background: rgba(0,0,0,.12); }
#cal-panel { position: fixed; z-index: 1100; width: 290px; max-height: 82vh; overflow-y: auto; border-radius: 18px; box-shadow: 0 16px 48px rgba(0,0,0,.32); }
#cal-toggle-btn.active { background: var(--primary, #6366f1); color: #fff; border-color: var(--primary, #6366f1); }
.cal-wrap { background: var(--card); border-radius: 18px; overflow: hidden; user-select: none; }
.cal-close-btn { margin-left: 6px; }

/* Gradient header */
.cal-hdr-grad { background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 60%, #a855f7 100%); padding: 16px 14px 12px; }
.cal-hdr-top  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

/* ─── HIDE EDIT/RESET IN SECTION HEADER ON MOBILE (available in settings tab) */
@media (max-width: 960px) {
  #btn-edit, #btn-reset { display: none !important; }
}
.cal-hdr-center { text-align: center; }
.cal-month-name { font-size: 17px; font-weight: 700; color: #fff; letter-spacing: .01em; line-height: 1; }
.cal-year { font-size: 11px; color: rgba(255,255,255,.7); font-weight: 500; margin-top: 2px; }
.cal-nbtn { background: rgba(255,255,255,.18); border: none; border-radius: 10px; color: #fff; cursor: pointer; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: background .15s; }
.cal-nbtn:hover:not(.cal-ndis) { background: rgba(255,255,255,.35); }
.cal-ndis { opacity: .3; cursor: default; }
.cal-stat-row { display: flex; gap: 6px; justify-content: center; }
.cal-stat { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 99px; color: #fff; }
.cs-done { background: rgba(34,197,94,.35); }
.cs-prog { background: rgba(245,158,11,.35); }
.cs-plan { background: rgba(255,255,255,.15); }

/* Body */
.cal-body { padding: 10px 10px 8px; }
.cal-dow-row { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.cal-dow { font-size: 9px; font-weight: 700; text-align: center; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 2px 0; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-cell { aspect-ratio: 1; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; cursor: default; transition: transform .15s, box-shadow .15s; }
.cal-empty { background: transparent; }
.cal-off   { color: var(--muted); opacity: .3; }
.cal-plan  { background: var(--bg2, rgba(0,0,0,.05)); color: var(--text); cursor: pointer; }
.cal-plan:hover { background: var(--border); transform: scale(1.12); }
.cal-done  { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(34,197,94,.3); }
.cal-done:hover  { transform: scale(1.15); box-shadow: 0 4px 14px rgba(34,197,94,.5); }
.cal-prog  { background: linear-gradient(135deg, #f59e0b, #d97706); color: #fff; cursor: pointer; box-shadow: 0 2px 8px rgba(245,158,11,.3); }
.cal-prog:hover  { transform: scale(1.15); box-shadow: 0 4px 14px rgba(245,158,11,.5); }
.cal-today {
  background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; cursor: pointer; font-weight: 800;
  box-shadow: 0 0 0 3px rgba(99,102,241,.25), 0 3px 14px rgba(99,102,241,.45);
  animation: today-ring 2.8s ease-in-out infinite;
}
.cal-today:hover { transform: scale(1.18); }
@keyframes today-ring {
  0%,100% { box-shadow: 0 0 0 3px rgba(99,102,241,.25), 0 3px 14px rgba(99,102,241,.45); }
  50%      { box-shadow: 0 0 0 5px rgba(99,102,241,.1),  0 3px 14px rgba(99,102,241,.45); }
}
.cal-sel { outline: 2.5px solid var(--primary, #6366f1); outline-offset: 2px; }
.cal-legend { display: flex; gap: 8px; flex-wrap: wrap; padding: 8px 2px 2px; border-top: 1px solid var(--border); margin-top: 6px; }
.cal-leg  { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--muted); font-weight: 500; }
.cal-ldot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.cld-done  { background: linear-gradient(135deg, #22c55e, #16a34a); }
.cld-prog  { background: linear-gradient(135deg, #f59e0b, #d97706); }
.cld-plan  { background: var(--bg2, rgba(0,0,0,.08)); border: 1px solid var(--border); }
.cld-today { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
@keyframes cal-flash-anim {
  0%   { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
  40%  { box-shadow: 0 0 0 5px rgba(99,102,241,.45); }
  100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
.cal-flash { animation: cal-flash-anim .9s ease-out; }

/* ── Desktop: pin #day-placeholder right below section-hdr ─────────── */
@media (min-width: 961px) {
  /* Kill the old flow-reservation padding — placeholder is now fixed */
  #tab-schedule { padding-top: 0 !important; }

  #day-placeholder {
    position: fixed !important;
    top: calc(var(--hdr-h, 68px) + 12px + var(--sess-h, 110px) + 12px + var(--shdr-h, 54px) + 10px) !important;
    left: var(--sess-left, 16px) !important;
    width: var(--sess-w, 640px) !important;
    z-index: 996 !important;
  }
}

/* ══ RTL DESKTOP OVERRIDES ══════════════════════════════════════════════
   All position:fixed desktop elements use left:--sess-left in LTR.
   In RTL the schedule column shifts physically, so we swap to
   right:--sess-right (= viewport-width - tab.right) instead.
   ===================================================================== */
@media (min-width: 961px) {
  /* Fixed session card */
  [dir="rtl"] #tab-schedule .session-card {
    left: auto !important;
    right: var(--sess-right, 16px) !important;
  }

  /* Fixed section header */
  [dir="rtl"] #tab-schedule .section-hdr {
    left: auto !important;
    right: var(--sess-right, 16px) !important;
  }

  /* Fixed day placeholder */
  [dir="rtl"] #day-placeholder {
    left: auto !important;
    right: var(--sess-right, 16px) !important;
  }

  /* Flip prev/next day-nav carets so they read correctly in RTL */
  [dir="rtl"] #day-prev-btn i,
  [dir="rtl"] #day-next-btn i {
    transform: scaleX(-1);
  }
}