/* ── Variables ──────────────────────────────────────────────────────────────── */
/* Defaults = dark theme (the original Mushaf palette).
   [data-theme="light"] further down overrides the colour set. Everything else
   in the stylesheet should refer to these variables rather than hardcoded
   hex / rgba values so light mode falls into place automatically. */
:root {
  /* App chrome */
  --bg:          #0a0d0a;
  --bg-surface:  #111811;
  --bg-card:     #182018;
  --bg-elevated: #1e2a1c;
  --app-bg:      #050705;  /* deepest backdrop behind everything */

  /* Accent palette */
  --gold:        #c9a84c;
  --gold-light:  #e5c370;
  --gold-dim:    #7a6230;
  --green-dark:  #0f2010;
  --green-mid:   #2d5a2d;
  --green-light: #4a8a4a;

  /* Typography */
  --text:        #f0ebe0;
  --text-sec:    #b0a888;
  --text-dim:    #706850;

  /* Lines & shadows */
  --border:      #2a3a2a;
  --border-gold: rgba(201,168,76,.3);
  --shadow:      0 4px 24px rgba(0,0,0,.5);
  --overlay-bg:  rgba(0,0,0,.55);

  /* Header / bottom-nav gradient stops */
  --chrome-grad-from: rgba(8, 13, 8, .96);
  --chrome-grad-to:   rgba(8, 13, 8, .72);
  --chrome-border:    rgba(201,168,76,.18);

  /* Status colours (danger / success / warning) */
  --danger:         #e07070;
  --danger-border:  #884444;
  --danger-soft:    rgba(136,68,68,.2);
  --danger-softer:  rgba(136,68,68,.3);
  --success-text:   #7fcf7f;
  --success-bg:     rgba(74,138,74,.25);
  --warning-text:   #e0936f;
  --warning-bg:     rgba(200,90,60,.22);

  /* Mushaf page surface */
  --page-bg:           #151719;
  --page-text:         #f4f4ef;
  --page-text-soft:    rgba(244,244,239,.64);
  --page-text-footer:  rgba(244,244,239,.72);
  --page-spine:        rgba(244,244,239,.16);
  --page-loading:      #8a7050;
  --ayah-color:        #7f8794;
  --ayah-hover-bg:     rgba(201,168,76,.14);
  --ayah-active-bg:    rgba(201,168,76,.25);
  --word-hover-bg:     rgba(180,130,0,.18);
  --word-active-bg:    rgba(229,195,112,.55);
  --word-active-ring:  rgba(229,195,112,.7);
  --decor-shadow:      rgba(201,168,76,.12);
  --decor-inner-border: rgba(201,168,76,.45);
  --surah-frame-shadow: 0 0 0 1px rgba(201,168,76,.22), 0 1px 7px rgba(0,0,0,.45);
  --surah-frame-grad: linear-gradient(180deg, rgba(201,168,76,.17), rgba(201,168,76,.045));

  /* Layout */
  --radius:      12px;
  --radius-sm:   8px;
  --header-h:    52px;
  --bottom-h:    64px;
  --drawer-w:    320px;
  --sheet-max:   560px;
}

