:root {
  --page: #f5f7f5;
  --surface: #fff;
  --ink: #13201a;
  --muted: #4b5a52;
  --line: #dce3de;
  --emerald: #0e4d33;
  --emerald-deep: #0a3a26;
  --emerald-soft: #e3eee7;
  --gold: #a8842f;
  --gold-text: #7a5e1c;
  --gold-light: #e6cd8e;
  --error: #9a302b;
  --display: 'Cormorant Garamond', Georgia, serif;
  --body: 'Source Sans 3', system-ui, sans-serif;
  --arabic: 'Amiri Quran', serif;
  --body-size: 17px;
  --small-size: 14px;
  --meta-size: 12px;
  --arabic-size: 32px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --radius: 12px;
  --radius-small: 8px;
  --brand-size: 44px;
  --duration: 180ms;
  --ease: cubic-bezier(.2,.7,.2,1);
  --phone-system-fg: var(--ink);
  --phone-screen-bg: var(--surface);
  --phone-stage-bg: #e4e9e5;
}
body { font: 400 var(--body-size)/1.6 var(--body); color: var(--ink); -webkit-font-smoothing: antialiased; }
button,input,select { font: inherit; }
button { color: inherit; cursor: pointer; }
button,a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; }
button:disabled { opacity: .4; cursor: not-allowed; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible { outline: 2px solid var(--emerald); outline-offset: 4px; }
[hidden] { display: none !important; }
h1,h2,h3,p { margin: 0; }
h1,h2,h3 { text-wrap: balance; }
h1 { font: 600 36px/1.15 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
h2 { font: 600 24px/1.25 var(--display); letter-spacing: -.01em; }
h3 { font-size: var(--body-size); font-weight: 600; line-height: 1.4; }
.phone-content { display: flex; flex-direction: column; overflow: hidden; }
.app { flex: 1; min-width: 0; min-height: 0; }
.screen { min-width: 0; grid-template-columns: minmax(0, 1fr); background: var(--surface); }
.screen > * { min-width: 0; }
.od-icon { --od-icon-size: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.topbar { padding: var(--space-2) var(--space-5); min-height: 64px; --od-gap: var(--space-3); border-bottom: 1px solid var(--line); }
.wordmark { font: 600 28px/1.2 var(--display); color: var(--emerald); letter-spacing: -.02em; }
.brand-symbol { display: block; width: var(--brand-size); height: auto; aspect-ratio: 1254 / 1254; object-fit: contain; flex: none; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: var(--space-2); border-radius: var(--radius-small); color: var(--muted); flex: none; }
.icon-button[aria-pressed=true] { color: var(--emerald); background: var(--emerald-soft); }
.muted { color: var(--muted); }
.small { font-size: var(--small-size); line-height: 1.5; }
.eyebrow { font-size: var(--meta-size); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-text); }
.content { padding: var(--space-6) var(--space-5) var(--space-8); scrollbar-width: thin; }
/* Scrolling content stacks never squeeze their sections: a card with an explicit min-height would otherwise shrink to it and let its text spill past the border. */
.content.od-stack > * { flex-shrink: 0; }
.home-content { --od-gap: var(--space-6); }
.greeting { --od-gap: var(--space-1); }
.greeting .hello { font-size: 18px; font-weight: 600; }
.continue { padding: var(--space-6); border-radius: var(--radius); background: var(--emerald); color: var(--surface); --od-gap: var(--space-4); }
.continue .eyebrow { color: var(--gold-light); }
.continue-heading { align-items: start; --od-gap: var(--space-3); }
.continue-name { font: 600 36px/1.15 var(--display); letter-spacing: -.02em; }
.continue-name span { display: block; font: 400 var(--small-size)/1.5 var(--body); color: #e1ebe5; margin-top: var(--space-1); }
.continue-arabic { font: 400 32px/1.7 var(--arabic); max-width: 44%; overflow-wrap: anywhere; }
.continue-meta { color: #e1ebe5; font-size: var(--small-size); --od-gap: var(--space-3); }
.continue progress { display: block; width: 100%; height: 4px; appearance: none; border: 0; border-radius: 0; background: #43745c; }
.continue progress::-webkit-progress-bar { background: #43745c; }
.continue progress::-webkit-progress-value { background: var(--gold-light); }
.continue progress::-moz-progress-bar { background: var(--gold-light); }
.progress-labels { margin-bottom: var(--space-2); font-size: var(--small-size); }
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: var(--space-3) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-small); color: var(--emerald); font-size: 16px; line-height: 1.4; font-weight: 600; }
.button.primary { color: var(--surface); background: var(--emerald); border-color: var(--emerald); }
.button.light { color: var(--emerald); background: var(--surface); border-color: var(--surface); }
.button.full { width: 100%; }
.shortcuts { --od-cols: 2; --od-gap: var(--space-3); }
.shortcut { justify-content: start; min-height: 56px; background: var(--page); border-color: var(--page); --od-gap: var(--space-3); }
.shortcut .od-icon { --od-icon-size: 20px; }
.section-heading { --od-gap: var(--space-3); }
.text-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-height: 44px; color: var(--emerald); font-size: 16px; font-weight: 600; white-space: nowrap; }
.text-link .od-icon { --od-icon-size: 16px; }
.favourites { --od-gap: var(--space-1); }
.quick-list,.surah-list,.saved-list { list-style: none; padding: 0; margin: 0; }
.quick-row { min-height: 72px; padding: var(--space-3) 0; border-bottom: 1px solid var(--line); --od-gap: var(--space-3); }
.quick-number { font-size: var(--small-size); font-variant-numeric: tabular-nums; color: var(--gold-text); display: block; width: 24px; flex: none; }
.row-arabic { font: 400 24px/1.9 var(--arabic); color: var(--emerald); max-width: 40%; overflow-wrap: anywhere; }
.verse-day { padding-top: var(--space-6); border-top: 1px solid var(--line); --od-gap: var(--space-4); }
.verse-day .arabic { font-size: 30px; }
.verse-day .verse-ref { font-size: var(--small-size); color: var(--gold-text); }
.arabic { font: 400 var(--arabic-size)/2.2 var(--arabic); direction: rtl; text-align: right; overflow-wrap: anywhere; }
.translation { color: var(--muted); font-size: 17px; line-height: 1.75; }
.home-footnote { padding-top: var(--space-4); border-top: 1px solid var(--line); font-size: var(--meta-size); color: var(--muted); }
.bottom-nav { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: var(--space-2); gap: var(--space-1); background: var(--surface); border-top: 1px solid var(--line); }
.nav-item { display: grid; justify-items: center; align-content: center; gap: var(--space-1); min-width: 0; min-height: 52px; padding-inline: var(--space-1); color: var(--muted); border-radius: var(--radius-small); font-size: var(--meta-size); font-weight: 600; }
.nav-item span { display: block; white-space: nowrap; }
.nav-item .od-icon { --od-icon-size: 22px; }
.nav-item[aria-current=page] { color: var(--emerald); background: var(--emerald-soft); }
.library-header { padding: var(--space-4) var(--space-5) var(--space-3); --od-gap: var(--space-4); border-bottom: 1px solid var(--line); }
.library-header .topbar { padding: 0; min-height: 44px; border: 0; }
.library-header h1 { font-size: 32px; }
.search-label { display: block; margin-bottom: var(--space-1); font-size: var(--small-size); font-weight: 600; }
.search-box { min-height: 48px; border: 1px solid var(--line); border-radius: var(--radius-small); padding-inline: var(--space-3) var(--space-1); background: var(--page); }
.search-box .od-icon { --od-icon-size: 20px; color: var(--muted); }
input[type=search] { display: block; width: 100%; min-width: 0; min-height: 48px; border: 0; background: transparent; color: var(--ink); font-size: 16px; }
input[type=search]::-webkit-search-cancel-button { display: none; }
.search-clear { min-width: 44px; min-height: 44px; }
.segments { --od-gap: var(--space-5); }
.segment { display: block; min-height: 44px; padding: var(--space-2) var(--space-1); border-bottom: 2px solid transparent; color: var(--muted); font-weight: 600; }
.segment[aria-pressed=true] { border-bottom-color: var(--emerald); color: var(--emerald); }
.result-count { font-size: var(--small-size); color: var(--muted); text-align: right; }
.library-content { padding-top: 0; }
.surah-row { min-height: 88px; padding: var(--space-4) 0; border-bottom: 1px solid var(--line); --od-gap: var(--space-4); }
.surah-number { display: grid; place-items: center; width: 36px; height: 36px; flex: none; background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-small); color: var(--emerald); font-size: var(--small-size); font-variant-numeric: tabular-nums; }
.surah-row.is-last .surah-number { background: var(--emerald-soft); border-color: #b9ccbf; }
.row-title { display: block; font-size: 18px; font-weight: 600; line-height: 1.35; }
.row-subtitle { display: block; color: var(--muted); font-size: var(--small-size); line-height: 1.5; }
.resume-tag { display: block; width: fit-content; color: var(--gold-text); font-size: var(--meta-size); }
.load-more { margin-top: var(--space-5); }
.empty { padding: var(--space-10) 0; --od-gap: var(--space-4); }
.saved-card { padding: var(--space-5) 0; border-bottom: 1px solid var(--line); --od-gap: var(--space-3); }
.saved-card .saved-quote { display: block; color: var(--muted); font-size: 16px; }
.reader-topbar { --od-gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.reader-title { --od-gap: 0; text-align: center; }
.reader-title strong { display: block; font: 600 24px/1.2 var(--display); }
.reader-title span { display: block; font-size: var(--meta-size); color: var(--muted); }
.reader-content { padding: 0 var(--space-6) var(--space-6); position: relative; }
.surah-heading { padding: var(--space-6) 0 var(--space-5); --od-gap: var(--space-2); text-align: center; border-bottom: 1px solid var(--line); }
.surah-heading h1 { font: 400 34px/1.8 var(--arabic); color: var(--emerald); }
.surah-heading p { color: var(--muted); font-size: var(--small-size); }
.surah-heading .bismillah { font: 400 26px/1.8 var(--arabic); color: var(--ink); margin-top: var(--space-3); }
.ayah { padding: var(--space-5) 0; border-bottom: 1px solid var(--line); --od-gap: var(--space-4); scroll-margin-top: var(--space-3); }
.ayah.is-playing { background: var(--page); }
.ayah:focus { outline: none; }
.ayah:focus-visible { outline: 2px solid var(--emerald); outline-offset: 4px; }
.ayah .verse-number { font-family: var(--arabic); color: var(--gold-text); white-space: nowrap; }
.ayah-footer { --od-gap: var(--space-2); }
.ayah-ref { font-size: var(--meta-size); color: var(--gold-text); font-variant-numeric: tabular-nums; }
.ayah-actions { --od-gap: var(--space-2); }
.ayah-actions .od-icon { --od-icon-size: 18px; }
.player { padding: var(--space-2) var(--space-4); border-top: 1px solid var(--line); background: var(--page); --od-gap: var(--space-2); }
.player-topline { font-size: var(--meta-size); color: var(--muted); }
.player-controls { --od-gap: var(--space-2); }
.audio-title { font-size: 16px; font-weight: 600; }
.audio-subtitle { font-size: var(--meta-size); color: var(--muted); }
.play-button { border-radius: 50%; background: var(--emerald); color: var(--surface); }
.play-button .od-icon { --od-icon-size: 20px; }
.player progress { display: block; width: 100%; height: 4px; accent-color: var(--emerald); }
.reader-footer .bottom-nav { border-top: 1px solid var(--line); }
.loading { padding: var(--space-8) 0; --od-gap: var(--space-4); }
.skeleton-lines { display: grid; gap: var(--space-4); }
.skeleton-lines span { display: block; height: 32px; border-radius: var(--radius-small); background: var(--page); }
.skeleton-lines span:last-child { width: 64%; }
.error { color: var(--error); }
.scrim { position: absolute; inset: 0; z-index: 30; background: #13201a70; }
.sheet { position: absolute; left: var(--space-3); bottom: calc(var(--phone-safe-bottom) + var(--space-3)); z-index: 35; width: calc(100% - var(--space-6)); max-height: calc(100% - var(--phone-safe-top) - var(--phone-safe-bottom) - var(--space-6)); overflow-y: auto; padding: var(--space-5); border-radius: var(--radius); background: var(--surface); box-shadow: 0 16px 48px #13201a29; --od-gap: var(--space-5); }
.sheet h2 { font-size: 28px; }
.setting-row { --od-gap: var(--space-3); }
.setting-row .od-field { --od-gap: var(--space-1); }
.setting-help { color: var(--muted); font-size: var(--small-size); }
.size-stepper { --od-gap: var(--space-2); }
.step-button { border: 1px solid var(--line); }
.setting-toggle { display: block; min-width: 64px; min-height: 44px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-small); font-size: var(--small-size); }
.setting-toggle[aria-checked=true] { background: var(--emerald-soft); color: var(--emerald); border-color: #b9ccbf; }
.text-preview { background: var(--page); padding: var(--space-3); border-radius: var(--radius-small); text-align: center; font: 400 var(--arabic-size)/1.9 var(--arabic); }
.jump-form { --od-gap: var(--space-3); }
.jump-form label { display: block; font-weight: 600; }
.jump-form input { display: block; width: 100%; min-height: 48px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-small); color: var(--ink); background: var(--surface); }
.jump-form input[aria-invalid=true] { border-color: var(--error); }
.toast { position: absolute; z-index: 40; left: var(--space-4); bottom: calc(var(--phone-safe-bottom) + 88px); max-width: calc(100% - var(--space-8)); padding: var(--space-3) var(--space-4); border-radius: var(--radius-small); color: var(--surface); background: var(--ink); font-size: var(--small-size); pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity var(--duration) var(--ease),transform var(--duration) var(--ease); }
.toast.visible { opacity: 1; transform: translateY(0); }
.no-translation .ayah .translation { display: none; }
.history-shortcut { min-height: 64px; padding-block: var(--space-3); border-block: 1px solid var(--line); --od-gap: var(--space-3); }
.history-shortcut > .od-icon { color: var(--gold-text); }
.secondary-topbar { padding-inline: var(--space-3); --od-gap: var(--space-2); }
.secondary-topbar h1 { font-size: 32px; }
.page-intro { --od-gap: var(--space-3); margin-bottom: var(--space-8); }
.page-intro > .muted { font-size: 16px; }
.history-day { margin-top: var(--space-6); padding-bottom: var(--space-2); font-size: 22px; }
.history-row { min-height: 88px; padding-block: var(--space-4); border-bottom: 1px solid var(--line); --od-gap: var(--space-4); }
.history-row > .od-icon { color: var(--muted); }
.privacy-note { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.empty-symbol { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius); color: var(--emerald); background: var(--emerald-soft); }
.empty-symbol .od-icon { --od-icon-size: 28px; }
.list-summary { padding-bottom: var(--space-2); }
.saved-item { border-bottom: 1px solid var(--line); --od-gap: var(--space-2); }
.saved-item .saved-card { border-bottom: 0; }
.remove-bookmark { margin-top: var(--space-4); }
.saved-open { width: fit-content; font-size: var(--small-size); min-height: 44px; }
.settings-content { padding-top: var(--space-6); }
.settings-section { border-top: 1px solid var(--line); padding-block: var(--space-6); --od-gap: var(--space-5); }
.settings-section .setting-row { align-items: start; }
.settings-section .setting-toggle { margin-top: var(--space-1); }
.settings-link { min-height: 48px; color: var(--emerald); font-size: 16px; font-weight: 600; }
.settings-saved { padding: var(--space-4); border-radius: var(--radius-small); background: var(--page); color: var(--muted); font-size: var(--small-size); margin-top: var(--space-6); }
.source-details { padding-block: var(--space-4); border-block: 1px solid var(--line); }
.source-details summary { display: list-item; min-height: 44px; padding-block: var(--space-2); cursor: pointer; color: var(--emerald); font-weight: 600; }
.source-details > .od-stack { padding-top: var(--space-3); --od-gap: var(--space-4); font-size: 16px; }
.field label { display: block; font-size: 16px; font-weight: 600; margin-bottom: var(--space-2); }
.field input,.field select { display: block; min-width: 0; width: 100%; min-height: 48px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-small); color: var(--ink); background: var(--surface); font-size: 16px; }
.field input[aria-invalid=true] { border-color: var(--error); }
.field select { cursor: pointer; }
.form-grid { --od-cols: 2; --od-gap: var(--space-3); }
.audio-form { --od-gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--line); }
.audio-info { text-align: left; min-height: 48px; padding: 0; cursor: pointer; color: var(--ink); border-radius: var(--radius-small); }
.audio-info .audio-subtitle { display: block; line-height: 1.5; }
.player-topline #audio-state { text-align: right; }
.reciter-card { padding: var(--space-4); border-radius: var(--radius-small); background: var(--page); --od-gap: var(--space-3); }
.reciter-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--emerald); color: var(--surface); flex: none; }
.action-list { --od-gap: var(--space-2); }
.action-row { min-height: 48px; padding: var(--space-2) var(--space-3); color: var(--ink); text-align: left; border-radius: var(--radius-small); --od-gap: var(--space-3); font-size: 16px; }
.action-row > .od-icon { color: var(--emerald); --od-icon-size: 20px; }
.button.danger { color: var(--surface); background: var(--error); border-color: var(--error); }
.confirmation-actions { --od-gap: var(--space-3); }
.copy-text { display: block; width: 100%; min-height: 160px; max-height: 280px; resize: vertical; padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--page); color: var(--ink); font: 400 17px/1.8 var(--body); }
.copy-text:focus-visible,textarea:focus-visible { outline: 2px solid var(--emerald); outline-offset: 4px; }
.daily-goal { --od-gap: var(--space-3); padding-block: var(--space-2); }
.daily-goal .section-heading { flex-wrap: wrap; --od-gap: var(--space-2); }
.daily-goal .text-link { display: inline-flex; align-items: center; min-height: 44px; }
.notes-search { margin-bottom: var(--space-6); }
.note-card { padding-block: var(--space-5); border-bottom: 1px solid var(--line); --od-gap: var(--space-3); }
.note-title { font: 600 var(--body-size)/1.5 var(--body); color: var(--emerald); overflow-wrap: anywhere; }
.note-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; }
.note-editor { min-height: 192px; font-size: var(--body-size); }
.note-editor[aria-invalid=true] { border-color: var(--error); }
.draft-warning { padding: var(--space-4); border: 1px solid var(--error); border-radius: var(--radius-small); --od-gap: var(--space-3); }
.surah-end { padding-block: var(--space-6); --od-gap: var(--space-4); text-align: center; }
.surah-end .button { white-space: normal; overflow-wrap: anywhere; }
.action-row:disabled { opacity: 1; color: var(--muted); background: var(--page); }
.ayah-ref { overflow-wrap: anywhere; }
@media (hover:hover) {
  .icon-button:not(:disabled):hover { background: var(--emerald-soft); color: var(--emerald); }
  .play-button:not(:disabled):hover { color: var(--surface); background: var(--emerald-deep); }
  .button:hover,.shortcut:hover { border-color: var(--emerald); background: var(--emerald-soft); }
  .button.primary:hover { background: var(--emerald-deep); color: var(--surface); }
  .button.light:hover { background: var(--emerald-soft); }
  .text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
  .quick-row:hover,.surah-row:hover { background: var(--page); }
  .nav-item:hover { color: var(--emerald); background: var(--page); }
  .segment:hover { color: var(--emerald); }
  .history-shortcut:hover,.history-row:hover,.saved-item:hover { background: var(--page); }
  .action-row:hover,.settings-link:hover { color: var(--emerald); background: var(--emerald-soft); }
  .audio-info:hover { color: var(--emerald); }
  .button.danger:hover { background: #7b2622; color: var(--surface); border-color: #7b2622; }
}
@media (max-width:375px) { .continue { padding: var(--space-5); } .continue-name { font-size: 32px; } .continue-arabic { font-size: 28px; } .reader-content { padding-inline: var(--space-5); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition: none !important; scroll-behavior: auto !important; } }

/* ── Beyond reading: prayer, dzikir, hafalan, khatam ── */
:root { --gold-soft: #f5edd8; --emerald-line: #b9ccbf; --hero-muted: #e1ebe5; --hero-track: #43745c; }
.library-header .topbar { --od-gap: var(--space-1); }
.home-content progress,.prayer-hero progress,.khatam-hero progress { display: block; }

/* Home */
.prayer-strip { min-height: 72px; padding: var(--space-3) var(--space-4); border: 1px solid var(--emerald-line); border-radius: var(--radius); background: var(--emerald-soft); color: var(--emerald-deep); --od-gap: var(--space-3); }
.prayer-strip > .od-icon { --od-icon-size: 28px; color: var(--emerald); }
.prayer-strip strong { font-size: 18px; line-height: 1.35; }
.prayer-strip .od-field { --od-gap: 0; }
.prayer-strip-count { text-align: right; --od-gap: 0; max-width: 40%; }
.prayer-strip-count strong { font-size: 16px; }
.prayer-strip-count span { font-size: var(--meta-size); color: var(--muted); }
.practice { --od-gap: var(--space-2); }
.practice-list,.prayer-list,.dzikir-list,.memory-ayahs,.schedule-list { list-style: none; margin: 0; padding: 0; }
.practice-list li + li .history-shortcut { border-top: 0; }
.practice-list .history-shortcut > .od-icon:first-child { color: var(--emerald); }

/* Prayer */
.prayer-content { --od-gap: var(--space-5); }
.location-button { width: 100%; min-height: 56px; padding: var(--space-2) var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--page); text-align: left; --od-gap: var(--space-3); }
.location-button > .od-icon { color: var(--gold-text); --od-icon-size: 20px; }
.location-button .od-field { --od-gap: 0; }
.location-change { color: var(--emerald); font-size: var(--small-size); font-weight: 600; }
.prayer-hero { padding: var(--space-6); border-radius: var(--radius); background: var(--emerald); color: var(--surface); --od-gap: var(--space-4); }
.prayer-hero .eyebrow { color: var(--gold-light); }
.hero-clock { font-size: var(--small-size); color: var(--hero-muted); font-variant-numeric: tabular-nums; }
.prayer-hero-main { align-items: end; --od-gap: var(--space-4); }
.prayer-hero-name { font: 600 32px/1.1 var(--display); }
.prayer-hero-time { font: 600 clamp(48px, 15vw, 60px)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: lining-nums tabular-nums; }
.prayer-countdown { text-align: right; --od-gap: 0; }
.prayer-countdown span { font-size: var(--meta-size); color: var(--hero-muted); }
.prayer-countdown strong { font-size: 18px; font-variant-numeric: tabular-nums; }
.hero-dates { padding-top: var(--space-3); border-top: 1px solid var(--hero-track); color: var(--hero-muted); font-size: var(--small-size); --od-gap: 0; }
.prayer-list { border-top: 1px solid var(--line); }
.prayer-row { min-height: 64px; padding: var(--space-2) 0 var(--space-2) var(--space-3); border-bottom: 1px solid var(--line); --od-gap: var(--space-3); }
.prayer-row .od-field { --od-gap: 0; }
.prayer-name { font-size: var(--body-size); }
.prayer-time { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.prayer-row.is-marker .prayer-name,.prayer-row.is-marker .prayer-time { font-weight: 500; color: var(--muted); }
.prayer-row.is-passed .prayer-time,.prayer-row.is-passed .prayer-name { color: var(--muted); }
.prayer-row.is-next { background: var(--emerald-soft); border-radius: var(--radius-small); border-bottom-color: transparent; }
.prayer-row.is-next .prayer-name,.prayer-row.is-next .prayer-time { color: var(--emerald); }
.prayer-row.is-current { box-shadow: inset 3px 0 0 var(--gold); }
.prayer-tag { display: block; padding: 2px var(--space-2); border-radius: 999px; font-size: var(--meta-size); font-weight: 600; flex: none; }
.prayer-tag.is-next { background: var(--emerald); color: var(--surface); }
.prayer-tag.is-now { background: var(--gold-soft); color: var(--gold-text); }
.reminder-button .od-icon { --od-icon-size: 20px; }
.reminder-button[aria-pressed=false] { color: var(--muted); background: none; }
.qibla-card { padding: var(--space-4); border-radius: var(--radius); background: var(--page); --od-gap: var(--space-3); }
.qibla-mini { display: block; width: 48px; height: 48px; color: var(--emerald); flex: none; }
.qibla-title { font: 600 var(--body-size)/1.4 var(--body); }
.compass { display: grid; place-items: center; padding-block: var(--space-2); }
.compass-dial { display: block; width: min(240px, 100%); height: auto; }
#compass-rose { transform-origin: 120px 120px; transform-box: view-box; transition: transform 150ms var(--ease); }
.qibla-reading { text-align: center; }
.qibla-reading strong { font: 600 32px/1 var(--display); color: var(--emerald); }
.location-option[aria-pressed=true] { background: var(--emerald-soft); color: var(--emerald); }
.location-option .od-field { --od-gap: 0; }

/* Dzikir */
.dzikir-tabs { position: relative; --od-gap: var(--space-4); --od-rail-pad: 0; }
.dzikir-tabs .segment { white-space: nowrap; }
.dzikir-content { --od-gap: var(--space-5); }
.dzikir-intro { --od-gap: var(--space-2); }
.set-title { font-size: 28px; }
.dzikir-intro progress,.memory-head progress { display: block; width: 100%; height: 6px; accent-color: var(--emerald); }
.dzikir-intro .text-link .od-icon { --od-icon-size: 16px; }
.dzikir-card { padding: var(--space-5) 0; border-bottom: 1px solid var(--line); --od-gap: var(--space-3); }
.dzikir-card:first-child { border-top: 1px solid var(--line); }
.dzikir-title { font: 600 var(--body-size)/1.4 var(--body); }
.dzikir-times { padding: 2px var(--space-2); border-radius: 999px; background: var(--gold-soft); color: var(--gold-text); font-size: var(--small-size); font-weight: 600; font-variant-numeric: tabular-nums; }
.dzikir-arabic { font-size: calc(var(--arabic-size) - 4px); line-height: 2.1; }
.dzikir-latin { font-style: italic; color: var(--emerald-deep); line-height: 1.65; }
.dzikir-translation { font-size: 16px; }
.dzikir-source { font-size: var(--meta-size); color: var(--gold-text); }
.counter-button { width: 100%; min-height: 56px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-small); background: var(--emerald); color: var(--surface); text-align: left; transition: transform 150ms var(--ease); --od-gap: var(--space-3); }
.counter-button:active { transform: scale(.98); }
.counter-value { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.counter-value .od-icon { --od-icon-size: 18px; }
.counter-button:disabled { opacity: 1; cursor: default; background: var(--emerald-soft); color: var(--emerald); }
.dua-copy { align-self: start; }
.dua-copy .od-icon { --od-icon-size: 18px; }
.tasbih { align-items: center; --od-gap: var(--space-5); text-align: center; }
.tasbih .form-grid { width: 100%; text-align: left; }
.tasbih-button { position: relative; display: grid; place-items: center; width: 240px; max-width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--surface); transition: transform 150ms var(--ease); }
.tasbih-button:active { transform: scale(.97); }
.tasbih-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
#tasbih-progress { transition: stroke-dashoffset 150ms var(--ease); }
.tasbih-face { position: relative; align-items: center; --od-gap: 0; }
.tasbih-arabic { font: 400 24px/1.8 var(--arabic); color: var(--emerald); }
.tasbih-count { font: 600 72px/1 var(--display); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
.tasbih-of { font-size: var(--small-size); color: var(--muted); }
.tasbih-stats { width: 100%; --od-cols: 2; --od-gap: var(--space-3); }
.tasbih-stats .od-stat,.memory-stats .od-stat { padding: var(--space-3); border-radius: var(--radius-small); background: var(--page); text-align: center; }
.tasbih-stats strong,.memory-stats strong { font: 600 28px/1.1 var(--display); color: var(--emerald); font-variant-numeric: lining-nums; }
.tasbih-stats span,.memory-stats span { font-size: var(--meta-size); color: var(--muted); }

/* Hafalan */
.memory-stats { margin-bottom: var(--space-4); --od-cols: 3; --od-gap: var(--space-2); }
.memory-list { margin-top: var(--space-2); border-top: 1px solid var(--line); }
.memory-list > li { border-bottom: 1px solid var(--line); }
.memory-row { width: 100%; min-height: 88px; padding: var(--space-4) 0; text-align: left; --od-gap: var(--space-4); }
.memory-head { padding-top: var(--space-5); --od-gap: var(--space-4); }
.memory-title-ar { max-width: none; text-align: center; font-size: 32px; }
.memory-head .segments { --od-gap: var(--space-4); }
.memory-ayah { --od-gap: var(--space-3); }
.ayah-hidden { padding: var(--space-4); border: 1px dashed var(--emerald-line); border-radius: var(--radius-small); background: var(--page); align-items: start; --od-gap: var(--space-3); }
.hint-text { width: 100%; color: var(--emerald); }
.memory-actions { --od-cols: 2; --od-gap: var(--space-2); }
.memory-actions .od-icon,.ayah-hidden .od-icon { --od-icon-size: 18px; }
.memory-actions .button.is-review { background: var(--gold-soft); border-color: var(--gold-light); color: var(--gold-text); }
.memory-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: 999px; font-size: var(--meta-size); font-weight: 600; flex: none; }
.memory-chip .od-icon { --od-icon-size: 14px; }
.memory-chip.is-memorised { background: var(--emerald-soft); color: var(--emerald); }
.memory-chip.is-review { background: var(--gold-soft); color: var(--gold-text); }

/* Khatam */
.khatam-content { --od-gap: var(--space-6); }
.khatam-content > * + * { margin-top: var(--space-6); }
.khatam-hero { padding: var(--space-6); border-radius: var(--radius); background: var(--emerald); color: var(--surface); --od-gap: var(--space-4); }
.khatam-hero .eyebrow { color: var(--gold-light); }
.khatam-hero progress { width: 100%; height: 4px; appearance: none; border: 0; background: var(--hero-track); }
.khatam-hero progress::-webkit-progress-bar { background: var(--hero-track); }
.khatam-hero progress::-webkit-progress-value { background: var(--gold-light); }
.khatam-hero progress::-moz-progress-bar { background: var(--gold-light); }
.khatam-day { font: 600 36px/1.15 var(--display); letter-spacing: -.02em; }
.khatam-status { padding: 2px var(--space-2); border-radius: 999px; background: var(--emerald-deep); color: var(--gold-light); font-size: var(--meta-size); font-weight: 600; text-align: right; }
.khatam-portion { --od-gap: 0; }
.khatam-portion span { font-size: var(--small-size); color: var(--hero-muted); }
.khatam-portion strong { font: 600 28px/1.2 var(--display); }
.khatam-hero .button .od-icon { --od-icon-size: 18px; }
.khatam-open { min-height: 56px; padding-top: var(--space-3); border-top: 1px solid var(--hero-track); --od-gap: var(--space-3); }
.khatam-open .od-field { --od-gap: 0; }
.khatam-open .od-field span { font-size: var(--small-size); color: var(--hero-muted); }
.schedule { --od-gap: var(--space-2); }
.schedule .history-day { margin-top: 0; }
.schedule-row { min-height: 64px; padding-block: var(--space-2); border-bottom: 1px solid var(--line); --od-gap: var(--space-4); }
.schedule-row .od-field { --od-gap: 0; }
.schedule-day { width: 44px; flex: none; text-align: center; --od-gap: 0; }
.schedule-day strong { font: 600 22px/1.1 var(--display); color: var(--emerald); }
.schedule-day span { font-size: var(--meta-size); color: var(--muted); }
.schedule-row.is-done .od-field strong { color: var(--muted); }
.settings-link > .od-icon { --od-icon-size: 20px; }
.danger-link { color: var(--error); }
.khatam-options { margin: 0; padding: 0; border: 0; --od-gap: var(--space-2); }
.khatam-options legend { margin-bottom: var(--space-2); font-weight: 600; }
.khatam-option { min-height: 64px; padding: var(--space-2) var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-small); cursor: pointer; --od-gap: var(--space-3); }
.khatam-option input { width: 20px; height: 20px; margin: 0; accent-color: var(--emerald); flex: none; }
.khatam-option .od-field { --od-gap: 0; }
.khatam-option:has(input:checked) { border-color: var(--emerald); background: var(--emerald-soft); }
.khatam-option:has(input:focus-visible) { outline: 2px solid var(--emerald); outline-offset: 2px; }
.khatam-rate { font-size: var(--small-size); color: var(--gold-text); font-variant-numeric: tabular-nums; }
.khatam-preview { padding: var(--space-3) var(--space-4); border-radius: var(--radius-small); background: var(--page); font-weight: 600; color: var(--emerald); }
.khatam-form .form-grid { align-items: end; }

