@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Cairo:wght@400;600;700&family=Noto+Naskh+Arabic:wght@400;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Reem+Kufi:wght@400;700&family=Scheherazade+New:wght@400;700&family=Tajawal:wght@400;500;600;700&display=swap');

/* CSS Variables for Themes */
:root {
  /* Default: Dark Onyx Theme */
  --bg-primary: #090d16;
  --bg-secondary: #0f172a;
  --bg-tertiary: #1e293b;
  --border-color: rgba(255, 255, 255, 0.08);
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --accent-color: #10b981;
  --accent-hover: #059669;
  --accent-glow: rgba(16, 185, 129, 0.15);
  --gold-color: #f59e0b;
  --success-color: #22c55e;
  --shadow-color: rgba(0, 0, 0, 0.4);
  --glass-bg: rgba(15, 23, 42, 0.8);
  --card-bg: #0f172a;
  --card-hover-bg: #1e293b;
  /* Subtle recessed fill, one step up from the card. Must be a literal in each
     theme block: var() inside a custom property is substituted where the
     property is *declared*, so `var(--bg-tertiary)` here would resolve against
     this block's own value and then inherit that literal into every theme. */
  --bg-hover: #1e293b;

  /* Safe Area variables (Auto-calculated on mobile iOS/WebViews) */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  
  /* Fonts */
  --ui-font-family: 'Plus Jakarta Sans', sans-serif;
  --arabic-font-family: 'Scheherazade New', serif;
  
  /* Font Sizes (Modified dynamically via JS) */
  --arabic-font-size: 32px;
  --english-font-size: 16px;
  
  /* Highlight colors */
  --hl-green: #4ade80;
  --hl-pink: #f472b6;
  --hl-blue: #60a5fa;
  --hl-purple: #c084fc;
  --hl-orange: #fb923c;
  
  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
}

/* Emerald Mint Theme */
.theme-emerald {
  --bg-primary: #022c22;
  --bg-secondary: #064e3b;
  --bg-tertiary: #0f766e;
  --border-color: rgba(255, 255, 255, 0.08);
  --text-primary: #f0fdf4;
  --text-secondary: #a7f3d0;
  --text-muted: #34d399;
  --accent-color: #fbbf24; /* gold accent */
  --accent-hover: #f59e0b;
  --accent-glow: rgba(251, 191, 36, 0.15);
  --gold-color: #fbbf24;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --glass-bg: rgba(6, 78, 59, 0.85);
  --card-bg: #064e3b;
  --card-hover-bg: #0b5f49;
  
  --hl-green: #4ade80;
  --hl-pink: #f472b6;
  --hl-blue: #60a5fa;
  --hl-purple: #c084fc;
  --hl-orange: #fb923c;
}

/* Sepia Theme */
.theme-sepia {
  --bg-primary: #fdfaf2;
  --bg-secondary: #f4edd8;
  --bg-tertiary: #eadeca;
  --border-color: rgba(67, 52, 34, 0.12);
  --text-primary: #433422;
  --text-secondary: #6e583f;
  --text-muted: #8e785f;
  --accent-color: #0d9488; /* deep teal */
  --accent-hover: #0f766e;
  --accent-glow: rgba(13, 148, 136, 0.12);
  --gold-color: #b45309;
  --shadow-color: rgba(67, 52, 34, 0.08);
  --glass-bg: rgba(244, 237, 216, 0.9);
  --card-bg: #f4edd8;
  --card-hover-bg: #eadeca;
  --bg-hover: #eadeca;
  
  --hl-green: #16a34a;
  --hl-pink: #e646b4;
  --hl-blue: #1b49de;
  --hl-purple: #861ddc;
  --hl-orange: #ff8400;
}

/* Light Theme */
.theme-light {
  --bg-primary: #f8fafc;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f1f5f9;
  --border-color: rgba(0, 0, 0, 0.06);
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --accent-color: #059669; /* emerald */
  --accent-hover: #047857;
  --accent-glow: rgba(5, 150, 105, 0.08);
  --gold-color: #d97706;
  --shadow-color: rgba(0, 0, 0, 0.04);
  --glass-bg: rgba(255, 255, 255, 0.85);
  --card-bg: #ffffff;
  --card-hover-bg: #f8fafc;
  --bg-hover: #f1f5f9;
  
  --hl-green: #16a34a;
  --hl-pink: #e646b4;
  --hl-blue: #1b49de;
  --hl-purple: #861ddc;
  --hl-orange: #ff8400;
}

/* Global Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--ui-font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  touch-action: manipulation;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  color: inherit;
  transition: all var(--transition-fast);
}

a {
  text-decoration: none;
  color: inherit;
}

/* Arabic interface font strategy (per-script fallback):
   Plus Jakarta Sans stays FIRST, so every Latin glyph (transliterations,
   emails, @usernames, GitHub/iCloud/JSON) keeps the original UI font; Arabic
   characters — which Plus Jakarta lacks — fall through to Tajawal. The Quran
   verse font (--arabic-font-family) is separate and stays user-selectable.
   Custom properties inherit, so setting this on <html> cascades to the whole UI. */
html[lang="ar"] {
  --ui-font-family: 'Plus Jakarta Sans', 'Tajawal', sans-serif;
}

/* Arabic optical adjustments. Arabic has a smaller apparent size than Latin at
   the same px and no uppercase, so a few UI elements need slightly more size /
   weight to match the Latin build's presence. And Latin `letter-spacing` (a
   small-caps refinement) must be neutralised on Arabic text, where it only
   spreads and thins the letters. Scoped to Arabic content; the Latin
   transliteration (.hero-trans-name) keeps its tight tracking untouched. */
html[lang="ar"] .settings-title,
html[lang="ar"] .modal-section-label,
html[lang="ar"] .modal-selector-label,
html[lang="ar"] .stat-label,
html[lang="ar"] .search-history-header,
html[lang="ar"] .welcome-title,
html[lang="ar"] .welcome-lang-badge,
html[lang="ar"] .import-opt-badge {
  letter-spacing: normal;
}

html[lang="ar"] .stat-label { font-size: 0.8rem; font-weight: 600; }
html[lang="ar"] .stat-value { font-size: 1.1rem; }
html[lang="ar"] .play-hero-btn { font-size: 1.05rem; font-weight: 700; }

/* Scrollbars styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 4px;
}

@media (hover: hover) {
  ::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
  }
}

/* Layout Framework */
.app-container {
  display: flex;
  width: 100%;
  height: 100vh;
  position: relative;
}

/* Sidebar Styling */
.sidebar {
  width: 350px;
  background-color: var(--bg-secondary);
  border-inline-end: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: calc(90px + var(--safe-area-bottom));
  z-index: 10;
  transition: width var(--transition-normal), background-color var(--transition-normal);
}

/* Sidebar Tabs Navigation */
.sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  padding: 0.5rem 0.75rem 0;
  gap: 4px;
}

.tab-btn {
  flex: 1;
  padding: 0.75rem 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: 8px 8px 0 0;
  position: relative;
  text-align: center;
}

@media (hover: hover) {
  .tab-btn:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.03);
  }
}

@media (hover: hover) {
  .theme-sepia .tab-btn:hover {
    background-color: rgba(0, 0, 0, 0.03);
  }
}

.tab-btn.active {
  color: var(--accent-color);
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--accent-color);
  border-radius: 2px 2px 0 0;
}

/* Tab Panels Content */
.sidebar-content {
  flex: 1;
  overflow-y: auto;
  position: relative;
}

.tab-panel {
  display: none;
  padding: 1rem;
  height: 100%;
  flex-direction: column;
}

.tab-panel.active {
  display: flex;
}

/* Chapters/Surah Tab Content */
.search-wrapper {
  position: relative;
  margin-bottom: 1rem;
}

.search-input {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 2.5rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color var(--transition-fast);
}

.search-input:focus {
  border-color: var(--accent-color);
}

.search-icon {
  position: absolute;
  inset-inline-start: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  font-size: 1rem;
}

.search-clear-btn {
  position: absolute;
  inset-inline-end: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

@media (hover: hover) {
  .search-clear-btn:hover {
    color: var(--text-primary);
  }
}

/* Surah List inside Sidebar */
.surah-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-inline-end: 0.75rem;
}

.surah-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem 0.85rem 0.85rem;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid transparent;
  border-inline-start: 3px solid transparent;
  border-radius: 12px;
  text-align: start;
  transition: all var(--transition-fast);
  user-select: none;
  -webkit-user-select: none;
}

.surah-revelation-no {
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 0.15rem;
  opacity: 0.8;
}

.theme-sepia .surah-item {
  background-color: rgba(0, 0, 0, 0.02);
}

@media (hover: hover) {
  .surah-item:hover {
    background-color: var(--card-hover-bg);
    transform: translateX(4px);
    border-color: var(--border-color);
  }
}

.surah-item.active {
  background-color: var(--accent-glow);
  border-color: var(--accent-color);
}

.surah-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.surah-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.surah-item.active .surah-number {
  background-color: var(--accent-color);
  color: var(--bg-primary);
  border-color: var(--accent-color);
}

.surah-number .playing-wave-svg {
  color: var(--accent-color);
}

.surah-item.active .surah-number .playing-wave-svg {
  color: var(--bg-primary);
}

/* Sidebar Playing Icon Animations - Disabled/Removed for static icon */
.playing-wave-svg {
  display: block;
}

.surah-item.active .surah-number.playing {
  /* Animation disabled */
}

.surah-item:not(.active) .surah-number.playing {
  /* Animation disabled */
}

.surah-meta {
  display: flex;
  flex-direction: column;
}

.surah-title-eng {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.surah-sub-eng {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}

.surah-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.surah-title-ar {
  font-family: var(--arabic-font-family);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--accent-color);
}

.surah-verses-count {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

/* Settings Tab Panel Styles */
.settings-section {
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1.25rem;
}

.settings-section > :last-child {
  margin-bottom: 0 !important;
}

.settings-section > .toggle-control:last-child {
  padding-bottom: 0 !important;
}

.settings-section:last-child {
  border-bottom: none;
}

.settings-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.85rem;
}

/* Permanent install banner at the top of Settings: balance the gap above it
   (panel padding) with an equal gap below, before the Cloud Sync section. */
#settings-install-banner {
  margin-bottom: 1rem;
}

#settings-install-banner:empty {
  display: none;
}

/* ── Cloud Sync Status Card ── */
.sync-status-card {
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 2px 8px var(--shadow-color);
}

/* ── Premium Data Export Expandable Menu ── */
.export-menu-container {
  border-radius: 10px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  overflow: hidden;
  transition: border-color var(--transition-fast, 0.2s), box-shadow var(--transition-fast, 0.2s);
}

.export-menu-container.open {
  border-color: var(--accent-color);
}

@media (hover: hover) {
  .export-menu-container:hover {
    border-color: var(--accent-color);
  }
}

.export-menu-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: start;
  transition: background-color var(--transition-fast, 0.2s);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .export-menu-trigger:hover {
    background-color: rgba(255, 255, 255, 0.03);
  }
}

.export-trigger-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.export-trigger-icon {
  color: var(--accent-color);
  flex-shrink: 0;
}

.export-trigger-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.export-trigger-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.export-badge {
  font-size: 0.725rem;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--accent-color);
  font-weight: 600;
  border: 1px solid rgba(16, 185, 129, 0.25);
  transition: all 0.2s ease;
}

.export-badge.none-selected {
  background-color: rgba(239, 68, 68, 0.1);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.25);
}

.export-chevron {
  color: var(--text-muted);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.export-menu-container.open .export-chevron {
  transform: rotate(180deg);
}

.export-menu-dropdown {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background-color: var(--bg-primary);
}

.export-menu-container.open .export-menu-dropdown {
  grid-template-rows: 1fr;
}

.export-dropdown-inner {
  overflow: hidden;
  padding: 0 1rem;
  transition: padding 0.25s ease;
}

.export-menu-container.open .export-dropdown-inner {
  padding: 0.5rem 1rem 0.75rem 1rem;
  border-top: 1px solid var(--border-color);
}

.export-dropdown-inner .toggle-control {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border-color);
}

.export-dropdown-inner .toggle-control:last-child {
  border-bottom: none;
}

.sync-status-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.sync-status-info {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.sync-status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-muted);
  display: inline-block;
  flex-shrink: 0;
  margin-top: 1px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.sync-status-indicator.active {
  background-color: var(--success-color);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.4);
}

.sync-status-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.sync-badge {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background-color: rgba(128, 128, 128, 0.1);
  color: var(--text-muted);
  transition: all 0.2s ease;
}

.sync-badge.synced {
  background-color: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.3);
  color: var(--success-color);
}

.sync-badge.syncing {
  background-color: rgba(245, 158, 11, 0.12);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--gold-color);
}

.sync-badge.error {
  background-color: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

.sync-status-desc {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin: 0;
  opacity: 0.9;
}

.sync-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .sync-action-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: var(--bg-secondary);
    box-shadow: 0 2px 8px var(--shadow-color);
  }
}

/* ── Auth / Cloud Account Modal ── */
.auth-modal-card {
  max-width: 400px;
  width: 90%;
  padding: 0;
  gap: 0;
  overflow: hidden;
  border-color: rgba(16, 185, 129, 0.3);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}

.auth-modal-card .modal-header {
  padding: 1.25rem 1.25rem 0.75rem 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.auth-modal-body {
  padding: 1.25rem;
}

/* Auth Segmented Tabs */
.auth-segmented-tabs {
  display: flex;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: 3px;
  border-radius: 10px;
  margin-bottom: 1.25rem;
}

.auth-segmented-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0.55rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .auth-segmented-btn:hover {
    color: var(--text-primary);
  }
}

.auth-segmented-btn.active {
  background-color: var(--bg-tertiary);
  color: var(--accent-color);
  box-shadow: 0 2px 8px var(--shadow-color);
}

/* Auth Input Fields */
.auth-input-group {
  margin-bottom: 1rem;
}

.auth-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 0.4rem;
}

.auth-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-input-icon {
  position: absolute;
  inset-inline-start: 0.85rem;
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.2s ease;
}

.auth-input {
  width: 100%;
  padding: 0.7rem 0.85rem 0.7rem 2.5rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary);
  font-size: 0.88rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.auth-input:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.auth-input:focus + .auth-input-icon,
.auth-input-wrapper:focus-within .auth-input-icon {
  color: var(--accent-color);
}

/* Auth Error Banner */
.auth-error-banner {
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  font-size: 0.78rem;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  line-height: 1.4;
}