[data-theme="light"] {
  /* Warm parchment + soft cream chrome. Gold + green accents are darkened a
     touch so they read against the lighter backgrounds. */
  --bg:          #efe6d3;
  --bg-surface:  #ece1c8;
  --bg-card:     #f3ead7;
  --bg-elevated: #e3d6b6;
  --app-bg:      #d9cba8;

  --gold:        #a8862c;
  --gold-light:  #876819;
  --gold-dim:    #c2a350;

  --green-dark:  #d8e6c8;
  --green-mid:   #5e8b4e;
  --green-light: #7baa66;

  --text:        #2a2620;
  --text-sec:    #5a4e36;
  --text-dim:    #8c7d5a;

  --border:      #d4c5a0;
  --border-gold: rgba(168, 134, 44, .55);
  --shadow:      0 4px 24px rgba(60, 40, 10, .18);
  --overlay-bg:  rgba(80, 60, 20, .35);

  --chrome-grad-from: rgba(236, 225, 200, .96);
  --chrome-grad-to:   rgba(236, 225, 200, .72);
  --chrome-border:    rgba(168, 134, 44, .35);

  --danger:         #a83232;
  --danger-border:  #c97070;
  --danger-soft:    rgba(168, 50, 50, .12);
  --danger-softer:  rgba(168, 50, 50, .2);
  --success-text:   #3f7a3f;
  --success-bg:     rgba(95, 140, 80, .25);
  --warning-text:   #a25a30;
  --warning-bg:     rgba(200, 90, 60, .18);

  --page-bg:           #f4ecd6;
  --page-text:         #1d1812;
  --page-text-soft:    rgba(29, 24, 18, .58);
  --page-text-footer:  rgba(29, 24, 18, .72);
  --page-spine:        rgba(29, 24, 18, .18);
  --page-loading:      #8a6a30;
  --ayah-color:        #8a7530;
  --ayah-hover-bg:     rgba(168, 134, 44, .18);
  --ayah-active-bg:    rgba(168, 134, 44, .32);
  --word-hover-bg:     rgba(168, 134, 44, .18);
  --word-active-bg:    rgba(200, 160, 60, .42);
  --word-active-ring:  rgba(168, 134, 44, .85);
  --decor-shadow:      rgba(168, 134, 44, .16);
  --decor-inner-border: rgba(168, 134, 44, .55);
  --surah-frame-shadow: 0 0 0 1px rgba(168, 134, 44, .35), 0 1px 7px rgba(60, 40, 10, .18);
  --surah-frame-grad: linear-gradient(180deg, rgba(168, 134, 44, .14), rgba(168, 134, 44, .04));
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input  { font: inherit; color: inherit; }
ul, ol { list-style: none; }

/* ── Screens ────────────────────────────────────────────────────────────────── */
.screen { position: fixed; inset: 0; }
.hidden { display: none !important; }

/* ── Overlay ────────────────────────────────────────────────────────────────── */
#overlay {
  position: fixed; inset: 0;
  background: var(--overlay-bg);
  z-index: 40;
  backdrop-filter: blur(2px);
  transition: opacity .2s;
}

/* ── Auth screen ────────────────────────────────────────────────────────────── */
#auth-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg);
  z-index: 100;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow);
}

.auth-logo {
  text-align: center;
  margin-bottom: 28px;
}
.auth-logo-icon {
  display: inline-block;
  width: 80px; height: 80px;
  margin-bottom: 14px;
  border-radius: 22px;
  box-shadow: 0 8px 24px rgba(40, 28, 6, .28);
}
.auth-logo h1 {
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: .22em;
  color: var(--gold);
  text-transform: uppercase;
}

#auth-tab-bar {
  display: flex;
  gap: 4px;
  background: var(--bg-surface);
  border-radius: var(--radius-sm);
  padding: 4px;
  margin-bottom: 24px;
}
.auth-tab {
  flex: 1;
  padding: 8px;
  border-radius: 6px;
  font-size: .875rem;
  color: var(--text-sec);
  transition: background .15s, color .15s;
}
.auth-tab.active {
  background: var(--green-mid);
  color: var(--text);
}