@media (hover:hover) {
  .prayer-strip:hover { border-color: var(--emerald); }
  .location-button:hover { border-color: var(--emerald); }
  .counter-button:not(:disabled):hover { background: var(--emerald-deep); }
  .memory-row:hover { background: var(--page); }
  .khatam-option:hover { border-color: var(--emerald); }
  .khatam-open:hover strong { text-decoration: underline; text-underline-offset: 4px; }
  .danger-link:hover { color: var(--error); background: #f6e5e3; }
}
@media (max-width:375px) {
  .prayer-hero,.khatam-hero { padding: var(--space-5); }
  .memory-stats { --od-gap: var(--space-1); }
  .tasbih-button { width: 216px; }
}

/* ── Polish pass ── */
.strip-label { display: block; font-size: var(--meta-size); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--emerald); }
.goal-reached { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--emerald); font-weight: 600; }
.goal-reached .od-icon { --od-icon-size: 16px; }
.daily-goal progress,.set-progress-sticky progress { display: block; width: 100%; height: 6px; accent-color: var(--emerald); }
.link-group { --od-gap: var(--space-2); }
.list-links { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.list-link { min-height: 64px; padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--line); color: var(--ink); --od-gap: var(--space-3); }
.list-link .od-field { --od-gap: 0; }
.list-link > .od-icon:first-child { --od-icon-size: 22px; color: var(--emerald); }
.list-link > .od-icon:last-child { --od-icon-size: 18px; color: var(--muted); }