/* Auth Submit Button */
.auth-submit-btn {
  width: 100%;
  padding: 0.75rem 1.25rem;
  background-color: var(--accent-color);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 14px var(--accent-glow);
  transition: background-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.auth-submit-btn span {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.auth-submit-btn svg {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
  transition: none !important;
}

.theme-emerald .auth-submit-btn {
  color: #022c22;
}

@media (hover: hover) {
  .auth-submit-btn:hover {
    background-color: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px var(--accent-glow);
  }

  .auth-submit-btn:active {
    transform: translateY(0);
  }
}

/* Logged-In Profile View */
.auth-user-profile-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  padding: 0.95rem 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}

.auth-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--accent-glow);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.auth-profile-details {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.auth-username-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.auth-status-pill {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--success-color);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  line-height: 1;
}

.auth-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--success-color);
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
  flex-shrink: 0;
  margin-top: 1px;
}

.auth-synced-info-card {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.75rem 0.85rem;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.45;
  margin-bottom: 1.25rem;
}

.auth-synced-info-card svg {
  color: var(--accent-color);
  flex-shrink: 0;
  margin-top: 2px;
}

.auth-actions-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auth-action-btn {
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 9px;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

.auth-signout-btn {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

@media (hover: hover) {
  .auth-signout-btn:hover {
    background-color: var(--border-color);
    color: var(--text-primary);
  }
}

.auth-reset-wrapper {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 0.85rem;
}

.auth-reset-header {
  margin-bottom: 0.6rem;
}

.auth-reset-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.auth-reset-btn {
  background-color: rgba(245, 158, 11, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #d97706;
}

body.dark .auth-reset-btn,
body.theme-dark .auth-reset-btn,
body.theme-midnight .auth-reset-btn {
  color: #fbbf24;
}

@media (hover: hover) {
  .auth-reset-btn:hover {
    background-color: rgba(245, 158, 11, 0.18);
    border-color: rgba(245, 158, 11, 0.5);
  }
}

.auth-reset-subtext {
  font-size: 0.71rem;
  color: var(--text-muted);
  margin-top: 0.45rem;
  margin-bottom: 0;
  text-align: center;
  line-height: 1.35;
}

.auth-reset-confirm-card {
  background-color: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 8px;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  animation: fadeIn 0.2s ease;
}

.auth-reset-confirm-content {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  font-size: 0.76rem;
  color: var(--text-primary);
  line-height: 1.4;
}

.auth-reset-confirm-content svg {
  color: #ef4444;
  flex-shrink: 0;
  margin-top: 1px;
}

.auth-reset-confirm-content p {
  margin: 0;
}

.auth-reset-confirm-actions {
  display: flex;
  gap: 0.5rem;
}

.auth-reset-cancel-btn {
  flex: 1;
  padding: 0.5rem 0.75rem;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .auth-reset-cancel-btn:hover {
    background-color: var(--border-color);
  }
}

.auth-reset-danger-btn {
  flex: 1.2;
  padding: 0.5rem 0.75rem;
  background-color: #ef4444;
  border: 1px solid #ef4444;
  color: #ffffff;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

@media (hover: hover) {
  .auth-reset-danger-btn:hover {
    background-color: #dc2626;
    border-color: #dc2626;
  }
}

/* Fallback for legacy auth-logout-btn */
.auth-logout-btn {
  width: 100%;
  padding: 0.65rem 1rem;
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .auth-logout-btn:hover {
    background-color: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3);
  }
}

/* Theme Option Grid */
.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.theme-opt-btn {
  padding: 0.85rem;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--border-color);
  background-color: var(--bg-primary);
}

.theme-opt-btn.active {
  border-color: var(--accent-color);
  background-color: var(--accent-glow);
  color: var(--accent-color);
}


/* Range Sliders Controls */
.slider-control {
  margin-bottom: 1rem;
}

.slider-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.range-slider {
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background-color: var(--bg-primary);
  -webkit-appearance: none;
  cursor: pointer;
  box-shadow: none;
}

.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--accent-color);
  transition: transform 0.1s ease;
  box-shadow: none;
}

.range-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: var(--accent-color);
  border: none;
  transition: transform 0.1s ease;
  box-shadow: none;
}

@media (hover: hover) {
  .range-slider::-webkit-slider-thumb:hover {
    transform: scale(1.2);
  }
}

.slider-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.5rem;
}

.slider-wrapper .range-slider {
  flex-grow: 1;
  width: auto;
  margin: 0;
  padding: 0;
  display: block;
}

.slider-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  padding: 0;
  outline: none;
  box-shadow: none;
  /* Prevent layout/subpixel snapping twitching during transforms */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

@media (hover: hover) {
  .slider-btn:hover {
    background-color: var(--border-color);
    border-color: var(--accent-color);
    color: var(--text-primary);
  }
}

.slider-btn:active {
  transform: scale(0.95) translate3d(0, 0, 0);
  background-color: var(--accent-glow);
  color: var(--accent-color);
}

.slider-btn svg {
  display: block;
  pointer-events: none;
  /* Force GPU compositing for subpixel rendering consistency */
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}



/* Select dropdown controls for settings */
.select-control {
  margin-bottom: 1.25rem;
}

.select-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.2rem;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  color: var(--text-secondary);
}

.select-subcomment {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 400;
  line-height: 1.35;
}

.select-wrapper {
  position: relative;
  width: 100%;
}

.settings-select {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  background-color: var(--bg-primary);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
  transition: all var(--transition-fast);
  font-family: inherit;
}

@media (hover: hover) {
  .settings-select:hover {
    border-color: var(--accent-color);
  }
}

.settings-select:focus {
  outline: none;
}

.settings-select:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Toggles and Switches */
.toggle-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.toggle-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  transition: .3s;
  border-radius: 24px;
}

.switch-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  inset-inline-start: 3px;
  bottom: 3px;
  background-color: var(--text-secondary);
  transition: .3s;
  border-radius: 50%;
}

input:checked + .switch-slider {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
}

input:checked + .switch-slider:before {
  transform: translateX(20px);
  background-color: var(--bg-primary);
}

.toggle-control.disabled-control {
  opacity: 0.45;
  pointer-events: none;
}

.reciter-notice {
  font-size: 0.82rem;
  color: var(--accent-color);
  margin-top: 0.4rem;
  line-height: 1.35;
}

/* Bookmarks Panel */
.bookmarks-actions-header {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0.75rem;
}

.bookmark-action-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .bookmark-action-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: var(--bg-secondary);
  }
}

.bookmark-action-btn svg {
  display: block;
}

.bookmark-sort-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  padding: 0.4rem;
  padding-inline: 0.75rem 1.85rem;
  border-radius: 6px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  
  /* Embed a custom styled dropdown arrow SVG */
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%23888888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 11px;
}

.bookmark-sort-select option {
  font-family: inherit;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

.bookmark-sort-select:focus {
  outline: none;
}

@media (hover: hover) {
  .bookmark-sort-select:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: var(--bg-secondary);
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='14' height='14' fill='none' stroke='%2310b981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  }
}

.bookmark-drag-handle {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  padding: 0.25rem;
  color: var(--text-muted);
  transition: color 0.2s ease;
  user-select: none;
  touch-action: none;
}

@media (hover: hover) {
  .bookmark-drag-handle:hover {
    color: var(--accent-color);
  }
}

.bookmark-drag-handle:active {
  cursor: grabbing;
}

.bookmark-item.dragging {
  opacity: 0.4;
  border-style: dashed;
  border-color: var(--accent-color);
  background-color: var(--accent-glow) !important;
}

.bookmark-action-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}

@media (hover: hover) {
  .bookmark-action-btn.disabled:hover {
    border-color: var(--border-color);
    color: var(--text-primary);
    background-color: var(--bg-primary);
  }
}

.bookmarks-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  flex: 1;
  padding-top: 6px;
}

.bookmark-item {
  padding: 0.85rem 0.95rem;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-inline-start: 3px solid var(--accent-color);
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--shadow-color);
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

#favorites-list-container .bookmark-item {
  border-inline-start: 1px solid var(--border-color);
}

@media (hover: hover) {
  .bookmark-item:hover,
  #favorites-list-container .bookmark-item:hover {
    background-color: var(--card-hover-bg, var(--bg-tertiary));
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px var(--shadow-color);
    transform: translateY(-1px);
  }
}

.bookmark-item-details {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.bookmark-title {
  font-weight: 600;
  font-size: 0.85rem;
}

.bookmark-preview {
  font-size: 0.78rem;
  color: var(--text-secondary);
  opacity: 0.88;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.bookmark-item:not(:has(.bookmark-notes)) .bookmark-preview,
.bookmark-preview.multi-line {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
}

.bookmark-actions {
  display: flex;
  gap: 0.5rem;
}

.bookmark-btn-fav {
  padding: 0.35rem;
  background: none;
  border: none;
  color: var(--gold-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: opacity 0.2s ease, transform 0.15s ease;
}

@media (hover: hover) {
  .bookmark-btn-fav:hover {
    opacity: 0.7;
    transform: scale(1.1);
  }
}

/* Bookmark Notes styles */
.bookmark-notes {
  display: flex;
  align-items: flex-start;
  gap: 0.35rem;
  margin-top: 0.35rem;
  padding: 0.2rem 0;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-style: italic;
  line-height: 1.3;
  word-break: break-word;
}

/* Bookmark comments on Bookmarks tab */
#bookmarks-list-container .bookmark-notes {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.9rem;
  font-style: normal;
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.035);
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-top: 0.6rem;
  position: relative;
}

/* Arabic bookmark comment text in the panels: RTL, proper font, larger size */
#bookmarks-list-container .bookmark-notes [dir="rtl"] {
  font-family: inherit;
  font-size: 1.15rem;
  line-height: 1.7;
  display: block;
  text-align: right;
  direction: rtl;
}

.theme-sepia #bookmarks-list-container .bookmark-notes {
  background-color: rgba(0, 0, 0, 0.04);
}

/* ── Unified Note Card (Notebook / Reflection Card) ── */
.note-card {
  padding: 0.85rem 0.95rem;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-inline-start: 3px solid var(--accent-color);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  cursor: pointer;
  box-shadow: 0 2px 8px var(--shadow-color);
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}

/* Inline Note Card inside Verse Card (concentric inset layout) */
.verse-card .note-card {
  margin: 0.5rem -1rem -0.75rem -1rem;
  width: calc(100% + 2rem);
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border-inline-start: 1px solid var(--border-color);
  box-shadow: none;
  background-color: rgba(255, 255, 255, 0.025);
}

.theme-light .verse-card .note-card {
  background-color: rgba(0, 0, 0, 0.02);
}

.theme-sepia .verse-card .note-card {
  background-color: rgba(0, 0, 0, 0.03);
}

@media (hover: hover) {
  .note-card:hover {
    background-color: var(--card-hover-bg, var(--bg-tertiary));
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px var(--shadow-color);
    transform: translateY(-1px);
  }
}

.note-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.note-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--accent-color);
  background-color: var(--accent-glow);
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  line-height: 1;
}

.note-card-badge.clickable {
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .note-card-badge.clickable:hover {
    background-color: var(--accent-color);
    color: var(--bg-primary);
  }
  .note-card-badge.clickable:hover .badge-jump-icon {
    transform: translate(1px, -1px);
    opacity: 1;
  }
}

.badge-jump-icon {
  margin-inline-start: 1px;
  opacity: 0.65;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.note-card-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
}

.note-card-preview {
  font-size: 0.78rem;
  color: var(--text-secondary);
  opacity: 0.88;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  margin-bottom: 0.2rem;
}

.note-card-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.note-card-action-btn {
  padding: 0.3rem;
  color: var(--text-muted);
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease, background-color 0.2s ease;
}

@media (hover: hover) {
  .note-card-action-btn:hover {
    color: var(--accent-color);
    background-color: rgba(128, 128, 128, 0.1);
  }
}

.note-card-body {
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-primary);
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.note-card.expanded .note-card-body {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

/* Collapsed preview: flatten markdown blocks to a single inline text flow.
   -webkit-line-clamp only accounts for line boxes — block children with
   margins (p, h3/h4, blockquote) paint on top of each other on desktop
   WebKit/Blink, so while clamped everything must be inline. */
.note-card:not(.expanded) .note-card-body p,
.note-card:not(.expanded) .note-card-body h3,
.note-card:not(.expanded) .note-card-body h4,
.note-card:not(.expanded) .note-card-body blockquote,
.note-card:not(.expanded) .note-card-body ul,
.note-card:not(.expanded) .note-card-body ol,
.note-card:not(.expanded) .note-card-body li,
.note-card:not(.expanded) .note-card-body [dir="rtl"] {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  font-size: inherit;
  line-height: inherit;
}

.note-card:not(.expanded) .note-card-body p:not(:last-child)::after,
.note-card:not(.expanded) .note-card-body h3::after,
.note-card:not(.expanded) .note-card-body h4::after,
.note-card:not(.expanded) .note-card-body blockquote:not(:last-child)::after,
.note-card:not(.expanded) .note-card-body li:not(:last-child)::after {
  content: " ";
}


.note-card-body [dir="rtl"] {
  font-family: inherit;
  font-size: 1.15rem;
  line-height: 1.7;
  display: block;
  text-align: right;
  direction: rtl;
}

.note-card-body p {
  margin: 0 0 0.4rem;
  line-height: 1.55;
}

.note-card-body p:last-child {
  margin-bottom: 0;
}

.note-card-body h3,
.note-card-body h4 {
  font-size: 0.9rem;
  font-weight: 650;
  margin: 0.5rem 0 0.25rem;
  color: var(--text-primary);
}

/* Inline Verse Bookmark comment box - rendered as Tag Card */
.verse-bookmark {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0.65rem 0.85rem;
  background-color: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.9rem;
  font-style: normal;
  line-height: 1.5;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  width: 100%;
  box-sizing: border-box;
}

.theme-sepia .verse-bookmark {
  background-color: rgba(0, 0, 0, 0.035);
}

.theme-light .verse-bookmark {
  background-color: rgba(0, 0, 0, 0.025);
}

.verse-bookmark-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.verse-bookmark-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent-color);
  background-color: var(--accent-glow);
  padding: 0.2rem 0.55rem;
  border-radius: 10px;
  line-height: 1;
  width: fit-content;
}

.verse-bookmark [dir="rtl"] {
  font-family: inherit;
  font-size: 1.15rem;
  line-height: 1.7;
  display: block;
  text-align: right;
  direction: rtl;
}

.verse-bookmark .verse-notes-content {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

@media (hover: hover) {
  .verse-notes:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--accent-color);
    color: var(--text-primary);
  }

  .verse-bookmark:hover {
    background-color: rgba(255, 255, 255, 0.07);
    border-color: var(--accent-color);
    color: var(--text-primary);
  }

  .theme-sepia .verse-notes:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }

  .theme-sepia .verse-bookmark:hover,
  .theme-light .verse-bookmark:hover {
    background-color: rgba(0, 0, 0, 0.06);
  }
}

