/* ================================================================
   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;
    flex-direction:column;
    gap:6px;
  }
  /* NOTE: display is intentionally NOT set here — the base .abar rule already
     defaults to display:none, and .abar.on switches it to display:flex (see
     the .on override just below). This block used to set "display:flex"
     unconditionally on plain .abar, which overrode the display:none default
     on every mobile viewport — the player bar was stuck visible at the bottom
     of the screen even before any audio ever played, and closing it (which
     only removes the .on class) did nothing because this rule kept forcing
     it to show regardless of class. */
  .abar.on{display:flex}
  /* 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.on{
    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)}

/* ── READING MODE — the ACTUAL markup renderRM() builds (rm-tline/rm-tnum/
   rm-tts-btn/rm-aw/rm-vmark/rm-ctrl-bar/etc). This class set had ZERO CSS
   rules anywhere — .rm-verse/.rm-num/.rm-txt/.rm-ar above are leftover from
   an earlier version of this feature and are no longer used by the JS at
   all, so they were harmlessly styled while the real markup rendered as
   bare unstyled <div>/<button> elements: cramped, no spacing, and the TTS/
   tafsir icon buttons showing as plain browser-default bordered boxes with
   no button chrome. That's the actual "no CSS" bug — not the icon font. ── */
.rm-page-inner{max-width:720px;margin:0 auto}
.rm-pg-hdr{
  display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:14px;margin-bottom:18px;border-bottom:2px solid var(--bd);
  font-weight:800;font-size:1.15rem;color:var(--tx);
}
.rm-pg-hdr span:last-child{font-family:var(--font-ar);font-size:1.3rem;font-weight:400}
.rm-bism{
  font-family:var(--font-ar);font-size:1.7rem;text-align:center;
  color:var(--tx);margin:6px 0 22px;direction:rtl;
}
.rm-arabic-flow{
  font-family:var(--font-ar);font-size:1.55rem;line-height:2.6;
  text-align:right;direction:rtl;color:var(--tx);
  background:var(--wh);border:1px solid var(--bd);border-radius:var(--radius-lg);
  padding:22px 24px;margin-bottom:22px;box-shadow:var(--sh);
}
.rm-aw{cursor:pointer;border-radius:6px;transition:color .12s,background .12s;padding:2px 1px}
.rm-aw:hover{background:var(--teal-p);color:var(--teal-d)}
.rm-vmark{
  font-size:1rem;color:var(--gold);font-weight:600;margin:0 4px;
  display:inline-block;
}
.rm-ctrl-bar{
  display:flex;align-items:center;flex-wrap:wrap;gap:10px;
  padding:12px 16px;margin-bottom:20px;
  background:var(--bg);border:1px solid var(--bd);border-radius:var(--radius-md);
}
.rm-ctrl-lbl{
  display:flex;align-items:center;gap:6px;
  font-size:.82rem;font-weight:700;color:var(--mu);flex-shrink:0;
}
.rm-ctrl-sel{
  flex:1;min-width:140px;padding:8px 12px;
  border:1.5px solid var(--bd);border-radius:var(--radius-sm);
  background:var(--wh);color:var(--tx);font-size:.85rem;font-weight:600;
  font-family:inherit;cursor:pointer;
}
.rm-tts-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border:1.5px solid var(--bd);border-radius:999px;
  background:var(--wh);color:var(--tx);font-size:.8rem;font-weight:700;
  font-family:inherit;cursor:pointer;transition:all .15s;flex-shrink:0;
}
.rm-tts-btn:hover{border-color:var(--teal);color:var(--teal-d);background:var(--teal-p)}
.rm-tts-btn.on{background:var(--teal);border-color:var(--teal);color:#fff}
.rm-trans-block{display:flex;flex-direction:column}
.rm-tline{
  display:flex;align-items:flex-start;gap:12px;
  padding:14px 4px;border-bottom:1px solid var(--bd);
  font-size:1rem;line-height:1.75;color:var(--tx);
}
.rm-tline:hover{background:var(--bg)}
.rm-tnum{
  flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:.72rem;
  font-weight:700;color:var(--teal);background:var(--teal-p);
  padding:4px 8px;border-radius:6px;margin-top:2px;
}
.rm-tafsir-box{
  margin:-6px 0 14px;padding:14px 16px;
  background:var(--teal-p);border-left:3px solid var(--teal);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-size:.92rem;line-height:1.7;color:var(--tx);
}
@media(max-width:640px){
  .rm-arabic-flow{font-size:1.3rem;padding:16px 14px;line-height:2.3}
  .rm-ctrl-bar{padding:10px 12px}
  .rm-tts-btn{padding:7px 11px;font-size:.75rem}
}
/* 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{
  /* NOTE: was font-family:"Font Awesome 6 Free" — that font is never loaded
     anywhere on this site (only bootstrap-icons is), so this hover icon
     silently rendered nothing, making the verse number look unclickable
     even though onclick="copyVerseLink(...)" worked fine. Switched to the
     bootstrap-icons "link" glyph, which actually matches what clicking
     the number does (copies the verse's permalink). */
  content:"\f470";
  font-family:"bootstrap-icons";
  font-size:.85rem;
  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;
  /* WAS text-align:justify + text-align-last:right. That still stretched
     every wrapped line EXCEPT the last one across the full container width
     with huge kashida gaps — barely noticeable in a wide column, but very
     visible in any narrower one (the "Side by Side" mode's Arabic column is
     roughly half the page width), where only 1-2 words fit per line and each
     one gets stretched edge-to-edge. Real kashida justification is a print/
     Mushaf-page convention (kept intentionally on .msh-text below, a genuine
     full printed page) — a single verse widget should just flow naturally,
     right-aligned, ending wherever it ends. This matches quran.com's own
     reading view, which does not stretch-justify individual verses either. */
  text-align:right;
  text-align-last:right;
  -webkit-text-align-last:right;
  direction:rtl;
  color:#1a1a1a;
  padding:20px 0 8px;
  word-spacing:normal;
  letter-spacing:normal;
  -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 */
/* Decorative per-surah Bismillah banner — see the long comment where this
   markup is built (renderSH() in quran_surah.html) for why this renders the
   single ﷽ ligature locally instead of loading a broken external image. */
.sh-bism-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:22px 20px 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-glyph{
  font-family:var(--font-ar);
  font-size:3rem;
  line-height:1.3;
  color:var(--gold);
  direction:rtl;
  text-align:center;
}
[data-dark="1"] .sh-bism-glyph{color:#e2c568}
.sh-bism-en{
  font-size:.78rem;
  color:var(--mu);
  font-style:italic;
  text-align:center;
}

/* 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}
/* NOTE: was `transform:translateY(0)` — visually identical to no transform,
   but ANY transform value other than "none" makes the element establish a
   new containing block, which silently breaks position:fixed on anything
   inside it (browsers position fixed descendants relative to the nearest
   transformed ancestor instead of the viewport). Every verse card gets
   `.in-view` once it scrolls into view, so this was quietly breaking the
   "..." verse options menu (position:fixed, opens correctly in the DOM/JS,
   but paints in the wrong place — effectively invisible) on EVERY verse on
   the page. `transform:none` animates identically (transitioning to/from
   "none" is fully supported) without the containing-block side effect. */
.vi.in-view{opacity:1;transform:none}
/* 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)}

/* ── "Juz" MODE TOGGLE — the in-surah-page button (loadJuzView() in
   quran_surah.html), completely separate from the standalone /quran/juz/<n>/
   landing page above. This markup (.juz-hdr/.juz-surah-block/.juz-ayah/etc)
   had ZERO CSS anywhere — rendering as bare unstyled text, and its "< Prev"/
   "Next >" buttons were reusing .juz-nav-btn from the standalone page above,
   which is a large flex:1/max-width:200px block card meant for a totally
   different layout — hence the two nav buttons stacking as big boxes here
   instead of sitting as a small inline pair next to "Para N of 30". Scoped
   under #juz-content so none of this touches the standalone Juz page. ── */
#juz-content{max-width:760px;margin:0 auto}
.juz-hdr{
  display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;
  padding-bottom:14px;margin-bottom:20px;border-bottom:2px solid var(--bd);
}
.juz-hdr-num{font-size:1.1rem;font-weight:800;color:var(--tx);display:flex;align-items:center;gap:8px}
.juz-hdr-num i{color:var(--teal)}
.juz-hdr-sub{font-size:.85rem;color:var(--mu);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.juz-hdr .juz-nav-btn{
  display:inline-flex;flex:none;max-width:none;
  padding:5px 12px;font-size:.78rem;font-weight:700;border-radius:999px;
}
.juz-loader{padding:60px 20px;text-align:center;color:var(--mu)}
.juz-loader .tspin{margin:0 auto 12px}
.juz-surah-block{margin-bottom:28px}
.juz-surah-hdr{
  display:flex;align-items:baseline;gap:10px;margin-bottom:10px;
  padding-bottom:8px;border-bottom:1px solid var(--bd);
}
.juz-surah-hdr .juz-surah-num{
  width:26px;height:26px;background:var(--teal-p);color:var(--teal-d);
  border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:700;flex-shrink:0;
}
.juz-surah-name{font-weight:700;color:var(--tx);font-size:.95rem}
.juz-surah-ar{font-family:var(--font-ar);color:var(--tx);font-size:1.15rem;margin-left:auto}
.juz-surah-note{font-size:.75rem;color:var(--mu);font-style:italic}
.juz-bism{font-family:var(--font-ar);font-size:1.5rem;text-align:center;color:var(--tx);margin:4px 0 18px;direction:rtl}
.juz-ayah{padding:16px 0;border-bottom:1px solid var(--bd)}
.juz-ayah-top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.juz-vnum{
  cursor:pointer;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;
  color:var(--teal);background:var(--teal-p);padding:4px 9px;border-radius:6px;
}
.juz-play-btn{
  width:30px;height:30px;border-radius:50%;border:1.5px solid var(--bd);
  background:var(--wh);color:var(--tx);display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;font-size:.75rem;
}
.juz-play-btn:hover{border-color:var(--teal);color:var(--teal-d);background:var(--teal-p)}
.juz-ar{font-family:var(--font-ar);font-size:1.5rem;line-height:2.4;text-align:right;color:var(--tx);margin-bottom:10px}
.juz-tr{font-size:.95rem;line-height:1.75;color:var(--tx)}
.juz-split-notice{
  margin-top:10px;padding:10px 14px;background:var(--gold-p);border-left:3px solid var(--gold);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;font-size:.85rem;color:var(--tx);
}
.juz-split-notice a{color:var(--teal-d);font-weight:700}
@media(max-width:640px){
  .juz-ar{font-size:1.25rem;line-height:2.1}
  .juz-surah-ar{font-size:1rem}
}

@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; }