.prayer-hero-main { align-items: baseline; --od-gap: var(--space-3); }
.prayer-hero-name { font: 600 36px/1.1 var(--display); }
.prayer-countdown { text-align: left; font-size: var(--small-size); color: var(--hero-muted); }
.prayer-countdown strong { font-size: 18px; color: var(--surface); font-variant-numeric: tabular-nums; }

.set-progress-sticky { position: sticky; top: calc(var(--space-6) * -1); z-index: 2; padding-block: var(--space-3); background: var(--surface); border-bottom: 1px solid var(--line); }
.set-progress-sticky .progress-labels { margin-bottom: var(--space-2); }
.set-progress-sticky .text-link .od-icon { --od-icon-size: 16px; }
.dzikir-card:first-child { border-top: 0; }
.dzikir-arabic { font-size: var(--arabic-size); line-height: 2.1; }
.dzikir-latin { font-size: 16px; color: var(--emerald-deep); }
.dzikir-translation { color: var(--muted); }
.counter-row { --od-gap: var(--space-2); }
.undo-button { min-width: 56px; min-height: 56px; border: 1px solid var(--line); }

.reveal-all { align-self: start; }
.reveal-all .od-icon { --od-icon-size: 18px; }
.row-subtitle .memory-chip { margin-top: var(--space-1); }
.memory-done { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-small); background: var(--emerald-soft); color: var(--emerald); font-weight: 600; }