.bookmark-btn-notes {
  padding: 0.35rem;
  color: var(--text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.2s ease;
}

@media (hover: hover) {
  .bookmark-btn-notes:hover {
    color: var(--accent-color);
  }
}

/* Expand/Collapse button inside verse notes */
.verse-notes-expand {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: block;
  color: var(--text-muted);
  opacity: 0.5;
  transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  line-height: 0;
}

@media (hover: hover) {
  .verse-notes-expand:hover {
    opacity: 1;
    color: var(--accent-color);
    background-color: rgba(128, 128, 128, 0.08);
  }
}

/* Markdown-rendered content inside verse notes / bookmark comments */
.verse-notes p,
.verse-bookmark p {
  margin: 0 0 0.35rem;
  line-height: 1.6;
}
.verse-notes p:last-child,
.verse-bookmark p:last-child {
  margin-bottom: 0;
}
.verse-notes h3,
.verse-bookmark h3 {
  font-size: 0.9rem;
  font-weight: 650;
  margin: 0.6rem 0 0.25rem;
  color: var(--text-primary);
}
.verse-notes h4,
.verse-bookmark h4 {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.5rem 0 0.2rem;
  color: var(--text-primary);
}
.verse-notes h3:first-child,
.verse-notes h4:first-child,
.verse-bookmark h3:first-child,
.verse-bookmark h4:first-child {
  margin-top: 0;
}
.verse-notes blockquote,
.verse-bookmark blockquote {
  margin: 0.35rem 0;
  padding: 0.15rem 0;
  padding-inline-start: 0.6rem;
  border-inline-start: 2px solid var(--text-secondary);
  opacity: 0.85;
  line-height: 1.5;
}
.verse-notes blockquote:first-child,
.verse-bookmark blockquote:first-child {
  margin-top: 0;
}
.verse-notes code,
.verse-bookmark code {
  background: rgba(128, 128, 128, 0.12);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 0.85em;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}
.verse-notes strong,
.verse-bookmark strong {
  color: var(--text-primary);
  font-weight: 600;
}

/* Actions row inside verse notes (expand + edit) */
.verse-notes-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  margin-top: 0.15rem;
}

/* Edit button inside verse notes */
.verse-notes-edit {
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: block;
  color: var(--text-muted);
  opacity: 0.5;
  transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  line-height: 0;
}

@media (hover: hover) {
  .verse-notes-edit:hover {
    opacity: 1;
    color: var(--accent-color);
    background-color: rgba(128, 128, 128, 0.08);
  }
}

/* Modal overlay & popup */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-card {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  width: 90%;
  max-width: 420px;
  padding: 1.25rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.modal-close-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: none;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

@media (hover: hover) {
  .modal-close-btn:hover {
    color: var(--text-primary);
    background-color: rgba(128, 128, 128, 0.1);
  }
}

/* Upgraded Note Reflection Workspace Modal */
.note-modal-card {
  max-width: 480px;
  gap: 0.85rem;
  border-color: rgba(5, 150, 105, 0.4);
  box-shadow: 0 12px 40px rgba(5, 150, 105, 0.15);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.note-modal-card .modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.modal-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.note-modal-card .modal-body textarea {
  height: 180px;
  min-height: 130px;
  font-size: 0.92rem;
  line-height: 1.6;
  padding: 0.85rem;
  margin: 0;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.note-modal-card .modal-body textarea:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.note-modal-card .modal-btn-save {
  background-color: var(--accent-color);
  color: #ffffff;
}

.modal-header-title {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.modal-header-subtitle {
  font-size: 0.75rem;
  color: var(--accent-color);
  font-weight: 600;
}

.modal-header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.modal-jump-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 28px;
  padding: 0 0.65rem;
  border-radius: 6px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .modal-jump-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
    background-color: var(--accent-glow);
  }
}

.modal-body textarea {
  width: 100%;
  height: 140px;
  background-color: var(--bg-primary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.75rem;
  border-radius: 8px;
  resize: vertical;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
}

.modal-body textarea:focus {
  border-color: var(--accent-color);
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

.modal-btn-cancel {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background-color: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .modal-btn-cancel:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }
}

@media (hover: hover) {
  .theme-sepia .modal-btn-cancel:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }
}

.modal-btn-save {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background-color: var(--accent-color);
  border: none;
  color: var(--bg-primary);
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

@media (hover: hover) {
  .modal-btn-save:hover {
    background-color: var(--accent-hover);
  }
}

/* Destructive action in a modal footer (e.g. remove bookmark) */
.modal-btn-delete {
  padding: 0.5rem 1rem;
  border-radius: 6px;
  background-color: transparent;
  border: 1px solid rgba(239, 68, 68, 0.5);
  color: #ef4444;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-inline-end: auto;
}

@media (hover: hover) {
  .modal-btn-delete:hover {
    background-color: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
  }
}

/* Share modal */
.share-modal-card {
  max-width: 420px;
  max-height: 92vh;
}

/* Desktop: allow wider share modal for long Arabic text */
@media (min-width: 769px) {
  .share-modal-card {
    max-width: 560px;
  }
}

.share-modal-card .modal-body {
  overflow-y: auto;
  min-height: 0;
}

.share-modal-card .modal-header h3 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

@media (max-width: 768px) {
  .share-modal-card {
    max-height: 80vh;
  }
}

.share-verse-preview {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.share-verse-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  background-color: var(--bg-primary);
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  border: 1px solid var(--border-color);
}

.share-verse-badge span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 2.5px;
  height: 2.5px;
  background-color: currentColor;
  border-radius: 50%;
  margin: 0 0.45em;
  vertical-align: middle;
  position: relative;
  top: -1px;
  opacity: 0.6;
}

.share-verse-toolbar {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.85rem;
}

.share-arabic-text {
  font-family: var(--arabic-font-family);
  font-size: calc(var(--arabic-font-size) * 0.85);
  text-align: right;
  direction: rtl;
  line-height: 2.0;
  color: var(--text-primary);
  word-wrap: break-word;
}

.share-translation-text {
  font-size: calc(var(--english-font-size) * 0.9);
  line-height: 1.5;
  color: var(--text-secondary);
  word-wrap: break-word;
  text-align: left;
  direction: ltr;
}

.share-translation-text [class*="text-highlight-"] {
  font-weight: 700;
}

.share-actions-row {
  display: flex;
  gap: 0.5rem;
}

.share-action-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.65rem 0.5rem;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s ease, transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  border: none;
}

@media (max-width: 400px) {
  .share-action-btn {
    padding: 0.6rem 0.35rem;
    font-size: 0.72rem;
    gap: 0.25rem;
  }
}

.share-save-img-btn,
.share-copy-verse-btn {
  background-color: var(--bg-primary);
  color: var(--accent-color);
  border: 1px solid var(--border-color);
}

.share-copy-link-btn {
  background-color: var(--accent-color);
  color: var(--bg-primary);
  /* Transparent border keeps the primary button the same height as the
     secondary buttons (which have a 1px solid border), so all three are
     perfectly aligned in the row. */
  border: 1px solid transparent;
}

.share-action-btn:active {
  transform: scale(0.96);
}

@media (hover: hover) {
  .share-save-img-btn:hover,
  .share-copy-verse-btn:hover {
    background-color: var(--bg-secondary);
  }
  .share-copy-link-btn:hover {
    background-color: var(--accent-hover);
  }
}

.share-copy-link-btn.copied,
.share-copy-verse-btn.copied {
  background-color: var(--success-color);
  color: #ffffff;
  border-color: transparent;
}

@media (hover: hover) {
  .share-copy-link-btn.copied:hover,
  .share-copy-verse-btn.copied:hover {
    background-color: var(--success-color);
  }
}

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

.share-save-img-btn svg.spin {
  animation: spin 1s linear infinite;
}

.empty-state {
  text-align: center;
  color: var(--text-muted);
  margin-top: 3rem;
  font-size: 0.85rem;
}

/* Main Panel Layout */
.main-view {
  flex: 1;
  height: 100%;
  overflow-y: auto;
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
  position: relative;
  scroll-behavior: smooth;
}

/* Main View Header Styling */
.main-header {
  position: sticky;
  top: 0;
  background-color: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-color);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 5;
}

.header-title-wrapper {
  display: flex;
  flex-direction: column;
}

.header-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-primary);
}

.header-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}

.header-actions {
  display: flex;
  gap: 0.75rem;
}

.action-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background-color: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
}

@media (hover: hover) {
  .action-icon-btn:hover {
    border-color: var(--accent-color);
    color: var(--accent-color);
  }
}

.menu-toggle-btn {
  display: none;
}

.sidebar-backdrop {
  display: none;
}

/* Main Content Area */
.reader-container {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 6rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Surah Hero Card */
.surah-hero {
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(16, 185, 129, 0.03) 100%);
  border: 1px solid var(--border-color);
  box-shadow: 0 10px 30px var(--shadow-color);
}

.theme-emerald .surah-hero {
  background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(251, 191, 36, 0.05) 100%);
}

.play-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background-color: var(--accent-color);
  color: var(--bg-primary);
  border: none;
  padding: 0.7rem 1.75rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.2);
}

.play-hero-btn span {
  display: inline-block;
  transform: translate(-3.5px, -0.5px);
}

.play-hero-btn svg,
.bookmark-hero-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.play-hero-btn svg {
  transition: transform 0.2s ease;
}

@media (hover: hover) {
  .play-hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
    filter: brightness(1.1);
  }
}

@media (hover: hover) {
  .play-hero-btn:hover svg {
    transform: scale(1.1);
  }
}

.play-hero-btn:active {
  transform: translateY(0);
}

.theme-emerald .play-hero-btn {
  color: #111;
}

.hero-ar-name {
  font-family: var(--arabic-font-family);
  font-size: 3rem;
  font-weight: 700;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.hero-trans-name {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hero-translate-name {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-top: 0.25rem;
}

.hero-separator {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-color), transparent);
  margin: 1.25rem auto;
}

.hero-stats-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1.5rem 0;
  gap: 1.5rem;
}

.stat-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 80px;
}

.stat-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.stat-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-primary);
}

.stat-divider {
  width: 1px;
  height: 24px;
  background-color: var(--border-color);
}

.hero-actions-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.bookmark-header-btn.favorited {
  background-color: rgba(217, 119, 6, 0.1);
  border-color: var(--gold-color);
  color: var(--gold-color);
}

.bookmark-header-btn.favorited svg {
  fill: currentColor;
}

@media (hover: hover) {
  .bookmark-header-btn.favorited:hover {
    border-color: var(--gold-color);
    color: var(--gold-color);
    opacity: 0.85;
  }
}

/* Bismillah Banner */
.bismillah-banner {
  font-family: var(--arabic-font-family);
  font-size: 2.8rem;
  text-align: center;
  direction: rtl;            /* keep RTL order when the Basmala is split into word spans */
  padding: 1rem;
  color: var(--text-primary);
  margin: 1rem 0;
  line-height: 1.5;
  transition: all var(--transition-normal);
}

/* Verse Card Design */
.verse-card {
  background-color: var(--bg-secondary);
  border-radius: 16px;
  border: 1px solid var(--border-color);
  padding: 1.75rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  box-shadow: 0 4px 20px var(--shadow-color);
  position: relative;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .verse-card:hover {
    border-color: rgba(16, 185, 129, 0.25);
  }

  .theme-emerald .verse-card:hover {
    border-color: rgba(251, 191, 36, 0.25);
  }
}

.verse-card.highlighted, .surah-hero.highlighted {
  border-color: var(--accent-color);
  background-color: var(--accent-glow);
}

/* Compact mode overrides for verse cards */
.reader-container.compact-mode {
  padding-left: 0 !important;
  padding-right: 0 !important;
  gap: 0 !important; /* Remove vertical gap between verse cards */
  overflow-x: clip; /* Prevent Arabic glyph overhang from causing horizontal wiggle on iOS */
}