.form-group {
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: .8rem;
  color: var(--text-sec);
  margin-bottom: 6px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.form-group input {
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 1rem;
  transition: border-color .15s;
}
.form-group input:focus {
  outline: none;
  border-color: var(--gold-dim);
}

.auth-error {
  color: var(--danger);
  font-size: .85rem;
  margin-bottom: 12px;
}

/* ── "Stay signed in" toggle ───────────────────────────────────────────────── */
.auth-remember {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 14px;
  font-size: .9rem;
  color: var(--text-sec);
  cursor: pointer;
  user-select: none;
}
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle-switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}
.toggle-track {
  position: absolute;
  inset: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: background .15s, border-color .15s;
}
.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: var(--text-sec);
  border-radius: 50%;
  transition: transform .18s cubic-bezier(.4, 0, .2, 1), background .15s;
}
.toggle-switch input:checked + .toggle-track {
  background: var(--green-mid);
  border-color: var(--green-light);
}
.toggle-switch input:checked + .toggle-track .toggle-thumb {
  background: var(--text);
  transform: translateX(20px);
}
.toggle-switch input:focus-visible + .toggle-track {
  outline: 2px solid var(--gold-dim);
  outline-offset: 2px;
}
.auth-section-label {
  font-size: .8rem;
  color: var(--text-dim);
  margin: 16px 0 8px;
  text-align: center;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn-primary {
  width: 100%;
  padding: 13px;
  background: var(--green-mid);
  border: 1px solid var(--green-light);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: 1rem;
  font-weight: 500;
  transition: background .15s, transform .1s;
}
.btn-primary:hover  { background: var(--green-light); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled { opacity: .5; cursor: default; }

.btn-danger {
  width: 100%;
  padding: 10px;
  background: transparent;
  border: 1px solid var(--danger-border);
  border-radius: var(--radius-sm);
  color: var(--danger);
  font-size: .9rem;
  margin-top: 8px;
  transition: background .15s;
}
.btn-danger:hover { background: var(--danger-soft); }

/* ── App layout ─────────────────────────────────────────────────────────────── */
#app {
  height: 100dvh;
  z-index: 1;
  background: var(--app-bg);
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
#app-header {
  height: var(--header-h);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: env(safe-area-inset-top, 0) 12px 0;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0));
  background: linear-gradient(180deg, var(--chrome-grad-from), var(--chrome-grad-to));
  border-bottom: 1px solid var(--chrome-border);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 30;
  transform: translateY(-110%);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  pointer-events: none;
}

#app.chrome-visible #app-header,
#app:not(.chrome-hidden) #app-header {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.header-nav-btn {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-sec);
  font-size: 1.1rem;
  transition: background .15s, color .15s;
}
.header-nav-btn:hover { background: var(--bg-elevated); color: var(--text); }
.header-nav-btn:disabled { opacity: .3; pointer-events: none; }

.header-center {
  flex: 1;
  text-align: center;
}
#page-surah {
  display: block;
  font-family: 'Scheherazade New', 'Amiri', Georgia, serif;
  font-size: 1rem;
  color: var(--gold);
  line-height: 1.2;
}
.page-indicator {
  font-size: .75rem;
  color: var(--text-dim);
  letter-spacing: .06em;
}
#reading-mode-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--green-mid);
  color: var(--text);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  vertical-align: 1px;
}
#reading-mode-badge.hidden { display: none; }

.header-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.btn-spread-toggle {
  height: 30px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-sec);
  font-size: .75rem;
  letter-spacing: .04em;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.btn-spread-toggle:hover,
.btn-spread-toggle[aria-pressed="true"] {
  background: var(--bg-elevated);
  border-color: var(--border-gold);
  color: var(--gold);
}

#user-area { position: relative; }
#user-chip {
  height: 32px;
  padding: 0 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  font-size: .8rem;
  color: var(--gold);
  white-space: nowrap;
  max-width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
}

#user-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  z-index: 100;
}
#user-menu.open { display: block; }
.user-menu-name {
  font-size: 1rem;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 8px;
}
.user-menu-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .8rem;
  color: var(--text-sec);
  margin-bottom: 12px;
}
.user-menu-hint {
  font-size: .72rem;
  color: var(--text-dim);
  line-height: 1.4;
  margin: 6px 2px 2px;
}
/* The reading-mode row gets a gold accent so it reads as the primary control. */
.user-menu-row.mode-row {
  background: var(--green-dark);
  border-color: var(--border-gold);
}
.user-menu-row.mode-row .umr-state { letter-spacing: .02em; }

/* ── Mushaf container ───────────────────────────────────────────────────────── */
#mushaf-container {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  overflow: hidden;
  background: var(--bg);
  gap: 2px;
  padding: 0;
  z-index: 1;
  /* No text selection / long-press callout anywhere in the reading area. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Belt-and-braces: force every descendant non-selectable too, so an iOS
   long-press can never anchor a selection on a word, line or gap. */