.khatam-status { --od-gap: var(--space-1); }
.khatam-status .od-icon { --od-icon-size: 14px; }
.khatam-status.is-behind { background: var(--gold-light); color: var(--ink); }
.start-note { color: var(--gold-text); }

.chip-links { --od-gap: var(--space-2); }
.chip-link { min-height: 44px; padding: var(--space-2) var(--space-4); border: 1px solid var(--line); border-radius: 999px; color: var(--emerald); font-size: var(--small-size); font-weight: 600; --od-gap: var(--space-2); }
.chip-link .od-icon { --od-icon-size: 18px; }

@media (hover:hover) {
  .list-link:hover { background: var(--page); color: var(--emerald); }
  .chip-link:hover { border-color: var(--emerald); background: var(--emerald-soft); }
  .undo-button:hover { border-color: var(--emerald); }
}

/* ── End-to-end flow: welcome, Al-Quran Plus, terms & privacy ── */
.plus-badge { display: inline-flex; align-items: center; gap: 2px; margin-inline-start: var(--space-2); padding: 1px var(--space-2); border-radius: 999px; background: var(--gold-soft); color: var(--gold-text); font-size: var(--meta-size); font-weight: 600; line-height: 1.5; letter-spacing: .02em; vertical-align: middle; white-space: nowrap; flex: none; }
.plus-badge .od-icon { --od-icon-size: 12px; stroke-width: 2; }
.plus-badge.is-active { margin: var(--space-1) 0 0; background: var(--emerald-soft); color: var(--emerald); }
.plus-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-text); flex: none; }
.plus-mark .od-icon { --od-icon-size: 20px; }
.plus-card,.plus-row { min-height: 72px; padding: var(--space-3) var(--space-4); border: 1px solid var(--gold-light); border-radius: var(--radius); color: var(--ink); --od-gap: var(--space-3); }
.plus-card { background: var(--gold-soft); }
.plus-card .plus-mark { background: var(--surface); }
.plus-card .od-field,.plus-row .od-field { --od-gap: 0; }
.plus-card > .od-icon:last-child,.plus-row > .od-icon:last-child { --od-icon-size: 18px; color: var(--gold-text); }
.memory-list + .plus-row { margin-top: var(--space-5); }
.plus-lock { margin-top: var(--space-6); padding: var(--space-5); border-radius: var(--radius); background: var(--gold-soft); --od-gap: var(--space-3); }
.plus-lock-title { font: 600 22px/1.3 var(--display); color: var(--ink); --od-gap: var(--space-2); }
.plus-lock-title .od-icon { --od-icon-size: 20px; color: var(--gold-text); }
.plus-preview .schedule-list { list-style: none; margin: 0; padding: 0; }
.plus-preview .schedule-row { opacity: .72; }