.compact-mode .surah-hero {
  margin-left: 1.5rem !important;
  margin-right: 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.compact-mode .bismillah-banner {
  font-size: 2.2rem !important;
  margin: 0.5rem 0 !important;
}

.compact-mode .verse-card {
  background-color: transparent !important;
  border-radius: 0 !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  box-shadow: none !important;
  padding: 0.75rem 1.25rem !important; /* Breathing room at viewport edges */
  gap: 0.5rem !important;
  background-clip: padding-box !important;
}

.compact-mode .verse-arabic {
  font-size: calc(var(--arabic-font-size) * 0.75) !important;
  line-height: 1.8 !important;
}

.compact-mode .verse-english {
  font-size: calc(var(--english-font-size) * 0.9) !important;
  line-height: 1.4 !important;
}

.compact-mode .verse-card .note-card {
  margin: 0.5rem 0 0.25rem 0 !important;
  width: 100% !important;
  padding: 0.65rem 0.85rem !important;
  border-radius: 8px !important;
}

.compact-mode .verse-toolbar {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: -0.2rem !important;
  min-height: auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.compact-mode .verse-index {
  background-color: var(--bg-secondary) !important;
  border: none !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
}

.compact-mode .verse-actions {
  opacity: 0 !important;
  transform: translateY(3px) scale(0.95) !important;
  pointer-events: none !important;
  transition: opacity 0.2s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
  will-change: opacity, transform;
  isolation: isolate;
  contain: layout paint;
}

@media (hover: hover) {
  .compact-mode .verse-card:hover .verse-actions {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
  }
  .compact-mode .verse-card:not(.highlighted):not([class*="user-highlighted-"]):hover {
    background-color: rgba(255, 255, 255, 0.02) !important;
  }
  .theme-light .compact-mode .verse-card:not(.highlighted):not([class*="user-highlighted-"]):hover,
  .theme-sepia .compact-mode .verse-card:not(.highlighted):not([class*="user-highlighted-"]):hover {
    background-color: rgba(0, 0, 0, 0.015) !important;
  }
}

.compact-mode .verse-card.show-actions .verse-actions {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.compact-mode .verse-action-btn {
  width: 24px !important;
  height: 24px !important;
  border-radius: 4px !important;
  margin-inline-start: 0.15rem !important;
}

.compact-mode .verse-action-btn svg {
  width: 14px !important;
  height: 14px !important;
}

.compact-mode .verse-card.highlighted {
  background-color: var(--accent-glow) !important;
}


.compact-mode .verse-card.user-highlighted {
  border-inline-start: 3px solid var(--accent-color) !important;
}

.compact-mode .verse-card.user-highlighted-green {
  background-color: rgba(74, 222, 128, 0.08) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-inline-start: 3px solid var(--hl-green) !important;
}
.compact-mode .verse-card.user-highlighted-pink {
  background-color: rgba(244, 114, 182, 0.08) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-inline-start: 3px solid var(--hl-pink) !important;
}
.compact-mode .verse-card.user-highlighted-blue {
  background-color: rgba(96, 165, 250, 0.08) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-inline-start: 3px solid var(--hl-blue) !important;
}
.compact-mode .verse-card.user-highlighted-purple {
  background-color: rgba(192, 132, 252, 0.08) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-inline-start: 3px solid var(--hl-purple) !important;
}
.compact-mode .verse-card.user-highlighted-orange {
  background-color: rgba(251, 146, 60, 0.08) !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-inline-start: 3px solid var(--hl-orange) !important;
}

.theme-light .compact-mode .verse-card.user-highlighted-green,
.theme-sepia .compact-mode .verse-card.user-highlighted-green {
  background-color: rgba(22, 163, 74, 0.07) !important;
}
.theme-light .compact-mode .verse-card.user-highlighted-pink,
.theme-sepia .compact-mode .verse-card.user-highlighted-pink {
  background-color: rgba(230, 70, 180, 0.07) !important;
}
.theme-light .compact-mode .verse-card.user-highlighted-blue,
.theme-sepia .compact-mode .verse-card.user-highlighted-blue {
  background-color: rgba(27, 73, 222, 0.07) !important;
}
.theme-light .compact-mode .verse-card.user-highlighted-purple,
.theme-sepia .compact-mode .verse-card.user-highlighted-purple {
  background-color: rgba(134, 29, 220, 0.07) !important;
}
.theme-light .compact-mode .verse-card.user-highlighted-orange,
.theme-sepia .compact-mode .verse-card.user-highlighted-orange {
  background-color: rgba(255, 132, 0, 0.07) !important;
}

@media (hover: hover) {
  .compact-mode .verse-card.user-highlighted-green:hover {
    background-color: rgba(74, 222, 128, 0.12) !important;
  }
  .compact-mode .verse-card.user-highlighted-pink:hover {
    background-color: rgba(244, 114, 182, 0.12) !important;
  }
  .compact-mode .verse-card.user-highlighted-blue:hover {
    background-color: rgba(96, 165, 250, 0.12) !important;
  }
  .compact-mode .verse-card.user-highlighted-purple:hover {
    background-color: rgba(192, 132, 252, 0.12) !important;
  }
  .compact-mode .verse-card.user-highlighted-orange:hover {
    background-color: rgba(251, 146, 60, 0.12) !important;
  }

  .theme-light .compact-mode .verse-card.user-highlighted-green:hover,
  .theme-sepia .compact-mode .verse-card.user-highlighted-green:hover {
    background-color: rgba(22, 163, 74, 0.11) !important;
  }
  .theme-light .compact-mode .verse-card.user-highlighted-pink:hover,
  .theme-sepia .compact-mode .verse-card.user-highlighted-pink:hover {
    background-color: rgba(230, 70, 180, 0.11) !important;
  }
  .theme-light .compact-mode .verse-card.user-highlighted-blue:hover,
  .theme-sepia .compact-mode .verse-card.user-highlighted-blue:hover {
    background-color: rgba(27, 73, 222, 0.11) !important;
  }
  .theme-light .compact-mode .verse-card.user-highlighted-purple:hover,
  .theme-sepia .compact-mode .verse-card.user-highlighted-purple:hover {
    background-color: rgba(134, 29, 220, 0.11) !important;
  }
  .theme-light .compact-mode .verse-card.user-highlighted-orange:hover,
  .theme-sepia .compact-mode .verse-card.user-highlighted-orange:hover {
    background-color: rgba(255, 132, 0, 0.11) !important;
  }
}



.verse-card.user-highlighted {
  border-inline-start: 3px solid var(--accent-color);
}

.verse-card.user-highlighted-green,
.bookmark-item.user-highlighted-green {
  background-color: rgba(74, 222, 128, 0.08);
  border: 1px solid rgba(74, 222, 128, 0.25);
  border-inline-start: 3px solid var(--hl-green);
}

.verse-card.user-highlighted-pink,
.bookmark-item.user-highlighted-pink {
  background-color: rgba(244, 114, 182, 0.08);
  border: 1px solid rgba(244, 114, 182, 0.25);
  border-inline-start: 3px solid var(--hl-pink);
}

.verse-card.user-highlighted-blue,
.bookmark-item.user-highlighted-blue {
  background-color: rgba(96, 165, 250, 0.08);
  border: 1px solid rgba(96, 165, 250, 0.25);
  border-inline-start: 3px solid var(--hl-blue);
}

.verse-card.user-highlighted-purple,
.bookmark-item.user-highlighted-purple {
  background-color: rgba(192, 132, 252, 0.08);
  border: 1px solid rgba(192, 132, 252, 0.25);
  border-inline-start: 3px solid var(--hl-purple);
}

.verse-card.user-highlighted-orange,
.bookmark-item.user-highlighted-orange {
  background-color: rgba(251, 146, 60, 0.08);
  border: 1px solid rgba(251, 146, 60, 0.25);
  border-inline-start: 3px solid var(--hl-orange);
}

/* Tag badge color variants inside colored highlights */
.user-highlighted-green .verse-bookmark-badge,
.bookmark-notes.user-highlighted-green .verse-bookmark-badge {
  color: var(--hl-green);
  background-color: rgba(74, 222, 128, 0.15);
}
.user-highlighted-pink .verse-bookmark-badge,
.bookmark-notes.user-highlighted-pink .verse-bookmark-badge {
  color: var(--hl-pink);
  background-color: rgba(244, 114, 182, 0.15);
}
.user-highlighted-blue .verse-bookmark-badge,
.bookmark-notes.user-highlighted-blue .verse-bookmark-badge {
  color: var(--hl-blue);
  background-color: rgba(96, 165, 250, 0.15);
}
.user-highlighted-purple .verse-bookmark-badge,
.bookmark-notes.user-highlighted-purple .verse-bookmark-badge {
  color: var(--hl-purple);
  background-color: rgba(192, 132, 252, 0.15);
}
.user-highlighted-orange .verse-bookmark-badge,
.bookmark-notes.user-highlighted-orange .verse-bookmark-badge {
  color: var(--hl-orange);
  background-color: rgba(251, 146, 60, 0.15);
}

@media (hover: hover) {
  .verse-card.user-highlighted:hover {
    border-color: var(--accent-color);
  }

  .verse-card.user-highlighted-green:hover,
  .bookmark-item.user-highlighted-green:hover {
    border-color: var(--hl-green);
    background-color: rgba(74, 222, 128, 0.12);
  }
  .verse-card.user-highlighted-pink:hover,
  .bookmark-item.user-highlighted-pink:hover {
    border-color: var(--hl-pink);
    background-color: rgba(244, 114, 182, 0.12);
  }
  .verse-card.user-highlighted-blue:hover,
  .bookmark-item.user-highlighted-blue:hover {
    border-color: var(--hl-blue);
    background-color: rgba(96, 165, 250, 0.12);
  }
  .verse-card.user-highlighted-purple:hover,
  .bookmark-item.user-highlighted-purple:hover {
    border-color: var(--hl-purple);
    background-color: rgba(192, 132, 252, 0.12);
  }
  .verse-card.user-highlighted-orange:hover,
  .bookmark-item.user-highlighted-orange:hover {
    border-color: var(--hl-orange);
    background-color: rgba(251, 146, 60, 0.12);
  }

  .theme-light .verse-card.user-highlighted-green:hover,
  .theme-light .bookmark-item.user-highlighted-green:hover,
  .theme-sepia .verse-card.user-highlighted-green:hover,
  .theme-sepia .bookmark-item.user-highlighted-green:hover {
    border-color: var(--hl-green);
    background-color: rgba(22, 163, 74, 0.11);
  }
  .theme-light .verse-card.user-highlighted-pink:hover,
  .theme-light .bookmark-item.user-highlighted-pink:hover,
  .theme-sepia .verse-card.user-highlighted-pink:hover,
  .theme-sepia .bookmark-item.user-highlighted-pink:hover {
    border-color: var(--hl-pink);
    background-color: rgba(230, 70, 180, 0.11);
  }
  .theme-light .verse-card.user-highlighted-blue:hover,
  .theme-light .bookmark-item.user-highlighted-blue:hover,
  .theme-sepia .verse-card.user-highlighted-blue:hover,
  .theme-sepia .bookmark-item.user-highlighted-blue:hover {
    border-color: var(--hl-blue);
    background-color: rgba(27, 73, 222, 0.11);
  }
  .theme-light .verse-card.user-highlighted-purple:hover,
  .theme-light .bookmark-item.user-highlighted-purple:hover,
  .theme-sepia .verse-card.user-highlighted-purple:hover,
  .theme-sepia .bookmark-item.user-highlighted-purple:hover {
    border-color: var(--hl-purple);
    background-color: rgba(134, 29, 220, 0.11);
  }
  .theme-light .verse-card.user-highlighted-orange:hover,
  .theme-light .bookmark-item.user-highlighted-orange:hover,
  .theme-sepia .verse-card.user-highlighted-orange:hover,
  .theme-sepia .bookmark-item.user-highlighted-orange:hover {
    border-color: var(--hl-orange);
    background-color: rgba(255, 132, 0, 0.11);
  }

  .verse-card.user-highlighted-green .verse-bookmark:hover,
  .verse-card.user-highlighted-green .note-card:hover {
    border-color: var(--hl-green);
  }
  .verse-card.user-highlighted-pink .verse-bookmark:hover,
  .verse-card.user-highlighted-pink .note-card:hover {
    border-color: var(--hl-pink);
  }
  .verse-card.user-highlighted-blue .verse-bookmark:hover,
  .verse-card.user-highlighted-blue .note-card:hover {
    border-color: var(--hl-blue);
  }
  .verse-card.user-highlighted-purple .verse-bookmark:hover,
  .verse-card.user-highlighted-purple .note-card:hover {
    border-color: var(--hl-purple);
  }
  .verse-card.user-highlighted-orange .verse-bookmark:hover,
  .verse-card.user-highlighted-orange .note-card:hover {
    border-color: var(--hl-orange);
  }
}



.theme-light .verse-card.user-highlighted-green,
.theme-light .bookmark-item.user-highlighted-green {
  background-color: rgba(22, 163, 74, 0.07);
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-inline-start: 3px solid var(--hl-green);
}

.theme-light .verse-card.user-highlighted-pink,
.theme-light .bookmark-item.user-highlighted-pink {
  background-color: rgba(230, 70, 180, 0.07);
  border: 1px solid rgba(230, 70, 180, 0.25);
  border-inline-start: 3px solid var(--hl-pink);
}

.theme-light .verse-card.user-highlighted-blue,
.theme-light .bookmark-item.user-highlighted-blue {
  background-color: rgba(27, 73, 222, 0.07);
  border: 1px solid rgba(27, 73, 222, 0.25);
  border-inline-start: 3px solid var(--hl-blue);
}

.theme-light .verse-card.user-highlighted-purple,
.theme-light .bookmark-item.user-highlighted-purple {
  background-color: rgba(134, 29, 220, 0.07);
  border: 1px solid rgba(134, 29, 220, 0.25);
  border-inline-start: 3px solid var(--hl-purple);
}

.theme-light .verse-card.user-highlighted-orange,
.theme-light .bookmark-item.user-highlighted-orange {
  background-color: rgba(255, 132, 0, 0.07);
  border: 1px solid rgba(255, 132, 0, 0.25);
  border-inline-start: 3px solid var(--hl-orange);
}

.theme-sepia .verse-card.user-highlighted-green,
.theme-sepia .bookmark-item.user-highlighted-green {
  background-color: rgba(22, 163, 74, 0.07);
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-inline-start: 3px solid var(--hl-green);
}

.theme-sepia .verse-card.user-highlighted-pink,
.theme-sepia .bookmark-item.user-highlighted-pink {
  background-color: rgba(230, 70, 180, 0.07);
  border: 1px solid rgba(230, 70, 180, 0.25);
  border-inline-start: 3px solid var(--hl-pink);
}

.theme-sepia .verse-card.user-highlighted-blue,
.theme-sepia .bookmark-item.user-highlighted-blue {
  background-color: rgba(27, 73, 222, 0.07);
  border: 1px solid rgba(27, 73, 222, 0.25);
  border-inline-start: 3px solid var(--hl-blue);
}

.theme-sepia .verse-card.user-highlighted-purple,
.theme-sepia .bookmark-item.user-highlighted-purple {
  background-color: rgba(134, 29, 220, 0.07);
  border: 1px solid rgba(134, 29, 220, 0.25);
  border-inline-start: 3px solid var(--hl-purple);
}

.theme-sepia .verse-card.user-highlighted-orange,
.theme-sepia .bookmark-item.user-highlighted-orange {
  background-color: rgba(255, 132, 0, 0.07);
  border: 1px solid rgba(255, 132, 0, 0.25);
  border-inline-start: 3px solid var(--hl-orange);
}


/* Color dots (used by the text-selection highlight picker) */
.color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.12);
  transition: transform 0.1s ease;
}

@media (hover: hover) {
  .color-dot:hover {
    transform: scale(1.3);
  }
}


.color-dot.green { background-color: var(--hl-green); }
.color-dot.pink { background-color: var(--hl-pink); }
.color-dot.blue { background-color: var(--hl-blue); }
.color-dot.purple { background-color: var(--hl-purple); }
.color-dot.orange { background-color: var(--hl-orange); }

.color-dot.clear { background-color: transparent; border: 1px dashed var(--text-secondary); display: flex; align-items: center; justify-content: center; }

/* ── Text-span highlights (fragment highlighting within a verse) ── */

.text-highlight-green  { color: var(--hl-green); -webkit-text-fill-color: var(--hl-green); }
.text-highlight-pink   { color: var(--hl-pink); -webkit-text-fill-color: var(--hl-pink); }
.text-highlight-blue   { color: var(--hl-blue); -webkit-text-fill-color: var(--hl-blue); }
.text-highlight-purple { color: var(--hl-purple); -webkit-text-fill-color: var(--hl-purple); }
.text-highlight-orange { color: var(--hl-orange); -webkit-text-fill-color: var(--hl-orange); }

.text-highlight-green,
.text-highlight-pink,
.text-highlight-blue,
.text-highlight-purple,
.text-highlight-orange {
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.hl-group { display: inline; cursor: pointer; }

@media (hover: hover) {
  .hl-group:hover .text-highlight-green,
  .hl-group:hover .text-highlight-pink,
  .hl-group:hover .text-highlight-blue,
  .hl-group:hover .text-highlight-purple,
  .hl-group:hover .text-highlight-orange {
    opacity: 0.8;
  }
  
  .text-highlight-green:hover,
  .text-highlight-pink:hover,
  .text-highlight-blue:hover,
  .text-highlight-purple:hover,
  .text-highlight-orange:hover {
    opacity: 0.8;
  }
}

/* English highlights get standard bold weight */
.verse-english [class*="text-highlight-"] {
  font-weight: 700;
}

/* Ensure base highlighted words have relative layout box for overlay positioning across all engines */
.qword:has([class*="text-highlight-"]) {
  display: inline-block;
  position: relative;
}

/* Force overlay sweep on active highlighted words on all engines (ensures uniform, perfect sweep and bypasses Safari background clipping bugs) */
.qword-active:has([class*="text-highlight-"]) {
  background: none !important;
  color: var(--text-primary) !important;
  -webkit-text-fill-color: var(--text-primary) !important;
}

.qword-active:has([class*="text-highlight-"])::after {
  content: attr(data-t);
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--accent-color) !important;
  -webkit-text-fill-color: var(--accent-color) !important;
  /* RTL: reveal the rightmost --sweep% (first letter first), soft feathered edge */
  -webkit-mask-image: linear-gradient(to left, #000 calc(var(--sweep, 0%) - 3%), transparent calc(var(--sweep, 0%) + 3%));
          mask-image: linear-gradient(to left, #000 calc(var(--sweep, 0%) - 3%), transparent calc(var(--sweep, 0%) + 3%));
}

/* Keep highlights in the karaoke accent color once recited, until the entire verse finishes playing */
.qword-done [class*="text-highlight-"] {
  color: var(--accent-color) !important;
  -webkit-text-fill-color: var(--accent-color) !important;
}



/* ── Floating selection color picker (appears on text selection) ── */
.selection-color-picker {
  position: fixed;
  z-index: 2000;
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  border-radius: 20px;
  padding: 0.4rem 0.55rem;
  display: flex;
  visibility: hidden;
  gap: 0.45rem;
  align-items: center;
  opacity: 0;
  transform: translateY(12px) scale(0.95);
  transition: opacity 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0.2s;
  pointer-events: none;
}

.selection-color-picker.visible {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.selection-color-picker .color-dot {
  width: 16px;
  height: 16px;
}

.selection-color-picker .color-dot svg {
  width: 8px;
  height: 8px;
}

@media (pointer: coarse) {
  .selection-color-picker {
    padding: 0.6rem 0.8rem;
    gap: 0.7rem;
    border-radius: 28px;
  }
  .selection-color-picker .color-dot {
    width: 24px;
    height: 24px;
  }
  .selection-color-picker .color-dot svg {
    width: 12px;
    height: 12px;
  }
}

.color-dot.clear,
.color-dot.copy-btn {
  background-color: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border: 1px solid var(--border-color);
}

@media (hover: hover) {
  .color-dot.clear:hover {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.05);
  }
  .color-dot.copy-btn:hover {
    color: var(--text-primary);
    background-color: var(--accent-glow);
  }
}

.bismillah-banner.highlighted {
  color: var(--accent-color);
  text-shadow: 0 0 15px var(--accent-glow);
}

/* Verse Toolbar */
.verse-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 0.85rem;
}

.verse-index {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  background-color: var(--bg-primary);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  border: 1px solid var(--border-color);
}

.verse-actions {
  display: flex;
  gap: 0.25rem;
}

.verse-action-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
}

.verse-action-btn.ai-explain-btn {
  display: flex;
}

@media (hover: hover) {
  .verse-action-btn:hover {
    color: var(--accent-color);
    background-color: var(--bg-primary);
  }
}

.verse-action-btn.favorited {
  color: var(--gold-color);
}

.verse-action-btn.has-bookmark {
  color: var(--accent-color);
}

.verse-action-btn.has-bookmark.user-highlighted-green {
  color: var(--hl-green);
}
.verse-action-btn.has-bookmark.user-highlighted-pink {
  color: var(--hl-pink);
}
.verse-action-btn.has-bookmark.user-highlighted-blue {
  color: var(--hl-blue);
}
.verse-action-btn.has-bookmark.user-highlighted-purple {
  color: var(--hl-purple);
}
.verse-action-btn.has-bookmark.user-highlighted-orange {
  color: var(--hl-orange);
}

/* Arabic runs embedded in notes, bookmark comments, previews and AI text
   inherit the user-selected Arabic font, same as the verses */
.arabic-inline {
  font-family: var(--arabic-font-family);
  /* Arabic script is optically smaller than Latin at the same point size;
     nudge inline runs up so they match the surrounding text's weight. Uses em
     so it scales with whatever context (notes, previews, search) it sits in. */
  font-size: 1.15em;
  line-height: 1;
}

/* Arabic Text */
.verse-arabic {
  font-family: var(--arabic-font-family);
  font-size: var(--arabic-font-size);
  text-align: right;
  direction: rtl;
  line-height: 2.2;
  color: var(--text-primary);
  word-wrap: break-word;
}

/* Karaoke word highlighting: a per-letter accent sweep fills the active word as
   it is recited, in the current theme's accent colour. No background fill.
   Uses a masked absolute overlay (content: attr(data-t)) over the opaque base word.
   This guarantees that the text remains perfectly crisp and diacritics never drop,
   bypassing WebKit's background-clip text-rendering bugs across all browsers/engines. */
.qword {
  cursor: pointer;              /* tap/click a word to seek the audio to it */
  display: inline-block;        /* clean layout box so overlay aligns exactly on top */
  position: relative;           /* containing block for the absolute overlay */
  color: var(--text-primary);
  transition: color 0.4s ease;
}
.qword-active {
  transition: none;
}
.qword-active::after {
  content: attr(data-t);
  position: absolute;
  inset: 0;
  color: var(--accent-color);
  pointer-events: none;
  /* RTL: reveal the rightmost --sweep% (first letter first), soft feathered edge */
  -webkit-mask-image: linear-gradient(to left, #000 calc(var(--sweep, 0%) - 3%), transparent calc(var(--sweep, 0%) + 3%));
          mask-image: linear-gradient(to left, #000 calc(var(--sweep, 0%) - 3%), transparent calc(var(--sweep, 0%) + 3%));
}
/* Words already recited stay filled in the accent colour until the next verse. */
.qword-done {
  transition: none;
  color: var(--accent-color);
}

/* English Text */
.verse-english {
  font-size: var(--english-font-size);
  line-height: 1.6;
  color: var(--text-secondary);
  word-wrap: break-word;
  text-align: left;
  direction: ltr;
}

/* Global Search Tab Panel & Overlay */
.search-panel-input-container {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.search-panel-btn {
  padding: 0.75rem 1.25rem;
  background-color: var(--accent-color);
  color: var(--bg-primary);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.9rem;
}

@media (hover: hover) {
  .search-panel-btn:hover {
    background-color: var(--accent-hover);
  }
}

.search-results-info {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.search-results-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow-y: auto;
  flex: 1;
}

.search-result-card {
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  text-align: start;
  transition: all var(--transition-fast);
}

.theme-sepia .search-result-card {
  background-color: rgba(0, 0, 0, 0.02);
}

@media (hover: hover) {
  .search-result-card:hover {
    border-color: var(--accent-color);
    background-color: var(--card-hover-bg);
  }
}

.search-result-card.direct-match {
  border: 1.5px solid var(--accent-color);
  background-color: rgba(16, 185, 129, 0.03);
}

.search-result-card.surah-match {
  border: 1.5px solid var(--accent-color);
  background-color: rgba(16, 185, 129, 0.03);
  cursor: pointer;
}

.surah-meta-details {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.surah-meta-details span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 2.5px;
  height: 2.5px;
  background-color: currentColor;
  border-radius: 50%;
  margin: 0 0.45em;
  vertical-align: middle;
  position: relative;
  top: -1px;
  opacity: 0.6;
}

@media (hover: hover) {
  .search-result-card.direct-match:hover {
    background-color: rgba(16, 185, 129, 0.06);
    border-color: var(--accent-hover);
  }

  .search-result-card.surah-match:hover {
    background-color: rgba(16, 185, 129, 0.06);
    border-color: var(--accent-hover);
  }
}

.theme-sepia .search-result-card.direct-match {
  background-color: rgba(16, 185, 129, 0.06);
}

.search-result-header {
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 0.8rem;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
}

.search-result-arabic {
  font-family: var(--arabic-font-family);
  font-size: 1.4rem;
  text-align: right;
  direction: rtl;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.search-result-english {
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--text-secondary);
  text-align: left;
  direction: ltr;
}

.search-result-english mark {
  background-color: rgba(251, 191, 36, 0.3);
  color: var(--text-primary);
  border-radius: 2px;
  padding: 0 2px;
}

.search-result-arabic mark,
.arabic-inline mark,
[dir="rtl"] mark {
  background-color: rgba(251, 191, 36, 0.3);
  color: var(--text-primary);
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  padding: 0;
  margin: 0;
  border-radius: 0;
  display: inline;
}

/* Audio Player Container (Footer) */
.audio-player-bar {
  height: calc(90px + var(--safe-area-bottom));
  background-color: var(--glass-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem var(--safe-area-bottom) 2rem;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100;
  transition: transform 0.3s ease, background-color var(--transition-normal);
  box-shadow: 0 -8px 24px var(--shadow-color);
}

/* Sidebar panels get bottom breathing room via sidebar padding-bottom.
   Mobile overrides use explicit per-panel padding (see @media max-width: 768px). */
.surah-list > *:last-child,
.bookmarks-list > *:last-child,
.search-results-list > *:last-child {
  margin-bottom: 0.75rem;
}

/* Left: Playing Surah Info */
.player-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 25%;
  cursor: pointer;
  transition: opacity var(--transition-fast) ease;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .player-info:hover {
    opacity: 0.8;
  }
}

.player-info:active {
  opacity: 0.6;
}

.player-meta {
  display: flex;
  flex-direction: column;
}

.player-title-container {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
}

.player-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
}

.player-arabic-title {
  font-family: var(--arabic-font-family);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--accent-color);
}

.player-reciter {
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* Chapter & live verse number folded into reciter line as subtle prefix */
.player-reciter .player-num {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--accent-color);
}

.player-reciter .player-num::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 2px;
  background-color: var(--text-secondary);
  border-radius: 50%;
  margin: 0 0.45em;
  vertical-align: middle;
  position: relative;
  top: -1px;
  opacity: 0.7;
}

/* Center: Player Controls & Seeker */
.player-controls-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  width: 50%;
}