#mushaf-container * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Reverse so page-right (DOM first, lower page number) sits on the visual right,
   matching the physical Arabic mushaf where you read the right page first. */
#mushaf-container.spread-mode {
  flex-direction: row-reverse;
}
/* Each page keeps the mushaf's portrait proportions (~0.62 w:h) instead of
   stretching to a too-wide half-screen. A 15-line page is height-bound, so on a
   wide half-screen the glyphs can only grow to ~60% of the width, leaving big
   empty side margins inside each page. Capping the width to a share of the
   viewport height makes the justified text fill the page edge-to-edge — the two
   proportioned pages then sit centred, like a real open mushaf. */
#mushaf-container.spread-mode #page-right,
#mushaf-container.spread-mode #page-left {
  flex: 0 1 auto;
  width: 64vh;
  max-width: 50%;
  /* A soft gold edge + drop shadow frames the two pages as an open book, so
     the centred layout reads as intentional on wide screens. */
  box-shadow: 0 0 0 1px var(--border-gold), 0 14px 50px rgba(0, 0, 0, .4);
}

/* ── Bottom navigation ──────────────────────────────────────────────────────── */
#bottom-nav {
  height: var(--bottom-h);
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--bottom-h) + env(safe-area-inset-bottom, 0));
  background: linear-gradient(0deg, var(--chrome-grad-from), var(--chrome-grad-to));
  border-top: 1px solid var(--chrome-border);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  padding: 0 4px;
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 30;
  gap: 2px;
  transform: translateY(110%);
  opacity: 0;
  transition: transform .22s ease, opacity .22s ease;
  pointer-events: none;
}

#app.chrome-visible #bottom-nav,
#app:not(.chrome-hidden) #bottom-nav {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.nav-tab-btn {
  flex: 1;
  height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 10px;
  color: var(--text-dim);
  font-size: .65rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: background .15s, color .15s;
}
.nav-tab-btn .tab-icon { font-size: 1.2rem; }
.nav-tab-btn:hover, .nav-tab-btn.active {
  background: var(--bg-elevated);
  color: var(--gold);
}

/* ── Navigation drawer ──────────────────────────────────────────────────────── */
#nav-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: var(--drawer-w);
  max-width: 90vw;
  background: var(--bg-surface);
  border-left: 1px solid var(--border);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
#nav-drawer.open { transform: translateX(0); }

#nav-drawer-header {
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-title { color: var(--gold); font-size: .9rem; letter-spacing: .06em; text-transform: uppercase; }
#nav-close {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: var(--text-sec);
  font-size: 1.2rem;
}
#nav-close:hover { background: var(--bg-elevated); }

.drawer-tabs {
  display: flex;
  padding: 8px;
  gap: 4px;
  background: var(--bg-card);
}
.drawer-tab {
  flex: 1;
  padding: 8px 4px;
  border-radius: 8px;
  font-size: .78rem;
  color: var(--text-sec);
  text-align: center;
  transition: background .15s, color .15s;
}
.drawer-tab.active {
  background: var(--green-mid);
  color: var(--text);
}

#nav-content {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── Surah list ─────────────────────────────────────────────────────────────── */
.surah-list { padding: 4px; }
.surah-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s;
}
.surah-item:hover { background: var(--bg-elevated); }
.surah-item.current {
  background: var(--green-dark);
  border: 1px solid var(--border-gold);
}
.surah-num {
  width: 28px;
  text-align: center;
  font-size: .75rem;
  color: var(--text-dim);
  flex-shrink: 0;
}
.surah-info {
  flex: 1;
  min-width: 0;
}
.surah-arabic {
  display: block;
  font-family: 'Scheherazade New', 'Amiri', Georgia, serif;
  font-size: 1.05rem;
  color: var(--text);
  direction: rtl;
}
.surah-translit {
  display: block;
  font-size: .72rem;
  color: var(--text-sec);
  margin-top: 2px;
}
.surah-meaning {
  font-size: .7rem;
  color: var(--text-dim);
  text-align: right;
  flex-shrink: 0;
  max-width: 90px;
}