.plus-content { --od-gap: var(--space-6); }
.plus-hero { padding: var(--space-6); border-radius: var(--radius); background: var(--emerald); color: var(--surface); --od-gap: var(--space-3); }
.plus-hero .eyebrow { color: var(--gold-light); }
.plus-hero h1 { font-size: 34px; }
.plus-hero-copy { color: var(--hero-muted); font-size: 16px; }
.plus-context { align-self: start; padding: var(--space-1) var(--space-3); border-radius: 999px; background: var(--emerald-deep); color: var(--gold-light); font-size: var(--small-size); font-weight: 600; --od-gap: var(--space-2); }
.plus-context .od-icon { --od-icon-size: 14px; }
.plus-features { list-style: none; margin: 0; padding: 0; --od-gap: var(--space-4); }
.plus-features li { --od-gap: var(--space-3); }
.plus-features li > .od-icon { margin-top: 2px; color: var(--emerald); }
.plus-features .od-field { --od-gap: 0; }
.plus-plan { min-height: 72px; }
.plan-flag { display: inline-block; margin-inline-start: var(--space-1); padding: 0 var(--space-2); border-radius: 999px; background: var(--emerald); color: var(--surface); font-size: var(--meta-size); font-weight: 600; vertical-align: 2px; }
.plan-price { text-align: right; --od-gap: 0; flex: none; }
.plan-price strong { font-size: 16px; font-variant-numeric: tabular-nums; }
.plan-price span { font-size: var(--meta-size); color: var(--muted); }
.plus-timeline { --od-gap: var(--space-3); }
.timeline-list { list-style: none; margin: 0; padding: 0 0 0 var(--space-1); }
.timeline-list li { position: relative; padding-bottom: var(--space-4); --od-gap: var(--space-3); }
.timeline-list li:not(:last-child)::before { content: ''; position: absolute; left: 5px; top: 16px; bottom: 0; border-left: 2px solid var(--line); }
.timeline-list .od-field { --od-gap: 0; }
.timeline-dot { width: 12px; height: 12px; margin-top: 6px; border: 2px solid var(--emerald); border-radius: 50%; background: var(--surface); flex: none; }
.timeline-list li:first-child .timeline-dot { background: var(--emerald); }
.plus-sample { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.plus-footer,.welcome-footer { padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--line); background: var(--surface); --od-gap: var(--space-2); text-align: center; }
.plus-terms a { color: var(--emerald); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.store-card { padding: var(--space-4); border-radius: var(--radius-small); background: var(--page); --od-gap: var(--space-4); }
.store-card .od-field { --od-gap: 0; }
.store-mark { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius-small); background: var(--surface); flex: none; --brand-size: var(--space-10); }
.store-terms { display: grid; gap: var(--space-2); margin: 0; padding-top: var(--space-3); border-top: 1px solid var(--line); font-size: var(--small-size); }
.store-terms > div { align-items: baseline; --od-gap: var(--space-3); }
.store-terms dt { color: var(--muted); }
.store-terms dd { margin: 0; font-weight: 600; text-align: right; }