.player-buttons {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.player-btn {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 32px;
  height: 32px;
}

@media (hover: hover) {
  .player-btn:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.05);
  }
}

@media (hover: hover) {
  .theme-sepia .player-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
}

.player-btn.active {
  color: var(--accent-color);
}

.player-btn-main {
  width: 44px;
  height: 44px;
  background-color: var(--accent-color);
  color: var(--bg-primary);
  font-size: 1.25rem;
}

#player-play-btn,
#play-icon {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

#play-icon,
#play-icon * {
  transition: none !important;
}

@media (hover: hover) {
  .player-btn-main:hover {
    background-color: var(--accent-hover);
    color: var(--bg-primary);
    transform: scale(1.05);
  }
}

/* Timeline/Seeker styling */
.player-timeline-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 0.75rem;
}

.time-display {
  font-size: 0.75rem;
  color: var(--text-muted);
  width: 40px;
  text-align: center;
}

.timeline-slider-container {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.timeline-slider {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background-color: var(--bg-tertiary);
  -webkit-appearance: none;
  cursor: pointer;
}

.timeline-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: var(--accent-color);
}

/* Right: Utilities (Volume, Speed) */
.player-utils {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
  width: 25%;
}



.volume-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.volume-btn {
  color: var(--text-secondary);
}

@media (hover: hover) {
  .volume-btn:hover {
    color: var(--text-primary);
  }
}

.volume-slider {
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background-color: var(--bg-tertiary);
  -webkit-appearance: none;
  cursor: pointer;
}

.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--accent-color);
}

/* Waves animation for active audio playing */
.visualizer {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 16px;
  margin-inline-start: 0.75rem;
  padding-bottom: 2px;
}

.visualizer-bar {
  width: 3px;
  height: 14px;
  background-color: var(--accent-color);
  border-radius: 3px;
  transform-origin: bottom;
  will-change: transform;
}