/* ── Juz grid ───────────────────────────────────────────────────────────────── */
.juz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px;
}
.juz-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 6px 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: background .12s, border-color .12s;
  cursor: pointer;
  overflow: hidden;
}
.juz-btn:hover { background: var(--bg-elevated); border-color: var(--border-gold); }
.juz-btn.current { background: var(--green-dark); border-color: var(--gold); }
.juz-num {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gold);
}
.juz-arabic {
  font-size: .65rem;
  color: var(--text-sec);
}
.juz-progress-bar {
  width: 100%;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-top: 4px;
  position: relative;
  overflow: hidden;
}
.juz-progress-bar.has-progress::after {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: var(--pct, 0%);
  background: var(--gold);
  border-radius: 2px;
}

/* ── Hizb grid ──────────────────────────────────────────────────────────────── */
.hizb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  padding: 8px;
}
.hizb-btn {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 4px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  cursor: pointer; transition: background .12s;
}
.hizb-btn:hover { background: var(--bg-elevated); border-color: var(--border-gold); }
.hizb-num { font-size: .9rem; color: var(--gold); font-weight: 500; }
.hizb-juz { font-size: .6rem; color: var(--text-dim); }

/* ── Page selector ──────────────────────────────────────────────────────────── */
.page-selector { padding: 20px 16px; }
.page-sel-label { font-size: .8rem; color: var(--text-sec); margin-bottom: 12px; }
.page-sel-row { display: flex; gap: 8px; margin-bottom: 16px; }
.page-sel-row input {
  flex: 1;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.page-sel-row .btn-primary { width: auto; padding: 10px 20px; }
#page-slider {
  width: 100%;
  accent-color: var(--gold);
  margin-bottom: 12px;
}
.page-sel-info { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--text-sec); }

/* ── Bottom sheets ──────────────────────────────────────────────────────────── */
.bottom-sheet {
  position: fixed;
  inset: auto 0 0 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border-gold);
  border-radius: var(--radius) var(--radius) 0 0;
  max-height: 80dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 60;
  padding: 0 0 env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
}
.bottom-sheet.open { transform: translateY(0); }

/* On wider screens, cap the width */
@media (min-width: 600px) {
  .bottom-sheet {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(100%);
    width: 100%;
    max-width: var(--sheet-max);
    border-radius: var(--radius);
    bottom: 80px;
  }
  .bottom-sheet.open { transform: translateX(-50%) translateY(0); }
}

.sheet-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 10px auto 0;
}

/* ── Word popup ─────────────────────────────────────────────────────────────── */
.word-popup-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 20px 6px;
}
.word-popup-arabic {
  text-align: center;
  font-family: 'Scheherazade New', 'Amiri', Georgia, serif;
  font-size: 2.2rem;
  color: var(--gold-light);
  padding: 16px 20px 8px;
  direction: rtl;
}
.word-popup-head .word-popup-arabic { padding: 0; }

.word-popup-play {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--green-mid);
  border: 1px solid var(--green-light);
  color: var(--text);
  font-size: .9rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s, transform .1s;
}
.word-popup-play:hover  { background: var(--green-light); }
.word-popup-play:active { transform: scale(.92); }
.word-popup-rows { padding: 4px 20px 24px; }
.word-popup-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.word-popup-row:last-child { border-bottom: none; }
.row-label { font-size: .75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
.row-value { font-size: .95rem; color: var(--text); text-align: right; }

/* ── Ayah options ───────────────────────────────────────────────────────────── */
.ayah-options-text {
  font-family: 'Scheherazade New', 'Amiri', Georgia, serif;
  font-size: 1.1rem;
  color: var(--text);
  padding: 16px 20px 4px;
  line-height: 1.8;
}
.ayah-options-key {
  font-size: .75rem;
  color: var(--text-dim);
  padding: 0 20px 12px;
  direction: ltr;
}
.ayah-options-btns { padding: 4px 12px 24px; display: flex; flex-direction: column; gap: 6px; }
.option-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-elevated);
  border-radius: 10px;
  color: var(--text);
  font-size: .95rem;
  text-align: left;
  transition: background .12s;
}
.option-btn:hover { background: var(--green-dark); border: 1px solid var(--border-gold); }
.opt-icon { font-size: 1.2rem; width: 24px; text-align: center; }