.welcome-content { --od-gap: var(--space-6); }
.welcome-content .page-intro { margin-bottom: 0; }
.welcome-title { font-size: 34px; }
.welcome-hero { padding-top: var(--space-6); --od-gap: var(--space-4); }
.welcome-bismillah { font: 400 28px/1.9 var(--arabic); color: var(--emerald); text-align: center; padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }
.welcome-points { list-style: none; margin: 0; padding: 0; --od-gap: var(--space-5); }
.welcome-points li { --od-gap: var(--space-3); }
.welcome-points li > .od-icon { margin-top: 2px; color: var(--emerald); }
.welcome-points .od-field { --od-gap: 0; }
.welcome-progress { --od-gap: var(--space-1); }
.welcome-progress progress { display: block; width: 100%; height: 4px; accent-color: var(--emerald); }

.settings-links { --od-gap: 0; }
.settings-link > .plus-badge { margin-inline-end: var(--space-2); }

.legal-content { --od-gap: var(--space-4); padding-top: var(--space-3); }
.legal-tabs { border-bottom: 1px solid var(--line); }
.legal-body { --od-gap: var(--space-6); }
.legal-block { --od-gap: var(--space-3); max-width: 68ch; }
.legal-block p,.legal-list { font-size: 16px; line-height: 1.65; }
.legal-list { margin: 0; padding-inline-start: var(--space-5); display: grid; gap: var(--space-2); }