.visualizer:not(.paused) .visualizer-bar:nth-child(1) {
  animation: visualizerEq1 1.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.visualizer:not(.paused) .visualizer-bar:nth-child(2) {
  animation: visualizerEq2 1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.visualizer:not(.paused) .visualizer-bar:nth-child(3) {
  animation: visualizerEq3 1.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.visualizer:not(.paused) .visualizer-bar:nth-child(4) {
  animation: visualizerEq4 1.7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

@keyframes visualizerEq1 {
  0% { transform: scaleY(0.25); }
  50% { transform: scaleY(0.85); }
  100% { transform: scaleY(0.45); }
}

@keyframes visualizerEq2 {
  0% { transform: scaleY(0.25); }
  50% { transform: scaleY(0.95); }
  100% { transform: scaleY(0.35); }
}

@keyframes visualizerEq3 {
  0% { transform: scaleY(0.25); }
  50% { transform: scaleY(0.8); }
  100% { transform: scaleY(0.55); }
}

@keyframes visualizerEq4 {
  0% { transform: scaleY(0.25); }
  50% { transform: scaleY(0.9); }
  100% { transform: scaleY(0.4); }
}

.visualizer.paused .visualizer-bar {
  transform: scaleY(0.25);
  opacity: 0.45;
  transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Toast Notification */
.toast {
  position: fixed;
  bottom: 110px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background-color: var(--accent-color);
  color: var(--bg-primary);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.65rem 1.5rem;
  border-radius: 30px;
  opacity: 0;
  pointer-events: none;
  transition: all var(--transition-normal);
  z-index: 10001;
  box-shadow: 0 4px 15px rgba(0,0,0,0.25);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 90vw;
  box-sizing: border-box;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Mobile Elements Defaults (Hidden on Desktop) */
.sidebar-mobile-header,
.mobile-nav-bar {
  display: none !important;
}

/* Disable text selection on mobile devices, except on text boxes and verses */
@media (max-width: 1024px), (pointer: coarse) {
  body {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
  }
  
  input, 
  textarea, 
  [contenteditable], 
  [contenteditable="true"],
  .verse-card {
    -webkit-user-select: text !important;
    user-select: text !important;
  }
}

/* Responsive Rules */
@media (max-width: 1024px) {
  .sidebar {
    width: 300px;
  }
  .player-info {
    width: 30%;
  }
  .player-utils {
    width: 30%;
  }
  .player-controls-container {
    width: 40%;
  }
}

@media (max-width: 768px) {
  .app-container {
    flex-direction: column;
    height: 100dvh; /* dvh = dynamic viewport, works correctly on mobile Safari */
  }
  
  .menu-toggle-btn {
    display: none !important;
  }
  
  .sidebar-backdrop {
    display: none !important;
  }
  
  .sidebar {
    display: none !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    height: 100dvh; /* dvh = dynamic viewport, works correctly on mobile Safari */
    padding-bottom: 0;
    z-index: 90;
    box-shadow: none;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    padding-top: var(--safe-area-top);
  }
  
  .sidebar.drawer-open {
    display: flex !important;
  }
  
  .sidebar-tabs {
    display: none !important;
  }

  .sidebar-content {
    overflow: hidden !important;
  }
  
  .sidebar-content.scrollable {
    overflow-y: auto !important;
  }

  /* With the search keyboard up, lock the scrollable panel so dragging
     can't reveal content behind the keyboard. Also lock modal overlays
     while their text field is focused. */
  body.search-focused .sidebar-content,
  body.search-focused .surah-list,
  body.search-focused .search-results-list,
  body.search-focused .modal-overlay {
    overflow: hidden !important;
  }

  .main-view {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(117px + var(--safe-area-bottom));
    height: calc(100dvh - 117px - var(--safe-area-bottom));
    overflow-y: auto;
  }
  
  .main-header {
    padding: calc(0.4rem + var(--safe-area-top)) 1rem 0.65rem 1rem;
  }
  
  .reader-container {
    padding-bottom: 2rem !important;
  }

  /* Mobile Bottom Tab Navigation — flush at the screen edge like a native
     iOS tab bar: the home-indicator safe area is padded inside the bar so
     its blur extends to the very bottom. */
  .mobile-nav-bar {
    display: flex !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(52px + var(--safe-area-bottom));
    background-color: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border-color);
    z-index: 101;
    justify-content: space-around;
    align-items: center;
    padding: 0 0.5rem var(--safe-area-bottom) 0.5rem;
  }

  .mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-muted);
    gap: 0.2rem;
    width: 18%;
    height: 100%;
    font-family: inherit;
    font-size: 0.65rem;
    font-weight: 500;
    transition: color var(--transition-fast);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .mobile-nav-btn svg {
    color: var(--text-muted);
    transition: color var(--transition-fast);
  }

  .mobile-nav-btn.active {
    color: var(--accent-color);
  }

  .mobile-nav-btn.active svg {
    color: var(--accent-color);
  }

  /* Compact Audio Player Bar (Mobile Layout) — floats directly above the
     tab bar, mini-player style. The nav bar below owns the safe area. */
  .audio-player-bar {
    position: fixed;
    bottom: calc(52px + var(--safe-area-bottom));
    left: 0;
    right: 0;
    height: 65px;
    padding: 0 1rem;
    z-index: 100;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0;
    border-top: 1px solid var(--border-color);
  }

  .audio-player-bar .player-info,
  .audio-player-bar .player-timeline-wrapper,
  .audio-player-bar .player-utils {
    display: none !important;
  }

  .player-controls-container {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .player-buttons {
    width: 100% !important;
    max-width: 320px;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .player-btn {
    width: 40px !important;
    height: 40px !important;
  }

  .player-btn-main {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background-color: var(--accent-color) !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px var(--accent-glow) !important;
  }

  .player-btn-main svg {
    fill: #ffffff !important;
    stroke: #ffffff !important;
  }
  
  .toast {
    bottom: calc(137px + var(--safe-area-bottom));
  }

  /* Prevent iOS automatic input focus zoom by forcing 16px font-size */
  .search-input,
  input[type="text"],
  input[type="search"],
  textarea {
    font-size: 16px !important;
  }

  /* Play button inside Surah Hero on mobile */
  .hero-actions-row {
    align-items: center;
  }
  .play-hero-btn {
    flex: 0 1 auto;
    min-width: 140px;
    width: auto;
  }

  /* Allow content to scroll behind the floating bottom bars, with padding so the last items are visible */
  /* Re-align scrollbars to screen edge on mobile panels by moving padding to children */
  .tab-panel {
    padding: 1rem 0 0 0 !important;
  }

  .tab-panel > .search-wrapper,
  .chapters-options-row,
  .search-panel-input-container,
  .bookmarks-actions-header,
  .bookmarks-sub-tabs,
  .search-results-info {
    margin-left: 1rem !important;
    margin-right: 1rem !important;
  }

  .surah-list,
  .bookmarks-list,
  .search-results-list {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: 0 !important;
  }

  .surah-list > *:last-child,
  .bookmarks-list > *:last-child,
  .search-results-list > *:last-child {
    margin-bottom: calc(117px + var(--safe-area-bottom) + 1rem) !important;
  }

  .bookmarks-slider-container .bookmarks-list {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 6px !important;
  }

  /* Scroll settings via .sidebar-content (like the other tabs) instead of an
     inner scroller — a nested overflow here traps touch-scroll on iOS, hiding
     the last section behind the nav + player bars. */
  #panel-settings {
    height: auto !important;
    overflow: visible !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-bottom: calc(117px + var(--safe-area-bottom) + 0.5rem) !important;
  }
}

/* Upgraded Bookmark Modal Card */
.bookmark-modal-card {
  max-width: 480px;
  gap: 0.85rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.bookmark-modal-card .modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.bookmark-modal-card .modal-highlight-selector {
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.bookmark-modal-card .modal-body textarea {
  height: 120px;
  min-height: 100px;
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
}

.bookmark-modal-card .modal-selector-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.bookmark-modal-card .modal-color-options {
  display: flex;
  gap: 0.65rem;
  align-items: center;
}

.bookmark-modal-card .modal-color-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  color: #ffffff;
}

@media (hover: hover) {
  .bookmark-modal-card .modal-color-dot:hover {
    transform: scale(1.18);
  }
}

.bookmark-modal-card .modal-color-dot.selected {
  transform: scale(1.18);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2), 0 4px 10px rgba(0, 0, 0, 0.2);
}

.bookmark-modal-card .modal-color-dot.green { background-color: var(--hl-green); }
.bookmark-modal-card .modal-color-dot.pink { background-color: var(--hl-pink); }
.bookmark-modal-card .modal-color-dot.blue { background-color: var(--hl-blue); }
.bookmark-modal-card .modal-color-dot.purple { background-color: var(--hl-purple); }
.bookmark-modal-card .modal-color-dot.orange { background-color: var(--hl-orange); }

.bookmark-modal-card .modal-color-dot.clear {
  background-color: var(--bg-primary);
  border: 1.5px solid var(--border-color);
  color: var(--text-muted);
}

.bookmark-modal-card .modal-color-dot.clear.selected {
  border-color: var(--text-muted);
  color: var(--text-muted);
}

/* Dynamic State Color Morphing for Bookmark Modal */
.bookmark-modal-card[data-active-color="green"] {
  border-color: rgba(22, 163, 74, 0.4);
  box-shadow: 0 12px 40px rgba(22, 163, 74, 0.15);
}
.bookmark-modal-card[data-active-color="green"] .modal-header-subtitle {
  color: var(--hl-green);
}
.bookmark-modal-card[data-active-color="green"] .modal-btn-save {
  background-color: var(--hl-green);
  color: #ffffff;
}
.bookmark-modal-card[data-active-color="green"] #modal-bookmark-textarea:focus {
  border-color: var(--hl-green);
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

.bookmark-modal-card[data-active-color="pink"] {
  border-color: rgba(230, 70, 180, 0.4);
  box-shadow: 0 12px 40px rgba(230, 70, 180, 0.15);
}
.bookmark-modal-card[data-active-color="pink"] .modal-header-subtitle {
  color: var(--hl-pink);
}
.bookmark-modal-card[data-active-color="pink"] .modal-btn-save {
  background-color: var(--hl-pink);
  color: #ffffff;
}
.bookmark-modal-card[data-active-color="pink"] #modal-bookmark-textarea:focus {
  border-color: var(--hl-pink);
  box-shadow: 0 0 0 3px rgba(230, 70, 180, 0.15);
}

.bookmark-modal-card[data-active-color="blue"] {
  border-color: rgba(27, 73, 222, 0.4);
  box-shadow: 0 12px 40px rgba(27, 73, 222, 0.15);
}
.bookmark-modal-card[data-active-color="blue"] .modal-header-subtitle {
  color: var(--hl-blue);
}
.bookmark-modal-card[data-active-color="blue"] .modal-btn-save {
  background-color: var(--hl-blue);
  color: #ffffff;
}
.bookmark-modal-card[data-active-color="blue"] #modal-bookmark-textarea:focus {
  border-color: var(--hl-blue);
  box-shadow: 0 0 0 3px rgba(27, 73, 222, 0.15);
}

.bookmark-modal-card[data-active-color="purple"] {
  border-color: rgba(134, 29, 220, 0.4);
  box-shadow: 0 12px 40px rgba(134, 29, 220, 0.15);
}
.bookmark-modal-card[data-active-color="purple"] .modal-header-subtitle {
  color: var(--hl-purple);
}
.bookmark-modal-card[data-active-color="purple"] .modal-btn-save {
  background-color: var(--hl-purple);
  color: #ffffff;
}
.bookmark-modal-card[data-active-color="purple"] #modal-bookmark-textarea:focus {
  border-color: var(--hl-purple);
  box-shadow: 0 0 0 3px rgba(134, 29, 220, 0.15);
}

.bookmark-modal-card[data-active-color="orange"] {
  border-color: rgba(255, 132, 0, 0.4);
  box-shadow: 0 12px 40px rgba(255, 132, 0, 0.15);
}
.bookmark-modal-card[data-active-color="orange"] .modal-header-subtitle {
  color: var(--hl-orange);
}
.bookmark-modal-card[data-active-color="orange"] .modal-btn-save {
  background-color: var(--hl-orange);
  color: #ffffff;
}
.bookmark-modal-card[data-active-color="orange"] #modal-bookmark-textarea:focus {
  border-color: var(--hl-orange);
  box-shadow: 0 0 0 3px rgba(255, 132, 0, 0.15);
}

/* Sidebar Surah status badges */
.surah-title-eng {
  display: inline-flex !important;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
}

.surah-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  border-radius: 4px;
}

.surah-status-badge.completed {
  color: #10b981;
}

.surah-item.completed {
  border-inline-start: 3px solid #10b981;
}

/* Custom Context Menu Backdrop */
.context-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: transparent;
}

/* Custom Context Menu */
.context-menu {
  position: absolute;
  z-index: 10000;
  background-color: rgba(30, 30, 30, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
  padding: 0.25rem;
  min-width: 180px;
  font-family: inherit;
  animation: fadeIn 0.12s ease-out;
}

.theme-sepia .context-menu {
  background-color: rgba(245, 240, 228, 0.92);
  border-color: rgba(67, 52, 34, 0.15);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.15);
}

.theme-light .context-menu {
  background-color: rgba(255, 255, 255, 0.96);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
}

.context-menu-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  color: var(--text-primary);
  background: none;
  border: none;
  width: 100%;
  text-align: start;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.12s ease;
}

@media (hover: hover) {
  .context-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
  }
}

@media (hover: hover) {
  .theme-sepia .context-menu-item:hover,
  .theme-light .context-menu-item:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }
}

.context-menu-item svg {
  flex-shrink: 0;
  color: var(--text-secondary);
}

.context-menu-item.danger {
  color: #f87171;
}
.context-menu-item.danger svg {
  color: #f87171;
}

.theme-sepia .context-menu-item.danger {
  color: #dc2626;
}
.theme-sepia .context-menu-item.danger svg {
  color: #dc2626;
}

/* Sub-tabs inside Saved panel */
.bookmarks-sub-tabs {
  display: flex;
  margin: 0.25rem 0.25rem 0.75rem 0.25rem;
  background: var(--bg-secondary);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.sub-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  padding: 0.5rem 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.sub-tab-btn svg {
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}

#sub-tab-bookmarks svg,
.verse-bookmark-badge svg {
  position: relative;
  top: 1px;
}

@media (hover: hover) {
  .sub-tab-btn:hover {
    color: var(--accent-color);
  }
}

.sub-tab-btn.active {
  background-color: var(--bg-tertiary);
  color: var(--accent-color);
}

/* Slider viewport for smooth swiping */
#panel-bookmarks {
  touch-action: pan-y;
}

.bookmarks-slider-viewport {
  overflow: hidden;
  width: 100%;
  flex: 1;
  display: flex;
  touch-action: pan-y;
}

.bookmarks-slider-container {
  display: flex;
  width: 300%;
  height: 100%;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  touch-action: pan-y;
}

.bookmarks-slider-container .bookmarks-list {
  width: 33.3333%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  padding-top: 6px;
  padding-inline-start: 2px;
  padding-inline-end: 12px;
  touch-action: pan-y;
}

#favorites-list-container,
#bookmarks-list-container,
#notes-list-container {
  overflow-y: auto !important;
}

.verse-action-btn.has-note {
  color: var(--accent-color);
}

/* Search History (Recently Visited) styling */
.search-history-container {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.search-history-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0.5rem;
}

.clear-history-btn {
  background: none;
  border: none;
  color: var(--accent-color);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all var(--transition-fast);
}

@media (hover: hover) {
  .clear-history-btn:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }
}

@media (hover: hover) {
  .theme-sepia .clear-history-btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
}

.search-history-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.search-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: start;
  width: 100%;
}

@media (hover: hover) {
  .search-history-item:hover {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--accent-color);
  }
}

.theme-sepia .search-history-item {
  background-color: rgba(0, 0, 0, 0.01);
}

@media (hover: hover) {
  .theme-sepia .search-history-item:hover {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: var(--accent-color);
  }
}

.search-history-item-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}

.search-history-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
}

.search-history-title {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--text-primary);
  margin-bottom: 6px;
}

.search-history-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.search-history-text:has(bdi) {
  text-align: right;
  direction: rtl;
  line-height: 2.0;
  padding-bottom: 3px;
}

.search-history-text bdi {
  font-family: var(--arabic-font-family);
  font-size: 1.15rem;
  line-height: 2.0;
  direction: rtl;
  unicode-bidi: isolate;
}

.search-history-text bdi mark {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  font-weight: normal;
}

.search-history-item mark {
  background: transparent;
  color: var(--accent-color);
  font-weight: 600;
  padding: 0;
}

.delete-history-item-btn {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 6px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
  margin-inline-start: 0.5rem;
}

