/* ================================================================
   ARABIC FONT IMPORTS — Madinah Mushaf style (Image 2 match)
   Primary: Noto Naskh Arabic (Google Fonts — closest to Image 2 online)
   Fallback: Amiri Quran
================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;500;600;700&display=swap');

/* ================================================================
   QURAN READER — quran_surah.css
   All styles for the Quran reader page.
   Extracted from quran_surah.html — duplicates removed.
================================================================ */

/* ════════════════════════════════════════════════════════════════
   QURAN READER — PREMIUM REDESIGN CSS
   ════════════════════════════════════════════════════════════════ */

/* ── OVERRIDE base.html global styles ── */
body{padding-top:0!important}
.top-navbar,nav.top-navbar,.navbar,.site-header,header:not(#qhdr){display:none!important}
body.tax-season-active{padding-top:0!important}
.tax-season-alert{display:none!important}

/* ── COMPACT MODE ── */
.vi.vi-compact{padding-top:6px!important;padding-bottom:6px!important}
.vi.vi-compact .ar-txt{font-size:1.4rem!important;line-height:1.8!important}
.vi.vi-compact .tr-txt{font-size:.82rem!important;margin-top:2px!important}
.vi.vi-compact .vb{display:none!important}

:root{
  --teal:#0ea5a0;--teal-d:#0b8880;--teal-p:#e0f7f6;--teal-g:rgba(14,165,160,.12);
  --teal-bright:#14c4bf;
  --gold:#c9a227;--gold-d:#a07a10;--gold-p:#fef9e8;
  --tx:#0c1524;--mu:#5f7285;--bd:#dde5ef;--bg:#f0f4f8;--wh:#fff;--surf:#fff;--fg:#0c1524;
  --card-bg:#ffffff;
  --sh:0 1px 2px rgba(0,0,0,.04),0 4px 18px rgba(0,0,0,.07);
  --sh-md:0 4px 24px rgba(0,0,0,.1),0 1px 4px rgba(0,0,0,.06);
  --sb:272px;
  --qtop-h:58px;
  --abar-h:82px;
  --font-ar:'KFGQPC Uthman Taha Naskh','me_quran','Noto Naskh Arabic','Amiri Quran','AmiriQuran','Amiri',serif;
  --ar-sz:2.2rem;
  --msh-bg:#fdf8ee;--msh-br:#c9a227;--msh-tx:#1a0a00;
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;
}
[data-dark="1"]{
  --tx:#e8edf5;--mu:#8496a8;--bd:#1e2d3d;--bg:#0b1120;--wh:#0f1929;--surf:#0f1929;--fg:#e8edf5;
  --card-bg:#0f1929;
  --teal-p:rgba(14,165,160,.12);
  --gold-p:rgba(201,162,39,.1);
  --msh-bg:#0e0700;--msh-br:#7a5a20;--msh-tx:#f0e6cc;--msh-inner-op:.5;
  --sh-ar-filter: invert(1) brightness(1.3);
  color-scheme:dark;
}
[data-font="indopak"]{--font-ar:'Noto Nastaliq Urdu','Amiri',serif;}
[data-font="scheherazade"]{--font-ar:'Scheherazade New','Amiri',serif;}
[data-font="amiri-quran"]{--font-ar:'Amiri Quran','AmiriQuran','Amiri',serif;}
[data-font="noto-naskh"]{--font-ar:'Noto Naskh Arabic','Amiri',serif;}
[data-font="madinah"]{--font-ar:'KFGQPC Uthman Taha Naskh','me_quran','Noto Naskh Arabic','Amiri Quran',serif;}
[data-ar-sz="sm"]{--ar-sz:1.55rem;}
[data-ar-sz="lg"]{--ar-sz:2.5rem;}
[data-ar-sz="xl"]{--ar-sz:3rem;}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Crimson Pro',Georgia,serif;background:var(--bg);color:var(--tx);transition:background .3s,color .3s;-webkit-font-smoothing:antialiased;}

/* ── TOP BAR ── */
.qtop{
  background:#fff;
  border-bottom:1px solid #e8edf2;
  height:var(--qtop-h);display:flex;align-items:center;
  padding:0 16px;gap:6px;
  position:fixed;top:0;left:0;right:0;z-index:9999;
  box-shadow:0 1px 3px rgba(0,0,0,.05);
}
[data-dark="1"] .qtop{background:rgba(11,17,32,.98);border-bottom-color:var(--bd);box-shadow:0 1px 0 rgba(255,255,255,.04)}
.qtop-back{
  color:#374151;text-decoration:none;
  display:flex;align-items:center;gap:5px;
  padding:6px 10px;border-radius:8px;
  font-size:.78rem;font-weight:600;
  transition:all .15s;white-space:nowrap;flex-shrink:0;
  border:none;background:none;cursor:pointer;
}
.qtop-back i{font-size:.72rem;color:#9ca3af}
.qtop-back:hover{background:#f3f4f6;color:#111}
.qtop-info{
  flex:1;min-width:0;text-align:center;line-height:1;
  display:flex;flex-direction:column;align-items:center;gap:1px;
}
.qtop-info h2{
  font-size:.88rem;font-weight:700;color:#111827;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  letter-spacing:-.2px;margin:0;
  display:flex;align-items:center;gap:6px;
}
.qtop-info h2 .qtop-page-icon{font-size:.75rem;color:#6b7280}
.qtop-info p{
  font-size:.68rem;color:#6b7280;margin:2px 0 0;letter-spacing:.2px;
  display:flex;align-items:center;gap:4px;
}
.qtop-info p .qtop-dot{color:#d1d5db}
.qtop-ar{display:none}
.qtop-acts{display:flex;gap:2px;align-items:center;flex-shrink:0}
/* Toolbar buttons — clean black/gray, no colored borders */
.tb{
  background:transparent;
  border:1px solid transparent;
  color:#6b7280;
  padding:6px 11px;border-radius:20px;cursor:pointer;
  font-size:.72rem;font-weight:600;
  display:flex;align-items:center;gap:4px;
  transition:all .15s;white-space:nowrap;line-height:1;
  font-family:'Crimson Pro',Georgia,serif;
  letter-spacing:.1px;
}
.tb:hover{background:#f3f4f6;color:#111827}
.tb.on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700}
[data-dark="1"] .tb{color:#8496a8}
[data-dark="1"] .tb:hover{background:rgba(255,255,255,.06);color:#dde5f0}
.tb i{font-size:.73rem}
.tb-lbl{font-size:.73rem}
.tb-sp{width:1px;height:18px;background:#e5e7eb;margin:0 2px;flex-shrink:0}
[data-dark="1"] .tb-sp{background:var(--bd)}

/* LAYOUT */
.ql{display:flex;min-height:calc(100vh - var(--qtop-h));padding-top:var(--qtop-h)}

/* SIDEBAR */
/* [sidebar .qs rules moved to canonical block below] */

/* CONTENT */
/* .qc canonical definition in MAIN CONTENT AREA section below */

/* SURAH HEADER — single canonical definition (duplicates removed) */

/* VIEW BAR — canonical definition in VBAR TOOLBAR UPGRADES section below */

/* VERSES — canonical definitions in VERSE CARD REDESIGN section below */
/* .vi, .vt, .vt-left, .vt-acts, .va, .ar-text all defined canonically below */
.vlist{background:var(--bg)}

/* ARABIC — canonical .ar-text in VERSE CARD REDESIGN section below */
.ar-text .qw{cursor:pointer;transition:color .15s;display:inline;padding:0 1px}
.ar-text .qw:hover{color:var(--teal)}
/* PLAYING WORD = color change only, no background — clean Mushaf style */
.ar-text .qw.wp{
  color:var(--teal)!important;
  font-weight:700;
  transition:color .1s;
}
/* Word clicked by user — brief golden flash, color only */
.ar-text .qw.wp-click{color:var(--gold)!important;transition:color .2s}

/* WORD TOOLTIP */
/* WORD TOOLTIP — canonical .wtip in WORD TOOLTIP section below */

/* TRANSLATION — canonical .vtr, .tr-lbl, .tr-txt in VERSE CARD REDESIGN section below */
/* Extra translations */
.vtr-extra{margin-top:6px;padding-top:6px;border-top:1px dashed var(--bd)}
.vtr-extra .tr-lbl{color:var(--gold);font-size:.58rem}
.vtr-extra .tr-txt{font-size:.86rem;color:var(--mu)}
.tts-voice-row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.tts-voice-btn{padding:5px 14px;border:1.5px solid var(--bd);border-radius:20px;font-size:.75rem;font-weight:700;cursor:pointer;background:var(--bg);color:var(--mu);transition:all .15s;font-family:inherit}
.tts-voice-btn.on{background:var(--teal);border-color:var(--teal);color:#fff}
.trans-add-btn{padding:5px 12px;border:1.5px dashed var(--bd);border-radius:8px;font-size:.73rem;font-weight:700;cursor:pointer;background:transparent;color:var(--mu);transition:all .15s;font-family:inherit;display:flex;align-items:center;gap:5px}
.trans-add-btn:hover{border-color:var(--teal);color:var(--teal)}
.trans-extra-row{margin-top:10px;padding-top:10px;border-top:1px dashed var(--bd);position:relative}
.trans-extra-row .trans-remove{position:absolute;top:10px;right:0;background:none;border:none;color:var(--mu);cursor:pointer;font-size:.75rem;padding:3px 6px;border-radius:6px;transition:all .12s}
.trans-extra-row .trans-remove:hover{background:rgba(239,68,68,.1);color:#ef4444}

/* SIDE VIEW */
.vi.side-v .vi-inner{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.vi.side-v .vt{grid-column:1/-1}
.vi.side-v .wbw{grid-column:1/-1}
.vi.side-v .vi-ext{grid-column:1/-1}
.vi.side-v .vtr{margin-top:0;padding-top:0;border-top:none;border-left:2px solid var(--bd);padding-left:14px;align-self:start}

/* WBW */
.wbw{background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:12px;margin-top:10px;display:none}
.wbw.open{display:block}
.wbw-words{display:flex;flex-wrap:wrap;gap:5px;direction:rtl}
.wbw-w{background:var(--wh);border:1px solid var(--bd);border-radius:9px;padding:7px 10px;text-align:center;min-width:66px;cursor:pointer;transition:all .12s}
.wbw-w:hover{border-color:var(--teal);background:var(--teal-p)}
.wbw-w.wp{background:var(--teal)!important;border-color:var(--teal)!important;color:#fff!important}
.wbw-ar{font-family:'Amiri',serif;font-size:1.1rem;display:block;direction:rtl}
.wbw-tl{font-size:.6rem;color:var(--mu);display:block;direction:ltr;font-style:italic;margin-top:1px}
.wbw-en{font-size:.68rem;color:var(--tx);display:block;direction:ltr;font-weight:700;margin-top:1px}
.wbw-w.wp .wbw-tl,.wbw-w.wp .wbw-en{color:rgba(255,255,255,.85)!important}

/* EXTENSION TABS — canonical .vi-ext, .vi-tabs, .vi-tab, .vi-panel in VERSE CARD REDESIGN section below */
.tspin{width:22px;height:22px;border:2.5px solid var(--bd);border-top-color:var(--teal);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 7px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@keyframes skelPulse{0%,100%{opacity:1}50%{opacity:.4}}
.tload{text-align:center;padding:16px;color:var(--mu);font-size:.83rem}
/* .tf-box, .tf-lbl, .tf-txt, .tf-srcs, .tf-src, .hd-card, .hd-grade, .hd-txt — canonical in TAFSIR section below */
/* .note-ta, .note-save, .note-ok — canonical in VERSE CARD REDESIGN section below */
/* ── AI LANGUAGE SELECTOR (global per verse, shared across all AI tabs) ── */
.ai-lang-bar{
  display:flex;align-items:center;gap:8px;margin-bottom:14px;
  flex-wrap:wrap;
}
.ai-lang-lbl{font-size:.68rem;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.6px;flex-shrink:0;display:flex;align-items:center;gap:4px}
.ai-lang-sel{
  padding:5px 28px 5px 10px;border:1.5px solid var(--bd);border-radius:9px;
  font-size:.78rem;font-family:inherit;background:var(--bg);color:var(--tx);
  outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;
  transition:border-color .15s;flex:1;min-width:140px;max-width:220px;
}
.ai-lang-sel:focus,.ai-lang-sel:hover{border-color:var(--teal)}
.ai-lang-note{font-size:.68rem;color:var(--mu);font-style:italic}

/* TAFSIR LANGUAGE SELECTOR */
.tf-lang-bar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.tf-lang-lbl{font-size:.7rem;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}
.tf-lang-sel{padding:5px 28px 5px 10px;border:1.5px solid var(--bd);border-radius:9px;font-size:.78rem;font-family:inherit;background:var(--bg);color:var(--tx);outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 9px center;transition:border-color .15s}
.tf-lang-sel:focus,.tf-lang-sel:hover{border-color:var(--teal)}
.tf-lang-reload{padding:5px 11px;background:var(--teal);color:#fff;border:none;border-radius:9px;font-size:.75rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px;font-family:inherit;transition:background .15s}
.tf-lang-reload:hover{background:var(--teal-d)}
/* [.ai-pre/.ai-p/.ai-row moved to canonical block below] */
.cmp-panel{display:none;margin-top:10px;background:var(--bg);border:1px solid var(--bd);border-radius:11px;overflow:hidden}
.cmp-panel.open{display:block}
.cmp-item{padding:11px 13px;border-bottom:1px solid var(--bd)}
.cmp-item:last-child{border:none}
.cmp-src{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--teal);margin-bottom:3px}
.cmp-txt{font-size:.9rem;line-height:1.75}

/* HIGHLIGHT PICKER */
.hl-pick{background:var(--wh);border:1px solid var(--bd);border-radius:12px;position:fixed;z-index:400;box-shadow:0 8px 32px rgba(0,0,0,.18);padding:10px 12px;display:none;align-items:center;gap:7px;flex-wrap:wrap;max-width:240px}
.hl-pick.on{display:flex}
.hl-dot{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .12s}
.hl-dot:hover{transform:scale(1.25);border-color:rgba(0,0,0,.3)}
.hl-dot.on{border-color:rgba(0,0,0,.5)!important;transform:scale(1.2);box-shadow:0 0 0 2px rgba(0,0,0,.15)}
.hl-rm{font-size:.71rem;color:var(--mu);cursor:pointer;padding:3px 8px;border:1px solid var(--bd);border-radius:6px;font-family:inherit;transition:all .12s}
.hl-rm:hover{color:var(--tx);border-color:var(--tx)}

/* MUSHAF VIEW */
.msh-wrap{background:var(--bg);min-height:calc(100vh - 140px)}
.msh-nav{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--wh);border-bottom:1px solid var(--bd);gap:10px}
.msh-nav-btn{padding:7px 14px;border:1px solid var(--bd);border-radius:9px;font-size:.78rem;font-weight:700;cursor:pointer;background:var(--bg);color:var(--mu);transition:all .15s;display:flex;align-items:center;gap:5px;font-family:inherit}
.msh-nav-btn:hover:not(:disabled){background:var(--teal);border-color:var(--teal);color:#fff}
.msh-nav-btn:disabled{opacity:.35;cursor:not-allowed}
.msh-page-info{font-size:.85rem;font-weight:700;color:var(--tx);display:flex;align-items:center;gap:7px}
.msh-pi{width:52px;padding:4px 7px;border:1px solid var(--bd);border-radius:7px;font-size:.8rem;text-align:center;outline:none;background:var(--bg);color:var(--tx);font-family:'JetBrains Mono',monospace}
.msh-pi:focus{border-color:var(--teal)}
/* ═══════════════════════════════════════════════
   REAL MUSHAF PAGE — authentic printed Quran look
   ═══════════════════════════════════════════════ */
:root{
  --msh-paper:#fdf8ec;--msh-paper-dark:#1a1610;
  --msh-frame:#b8960c;--msh-frame-inner:#d4a017;
}
[data-dark="1"]{--msh-paper:var(--msh-paper-dark);--msh-frame:rgba(184,150,12,.5);--msh-frame-inner:rgba(212,160,23,.35)}

.msh-page{
  background:var(--msh-bg,var(--msh-paper));
  border:3px solid var(--msh-frame);
  border-radius:4px;
  margin:12px auto 24px;
  max-width:560px;
  padding:0;
  box-shadow:
    0 0 0 6px var(--msh-paper,#fdf8ec),
    0 0 0 9px var(--msh-frame-inner),
    0 0 0 12px var(--msh-paper,#fdf8ec),
    0 0 0 13px var(--msh-frame),
    0 12px 50px rgba(0,0,0,.22),
    4px 4px 0 rgba(0,0,0,.06);
  position:relative;overflow:visible;
}
/* Decorative corner rosettes */
.msh-page::before,.msh-page::after{
  content:'❋';
  position:absolute;color:var(--msh-frame);
  font-size:1.6rem;line-height:1;z-index:2;
}
.msh-page::before{top:-10px;left:-10px}
.msh-page::after{top:-10px;right:-10px;content:'❋'}

.msh-inner{padding:20px 22px 16px;position:relative;}

/* Double inner border like real Mushaf */
.msh-inner::before{
  content:'';position:absolute;
  top:8px;left:8px;right:8px;bottom:8px;
  border:1.5px solid var(--msh-frame-inner,rgba(212,160,23,.4));
  pointer-events:none;
}
.msh-inner::after{
  content:'';position:absolute;
  top:12px;left:12px;right:12px;bottom:12px;
  border:.5px solid var(--msh-frame-inner,rgba(212,160,23,.25));
  pointer-events:none;
}

/* Header: Juz | Surah name | Hizb */
.msh-hd{
  font-size:.68rem;color:var(--gold);
  border-bottom:2px double rgba(201,162,39,.6);
  padding-bottom:9px;margin-bottom:14px;
  display:flex;justify-content:space-between;align-items:center;
  letter-spacing:.3px;gap:4px;
}
.msh-hd-juz{font-family:'Amiri',serif;font-size:.82rem;flex-shrink:0}
.msh-hd-pg{font-family:'Amiri',serif;font-size:.82rem;flex-shrink:0;min-width:2rem;display:inline-block}
.msh-hd-name{font-family:'Amiri',serif;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;text-align:center;margin:0 6px}
.msh-hd-bism{font-family:'Amiri',serif;font-size:.75rem;flex-shrink:0;flex:1;text-align:center}

/* Page footer — page number at bottom center */
.msh-ft{
  text-align:center;font-family:'Amiri',serif;font-size:1rem;
  color:var(--gold);
  border-top:2px double rgba(201,162,39,.6);
  padding-top:10px;margin-top:16px;letter-spacing:2px;
}

/* Surah title banner (authentic style) */
.msh-surah-ttl,.msh-surah-title{
  background:linear-gradient(to right,transparent,rgba(201,162,39,.18),rgba(201,162,39,.25),rgba(201,162,39,.18),transparent);
  border-top:1.5px solid rgba(201,162,39,.6);
  border-bottom:1.5px solid rgba(201,162,39,.6);
  padding:10px 40px;margin:12px 0;text-align:center;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:3px;
}
/* Surah name ornament brackets */
.msh-surah-ttl::before,.msh-surah-title::before{
  content:'﴾';font-family:'Amiri',serif;color:var(--gold);
  font-size:1.4rem;position:absolute;right:14px;top:50%;transform:translateY(-50%);
}
.msh-surah-ttl::after,.msh-surah-title::after{
  content:'﴿';font-family:'Amiri',serif;color:var(--gold);
  font-size:1.4rem;position:absolute;left:14px;top:50%;transform:translateY(-50%);
}
.msh-surah-nm{font-family:'Amiri',serif;font-size:1.5rem;color:var(--msh-tx);direction:rtl}
.msh-surah-en{font-size:.65rem;color:var(--mu);margin-top:1px;letter-spacing:.5px}
.msh-surah-title{
  /* Authentic Quran surah header — ornate box */
  text-align:center;
  font-family:'Amiri',serif;
  margin:10px 0 8px;
  padding:8px 44px;
  position:relative;
  background:linear-gradient(135deg,rgba(201,162,39,.15),rgba(201,162,39,.28),rgba(201,162,39,.15));
  border-top:2px double var(--gold,#c9a227);
  border-bottom:2px double var(--gold,#c9a227);
  display:flex;flex-direction:column;align-items:center;gap:2px;
}
.msh-surah-title>span:first-child{
  font-family:'Amiri Quran','Amiri',serif;
  font-size:1.55rem;color:var(--msh-tx,#1a1209);direction:rtl;
  font-weight:normal;
}
.msh-surah-title>span:last-child{
  font-size:.6rem;color:var(--gold,#c9a227);letter-spacing:.8px;text-transform:uppercase;
}
/* Ornament brackets on surah title */
.msh-surah-title::before{content:'﴾';font-family:'Amiri',serif;color:var(--gold,#c9a227);font-size:1.5rem;position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.msh-surah-title::after {content:'﴿';font-family:'Amiri',serif;color:var(--gold,#c9a227);font-size:1.5rem;position:absolute;left:12px; top:50%;transform:translateY(-50%)}

/* Bismillah — centered, golden */
.msh-bism{
  text-align:center;font-family:'Amiri Quran','Amiri',serif;
  font-size:1.4rem;color:var(--gold);
  margin:10px 0 4px;line-height:2;letter-spacing:1px;
  text-shadow:0 1px 2px rgba(201,162,39,.2);
}

/* ══════════════════════════════════════════════════════
   MUSHAF PAGE — Authentic Madinah Mushaf Layout
   ══════════════════════════════════════════════════════ */
:root{
  --msh-line-h: 2.8em;
  --msh-font-sz: 1.32rem;
  --msh-lines: 15;
  --msh-text-h: calc(var(--msh-lines) * var(--msh-line-h));
  --msh-page-w: 500px;
  --msh-page-bg: #fdf8f0;
  --msh-border: #c9a227;
  --msh-tx: #1a1209;
}
[data-dark="1"]{
  --msh-page-bg: #1a1412;
  --msh-border: #8a6820;
  --msh-tx: #e8d9b8;
}
[data-theme="sepia"]{
  --msh-page-bg: #f4ead8;
  --msh-tx: #2d1f0e;
}

/* ── Main Arabic text block ── */
.msh-text{
  font-family:'AmiriQuran','Amiri Quran','Noto Naskh Arabic','Amiri',serif;
  font-size:var(--msh-font-sz);
  line-height:var(--msh-line-h);
  direction:rtl;
  /* KEY: justify + stretch last line to fill too — authentic Mushaf look */
  text-align:justify;
  text-align-last:justify;
  -webkit-text-align-last:justify;
  color:var(--msh-tx,#1a1209);
  /* Arabic kashida (tatweel) justification */
  -webkit-font-feature-settings:"kern","liga","calt","curs","arab";
  font-feature-settings:"kern","liga","calt","curs","arab";
  /* Prevent word breaks — keep each Arabic word whole */
  word-break:keep-all;
  -webkit-hyphens:none;
  hyphens:none;
  overflow-wrap:normal;
  /* Inter-word spacing for kashida-style fill */
  word-spacing:0.18em;
  letter-spacing:0.01em;
  /* Let content determine height — no blank ruled lines at bottom */
  min-height:unset;
  display:block;
  width:100%;
}
/* Ruled lines mode — gold guide lines every line */
.msh-text.msh-lines{
  background-image:repeating-linear-gradient(
    to bottom,
    transparent,
    transparent calc(var(--msh-line-h) - 1px),
    rgba(201,162,39,.18) calc(var(--msh-line-h) - 1px),
    rgba(201,162,39,.18) var(--msh-line-h)
  );
  background-size:100% var(--msh-line-h);
  background-position:0 calc(var(--msh-line-h) * 0.85);
}
.msh-text .mw{cursor:pointer;transition:color .1s,background .1s;display:inline;padding:0 1px;border-radius:2px}
.msh-text .mw:hover{color:var(--teal);background:rgba(14,165,160,.12)}

/* Word highlighted during audio playback */
.msh-text .mw.wp{
  color:#fff!important;
  font-weight:700;
  background:var(--teal)!important;
  border-radius:3px;
  box-shadow:0 0 0 2px rgba(14,165,160,.4);
  padding:0 3px;
  transition:background .08s,color .08s;
}
.msh-text .mw.msh-other{opacity:.45}
.msh-text .mw.msh-cur{opacity:1}
/* Per-word span inside a verse — for word-level highlighting */
.msh-text .mw-w{
  display:inline;
  border-radius:3px;
  transition:background .06s,color .06s;
  cursor:pointer;
  padding:0 1px;
}
.msh-text .mw-w:hover{background:rgba(14,165,160,.15);color:var(--teal)}
.msh-text .mw-w.wp{
  background:var(--teal)!important;
  color:#fff!important;
  border-radius:3px;
  padding:0 2px;
  box-shadow:0 0 0 1px rgba(14,165,160,.5);
}
/* Sajdah marker */
.msh-sajdah{
  display:inline-block;
  background:rgba(14,165,160,.15);
  border:1px solid var(--teal);
  border-radius:3px;
  padding:0 3px;
  font-size:.7em;
  color:var(--teal);
  vertical-align:super;
  margin:0 2px;
}
/* Juz start banner — shown at beginning of new juz */
.msh-juz-start{
  text-align:center;
  font-family:'Amiri',serif;
  font-size:.78rem;
  color:var(--msh-frame,#b8960c);
  border:1px solid var(--msh-frame,#b8960c);
  border-radius:6px;
  padding:3px 12px;
  margin:4px auto 5px;
  display:block;
  width:fit-content;
  background:rgba(184,150,12,.06);
  letter-spacing:.5px;
}
/* Rub el-Hizb marker */
.msh-hizb{
  font-size:.72em;
  color:var(--msh-frame,#b8960c);
  vertical-align:middle;
  margin:0 2px;
}


/* Ayah number medal — circular like real Quran */
/* Verse end marker — ornamental rosette like printed Quran (screenshot style) */
.msh-ayah-n{
  /* Use the Quran font's own ornamental end mark character */
  font-family:'AmiriQuran','Amiri Quran','Amiri',serif;
  color:#1a1209;
  font-size:.9em;
  cursor:pointer;
  display:inline-block;
  vertical-align:middle;
  margin:0 3px;
  /* Render as the Quran ornament ۝ U+06DD with number inside */
  /* We show the number inside a decorative ring */
  position:relative;
  line-height:1;
  transition:opacity .12s;
  /* No border/background — the character itself IS the circle */
  border:none;
  background:none;
  width:auto;height:auto;
  border-radius:0;
}
.msh-ayah-n:hover{opacity:.7}
[data-dark="1"] .msh-ayah-n{color:#e8d5a0}

/* Juz / hizb divider line */
.msh-juz-marker{
  text-align:right;font-family:'Amiri',serif;font-size:.75rem;
  color:var(--gold);padding:2px 2px;opacity:.8;
  font-style:italic;
}
.msh-loading{text-align:center;padding:80px 20px;color:var(--mu)}

/* Responsive */
@media(max-width:480px){
  /* ── PHONE MUSHAF: full-bleed like images 1 & 2 ── */
  /* Strip ALL decorative frame/shadow/border — real Mushaf apps are edge-to-edge */
  .msh-page{
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* No corner ornaments on phone */
  .msh-page::before,.msh-page::after{ display:none !important }
  /* Remove inner border decorations */
  .msh-inner::before,.msh-inner::after{ display:none !important }
  /* Tight padding so text nearly fills screen — like image 1 */
  .msh-inner{ padding: 8px 12px 12px !important }
  /* Scale font so lines are dense — fills screen like a real phone Quran app */
  :root{
    --msh-font-sz: clamp(0.9rem, 4.2vw, 1.1rem);
    --msh-line-h: 2.45em;
  }
  .msh-text{
    min-height: unset !important;
    font-size: var(--msh-font-sz) !important;
    line-height: var(--msh-line-h) !important;
    word-spacing: 0.1em !important;
  }
  /* Bismillah slightly smaller */
  .msh-bism{ font-size: 1.05rem }
  /* msh-wrap fills whole screen width */
  .msh-wrap{ overflow-x: hidden; background: var(--msh-paper) }
  .msh-content-single{ padding: 0 0 80px }
  /* Tighter header */
  .msh-hd{ padding-bottom:5px; margin-bottom:8px }
  .msh-hd-juz,.msh-hd-pg,.msh-hd-name{ font-size:.7rem }
  /* Surah title compact */
  .msh-surah-title{ padding:8px 12px; margin:8px 0 4px }
  .msh-surah-nm{ font-size:1.2rem }
  .msh-ayah-n{ font-size:.72rem }
}
@media(max-width:600px){
  /* Settings panel full width on very small screens */
  .spanel{right:8px;left:8px;width:auto;max-width:none}
  /* Mobile sidebar overlay — add if missing */
}

/* AUDIO BAR — full redesign */
/* ═══════════════════════════════════════════════════
   PREMIUM AUDIO PLAYER BAR
   ═══════════════════════════════════════════════════ */
.abar{
  position:fixed;bottom:0;left:0;right:0;
  background:rgba(7,10,20,.97);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border-top:1px solid rgba(14,165,160,.35);
  color:#fff;
  padding:0 16px;
  height:72px;
  display:none;
  grid-template-columns:minmax(150px,20%) 1fr minmax(160px,20%);
  align-items:center;
  gap:0;
  z-index:2000;
  transition:transform .35s cubic-bezier(.16,1,.3,1);
  box-shadow:0 -1px 0 rgba(14,165,160,.25),0 -12px 40px rgba(0,0,0,.75);
}
/* Mobile: flush at bottom */
@media(max-width:768px){
  .abar{
    bottom:0;
    border-radius:0;
    height:72px;
    padding:0 10px;
  }
  body.audio-playing .qc,
  body.audio-playing #vlist{
    padding-bottom:88px !important;
  }
}
.abar.on{display:grid;animation:abarSlideUp .38s cubic-bezier(.16,1,.3,1)}
@keyframes abarSlideUp{from{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}
.abar::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(14,165,160,.06) 0%,transparent 40%,transparent 60%,rgba(78,205,196,.04) 100%);
  pointer-events:none;
}
/* .abar.on display:grid defined in .abar block above */

/* LEFT SECTION */
.ab-left{display:flex;align-items:center;gap:10px;min-width:0;padding-right:10px}
.ab-avatar{
  width:36px;height:36px;border-radius:8px;flex-shrink:0;
  background:linear-gradient(135deg,#0ea5a0,#0a3a35);
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:rgba(255,255,255,.8);
  box-shadow:0 2px 10px rgba(14,165,160,.25);
  transition:all .3s;
}
.abar.on .ab-avatar{animation:pulse-glow 2.5s ease-in-out infinite}
@keyframes pulse-glow{
  0%,100%{box-shadow:0 2px 10px rgba(14,165,160,.25)}
  50%{box-shadow:0 2px 18px rgba(14,165,160,.55),0 0 28px rgba(14,165,160,.12)}
}
.ab-reciter{display:flex;flex-direction:column;min-width:0;flex-shrink:1}
.ab-rec-name{font-size:.68rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:.15px}
.ab-rec-sub{font-size:.58rem;color:rgba(255,255,255,.38);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}

/* CENTER SECTION */
.ab-center{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}

.ab-verse-info{display:flex;align-items:center;gap:8px;max-width:100%;overflow:hidden}
.ab-verse-ref{font-size:.7rem;font-weight:700;color:var(--teal);letter-spacing:.8px;white-space:nowrap;flex-shrink:0}
.ab-verse-preview{font-family:'Amiri',serif;font-size:.85rem;color:rgba(255,255,255,.55);direction:rtl;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}

.ab-controls{display:flex;align-items:center;gap:5px}
.ab-btn{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.65);
  border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s ease;flex-shrink:0;
}
.ab-btn:hover{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.18);transform:scale(1.07)}
.ab-btn.on{color:var(--teal)!important;background:rgba(14,165,160,.18)!important;border-color:rgba(14,165,160,.4)!important}
.ab-btn-sm{width:30px;height:30px;font-size:.75rem}
.ab-btn-xs{width:27px;height:27px;font-size:.7rem}
.ab-play{
  width:40px!important;height:40px!important;font-size:.9rem!important;
  background:linear-gradient(135deg,var(--teal),#0c8f8a)!important;
  color:#fff!important;
  border:none!important;
  box-shadow:0 3px 14px rgba(14,165,160,.45);
}
.ab-play:hover{
  background:linear-gradient(135deg,#11c4bf,var(--teal))!important;
  box-shadow:0 5px 20px rgba(14,165,160,.6)!important;
  transform:scale(1.08)!important;
}

/* ══ PROGRESS ROW ══════════════════════════════════════════════════════════ */
.ab-prog-wrap{display:flex;align-items:center;gap:8px;width:100%;position:relative}
.ab-time{
  font-size:.8rem;font-weight:700;
  color:rgba(255,255,255,.92);
  font-family:'JetBrains Mono',monospace;
  white-space:nowrap;min-width:40px;
  letter-spacing:.4px;flex-shrink:0;
  text-align:center;
}

/* ── WAVEFORM + SCRUBBER CONTAINER ────────────────────────────────────── */
.ab-prog-container{
  flex:1;position:relative;cursor:pointer;
  display:flex;flex-direction:column;gap:4px;
  padding:2px 0;user-select:none;-webkit-user-select:none;
}

/* ── WAVEFORM BARS — Quran.com style, live above scrubber ─────────────── */
.ab-waveform{
  width:100%;height:44px;
  display:flex;align-items:flex-end;gap:1.5px;
  pointer-events:none;position:relative;
  border-radius:4px;overflow:hidden;
}
.ab-wbar{
  flex:1;
  background:rgba(255,255,255,.28);
  border-radius:2px 2px 0 0;
  min-height:4px;max-height:42px;
  transition:background .07s,transform .07s;
  transform-origin:bottom;
}
.ab-wbar.played{
  background:rgba(14,165,160,.95);
}
.ab-wbar.playing-now{
  background:#5ee7df;
  animation:wbar-bounce .4s ease-in-out infinite alternate;
}
@keyframes wbar-bounce{
  from{transform:scaleY(1)}
  to{transform:scaleY(1.4);background:#a8f5f1}
}

/* ── SCRUBBER TRACK ────────────────────────────────────────────────────── */
.ab-bar-track{
  width:100%;height:5px;border-radius:6px;
  background:rgba(255,255,255,.18);
  position:relative;overflow:visible;
  transition:height .15s ease;
  flex-shrink:0;
  cursor:pointer;
  padding:12px 0;
  margin:-12px 0;
}
.ab-prog-container:hover .ab-bar-track,
.ab-prog-container.dragging .ab-bar-track{height:8px}

.ab-fill{
  height:100%;border-radius:6px;position:relative;
  background:linear-gradient(90deg,#0ea5a0,#4ecdc4);
  transition:width .08s linear;
}
/* Remove shimmer — it fights the real-time update */
.ab-fill-glow{display:none}

/* ── SCRUBBER THUMB ────────────────────────────────────────────────────── */
.ab-thumb{
  position:absolute;
  top:50%;transform:translate(50%,-50%) scale(0);
  width:14px;height:14px;border-radius:50%;
  background:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.5),0 0 0 2px rgba(14,165,160,.6);
  transition:transform .15s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;right:0;
  z-index:2;
}
.ab-prog-container:hover .ab-thumb,
.ab-prog-container.dragging .ab-thumb{
  transform:translate(50%,-50%) scale(1);
}

/* RIGHT SECTION */
.ab-right{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding-left:12px}
.ab-vol-group{display:flex;align-items:center;gap:6px}
.ab-vol-track{width:72px;position:relative}
.ab-vol{
  -webkit-appearance:none;appearance:none;
  width:100%;height:4px;border-radius:4px;
  background:rgba(255,255,255,.15);cursor:pointer;outline:none;
  transition:height .15s;
}
.ab-vol:hover{height:6px}
.ab-vol::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:13px;height:13px;border-radius:50%;
  background:#fff;cursor:pointer;
  box-shadow:0 0 6px rgba(14,165,160,.7),0 2px 4px rgba(0,0,0,.3);
  transition:transform .15s;
}
.ab-vol::-webkit-slider-thumb:hover{transform:scale(1.2)}
.ab-vol::-moz-range-thumb{
  width:13px;height:13px;border-radius:50%;border:none;
  background:#fff;cursor:pointer;
  box-shadow:0 0 6px rgba(14,165,160,.7);
}
/* Show fill color on the track using gradient */
.ab-vol{
  background:linear-gradient(to right, var(--teal) 0%, var(--teal) var(--vol-pct,100%), rgba(255,255,255,.15) var(--vol-pct,100%));
}

.ab-spd-group select.ab-spd{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.7);
  padding:5px 8px;border-radius:8px;font-size:.68rem;
  cursor:pointer;outline:none;font-family:inherit;
  transition:all .15s;appearance:none;
  text-align:center;min-width:38px;
}
.ab-spd-group select.ab-spd:hover,.ab-spd-group select.ab-spd:focus{
  background:rgba(14,165,160,.2);border-color:var(--teal);color:#fff;
}
.ab-close{color:rgba(255,255,255,.25)!important}
.ab-close:hover{color:rgba(255,255,255,.75)!important;background:rgba(255,100,100,.15)!important;border-color:rgba(255,100,100,.3)!important}

/* More menu — upgraded */
.ab-more-menu{
  position:fixed;bottom:100px;right:16px;
  background:rgba(8,12,22,.98);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.13);
  border-radius:16px;padding:6px 0;
  min-width:220px;max-height:75vh;overflow-y:auto;
  box-shadow:0 -4px 50px rgba(0,0,0,.7),0 0 0 1px rgba(14,165,160,.18);
  display:none;z-index:9999;
  animation:slideUpIn .2s cubic-bezier(.16,1,.3,1);
}
@keyframes slideUpIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.ab-more-menu.on{display:block}
/* Sub-section label */
.ab-mi-sub{font-size:.58rem;color:rgba(255,255,255,.3);padding:8px 16px 3px;
  text-transform:uppercase;letter-spacing:1.3px;font-weight:700;
  display:flex;align-items:center;gap:6px;border-top:1px solid rgba(255,255,255,.06);margin-top:3px}
.ab-mi-sub:first-child{border-top:none;margin-top:0}
.ab-mi{display:flex;align-items:center;gap:10px;padding:9px 16px;color:rgba(255,255,255,.75);font-size:.78rem;cursor:pointer;transition:all .12s;font-family:'Crimson Pro',serif}
.ab-mi:hover{background:rgba(255,255,255,.07);color:#fff}
.ab-mi i{width:16px;color:var(--teal);font-size:.78rem;text-align:center}
.ab-mi.on{color:var(--teal)!important}
.ab-mi-sep{height:1px;background:rgba(255,255,255,.07);margin:4px 0}
/* .ab-mi-sub defined in ab-more-menu block above */

/* Download button in audio bar */
.ab-dl-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);padding:4px 9px;border-radius:7px;font-size:.68rem;cursor:pointer;white-space:nowrap;transition:all .15s;font-family:inherit;display:flex;align-items:center;gap:4px}
.ab-dl-btn:hover{background:rgba(14,165,160,.35);border-color:var(--teal);color:#fff}

/* Surah-level playback progress strip */
.ab-surah-prog{
  width:100%;height:3px;border-radius:3px;
  background:rgba(255,255,255,.08);
  position:relative;overflow:hidden;
  margin-top:2px;display:flex;align-items:center;
}
.ab-surah-fill{
  height:100%;border-radius:3px;
  background:linear-gradient(90deg,rgba(14,165,160,.5),rgba(78,205,196,.7));
  transition:width .5s ease;
}
.ab-surah-lbl{
  position:absolute;right:0;
  font-size:.56rem;font-weight:700;
  color:rgba(255,255,255,.35);
  font-family:'JetBrains Mono',monospace;
  letter-spacing:.3px;white-space:nowrap;
  pointer-events:none;
}

/* Repeat modal tabs */
.rm-tab{
  flex:1;padding:8px 6px;border:none;border-radius:9px;
  font-size:.75rem;font-weight:700;cursor:pointer;
  background:transparent;color:var(--mu);
  font-family:inherit;transition:all .15s;
}
.rm-tab.on{background:var(--wh);color:var(--tx);
  box-shadow:0 2px 8px rgba(0,0,0,.12);}
.rm-row{display:flex;align-items:center;gap:10px;font-size:.85rem;font-weight:600}
.rm-lbl{flex:1;color:var(--tx)}
.rm-counter{display:flex;align-items:center;gap:0;
  border:1.5px solid var(--bd);border-radius:10px;overflow:hidden}
.rm-counter button{
  width:32px;height:32px;border:none;background:var(--bg);
  color:var(--tx);font-size:1.1rem;cursor:pointer;
  font-weight:700;line-height:1;transition:background .1s;
}
.rm-counter button:hover{background:var(--teal);color:#fff}
.rm-counter span{
  min-width:32px;text-align:center;font-weight:700;
  font-family:'JetBrains Mono',monospace;font-size:.9rem;
  border-left:1.5px solid var(--bd);border-right:1.5px solid var(--bd);
  padding:6px 4px;
}

@media(max-width:900px){
  .abar{grid-template-columns:auto 1fr auto;padding:0 10px;height:68px}
  .ab-left{padding-right:8px}
  .ab-avatar{width:32px;height:32px;font-size:.82rem}
  .ab-verse-preview{display:none}
  .ab-vol-track{width:46px}
}

/* ── MOBILE: clean single-row compact player ──────────────────────────── */
@media(max-width:600px){
  /* On mobile sit above base nav */
  .abar{
    bottom:60px;
    border-radius:14px 14px 0 0;
    height:auto;
    padding:8px 12px 10px;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  /* Row 1: reciter name left | close+more right */
  .ab-left{padding-right:0;gap:6px;flex:1;min-width:0}
  .ab-avatar{display:none}
  .ab-rec-name{font-size:.72rem}
  .ab-rec-sub{font-size:.6rem}
  .ab-verse-preview{display:none}
  .ab-verse-ref{font-size:.62rem}

  /* Row 2: controls centered */
  .ab-center{width:100%;gap:4px}
  .ab-controls{gap:6px;justify-content:center}
  .ab-play{width:40px!important;height:40px!important;font-size:.9rem!important}
  .ab-btn-sm{width:32px!important;height:32px!important;font-size:.75rem!important}

  /* Row 3: slim progress bar ONLY — hide waveform on mobile */
  .ab-prog-wrap{gap:6px}
  .ab-waveform{display:none}          /* ← removes the duplicate bar */
  .ab-bar-track{height:4px;border-radius:4px}
  .ab-time{font-size:.62rem;min-width:30px}

  /* Hide volume/speed — tap mute works fine */
  .ab-vol-group,.ab-spd-group{display:none}

  /* Simple grid: name+sub top row, center below */
  .abar{
    display:flex;flex-direction:column;
  }
  .ab-right{padding-left:0;gap:6px;flex-direction:row;align-self:flex-end}
  .ab-more-menu{right:8px;bottom:120px;min-width:190px}
}

/* ════ BOOKMARK DRAWER ═══════════════════════════════════════════════════ */
.bm-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:3500;
  opacity:0;pointer-events:none;transition:opacity .2s;
}
.bm-overlay.on{opacity:1;pointer-events:auto}
.bm-drawer{
  position:fixed;top:0;right:-340px;width:320px;max-width:92vw;
  height:100vh;background:var(--wh);
  z-index:3600;box-shadow:-4px 0 24px rgba(0,0,0,.18);
  transition:right .3s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;overflow:hidden;
}
.bm-drawer.on{right:0}
[data-dark="1"] .bm-drawer{background:var(--card-bg)}
.bm-drawer-hd{
  padding:16px 16px 12px;
  border-bottom:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
}
.bm-drawer-title{font-size:.95rem;font-weight:800;color:var(--tx)}
.bm-drawer-close{
  background:none;border:none;color:var(--mu);cursor:pointer;
  font-size:1rem;padding:4px 8px;border-radius:8px;transition:background .15s;
}
.bm-drawer-close:hover{background:var(--bg)}
.bm-list{flex:1;overflow-y:auto;padding:8px 0}
.bm-empty{
  padding:40px 20px;text-align:center;
  color:var(--mu);font-size:.85rem;
}
.bm-empty i{font-size:2rem;display:block;margin-bottom:10px;color:var(--bd)}
.bm-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;cursor:pointer;
  border-bottom:1px solid rgba(0,0,0,.05);
  transition:background .12s;
}
.bm-item:hover{background:var(--bg)}
[data-dark="1"] .bm-item:hover{background:rgba(255,255,255,.04)}
.bm-item-icon{
  width:34px;height:34px;border-radius:8px;flex-shrink:0;
  background:var(--teal-p);color:var(--teal);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;
}
.bm-item-info{flex:1;min-width:0}
.bm-item-ref{font-size:.8rem;font-weight:700;color:var(--tx)}
.bm-item-name{font-size:.68rem;color:var(--mu);margin-top:1px}
.bm-item-del{
  background:none;border:none;color:var(--mu);cursor:pointer;
  font-size:.78rem;padding:4px 6px;border-radius:6px;
  opacity:0;transition:opacity .15s,color .15s;
}
.bm-item:hover .bm-item-del{opacity:1}
.bm-item-del:hover{color:#ef4444}

/* SETTINGS PANEL — canonical .spanel, .sp-hd, .sp-title, .sp-close in SETTINGS PANEL REDESIGN section below */
.sp-body{padding:13px 16px 20px}
.sp-sec{margin-bottom:16px}
.sp-sec-t{font-size:.67rem;font-weight:700;text-transform:uppercase;letter-spacing:1.3px;color:var(--mu);margin-bottom:9px;padding-bottom:5px;border-bottom:1px solid var(--bd)}
.sp-row{margin-bottom:10px}
.sp-lbl{font-size:.76rem;font-weight:700;color:var(--tx);display:block;margin-bottom:6px}
.sp-btns{display:flex;gap:4px;flex-wrap:wrap}
.sp-btn{padding:5px 11px;border:1px solid var(--bd);border-radius:8px;font-size:.75rem;font-weight:700;cursor:pointer;background:var(--bg);color:var(--mu);transition:all .15s;font-family:inherit}
.sp-btn:hover,.sp-btn.on{background:var(--teal);border-color:var(--teal);color:#fff}
.sp-sel{width:100%;padding:7px 10px;border:1px solid var(--bd);border-radius:9px;font-size:.82rem;background:var(--bg);color:var(--tx);outline:none;cursor:pointer;font-family:inherit}
.sp-sel:focus{border-color:var(--teal)}
.sp-tr{display:flex;align-items:center;justify-content:space-between;padding:6px 0}
.sp-tr-lbl{font-size:.8rem;color:var(--tx);display:flex;align-items:center;gap:6px}
.sp-tr-lbl i{color:var(--mu);font-size:.77rem;width:14px}
/* [.sw toggle moved to canonical block below] */
.sp-prev{background:var(--bg);border:1px solid var(--bd);border-radius:10px;padding:12px;text-align:right;direction:rtl;font-family:var(--font-ar);font-size:var(--ar-sz);color:var(--tx);margin-top:7px;line-height:2.8;transition:font-size .2s,font-family .2s;max-height:80px;overflow:hidden}

/* SURAH NAV — canonical .snav, .sn-btn in SURAH NAV section below */

/* IN-SEARCH BAR */
/* [.isbar moved to canonical block below] */

/* READING PROGRESS — canonical definition below, duplicate removed */

/* LOADER */
.qload{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:12px;color:var(--mu)}
.qspin{width:44px;height:44px;border:4px solid var(--bd);border-top-color:var(--teal);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 16px}

/* ── TOAST — premium notifications ── */
.toast{
  position:fixed;bottom:calc(108px + env(safe-area-inset-bottom, 0px));left:50%;
  transform:translateX(-50%) translateY(18px);
  background:rgba(15,23,42,.95);
  backdrop-filter:blur(12px);
  color:#fff;padding:10px 22px;border-radius:30px;
  font-size:.82rem;font-weight:600;
  z-index:700;opacity:0;
  transition:all .28s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none;white-space:nowrap;
  box-shadow:0 8px 30px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.06);
  display:flex;align-items:center;gap:6px;
  font-family:'Crimson Pro',serif;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:rgba(127,29,29,.96);box-shadow:0 8px 30px rgba(127,29,29,.4)}
.toast.success{background:rgba(4,120,87,.96)}

/* FULLSCREEN MODE */
.fs-mode .qtop,.fs-mode .qs,.fs-mode .vbar,.fs-mode .snav{display:none!important}
.fs-mode .ql{min-height:100vh}
.fs-mode .qc{max-width:100%}
.fs-btn-exit{position:fixed;top:10px;right:10px;z-index:9999;background:rgba(0,0,0,.7);color:#fff;border:none;border-radius:8px;padding:7px 13px;cursor:pointer;font-size:.8rem;display:none}
.fs-mode .fs-btn-exit{display:flex;align-items:center;gap:5px}
/* MUSHAF FULLSCREEN — true immersive mode */
.fs-mode .msh-wrap{background:var(--msh-bg,var(--msh-paper));min-height:100vh}
.fs-mode .msh-nav{display:none!important}
.fs-mode .msh-swipe-hint{display:none!important}
.fs-mode #msh-trans-bar{bottom:env(safe-area-inset-bottom,16px)}
/* On desktop fullscreen: center the page nicely with natural padding */
.fs-mode .msh-page{
  margin:0 auto;
  max-width:min(600px,100vw);
  min-height:100vh;
  border-radius:0;
  box-shadow:none;
  border:none;
}
/* On mobile fullscreen: full width, no margins */
@media(max-width:600px){
  .fs-mode .msh-page{
    max-width:100vw;
    min-height:100dvh;
  }
}
/* Mobile fullscreen touch nav overlay */
.msh-touch-nav{
  display:none;
  position:fixed;
  inset:0;
  z-index:50;
  pointer-events:none;
}
.fs-mode .msh-touch-nav{display:grid;grid-template-columns:1fr 1fr;pointer-events:auto}
.msh-touch-zone{
  height:100%;
  opacity:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
/* Floating page indicator in fullscreen */
.msh-fs-indicator{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(0);
  background:rgba(0,0,0,.7);
  color:#fff;
  padding:10px 20px;
  border-radius:20px;
  font-size:1.1rem;
  font-weight:700;
  font-family:'JetBrains Mono',monospace;
  z-index:9999;
  pointer-events:none;
  transition:transform .15s,opacity .4s;
  opacity:0;
}
.msh-fs-indicator.on{transform:translate(-50%,-50%) scale(1);opacity:1}

/* MUSHAF LINES — ruled paper effect */
.msh-text{background-image:repeating-linear-gradient(to bottom,transparent,transparent calc(1lh + 20px),rgba(201,162,39,.15) calc(1lh + 20px),rgba(201,162,39,.15) calc(1lh + 21px));background-size:100% calc(1lh + 21px)}
[data-dark="1"] .msh-text{background-image:repeating-linear-gradient(to bottom,transparent,transparent calc(1lh + 20px),rgba(201,162,39,.08) calc(1lh + 20px),rgba(201,162,39,.08) calc(1lh + 21px))}

/* TAJWEED COLORED FONT MODE */
[data-font="tajweed"] /* .ar-text font for tajweed mode only */
/* data-rule attribute selectors (original) */
[data-font="tajweed"] .qw[data-rule="ghunna"]{color:#10b981}
[data-font="tajweed"] .qw[data-rule="ikhfa"]{color:#3b82f6}
[data-font="tajweed"] .qw[data-rule="madd"]{color:#ef4444}
[data-font="tajweed"] .qw[data-rule="qalqala"]{color:#8b5cf6}
[data-font="tajweed"] .qw[data-rule="idgham"]{color:#f97316}
/* Class-based tajweed colors — set by wrapW() JS function */
[data-font="tajweed"] .qw.tj-ghunna{color:#10b981!important;text-shadow:0 0 8px rgba(16,185,129,.4)}
[data-font="tajweed"] .qw.tj-ikhfa{color:#3b82f6!important;text-shadow:0 0 8px rgba(59,130,246,.4)}
[data-font="tajweed"] .qw.tj-madd{color:#ef4444!important;text-shadow:0 0 8px rgba(239,68,68,.4)}
[data-font="tajweed"] .qw.tj-qalqala{color:#8b5cf6!important;text-shadow:0 0 8px rgba(139,92,246,.4)}
[data-font="tajweed"] .qw.tj-idgham{color:#f97316!important;text-shadow:0 0 8px rgba(249,115,22,.4)}
/* Tajweed legend — V13 FIX: add top border so it clearly separates from verses */
.tjwd-legend{display:none;flex-wrap:wrap;gap:6px;padding:8px 12px;background:var(--bg);border-top:2px solid var(--teal);border-bottom:1px solid var(--bd);font-size:.68rem;margin-top:4px}
[data-font="tajweed"] .tjwd-legend{display:flex}
.tjwd-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:3px}

/* ══ PREMIUM EXTRAS ══════════════════════════════════════════ */

/* Surah header gradient decoration */
.surah-deco{
  position:absolute;top:0;right:0;width:200px;height:100%;
  background:radial-gradient(ellipse at 100% 50%,rgba(14,165,160,.08),transparent 70%);
  pointer-events:none;
}

/* Verse actions — more polished */
.vt-acts .va{
  transition:all .16s;border-radius:8px;
  border:1px solid transparent;
}
.vt-acts .va:hover{
  background:var(--teal-p);
  border-color:rgba(14,165,160,.2);
  color:var(--teal);transform:translateY(-1px);
}
.vt-acts .va.bm-on{color:var(--gold)!important}

/* Verse number badge — diamond style */
.vt-num{
  background:linear-gradient(135deg,var(--teal-p),rgba(14,165,160,.15));
  border:1px solid rgba(14,165,160,.25);
  color:var(--teal);border-radius:8px;
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;cursor:pointer;
  transition:all .16s;flex-shrink:0;
  font-family:'JetBrains Mono',monospace;
}
.vi.playing .vt-num{background:var(--teal);color:#fff;box-shadow:0 3px 10px rgba(14,165,160,.4)}
.vt-num:hover{background:var(--teal);color:#fff;transform:scale(1.1)}
.vt-num:hover .vt-num-n::after{content:' 🔗';font-size:.65em;vertical-align:middle;opacity:.85}
.vt-num.vt-num-copied{background:#10b981!important;color:#fff!important;transform:scale(1.25)!important;box-shadow:0 4px 16px rgba(16,185,129,.45)!important;transition:all .15s!important}

/* Arabic text — premium rendering */
/* .ar-text, .tr-txt — canonical definitions in VERSE CARD REDESIGN section below */

/* Translation text */
.tr-txt{
  font-size:.9rem;
  line-height:1.85;
  color:var(--mu);
  padding:2px 0 8px;
  transition:all .3s;
}

/* .vi-ext duplicate removed — canonical in VERSE CARD REDESIGN section */
@keyframes fadeDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

/* Sidebar polish */
.qs-item.cur{
  background:var(--teal-p)!important;
  border-left:3px solid var(--teal);
  color:var(--teal)!important;
}
.qs-item.cur .qs-en{color:var(--teal)!important;font-weight:700}
.qs-item.cur .qs-ar{color:var(--teal)!important}

/* Loader — better looking */
/* Playing verse — animated left border */
@keyframes borderPulse{0%,100%{opacity:1}50%{opacity:.4}}
.vi.playing{border-left-color:var(--teal)!important;animation:none}

/* Highlight pill improvements */
.hl-yellow{background:rgba(250,204,21,.12)!important;border-left-color:#ca8a04!important}
.hl-green{background:rgba(16,185,129,.1)!important;border-left-color:#059669!important}
.hl-blue{background:rgba(59,130,246,.1)!important;border-left-color:#2563eb!important}
.hl-pink{background:rgba(236,72,153,.1)!important;border-left-color:#db2777!important}
.hl-purple{background:rgba(139,92,246,.1)!important;border-left-color:#7c3aed!important}
.hl-orange{background:rgba(249,115,22,.1)!important;border-left-color:#ea580c!important}

/* Reading progress bar — canonical definition in .rbar section below */

/* ── Sepia reading theme */
[data-theme="sepia"]{--bg:#f6f0e4;--wh:#fdf8ee;--tx:#3b2a1a;--bd:#d4bfa0;--mu:#7a6040;--card-bg:#fdf8ee;--surf:#fdf8ee}
[data-theme="sepia"] .qtop,[data-theme="sepia"] .qs,[data-theme="sepia"] .vbar{background:var(--wh)!important}
/* Audio bar stays dark in sepia — white text would be invisible on cream */
[data-theme="sepia"] .abar{background:rgba(8,12,22,.97)!important}

/* Download button in audio bar */
.ab-dl-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.8);padding:4px 9px;border-radius:7px;font-size:.68rem;cursor:pointer;white-space:nowrap;transition:all .15s;font-family:inherit;display:flex;align-items:center;gap:4px}
.ab-dl-btn:hover{background:rgba(14,165,160,.35);border-color:var(--teal);color:#fff}
/* ab-more-menu, ab-mi, ab-mi-sep, ab-mi-sub — canonical definitions above */

/* ── VERSE CARDS — premium look ── */
/* .vi, .vi:hover, .vi.playing — canonical definitions in VERSE CARD REDESIGN section below */

/* Sidebar Juz jump strip */
.qs-juz{display:flex;flex-wrap:wrap;gap:3px;padding:8px 10px;border-bottom:1px solid var(--bd);background:var(--bg)}
.qs-juz-lbl{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--mu);width:100%;margin-bottom:4px}
.qs-juz-btn{font-size:.62rem;font-weight:700;padding:2px 6px;border-radius:5px;background:var(--wh);border:1px solid var(--bd);cursor:pointer;color:var(--mu);transition:all .12s;font-family:inherit}
.qs-juz-btn:hover{background:var(--teal);border-color:var(--teal);color:#fff}

/* Recent surahs strip */
.qs-recent{padding:7px 10px;border-bottom:1px solid var(--bd)}
.qs-recent-t{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--mu);margin-bottom:5px}
.qs-recent-row{display:flex;gap:4px;flex-wrap:wrap}
.qs-recent-chip{font-size:.68rem;padding:3px 9px;background:var(--teal-p);border:1px solid rgba(14,165,160,.2);border-radius:8px;color:var(--teal);cursor:pointer;font-weight:600;text-decoration:none;white-space:nowrap;transition:all .12s;display:inline-block}
.qs-recent-chip:hover{background:var(--teal);color:#fff}

/* Meccan/Medinan badge in sidebar */
.qs-mec{font-size:.52rem;font-weight:700;padding:1px 5px;border-radius:4px;flex-shrink:0;margin-left:auto}
.qs-mec.meccan{background:rgba(230,81,0,.12);color:#c2410c}
.qs-mec.medinan{background:rgba(21,101,192,.12);color:#1d4ed8}

/* WORD TOOLTIP — upgraded with 3-dot menu */
/* .wtip intermediate duplicate removed — canonical in WORD TOOLTIP section */

/* TRANSLATION-ONLY PAGE MODE */
.tro-mode .ar-text,.tro-mode .wbw,.tro-mode .vi-ext,.tro-mode .vt-acts{display:none!important}
.tro-mode .vtr{border-top:none;padding-top:0;margin-top:0}
.tro-mode .vi{padding:14px 20px}

/* COLOR CODING per verse */
.vi.cc-1{background:rgba(249,202,36,.08)!important}
.vi.cc-2{background:rgba(16,185,129,.08)!important}
.vi.cc-3{background:rgba(59,130,246,.08)!important}
.vi.cc-4{background:rgba(236,72,153,.08)!important}
.vi.cc-5{background:rgba(139,92,246,.08)!important}
.vi.cc-6{background:rgba(249,115,22,.08)!important}
.vi.cc-7{background:rgba(20,184,166,.08)!important}

/* VERSE COLOR CODING PANEL */
.vcc-row{display:flex;gap:4px;align-items:center;margin-top:6px;flex-wrap:wrap}
.vcc-chip{width:20px;height:20px;border-radius:50%;cursor:pointer;border:2px solid transparent;flex-shrink:0;transition:transform .12s}
.vcc-chip:hover{transform:scale(1.3);border-color:rgba(0,0,0,.25)}
.vcc-chip.on{border-color:rgba(0,0,0,.4);transform:scale(1.2)}

/* ════ MUSHAF ENHANCED ══════════════════════════════════════════ */

/* NAV BAR */
.msh-nav{display:grid;grid-template-columns:auto 1fr auto;align-items:center;padding:10px 14px;background:var(--wh);border-bottom:1px solid var(--bd);gap:8px}
.msh-page-info{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.msh-pg-label{font-size:.78rem;font-weight:700;color:var(--mu)}
.msh-pg-total{font-size:.78rem;color:var(--mu);font-family:'Amiri',serif}
.msh-nav-tools{display:flex;gap:3px;margin-left:4px}
.msh-tool-btn{width:30px;height:30px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--mu);cursor:pointer;font-size:.75rem;display:flex;align-items:center;justify-content:center;transition:all .15s}
.msh-tool-btn:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.msh-tool-btn.on{background:var(--teal);border-color:var(--teal);color:#fff}

/* NAV BUTTONS */
.msh-nav-btn{padding:7px 14px;border:1px solid var(--bd);border-radius:9px;font-size:.78rem;font-weight:700;cursor:pointer;background:var(--bg);color:var(--mu);transition:all .15s;display:flex;align-items:center;gap:5px;font-family:inherit;white-space:nowrap}
.msh-nav-btn:hover:not(:disabled){background:var(--teal);border-color:var(--teal);color:#fff}
.msh-nav-btn:disabled{opacity:.3;cursor:not-allowed}

/* Swipe hint */
.msh-swipe-hint{font-size:.7rem;color:var(--mu);text-align:center;padding:5px;opacity:.5}

/* Page input */
.msh-pi{width:50px;padding:4px 6px;border:1px solid var(--bd);border-radius:7px;font-size:.8rem;text-align:center;outline:none;background:var(--bg);color:var(--tx);font-family:'JetBrains Mono',monospace;font-weight:700}
.msh-pi:focus{border-color:var(--teal);box-shadow:0 0 0 2px rgba(14,165,160,.15)}

/* SINGLE page */
.msh-content-single{padding:16px 12px 120px}
/* Duplicate .msh-page, .msh-inner, .msh-hd etc removed — defined once above */

/* Ruled lines */
.msh-text.msh-lines{
  background-image:repeating-linear-gradient(to bottom,transparent,transparent calc(1lh + 18px),rgba(201,162,39,.13) calc(1lh + 18px),rgba(201,162,39,.13) calc(1lh + 19px));
  background-size:100% calc(1lh + 19px);
}
[data-dark="1"] .msh-text.msh-lines{
  background-image:repeating-linear-gradient(to bottom,transparent,transparent calc(1lh + 18px),rgba(201,162,39,.07) calc(1lh + 18px),rgba(201,162,39,.07) calc(1lh + 19px));
}

/* TWO-PAGE SPREAD — RTL Quran book layout */
.msh-content-spread{padding:16px 12px 120px;position:relative}
@media(min-width:1100px){
  .msh-content-spread{
    position:relative;
    padding:0;display:grid;
    grid-template-columns:1fr 1fr;
    /* direction:rtl makes col 1 (first child) render on the RIGHT — correct for Quran */
    direction:rtl;
    gap:0;max-width:1200px;margin:0 auto;
    background:var(--msh-paper,#fdf8ec);
    border:2px solid var(--msh-frame);border-radius:10px;
    box-shadow:0 16px 60px rgba(0,0,0,.25),inset 0 0 120px rgba(201,162,39,.03);
    overflow:hidden;
  }
  /* Reset direction inside each page — text inside must stay its own RTL */
  .msh-content-spread .msh-page{
    direction:ltr;   /* ltr container so internal RTL text works normally */
    max-width:none;margin:0;padding:0;
    border:none;border-radius:0;box-shadow:none;
    background:transparent;
  }
  /* Right page (lower number) — spine is on its LEFT edge */
  .msh-right-page{border-left:2px solid rgba(201,162,39,.4)!important;padding:20px 18px 20px 20px}
  /* Left page (higher number) — spine is on its RIGHT edge */
  .msh-left-page {border-right:none!important;padding:20px 20px 20px 18px}
  /* Book spine shadow overlay in center */
  .msh-content-spread::after{
    content:'';position:absolute;left:50%;top:0;bottom:0;
    width:18px;transform:translateX(-50%);
    background:linear-gradient(to right,
      rgba(0,0,0,.06),rgba(0,0,0,.13) 30%,
      rgba(0,0,0,.13) 70%,rgba(0,0,0,.06));
    pointer-events:none;z-index:2;
  }
  .msh-content-spread .msh-loading{grid-column:1/-1;direction:ltr}
  /* Both pages same height for proper spread */
  .msh-content-spread .msh-page{min-height:600px;align-self:stretch}
  .msh-content-spread .msh-inner{min-height:calc(600px - 48px)}
  .msh-content-spread .msh-text{min-height:auto}
}

/* VERSE TRANSLATION BAR — slides up when tapping a verse */
.msh-trans-bar{
  position:fixed;bottom:calc(var(--abar-h,82px) + 10px);left:50%;transform:translateX(-50%);
  width:min(580px,95vw);background:var(--card-bg);
  border:1.5px solid var(--bd);border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);z-index:400;
  padding:14px 16px 12px;animation:slideUp .2s ease;
}
@keyframes slideUp{from{opacity:0;transform:translateX(-50%) translateY(14px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
.msh-tb-ref{font-size:.7rem;font-weight:700;color:var(--teal);margin-bottom:6px;font-family:'JetBrains Mono',monospace}
.msh-tb-ar{font-family:var(--font-ar);font-size:1.3rem;direction:rtl;text-align:right;color:var(--tx);margin-bottom:7px;line-height:2;padding-bottom:7px;border-bottom:1px solid var(--bd)}
/* Long-press hint for Mushaf verses */
.msh-text .mw{user-select:none;-webkit-user-select:none}
/* Visual feedback when a mushaf word is held */
.msh-text .mw.mw-pressed{background:rgba(14,165,160,.25)!important;border-radius:3px}
.msh-tb-en{font-size:.9rem;line-height:1.7;color:var(--tx);font-style:italic;margin-bottom:10px;max-height:72px;overflow-y:auto}
.msh-tb-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.msh-tb-btn{padding:5px 12px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--mu);font-size:.74rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:4px;transition:all .14s;font-family:inherit}
.msh-tb-btn:hover{background:var(--teal);border-color:var(--teal);color:#fff}
.msh-tb-close{margin-left:auto;background:transparent!important;border-color:transparent!important;color:var(--mu)!important}
.msh-tb-close:hover{background:var(--bg)!important;color:var(--tx)!important}

/* Audio bar improvements (main styles above) */

/* SETTINGS TABS */
.sp-tabs{display:flex;gap:0;border-bottom:1px solid var(--bd);overflow-x:auto;scrollbar-width:none}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tab{padding:9px 14px;font-size:.72rem;font-weight:700;color:var(--mu);cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;transition:all .15s;background:none;border-top:none;border-left:none;border-right:none;font-family:inherit}
.sp-tab.on{color:var(--teal);border-bottom-color:var(--teal)}
.sp-tab-panel{display:none;padding:12px 14px 16px}
.sp-tab-panel.on{display:block}

/* VERSE NUMBER BADGE — Quran.com style diamond */
.vn-badge{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;background:var(--teal-p);border:1px solid rgba(14,165,160,.25);border-radius:4px;transform:rotate(45deg);cursor:pointer;transition:all .15s;flex-shrink:0;position:relative}
.vn-badge-inner{transform:rotate(-45deg);font-size:.7rem;font-weight:700;color:var(--teal);font-family:'JetBrains Mono',monospace}
.vi.playing .vn-badge{background:var(--teal)}
.vi.playing .vn-badge-inner{color:#fff}

/* READING MODE — translation only, full-width */
.rm-page{max-width:680px;margin:0 auto;padding:24px 24px 100px}
.rm-verse{margin-bottom:20px;padding:14px 18px;background:var(--wh);border-radius:12px;border:1px solid var(--bd)}
.rm-num{font-size:.72rem;font-weight:700;color:var(--teal);margin-bottom:8px;font-family:'JetBrains Mono',monospace}
.rm-txt{font-size:1.05rem;line-height:1.9}
.rm-ar{font-family:var(--font-ar);font-size:1.7rem;line-height:2.5;text-align:right;direction:rtl;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--bd)}
/* MODAL */
/* [.modal-ov/.modal-box moved to canonical block below] */
/* VERSE OF THE DAY */
/* TTS / PLAYING VERSE HIGHLIGHT — persistent while verse plays */
.tr-txt.tts-hl{background:linear-gradient(135deg,rgba(14,165,160,.14),rgba(78,205,196,.08));border-radius:8px;padding:8px 12px;border-left:3px solid var(--teal);transition:all .3s}
/* Verse-card level TTS highlight — used when translation DOM not yet lazy-rendered */
.vi.tts-hl-verse{box-shadow:0 0 0 2px var(--teal);border-radius:14px;transition:box-shadow .3s}
/* Word-by-word TTS highlight */
.tts-w{display:inline;transition:color .08s,font-weight .08s,text-shadow .08s}
.tts-w.tts-w-active{font-weight:800;color:var(--teal);text-shadow:0 0 10px rgba(14,165,160,.45)}
/* ── EMOTION BADGE — appears next to verse number when TTS plays ── */
.emotion-badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.9rem;line-height:1;
  animation:emotionPop .35s cubic-bezier(.34,1.56,.64,1) both;
  cursor:default;flex-shrink:0;
}
@keyframes emotionPop{
  from{opacity:0;transform:scale(.4) rotate(-20deg)}
  to{opacity:1;transform:scale(1) rotate(0deg)}
}
.rm-verse.playing{background:linear-gradient(to right,rgba(14,165,160,.09),transparent)!important;border-left:3px solid var(--teal)}
.rm-verse.playing .rm-ar{color:var(--teal)}
/* [.wtip moved to canonical block below] */

/* ════ VERSE CARD REDESIGN — Quran.com style ═════════════════ */
.vi{
  background:#fff;
  border:none;
  border-bottom:1px solid #f0f2f5;
  border-radius:0;
  margin:0;
  border-left:3px solid transparent;
  transition:background .18s,border-left-color .18s;
  overflow:hidden;
  position:relative;
}
[data-dark="1"] .vi{background:var(--card-bg);border-bottom-color:var(--bd)}
.vi:first-child{border-top:none}
.vi-inner{padding:24px 32px 18px}
.vi:hover{background:#fafbfc}
[data-dark="1"] .vi:hover{background:rgba(14,165,160,.025)}
.vi.playing{
  background:rgba(14,165,160,.035)!important;
  border-left-color:var(--teal)!important;
}
#vlist{
  background:#fff;
  border:none;
  border-radius:0;
  overflow:visible;
  margin-bottom:60px;
}
[data-dark="1"] #vlist{background:var(--card-bg);border-color:var(--bd)}

/* Verse toolbar */
.vt{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px}
.vt-left{display:flex;align-items:center;gap:8px;flex-shrink:0}

/* Dedicated play button — small outline circle */
.vt-play-btn{
  width:28px;height:28px;
  background:transparent;
  border:1px solid #d1d5db;border-radius:50%;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:.6rem;color:#9ca3af;
  flex-shrink:0;
  transition:all .17s;
}
.vt-play-btn:hover{border-color:var(--teal);color:var(--teal);background:rgba(14,165,160,.06)}
.vi.playing .vt-play-btn{border-color:var(--teal);color:var(--teal);background:rgba(14,165,160,.08)}

/* Play/number badge — plain gray like reference */
.vt-num{
  position:relative;
  min-width:36px;height:36px;
  background:transparent;
  border:none;
  border-radius:50%;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  user-select:none;
  transition:all .15s;
}
.vt-num:hover{background:#f3f4f6}
.vt-num-n{
  font-size:.78rem;font-weight:400;color:#9ca3af;
  font-family:'JetBrains Mono',monospace;
}
.vt-num:hover .vt-num-n{display:none}
.vt-num:hover::after{
  content:"\f04b";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:.55rem;
  color:#6b7280;
}
.vt-num-play{display:none}
.vi.playing .vt-num .vt-num-n{color:var(--teal)}

/* Meta badges */
.vt-meta{
  font-size:.6rem;font-weight:700;
  color:var(--mu);
  background:var(--bg);
  border:1px solid var(--bd);
  border-radius:6px;
  padding:3px 7px;
  display:flex;align-items:center;gap:3px;
  white-space:nowrap;letter-spacing:.2px;
}
.vt-meta i{font-size:.56rem;opacity:.6}
.sajda-badge{
  font-size:.62rem;font-weight:700;color:#7c3aed;
  background:rgba(139,92,246,.1);
  border:1px solid rgba(139,92,246,.2);
  border-radius:6px;padding:3px 7px;
  display:flex;align-items:center;gap:3px;
}

/* Action buttons — always visible (play, bookmark, 3-dot) */
.vt-acts{display:flex;gap:2px;opacity:1;transition:opacity .18s;flex-shrink:0}
@media(pointer:coarse){.vt-acts{opacity:1!important}}
.va{
  width:28px;height:28px;
  background:transparent;
  border:none;
  border-radius:6px;
  cursor:pointer;
  font-size:.7rem;color:#9ca3af;
  display:flex;align-items:center;justify-content:center;
  transition:all .13s;
}
.va:hover{background:#f3f4f6;color:#374151}
.va.bm-on{color:var(--gold)!important}
[data-dark="1"] .va:hover{background:rgba(255,255,255,.07);color:#dde5f0}

/* Arabic text — Madinah Mushaf style (Image 2) */
.ar-text{
  font-family:'KFGQPC Uthman Taha Naskh','me_quran','Noto Naskh Arabic','Amiri Quran','AmiriQuran','Amiri',serif;
  font-size:var(--ar-sz);
  font-weight:400;
  line-height:2.2;
  text-align:justify;
  text-align-last:justify;
  -webkit-text-align-last:justify;
  direction:rtl;
  color:#1a1a1a;
  padding:20px 0 8px;
  word-spacing:-0.05em;
  letter-spacing:-0.03em;
  text-justify:kashida;
  -webkit-font-feature-settings:"kern","liga","calt","curs","arab","cswh";
  font-feature-settings:"kern","liga","calt","curs","arab","cswh";
  word-break:keep-all;
  -webkit-hyphens:none;
  hyphens:none;
  overflow-wrap:normal;
  transition:color .2s;
}
[data-dark="1"] .ar-text{color:var(--tx)}
.vi.playing .ar-text{color:var(--tx)}

/* Translation area */
.vtr{margin-top:14px;padding-top:0;border-top:none}
.tr-lbl{font-size:.6rem;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:1px;display:block;margin-bottom:4px}
.tr-txt{font-size:1.08rem;line-height:1.9;color:#374151;font-style:italic;font-family:'Crimson Pro',Georgia,serif}
.tr-txt.rtl-t{direction:rtl;text-align:right;font-family:'Amiri',serif;font-size:1.12rem;line-height:2.25;font-style:normal}
.tr-txt.urdu-t{direction:rtl;text-align:right;font-family:'Noto Nastaliq Urdu',serif;font-size:1.2rem;line-height:2.55;font-style:normal}
[data-dark="1"] .tr-txt{color:var(--tx)}


/* ── VERSE INLINE ACTION ROW — quran.com Tafsirs|Lessons|Reflections style ── */
.vi-action-row{
  display:flex;align-items:center;flex-wrap:wrap;
  gap:0;padding:10px 0 4px;
  border-top:1px solid #f0f2f5;
  margin-top:14px;
}
[data-dark="1"] .vi-action-row{border-top-color:var(--bd)}
.via-btn{
  background:none;border:none;outline:none;box-shadow:none;
  font-size:.8rem;font-weight:400;
  color:#6b7280;cursor:pointer;
  font-family:'Crimson Pro',Georgia,serif;
  padding:3px 0;
  display:inline-flex;align-items:center;gap:5px;
  transition:color .12s;
  white-space:nowrap;
  -webkit-appearance:none;appearance:none;
}
.via-btn:hover{color:#111827}
.via-btn i{font-size:.75rem;color:#9ca3af}
.via-btn:hover i{color:#374151}
[data-dark="1"] .via-btn{color:#6b7280}
[data-dark="1"] .via-btn:hover{color:#e2e8f0}
.via-sep{color:#d1d5db;font-size:.85rem;margin:0 10px;line-height:1;user-select:none}
[data-dark="1"] .via-sep{color:#374151}

/* Expansion tabs */
.vi-ext{
  background:#fff;
  border-top:1px solid #e8edf2;
  display:block;
  position:relative;
}
[data-dark="1"] .vi-ext{background:var(--card-bg);border-top-color:var(--bd)}
.vi-ext.open{
  display:block;
  animation:panelDown .2s ease;
}
/* Always show tab bar so user can click to open panel */
.vi-ext .vi-tabs{display:flex}
.vi-ext:not(.open) .vi-panel,.vi-ext:not(.open) .ai-lang-bar{display:none!important}
@keyframes panelDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.vi-tabs{
  display:flex;gap:0;overflow-x:auto;scrollbar-width:none;
  border-bottom:1px solid #e8edf2;
  background:#fff;
}
[data-dark="1"] .vi-tabs{background:var(--card-bg);border-bottom-color:var(--bd)}
.vi-tabs::-webkit-scrollbar{display:none}
.vi-tab{
  padding:10px 16px;
  font-size:.72rem;font-weight:600;
  color:#6b7c93;
  background:none;border:none;
  border-bottom:2px solid transparent;
  cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:5px;
  transition:all .15s;font-family:inherit;
  letter-spacing:.1px;
}
.vi-tab i{font-size:.65rem}
.vi-tab:hover{color:#1a2533;background:transparent}
.vi-tab.on{color:var(--teal);border-bottom-color:var(--teal);background:transparent}
.vi-panel{display:none;padding:16px 28px 20px;background:#fff}
[data-dark="1"] .vi-panel{background:var(--card-bg)}
.vi-panel.on{display:block}

/* Load buttons inside panels */
.load-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 18px;
  background:var(--card-bg);
  border:1.5px solid var(--bd);
  border-radius:var(--radius-sm);
  font-size:.8rem;font-weight:700;
  color:var(--teal);cursor:pointer;
  transition:all .17s;font-family:inherit;
}
.load-btn:hover{background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:0 4px 14px rgba(14,165,160,.3);transform:translateY(-1px)}

/* AI prompt chips */
.ai-pre{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ai-p{
  padding:6px 12px;
  background:var(--card-bg);
  border:1px solid var(--bd);
  border-radius:20px;
  font-size:.72rem;font-weight:700;
  color:var(--mu);cursor:pointer;
  display:flex;align-items:center;gap:4px;
  transition:all .15s;font-family:inherit;
}
.ai-p i{font-size:.66rem;color:var(--teal)}
.ai-p:hover{background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:0 3px 10px rgba(14,165,160,.25)}
.ai-p:hover i{color:#fff}

/* AI input row */
.ai-row{display:flex;gap:6px;margin-bottom:10px}
.ai-inp{
  flex:1;
  padding:9px 14px;
  border:1.5px solid var(--bd);
  border-radius:var(--radius-sm);
  font-size:.85rem;font-family:inherit;
  background:var(--card-bg);color:var(--tx);
  outline:none;transition:border-color .15s;
}
.ai-inp:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,165,160,.1)}
.ai-send{
  width:38px;height:38px;
  background:var(--teal);
  border:none;border-radius:var(--radius-sm);
  color:#fff;cursor:pointer;font-size:.82rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .15s;flex-shrink:0;
}
.ai-send:hover{background:var(--teal-d);box-shadow:0 4px 12px rgba(14,165,160,.4);transform:scale(1.05)}
.ai-ans-box{font-size:.88rem;line-height:1.8;color:var(--tx)}
.ai-ans{padding:10px 12px;background:var(--card-bg);border:1px solid var(--bd);border-radius:var(--radius-sm);line-height:1.8}

/* Note area */
.note-ta{
  width:100%;
  padding:10px 14px;
  border:1.5px solid var(--bd);
  border-radius:var(--radius-sm);
  font-size:.88rem;font-family:inherit;
  background:var(--card-bg);color:var(--tx);
  resize:vertical;min-height:90px;outline:none;
  transition:border-color .15s;
}
.note-ta:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,165,160,.1)}
.note-actions{display:flex;align-items:center;gap:8px;margin-top:8px}
.note-save{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;
  background:var(--teal);color:#fff;
  border:none;border-radius:var(--radius-sm);
  font-size:.78rem;font-weight:700;cursor:pointer;
  transition:all .15s;font-family:inherit;
}
.note-save:hover{background:var(--teal-d);box-shadow:0 4px 12px rgba(14,165,160,.35)}
.note-ok{
  font-size:.78rem;font-weight:700;color:#059669;
  display:none;align-items:center;gap:4px;
}

/* ════ SIDEBAR REDESIGN ════════════════════════════════════════ */
.qs{
  width:var(--sb);flex-shrink:0;
  background:#fff;
  border-right:1px solid #e8edf2;
  overflow-y:auto;
  position:sticky;top:var(--qtop-h);
  height:calc(100vh - var(--qtop-h));
  scrollbar-width:thin;scrollbar-color:#e2e8f0 transparent;
}
[data-dark="1"] .qs{background:var(--card-bg);border-right-color:var(--bd)}
.qs-hd{
  padding:12px 14px;
  border-bottom:1px solid var(--bd);
  position:sticky;top:0;
  background:var(--card-bg);
  z-index:5;
  background: linear-gradient(180deg, var(--wh) 80%, transparent);
}
[data-dark="1"] .qs-hd { background: linear-gradient(180deg, var(--card-bg) 80%, transparent); }
.qs-inp{
  width:100%;padding:9px 12px 9px 36px;
  border:1.5px solid var(--bd);
  border-radius:22px;
  font-size:.82rem;font-family:inherit;
  background:var(--bg);color:var(--tx);outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:12px center;
  transition:border-color .15s;
}
.qs-inp:focus{border-color:var(--teal);background-color:var(--wh);box-shadow:0 0 0 3px rgba(14,165,160,.12)}
[data-dark="1"] .qs-inp:focus{background-color:var(--card-bg)}
.qs-item{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  text-decoration:none;color:var(--tx);
  border-bottom:1px solid rgba(0,0,0,.04);
  transition:background .12s;
  border-left:3px solid transparent;
}
[data-dark="1"] .qs-item{border-bottom-color:rgba(255,255,255,.04)}
.qs-item:hover{background:rgba(14,165,160,.05);border-left-color:rgba(14,165,160,.4)}
.qs-item.cur{
  background:linear-gradient(135deg,rgba(14,165,160,.08),rgba(14,165,160,.04))!important;
  border-left-color:var(--teal)!important;
}
.qs-item.cur .qs-en{color:var(--teal);font-weight:800}
.qs-item.cur .qs-num{background:var(--teal);color:#fff;border-color:var(--teal)}
[data-dark="1"] .qs-item:hover{background:rgba(14,165,160,.06)}
.qs-num{
  width:30px;height:30px;border-radius:8px;
  background:var(--bg);border:1.5px solid var(--bd);
  display:flex;align-items:center;justify-content:center;
  font-size:.64rem;font-weight:800;color:var(--mu);
  font-family:'JetBrains Mono',monospace;flex-shrink:0;
  transition:all .12s;
}
.qs-item:hover .qs-num{background:var(--teal);color:#fff;border-color:var(--teal)}
.qs-en{font-size:.82rem;font-weight:700;line-height:1.2;transition:color .12s;color:var(--tx)}
.qs-ar{font-family:'Amiri',serif;font-size:1rem;color:var(--teal);flex-shrink:0;margin-left:auto}
.qs-sub{font-size:.62rem;color:var(--mu)}
.qs-mec{font-size:.58rem;font-weight:700;letter-spacing:.4px;padding:1px 5px;border-radius:8px;text-transform:uppercase}
.qs-mec.meccan{background:rgba(251,191,36,.15);color:#b45309}
.qs-mec.medinan{background:rgba(14,165,160,.12);color:var(--teal-d)}
[data-dark="1"] .qs-mec.meccan{background:rgba(251,191,36,.1);color:#fbbf24}
[data-dark="1"] .qs-mec.medinan{background:rgba(14,165,160,.1);color:var(--teal)}

/* ════ VIEW TOOLBAR REDESIGN ════════════════════════════════════ */
.vbar{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding:8px 16px;
  background:#fff;
  border-bottom:1px solid #e8edf2;
  position:sticky;top:var(--qtop-h);z-index:100;
}
[data-dark="1"] .vbar{background:var(--card-bg);border-bottom-color:var(--bd)}
.vb-btn{
  padding:6px 14px;
  background:transparent;
  border:1.5px solid #e5e7eb;
  border-radius:20px;
  font-size:.73rem;font-weight:600;
  color:#6b7280;cursor:pointer;
  transition:all .15s;font-family:inherit;
  display:inline-flex;align-items:center;gap:4px;
}
.vb-btn:hover{background:#f9fafb;border-color:#d1d5db;color:#374151}
.vb-btn.on{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:700}

/* ════ SURAH HEADER — compact horizontal row like quran.com ════ */
.sh{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 20px;
  background:#fff;
  border-bottom:1px solid #e8edf2;
  position:relative;
  flex-wrap:nowrap;
  overflow:hidden;
}
[data-dark="1"] .sh{background:var(--card-bg);border-bottom-color:var(--bd)}
/* No bottom accent line */
.sh::before,.sh::after{display:none}

/* Calligraphy image — left side, compact */
.sh-callig{
  height:48px;
  width:auto;
  max-width:100px;
  object-fit:contain;
  flex-shrink:0;
}
[data-dark="1"] .sh-callig{filter:invert(1) brightness(1.4)}

/* Fallback Arabic text */
.sh-ar-fallback{
  font-family:'AmiriQuran','Amiri Quran','Amiri',serif;
  font-size:1.6rem;
  color:#111;
  font-weight:400;
  flex-shrink:0;
  line-height:1;
  max-width:110px;
  text-align:center;
}
[data-dark="1"] .sh-ar-fallback{color:#e2d4b0}

/* Name block — flex grows to fill middle */
.sh-name-block{
  flex:1;
  min-width:0;
  text-align:left;
}
.sh-en{
  font-size:1.05rem;
  font-weight:700;
  color:var(--tx);
  margin:0 0 2px;
  line-height:1.2;
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
[data-dark="1"] .sh-en{color:#f1f5f9}
.sh-meaning{
  font-size:.78rem;
  color:var(--mu);
  font-style:italic;
  margin:0 0 5px;
}
.sh-meta{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap;
}
.sh-meta-pill{
  padding:2px 8px;
  border-radius:20px;
  border:1px solid var(--bd);
  background:var(--bg);
  font-size:.62rem;
  font-weight:700;
  color:var(--mu);
  letter-spacing:.2px;
}
.sh-info-badge{
  display:inline-block;
  background:var(--teal);
  color:#fff;
  font-size:.42rem;
  padding:2px 6px;
  border-radius:20px;
  vertical-align:middle;
  font-weight:700;
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* Listen + translation — right side */
.sh-listen-bar{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.sh-listen-btn{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 18px;
  background:var(--teal);
  border:none;
  border-radius:24px;
  font-size:.8rem;
  font-weight:700;
  cursor:pointer;
  color:#fff;
  font-family:inherit;
  transition:all .15s;
  white-space:nowrap;
}
.sh-listen-btn i{font-size:.7rem}
.sh-listen-btn:hover,.sh-listen-btn.playing{
  background:var(--teal-d);
  transform:translateY(-1px);
}
.sh-bar-sep{color:#d1d5db;font-size:1rem;line-height:1}
.sh-trans-wrap{
  position:relative;
  display:flex;
  align-items:center;
  border:1.5px solid var(--bd);
  border-radius:20px;
  background:var(--bg);
  transition:border-color .15s;
  overflow:hidden;
}
.sh-trans-wrap:hover{border-color:var(--teal)}
.sh-trans-sel{
  padding:7px 30px 7px 12px;
  border:none;
  border-radius:20px;
  font-size:.76rem;
  font-family:inherit;
  background:transparent;
  color:var(--tx);
  outline:none;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  max-width:180px;
}
.sh-trans-arrow{
  position:absolute;
  right:10px;
  font-size:.6rem;
  color:var(--mu);
  pointer-events:none;
}

/* Bismillah strip — slim, centered, light */
.sh-bism-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px 20px;
  border-top:1px solid #f0f2f5;
  background:#fafafa;
}
[data-dark="1"] .sh-bism-wrap{border-top-color:var(--bd);background:rgba(255,255,255,.02)}
.sh-bism-img{
  height:28px;
  max-width:220px;
  display:block;
}
[data-dark="1"] .sh-bism-img{filter:invert(1) brightness(.85)}
.sh-bism-ar{
  font-family:'Amiri Quran','Amiri',serif;
  font-size:1.15rem;
  color:var(--tx);
  direction:rtl;
  line-height:1;
}
.sh-bism-en{
  font-size:.68rem;
  color:#9ca3af;
  font-style:italic;
}

/* Mobile: stack listen below name */
@media(max-width:600px){
  .sh{flex-wrap:wrap;padding:10px 14px;gap:10px}
  .sh-callig{height:40px}
  .sh-listen-bar{width:100%;justify-content:flex-start;gap:6px}
  .sh-trans-sel{max-width:150px;font-size:.72rem}
  .sh-listen-btn{padding:7px 14px;font-size:.76rem}
}
/* ════ SETTINGS PANEL REDESIGN ════════════════════════════════= */
.spanel{
  position:fixed;top:calc(var(--qtop-h) + 8px);right:12px;
  width:330px;max-width:calc(100vw - 24px);
  background:var(--card-bg);
  border:1px solid var(--bd);
  border-radius:20px;z-index:250;
  box-shadow:0 20px 70px rgba(0,0,0,.18),0 0 0 1px var(--bd);
  display:none;max-height:calc(100vh - 90px);overflow-y:auto;
  scrollbar-width:thin;
}
.spanel.on{display:block;animation:slideDown .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.sp-hd{
  padding:16px 18px 12px;
  border-bottom:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;
  position:sticky;top:0;background:var(--card-bg);
  border-radius:20px 20px 0 0;z-index:5;
}
.sp-title{font-size:.95rem;font-weight:800;display:flex;align-items:center;gap:7px;letter-spacing:-.3px}
.sp-title i{color:var(--teal);font-size:.9rem}
.sp-close{
  background:var(--bg);border:1px solid var(--bd);
  color:var(--mu);cursor:pointer;font-size:.8rem;
  padding:5px 7px;border-radius:8px;transition:all .15s;
}
.sp-close:hover{background:var(--bd);color:var(--tx)}

/* ════ VBAR TOOLBAR UPGRADES ════════════════════════════════════ */
.vb-sp{width:1px;height:20px;background:var(--bd);margin:0 2px;flex-shrink:0}
.vb-sel{
  padding:5px 8px;border:1.5px solid var(--bd);
  border-radius:var(--radius-sm);font-size:.73rem;
  background:var(--card-bg);color:var(--tx);
  outline:none;cursor:pointer;font-family:inherit;
  transition:border-color .15s;
}
.vb-sel:focus{border-color:var(--teal)}
.vb-lbl{font-size:.68rem;color:var(--mu);font-weight:600;white-space:nowrap;opacity:.7}
.vb-prog,.vb-pct{
  font-size:.68rem;font-weight:700;color:var(--mu);
  font-family:'JetBrains Mono',monospace;white-space:nowrap;
  background:var(--bg);border:1px solid var(--bd);
  padding:3px 8px;border-radius:20px;
}

/* ════ MAIN CONTENT AREA ════════════════════════════════════════ */
.qc{flex:1;min-width:0;padding-bottom:24px;transition:padding-bottom .3s ease}
body.audio-playing .qc{padding-bottom:calc(var(--abar-h) + 28px)}
@media(max-width:900px){body.audio-playing .qc{padding-bottom:calc(84px + 24px)}}
@media(max-width:600px){body.audio-playing .qc{padding-bottom:calc(78px + 24px)}}
/* Ensure no bottom gap when audio bar is hidden */
.abar:not(.on) ~ * .qc{padding-bottom:24px}
#vlist{padding:12px 16px}

/* ════ HIGHLIGHT COLORS ════════════════════════════════════════ */
.hl-yellow,.cc-yellow{background:rgba(250,204,21,.1)!important;border-left-color:#d97706!important}
.hl-green,.cc-green{background:rgba(16,185,129,.08)!important;border-left-color:#059669!important}
.hl-blue,.cc-blue{background:rgba(59,130,246,.08)!important;border-left-color:#2563eb!important}
.hl-pink,.cc-pink{background:rgba(236,72,153,.1)!important;border-left-color:#db2777!important}
.hl-purple,.cc-purple{background:rgba(139,92,246,.08)!important;border-left-color:#7c3aed!important}
.hl-orange,.cc-orange{background:rgba(249,115,22,.1)!important;border-left-color:#ea580c!important}

/* ════ SURAH NAV ════════════════════════════════════════════════ */
.snav{
  display:flex;justify-content:space-between;gap:12px;
  padding:18px 20px;
  background:var(--card-bg);
  border-top:1px solid var(--bd);
}
.sn-btn{
  display:flex;align-items:center;gap:8px;
  padding:11px 20px;
  border:1.5px solid var(--bd);
  border-radius:var(--radius-md);
  text-decoration:none;font-size:.85rem;font-weight:700;
  color:var(--teal);background:var(--bg);
  transition:all .17s;
}
.sn-btn:hover{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 4px 16px rgba(14,165,160,.3);transform:translateY(-1px)}
.sn-btn.dis{color:var(--mu);cursor:not-allowed;opacity:.35;pointer-events:none}

/* ════ TAFSIR / HADITH STYLING ════════════════════════════════= */
.tf-box{
  background:var(--card-bg);
  border:1px solid var(--bd);
  border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:10px;
}
.tf-lbl{
  font-size:.62rem;font-weight:800;
  text-transform:uppercase;letter-spacing:1px;
  color:var(--teal);display:block;margin-bottom:6px;
}
.tf-txt{font-size:.88rem;line-height:1.82;color:var(--tx)}
.tf-srcs{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.tf-src{
  padding:5px 12px;
  background:var(--bg);border:1px solid var(--bd);
  border-radius:20px;font-size:.7rem;font-weight:700;
  cursor:pointer;color:var(--mu);transition:all .15s;font-family:inherit;
}
.tf-src:hover,.tf-src.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.hd-card{
  background:linear-gradient(135deg,var(--card-bg),var(--bg));
  border:1px solid var(--bd);border-radius:var(--radius-sm);
  padding:12px 14px;margin-bottom:10px;
}
.hd-grade{
  font-size:.62rem;font-weight:800;
  color:var(--teal);text-transform:uppercase;
  letter-spacing:.8px;display:block;margin-bottom:5px;
}
.hd-txt{font-size:.88rem;line-height:1.82;margin-bottom:5px;color:var(--tx)}
.hd-ref{font-size:.72rem;color:var(--mu);font-style:italic}

/* Loading spinners */
.tload{display:flex;align-items:center;gap:8px;padding:12px 0;color:var(--mu);font-size:.85rem}
.tspin{width:16px;height:16px;border:2px solid var(--bd);border-top-color:var(--teal);border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}

/* ════ WORD TOOLTIP ════════════════════════════════════════════ */
.wtip{
  position:fixed;
  background:var(--card-bg);
  border:1.5px solid var(--bd);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.28),0 0 0 1px rgba(14,165,160,.12);
  z-index:9000;  /* above everything including audio bar and qtop */
  display:none;
  width:230px;
  overflow:hidden;
  flex-direction:column;
  animation:tipIn .18s cubic-bezier(.16,1,.3,1);
  pointer-events:auto;
}
.wtip.on{display:flex}
@keyframes tipIn{from{opacity:0;transform:scale(.92) translateY(6px)}to{opacity:1;transform:scale(1) translateY(0)}}
.wtip-top{padding:14px 14px 10px;text-align:center;border-bottom:1px solid var(--bd)}
.wtip-ar{font-family:'Amiri',serif;font-size:1.75rem;color:var(--tx);display:block;direction:rtl;line-height:1.4;margin-bottom:5px}
.wtip-tr{font-size:.7rem;color:var(--mu);font-style:italic;margin-bottom:2px}
.wtip-en{font-size:.88rem;color:var(--tx);font-weight:700}
.wtip-dots{display:flex;justify-content:space-around;padding:5px 6px;border-top:1px solid var(--bd)}
.wtip-dot-btn{
  flex:1;padding:6px 4px;font-size:.66rem;
  color:var(--mu);background:none;border:none;
  cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:3px;border-radius:8px;
  font-family:inherit;transition:all .12s;
}
.wtip-dot-btn:hover{background:var(--teal-p);color:var(--teal)}
.wtip-dot-btn i{font-size:.75rem}

/* ════ MODAL ════════════════════════════════════════════════════ */
.modal-ov{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
  z-index:9999;display:flex;
  align-items:center;justify-content:center;padding:16px;
  animation:modalFadeIn .2s ease;
}
@keyframes modalFadeIn{from{opacity:0}to{opacity:1}}
.modal-box{
  border-radius:var(--radius-lg);
  width:100%;max-width:520px;
  max-height:82vh;overflow-y:auto;
  box-shadow:0 24px 80px rgba(0,0,0,.4),0 0 0 1px var(--bd);
  animation:modalIn .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
.modal-hd{
  display:flex;justify-content:space-between;align-items:center;
  padding:16px 18px;border-bottom:1px solid var(--bd);
  font-weight:800;font-size:.96rem;
  position:sticky;top:0;background:var(--card-bg);border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  z-index:2;
}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px}
.stat-c{background:var(--bg);border-radius:var(--radius-sm);padding:14px 8px;text-align:center}
.stat-n{font-size:1.5rem;font-weight:800;color:var(--teal)}
.stat-l{font-size:.7rem;color:var(--mu);margin-top:2px;font-weight:600}

/* ════ READING PROGRESS BAR ════════════════════════════════════ */
.rbar{position:fixed;top:var(--qtop-h);left:0;right:0;height:3px;background:transparent;z-index:190;pointer-events:none}
.rbar-fill{height:100%;background:linear-gradient(90deg,var(--teal),#4ecdc4,var(--gold));width:0%;transition:width .15s;box-shadow:0 0 8px rgba(14,165,160,.5)}

/* ════ IN-PAGE SEARCH ════════════════════════════════════════════ */
.isbar{
  display:none;position:fixed;
  top:calc(var(--qtop-h) + 6px);left:50%;transform:translateX(-50%);
  background:var(--card-bg);border:1.5px solid var(--bd);
  border-radius:var(--radius-md);padding:10px 14px;
  z-index:180;
  box-shadow:var(--sh-md);
  align-items:center;gap:8px;width:min(480px,92vw);
  animation:slideDown .2s ease;
}
.isbar.on{display:flex}

/* ════ VOTD BANNER ════════════════════════════════════════════ */
/* ════ SCROLL ANIMATION — verse entrance ════════════════════════ */
.vi{opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s,border-color .2s,box-shadow .2s,background .2s}
.vi.in-view{opacity:1;transform:translateY(0)}
/* Fallback: show all verses if reduced-motion or print */
@media(prefers-reduced-motion:reduce){.vi{opacity:1!important;transform:none!important;transition:border-color .2s,box-shadow .2s,background .2s!important}}
@media print{.vi{opacity:1!important;transform:none!important}}

/* ════ SEARCH HIGHLIGHT ════════════════════════════════════════ */
.vi.search-match{outline:2px solid var(--teal)!important;outline-offset:2px}

/* ════ SWITCHES ════════════════════════════════════════════════ */
.sw{
  width:42px;height:23px;
  background:var(--bd);border-radius:12px;
  cursor:pointer;position:relative;
  transition:background .2s;flex-shrink:0;border:none;
}
.sw.on{background:var(--teal)}
.sw::after{
  content:'';position:absolute;
  width:19px;height:19px;
  background:#fff;border-radius:50%;
  top:2px;left:2px;
  transition:left .2s;
  box-shadow:0 1px 4px rgba(0,0,0,.2);
}
.sw.on::after{left:21px}

/* ════ RESPONSIVE ════════════════════════════════════════════== */
@media(max-width:900px){
  .qs{width:var(--sb);position:fixed;top:var(--qtop-h);left:0;height:calc(100vh - var(--qtop-h));z-index:200;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1)}
  .qs.open{transform:translateX(0)}
  .qc{margin-left:0}
}
@media(max-width:600px){
  .vi-inner{padding:12px 14px 10px}
  .sh{padding:28px 16px 20px}
  .sh-ar{font-size:2.8rem}
  .sh-en{font-size:1.35rem}
  #vlist{padding:8px 10px}
}


/* Repeat modal cancel button */
.rm-cancel-btn:hover{border-color:var(--teal)!important;color:var(--tx)!important}

/* ════════════════════════════════════════════════════════════════
   QURAN.COM-STYLE VERSE TOOLS POPUP (side panel like screenshot)
   ════════════════════════════════════════════════════════════════ */

/* Verse bottom action row — "Tafsirs | Lessons | Reflections | Hadith" */
/* --- separator lines removed: .vb rows are hidden, accessed via 3-dot menu instead */
.vb{
  display:none!important;
}
.vb .vb-btn{
  display:flex;align-items:center;gap:5px;
  padding:5px 16px 5px 0;
  background:none;border:none;
  font-size:.72rem;font-weight:500;
  color:#9ca3af;cursor:pointer;
  font-family:inherit;transition:color .14s;
  border-right:1px solid #e5e7eb;
  margin-right:16px;
}
.vb .vb-btn:last-child{border-right:none;margin-right:0}
.vb .vb-btn:hover{color:#374151}
.vb .vb-btn i{font-size:.62rem;opacity:.8}

/* ════ QURAN.COM POPUP PANEL ═══════════════════════════════════ */
/* Overlay */
.qpop-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(3px);
  z-index:8000;display:none;
  animation:popFadeIn .18s ease;
}
.qpop-overlay.on{display:block}
@keyframes popFadeIn{from{opacity:0}to{opacity:1}}

/* Panel — slides up from bottom on mobile, modal on desktop */
.qpop{
  position:fixed;
  bottom:0;left:0;right:0;
  background:var(--card-bg);
  border-radius:20px 20px 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,.25);
  z-index:8001;
  max-height:88vh;
  display:flex;flex-direction:column;
  transform:translateY(100%);
  transition:transform .32s cubic-bezier(.16,1,.3,1);
}
.qpop.on{transform:translateY(0)}

/* On tablet/desktop — right side modal */
@media(min-width:760px){
  .qpop{
    top:var(--qtop-h);bottom:0;left:auto;right:0;
    width:min(520px,45vw);
    border-radius:0;max-height:100vh;
    transform:translateX(100%);
    border-left:1px solid var(--bd);
  }
  .qpop.on{transform:translateX(0)}
  @keyframes popFadeIn{from{opacity:0}to{opacity:1}}
}

/* Handle (mobile only) */
.qpop-handle{
  width:40px;height:4px;
  background:var(--bd);border-radius:2px;
  margin:10px auto 0;flex-shrink:0;
}
@media(min-width:760px){.qpop-handle{display:none}}

/* Header */
.qpop-hd{
  padding:14px 18px 12px;
  border-bottom:1px solid var(--bd);
  flex-shrink:0;
  position:sticky;top:0;
  background:var(--card-bg);
  z-index:2;
}
.qpop-nav{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.qpop-surah-sel{
  padding:5px 10px;border:1px solid var(--bd);border-radius:8px;
  font-size:.8rem;font-weight:700;background:var(--bg);color:var(--tx);
  outline:none;cursor:pointer;font-family:inherit;
}
.qpop-surah-sel:focus{border-color:var(--teal)}
.qpop-verse-sel{
  padding:5px 10px;border:1px solid var(--bd);border-radius:8px;
  font-size:.8rem;font-weight:700;background:var(--bg);color:var(--tx);
  outline:none;cursor:pointer;font-family:inherit;
  width:70px;
}
.qpop-arr{
  width:28px;height:28px;background:var(--bg);border:1px solid var(--bd);
  border-radius:7px;color:var(--mu);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;transition:all .12s;
}
.qpop-arr:hover{background:var(--teal);color:#fff;border-color:var(--teal)}
.qpop-close{
  margin-left:auto;
  width:28px;height:28px;background:var(--bg);border:1px solid var(--bd);
  border-radius:7px;color:var(--mu);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;transition:all .12s;
}
.qpop-close:hover{background:rgba(239,68,68,.1);color:#ef4444;border-color:rgba(239,68,68,.3)}

/* Verse display at top of popup */
.qpop-verse{
  padding:0 18px 12px;
  border-bottom:1px solid var(--bd);
}
.qpop-ref{font-size:.75rem;font-weight:700;color:var(--teal);margin-bottom:5px}
.qpop-ar{
  font-family:var(--font-ar);font-size:1.5rem;
  line-height:2.1;direction:rtl;text-align:right;
  color:var(--tx);
}
.qpop-tr{
  font-size:.88rem;line-height:1.75;color:var(--mu);
  margin-top:6px;font-style:italic;
}

/* Tab bar */
.qpop-tabs{
  display:flex;border-bottom:1px solid var(--bd);
  overflow-x:auto;scrollbar-width:none;
  flex-shrink:0;background:var(--card-bg);
}
.qpop-tabs::-webkit-scrollbar{display:none}
.qpop-tab{
  padding:10px 16px;
  font-size:.74rem;font-weight:700;
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--mu);cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:5px;
  font-family:inherit;transition:all .14s;
}
.qpop-tab:hover{color:var(--teal)}
.qpop-tab.on{color:var(--teal);border-bottom-color:var(--teal);background:var(--teal-p)}
.qpop-tab i{font-size:.68rem}

/* Scrollable content area */
.qpop-body{flex:1;overflow-y:auto;padding:0;scroll-behavior:smooth}
.qpop-panel{display:none;padding:18px 20px 40px;animation:fadeDown .18s ease}
.qpop-panel.on{display:block}

/* Tafsir source selector row */
.qpop-src-row{
  display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--bd);
}
.qpop-src-btn{
  padding:6px 14px;border:1.5px solid var(--bd);border-radius:20px;
  font-size:.72rem;font-weight:700;cursor:pointer;
  background:var(--bg);color:var(--mu);transition:all .15s;font-family:inherit;
}
.qpop-src-btn:hover,.qpop-src-btn.on{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 2px 8px rgba(14,165,160,.25)}

/* Tafsir content */
.qpop-tf-box{
  font-size:.92rem;line-height:1.9;color:var(--tx);
  background:var(--card-bg);border-radius:12px;
  padding:16px 18px;margin-bottom:12px;
  border:1px solid var(--bd);
}
.qpop-tf-box h3{font-size:.92rem;font-weight:800;margin:14px 0 6px;color:var(--teal)}
.qpop-tf-box p{margin-bottom:10px;color:var(--tx);line-height:1.85}
.qpop-tf-box strong{font-weight:700;color:var(--tx)}
.qpop-tf-box .tf-ar{font-family:var(--font-ar);direction:rtl;text-align:right;font-size:1.15rem;line-height:2.2;color:var(--tx);display:block;margin:10px 0;padding:10px;background:var(--teal-p);border-radius:8px}

/* TTS button inside popup panels */
.qpop-tts-btn{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;border:1.5px solid var(--teal);border-radius:20px;
  font-size:.7rem;font-weight:700;color:var(--teal);
  background:transparent;cursor:pointer;font-family:inherit;
  transition:all .15s;margin-top:10px;
}
.qpop-tts-btn:hover,.qpop-tts-btn.playing{background:var(--teal);color:#fff}
.qpop-tts-btn i{font-size:.65rem}

/* AI language selector in popup */
.qpop-lang-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.qpop-lang-lbl{font-size:.7rem;font-weight:700;color:var(--mu);text-transform:uppercase;letter-spacing:.5px}
.qpop-lang-sel{
  padding:6px 28px 6px 10px;border:1.5px solid var(--bd);border-radius:9px;
  font-size:.78rem;background:var(--bg);color:var(--tx);
  outline:none;cursor:pointer;font-family:inherit;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2394a3b8'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 9px center;
  flex:1;min-width:130px;max-width:220px;
}
.qpop-lang-sel:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,165,160,.12)}

/* AI chip buttons in popup */
.qpop-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.qpop-chip{
  padding:6px 12px;border:1.5px solid var(--bd);border-radius:20px;
  font-size:.71rem;font-weight:700;cursor:pointer;
  background:var(--bg);color:var(--mu);transition:all .15s;font-family:inherit;
  display:flex;align-items:center;gap:5px;
}
.qpop-chip:hover{background:var(--teal);color:#fff;border-color:var(--teal);box-shadow:0 2px 8px rgba(14,165,160,.2)}
.qpop-chip i{font-size:.65rem;color:var(--teal)}
.qpop-chip:hover i{color:#fff}

/* Hadith card — premium */
.qpop-hd-card{
  border:none;border-radius:14px;
  padding:16px 18px;margin-bottom:12px;
  background:linear-gradient(135deg,var(--card-bg) 80%,rgba(14,165,160,.04));
  box-shadow:0 1px 6px rgba(0,0,0,.07);
  position:relative;overflow:hidden;
}
.qpop-hd-card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;
  width:3px;background:linear-gradient(180deg,var(--teal),#10b981);
  border-radius:3px 0 0 3px;
}
.qpop-hd-grade{
  font-size:.67rem;font-weight:800;color:var(--teal);
  text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;
  display:flex;align-items:center;gap:6px;
}
.qpop-hd-grade::after{content:'';flex:1;height:1px;background:var(--bd)}
.qpop-hd-txt{font-size:.9rem;line-height:1.85;color:var(--tx);font-style:italic}
.qpop-hd-src{font-size:.72rem;color:var(--mu);margin-top:8px;padding-top:8px;border-top:1px solid var(--bd)}

/* Reflection / AI Tafsir cards — premium */
.qpop-rf-card{
  border-left:3px solid var(--teal);
  padding:14px 16px;margin-bottom:12px;
  background:linear-gradient(135deg,var(--teal-p) 60%,var(--bg));
  border-radius:0 12px 12px 0;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  transition:box-shadow .15s;
}
.qpop-rf-card:hover{box-shadow:0 3px 12px rgba(14,165,160,.12)}
.qpop-rf-title{
  font-size:.68rem;font-weight:800;color:var(--teal);
  text-transform:uppercase;letter-spacing:.8px;margin-bottom:6px;
  display:flex;align-items:center;gap:5px;
}
.qpop-rf-title i{font-size:.65rem}
.qpop-rf-txt{font-size:.9rem;line-height:1.82;color:var(--tx)}

/* Lesson/memo step — premium */
.qpop-mm-step{
  display:flex;gap:14px;padding:12px 0;
  border-bottom:1px solid var(--bd);align-items:flex-start;
}
.qpop-mm-step:last-child{border:none}
.qpop-mm-num{
  width:28px;height:28px;
  background:linear-gradient(135deg,var(--teal),#0d9488);
  color:#fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:800;flex-shrink:0;
  box-shadow:0 2px 6px rgba(14,165,160,.3);
}
.qpop-mm-txt{font-size:.88rem;line-height:1.75;color:var(--tx);padding-top:3px}

/* Note textarea in popup */
.qpop-note-ta{
  width:100%;padding:12px 14px;
  border:1.5px solid var(--bd);border-radius:12px;
  font-size:.9rem;font-family:inherit;
  background:var(--card-bg);color:var(--tx);
  resize:vertical;min-height:110px;outline:none;
  transition:border-color .15s;margin-bottom:12px;line-height:1.7;
}
.qpop-note-ta:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,165,160,.1)}
.qpop-note-save{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 18px;background:var(--teal);color:#fff;
  border:none;border-radius:9px;font-size:.8rem;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .14s;
}
.qpop-note-save:hover{background:var(--teal-d)}

/* Loading spinner in popup */
.qpop-spin{text-align:center;padding:24px;color:var(--mu);font-size:.84rem}
.qpop-spin .tspin{margin:0 auto 8px}

/* AI answer box in popup */
.qpop-ai-ans{
  background:var(--bg);border:1px solid var(--bd);
  border-radius:10px;padding:13px;
  font-size:.88rem;line-height:1.8;color:var(--tx);
  margin-top:8px;display:none;
}
.qpop-ai-ans.on{display:block}
.qpop-ai-inp-row{display:flex;gap:7px;margin-top:8px}
.qpop-ai-inp{
  flex:1;padding:9px 13px;border:1.5px solid var(--bd);border-radius:9px;
  font-size:.84rem;font-family:inherit;background:var(--bg);color:var(--tx);
  outline:none;
}
.qpop-ai-inp:focus{border-color:var(--teal)}
.qpop-ai-send{
  padding:9px 14px;background:var(--teal);color:#fff;
  border:none;border-radius:9px;font-size:.82rem;cursor:pointer;
  display:flex;align-items:center;gap:4px;font-family:inherit;font-weight:700;
}
.qpop-ai-send:hover{background:var(--teal-d)}

/* ════ AYAH HOLD POPUP (Mobile Bottom Sheet) ════════════════════ */
.ayah-popup-overlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
  z-index:8500;
  display:none;
  animation:fadeIn .18s ease;
}
.ayah-popup-overlay.on{display:block}
.ayah-popup{
  position:fixed;
  bottom:0;left:0;right:0;
  background:var(--card-bg);
  border-radius:20px 20px 0 0;
  z-index:8001;
  padding:0 0 env(safe-area-inset-bottom,16px);
  box-shadow:0 -8px 40px rgba(0,0,0,.25);
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  max-height:90vh;overflow-y:auto;
}
.ayah-popup.on{transform:translateY(0)}
.ayah-popup-handle{
  width:40px;height:4px;
  background:var(--bd);
  border-radius:2px;
  margin:12px auto 0;
}
.ayah-popup-header{
  padding:14px 20px 10px;
  border-bottom:1px solid var(--bd);
  display:flex;align-items:center;justify-content:space-between;
}
.ayah-popup-ref{
  font-size:.78rem;font-weight:800;
  color:var(--teal);letter-spacing:.5px;
  font-family:'JetBrains Mono',monospace;
}
.ayah-popup-ar{
  font-family:var(--font-ar);
  font-size:1.55rem;
  line-height:2.1;
  text-align:right;
  direction:rtl;
  color:var(--tx);
  padding:12px 20px;
  border-bottom:1px solid var(--bd);
  background:linear-gradient(to bottom,var(--gold-p),transparent);
}
.ayah-popup-trans{
  padding:10px 20px 4px;
  font-size:.9rem;
  line-height:1.75;
  color:var(--tx);
  font-style:italic;
  display:none;
}
.ayah-popup-trans.on{display:block}
.ayah-popup-trans-sel{
  padding:10px 20px;
  display:none;
  flex-wrap:wrap;
  gap:6px;
}
.ayah-popup-trans-sel.on{display:flex}
.ayah-popup-trans-opt{
  padding:5px 12px;
  border:1.5px solid var(--bd);
  border-radius:20px;
  font-size:.72rem;font-weight:700;
  cursor:pointer;color:var(--mu);
  background:var(--bg);
  transition:all .14s;font-family:inherit;
}
.ayah-popup-trans-opt.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.ayah-popup-actions{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0;
  border-top:1px solid var(--bd);
  border-bottom:1px solid var(--bd);
}
.ayah-popup-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:14px 8px;
  background:none;border:none;cursor:pointer;
  font-size:.65rem;font-weight:700;color:var(--mu);
  font-family:inherit;transition:all .15s;
  border-right:1px solid var(--bd);
}
.ayah-popup-btn:last-child{border-right:none}
.ayah-popup-btn i{font-size:1.1rem;color:var(--teal)}
.ayah-popup-btn:hover{background:var(--teal-p);color:var(--teal)}
.ayah-popup-btn.bm-on i{color:var(--gold)}
.ayah-popup-close{
  width:100%;
  padding:14px;
  background:none;border:none;
  font-size:.85rem;font-weight:700;
  color:var(--mu);cursor:pointer;
  font-family:inherit;
  transition:background .15s;
}
.ayah-popup-close:hover{background:var(--bg)}



/* ════ ARABIC-ONLY VIEW MODE ══════════════════════════════════ */
body[data-view="arabic"] .vtr,
body[data-view="arabic"] .vb{display:none!important}
body[data-view="arabic"] .vi-ext{display:block}
body[data-view="arabic"] .vi-ext:not(.open) .vi-panel,
body[data-view="arabic"] .vi-ext:not(.open) .ai-lang-bar{display:none!important}
body[data-view="arabic"] .vi-ext.open{display:block!important}
body[data-view="arabic"] .ar-text{
  font-size:calc(var(--ar-sz) * 1.15);
  line-height:2.2;
  padding:18px 0 10px;
}
body[data-view="arabic"] .vi-inner{padding:20px 32px 16px}
body[data-view="arabic"] #vlist{background:#fff}

/* ════ LISTEN / TRANSLATION TOGGLE BAR ════════════════════════ */
.sh-listen-bar{
  display:flex;align-items:center;justify-content:center;
  gap:8px;padding:10px 16px 4px;
}
.sh-listen-btn{
  display:flex;align-items:center;gap:6px;
  padding:7px 18px;border-radius:20px;
  border:none;cursor:pointer;font-size:.82rem;font-weight:600;
  font-family:inherit;transition:all .15s;
}
.sh-listen-btn.play{background:transparent;color:#374151}
.sh-listen-btn.play:hover{background:#f3f4f6}
.sh-listen-btn.play i{color:var(--teal)}
.sh-trans-toggle{
  display:flex;align-items:center;gap:6px;
  padding:7px 18px;border-radius:20px;
  border:1.5px solid #e5e7eb;cursor:pointer;
  font-size:.82rem;font-weight:600;color:#374151;
  background:#fff;font-family:inherit;transition:all .15s;
}
.sh-trans-toggle.on{background:var(--teal);border-color:var(--teal);color:#fff}
.sh-trans-toggle:hover:not(.on){background:#f9fafb}

/* ════ BISM (Bismillah) ════════════════════════════════════════ */
.bism{
  text-align:center;
  padding:14px 12px 12px;
  border-bottom:1px solid #f0f2f5;
  background:#fff;
}
.bism img{height:38px;max-width:220px;object-fit:contain}
[data-dark="1"] .bism{background:var(--card-bg);border-bottom-color:var(--bd)}

/* ════ ACTION BUTTONS FADE ON HOVER ═══════════════════════════ */
.vt-acts{display:flex;gap:1px;opacity:0;transition:opacity .2s;flex-shrink:0}
.vi:hover .vt-acts,.vi.playing .vt-acts{opacity:1}
@media(pointer:coarse){.vt-acts{opacity:1!important}}

/* ════ READING PROGRESS BAR (top) ═════════════════════════════ */
.rbar{position:fixed;top:var(--qtop-h);left:0;right:0;height:2px;background:transparent;z-index:10000;pointer-events:none}
.rbar-fill{height:100%;background:var(--teal);width:0%;transition:width .2s linear}

/* ════ SURAH NAV (prev/next) ═══════════════════════════════════ */
.snav{
  display:flex;justify-content:space-between;gap:12px;
  padding:20px 24px;
  background:#fff;
  border-top:1px solid #f0f2f5;
}
[data-dark="1"] .snav{background:var(--card-bg);border-top-color:var(--bd)}
.sn-btn{
  display:flex;align-items:center;gap:8px;
  padding:10px 20px;
  border:1.5px solid #e5e7eb;
  border-radius:var(--radius-md);
  text-decoration:none;font-size:.85rem;font-weight:600;
  color:#374151;background:#fff;
  transition:all .17s;
}
.sn-btn:hover{background:var(--teal);border-color:var(--teal);color:#fff;box-shadow:0 4px 14px rgba(14,165,160,.25)}
.sn-btn.dis{color:#d1d5db;cursor:not-allowed;opacity:.5;pointer-events:none}

/* ════ RESPONSIVE FIXES ════════════════════════════════════════ */
@media(max-width:768px){
  .vi-inner{padding:16px 18px 12px}
  .ar-text{font-size:1.8rem;line-height:2.2;gap:4px}
  .vb-btn{padding:5px 10px;font-size:.68rem}
}


/* ════ JUZ PAGE STYLES ════ */
/* ══ JUZ READER PAGE ══════════════════════════════════════════════ */
body{background:#f8fafc}
.juz-wrap{max-width:900px;margin:0 auto;padding:0 0 80px}

/* ── TOP HEADER (like Image 3 reference) ── */
.juz-topbar{
  background:#fff;border-bottom:1px solid #e8edf2;
  padding:0 24px;height:56px;
  display:flex;align-items:center;gap:12px;
  position:sticky;top:0;z-index:200;
  box-shadow:0 1px 0 #e8edf2;
}
.juz-topbar-back{
  color:#374151;text-decoration:none;
  display:flex;align-items:center;gap:5px;
  font-size:.82rem;font-weight:600;
  padding:6px 10px;border-radius:8px;
  transition:background .15s;white-space:nowrap;flex-shrink:0;
}
.juz-topbar-back:hover{background:#f3f4f6;color:#111}
.juz-topbar-center{flex:1;text-align:center}
.juz-topbar-title{font-size:.9rem;font-weight:700;color:#111;display:block;line-height:1.2}
.juz-topbar-sub{font-size:.72rem;color:#6b7280;display:block}
.juz-topbar-acts{display:flex;align-items:center;gap:6px}
.juz-tb-btn{
  display:flex;align-items:center;gap:5px;
  padding:7px 14px;border-radius:22px;
  border:1.5px solid #e5e7eb;background:#fff;
  font-size:.8rem;font-weight:600;color:#374151;
  cursor:pointer;font-family:inherit;transition:all .15s;
  text-decoration:none;white-space:nowrap;
}
.juz-tb-btn:hover,.juz-tb-btn.on{background:#0d9488;border-color:#0d9488;color:#fff}
.juz-tb-btn i{font-size:.75rem}

/* ── HERO BANNER ── */
.juz-hero{
  background:linear-gradient(160deg,#042f2e 0%,#083344 40%,#022c22 100%);
  padding:52px 32px 44px;text-align:center;color:#fff;
  position:relative;overflow:hidden;
}
.juz-hero::after{
  content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:80px;height:3px;background:linear-gradient(90deg,transparent,#4ecca3,transparent);
}
.juz-hero-badge{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(78,204,163,.15);border:1px solid rgba(78,204,163,.3);
  color:#4ecca3;font-size:.72rem;font-weight:700;letter-spacing:1.5px;
  text-transform:uppercase;padding:6px 16px;border-radius:30px;margin-bottom:20px;
}
.juz-hero-ar{
  font-family:'Amiri Quran','Amiri',serif;font-size:3rem;
  color:#4ecca3;display:block;margin-bottom:12px;line-height:1.4;
}
.juz-hero h1{font-size:2.4rem;font-weight:800;letter-spacing:-.5px;margin-bottom:6px;color:#fff}
.juz-hero-sub{color:rgba(255,255,255,.55);font-size:.9rem;margin-bottom:22px}
.juz-range-pill{
  display:inline-flex;align-items:center;gap:12px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:30px;padding:8px 20px;font-size:.85rem;color:rgba(255,255,255,.8);
  margin-bottom:28px;
}
.juz-range-pill strong{color:#4ecca3}
.dot{color:rgba(255,255,255,.3)}
.juz-hero-stats{
  display:flex;justify-content:center;gap:0;
  border-top:1px solid rgba(255,255,255,.08);padding-top:24px;flex-wrap:wrap;
}
.juz-hstat{padding:4px 28px;text-align:center;border-right:1px solid rgba(255,255,255,.1)}
.juz-hstat:last-child{border-right:none}
.juz-hstat strong{display:block;font-size:1.6rem;font-weight:800;color:#4ecca3;font-family:'Playfair Display',serif;line-height:1.1}
.juz-hstat span{font-size:.64rem;color:rgba(255,255,255,.4);text-transform:uppercase;letter-spacing:1.5px;margin-top:2px;display:block}
.juz-hero-btns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:24px}
.juz-btn-primary{
  padding:11px 26px;background:#4ecca3;border-radius:30px;
  color:#042f2e;font-weight:700;font-size:.88rem;
  border:none;cursor:pointer;font-family:inherit;text-decoration:none;
  display:inline-flex;align-items:center;gap:8px;transition:all .2s;
}
.juz-btn-primary:hover{background:#3bb898;transform:translateY(-1px)}
.juz-btn-sec{
  padding:11px 22px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  border-radius:30px;color:#fff;font-weight:600;font-size:.88rem;
  cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:7px;
  transition:all .2s;
}
.juz-btn-sec:hover{background:rgba(255,255,255,.2)}

/* ── VIEW TOOLBAR ── */
.juz-view-bar{
  background:#fff;border-bottom:1px solid #e8edf2;
  padding:0 24px;display:flex;align-items:center;gap:8px;
  position:sticky;top:56px;z-index:190;height:46px;
  box-shadow:0 1px 0 #f1f5f9;
}
.juz-vb-btn{
  padding:5px 14px;border-radius:20px;border:1.5px solid #e5e7eb;
  background:#fff;font-size:.78rem;font-weight:600;color:#6b7280;
  cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap;
}
.juz-vb-btn.on,.juz-vb-btn:hover{background:#0d9488;border-color:#0d9488;color:#fff}
.juz-vb-sep{width:1px;height:20px;background:#e5e7eb;margin:0 2px}
.juz-rec-sel{
  padding:5px 10px;border:1.5px solid #e5e7eb;border-radius:10px;
  font-size:.76rem;background:#fff;color:#374151;outline:none;cursor:pointer;
  font-family:inherit;margin-left:auto;
}

/* ── VERSE CARDS (full reader style) ── */
#juzVerseList{padding:12px 16px}
.juz-surah-banner{
  background:linear-gradient(135deg,#f0fdfa,#ecfdf5);
  border:1px solid #ccfbf1;border-radius:12px;
  padding:16px 20px;text-align:center;margin:20px 0 8px;
}
.juz-surah-banner-ar{font-family:'Amiri Quran','Amiri',serif;font-size:2rem;color:#0d9488;direction:rtl}
.juz-surah-banner-en{font-size:.95rem;font-weight:700;color:#0c1a1a;margin:4px 0 2px}
.juz-surah-banner-meta{font-size:.75rem;color:#4b7272}
.juz-bism{
  font-family:'Amiri Quran','Amiri',serif;font-size:1.6rem;
  color:#b45309;text-align:center;padding:12px 0 8px;direction:rtl;
  border-bottom:1px solid #fef3c7;margin-bottom:4px;
}
.jv{
  padding:16px 20px;border-bottom:1px solid #f1f5f9;
  transition:background .12s;position:relative;
}
.jv:hover{background:#f8fffe}
.jv-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.jv-num{
  width:30px;height:30px;background:#f0fdfa;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;color:#0d9488;flex-shrink:0;
  font-family:'JetBrains Mono',monospace;
}
.jv-ref{font-size:.7rem;color:#9ca3af;font-weight:600;letter-spacing:.5px}
.jv-acts{margin-left:auto;display:flex;gap:4px}
.jv-act{
  width:28px;height:28px;border:none;background:none;
  color:#9ca3af;cursor:pointer;border-radius:7px;
  display:flex;align-items:center;justify-content:center;font-size:.75rem;
  transition:all .12s;
}
.jv-act:hover{background:#f0fdfa;color:#0d9488}
.jv-act.playing{color:#0d9488;background:#f0fdfa}
.jv-ar{
  font-family:'Amiri Quran','Amiri',serif;
  font-size:1.8rem;line-height:2.1;direction:rtl;text-align:right;
  color:#0c1a1a;margin-bottom:8px;
}
.jv-tr{font-size:.88rem;color:#4b7272;line-height:1.7}
.jv-tr-lbl{font-size:.65rem;font-weight:700;color:#9ca3af;text-transform:uppercase;letter-spacing:.8px;margin-bottom:3px}

/* Arabic only mode */
.juz-arabic-only .jv-tr,.juz-arabic-only .jv-tr-lbl{display:none}
.juz-arabic-only .jv-ar{font-size:2.1rem;line-height:2.3}
.juz-arabic-only .jv{padding:12px 20px}

/* ── LOADING SKELETON ── */
.juz-skel-wrap{padding:12px 16px}
.juz-skel{padding:16px 20px;border-bottom:1px solid #f1f5f9}
.juz-skel-line{height:12px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;border-radius:6px;margin-bottom:10px;animation:juzSkelPulse 1.4s ease-in-out infinite}
.juz-skel-ar{height:32px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%);background-size:200% 100%;border-radius:8px;margin-bottom:12px;animation:juzSkelPulse 1.4s ease-in-out infinite}
@keyframes juzSkelPulse{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── LOAD MORE SENTINEL ── */
.juz-load-more{
  display:flex;align-items:center;justify-content:center;padding:32px;
  gap:10px;color:#9ca3af;font-size:.85rem;
}
.juz-load-more .qspin{width:22px;height:22px;border-width:2px;margin:0}

/* ── SURAH GRID (below reader) ── */
.juz-surah-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-bottom:32px}
.juz-surah-card{
  background:#fff;border:1.5px solid #e5f3f3;border-radius:12px;
  padding:12px 16px;display:flex;align-items:center;gap:12px;
  text-decoration:none;color:inherit;transition:all .15s;
}
.juz-surah-card:hover{border-color:#0d9488;box-shadow:0 2px 8px rgba(13,148,136,.12);transform:translateY(-1px)}
.juz-surah-num{width:32px;height:32px;background:#f0fdfa;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:#0d9488;flex-shrink:0}
.juz-surah-en{font-size:.85rem;font-weight:700;color:#0c1a1a;display:block}
.juz-surah-meta{font-size:.7rem;color:#6b7280;margin-top:2px}
.juz-surah-ar{font-family:'Amiri',serif;font-size:1.1rem;color:#0d9488;margin-left:auto}
.juz-badge-meccan{background:#fef3c7;color:#92400e;font-size:.6rem;font-weight:700;padding:1px 6px;border-radius:8px;margin-left:4px}
.juz-badge-medinan{background:#dbeafe;color:#1e40af;font-size:.6rem;font-weight:700;padding:1px 6px;border-radius:8px;margin-left:4px}

/* ── SECTION HEADER ── */
.juz-sec-hd{display:flex;align-items:center;justify-content:space-between;margin:32px 0 14px;padding:0 4px}
.juz-sec-title{font-family:'Playfair Display',serif;font-size:1.05rem;font-weight:700;color:#0c1a1a;display:flex;align-items:center;gap:8px}
.juz-sec-title-dot{width:7px;height:7px;background:#0d9488;border-radius:50%;box-shadow:0 0 0 3px #ccfbf1}

/* ── ALL 30 JUZ NAV ── */
.juz-all-nav{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:32px}
.juz-chip{padding:6px 14px;border-radius:20px;border:1.5px solid #e5f3f3;background:#fff;color:#4b7272;font-size:.78rem;font-weight:600;text-decoration:none;transition:all .15s}
.juz-chip:hover,.juz-chip.active{background:#0d9488;border-color:#0d9488;color:#fff}

/* ── PREV/NEXT ── */
.juz-prev-next{display:flex;justify-content:space-between;gap:12px;margin-top:32px;padding:0 4px}
.juz-nav-btn{
  display:flex;align-items:center;gap:10px;padding:14px 20px;
  background:#fff;border:1.5px solid #e5f3f3;border-radius:12px;
  text-decoration:none;color:#0c1a1a;font-size:.85rem;font-weight:600;
  transition:all .15s;flex:1;max-width:200px;
}
.juz-nav-btn:hover{border-color:#0d9488;background:#f0fdfa}
.juz-nav-btn.next{justify-content:flex-end}

/* ── SEO / CONTEXT BLOCK ── */
.juz-info-card{background:#fff;border:1.5px solid #e5f3f3;border-radius:14px;padding:24px;margin-bottom:20px}
.juz-info-card h2{font-size:1rem;font-weight:700;margin-bottom:10px;color:#0c1a1a}
.juz-info-card h3{font-size:.9rem;font-weight:700;margin:14px 0 6px;color:#0c1a1a}
.juz-info-card p{font-size:.85rem;color:#4b7272;line-height:1.7;margin-bottom:0}

/* ── TOAST ── */
.juz-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#0c1a1a;color:#fff;padding:10px 22px;border-radius:24px;font-size:.85rem;font-weight:600;opacity:0;transition:all .3s;pointer-events:none;z-index:9999}
.juz-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:600px){
  .juz-hero{padding:36px 20px 32px}
  .juz-hero h1{font-size:1.8rem}
  .juz-hstat{padding:4px 16px}
  .juz-view-bar{padding:0 12px;gap:5px;overflow-x:auto}
  #juzVerseList{padding:8px}
  .jv-ar{font-size:1.5rem}
}


/* ════ TRANSLITERATION PAGE STYLES ════ */
.tlit-page { max-width: 860px; margin: 0 auto; padding: 0 20px 60px; }

.tlit-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: .82rem; color: var(--text-2, #aaa);
  padding: 16px 0 24px; flex-wrap: wrap;
}
.tlit-breadcrumb a { color: var(--accent, #2ecc71); text-decoration: none; font-weight: 700; }

.tlit-hero {
  text-align: center;
  padding: 40px 24px 36px;
  background: linear-gradient(135deg, rgba(46,204,113,.07), rgba(52,152,219,.07));
  border-radius: 20px;
  border: 1px solid var(--border, #2a2a3e);
  margin-bottom: 32px;
}
.tlit-badge {
  display: inline-block;
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: #fff; font-weight: 900; font-size: .78rem;
  padding: 4px 14px; border-radius: 50px;
  letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: 16px;
}
.tlit-hero h1 {
  font-family: 'Nunito', sans-serif;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  color: var(--text, #fff);
  margin: 0 0 8px;
  font-style: italic;
}
.tlit-meaning {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  color: var(--text-2, #aaa);
  margin: 0 0 24px;
  line-height: 1.5;
}
.tlit-ref {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--surface, #1a1a2e);
  border: 1px solid var(--border, #2a2a3e);
  border-radius: 50px; padding: 8px 20px;
  font-size: .85rem; color: var(--text-2, #aaa);
}
.tlit-ref a { color: #2ecc71; text-decoration: none; font-weight: 700; }
.tlit-ref a:hover { text-decoration: underline; }

.tlit-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-top: 20px;
}
.tlit-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 22px; border-radius: 50px;
  font-weight: 800; font-size: .9rem;
  text-decoration: none; transition: all .18s;
}
.tlit-btn-primary {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: #fff;
  box-shadow: 0 4px 16px rgba(46,204,113,.3);
}
.tlit-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(46,204,113,.4); }
.tlit-btn-secondary {
  background: var(--surface, #1a1a2e);
  border: 1.5px solid var(--border, #2a2a3e);
  color: var(--text, #fff);
}
.tlit-btn-secondary:hover { border-color: #2ecc71; color: #2ecc71; }

/* Arabic display card */
.arabic-card {
  background: var(--surface, #1a1a2e);
  border: 1.5px solid var(--border, #2a2a3e);
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
  margin-bottom: 24px;
}
.arabic-text {
  font-family: 'Amiri Quran', 'Amiri', serif;
  font-size: clamp(2rem, 6vw, 3.5rem);
  direction: rtl;
  color: var(--text, #fff);
  line-height: 1.8;
  margin: 0 0 20px;
}
.arabic-transliteration {
  font-family: 'Nunito', sans-serif;
  font-size: 1.1rem;
  font-style: italic;
  color: #2ecc71;
  margin: 0 0 12px;
}
.arabic-translation {
  font-size: .95rem;
  color: var(--text-2, #aaa);
  line-height: 1.6;
}

.info-card {
  background: var(--surface, #1a1a2e);
  border: 1.5px solid var(--border, #2a2a3e);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 20px;
}
.info-card h2 {
  font-family: 'Nunito', sans-serif;
  font-size: 1.1rem; font-weight: 800;
  color: var(--text, #fff);
  margin: 0 0 12px;
  display: flex; align-items: center; gap: 8px;
}
.info-card p {
  color: var(--text-2, #aaa);
  font-size: .9rem; line-height: 1.7; margin: 0;
}

.related-slugs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 12px;
}
.related-slug-chip {
  display: inline-block;
  padding: 5px 12px; border-radius: 50px;
  border: 1.5px solid var(--border, #2a2a3e);
  background: transparent;
  color: var(--text-2, #aaa);
  font-size: .78rem; font-weight: 700;
  text-decoration: none; transition: all .15s;
}
.related-slug-chip:hover {
  border-color: #2ecc71; color: #2ecc71;
}

.not-found-card {
  text-align: center;
  padding: 48px 32px;
  background: var(--surface, #1a1a2e);
  border: 1.5px solid var(--border, #2a2a3e);
  border-radius: 20px;
  margin-bottom: 24px;
}
.not-found-card h2 { color: var(--text, #fff); font-size: 1.4rem; margin: 0 0 12px; }
.not-found-card p { color: var(--text-2, #aaa); font-size: .95rem; line-height: 1.6; }


/* ================================================================
   QURAN.COM MATCH — COMPLETE REDESIGN OVERRIDES
   Makes header, top bar, verse cards, and Arabic-only mode
   look exactly like quran.com screenshots
   ================================================================ */

/* ── TOP BAR — quran.com style ── */
.qtop {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  height: 56px;
  padding: 0 16px;
  gap: 6px;
  box-shadow: none;
}
[data-dark="1"] .qtop { background: #0f172a; border-bottom-color: #1e293b; }

/* Back button */
.qtop-back {
  font-size: .82rem;
  font-weight: 700;
  color: #111827;
  padding: 6px 12px;
  border-radius: 8px;
  gap: 6px;
}
.qtop-back i { color: #6b7280; font-size: .75rem; }
[data-dark="1"] .qtop-back { color: #e2e8f0; }

/* Center info */
.qtop-info h2 {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  font-family: 'Crimson Pro', Georgia, serif;
}
.qtop-info p { font-size: .7rem; color: #6b7280; }
[data-dark="1"] .qtop-info h2 { color: #f1f5f9; }

/* Toolbar buttons — quran.com pill style */
.tb {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 600;
  color: #374151;
  gap: 5px;
  border: 1.5px solid transparent;
  font-family: 'Crimson Pro', Georgia, serif;
}
.tb:hover { background: #f3f4f6; color: #111827; }
.tb.on {
  background: #17b26a;
  border-color: #17b26a;
  color: #fff;
}
/* Listen button = green pill like quran.com */
#tbPlay.on { background: #17b26a; border-color: #17b26a; }
[data-dark="1"] .tb { color: #94a3b8; }
[data-dark="1"] .tb:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }

/* Arabic / Translation toggle pills — quran.com style */
.tb-mode-group {
  display: flex;
  align-items: center;
  background: #f1f5f9;
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
[data-dark="1"] .tb-mode-group { background: #1e293b; }
.tb-mode-group .tb {
  border-radius: 7px;
  padding: 4px 12px;
  font-size: .74rem;
  border: none;
  background: transparent;
  color: #6b7280;
  font-weight: 600;
}
.tb-mode-group .tb.on {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
[data-dark="1"] .tb-mode-group .tb.on { background: #334155; color: #f1f5f9; }

/* ── PROGRESS BAR — thin teal line like quran.com ── */
.rbar { height: 2px; }
.rbar-fill { background: #0d9488; box-shadow: none; }

/* ── SIDEBAR — quran.com clean style ── */
.qs {
  border-right: 1px solid #e5e7eb;
  background: #fff;
}
[data-dark="1"] .qs { background: #0f172a; border-right-color: #1e293b; }

.qs-hd { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 10px 12px; }
[data-dark="1"] .qs-hd { background: #0f172a; border-bottom-color: #1e293b; }

.qs-inp {
  border: 1.5px solid #e5e7eb;
  border-radius: 9px;
  font-size: .82rem;
  padding: 8px 12px 8px 34px;
}
.qs-inp:focus { border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,.1); }

.qs-item {
  padding: 9px 14px;
  border-bottom: 1px solid #f1f5f9;
  border-left: 3px solid transparent;
  gap: 10px;
}
[data-dark="1"] .qs-item { border-bottom-color: rgba(255,255,255,.04); }
.qs-item:hover { background: #f0fdf9; border-left-color: rgba(13,148,136,.3); }
.qs-item.cur { background: #f0fdf9 !important; border-left-color: #0d9488 !important; }
.qs-item.cur .qs-en { color: #0d9488; font-weight: 800; }

.qs-num {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  font-size: .68rem;
  font-weight: 700;
  color: #374151;
  font-family: 'JetBrains Mono', monospace;
}
.qs-item.cur .qs-num,
.qs-item:hover .qs-num { background: #0d9488; color: #fff; border-color: #0d9488; }

.qs-en { font-size: .82rem; font-weight: 600; color: #1e293b; }
[data-dark="1"] .qs-en { color: #e2e8f0; }
.qs-ar { font-family: 'Amiri', serif; font-size: .95rem; color: #0d9488; }
.qs-sub { font-size: .62rem; color: #94a3b8; }
-prev {
  font-family: var(--font-ar, 'Amiri Quran', serif);
  font-size: 1.4rem;
  direction: rtl;
  text-align: center;
  padding: 12px 16px;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 10px;
  margin-top: 10px;
  color: var(--tx);
  line-height: 2;
  transition: font-family .2s;
}

/* ═══════════════════════════════════════════════════════════════
   SEPIA THEME IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════ */
[data-theme="sepia"] {
  --tx: #3d2b1f;
  --mu: #7a5c42;
  --bd: #d5c4b0;
  --bg: #f4ede0;
  --wh: #fdf6ec;
  --card-bg: #fdf6ec;
  --surf: #fdf6ec;
}
[data-theme="sepia"] .ar-text { color: #2a1a0e; }
[data-theme="sepia"] .tr-txt { color: #6b4c34; }
[data-theme="sepia"] .sh-bism-ar { color: #3d2b1f; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  .juz-hdr { padding: 12px 14px; }
  .juz-surah-hdr { padding: 10px 14px 8px; }
  .juz-ayah { padding: 12px 14px 10px; }
  .juz-ar { font-size: calc(var(--ar-sz) * 0.85); }
  .sh-hdr-row { gap: 14px; }
  .sh-callig { height: 54px; }
  .sh-en { font-size: 1.2rem; }
  .sh { padding: 28px 16px 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   QURANIC STRUCTURAL MARKERS
   ═══════════════════════════════════════════════════════════════ */

/* Ayah end marker ﴿١﴾ — inside the Arabic text flow */
.ayah-end-marker {
  font-family:'Scheherazade New','Amiri Quran','Amiri',serif;
  font-size:.68em;
  color:#c9a227;
  vertical-align:middle;
  margin-right:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-weight:400;
  width:1.85em;
  height:1.85em;
  border-radius:50%;
  border:1.5px solid #c9a227;
  box-shadow:inset 0 0 0 2.5px #fff, inset 0 0 0 4px rgba(201,162,39,.2);
  line-height:1;
  text-align:center;
  letter-spacing:0;
  word-spacing:0;
}
[data-dark="1"] .ayah-end-marker{
  color:#d4a820;border-color:#d4a820;
  box-shadow:inset 0 0 0 2.5px var(--bg),inset 0 0 0 4px rgba(212,168,32,.25);
}

/* Rub el Hizb divider ۞ — spans full width between verses */
.rub-hizb-marker {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 20px;
  color: var(--gold);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  border-top: 1px solid rgba(201,162,39,.3);
  border-bottom: 1px solid rgba(201,162,39,.3);
  background: linear-gradient(135deg, rgba(201,162,39,.06), transparent);
  margin-bottom: 4px;
}
.rub-hizb-marker::before,
.rub-hizb-marker::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.4), transparent);
}
[data-dark="1"] .rub-hizb-marker {
  border-color: rgba(201,162,39,.2);
  background: linear-gradient(135deg, rgba(201,162,39,.08), transparent);
}

/* Ruku marker ع in the verse meta */
.ruku-meta { color: #059669 !important; }
.ruku-ayn {
  font-family: 'Amiri', serif;
  font-size: 1rem;
  font-weight: 700;
  vertical-align: middle;
  color: #059669;
}
[data-dark="1"] .ruku-ayn { color: #34d399; }

/* Sajdah badge — dome icon */
.sajda-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(139,92,246,.12);
  color: #7c3aed;
  border: 1px solid rgba(139,92,246,.3);
  border-radius: 8px;
  padding: 2px 7px;
  font-size: .6rem;
  font-weight: 700;
  cursor: default;
}
.sajda-icon { font-size: .9rem; }
[data-dark="1"] .sajda-badge { background: rgba(139,92,246,.15); color: #a78bfa; border-color: rgba(167,139,250,.3); }

/* Waqf badges inline in Arabic text */
.wqf-badge {
  display: inline-block;
  font-family: 'Amiri', 'Amiri Quran', serif;
  font-size: .72rem;
  font-weight: 700;
  vertical-align: super;
  margin: 0 1px;
  cursor: help;
  line-height: 1;
  padding: 0 1px;
  user-select: none;
}
/* Waqf-e-Laazim م — must stop — red */
.wqf-mz { color: #dc2626; }
/* Laa — do not stop — green */
.wqf-laa { color: #16a34a; }
/* Waqf-e-Jaaiz ج — permissible — teal */
.wqf-mj { color: var(--teal); }
/* Qaly — better to stop — orange */
.wqf-qly { color: #d97706; }
/* Sila — better to continue — blue */
.wqf-slaa { color: #2563eb; }
/* Qif — pause — purple */
.wqf-qf { color: #7c3aed; }
/* Saktah — brief silence — dark teal */
.wqf-skta { color: #0f766e; font-size: .65rem; }
/* Rub el Hizb ۿ inline — gold */
.wqf-rb { color: var(--gold); font-size: 1rem; vertical-align: middle; }
/* Ruku ع inline — green */
.wqf-ayn { color: #059669; font-size: 1rem; vertical-align: middle; }
[data-dark="1"] .wqf-mz { color: #f87171; }
[data-dark="1"] .wqf-laa { color: #4ade80; }
[data-dark="1"] .wqf-qly { color: #fbbf24; }
[data-dark="1"] .wqf-slaa { color: #60a5fa; }
[data-dark="1"] .wqf-ayn { color: #34d399; }

/* ═══════════════════════════════════════════════════════════════
   AUTO-SCROLL SETTINGS FLOATING BOX
   ═══════════════════════════════════════════════════════════════ */
.ascroll-box {
  position: sticky;
  top: calc(var(--qtop-h) + 48px);
  z-index: 200;
  background: var(--wh);
  border: 1.5px solid var(--teal);
  border-radius: 14px;
  padding: 12px 16px;
  margin: 8px 16px 0;
  box-shadow: 0 4px 24px rgba(14,165,160,.2);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 440px;
}
[data-dark="1"] .ascroll-box {
  background: var(--card-bg);
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.ascroll-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: .2px;
}
.ascroll-hdr i { font-size: .75rem; }
.ascroll-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ascroll-lbl {
  font-size: .72rem;
  color: var(--mu);
  font-weight: 600;
  white-space: nowrap;
  min-width: 80px;
}
.ascroll-btns {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.ascroll-btn {
  padding: 4px 10px;
  background: var(--bg);
  border: 1.5px solid var(--bd);
  border-radius: 14px;
  font-size: .7rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--mu);
  font-family: inherit;
  transition: all .12s;
}
.ascroll-btn:hover { border-color: var(--teal); color: var(--teal); }
.ascroll-btn.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.ascroll-stop-btn {
  width: 100%;
  padding: 8px;
  background: rgba(239,68,68,.08);
  border: 1.5px solid rgba(239,68,68,.3);
  border-radius: 10px;
  color: #dc2626;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .15s;
}
.ascroll-stop-btn:hover { background: rgba(239,68,68,.15); }
[data-dark="1"] .ascroll-stop-btn { color: #f87171; border-color: rgba(248,113,113,.3); background: rgba(239,68,68,.1); }

/* ═══════════════════════════════════════════════════════════════
   PATCH CSS — auto-scroll pill, emotion badge, mobile fixes
   ═══════════════════════════════════════════════════════════════ */

/* ── AUTO-SCROLL PILL ──────────────────────────────────────── */
.ascroll-pill {
  position: fixed;
  bottom: 24px;
  right: 16px;
  z-index: 350;
  touch-action: none;
  user-select: none;
}
body.audio-playing .ascroll-pill { bottom: calc(78px + 14px); }
@media(max-width:600px){ body.audio-playing .ascroll-pill { bottom: calc(72px + 10px); } }

.ascroll-pill-drag {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--surf,#fff);
  border: 1.5px solid var(--teal,#0ea5e9);
  border-radius: 999px;
  padding: 5px 10px 5px 9px;
  box-shadow: 0 3px 16px rgba(14,165,160,.22);
  cursor: grab;
  white-space: nowrap;
}
.ascroll-pill-drag:active { cursor: grabbing; }

.ascroll-pill-icon {
  font-size: .9rem;
  color: var(--teal,#0ea5e9);
  animation: asp-bounce 1.6s ease-in-out infinite;
  display: inline-block;
}
@keyframes asp-bounce {
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(3px); }
}

.ascroll-pill-label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--teal,#0ea5e9);
  letter-spacing: .03em;
}

.ascroll-pill-speeds { display:flex; gap:2px; }

.asp-btn {
  background: none;
  border: 1px solid var(--bd,#e5e7eb);
  border-radius: 999px;
  padding: 2px 7px;
  font-size: .63rem;
  color: var(--mu,#6b7280);
  cursor: pointer;
  transition: all .15s;
  font-family: inherit;
}
.asp-btn:hover { border-color:var(--teal); color:var(--teal); }
.asp-btn.on { background:var(--teal); border-color:var(--teal); color:#fff; }

.ascroll-pill-stop {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  padding: 0 2px;
  font-size: .78rem;
  opacity: .65;
  transition: opacity .15s;
  line-height: 1;
}
.ascroll-pill-stop:hover { opacity:1; }

/* Hide label on very small phones */
@media(max-width:360px){ .ascroll-pill-label{ display:none; } }

/* ── EMOTION BADGE ──────────────────────────────────────────── */
.emotion-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: linear-gradient(135deg,rgba(14,165,160,.13),rgba(14,165,160,.05));
  border: 1px solid rgba(14,165,160,.28);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .62rem;
  color: var(--teal,#0ea5e9);
  font-weight: 700;
  animation: em-pop .28s cubic-bezier(.34,1.56,.64,1);
  margin-left: 6px;
  vertical-align: middle;
}
@keyframes em-pop { from{transform:scale(.5);opacity:0} to{transform:scale(1);opacity:1} }

/* ── MOBILE IMPROVEMENTS ────────────────────────────────────── */
@media(max-width:480px){
  /* Topbar more compact */
  .qtop { padding: 0 10px; height: 50px; }
  .qtop-acts { gap: 3px; }
  .tb { width: 30px; height: 30px; font-size: .75rem; }

  /* Arabic scales to screen width */
  :root { --ar-sz: clamp(1.4rem, 5.5vw, 2rem); }

  /* Verse card padding */
  .vi-inner { padding: 14px 12px 10px !important; }

  /* Verse action buttons wrap */
  .vt-acts { flex-wrap: wrap; gap: 4px; }
  .vt-acts .va-btn { font-size: .64rem; padding: 4px 7px; }

  /* Settings full-width */
  .spanel { width: 100vw !important; right: 0 !important; border-radius: 18px 18px 0 0; }

  /* Settings tabs scroll */
  .sp-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; }
  .sp-tab  { flex-shrink: 0; }

  /* Audio bar - hide long preview on tiny screens */
  .ab-verse-preview { display: none; }

  /* Word tooltip full-width */
  .wtip { width: calc(100vw - 28px) !important; left: 14px !important; right: 14px !important; }

  /* qpop tabs scroll */
  .qpop-tabs { overflow-x: auto; flex-wrap: nowrap; }
  .qpop-tab  { flex-shrink: 0; font-size: .7rem; padding: 7px 10px; }

  /* Bottom action buttons */
  .vb { gap: 4px; flex-wrap: wrap; }
  .vb-btn { font-size: .67rem; padding: 5px 9px; }

  /* Surah header compact */
  .sh-meta { flex-wrap: wrap; gap: 4px; }
  .sh-badge { font-size: .64rem; padding: 3px 8px; }
}

.tts-quote-info{
  display:flex;align-items:flex-start;gap:7px;
  background:rgba(14,165,160,.07);border:1px solid rgba(14,165,160,.2);
  border-radius:8px;padding:7px 10px;font-size:.68rem;color:var(--mu);line-height:1.5;width:100%
}
.tts-speaker-preview{
  width:100%;background:rgba(0,0,0,.04);border:1px solid var(--bd);
  border-radius:10px;overflow:hidden;
}
.tts-sp-row{
  display:flex;align-items:center;gap:10px;padding:6px 12px;
  border-bottom:1px solid var(--bd);font-size:.72rem;
}
.tts-sp-row:last-child{border-bottom:none}
.tts-sp-tag{
  font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.7px;
  padding:2px 8px;border-radius:10px;white-space:nowrap;flex-shrink:0;
}
.tts-sp-narrator{background:rgba(14,165,160,.15);color:var(--teal)}
.tts-sp-quote1{background:rgba(99,102,241,.15);color:#6366f1}
.tts-sp-quote2{background:rgba(245,158,11,.15);color:#d97706}
.tts-sp-female{background:rgba(236,72,153,.15);color:#ec4899}
.tts-sp-name{font-size:.72rem;color:var(--tx);font-weight:500}

/* ════════════════════════════════════════════════════════════
   ENHANCED POPUP — Tafsir / Lessons / Hadith / Reflections
   ════════════════════════════════════════════════════════════ */

/* Popup container — sharper shadow, glassmorphism tint */
.qpop {
  box-shadow: 0 -12px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(14,165,160,.08);
}
@media(min-width:760px){
  .qpop {
    box-shadow: -8px 0 48px rgba(0,0,0,.18), 0 0 0 1px rgba(14,165,160,.08);
  }
}

/* Header — gradient accent bar at top */
.qpop-hd {
  background: var(--card-bg);
  border-bottom: 1px solid var(--bd);
  padding-top: 16px;
}
.qpop-hd::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), #10b981, #6366f1);
  border-radius: 0 0 3px 3px;
  margin: -16px -18px 14px;
}

/* Verse card inside header — rich gradient bg */
.qpop-verse {
  background: linear-gradient(135deg, rgba(14,165,160,.07) 0%, rgba(99,102,241,.04) 100%);
  border: 1px solid rgba(14,165,160,.15);
  border-radius: 14px;
  padding: 14px 16px 12px !important;
  margin-bottom: 10px;
  border-bottom: none !important;
}
.qpop-ref {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.qpop-ref::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--teal);
  border-radius: 50%;
  flex-shrink: 0;
}
.qpop-ar {
  font-size: 1.55rem;
  line-height: 2.15;
  color: var(--tx);
  margin-bottom: 6px;
}
.qpop-tr {
  font-size: .85rem;
  line-height: 1.72;
  color: var(--mu);
  border-top: 1px solid rgba(14,165,160,.12);
  padding-top: 8px;
  margin-top: 4px;
}

/* Navigation selects — more polished */
.qpop-surah-sel, .qpop-verse-sel {
  border-radius: 10px;
  border: 1.5px solid var(--bd);
  font-weight: 600;
  transition: border-color .14s;
}
.qpop-surah-sel:hover, .qpop-verse-sel:hover { border-color: var(--teal); }

/* Arrow buttons — round */
.qpop-arr {
  border-radius: 50%;
  width: 30px; height: 30px;
  transition: all .14s;
}
.qpop-close {
  border-radius: 50%;
  width: 30px; height: 30px;
  transition: all .14s;
}

/* Tab bar — pill indicator style */
.qpop-tabs {
  padding: 0 14px;
  gap: 2px;
  border-bottom: none;
  background: var(--card-bg);
  box-shadow: inset 0 -1px 0 var(--bd);
}
.qpop-tab {
  padding: 10px 13px;
  font-size: .71rem;
  border-radius: 8px 8px 0 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  letter-spacing: .2px;
  transition: all .14s;
}
.qpop-tab:hover {
  color: var(--teal);
  background: rgba(14,165,160,.06);
}
.qpop-tab.on {
  color: var(--teal);
  border-bottom-color: var(--teal);
  background: rgba(14,165,160,.08);
  font-weight: 800;
}

/* Panel entrance animation */
@keyframes qpopSlideIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qpop-panel.on {
  animation: qpopSlideIn .22s cubic-bezier(.16,1,.3,1);
}

/* Body scrollbar */
.qpop-body::-webkit-scrollbar { width: 4px; }
.qpop-body::-webkit-scrollbar-thumb { background: var(--bd); border-radius: 4px; }
.qpop-body::-webkit-scrollbar-thumb:hover { background: var(--teal); }

/* Source selector — pill group */
.qpop-src-row {
  background: var(--bg);
  border-radius: 12px;
  padding: 10px 12px;
  gap: 7px;
  border: 1px solid var(--bd);
  border-bottom: none;
  margin-bottom: 14px;
  align-items: center;
}
.qpop-src-btn {
  border-radius: 22px;
  font-size: .7rem;
  padding: 5px 13px;
  font-weight: 800;
  letter-spacing: .2px;
}
.qpop-src-btn.on {
  box-shadow: 0 2px 10px rgba(14,165,160,.3);
}

/* ── TAFSIR PANEL ── */
.qpop-tf-box {
  border-radius: 14px;
  padding: 18px 20px;
  border: 1px solid var(--bd);
  background: var(--card-bg);
  margin-bottom: 14px;
  position: relative;
  overflow: hidden;
  animation: qpopSlideIn .2s ease;
}
.qpop-tf-box::before {
  content: '\f518'; /* fa-book-open */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  right: 14px; top: 12px;
  font-size: 1.8rem;
  color: rgba(14,165,160,.07);
  pointer-events: none;
}
.qpop-tf-box h3 {
  font-size: .88rem;
  font-weight: 800;
  margin: 16px 0 7px;
  color: var(--teal);
  padding-left: 10px;
  border-left: 3px solid var(--teal);
}
.qpop-tf-box h3:first-child { margin-top: 0; }
.qpop-tf-box p {
  font-size: .9rem;
  line-height: 1.9;
  color: var(--tx);
  margin-bottom: 11px;
}
.qpop-tf-box .tf-ar {
  border-left: 3px solid var(--teal);
  background: rgba(14,165,160,.07);
  font-size: 1.2rem;
  padding: 12px 14px;
  border-radius: 0 10px 10px 0;
}

/* Group note banner */
.qpop-group-note {
  background: rgba(14,165,160,.08);
  border: 1px solid rgba(14,165,160,.2);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: .74rem;
  color: var(--teal);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── LESSONS PANEL ── */
.qpop-mm-step {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed rgba(14,165,160,.18);
  align-items: flex-start;
  transition: background .12s;
  border-radius: 8px;
  margin: 0 -4px;
  padding-left: 4px;
}
.qpop-mm-step:last-child { border-bottom: none; }
.qpop-mm-step:hover { background: rgba(14,165,160,.04); }
.qpop-mm-num {
  width: 30px; height: 30px;
  background: linear-gradient(135deg, var(--teal) 0%, #10b981 100%);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 900;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(14,165,160,.35);
  margin-top: 2px;
}
.qpop-mm-txt {
  font-size: .9rem;
  line-height: 1.78;
  color: var(--tx);
  padding-top: 4px;
}

/* ── HADITH PANEL ── */
.qpop-hd-card {
  border-radius: 16px;
  padding: 18px 18px 16px 22px;
  margin-bottom: 14px;
  background: linear-gradient(135deg, var(--card-bg) 75%, rgba(14,165,160,.04));
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
  transition: transform .15s, box-shadow .15s;
  animation: qpopSlideIn .22s ease;
}
.qpop-hd-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(14,165,160,.12);
}
.qpop-hd-card::before {
  width: 4px;
  background: linear-gradient(180deg, var(--teal) 0%, #10b981 50%, #6366f1 100%);
  border-radius: 4px 0 0 4px;
}
.qpop-hd-grade {
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 9px;
  color: var(--teal);
}
.qpop-hd-txt {
  font-size: .92rem;
  line-height: 1.9;
  color: var(--tx);
  font-style: italic;
  padding: 10px 14px;
  background: rgba(14,165,160,.05);
  border-radius: 10px;
  position: relative;
}
.qpop-hd-txt::before {
  content: '\201C';
  font-size: 2.4rem;
  line-height: 0;
  vertical-align: -0.55em;
  color: rgba(14,165,160,.25);
  font-family: Georgia, serif;
  margin-right: 4px;
}
.qpop-hd-src {
  font-size: .71rem;
  color: var(--mu);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--bd);
  display: flex;
  align-items: center;
  gap: 6px;
}
.qpop-hd-src::before {
  content: '\f02d'; /* fa-book */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--teal);
  font-size: .62rem;
}

/* ── REFLECTION CARDS ── */
.qpop-rf-card {
  border-left: 4px solid var(--teal);
  border-radius: 0 14px 14px 0;
  padding: 15px 18px;
  margin-bottom: 13px;
  background: linear-gradient(135deg, rgba(14,165,160,.06) 0%, var(--bg) 100%);
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
  transition: transform .15s, box-shadow .15s;
  animation: qpopSlideIn .22s ease;
}
.qpop-rf-card:hover {
  transform: translateX(3px);
  box-shadow: 0 3px 14px rgba(14,165,160,.1);
}
.qpop-rf-title {
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--teal);
}
.qpop-rf-txt {
  font-size: .91rem;
  line-height: 1.85;
  color: var(--tx);
}

/* ── AI ANSWER BOX ── */
.qpop-ai-ans.on {
  background: linear-gradient(135deg, var(--teal-p) 0%, var(--bg) 100%);
  border: 1px solid rgba(14,165,160,.2);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: .91rem;
  line-height: 1.85;
  animation: qpopSlideIn .2s ease;
}
.qpop-ai-inp {
  border-radius: 12px;
  padding: 10px 14px;
  border: 1.5px solid var(--bd);
  transition: all .14s;
}
.qpop-ai-inp:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(14,165,160,.12);
}
.qpop-ai-send {
  border-radius: 12px;
  padding: 10px 16px;
  font-size: .8rem;
  letter-spacing: .2px;
  transition: all .14s;
}
.qpop-ai-send:hover {
  background: var(--teal-d);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14,165,160,.3);
}

/* Chip buttons — spruced up */
.qpop-chip {
  border-radius: 22px;
  font-size: .69rem;
  padding: 6px 13px;
  font-weight: 700;
  letter-spacing: .2px;
  transition: all .15s;
}
.qpop-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(14,165,160,.2);
}

/* Language selector row */
.qpop-lang-row {
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 16px;
}
.qpop-lang-sel {
  border-radius: 8px;
  font-size: .77rem;
}

/* TTS read-aloud button */
.qpop-tts-btn {
  border-radius: 22px;
  font-size: .69rem;
  letter-spacing: .3px;
  transition: all .14s;
}
.qpop-tts-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14,165,160,.25);
}

/* Loading spinner */
.qpop-spin {
  padding: 36px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--mu);
  font-size: .82rem;
}
.qpop-spin .tspin { margin: 0; }

/* Note panel */
.qpop-note-ta {
  border-radius: 14px;
  padding: 14px 16px;
  font-size: .91rem;
  min-height: 130px;
  transition: all .15s;
}
.qpop-note-ta:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(14,165,160,.1);
  background: var(--card-bg);
}
.qpop-note-save {
  border-radius: 12px;
  padding: 9px 20px;
  font-size: .82rem;
  letter-spacing: .3px;
  transition: all .14s;
}
.qpop-note-save:hover {
  background: var(--teal-d);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(14,165,160,.3);
}

/* Empty state */
.qpop-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--mu);
  font-size: .85rem;
}
.qpop-empty i {
  display: block;
  font-size: 2rem;
  color: var(--bd);
  margin-bottom: 12px;
}

/* Section divider label */
.qpop-section-label {
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--mu);
  margin: 18px 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.qpop-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--bd);
}

/* Mobile tweaks */
@media(max-width:759px){
  .qpop-hd::before { margin: -16px -18px 12px; }
  .qpop-verse { padding: 12px 14px 10px !important; }
  .qpop-ar { font-size: 1.35rem; }
  .qpop-panel { padding: 14px 15px 60px; }
  .qpop-hd-card { padding: 15px 15px 13px 19px; }
  .qpop-rf-card { padding: 12px 14px; }
  .qpop-mm-step { gap: 11px; padding: 12px 0; }
  .qpop-tabs { padding: 0 8px; }
  .qpop-tab { padding: 9px 10px; font-size: .68rem; }
}

/* ════════════════════════════════════════════════════════════
   AUDIO SETTINGS TAB — KISS redesign
   ════════════════════════════════════════════════════════════ */

/* Row label for audio settings */
.sp-audio-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  flex-wrap: wrap;
}
.sp-audio-lbl {
  font-size: .78rem;
  font-weight: 600;
  color: var(--tx);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sp-audio-lbl i { color: var(--mu); font-size: .74rem; width: 14px; }

/* TTS card — subtle teal-tinted bg when TTS is enabled */
.sp-tts-card {
  background: linear-gradient(135deg, rgba(14,165,160,.04) 0%, transparent 100%);
  border: 1px solid rgba(14,165,160,.15);
  border-radius: 14px;
  padding: 14px 14px 12px !important;
  margin-bottom: 0 !important;
}
.sp-tts-card .sp-sec-t {
  border-bottom-color: rgba(14,165,160,.2);
  margin-bottom: 10px;
}

/* Narrator chip — compact single-line voice indicator */
.sp-narrator-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 7px 10px;
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: 10px;
  flex-wrap: wrap;
}

/* Preview button */
.sp-preview-btn {
  font-size: .77rem;
  padding: 8px 14px;
  border-radius: 10px;
  gap: 6px;
}

/* Range input accent colour (fallback for browsers that need it) */
input[type=range] { accent-color: var(--teal); }

/* mp3q notice tweak */
#mp3q-notice {
  font-size: .73rem;
  line-height: 1.5;
}

/* ── Read-Aloud dependent toggles (indented under main switch) ── */
.sp-tts-dep {
  padding-left: 18px;
  border-left: 2px solid rgba(14,165,160,.2);
  margin-left: 4px;
}
.sp-tts-dep .sp-tr-lbl {
  font-size: .76rem;
  color: var(--mu);
}
.sp-tts-hint {
  font-size: .67rem;
  color: var(--mu);
  padding: 6px 4px 2px;
  line-height: 1.6;
  display: flex;
  gap: 5px;
  align-items: flex-start;
}
.sp-tts-hint i { color: var(--teal); flex-shrink: 0; margin-top: 2px; }