@media (hover:hover) {
  .plus-card:hover,.plus-row:hover { border-color: var(--gold); }
  .plus-terms a:hover { color: var(--emerald-deep); }
}
@media (max-width:375px) {
  .plus-hero { padding: var(--space-5); }
  .plus-hero h1,.welcome-title { font-size: 30px; }
}

/* ── Me tab, in-place display sheets, adhkar reminders ── */
.sheet-settings { --od-gap: var(--space-4); padding-block: var(--space-2); }
.sheet .settings-link { border-top: 1px solid var(--line); }
.reminder-times { --od-cols: 2; }
.dz-no-latin .dzikir-latin,.dz-no-translation .dzikir-translation { display: none; }
.due-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: 999px; background: var(--emerald); color: var(--surface); font-size: var(--meta-size); font-weight: 600; }
.due-badge.is-done { background: var(--emerald-soft); color: var(--emerald); }
.due-badge .od-icon { --od-icon-size: 12px; stroke-width: 2; }
.list-link > .due-badge,.list-link > .plus-badge,.list-link > .count-pill { margin-inline-start: 0; }
.saved-intro { --od-gap: var(--space-4); margin-bottom: var(--space-4); }
.me-content { --od-gap: var(--space-6); }
.me-intro { --od-gap: var(--space-1); }
.me-intro .hello { font-size: 18px; font-weight: 600; }
.count-pill { padding: 2px var(--space-2); border-radius: 999px; background: var(--page); color: var(--muted); font-size: var(--small-size); font-variant-numeric: tabular-nums; }
.me-plus-status { color: var(--emerald); }