@media (hover: hover) {
  .delete-history-item-btn:hover {
    color: #ef4444;
    background-color: rgba(239, 68, 68, 0.1);
  }
}

/* ── AI Explanation Modal ── */
.ai-explanation-modal-card {
  max-width: 540px;
  max-height: 85vh;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.ai-explanation-modal-card .modal-header {
  padding: 1.25rem 1.25rem 0.75rem 1.25rem;
}

.ai-explanation-modal-card .modal-body {
  overflow-y: auto;
  gap: 1.25rem;
  padding: 0.5rem 1.25rem 0.75rem 1.25rem;
}

.ai-explanation-modal-card .modal-footer {
  padding: 0.75rem 1.25rem 1.25rem 1.25rem;
}

/* Verse preview block */
.ai-verse-preview {
  background: var(--bg-primary);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  border-inline-start: 3px solid var(--accent-color);
  margin-bottom: 1.5rem;
}

.ai-verse-arabic {
  font-family: var(--arabic-font-family);
  font-size: 20px;
  text-align: right;
  direction: rtl;
  line-height: 1.8;
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
}

.ai-verse-translator {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

.ai-verse-translation {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0.25rem 0 0 0;
  text-align: left;
  direction: ltr;
}

/* Loading state */
.ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem 1rem;
  color: var(--text-muted);
  font-size: 14px;
}

.ai-loading-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--border-color);
  border-top-color: var(--accent-color);
  border-radius: 50%;
  animation: ai-spin 0.8s linear infinite;
}

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

/* Rendered markdown response */
.ai-response-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-primary);
}

.ai-response-text p {
  margin: 0 0 0.75rem 0;
}

.ai-response-text strong {
  color: var(--text-primary);
}

.ai-response-text ul,
.ai-response-text ol {
  margin: 0.5rem 0;
  padding-inline-start: 1.25rem;
}

.ai-response-text li {
  margin-bottom: 0.35rem;
}

.ai-response-text code {
  background: rgba(128,128,128,0.15);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 13px;
}

.ai-response-text blockquote {
  border-inline-start: 2px solid var(--accent-color);
  padding-inline-start: 0.75rem;
  margin: 0.5rem 0;
  color: var(--text-secondary);
}

/* Error state */
.ai-error {
  color: #e74c3c;
  font-size: 14px;
  text-align: center;
  padding: 1.5rem 1rem;
}

/* Secondary button (for Copy in AI modal) */
.modal-btn-secondary {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-inline-end: auto;
  transition: all 0.2s ease;
}

@media (hover: hover) {
  .modal-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.05);
  }
  .theme-sepia .modal-btn-secondary:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }
}

.modal-btn-secondary.copied {
  background-color: var(--success-color);
  color: #ffffff;
  border-color: transparent;
}

/* Advanced AI Settings Collapsible Block */
.advanced-settings-details {
  user-select: none;
}

.advanced-settings-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  list-style: none;
  transition: color 0.15s ease;
}

.advanced-settings-summary::-webkit-details-marker {
  display: none;
}

@media (hover: hover) {
  .advanced-settings-summary:hover {
    color: var(--text-primary);
  }
}

.advanced-settings-details[open] .details-chevron {
  transform: rotate(180deg);
}

.details-chevron {
  transition: transform 0.2s ease;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────
   First-Time Welcome Modal & Onboarding Experience
   ───────────────────────────────────────────────────────────── */
.welcome-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 1.25rem 1.25rem calc(2rem + env(safe-area-inset-bottom, 0px)) 1.25rem;
  padding-top: calc(1.25rem + env(safe-area-inset-top, 0px));
  box-sizing: border-box;
}

.welcome-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.welcome-modal-content {
  background-color: var(--card-bg);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  width: 100%;
  max-width: 600px;
  max-height: calc(100dvh - 4rem - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px));
  overflow-y: auto;
  padding: 2rem;
  position: relative;
  box-shadow: 0 24px 60px var(--shadow-color);
  transform: scale(0.92) translateY(10px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color var(--transition-normal), border-color var(--transition-normal);
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
}

.welcome-modal-overlay.active .welcome-modal-content {
  transform: scale(1) translateY(0);
}

.theme-light .welcome-modal-overlay {
  background: rgba(15, 23, 42, 0.4);
}

.theme-light .welcome-modal-content {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.theme-sepia .welcome-modal-overlay {
  background: rgba(67, 52, 34, 0.35);
}

.theme-sepia .welcome-modal-content {
  box-shadow: 0 20px 50px rgba(60, 40, 20, 0.2);
}

.welcome-modal-close {
  position: absolute;
  top: 1.25rem;
  inset-inline-end: 1.25rem;
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, background-color 0.15s ease;
}

@media (hover: hover) {
  .welcome-modal-close:hover {
    color: var(--text-primary);
    background-color: rgba(255, 255, 255, 0.08);
  }

  .theme-light .welcome-modal-close:hover,
  .theme-sepia .welcome-modal-close:hover {
    background-color: rgba(0, 0, 0, 0.06);
  }
}

/* Header */
.welcome-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.welcome-bismillah {
  font-family: var(--arabic-font-family, 'Scheherazade New', serif);
  font-size: 1.45rem;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
  direction: rtl;
}

.welcome-title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.welcome-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 480px;
}

/* Feature Grid */
.welcome-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.welcome-sheet-handle {
  display: none;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background-color: var(--border-color);
  margin: 0 auto 0.75rem auto;
  opacity: 0.6;
}

@media (max-width: 768px) {
  .welcome-modal-overlay {
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .welcome-modal-content {
    border-radius: 24px 24px 0 0;
    width: 100%;
    max-width: 100%;
    max-height: calc(85dvh);
    padding: 0.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom)) 1.25rem;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.35);
    overflow-y: auto;
  }

  .welcome-modal-overlay.active .welcome-modal-content {
    transform: translateY(0);
  }

  .welcome-sheet-handle {
    display: block !important;
    width: 40px;
    height: 5px;
    background: var(--text-muted, rgba(148, 163, 184, 0.4));
    border-radius: 3px;
    margin: 0.2rem auto 0.85rem auto;
    cursor: grab;
    touch-action: none;
  }

  .welcome-modal-close {
    top: 1rem;
    inset-inline-end: 1rem;
  }

  .welcome-header {
    margin-bottom: 1rem;
  }

  .welcome-bismillah {
    font-size: 1.2rem;
    margin-bottom: 0.25rem;
  }

  .welcome-title {
    font-size: 1.35rem;
    margin-bottom: 0.3rem;
  }

  .welcome-subtitle {
    font-size: 0.78rem;
    line-height: 1.35;
    max-width: 95%;
    margin: 0 auto;
  }

  .welcome-features-grid {
    display: none !important;
  }

  .welcome-setup-row {
    /* Label stacks above the pills; the single 1fr column keeps the pill row
       full width so its geometry stays language-independent here too. */
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.5rem 0.65rem;
    margin-bottom: 0.55rem;
    border-radius: 10px;
  }

  .welcome-setup-label {
    font-size: 0.7rem;
    font-weight: 600;
  }

  .welcome-theme-pills {
    width: 100%;
    gap: 0.35rem;
  }

  .welcome-lang-picker,
  .welcome-lang-expand-container {
    width: 100%;
    align-items: stretch;
  }

  .welcome-lang-pills-row,
  .welcome-lang-drawer-grid {
    width: 100%;
    gap: 0.35rem;
  }

  .welcome-pill-btn {
    flex: 1;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    padding: 0.3rem 0.4rem;
    border-radius: 8px;
    box-sizing: border-box;
  }

  .welcome-actions-row {
    position: static;
    margin: 0;
    padding: 0;
    background: transparent;
    border-top: none;
    width: 100%;
    flex-direction: row;
    gap: 0.5rem;
  }

  .welcome-btn-primary {
    width: 100%;
    padding: 0.65rem 1rem;
    min-height: 40px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

.welcome-feature-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.85rem;
  transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.theme-light .welcome-feature-card {
  background-color: rgba(0, 0, 0, 0.02);
}

.theme-sepia .welcome-feature-card {
  background-color: rgba(0, 0, 0, 0.03);
}

@media (hover: hover) {
  .welcome-feature-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent-color);
    background-color: var(--card-hover-bg);
  }
}

.welcome-feature-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background-color: var(--accent-glow);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-feature-body h4 {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0 0 0.25rem 0;
  color: var(--text-primary);
}

.welcome-feature-body p {
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.35;
  margin: 0;
}

/* Quick Preferences Setup

   Onboarding geometry must not move when the user switches language mid-sheet.
   Three things would otherwise shift it: Arabic flips the document to dir=rtl
   (reversing every pill row), translated labels have different widths (moving
   the label/pills split point), and translated pill text resizes and re-wraps
   the pills. So the rows are pinned to LTR, the label sits on its own line
   above the pills (as it already did on mobile) instead of competing with them
   for width, and the pill groups are equal-width grid tracks spanning the full
   row — wide enough that no translation has to be truncated. */
.welcome-setup-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  direction: ltr;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  gap: 0.5rem;
}

.theme-light .welcome-setup-row,
.theme-sepia .welcome-setup-row {
  background-color: rgba(0, 0, 0, 0.025);
}

.welcome-setup-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.25;
}

.welcome-theme-pills {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.4rem;
}

.welcome-pill-btn {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 0.35rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

@media (hover: hover) {
  .welcome-pill-btn:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
  }
}

.welcome-pill-btn.active {
  background-color: var(--accent-glow);
  color: var(--accent-color);
  border-color: var(--accent-color);
  font-weight: 600;
}

/* Welcome Language Picker */
.welcome-lang-setup-row {
  margin-bottom: 0.75rem;
}

.welcome-lang-picker {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  direction: ltr;
}

.welcome-lang-pills-row {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.4rem;
}

/* Flag + name on the first line, the Selected/Detected badge on its own line
   below: the badge is the widest piece of a pill, and stacking it keeps every
   pill narrow enough that no translation has to be truncated. */
.welcome-lang-pill {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.3rem 0.5rem;
}

.welcome-lang-main {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.welcome-lang-badge.is-empty {
  visibility: hidden;
}

/* With no badge to sit above, the flag + name centre in the whole pill instead
   of hugging its top half. The hidden badge slot stays in flow, so the pill
   keeps its height and the text simply moves back up when a badge appears. */
.welcome-lang-pill.no-badge .welcome-lang-main {
  position: absolute;
  inset: 0;
  justify-content: center;
}

.welcome-lang-flag {
  font-size: 0.85rem;
  line-height: 1;
}

.welcome-lang-name {
  font-size: 0.75rem;
}

.welcome-lang-badge {
  font-size: 0.6rem;
  font-weight: 600;
  padding: 0.08rem 0.35rem;
  border-radius: 999px;
  background-color: var(--border-color);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.welcome-lang-pill.active .welcome-lang-badge {
  background-color: rgba(255, 255, 255, 0.25);
  color: inherit;
}

.welcome-lang-expand-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  width: 100%;
}

.welcome-lang-toggle-btn {
  background: transparent;
  border: none;
  color: var(--accent-color);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.2rem;
  transition: opacity 0.15s ease;
}

@media (hover: hover) {
  .welcome-lang-toggle-btn:hover {
    opacity: 0.85;
    text-decoration: underline;
  }
}

.welcome-lang-arrow {
  transition: transform 0.25s ease;
}

.welcome-lang-arrow.expanded {
  transform: rotate(180deg);
}

.welcome-lang-drawer {
  width: 100%;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, margin-top 0.2s ease;
}

.welcome-lang-drawer.open {
  max-height: 180px;
  opacity: 1;
  margin-top: 0.4rem;
}

.welcome-lang-drawer-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.4rem;
  padding-top: 0.2rem;
}

/* Action Buttons */
.welcome-actions-row {
  display: flex;
  gap: 0.75rem;
}


.welcome-btn-primary {
  flex: 1;
  background: var(--accent-color);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  padding: 0.8rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 4px 12px var(--accent-glow);
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.theme-emerald .welcome-btn-primary {
  color: #022c22;
}

@media (hover: hover) {
  .welcome-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px var(--accent-glow);
  }
}

.welcome-btn-primary:active {
  transform: translateY(0);
}

.welcome-btn-secondary {
  flex: 1;
  background: transparent;
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 0.8rem 1.25rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
  .welcome-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--text-muted);
  }

  .theme-light .welcome-btn-secondary:hover,
  .theme-sepia .welcome-btn-secondary:hover {
    background-color: rgba(0, 0, 0, 0.04);
  }
}

/* Import Options Modal Cards */
.import-opt-card {
  width: 100%;
  text-align: start;
  padding: 0.9rem 1rem;
  border-radius: 10px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-sizing: border-box;
}