/* ── Tafseer view ───────────────────────────────────────────────────────────── */
.tafseer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.tafseer-title { font-size: .9rem; color: var(--gold); font-weight: 500; }
.tafseer-key   { font-size: .75rem; color: var(--text-dim); }
.tafseer-body  { padding: 16px 20px 32px; }
.tafseer-text  { font-size: .9rem; color: var(--text-sec); line-height: 1.7; }

.loading-text { color: var(--text-dim); text-align: center; padding: 24px; }
.error-text   { color: var(--danger); text-align: center; }

/* ── Audio bar ──────────────────────────────────────────────────────────────── */
#audio-bar {
  position: fixed;
  bottom: calc(12px + env(safe-area-inset-bottom, 0));
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 24px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 30;
  box-shadow: var(--shadow);
  font-size: .85rem;
  color: var(--text-sec);
}

#app.chrome-visible #audio-bar {
  bottom: calc(var(--bottom-h) + 12px + env(safe-area-inset-bottom, 0));
}
#audio-bar-state { color: var(--gold); font-size: .9rem; }
#audio-bar-key   { color: var(--text); font-size: .8rem; }
#audio-bar-stop  {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem;
}
#audio-bar-stop:hover { color: var(--danger); }

/* ── Khatam toast ───────────────────────────────────────────────────────────── */
.khatam-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green-dark);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  gap: 14px;
  align-items: center;
  max-width: 340px;
  z-index: 200;
  box-shadow: var(--shadow);
  animation: slideIn .4s ease;
}
.khatam-icon { font-size: 2rem; }
.khatam-text { font-size: .9rem; color: var(--text); line-height: 1.5; }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Spinner ────────────────────────────────────────────────────────────────── */
.spinner {
  width: 28px; height: 28px;
  border: 3px solid var(--border);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.page-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  #nav-drawer { --drawer-w: 360px; }
}

@media (max-width: 480px) {
  .auth-card { padding: 24px 18px; }
  #bottom-nav { padding: 0 2px; }
  .nav-tab-btn { font-size: .6rem; }
}

/* Safe area is included in the fixed overlay bars above. */

/* ── Shared panel header ────────────────────────────────────────────────────── */
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--border);
}
.panel-title { font-size: 1rem; color: var(--gold); font-weight: 600; }
.panel-sub   { font-size: .78rem; color: var(--text-dim); }