@media (hover: hover) {
  .import-opt-card:hover {
    transform: translateY(-1px);
    border-color: var(--accent-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

.import-opt-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.import-opt-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.import-opt-badge {
  margin-inline-start: auto;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  background-color: var(--accent-color);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.import-opt-card.danger .import-opt-header svg {
  color: #ef4444;
}

@media (hover: hover) {
  .import-opt-card.danger:hover {
    border-color: rgba(239, 68, 68, 0.5);
    background-color: rgba(239, 68, 68, 0.04);
  }
}

.import-opt-desc {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Contact & Info Modal Styling */
.contact-mini-card {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

@media (hover: hover) {
  .contact-mini-card:hover {
    border-color: var(--accent-color);
  }
}

.contact-modal-card {
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}

.theme-dark .contact-about-box,
.theme-emerald .contact-about-box {
  background-color: rgba(255, 255, 255, 0.04);
}

.theme-light .contact-about-box {
  background-color: rgba(0, 0, 0, 0.03);
}

.theme-sepia .contact-about-box {
  background-color: rgba(0, 0, 0, 0.04);
}

/* Desktop-specific bottom breathing room above persistent audio player bar */
@media (min-width: 769px) {
  #panel-settings {
    height: auto !important;
    min-height: 100%;
    padding-bottom: 1.5rem !important;
  }

  .settings-bottom-spacer {
    height: 1.5rem !important;
    display: block !important;
  }

  .surah-list > *:last-child,
  .bookmarks-list > *:last-child,
  .search-results-list > *:last-child {
    margin-bottom: 1.5rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   RIGHT-TO-LEFT (ARABIC) INTERFACE OVERRIDES
   Scoped entirely to html[dir="rtl"], so the LTR (en/it) UI is untouched.
   Layout spacing, positioning, borders and text-align already use CSS
   logical properties, which flip automatically under dir="rtl". This block
   only handles what logical properties can't express: transform direction,
   decorative nudges, mirrored glyphs, and the media transport (kept LTR by
   universal convention — play ▶ never mirrors).
   ═══════════════════════════════════════════════════════════════════════ */

/* Toggle switch: the knob sits at the inline-start (right in RTL); when
   checked it must travel toward the inline-end, i.e. leftward in RTL. */
html[dir="rtl"] input:checked + .switch-slider:before {
  transform: translateX(-20px);
}

/* Mirror the small "jump to verse" arrow glyph and auth submit arrow so they point with the text. */
html[dir="rtl"] .badge-jump-icon,
html[dir="rtl"] .auth-submit-btn svg {
  transform: scaleX(-1);
}

/* Custom <select> dropdown arrow moves to the inline-start (left in RTL) so it
   no longer sits on top of the right-aligned Arabic text. The .bookmark-sort
   arrow's reserved space flips automatically via its logical padding. */
html[dir="rtl"] .settings-select {
  background-position: left 1rem center;
}
html[dir="rtl"] .bookmark-sort-select {
  background-position: left 0.65rem center;
}

/* Audio transport + timeline stay in a fixed left-to-right orientation:
   play/prev/next and the progress bar are a universal media paradigm and
   should not mirror. The surah title/reciter (.player-info) is separate and
   still flows RTL. */
html[dir="rtl"] .player-controls-container {
  direction: ltr;
}

/* Hover nudge on surah rows follows the reading direction. */
@media (hover: hover) {
  html[dir="rtl"] .surah-item:hover {
    transform: translateX(-4px);
  }
}

/* ==========================================================================
   ── Offline Audio Downloads Styles ──
   ========================================================================== */
.offline-menu-container {
  border-radius: 10px;
  background-color: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  overflow: hidden;
  margin-top: 0.75rem;
  transition: border-color var(--transition-fast, 0.2s), box-shadow var(--transition-fast, 0.2s);
}

.offline-menu-container.open {
  border-color: var(--accent-color);
}

@media (hover: hover) {
  .offline-menu-container:hover {
    border-color: var(--accent-color);
  }
}

.offline-menu-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1rem;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  text-align: start;
  transition: background-color var(--transition-fast, 0.2s);
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .offline-menu-trigger:hover {
    background-color: rgba(255, 255, 255, 0.03);
  }
}

.offline-trigger-left {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.offline-trigger-icon {
  color: var(--accent-color);
  flex-shrink: 0;
}

.offline-trigger-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.offline-trigger-right {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.offline-badge {
  font-size: 0.725rem;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--accent-color);
  font-weight: 600;
  border: 1px solid rgba(16, 185, 129, 0.25);
  transition: all 0.2s ease;
}

.offline-chevron {
  color: var(--text-muted);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.offline-menu-container.open .offline-chevron {
  transform: rotate(180deg);
}

.offline-menu-dropdown {
  display: none;
  background-color: var(--bg-primary);
}

.offline-dropdown-inner {
  overflow: hidden;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border-color);
}

.offline-storage-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
}

.request-persist-btn {
  background: var(--accent-color);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition-fast);
}

@media (hover: hover) {
  .request-persist-btn:hover {
    background: var(--accent-hover);
  }
}

.reciter-offline-item {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 0.5rem;
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

@media (hover: hover) {
  .reciter-offline-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
  }
}

.reciter-offline-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 0.75rem;
  background: transparent;
  border: none;
  color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  text-align: start;
}

.reciter-offline-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.reciter-offline-name {
  font-size: 0.8rem;
  font-weight: 600;
}

.reciter-offline-status {
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.reciter-offline-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.reciter-offline-dropdown {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--bg-tertiary);
}

.reciter-offline-item.open .reciter-offline-dropdown {
  grid-template-rows: 1fr;
}

.reciter-offline-inner {
  overflow: hidden;
}

.reciter-offline-item.open .reciter-offline-inner {
  border-top: 1px solid var(--border-color);
  padding: 0.75rem;
}

.reciter-bulk-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.reciter-bulk-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s;
}

@media (hover: hover) {
  .reciter-bulk-btn:hover:not(:disabled) {
    background: var(--bg-hover);
    border-color: var(--accent-color);
  }
}

.reciter-bulk-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.reciter-bulk-btn.delete {
  color: #ef4444;
}

@media (hover: hover) {
  .reciter-bulk-btn.delete:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.3);
  }
}

.surahs-offline-list {
  max-height: 250px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--bg-secondary);
}

.surah-offline-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.65rem;
  border-bottom: 1px solid var(--border-color);
}

.surah-offline-row:last-child {
  border-bottom: none;
}

.surah-offline-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
}

.surah-offline-num {
  font-weight: 700;
  color: var(--text-muted);
  width: 1.5rem;
}

.surah-offline-name-text {
  font-weight: 500;
}

.surah-offline-action-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: all 0.2s;
}

.surah-offline-action-btn.downloaded {
  color: var(--success-color);
}

@media (hover: hover) {
  .surah-offline-action-btn:hover {
    background: var(--bg-hover);
    color: var(--accent-color);
  }

  .surah-offline-action-btn.downloaded:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
  }

  .surah-offline-action-btn.downloaded:hover svg.check-icon {
    display: none;
  }

  .surah-offline-action-btn.downloaded:hover svg.trash-icon {
    display: block !important;
  }
}

.surah-offline-action-btn.downloading {
  color: var(--accent-color);
  cursor: not-allowed;
}

/* ── iOS App Install Banner ── */
.ios-install-banner {
  position: fixed;
  /* Sit just above the persistent bottom UI: on mobile the nav bar (52px)
     plus the player (65px) top out at 117px, so 130px leaves a small gap. */
  --install-banner-lift: 130px;
  bottom: calc(var(--install-banner-lift) + var(--safe-area-bottom, 0px));
  inset-inline-start: 16px;
  inset-inline-end: 16px;
  max-width: 420px;
  margin: 0 auto;
  background: var(--bg-card, var(--bg-secondary));
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 14px 16px 12px 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--border-color);
  z-index: 999999;
  overflow: visible;
  /* Entry/exit state — `.visible` is toggled one frame after `.hidden` is
     removed so the transition actually runs (display:none blocks it). */
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.ios-install-banner.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.theme-light .ios-install-banner {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.12);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18), 0 2px 12px rgba(0, 0, 0, 0.08);
}

.theme-sepia .ios-install-banner {
  background: #f5ebd7;
  border-color: rgba(60, 40, 20, 0.2);
  box-shadow: 0 20px 45px rgba(60, 40, 20, 0.2);
}

@media (max-width: 768px) {
  .ios-install-banner {
    inset-inline-start: 12px;
    inset-inline-end: 12px;
  }
}

/* On desktop the player is 90px tall and there is no bottom nav bar. */
@media (min-width: 769px) {
  .ios-install-banner {
    --install-banner-lift: 108px;
  }
}

.ios-install-banner.hidden {
  display: none !important;
}

/* ── CTA button ──
   One button, two jobs, decided by scheduleInstallBanner():
   - iOS Safari (default mode): links to the /install guide page.
   - Chromium (.install-mode-native): fires the real OS install dialog. */
.install-banner-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border: none;
  border-radius: 14px;
  background: var(--accent-color);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, transform 0.12s;
}

@media (hover: hover) {
  .install-banner-action:hover {
    background: var(--accent-hover);
  }
}

.install-banner-action:active {
  transform: scale(0.985);
}

.install-banner-action:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

/* Optical alignment: flex centering aligns the text's line box, not its
   baseline, so "Install" floats a touch high next to the tray's flat bottom.
   Nudge the text down so the baseline reads level with the glyph. The smaller
   settings/offline buttons already read snug, so this stays scoped here. */
#ios-install-banner .install-banner-action span {
  margin-top: 2px;
}

.ios-banner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ios-banner-app {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ios-banner-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

.ios-banner-text strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.ios-banner-subtitle {
  display: block;
  font-size: 0.73rem;
  color: var(--text-muted);
  line-height: 1.3;
  margin-top: 2px;
}

.ios-banner-close {
  background: transparent;
  border: none;
  color: var(--text-muted);
  line-height: 0;
  cursor: pointer;
  /* 36px visible, expanded to a 44px touch target via the ::after overlay */
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-inline-start: 8px;
  position: relative;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, color 0.2s;
}

.ios-banner-close::after {
  content: '';
  position: absolute;
  inset: -4px;
}

/* Gated like every other hover rule in this file — the banner is touch-only in
   practice, and a finger must never leave a stuck hover fill behind. :active is
   deliberately outside the gate: that is a press, not a hover. */
@media (hover: hover) {
  .ios-banner-close:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
  }
}

.ios-banner-close:active {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.ios-banner-close:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ios-install-banner {
    transform: none;
    transition: opacity 0.2s ease;
  }
  .ios-install-banner.visible {
    transform: none;
  }
}



@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

/* ─────────────────────────────────────────────
   /install — dedicated iOS PWA install guide page
   (install.html). Standalone page sharing the app's
   theme tokens; every visual is a CSS variable.
   ───────────────────────────────────────────── */

.install-page {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(var(--safe-area-top, 0px) + 20px) 20px calc(var(--safe-area-bottom, 0px) + 52px);
  font-family: var(--ui-font-family);
  color: var(--text-primary);
  background-color: var(--bg-primary);
  min-height: 100vh;
  /* The app shell body is overflow:hidden; this page needs to scroll. */
  overflow-y: auto;
}

/* ── Top bar ── */
.install-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 2px 18px;
}

.install-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 2px;
  border-radius: 8px;
  transition: color var(--transition-fast);
}

.install-back-link::before {
  content: '←';
  font-size: 1rem;
  line-height: 1;
  transition: transform var(--transition-fast);
}

[dir="rtl"] .install-back-link::before {
  content: '→';
}

.install-back-link:hover {
  color: var(--accent-color);
}

.install-topbar-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.install-topbar-logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
}

.install-topbar-name {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Hero ── */
.install-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 0 8px;
}

.install-hero-icon {
  position: relative;
  margin-bottom: 18px;
}

.install-hero-logo {
  width: 84px;
  height: 84px;
  border-radius: 21px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.install-hero-add-badge {
  position: absolute;
  right: -9px;
  bottom: -9px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
  color: #ffffff;
  border: 3px solid var(--bg-primary);
}

.install-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-color);
  background: var(--accent-glow);
  border: 1px solid var(--border-color);
  padding: 5px 12px;
  border-radius: 20px;
  margin-bottom: 14px;
}

.install-badge span:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 2.5px;
  height: 2.5px;
  background-color: currentColor;
  border-radius: 50%;
  margin: 0 0.5em;
  vertical-align: middle;
  position: relative;
  top: -1px;
  opacity: 0.6;
}

.install-title {
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}

.install-subtitle {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 460px;
}

/* ── Steps ── */
.install-steps {
  margin-top: 34px;
}

.install-section-title {
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
  margin-bottom: 18px;
}

.install-step-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
}

.install-step-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 16px;
}

.install-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 7px;
}

.install-step-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-color);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.install-step-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  background: var(--accent-glow);
  flex-shrink: 0;
}

/* The Feather share glyph is bottom-heavy: the filled square fills the lower
   half of the viewBox (y 12–22) while the arrow is a thin line above it, so
   the mass reads low in the chip when geometrically centered. Ride it up 1px
   so it sits optically centered like the other icons. */
.install-step-share .install-step-icon svg {
  transform: translateY(-1px);
}

.install-step-head h3 {
  font-size: 0.95rem;
  font-weight: 700;
}

.install-step-desc {
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--text-secondary);
  padding-inline-start: 36px;
}

/* Copy-link button inside step 1 ("Open this page in Safari"), shown only
   when the visitor is on iOS but not in Safari. Sits below the step
   description, aligned with its text, as a small inline action. */
.install-step-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  margin-inline-start: 36px;
}

/* The text glyph sits a hair low next to the icon; ride it up 1px so it
   reads optically centered. inline-block is required: transform is ignored
   on non-replaced inline elements, and only the step-1 button is a flex
   container that blockifies its span. */
.install-copy-btn > span {
  display: inline-block;
  transform: translateY(-1px);
}

/* ── Done / CTA ── */
.install-done {
  margin-top: 36px;
  text-align: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 26px 20px;
}

.install-done-check {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
  color: #ffffff;
  box-shadow: 0 0 0 8px var(--accent-glow);
}

.install-done .install-section-title {
  margin-bottom: 8px;
}

.install-done-desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 380px;
  margin: 0 auto 18px;
}

.install-launch-hint {
  margin-top: 13px;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ── Share row ── */
.install-share {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.install-share-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.install-copy-btn {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent-color);
  background: var(--accent-glow);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 8px 16px;
  transition: background var(--transition-fast), transform 0.12s;
}

@media (hover: hover) {
  .install-copy-btn:hover {
    background: var(--bg-hover);
  }
}

.install-copy-btn:active {
  transform: scale(0.97);
}

/* ── Platform notices ──
   One card per non-iOS-Safari platform; the runtime script shows only the
   matching one. iOS Safari keeps the steps/done flow, so notices stay hidden. */
.install-notices {
  margin-top: 30px;
}

.install-notice {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  padding: 26px 20px;
}

.install-notice.visible {
  display: flex;
}

.install-notice-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color);
  color: #ffffff;
  box-shadow: 0 0 0 8px var(--accent-glow);
}

.install-notice-title {
  font-size: 1.15rem;
  font-weight: 800;
  margin-bottom: 8px;
}

.install-notice-desc {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 380px;
  margin: 0 auto 18px;
}

.install-notice-action {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-color);
  background: var(--accent-glow);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  transition: background var(--transition-fast), transform 0.12s;
}

.install-notice-action.install-banner-action {
  color: #ffffff;
  background: var(--accent-color);
  border: none;
  width: auto;
  max-width: 100%;
}

.install-notice-action:active {
  transform: scale(0.97);
}

/* ── Benefits (non-iOS platforms) ── */
.install-benefits {
  display: none;
  flex-direction: column;
  gap: 12px;
  margin-top: 30px;
}

.install-benefits.visible {
  display: flex;
}

.install-benefit {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 14px 16px;
}

.install-benefit-icon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
  background: var(--accent-glow);
}

.install-benefit-text h3 {
  font-size: 0.92rem;
  font-weight: 700;
  margin: 1px 0 3px;
}

.install-benefit-text p {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Visibility toggles driven by the runtime platform script */
.install-ios-only.hidden,
.install-notice.hidden {
  display: none;
}

/* ── Footer ── */
.install-footer {
  margin-top: 34px;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
}

/* Dark-onyx card tint tweaks so cards sit one step above the page bg */
.theme-dark .install-step-card,
.theme-dark .install-done,
.theme-dark .install-notice,
.theme-dark .install-benefit {
  background: var(--bg-tertiary);
}