/* ── Highlight colour picker (in the ayah sheet) ───────────────────────────── */
.hl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 20px 10px;
}
.hl-row-label {
  font-size: .75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hl-picks { display: flex; gap: 8px; }
.hl-pick {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: transform .1s, border-color .12s;
}
.hl-pick.active { border-color: var(--text); }
.hl-pick:active { transform: scale(.88); }
.hl-pick-red    { background: #e04e4e; }
.hl-pick-yellow { background: #e4bf46; }
.hl-pick-blue   { background: #568ae0; }
.hl-pick-green  { background: #56b260; }
.hl-pick-none {
  background: var(--bg-elevated);
  color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
}

/* ── Highlights viewer ─────────────────────────────────────────────────────── */
.hl-list { padding: 8px 12px 28px; display: flex; flex-direction: column; gap: 6px; }
.hl-empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--text-dim);
  font-size: .85rem;
  line-height: 1.6;
}
.hl-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  background: var(--bg-elevated);
  border-radius: 10px;
  border-left: 4px solid transparent;
  cursor: pointer;
  transition: background .12s;
}
.hl-item:hover { background: var(--green-dark); }
.hl-item-red    { border-left-color: #e04e4e; }
.hl-item-yellow { border-left-color: #e4bf46; }
.hl-item-blue   { border-left-color: #568ae0; }
.hl-item-green  { border-left-color: #56b260; }
.hl-swatch { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; }
.hl-swatch-red    { background: #e04e4e; }
.hl-swatch-yellow { background: #e4bf46; }
.hl-swatch-blue   { background: #568ae0; }
.hl-swatch-green  { background: #56b260; }
.hl-item-body { flex: 1; min-width: 0; }
.hl-item-ref  { display: block; font-size: .72rem; color: var(--text-dim); }
.hl-item-text {
  display: block;
  font-family: 'Scheherazade New', 'Amiri', Georgia, serif;
  font-size: 1.05rem;
  color: var(--text);
  direction: rtl;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hl-item-remove {
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--text-dim);
  font-size: .8rem;
  flex-shrink: 0;
}
.hl-item-remove:hover { background: var(--danger-softer); color: var(--danger); }

/* ── Khatmah panel ─────────────────────────────────────────────────────────── */
.kh-start { padding: 18px 20px 26px; }
.kh-label { font-size: .85rem; color: var(--text-sec); margin-bottom: 10px; }
.kh-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.kh-preset {
  padding: 8px 16px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  color: var(--text-sec);
  font-size: .85rem;
  transition: background .12s, color .12s;
}
.kh-preset.active {
  background: var(--green-mid);
  border-color: var(--green-light);
  color: var(--text);
}
.kh-custom { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kh-custom input {
  width: 96px;
  padding: 10px 12px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.kh-custom-unit { color: var(--text-dim); font-size: .85rem; }
.kh-hint { font-size: .78rem; color: var(--text-dim); margin-bottom: 18px; min-height: 1.2em; }

.kh-active { padding: 16px 20px 26px; display: flex; flex-direction: column; gap: 16px; }
.kh-progress-bar {
  height: 10px;
  background: var(--bg-surface);
  border-radius: 6px;
  overflow: hidden;
}
.kh-progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  transition: width .3s;
}
.kh-progress-meta { font-size: .82rem; color: var(--text-sec); margin-top: 7px; text-align: center; }
.kh-progress-meta b { color: var(--gold-light); }

.kh-today {
  background: var(--bg-elevated);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius);
  padding: 16px 14px;
  text-align: center;
}
.kh-today-label {
  font-size: .72rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.kh-today-portion { font-size: 1.2rem; color: var(--gold-light); font-weight: 600; margin: 5px 0 2px; }
.kh-today-juz { font-size: .8rem; color: var(--text-sec); margin-bottom: 13px; }
.kh-today .btn-primary { width: 100%; }

.kh-finish { font-size: .85rem; color: var(--text-sec); text-align: center; }
.kh-finish b { color: var(--text); }

.kh-pill { font-size: .68rem; padding: 4px 10px; border-radius: 12px; font-weight: 600; white-space: nowrap; }
.kh-pill-ok     { background: var(--success-bg); color: var(--success-text); }
.kh-pill-behind { background: var(--warning-bg); color: var(--warning-text); }
.kh-pill-done   { background: rgba(201,168,76,.2); color: var(--gold-light); }

.kh-schedule summary {
  font-size: .82rem;
  color: var(--text-sec);
  cursor: pointer;
  padding: 8px 0;
}
.kh-day-list { max-height: 240px; overflow-y: auto; margin-top: 4px; }
.kh-day {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: .82rem;
  color: var(--text-sec);
}
.kh-day-today { background: var(--green-dark); color: var(--text); }
.kh-day-n { width: 56px; color: var(--text-dim); flex-shrink: 0; }
.kh-day-pages { flex: 1; }
.kh-day-check { width: 16px; text-align: center; color: var(--text-dim); }
.kh-day-done .kh-day-check { color: var(--green-light); }

/* ── Note editor ───────────────────────────────────────────────────────────── */
.note-editor { padding: 16px 20px 24px; }
.note-editor textarea {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 12px;
  font: inherit;
  font-size: .95rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 110px;
}
.note-editor textarea:focus { outline: none; border-color: var(--gold-dim); }
.note-editor-actions { display: flex; gap: 8px; margin-top: 12px; }
.note-editor-actions .btn-primary { flex: 1; width: auto; }
.note-editor-actions .btn-danger {
  flex: 0 0 auto; width: auto; margin-top: 0; padding: 10px 18px;
}

/* ── Notes viewer ──────────────────────────────────────────────────────────── */
.note-list { padding: 8px 12px 28px; display: flex; flex-direction: column; gap: 6px; }
.note-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 12px;
  background: var(--bg-elevated);
  border-radius: 10px;
  border-left: 4px solid var(--gold-dim);
  cursor: pointer;
  transition: background .12s;
}
.note-item:hover { background: var(--green-dark); }
.note-item-body { flex: 1; min-width: 0; }
.note-item-ref  { display: block; font-size: .72rem; color: var(--text-dim); margin-bottom: 3px; }
.note-item-text {
  display: block;
  font-size: .9rem;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.note-item-remove {
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--text-dim);
  font-size: .8rem;
  flex-shrink: 0;
}
.note-item-remove:hover { background: var(--danger-softer); color: var(--danger); }

/* ── Audio player panel ────────────────────────────────────────────────────── */
.ap-body { padding: 14px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.ap-section { display: flex; flex-direction: column; gap: 7px; }
.ap-label {
  font-size: .75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ap-range { display: flex; gap: 8px; }
.ap-select {
  flex: 1; min-width: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 9px 10px;
  font-size: .9rem;
}
.ap-ayah {
  width: 72px; flex-shrink: 0;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 9px 8px;
  font-size: .9rem;
  text-align: center;
}
.ap-select:focus, .ap-ayah:focus, .ap-custom:focus {
  outline: none; border-color: var(--gold-dim);
}
.ap-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-chip {
  padding: 7px 13px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 18px;
  color: var(--text-sec);
  font-size: .82rem;
  transition: background .12s, color .12s, border-color .12s;
}
.ap-chip.active {
  background: var(--green-mid);
  border-color: var(--green-light);
  color: var(--text);
}
.ap-custom {
  margin-top: 4px; width: 116px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 8px 10px;
}
.ap-play { margin-top: 4px; }

/* ── User-menu rows (settings-like buttons in the user dropdown) ───────────── */
.user-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  margin-top: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font-size: .85rem;
  text-align: left;
  transition: background .12s, border-color .12s;
}
.user-menu-row:hover { background: var(--green-dark); border-color: var(--border-gold); }
.user-menu-row[aria-pressed="true"] {
  background: var(--green-dark);
  border-color: var(--border-gold);
}
.umr-state { color: var(--gold-light); font-size: .8rem; font-weight: 600; }

/* ── Quran symbols reference ───────────────────────────────────────────────── */
.sym-list {
  padding: 10px 14px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sym-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 6px;
}
/* The mark itself, shown as a clean gold token (its written letter form). */
.sym-mark {
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--green-dark);
  border: 1px solid var(--border-gold);
  font-family: 'Scheherazade New', 'Amiri', 'UthmanicHafs', Georgia, serif;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--gold-light);
  direction: rtl;
}
.sym-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sym-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}
.sym-meaning { font-size: .82rem; color: var(--text-sec); line-height: 1.45; }

/* ── Offline-access panel ──────────────────────────────────────────────────── */
.of-body { padding: 16px 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.of-lede { font-size: .9rem; color: var(--text-sec); line-height: 1.55; }
.of-note { font-size: .78rem; color: var(--text-dim); }
.of-status { min-height: 36px; display: flex; flex-direction: column; gap: 6px; }
.of-pill {
  display: inline-block; align-self: flex-start;
  font-size: .75rem; padding: 5px 12px; border-radius: 14px; font-weight: 600;
}
.of-pill-idle { background: var(--bg-surface); color: var(--text-dim); }
.of-pill-ok   { background: var(--success-bg); color: var(--success-text); }
.of-pill-warn { background: var(--warning-bg); color: var(--warning-text); }
.of-progress {
  height: 10px;
  background: var(--bg-surface);
  border-radius: 6px;
  overflow: hidden;
}
.of-progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  transition: width .25s;
}
.of-progress-meta { font-size: .82rem; color: var(--text-sec); text-align: center; }