}



  /*.list{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  // Fix scrolling cutoff by tabs
The .list inside .leftScroll needs bottom padding to account for the tabs (≈80px).
  */
   .list{background:var(--panel);border:0px solid var(--line);border-radius:14px;overflow:hidden;padding-bottom:110px;-webkit-mask-image:linear-gradient(to bottom, black calc(100% - 80px), transparent 100%);mask-image:linear-gradient(to bottom, black calc(100% - 80px), transparent 100%);}
  /* _2708 (T1 MHK - HE CALLED IT EXACTLY: 'there is some invisible mask and that is getting in the way').
     A mask-image forces its element onto a composited layer, and .list is the WHOLE 114-surah list - many
     thousands of pixels tall. iOS caps how large such a layer can be rasterised, and past that cap the
     content simply never paints: MHK could scroll all the way to Al-Furqan and still find the list cut off
     with black underneath. Dropped below 821px. Nothing is lost - the mobile bottom fade already comes from
     .leftScroll.qp-faded, which _qpHomeFadeBot() measures and gates properly (it even removes itself when
     the list is too short). Desktop keeps the mask. */
  @media (max-width: 820px){
    .list{ -webkit-mask-image:none !important; mask-image:none !important; }
  }

  .browsebar .pillRowWrap { opacity: 0.8; }

  /* _1731: Hide pillRow until all dynamic pill injections complete.
     Was: visible from t=0 with 4 static pills, then Favs/Saved/Vocab/
     Khatm injected at various times (DOMContentLoaded + setTimeout(800)).
     User saw a flash of intermediate orderings.  Now: rendered with
     opacity:0; JS adds .qp-pills-ready after settling for a smooth
     240ms fade-in.  Race-condition-proof. */
  .browsebar .pillRow { opacity: 0; transition: opacity 240ms ease-out; }
  .browsebar .pillRow.qp-pills-ready { opacity: 1; }

  .section{padding:10px 0.12px;border-top:1px solid var(--line)}
  .section:first-child{border-top:0}
  .sec-title{color:var(--sub);font-size:11px;text-transform:uppercase;letter-spacing:.12em;margin:2px 2px 6px}

  /* 99 Names header with right-aligned sort pills */
  /*
  .section .sec-head{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 6px}*/

  .section .sec-head{display:none;align-items:center;justify-content:space-between;margin:2px 2px 6px}

  .section .sec-head .right{display:flex;gap:6px}
  .section .sec-head .right .pill{padding:5px 5px}

  /* === 99 Names (Asma) styles - Stacked Layout === */
  .asma-row{
    display: grid;
    grid-template-columns: 50px 1fr;
    gap: 16px;
    padding: 18px 26.12px;
    /* border-top: 1px solid var(--line); */
    cursor: pointer;
    align-items: start;
    border-radius: 22px;
    margin-bottom: 10px;
  }
  .asma-row:first-child{border-top:0}
  .asma-row:hover{background:rgba(40,184,235,0.06)}
  .asma-row.asma-active{background:rgba(40,184,235,0.12)}
  
  /* Number column - right side feel */
  .asma-num{
    font-size:43px;
    font-weight:300;
    color:rgba(155,177,199,0.35);
    line-height:1;
    text-align:center;
    padding-top: 0px;
    margin-left: -10px;
    margin-top: -4px;
    cursor:pointer;
    transition:color 0.2s ease;
  }
  .asma-num:hover{color:rgba(40,184,235,0.6)}
  
  /* Content column - stacked vertically */
  .asma-content{
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  
  /* Arabic name - own row */
  .asma-ar{
    font-size:40px;
    color:#1a6b5e;
    font-family:'me_quran','Traditional Arabic','Amiri','Scheherazade',serif;
    direction:rtl;
    text-align:left;
    line-height:1.3;
  }
  
  /* English transliteration - own row */
  .asma-en{
    font-size:22px;
    font-weight:600;
    color:#28b8eb;
  }
  
  /* Short translation - own row */
  .asma-short{
    font-size:15px;
    color:var(--fg);
    opacity:0.85;
  }
  
  /* Meaning description - own row */
  .asma-meaning{
    font-size:13px;
    color:#9bb1c7;
    line-height:1.4;
    margin-top:2px;
  }
  
  /* References count */
  .asma-refs{
    display:none;
    font-size:12px;
    color:rgba(155,177,199,0.55);
    margin-top:4px;
  }



  /* Chapter rows */
  .srow{display:grid;grid-template-columns:60px 1fr auto;gap:14px;align-items:center;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
    padding:21.12px;cursor:pointer;padding-left: 28px;padding-right:16px;}

  .srow + .srow {
      /* _1407: thicker divider to match native app rows. */
      border-top: 1px solid rgba(255,255,255,0.12);
  }
  body.qp-theme-light .srow + .srow {
      border-top: 1px solid rgba(0,0,0,0.10);
  }
  .row + .row {
      /*border-top:1px solid var(--line);*/
      /*border-top: 0.1px solid #41484e;*/
      border-top: 0.1px solid #ffffffad;
  }

  .srow:first-child{ border-top:1px solid rgba(255,255,255,0.12); }   /* _2817 (MHK): was border-top:0 - Al-Fatihah gets its top line; the gap under the search area closes */
  .leftScroll{ padding-top:26px; }   /* _2822 (MHK): seats the at-rest first row (border included) below the fade's 22px solid edge - the strip/launch pattern */
  body.qp-theme-light .srow:first-child{ border-top:1px solid rgba(0,0,0,0.10); }
  /*.srow:hover{background:#03060e}*/
  .srow:hover {
      background: #23273270;
  }
  .row:hover{
    background: #23273270;
  }

  

  .num{width:auto;min-width:28px;height:28px;display:grid;place-items:center;border-radius:8px;color:#bcd3ea;font-weight:600;margin-top:-19px;font-size:20px;border:0px solid #2b3c4a;}
  .stitle{font-size:19px;font-weight:650;letter-spacing:.2px}
  .ssub{color:#9bb1c7}
  .ar{color:#28d1c0;font-size:20px;white-space:nowrap;margin-left:12px;margin-top: 13px;font-family:'me_quran';-webkit-font-smoothing: antialiased;}
  .score{margin-left:8px;font-size:11px;opacity:.28;user-select:none}
  .badge{margin-left:10px;font-size:12px;padding:3px 8px;border:1px solid #214351;border-radius:999px;background:#0e2026;color:#05f2cd}
  .badge .arrow{opacity:.7;margin-left:4px}

  .row{padding:12px;cursor:pointer}
  .row:first-child{border-top:0}
  .row:hover{background:#03060e}
  .title{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
  .topic{font-weight:500;font-size:16px}
  .count{color:#9bb1c7;font-size:13px}
  .chev{margin-left:auto;font-size:18px;line-height:1;user-select:none}
  .chev.hidden{visibility:hidden}
  .sublist{margin-top:8px;padding-left:12px;display:grid;gap:6px}

  /* _1894: expanded parent topic row gets clear visual demarcation.
     Border lives on .title (the main row content) so it sits between
     the title and the sublist.  Topic name itself becomes bold +
     italic to mark it as the selected parent. */
  .row.is-expanded > .title {
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.45);
    padding-bottom: 10px;
    margin-bottom: 6px;
  }
  .row.is-expanded > .title > .topic {
    font-weight: 700;
    font-style: italic;
  }

  .subitem{display:flex;gap:14.8px;align-items:baseline;cursor:pointer;margin-bottom: 4px;}
  .subitem .subname{font-size:14px}
  .subitem .subcount{color:#9bb1c7;font-size:12px}
  .subitem:hover{opacity:.9}

  /* Smooth topic sublist expansion/collapse */
  .sublist {
    overflow: hidden;
    max-height: 2000px;
    opacity: 1;
    transition: max-height 0.35s ease-out, opacity 0.25s ease-out;
  }
  .sublist.is-closing {
    max-height: 0 !important;
    opacity: 0 !important;
  }
  .sublist.is-opening {
    animation: sublistExpand 0.35s ease-out;
  }
  @keyframes sublistExpand {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 2000px; }
  }

  .empty{color:var(--sub);padding:18px;text-align:center}
  mark{background:transparent;color:inherit;border-bottom:2px solid var(--brand);padding:0 .5px;border-radius:0;}

  .iframeCard{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;min-height:820px;position:relative}
  .frameHead{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600;color:#cde3ff;letter-spacing:.2px}
  .frameBox{position:relative;width:100%;height:var(--frameH,70vh);min-height:420px;background:#000}
  .frameBox iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
  .blackCover{position:absolute;inset:0;background:#000;display:none}
  .blackCover.show{display:block}

  .toast{position:relative;margin:8px 0 10px}
  .toast .msg{display:inline-block;background:#23141b;border:1px solid #3b2430;color:#ffb2c2;padding:8px 10px;border-radius:10px;font-size:13px}

  @media (max-width:1100px){
    :root{--left:100%;--mid:100%;--right:100%}
    .layout{grid-template-columns:1fr}
    .iframeCard{min-height:420px}
    .frameBox{height:820px}
  }

  /* #BOOT overlay */
  .boot{
    position:fixed; inset:0; z-index:9999;
    display:grid; place-items:center;
    background:rgba(11,15,20,.92);
    backdrop-filter:saturate(140%) blur(2px);
  }
  .bootCard{
    width:min(560px,92vw);
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:16px;
    padding:18px 18px 16px;
    box-shadow:0 10px 40px rgba(0,0,0,.35);
  }
  .bootTitle{font-weight:800; letter-spacing:.2px; margin-bottom:6px;}
  .bootMsg{color:#bcd3ea; margin-bottom:10px}
  .bootBarWrap{
    height:10px; border-radius:999px; background:#0e131a;
    border:1px solid #1f2a36; overflow:hidden;
  }
  .bootBar{
    height:100%; width:0%;
    background:linear-gradient(90deg,#12c2b5,#28d1c0);
    transition:width .25s ease;
  }
  .bootHint{margin-top:10px; font-size:12px; color:#9bb1c7; opacity:.85}

  /* === Verse Viewer overlay === */
  /* _1812: iOS settings-panel-style slide-from-RIGHT on open.
     translateX(100%) → 0 with the same curve and duration the
     settings sub-panels use (line 13847+).  Matches Apple's
     UINavigationController push transition.  Faster and snappier
     than v1470's 525ms — 280ms feels iOS-native.
     Note v1470 had said 'slide-from-right' in the comment but
     the actual transform was translateX(-100%) which is from the
     LEFT.  Corrected here. */
  #verse-viewer-host{
    position:fixed; inset:0; z-index:9998;
    display:grid; place-items:center;
    background:rgba(11,15,20,.65);
    /* _1820: start off-screen-right AND blurred.  During slide-in,
       transform and filter transition together; the overlay arrives
       in focus.  Filter is on the overlay itself — .app is never
       touched, avoiding v1814/v1817 loading-screen layout shift. */
    opacity:0; transform:translateX(100%); filter: blur(8px);
    transition:opacity .22s ease,
               transform 380ms cubic-bezier(.32, .72, 0, 1),
               filter 380ms cubic-bezier(.32, .72, 0, 1);
    margin-top:41px;
    will-change: transform, filter;
  }
  /* _1820: visible state — blur clears as overlay reaches translateX(0). */
  #verse-viewer-host.is-in{ opacity:1; transform:translateX(0); filter: blur(0); }
  /* _1815: extended close transition on mobile so slide-out is more
     enjoyable.  Open stays snappy at 380ms; close is now 520ms with
     the same iOS easing.  Triggered by closeViewer adding the
     .vv-is-closing class to body before transform changes.
     _1820: filter also transitions for 520ms on close. */
  body.vv-is-closing #verse-viewer-host {
    transition:opacity .32s ease,
               transform 520ms cubic-bezier(.32, .72, 0, 1),
               filter 520ms cubic-bezier(.32, .72, 0, 1);
  }
  /* _1818: blur on .app removed.  Caused layout-shift artifacts on
     the loading screen and other states.  Reverting to no-blur
     permanently.  iOS native push transitions don't blur the
     underlying view either. */
  /* Mobile: when verse viewer is open (body.no-scroll), hide topbar and remove offset */
  @media (max-width: 820px) {
    body.no-scroll .topbar { display: none !important; }
  }
  /* Always remove the topbar offset when overlay is open — fixes 769–820px gap */
  body.no-scroll #verse-viewer-host { margin-top: 0 !important; }
  /* _1820: .is-in rule moved up (now includes filter: blur(0)).
     .is-out kept for any legacy callers that toggle it. */
  #verse-viewer-host.is-out{ opacity:0; transform:translateX(100%); filter: blur(8px); }
  /* _2845 (MHK): THE IN-PLACE PUSH - hop renders keep the overlay mounted; only the .vv-card content
     pushes in (the outgoing card's clone is JS-inline styled and exits the opposite way). 100vw start
     guarantees fully off-screen even for a centered desktop card narrower than the viewport. */
  @keyframes qpVvPushInR{ from{ transform:translateX(100vw); } to{ transform:translateX(0); } }
  @keyframes qpVvPushInL{ from{ transform:translateX(-100vw); } to{ transform:translateX(0); } }
  #verse-viewer-host.qp-push-in-r .vv-card{ animation:qpVvPushInR 380ms cubic-bezier(.32,.72,0,1); }
  #verse-viewer-host.qp-push-in-l .vv-card{ animation:qpVvPushInL 380ms cubic-bezier(.32,.72,0,1); }

  /* _1816: desktop blur-fade REMOVED.  Caused a centering shift on
     the initial Quran-search loading screen because .app gets
     'transition: filter / transform' applied unconditionally, which
     could fire transitions during early page lifecycle before
     body.no-scroll was settled.  Per user direction, desktop now uses
     the same slide-from-right animation as mobile.  Previously this
     @media block neutralised the slide on desktop and applied blur to
     .app; both are gone. */

.vv-card{
  width:min(1260px,98vw);   /* _2546: MHK - cap the verses overlay at 1260px */
  max-height:min(100vh,100dvh);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 18px 80px rgba(0,0,0,.45);
  display:flex;
  flex-direction:column;
}

/* Why: Changes .vv-head to a column flex container with two rows. Title gets full width minus close button, icons are right-aligned on the second row. */
/* vv-head: column flex, icons on top, title on bottom */
/* Why: Top row now right-aligns icons, bottom row left-aligns title with full width. */ 
 
.vv-head{
  display:flex;
  background:#212534;   /* _2655 (MHK T1): distinct bar colour = the Search box slate */
  flex-direction: column;
  padding: 10px 14px 8px;
  border-bottom:1px solid var(--line);
  flex:0 0 auto;
  position: relative;
  z-index: 10;
}
    


.vv-head-row{
  display: flex;
  align-items: center;
  width: 100%;
}

/* Why: Explicit ordering: folder → share → play → X.
 */
.vv-head-top{
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 8px;
}
.vv-head-top .vv-x{
  order: 99;  /* Always last */
}
.vv-head-top .vv-play{
  order: 90;  /* Before X */
}
.vv-head-top .vv-share-overlay{
  order: 80;  /* Before play */
}
.vv-head-top .vv-save{
  order: 70;  /* First (folder) */
}











.vv-head-bottom{
  justify-content: flex-start;
}
.vv-head-bottom .vv-title{
  /* flex: 1; */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.1em;
  color:#27b9eb;
}





/* Clean verse viewer header */
  .vv-head-clean {
    padding: 0 !important;
    border-bottom: 1px solid var(--line);
  }
  
  .vv-head-single {
    display: flex;
    align-items: center;
    padding-top: 23px;
    padding-bottom: 7px;
    padding-left: 8px;
    padding-right: 8px;
    gap: 3px;
  }

  .vv-back {
    background: transparent;
    border: none;
    color: #25d0bf;
    font-size: 35px;
    cursor: pointer;
    padding: 4px 8px;
    margin: -4px;
    line-height: 1;
  }
  .vv-back:hover {
    opacity: 0.8;
  }
  /* _2660 (T4 MHK): HOME icon top-left of the sticky header, before the back arrow (order: home, back, title). */
  .vv-home {
    background: transparent;
    border: none;
    color: #25d0bf;
    cursor: pointer;
    padding: 4px 6px;
    margin: -4px 2px -4px -4px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
  }
  .vv-home:hover { opacity: 0.8; }
  .vv-home svg { display: block; }


 .vv-title-area {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 2px;
  }




  .vv-title-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  
  .vv-title-area .vv-title {
    flex-shrink: 1;
    flex-grow: 0;
  }
  .vv-surah-chevron {
    flex-shrink: 0;
    margin-right: auto;
  }





  .vv-subtitle {
    margin-top:-7px;
    font-size: 14px;
    color: rgba(255,255,255,0.82);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .vv-subtitle:empty {
    display: none;
  }
  .vv-subtitle .vv-sub-arrow {
    color: #25d0bf;
    font-size: 10px;
  }






  /* --- Fix: put chevron right after title (like Aal-i-Imraan) --- */

/* Let title + chevron share the first line; subtitle goes under them */
.vv-title-area{
  display:flex;
  flex-wrap:wrap;          /* allow subtitle to break to next line */
  align-items:center;      /* align title + chevron nicely */
  gap: 2px 4px;            /* row gap, column gap */
  min-width:0;
}
.vv-title-area.clickable{ cursor:pointer; }
.vv-title-area.clickable .vv-title:hover{ text-decoration-color:rgba(255,255,255,0.3); }
/* _2877 (T1 MHK): 'the empty white space around the Bismillah should not be clickable ... the sticky header
   must not function as one large clickable container.' It never was one container - .vv-title-area (the
   surah-selector target) simply carried flex:1, so its BOX stretched from the back arrow to the right-hand
   icons and swallowed every blank pixel around the absolutely-centred 180x28 bismillah. Hugging the content
   and letting an auto margin do the pushing keeps the layout identical and gives the blank space to nobody.
   Scoped under .vv-head so these win on SPECIFICITY, not on source order. */
.vv-head .vv-title-area{ flex:0 1 auto; margin-right:auto; }
.vv-head .vv-title-wrap{ flex:0 1 auto; }
.vv-head .vv-surah-chevron{ margin-right:0; }

/* Make wrapper not consume flex space; its children become flex items */
.vv-title-wrap{
  display: contents;
}

/* Title stays on first line */
.vv-head-clean .vv-title{
  order: 1;
  flex: 0 1 auto;
  min-width:0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Chevron sits immediately after title.
   _1871: nudge chevron up 4px to vertically align with the title
   baseline.  margin-top must use !important to override the
   'margin: 0 !important' shorthand above. */
.vv-surah-chevron{
  order: 2;
  margin: 0 !important;
  margin-top: -4px !important;
  flex: 0 0 auto;
  align-self: center;
}

/* Subtitle forced to second line, takes full width */
.vv-subtitle{
  order: 3;
  flex: 1 1 100%;
  min-width:0;
}


  body.qp-theme-light .vv-subtitle {
    color: rgba(0,0,0,0.5);
  }

  /* _1861/_1862: title is single line on mobile (v1862 JS truncates
     to 22 chars before render).  Keep line-clamp:2 as a CSS-only
     fallback if JS doesn't run.  16px font, line-height 1.3.
     _1871: margin-top: -5px nudges title block up to align with the
     back-arrow visual center; margin-left: 2px adds a small indent. */
  .vv-head-clean .vv-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--fg);
    line-height: 1.3;
    padding-right: 0px;
    margin-top: -5px;
    margin-left: 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    word-break: normal;
    overflow-wrap: break-word;
  }
  /* _1862: when JS marks the title as truncated, it's guaranteed one
     line - tighten clamp to 1 line for safety. */
  .vv-head-clean .vv-title[data-truncated="yes"] {
    -webkit-line-clamp: 1;
    white-space: nowrap;
  }

  /* _1805: Search Results header — two-line eyebrow + term layout.
     When the title is a search result, the rendering switches from
     plain text to a structured HTML block with .vv-title-eyebrow on
     top and .vv-title-term below.  Eyebrow is small, uppercase,
     letter-spaced, dim; term is the visual focus. */
  .vv-title-eyebrow {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.2;
    margin-bottom: 1px;
  }
  body.qp-theme-light .vv-title-eyebrow {
    color: rgba(0, 0, 0, 0.42);
  }
  .vv-title-term {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--fg);
    white-space: normal;
    word-break: break-word;
  }
  /* When the title contains the structured eyebrow+term, undo
     ellipsis / nowrap from the parent .vv-title block above. */
  .vv-head-clean .vv-title:has(.vv-title-eyebrow) {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }

  /* _1807: DRAMATIC SEARCH-RESULTS FLASH — Apple-style.  Three
     coordinated animations fire when .vv-head-flash is added:
       (1) inset box-shadow inner glow at high opacity (overrides
           even the !important background of .vv-head)
       (2) eyebrow + term fade-in pop from y+3px
       (3) draw-in underline beneath the term, left-to-right,
           then fades out  — the Apple 'writes itself in' trick.
     Total duration 900ms.  The .vv-head-flash class is removed
     by setTimeout after 950ms so the animations don't replay if
     CSS is recomputed. */
  .vv-head-flash {
    animation: qpVvHeadFlash 900ms ease-out;
  }
  @keyframes qpVvHeadFlash {
    0%   { box-shadow: inset 0 0 0   0  rgba(52, 179, 156, 0);    }
    12%  { box-shadow: inset 0 0 56px 12px rgba(52, 179, 156, 0.95); }
    35%  { box-shadow: inset 0 0 60px 10px rgba(52, 179, 156, 0.70); }
    70%  { box-shadow: inset 0 0 48px 6px  rgba(52, 179, 156, 0.32); }
    100% { box-shadow: inset 0 0 0   0  rgba(52, 179, 156, 0);    }
  }

  /* Pop-in fade-up for eyebrow + term during the flash. */
  .vv-head-flash .vv-title-eyebrow {
    animation: qpHeadFadeUp 380ms ease-out;
  }
  .vv-head-flash .vv-title-term {
    animation: qpHeadFadeUp 420ms ease-out;
  }
  @keyframes qpHeadFadeUp {
    0%   { opacity: 0; transform: translateY(3px); }
    100% { opacity: 1; transform: translateY(0);    }
  }

  /* Apple draw-in underline beneath the term during the flash.
     Uses an absolutely-positioned ::after pseudo-element so it
     doesn't affect layout.  Gradient fades at the edges for a
     polished feel rather than a hard rectangle. */
  .vv-title-term {
    position: relative;
  }
  .vv-title-term::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 2px;
    background: linear-gradient(90deg,
      rgba(52, 179, 156, 0)    0%,
      rgba(52, 179, 156, 0.95) 25%,
      rgba(52, 179, 156, 0.95) 75%,
      rgba(52, 179, 156, 0)    100%);
    transform: scaleX(0);
    transform-origin: left center;
    opacity: 0;
    pointer-events: none;
  }
  .vv-head-flash .vv-title-term::after {
    animation: qpTermUnderline 720ms cubic-bezier(0.22, 0.61, 0.36, 1) 180ms forwards;
  }
  @keyframes qpTermUnderline {
    0%   { transform: scaleX(0); opacity: 1; }
    55%  { transform: scaleX(1); opacity: 1; }
    100% { transform: scaleX(1); opacity: 0; }
  }

  /* _1806: Desktop cursor on clickable word elements.  Gated by
     (hover:hover) and (pointer:fine).  Updated from v1805 to be
     PRECISE — cursor:pointer ONLY on word elements (not container
     blocks), so whitespace between words doesn't show pointer.
     Containers '.vv-ar', '.vv-en', '.vv-tr' get explicit
     cursor:default to override any inherited cursor:text from
     user-select:text rules.  '.ar-waqf' stays default since it has
     pointer-events:none.  Trade-off: English (.vv-en) words don't
     show pointer because they aren't wrapped in individual word
     spans at render time — a future enhancement could wrap them
     like translit's .tr-word does. */
@media (hover: hover) and (pointer: fine) {
  .vv-left { -webkit-user-select: text; user-select: text; cursor: text; }
  .vv-ar, .vv-ar2 { -webkit-user-select: text; user-select: text; cursor: text; }
  .vv-tr, .vv-tr-word { -webkit-user-select: text; user-select: text; }   /* _2755 (MHK): the translit native-tray fix - the desktop-only (hover+fine) block was the sole grant; .vv-tr sits outside .vv-left/.vv-right since _2712, so mobile never got it */
  .ar-word { -webkit-user-select: text; user-select: text; }
  .vv-right { -webkit-user-select: text; user-select: text; }
}

/* _2141: word tip = two quran.com-style pills (square magnifier + meaning rectangle ending in >). */
#qp-word-tip {
  position: fixed; z-index: 99999; pointer-events: auto; direction: ltr;
  margin-top: 6px; margin-left: 10px;   /* _2389: nudge the pill clear of the word so it's less intrusive */
  display: flex; align-items: center; gap: 6px;
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility 0s linear .22s;
}
#qp-word-tip.is-visible { opacity: 1; visibility: visible; transition: opacity .15s ease; }
.qp-mode-mob-br{ display:none; }
@media (max-width: 767px){ .qp-mode-mob-br{ display:inline; } }   /* _2391: the banner's two-modes line breaks only on mobile */
/* _2393: make 'Show me How & Close' noticeable - glowing breathing teal pill (matches the INSTALL NOW / icon-button feel) */
@keyframes tmShowclosePulse{
  0%,100%{ box-shadow:0 0 6px 0 rgba(94,232,208,0.13); }
  50%{ box-shadow:0 0 11px 1px rgba(94,232,208,0.24); }
}
.tm-mode-showclose{
  border-radius:0 !important;
  border:0.5px solid rgba(94,232,208,0.7) !important;
  background:rgba(94,232,208,0.06) !important;
  color:#eafffb !important;
  letter-spacing:0.3px;
  animation:tmShowclosePulse 2.4s ease-in-out infinite;
  transition:transform .12s ease, background .2s ease;
  -webkit-tap-highlight-color:transparent;
}
.tm-mode-showclose:hover{ transform:translateY(-1px); background:rgba(94,232,208,0.16) !important; }
.tm-mode-showclose:active{ transform:scale(0.96); }
@media (prefers-reduced-motion: reduce){ .tm-mode-showclose{ animation:none; } }
.qp-tip-pill{ -webkit-appearance:none; appearance:none; cursor:pointer; margin:0; font-family:system-ui,-apple-system,sans-serif; line-height:1;
  background:rgb(15 128 158); border:1px solid rgba(56,189,248,0.25); border-radius:8px; box-shadow:0 3px 12px rgba(0,0,0,0.45);
  color:rgba(210,230,255,0.96); display:inline-flex; align-items:center; }
.qp-tip-pill:hover{ background:#159fc0; }
.qp-tip-search{ width:30px; height:30px; justify-content:center; padding:0; flex:0 0 auto; }
.qp-tip-search svg{ width:14px; height:14px; display:block; }
.qp-tip-open{ height:30px; padding:0 9px 0 11px; gap:7px; max-width:260px; }
.qp-tip-meaning{ font-size:11px; font-weight:700; letter-spacing:0.9px; color:rgba(210,230,255,0.96); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qp-tip-arrow{ font-size:15px; font-weight:700; opacity:0.8; flex:0 0 auto; }
body.qp-theme-light .qp-tip-pill{ background:rgb(15 128 158); border-color:rgba(13,143,160,0.3); box-shadow:0 3px 12px rgba(0,0,0,0.15); color:#fff; }
body.qp-theme-light .qp-tip-pill:hover{ background:#0c6e88; color:#fff; }
body.qp-theme-light .qp-tip-meaning{ color:#fff; }

  @media (hover: hover) and (pointer: fine) {
    /* Container-level: default cursor (overrides inherited cursor:text) */
    .vv-ar         { cursor: default; }
    .vv-en         { cursor: default; }
    .vv-tr         { cursor: text; user-select: text; -webkit-user-select: text; }
    .vv-lang-text  { cursor: default; }
    /* Precise word-level: pointer cursor */
    .ar-word          { cursor: pointer; }
    .vv-tr .tr-word   { cursor: text; }  /* _1924: text cursor for drag selection */
    /* _1807: english + other-language word spans (wrapped at render
       time by window._qpWrapWordsForCursor).  Now ALL four word
       types get precise hyperlink-style cursor on desktop. */
    .vv-en .en-word        { cursor: pointer; }
    .vv-lang-text .lang-word { cursor: pointer; }
    /* Explicit default for non-clickable waqf marks */
    .ar-waqf       { cursor: default; }
  }


  .vv-head-clean .vv-verse-count {
    display:none;
    color: #7a8ba3;
    font-size: 14px;
    white-space: nowrap;
  }
  
  /* Surah selector chevron button */
  .vv-surah-chevron {
    background: transparent;
    border: none;
    color: #25d0bf;
    padding: 2px 6px;
    margin-left: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }
  .vv-surah-chevron svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.5;
  }



  .vv-surah-chevron:hover {
    opacity: 0.8;
  }
  .vv-surah-chevron.is-open {
    transform: rotate(180deg);
  }
  /* _2477: rapid-flick VERSE-NUMBER RAIL - slides in from the right to jump within the current surah */
  .vv-vrail{
    position:absolute; top:50%; right:0;
    transform:translate(110%,-50%);
    max-height:78vh; width:84px; z-index:45;   /* _2525: wider for chapter:verse labels */
    transition:transform .32s cubic-bezier(.32,.72,0,1);
    pointer-events:none;
  }
  .vv-vrail.is-open{ transform:translate(0,-50%); pointer-events:auto; opacity:0.5; }
  .vv-vrail-scroll{
    max-height:78vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
    background:linear-gradient(to left, rgba(8,12,22,0.97), rgba(8,12,22,0.86));
    border:1px solid rgba(255,255,255,0.08); border-right:none;
    border-radius:14px 0 0 14px;
    box-shadow:-10px 0 28px rgba(0,0,0,0.45);
    display:flex; flex-direction:column; scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior:contain;
  }
  .vv-vrail-scroll::-webkit-scrollbar{ display:none; width:0; height:0; }
  .vv-vrail-n{
    flex:0 0 auto; width:100%; padding:11px 0;
    background:none; border:none; border-bottom:1px solid rgba(255,255,255,0.05);
    color:rgba(220,230,245,0.72); font-weight:700; font-size:13px;   /* _2525: fits 2:286 */
    font-family:system-ui,sans-serif; cursor:pointer; text-align:center; line-height:1;
    transition:background .12s ease, color .12s ease;
  }
  .vv-vrail-n:hover{ background:rgba(37,208,191,0.12); color:#eafffb; }
  .vv-vrail-n.is-cur{ color:#05f2cd; background:rgba(37,208,191,0.16); box-shadow:inset 3px 0 0 #05f2cd; }
  body.qp-theme-light .vv-vrail-scroll{ background:linear-gradient(to left, rgba(250,250,253,0.98), rgba(250,250,253,0.9)); border-color:rgba(0,0,0,0.08); }
  body.qp-theme-light .vv-vrail-n{ color:rgba(40,55,75,0.8); border-bottom-color:rgba(0,0,0,0.05); }
  body.qp-theme-light .vv-vrail-n.is-cur{ color:#0d8fa0; background:rgba(13,143,160,0.12); box-shadow:inset 3px 0 0 #0d8fa0; }
  /* _2478: search-results summary - grouped sheet (chevron entry removed _2530) */
  .qp-results-sheet .qp-rs-head{ flex:0 0 auto; padding:14px 18px 10px; font-size:15px; font-weight:800; color:var(--text,#eaf2ff); }
  .qp-results-sheet .qp-rs-headcount{ display:block; font-size:12px; font-weight:600; opacity:.6; margin-top:3px; }
  .qp-results-sheet .qp-rs-body{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px 12px 24px; }
  .qp-rs-group{ padding:10px 0 8px; border-bottom:1px solid rgba(255,255,255,0.06); }
  .qp-rs-ghead{ display:flex; align-items:center; gap:8px; margin:2px 4px 9px; }
  .qp-rs-gnum{ font-size:12px; font-weight:800; color:#05f2cd; background:rgba(37,208,191,0.14); border-radius:6px; padding:2px 8px; flex:0 0 auto; }
  .qp-rs-gen{ font-weight:700; font-size:14.5px; color:var(--text,#eaf2ff); }
  .qp-rs-gar{ font-family:'me_quran','UthmanicHafs','Amiri',serif; font-size:18px; color:rgba(220,230,245,0.72); margin-left:2px; direction:rtl; }
  .qp-rs-gcount{ margin-left:auto; font-size:11px; font-weight:700; opacity:.5; flex:0 0 auto; }
  .qp-rs-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 4px; }
  .qp-rs-chip{ font-family:ui-monospace,Menlo,monospace; font-size:12.5px; font-weight:700; color:#cfe6ff; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.12); border-radius:8px; padding:5px 10px; cursor:pointer; transition:background .12s ease,border-color .12s ease,transform .1s ease; }
  .qp-rs-chip:hover{ background:rgba(37,208,191,0.14); border-color:rgba(37,208,191,0.4); color:#eafffb; }
  .qp-rs-chip:active{ transform:translateY(1px); }
  body.qp-theme-light .qp-rs-gar{ color:rgba(40,55,75,0.72); }
  body.qp-theme-light .qp-rs-chip{ color:#28506e; background:rgba(0,0,0,0.04); border-color:rgba(0,0,0,0.12); }
  body.qp-theme-light .qp-rs-chip:hover{ background:rgba(13,143,160,0.12); border-color:rgba(13,143,160,0.4); color:#0d5f6e; }
  
  /* Surah selector bottom sheet */
  .qp-surah-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 10060;   /* _2548: above the mini player (10051/10053) - it used to slide UNDER the bar */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0,0,0,0);
    backdrop-filter: blur(0px);
    opacity: 0;
    pointer-events: none;
    transition: background 0.25s ease, backdrop-filter 0.25s ease, opacity 0.25s ease;
  }
  .qp-surah-sheet-overlay.is-visible {
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    opacity: 1;
    pointer-events: auto;
  }
  /* _2561: MHK's devtools-tuned deep blur - DESKTOP ONLY (heavy backdrop blur is a mobile perf risk) */
  @media (min-width: 821px) {
    .qp-surah-sheet-overlay.is-visible {
      -webkit-backdrop-filter: blur(47px);
      backdrop-filter: blur(47px);
    }
  }
  .qp-surah-sheet {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: 95vh;   /* _2474: nearly full-screen selector */
    max-height: min(95dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 10px));   /* _2474: cap under the notch so the drag handle stays visible */
    background: var(--bg, #0d1117);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  .qp-surah-sheet-overlay.is-visible .qp-surah-sheet {
    transform: translateY(0);
  }
  .qp-surah-sheet-handle {
    width: 40px;
    height: 4px;
    /*background: rgba(255,255,255,0.3);*/
    background: rgb(240 229 229 / 32%);
    border-radius: 2px;
    margin: 12px auto 8px;
    flex-shrink: 0;
    cursor: pointer;
    padding: 3px 40px;
    /*background-clip: content-box;*/
  }
  .qp-surah-sheet-handle:hover {
    background-color: rgba(255,255,255,0.5);
  }
  .qp-surah-sheet-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: #2fb6c9;   /* _2560: MHK - a friendly, VISIBLE blue X for the less tech-savvy (the drag handle alone was too subtle) */
    color: #04252b;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
    z-index: 5;   /* _2573: above the .qp-sheet-swipe-zone (z-index:2) so the X actually receives clicks */
  }
  .qp-surah-sheet-close:hover {
    background: rgba(255,255,255,0.2);
  }
  body.qp-theme-light .qp-surah-sheet-handle {
    background-color: rgba(0,0,0,0.2);
  }
  body.qp-theme-light .qp-surah-sheet-handle:hover {
    background-color: rgba(0,0,0,0.3);
  }
  body.qp-theme-light .qp-surah-sheet-close {
    background: rgba(0,0,0,0.08);
    color: #374151;
  }
  body.qp-theme-light .qp-surah-sheet-close:hover {
    background: rgba(0,0,0,0.12);
  }
  .qp-surah-sheet-header {
    padding: 8px 16px 12px;
    border-bottom: 1px solid var(--line, rgba(255,255,255,0.1));
    flex-shrink: 0;
  }
  .qp-surah-sheet-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--fg, #fff);
  }
  .qp-surah-sheet-header p {
    margin: 4px 0 0;
    font-size: 13px;
    color: rgba(255,255,255,0.6);
  }
  .qp-surah-sheet-list {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .qp-surah-sheet-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    gap: 14px;
    border-bottom: 1px solid var(--line, rgba(255,255,255,0.06));
    cursor: pointer;
    transition: background 0.15s ease;
  }
  .qp-surah-sheet-item:hover {
    background: rgba(255,255,255,0.05);
  }
  .qp-surah-sheet-item.is-current {
    background: rgba(37, 208, 191, 0.15);
  }
  .qp-surah-sheet-num {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.08);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #25d0bf;
    flex-shrink: 0;
  }
  .qp-surah-sheet-item.is-current .qp-surah-sheet-num {
    background: #25d0bf;
    color: #000;
  }
  .qp-surah-sheet-info {
    flex: 1;
    min-width: 0;
  }
  .qp-surah-sheet-item.qp-topic-item {
    padding-left: 20px;
  }


  .qp-surah-sheet-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--fg, #fff);
    margin-bottom: 2px;
  }
  .qp-subtopic-arrow {
    color: #25d0bf;
    margin-right: 6px;
    font-weight: 400;
  }
  .qp-surah-sheet-item.is-subtopic {
    padding-left: 28px;
  }
  .qp-surah-sheet-item.is-subtopic .qp-surah-sheet-num {
    font-size: 12px;
    width: 26px;
    height: 26px;
  }
  /* _1483: dual-column picker — verse numbers on the right */
  .qp-surah-sheet-body {
    flex: 1;
    display: flex;
    min-height: 0;
  }
  /* _2245: Surah/Juz/Page tabs */
  /* _2559: MHK - the classic underline-tab look (like Verse Tools / Page Tools): plain text, teal
     active with a teal underline, no pill backgrounds. */
  .qp-sheet-tabs { display:flex; gap:0; padding:0; flex-shrink:0; border-bottom:1px solid rgba(255,255,255,0.07); margin-bottom:20px; margin-top:11px; }   /* _2560: air below the tabs so content doesn't start flush (MHK). _2625: MHK spec - 20px below, 11px above */
  .qp-sheet-tab { flex:1; background:transparent; border:none; border-bottom:2.5px solid transparent; border-radius:0; padding:11px 4px 10px; font:600 14.5px system-ui,sans-serif; color:#6b7c8c; cursor:pointer; letter-spacing:0.2px; transition:color .2s ease, border-color .2s ease; }
  .qp-sheet-tab.is-active { background:transparent; color:#25d0bf; border-bottom-color:#25d0bf; }
  .qp-sheet-tab-search { display:flex; align-items:center; justify-content:center; }   /* _2625: the magnifier tab - the svg rides currentColor so it themes like the text tabs */
  body.qp-theme-light .qp-sheet-tabs { border-bottom-color:rgba(0,0,0,0.08); }
  body.qp-theme-light .qp-sheet-tab { background:transparent; color:#5b6b7a; }
  body.qp-theme-light .qp-sheet-tab.is-active { background:transparent; color:#0d8fa0; border-bottom-color:#0d8fa0; }
  .qp-sheet-altlist { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; display:none; }
  /* _2625: SEARCH SPOTLIGHT - dim/blur classes (no z-index games; the header + search box are simply left untouched) */
  /* _2732 (MHK): his donate-icon rule, verbatim; and every bottom-tab icon block-rendered + centred so
     History and Settings sit level with the rest. */
  #ql-bottom-tabs .tab-donate .tab-icon svg {
    display: block;
    width: 29px;
    height: 29px;
  }
  #ql-bottom-tabs .tab-icon svg { display: block; margin: 0 auto; }
  /* _2730 (MHK): his header-shadow rule, verbatim. */
  @media (max-width: 820px) {
    .vv-head {
      box-shadow: 0 5px 16px rgb(182 175 175 / 31%);   /* _2762 (MHK): 31%, kept consistent */
    }
  }
  /* _2729 (MHK): 'I do not want to see the green borders around the search box... take out all the green
     borders from all 4 borders.' The spotlight sets an INLINE box-shadow ring+glow on the searchbox; a
     global !important beats inline. Both themes, spotlight or not. */
  #searchbox, .searchbox { box-shadow: none !important; outline: none !important; }
  /* _2734 (MHK): his separator rule, verbatim - 'sharp thin white line'. */
  @media (max-width: 767px) {
    #verse-viewer-host .vv-list:not(.vv-solo) .vv-row {
      border-bottom: 0.5px solid rgb(255 255 255 / 97%) !important;
    }
  }
  /* _2730 CSS note: the click swallow lives in JS below; this comment anchors the pair. */
  .qp-spot-dim { filter:blur(5px) brightness(0.55) saturate(0.8); pointer-events:none; transition:filter .45s ease; }
  body.qp-theme-light .qp-spot-dim { filter:blur(6px) brightness(1.05) saturate(0.92); }   /* _2814 (MHK): white + glossy - the 0.82 darkening read as a dirty surface on light */
  body.qp-search-spot-on #searchbox { box-shadow: 0 0 0 2px rgba(37, 208, 191, 0.55), 0 0 47px rgba(37, 208, 191, 5.3) !important; transition:box-shadow .45s ease; }   /* _2764 (MHK): verbatim (browsers clamp the 5.3 alpha to 1 = a full-strength glow) */
  /* _2764 (MHK - 'right border green effect barely visible, left not at all'): the box sits FLUSH to the
     viewport edges on his iPhone, so the side glow has no room to paint and clips at the screen edge.
     During the spotlight the box breathes in 8px per side so the glow shows on all four edges. */
  @media (max-width: 820px){
    body.qp-search-spot-on #searchbox { margin-left:8px !important; margin-right:8px !important; }
  }
  /* _2548: Topics tab (verses-overlay context) - topics on the left, an A-Z rail where the verse numbers live */
  .qp-surah-sheet[data-mode="topics"] .qp-surah-sheet-body { display:none; }
  .qp-surah-sheet[data-mode="topics"] .qp-topics-list { display:flex; }
  .qp-topics-list { flex-direction:row; overflow:hidden; }   /* _2625: row again - the vertical A-Z rail is back on the right (the _2596 horizontal bar is retired) */
  .qp-topics-maincol { flex:1; min-width:0; display:flex; flex-direction:column; }
  .qp-topics-major { display:flex; align-items:center; gap:9px; padding:11px 16px; font:600 13px system-ui,sans-serif; color:#8bd5cb; border-bottom:1px solid rgba(37,208,191,0.22); cursor:pointer; flex:0 0 auto; -webkit-user-select:none; user-select:none; }
  .qp-topics-major input { width:17px; height:17px; accent-color:#25d0bf; cursor:pointer; margin:0; }
  body.qp-theme-light .qp-topics-major { color:#0d8fa0; border-bottom-color:rgba(13,143,160,0.22); }
  .qp-topics-az button.is-filter { color:#052b26 !important; background:#25d0bf; opacity:1; font-weight:800; }   /* _2625: the active letter FILTER */
  body.qp-theme-light .qp-topics-az button.is-filter { color:#fff !important; background:#0d8fa0; }
  .qp-topics-scroll { flex:1; min-width:0; overflow-y:auto; -webkit-overflow-scrolling:touch; position:relative; }
  /* _2595 (T4): horizontal A-Z jump bar (fits all 26 across; current letter highlighted) */
  .qp-topics-azbar{ display:flex; justify-content:space-between; align-items:center; gap:1px; padding:9px 8px; border-bottom:1px solid rgba(37,208,191,0.22); flex-wrap:nowrap; flex:0 0 auto; }
  .qp-topics-azbar button{ flex:1 1 0; min-width:0; padding:5px 0; background:transparent; border:none; color:#8bd5cb; font:700 12px/1 system-ui,sans-serif; cursor:pointer; opacity:0.7; border-radius:6px; transition:color .2s ease, opacity .2s ease, background .12s ease; }
  .qp-topics-azbar button:hover{ background:rgba(37,208,191,0.14); opacity:1; }
  .qp-topics-azbar button:disabled{ opacity:0.22; cursor:default; }
  .qp-topics-azbar button.is-spy{ color:#f87171 !important; opacity:1; font-weight:800; background:rgba(248,113,113,0.14); }
  body.qp-theme-light .qp-topics-azbar button{ color:#0d8fa0; }
  body.qp-theme-light .qp-topics-azbar button.is-spy{ color:#dc2626 !important; background:rgba(220,38,38,0.1); }
  /* _2552: the A-Z gets its OWN scroller with the verse-number rail's exact metrics (40px cells) -
     squeezing 26 letters into the viewport hurt usability (MHK). .is-spy = the red scroll-spy. */
  .qp-topics-az { width:55px; flex-shrink:0; border-left:1px solid rgba(255,255,255,0.08); overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 0 12px; text-align:center; position:relative; }
  .qp-topics-az button { display:flex; width:100%; height:40px; align-items:center; justify-content:center; padding:0; background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,0.04); color:#8bd5cb; font:700 14px/1 system-ui,sans-serif; cursor:pointer; opacity:0.85; transition:color .3s ease, opacity .3s ease, background .12s ease; }
  .qp-topics-az button:hover { background:rgba(37,208,191,0.12); }
  .qp-topics-az button:hover { opacity:1; }
  .qp-topics-az button:disabled { opacity:0.18; cursor:default; }
  .qp-topics-az button.is-spy { color:#f87171 !important; opacity:1; font-weight:800; }
  body.qp-theme-light .qp-topics-az button.is-spy { color:#dc2626 !important; }
  .qp-topics-loading { padding:20px 16px; opacity:0.6; font-size:14px; }
  .qp-sheet-topic-row { display:flex; align-items:center; gap:12px; padding:13px 16px; cursor:pointer; border-bottom:1px solid rgba(255,255,255,0.05); }
  /* _2557: star retired (MHK - did not look good); the left buffer is plain row padding now. Letter
     breakers get air: centered letter, roomier padding, underline bar kept. The multi-sub chevron goes
     TEAL + bold (it was barely visible). */
  .qp-sheet-topic-row { padding-left:26px; }
  .qp-topic-lhdr { position:sticky; top:0; z-index:2; padding:16px 16px 10px; text-align:center; font:800 13px/1 system-ui,sans-serif; letter-spacing:3px; color:#25d0bf; background:var(--bg,#0d1117); border-bottom:1px solid rgba(37,208,191,0.25); }
  body.qp-theme-light .qp-topic-lhdr { color:#0d8fa0; background:#fff; border-bottom-color:rgba(13,143,160,0.25); }
  /* _2792 (T3 MHK): the OPEN topic row pins to the scroller top while its subtopics pass (sticky inside
     its .qp-topic-grp group), releasing as the last subtopic rolls under. z 3 rides over the sticky
     letter headers (z 2); opaque sheet-colored face so subtopics slide beneath it cleanly. */
  .qp-topic-grp { position:relative; }
  .qp-topic-grp .qp-sheet-topic-row.is-open { position:sticky; top:0; z-index:3; background:var(--bg,#0d1117); }
  body.qp-theme-light .qp-topic-grp .qp-sheet-topic-row.is-open { background:#fff; }
  .qp-topic-chev { color:#25d0bf !important; font-size:22px; font-weight:800; opacity:1 !important; }
  body.qp-theme-light .qp-topic-chev { color:#0d8fa0 !important; }
  .qp-sheet-fadein { animation:qpSheetIn .28s ease; }
  @keyframes qpSheetIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
  .qp-sheet-topic-row:hover { background:rgba(255,255,255,0.05); }
  /* _2550: MHK's count-line spec - 9px, indented to the caption's vertical line; verses-first text is built in JS */
  .qp-sheet-topic-row .qp-surah-sheet-sub { font-size:9px; margin-left:14px; }
  .qp-topic-item .qp-surah-sheet-sub { font-size:9px; }
  .qp-surah-sheet-item.is-subtopic .qp-surah-sheet-sub { margin-left:24px; }   /* aligns under the caption, past the return-arrow */
  .qp-sheet-topic-row.qp-topic-single .qp-surah-sheet-name { opacity:0.75; font-weight:500; }   /* _2550: single-subtopic topics render lighter (MHK) */
  .qp-topic-chev { transition:transform .3s cubic-bezier(0.22,1,0.36,1); }   /* _2552: matches the brisker accordion */
  .qp-sheet-topic-row.is-open .qp-topic-chev { transform:rotate(90deg); }
  .qp-topic-subwrap { background:rgba(255,255,255,0.02); border-bottom:1px solid rgba(255,255,255,0.05); }
  body.qp-theme-light .qp-topic-subwrap { background:rgba(0,0,0,0.02); border-bottom-color:rgba(0,0,0,0.05); }
  body.qp-theme-light .qp-topics-az { border-left-color:rgba(0,0,0,0.08); }
  body.qp-theme-light .qp-topics-az button { color:#0d8fa0; }
  body.qp-theme-light .qp-sheet-topic-row { border-bottom-color:rgba(0,0,0,0.05); }
  body.qp-theme-light .qp-sheet-topic-row:hover { background:rgba(0,0,0,0.04); }
  /* _2548: subtopic rows read as children of the parent - return-style arrow + the .is-subtopic indent */
  .qp-sub-arrow { display:inline-block; width:16px; margin-right:8px; color:rgba(37,208,191,0.85); font-weight:700; }   /* _2550: fixed width so the 9px count line can align to the caption at 24px */
  body.qp-theme-light .qp-sub-arrow { color:#0d8fa0; }
  .qp-surah-sheet[data-mode="juz"] .qp-surah-sheet-body, .qp-surah-sheet[data-mode="page"] .qp-surah-sheet-body { display:none; }
  .qp-surah-sheet[data-mode="juz"] .qp-juz-list { display:block; }
  .qp-surah-sheet[data-mode="page"] .qp-page-list { display:block; }
  .qp-sheet-jp-row { display:flex; align-items:center; gap:14px; padding:13px 16px; border-bottom:1px solid rgba(0,0,0,0.05); cursor:pointer; }
  .qp-sheet-jp-row:hover { background:rgba(31,157,139,0.07); }
  body.qp-theme-light .qp-sheet-jp-row { border-bottom-color:rgba(0,0,0,0.05); }
  /* _2249: page keypad */
  .qp-keypad { padding:16px 20px 24px; max-width:330px; margin:0 auto; }
  .qp-kp-display { min-height:56px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,0.14); border-radius:12px; font:700 30px system-ui,sans-serif; color:rgba(235,242,250,0.95); background:rgba(255,255,255,0.04); margin-bottom:8px; letter-spacing:2px; }
  .qp-kp-hint { text-align:center; font:500 12.5px system-ui,sans-serif; color:rgba(150,170,190,0.7); margin-bottom:14px; }
  .qp-kp-hint.is-err { color:#ef6a60; }
  .qp-kp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
  .qp-kp-key { height:54px; border:1px solid rgba(255,255,255,0.12); border-radius:12px; background:rgba(255,255,255,0.05); font:600 22px system-ui,sans-serif; color:rgba(235,242,250,0.92); cursor:pointer; transition:background .12s; }
  .qp-kp-key:hover { background:rgba(52,179,156,0.16); }
  .qp-kp-key:active { background:rgba(52,179,156,0.28); }
  .qp-kp-fn { font-size:17px; color:rgba(150,170,190,0.85); }
  .qp-kp-go { width:100%; margin-top:14px; height:52px; border:none; border-radius:12px; background:#1f9d8b; color:#fff; font:700 16px system-ui,sans-serif; cursor:pointer; transition:opacity .15s; }
  .qp-kp-go:disabled { opacity:0.4; cursor:default; }
  body.qp-theme-light .qp-kp-display { border-color:rgba(0,0,0,0.1); color:#1f2d3a; background:rgba(0,0,0,0.02); }
  body.qp-theme-light .qp-kp-hint { color:rgba(0,0,0,0.42); }
  body.qp-theme-light .qp-kp-key { border-color:rgba(0,0,0,0.1); background:#fff; color:#1f2d3a; }
  body.qp-theme-light .qp-kp-key:hover { background:rgba(31,157,139,0.08); }
  body.qp-theme-light .qp-kp-fn { color:#5b6b7a; background:rgba(0,0,0,0.03); }
  @media (max-width:767px){
    .qp-keypad { padding:10px 16px 14px; max-width:300px; }
    .qp-kp-display { min-height:44px; font-size:24px; margin-bottom:6px; }
    .qp-kp-hint { margin-bottom:8px; font-size:11.5px; }
    .qp-kp-grid { gap:7px; }
    .qp-kp-key { height:44px; font-size:20px; }
    .qp-kp-fn { font-size:15px; }
    .qp-kp-go { height:44px; margin-top:10px; font-size:15px; }
  }
  .qp-surah-sheet-list {
    flex: 1;
    min-width: 0;
  }
  .qp-surah-sheet-verses {
    width: 55px;   /* _2548: MHK's CSS (was 92px) */
    flex-shrink: 0;
    border-left: 1px solid rgba(255,255,255,0.08);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 12px;
    /* _1579: smooth animation when toggled via is-empty */
    transition: width 0.22s ease, border-left-width 0.22s ease,
                padding 0.22s ease, opacity 0.18s ease;
  }
  body.qp-theme-light .qp-surah-sheet-verses {
    border-left-color: rgba(0,0,0,0.08);
  }
  /* _1579: when empty, collapse the column entirely so the list
     reclaims the full width. The list rows then look 'complete'
     with their chevrons sitting at the actual right edge. Tapping
     a chevron populates content + removes is-empty, animating the
     column back to 92px and squeezing the list. */
  .qp-surah-sheet-verses.is-empty {
    width: 0 !important;
    border-left-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .qp-verse-cell {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.82);
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    transition: background 0.12s ease;
  }
  .qp-verse-cell:hover {
    background: rgba(37, 208, 191, 0.12);
  }
  .qp-verse-cell:active {
    background: rgba(37, 208, 191, 0.22);
  }
  body.qp-theme-light .qp-verse-cell {
    color: rgba(0,0,0,0.82);
    border-bottom-color: rgba(0,0,0,0.04);
  }
  /* Chevron hit zone on each surah row */
  .qp-surah-sheet-chevron {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: rgba(255,255,255,0.35);
    font-size: 20px;
    font-weight: 300;
    margin-right: -4px;
    border-radius: 8px;
    transition: color 0.15s ease, background 0.15s ease;
  }
  .qp-surah-sheet-chevron:hover {
    color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.06);
  }
  .qp-surah-sheet-chevron.is-active {
    color: #25d0bf;
  }
  body.qp-theme-light .qp-surah-sheet-chevron {
    color: rgba(0,0,0,0.35);
  }
  body.qp-theme-light .qp-surah-sheet-chevron:hover {
    color: rgba(0,0,0,0.85);
    background: rgba(0,0,0,0.05);
  }
  body.qp-theme-light .qp-surah-sheet-chevron.is-active {
    color: #0d9488;
  }

  .qp-surah-sheet-sub {
    font-size: 12px;
    color: rgba(255,255,255,0.5);
  }
  .qp-surah-sheet-arabic {
    font-family: 'KFGQPCUthmanTahaNaskhRegular', 'me_quran', serif;
    font-size: 20px;
    color: #25d0bf;
    direction: rtl;
  }
  
  /* Desktop: constrain width to verses overlay */
  @media (min-width: 821px) {
    .qp-surah-sheet {
      max-width: min(940px, 94vw);   /* _2618: much wider on desktop */
    }
  }
  
  /* Light theme support */
  body.qp-theme-light .qp-surah-sheet {
    background: #fff;
  }
  body.qp-theme-light .qp-surah-sheet-handle {
    background: rgba(0,0,0,0.2);
  }
  body.qp-theme-light .qp-surah-sheet-header {
    border-bottom-color: rgba(0,0,0,0.1);
  }
  body.qp-theme-light .qp-surah-sheet-header h3 {
    color: #1f2937;
  }
  body.qp-theme-light .qp-surah-sheet-header p {
    color: rgba(0,0,0,0.5);
  }
  body.qp-theme-light .qp-surah-sheet-item {
    border-bottom-color: rgba(0,0,0,0.06);
  }
  body.qp-theme-light .qp-surah-sheet-item:hover {
    background: rgba(0,0,0,0.04);
  }
  body.qp-theme-light .qp-surah-sheet-item.is-current {
    background: rgba(37, 208, 191, 0.15);
  }
  body.qp-theme-light .qp-surah-sheet-num {
    background: rgba(0,0,0,0.06);
    color: #0d9488;
  }
  body.qp-theme-light .qp-surah-sheet-item.is-current .qp-surah-sheet-num {
    background: #14b8a6;
    color: #fff;
  }
  body.qp-theme-light .qp-surah-sheet-name {
    color: #1f2937;
  }
  body.qp-theme-light .qp-surah-sheet-sub {
    color: rgba(0,0,0,0.5);
  }
  body.qp-theme-light .qp-surah-sheet-arabic {
    color: #0d9488;
  }


  /* === SURAH HEADER (Elegant Green Banner) === */
  /*Why: Restructures the surah header with a proper CSS Grid layout that prevents overlap, adds Bismillah section, and organizes content with clear rows. */
  .vv-surah-header {
    position: relative;
    overflow: hidden;
    margin: 12px;
    /* _1839: padding tightened (58px right-side reservation no longer
       needed now that play button is inline, not absolute). */
    padding: 12px 16px 12px;
    border-radius: 14px;
    background: linear-gradient(160deg, #12c5de 0%, #0fa8c0 35%, #0a7a98 68%, #065f7a 100%);
    color: #fff;
    /* _1833: drop shadow removed per user request.  Inset 1px top
       highlight kept to preserve the subtle gradient edge. */
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
    display: flex;
    flex-direction: column;
    align-items: center;
    /* _1839: 132px -> 158px to fit the new 4th row of inline icons.
       Was 132px in v1829 for 3 rows (bismillah, name, meta).  Now
       4 rows (bismillah, name+chapnum, meta-no-num, icons). */
    min-height: 158px;
    /* contain: layout paint lets the browser isolate the element's
       repaints so the GPU can promote it to its own layer during the
       slide.  Eliminates one more source of mid-animation reflow. */
    contain: layout paint;
    /* _1829: blur-in entry.  Banner lands blurred + dim, transitions
       to clear after the overlay slide-in stabilises.  The class
       .vv-surah-header.vv-banner-settled triggers the clear. */
    filter: blur(8px);
    opacity: 0.65;
    transition: filter 600ms ease, opacity 600ms ease;
    /* _1829: the banner is now an interactive surface - entire card
       opens Surah Info.  Cursor hint. */
    cursor: pointer;
    margin: 17px;
    padding: 18px 16px;
    border-radius: 0px;   /* _2760 (MHK): verbatim */
  }
  @media (min-width: 821px) {
    #verse-viewer-host .vv-surah-header {
      margin: 2px !important;
      margin-top: 37px !important;   /* _2762 (MHK): verbatim - desktop */
    }
  }
  .vv-surah-header.vv-banner-settled {
    filter: blur(0);
    opacity: 1;
  }
  .vv-surah-header::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at 50% -10%, rgba(255,255,255,0.22) 0, rgba(255,255,255,0) 55%),
      radial-gradient(circle at 8% 55%, rgba(255,255,255,0.07) 0, transparent 38%),
      radial-gradient(circle at 92% 55%, rgba(255,255,255,0.07) 0, transparent 38%);
  }
  .vv-surah-header::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url('/QuranPlus/img/pattern-1.jpg');
    background-size: 448px auto;
    background-repeat: repeat;
    opacity: 0.06;
    mix-blend-mode: overlay;
    border-radius: 14px;
  }

  /* Green variant — matches Arabic text color #28d1c0 */
  .vv-surah-header.vv-surah-header--green {
    background: linear-gradient(160deg, #0d9e8a 0%, #0a8070 35%, #076858 68%, #055044 100%);
  }
  .vv-surah-header.vv-surah-header--green .vv-surah-header-btn.play-btn {
    color: #076858;
  }

  /* Row 1: Bismillah full-width centered */
  .vv-surah-header-bismillah {
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    width: 100%;
  }
  .vv-surah-header-bismillah svg {
    width: clamp(200px, 68%, 290px);
    height: auto;
  }

  /* _2056: SLIM banner (default) - hide the meta (#n / verses / type) and the i/play action
     rows, and shrink the bismillah, so the surah header is thinner and less dominating.
     The full markup is kept; remove .vv-surah-header--slim to restore the original banner. */
  .vv-surah-header--slim { min-height: 104px; padding-bottom: 14px; }
  .vv-surah-header--slim .vv-surah-header-actions-row { display: none; }   /* _2056: hide i/play */
  .vv-surah-header--slim .vv-surah-header-bismillah { margin-bottom: 6px; }
  .vv-surah-header--slim .vv-surah-header-bismillah svg { width: clamp(150px, 46%, 210px); }
  /* _2057: small dimmed meta line under the name -> '286 verses | Madinan' */
  .vv-surah-header--slim .vv-surah-header-meta { font-size: 11px; font-weight: 500; letter-spacing: .3px; text-transform: none; color: rgba(255,255,255,0.55); gap: 7px; margin-top: -5px; font-family: sans-serif; }   /* _2058: sans-serif + pulled up */
  .vv-surah-header-meta .vv-meta-sep { opacity: .5; font-weight: 400; }
  /* _2752 (MHK): on mobile, drop the verses|type meta row for a tighter header; the > play chevron sits
     inline with the Arabic name. */
  @media (max-width: 820px){
    #verse-viewer-host .vv-surah-header-meta { display: none !important; }
    #verse-viewer-host .vv-sh-arplay { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); color: #5ee8d0; flex-shrink: 0; cursor: pointer; }
    body.qp-theme-light #verse-viewer-host .vv-sh-arplay { background: rgba(0,0,0,0.05); border-color: rgba(0,0,0,0.18); color: #0f8a7d; }
    #verse-viewer-host .vv-sh-arplay:active { transform: scale(0.92); }
  }
  /* the chevron is mobile-only; desktop keeps the existing play-btn in the actions row */
  #verse-viewer-host .vv-sh-arplay { display: none; }

  /* Row 2: English name | divider | Arabic name - centered */
  /* _1829: scale-pulse runs once on entry to draw attention to the
     surah name as the banner clears the blur. */
  @keyframes vv-name-pulse {
    0%   { transform: scale(0.92); }
    55%  { transform: scale(1.06); }
    100% { transform: scale(1.0); }
  }
  .vv-surah-header-main-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 9px;
    position: relative;
    z-index: 1;
    transform-origin: center center;
    will-change: transform;
  }
  .vv-surah-header.vv-banner-settled .vv-surah-header-main-row {
    /* _1831: doubled from 750ms to 1500ms to draw more attention. */
    animation: vv-name-pulse 1500ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  /* _1839: chapter number now displayed inline before the title. */
  .vv-surah-header-chap-num {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,0.85);
    -webkit-font-smoothing: antialiased;
    letter-spacing: 0.2px;
  }
  .vv-surah-header-chap-dot {
    flex-shrink: 0;
    opacity: 0.7;
  }
  .vv-surah-header-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    -webkit-font-smoothing: antialiased;
    white-space: nowrap;
    letter-spacing: 0.1px;
  }
  .vv-surah-header-divider-line {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }
  .vv-surah-header-arabic {
    font-family: 'KFGQPC Uthmanic Script HAFS', 'me_quran', 'Amiri', serif;
    font-size: clamp(20px, 5.5vw, 28px);
    color: #fff;
    direction: rtl;
    -webkit-font-smoothing: antialiased;
    white-space: nowrap;
  }

  /* Row 3: 3 . 200 VERSES . [emoji] MADINAN - centered (_1829: type badge inlined here) */
  .vv-surah-header-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.9);
    position: relative;
    z-index: 1;
    -webkit-font-smoothing: antialiased;
    flex-wrap: wrap;
  }
  .vv-surah-header-meta .vv-meta-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    letter-spacing: 0.7px;
  }
  .vv-surah-header-meta .vv-meta-type-emoji {
    font-size: 15px;
    text-transform: none;
  }
  /* Bottom row: Madinan | quran.png | Surah Info */
  .vv-surah-header-mushaf-btn {
    background: transparent; border: none; cursor: pointer;
    padding: 0; display:flex; align-items:center; justify-content:center;
    opacity: 0.88; transition: opacity 0.15s;
  }
  .vv-surah-header-mushaf-btn:hover { opacity: 1; }

  .vv-surah-header-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    align-self: stretch;
    padding: 8px 10px 0;
    margin-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.15);
    position: relative;
    z-index: 1;
    box-sizing: border-box;
  }
  .vv-surah-header-type {
    font-size: 13px;
    color: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .vv-surah-header-type-emoji { font-size: 15px; }
  .vv-surah-header-intro {
    font-size: 14px;
    color: rgba(255,255,255,0.9);
    font-weight: 700;
    cursor: pointer;
  }
  .vv-surah-header-intro:hover { color: #fff; text-decoration: underline; }

  /* Action buttons — centered on lower 60% of card */
  /* _1839: icons are now inline in a centered row at the bottom.
     Container .vv-surah-header-actions-row uses flex to center the
     two action wrappers with 20px gap.  Each wrapper retains its
     opacity:0 + translateX(±85vw) initial state so the cross-slide
     animation still runs. */
  .vv-surah-header-actions-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 1;
    margin-top: 10px;
  }
  .vv-surah-header-actions {
    z-index: 20;
    opacity: 0;
  }
  .vv-surah-header-actions.left-actions {
    /* Info icon flies in from off-banner-RIGHT then settles inline. */
    transform: translateX(85vw);
  }
  .vv-surah-header-actions.right-actions {
    /* Play icon flies in from off-banner-LEFT then settles inline. */
    transform: translateX(-85vw);
  }
  /* _1839: keyframes simplified — no more -50% Y offset since the
     wrappers are inline now (not absolutely positioned). */
  @keyframes vv-info-slide-in {
    0%   { transform: translateX(85vw);  opacity: 0; }
    100% { transform: translateX(0);     opacity: 1; }
  }
  @keyframes vv-play-slide-in {
    0%   { transform: translateX(-85vw); opacity: 0; }
    100% { transform: translateX(0);     opacity: 1; }
  }
  .vv-surah-header.vv-banner-settled .vv-surah-header-actions.left-actions {
    animation: vv-info-slide-in 700ms cubic-bezier(0.22, 1, 0.36, 1) 1000ms both;
  }
  .vv-surah-header.vv-banner-settled .vv-surah-header-actions.right-actions {
    animation: vv-play-slide-in 700ms cubic-bezier(0.22, 1, 0.36, 1) 1000ms both;
  }
  /* _1833: after the slide-in completes (~700ms), the buttons
     pulse three times over the next 3 seconds.  Subtle scale-up
     animation on the button element itself (not the wrapper), so
     it doesn't conflict with the wrapper's slide transform.
     animation-fill-mode defaults to 'none' so the button returns
     to scale(1) after the pulse ends, leaving the :active
     scale(0.92) click feedback functional. */
  @keyframes vv-icon-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.12); }
  }
  .vv-surah-header.vv-banner-settled .vv-surah-header-btn {
    animation: vv-icon-pulse 1.5s ease-in-out 1700ms 1;
  }
  .vv-surah-header-btn {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s, background 0.15s;
  }
  .vv-surah-header-btn:active { transform: scale(0.92); }
  .vv-surah-header-btn.play-btn {
    background: rgba(255,255,255,0.92);
    color: #0a7d93;
  }
  .vv-surah-header-btn.play-btn:hover { background: #fff; }
  /* _1831: new info button (left side) - subtle outlined style so it
     reads as secondary action vs. the prominent play button. */
  .vv-surah-header-btn.info-btn {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.45);
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 22px;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
  }
  .vv-surah-header-btn.info-btn:hover {
    background: rgba(255,255,255,0.28);
    border-color: rgba(255,255,255,0.65);
  }
  .vv-surah-header-btn.folder-btn {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.35);
  }
  .vv-surah-header-btn.folder-btn:hover { background: rgba(255,255,255,0.25); }
  .vv-surah-header-btn svg { width: 20px; height: 20px; }
  /* _1831: mobile sizing — play/info buttons are 27px on phones to
     reduce visual weight in the thinner banner.  SVG icons scale
     down proportionally. */
  @media (max-width: 768px) {
    .vv-surah-header-btn {
      width: 27px;
      height: 27px;
    }
    .vv-surah-header-btn svg { width: 14px; height: 14px; }
    .vv-surah-header-btn.info-btn {
      font-size: 15px;
      border-width: 1px;
    }
    /* _1839: scale chap-num down slightly on mobile. */
    .vv-surah-header-chap-num { font-size: 15px; }
  }








  
  /* Selection header (for topics, ranges, non-surah displays) */
  /* Why: Makes selection header use same green background as surah header for consistency, with proper grid layout to prevent overlap. */
  .vv-selection-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 14px 16px;
    background: linear-gradient(135deg, #0d7a5f 0%, #0a5c47 50%, #074a38 100%);
    border-radius: 12px;
    margin: 12px;
    gap: 12px;
  }
  /* _2547: in One-Verse (solo) the banner sat ABOVE the first page - the pager landed past it, so
     Play/Save/Open Root Lab were never seen (MHK: 'what happened to our open root lab button?').
     Pin it to the top of the scrollport in solo; list mode is untouched. */
  .vv-list.vv-solo .vv-selection-header {
    position: sticky;
    top: 0;
    z-index: 9;
    margin: 0 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  }
  /* _2558: the pinned banner used to OVERLAY the verse's action row in One-Verse (MHK's screenshots).
     Plan A: PUSH the content down - rows reserve the banner's height as internal top padding. Snap
     geometry untouched (rows still snap flush; only content shifts). :has() keeps it automatic across
     the view switcher. Knob: --vv-selhdr-h (default 84px; bump if the banner ever wraps taller). */
  .vv-list.vv-solo:has(.vv-selection-header) .vv-row { padding-top: var(--vv-selhdr-h, 84px) !important; }
  .vv-selection-header-info {
    min-width: 0;
  }
  .vv-selection-header-meta {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.9);
  }
  .vv-selection-header-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }
  .vv-selection-header-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .vv-selection-header-btn:active {
    transform: scale(0.92);
  }
  .vv-selection-header-btn.play-btn {
    background: rgba(255,255,255,0.95);
    color: #0a5c47;
  }
  .vv-selection-header-btn.play-btn:hover {
    background: #fff;
  }
  .vv-selection-header-btn.folder-btn {
    background: rgba(255,255,255,0.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.3);
  }
  .vv-selection-header-btn.folder-btn:hover {
    background: rgba(255,255,255,0.25);
  }
  .vv-selection-header-btn svg {
    width: 18px;
    height: 18px;
  }




  /* === SURAH INTRO OVERLAY === */
  /* Why: Complete CSS for the Surah Intro overlay including modal, scrollable tabs with Material-style underline, right-edge fade hint (works for both themes), content area, and summary list styling. */
  .surah-intro-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.88);
    z-index: 100056; /* beats tab bar (100000) */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    padding-top: 50px;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-sizing: border-box;
  }
  body.qp-theme-light .surah-intro-overlay {
    background: rgba(0,0,0,0.5);
  }
  .surah-intro-modal {
    background: #1a2a3a;
    color: #e0e0e0;
    border-radius: 16px;
    width: 100%;
    max-width: 680px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s ease;
  }
  body.qp-theme-light .surah-intro-modal {
    background: #ffffff;
    color: #333333;
  }
  .surah-intro-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    flex-shrink: 0;
  }
  body.qp-theme-light .surah-intro-header {
    border-bottom-color: #e0e0e0;
  }
  .surah-intro-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .surah-intro-header-left svg {
    width: 22px;
    height: 22px;
    opacity: 0.8;
  }
  .surah-intro-title {
    font-size: 17px;
    font-weight: 600;
  }
  /* _1865: hide the X but keep it functional (handlers attached).
     Back arrow routes its click to .surah-intro-close so all the
     existing close pathways continue to fire. */
  .surah-intro-close {
    background: transparent;
    border: none;
    font-size: 28px;
    cursor: pointer;
    opacity: 0.6;
    padding: 4px 8px;
    color: inherit;
    line-height: 1;
    visibility: hidden;
    width: 0;
    padding-left: 0;
    padding-right: 0;
  }
  .surah-intro-close:hover { opacity: 1; }

  /* _1865: green back arrow on the left, replacing the book icon.
     Matches .vv-back styling so users see consistency across
     overlays - same gesture, same color, same shape. */
  .surah-intro-back {
    background: transparent;
    border: none;
    color: #25d0bf;
    font-size: 30px;
    cursor: pointer;
    padding: 0 10px 0 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }
  .surah-intro-back:hover {
    opacity: 0.8;
    transform: translateX(-2px);
  }
  body.qp-theme-light .surah-intro-back {
    color: #0d8fa0;
  }

  /* _1866: SUMMARY tab pulse - bigger, longer, more visible.
     5 cycles x 700ms = 3.5 seconds total.
     Scale 1.10, opacity dip 0.55, with a teal glow on each peak. */
  @keyframes qpSummaryTabPulse {
    0%   { transform: scale(1);    opacity: 1;    box-shadow: 0 0 0 0 rgba(37,208,191,0); }
    50%  { transform: scale(1.10); opacity: 0.55; box-shadow: 0 0 12px 4px rgba(37,208,191,0.45); }
    100% { transform: scale(1);    opacity: 1;    box-shadow: 0 0 0 0 rgba(37,208,191,0); }
  }
  .surah-intro-tab.summary-pulse {
    animation: qpSummaryTabPulse 700ms ease-in-out 5;
    transform-origin: center;
    border-radius: 6px;
  }

  /* Scrollable Tabs */
  .surah-intro-tabs-wrapper {
    position: relative;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  body.qp-theme-light .surah-intro-tabs-wrapper {
    border-bottom-color: #e0e0e0;
  }
  .surah-intro-tabs {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 16px;
  }
  .surah-intro-tabs::-webkit-scrollbar { display: none; }
  .surah-intro-tab {
    flex-shrink: 0;
    padding: 12px 14px;
    font-size: 13px;
    font-weight: 500;
    /* text-transform: uppercase; */   /* _2805 (MHK): retired - tabs read in their natural case */
    letter-spacing: 0.3px;
    color: rgba(255,255,255,0.5);
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
    transition: color 0.2s ease;
  }
  body.qp-theme-light .surah-intro-tab {
    color: rgba(0,0,0,0.45);
  }
  .surah-intro-tab:hover {
    color: rgba(255,255,255,0.85);
  }
  body.qp-theme-light .surah-intro-tab:hover {
    color: rgba(0,0,0,0.75);
  }
  .surah-intro-tab.active {
    color: #a78bfa;
  }
  body.qp-theme-light .surah-intro-tab.active {
    color: #7c3aed;
  }
  .surah-intro-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 14px;
    right: 14px;
    height: 3px;
    background: #a78bfa;
    border-radius: 2px 2px 0 0;
  }
  body.qp-theme-light .surah-intro-tab.active::after {
    background: #7c3aed;
  }
  /* Right-edge fade hint for more tabs */
  .surah-intro-tabs-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 1px;
    width: 75px;
    background: linear-gradient(to right, transparent, #1a2a3a);
    pointer-events: none;
    opacity: 0.95;
  }
  body.qp-theme-light .surah-intro-tabs-wrapper::after {
    background: linear-gradient(to right, transparent, #ffffff);
  }

  /* Content area */
  .surah-intro-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
  }
  .surah-intro-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #a78bfa;
    margin-bottom: 14px;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
  }
  body.qp-theme-light .surah-intro-section-title {
    color: #7c3aed;
  }
  /* _1868: 16px (was 14px) for consistent readability across tabs. */
  .surah-intro-text {
    font-size: 16px;
    line-height: 1.75;
    color: rgba(255,255,255,0.88);
  }
  body.qp-theme-light .surah-intro-text {
    color: #333;
  }
  .surah-intro-text p {
    margin: 0 0 14px;
  }
  .surah-intro-text p:last-child {
    margin-bottom: 0;
  }
  .surah-intro-text a {
    color: #25d0bf;
    text-decoration: none;
    font-weight: 500;
  }
  .surah-intro-text a:hover {
    text-decoration: underline;
  }

  /* Summary list (Yusuf Ali) */
  .surah-intro-summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  /* _1866: TRUE 2-column layout.
     Left column: description (flex:1).
     Right column: verse-ref range stacked over arrow (fixed 60px).
     DOM order [range][desc] is swapped visually via 'order'. */
  .surah-intro-summary-item {
    padding: 14px 12px;   /* _2819 (MHK): the wash breathes - with the negative margins below, text alignment is pixel-identical */
    margin: 0 -12px;
    border-radius: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  body.qp-theme-light .surah-intro-summary-item {
    border-bottom-color: rgba(0,0,0,0.06);
  }
  .surah-intro-summary-item:last-child {
    border-bottom: none;
  }
  /* _1866: range column - fixed width, stacks number over arrow. */
  .surah-intro-summary-range {
    order: 2;
    flex: 0 0 60px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    margin-right: 4px;
    color: #25d0bf;
    font-weight: 300;   /* _2843 (MHK): his values verbatim - lighter, smaller range chip */
    font-size: 11px;
    padding-top: 5px;
    cursor: pointer;
    line-height: 1.2;
  }
  .surah-intro-summary-range:hover {
    text-decoration: underline;
  }
  /* _1866: arrow bigger (20px) and now sits on its OWN row inside
     the range column, beneath the number. */
  .surah-intro-range-arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.85;
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  .surah-intro-summary-range:hover .surah-intro-range-arrow {
    transform: translate(1px, -1px);
    opacity: 1;
  }
  /* _1866/_1868: description takes remaining width; min-width:0 prevents
     flex blowout.  Font size 16px (was 14px) for better readability. */
  .surah-intro-summary-desc {
    order: 1;
    flex: 1 1 auto;
    min-width: 0;
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    line-height: 1.6;
    cursor: pointer;
  }
  body.qp-theme-light .surah-intro-summary-desc {
    color: #333;
  }
  
  /* Back to Intro button (on verses overlay) */
  .vv-back-to-intro {
    position: fixed;
    bottom: 69px;
    right: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(279deg, #09a293 0%, #ce0d5a 100%);
    
    color: #fff;
    border: none;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .vv-back-to-intro:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(124, 58, 237, 0.5);
  }
  .vv-back-to-intro:active {
    transform: scale(0.96);
  }
  .vv-back-to-intro svg {
    flex-shrink: 0;
  }

  /* Floating Back to Vocabulary Builder pill */
  /* VB back-to-vocab pill CSS — in vocab-ui-default.php */
  .vv-resync-float {
    position: fixed;
    bottom: 72px;
    right: 16px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(279deg, #09a293 0%, #ce0d5a 100%);
    color: #fff;
    border: none;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(9,162,147,0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.3s;
    letter-spacing: 0.2px;
    overflow: visible;
  }
  .vv-resync-float:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(9,162,147,0.55); }
  .vv-resync-float:active { transform: scale(0.96); }
  .vv-resync-float.vv-rf-hidden { opacity: 0; pointer-events: none; }















  
  
  
  .vv-more-menu {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    color: var(--fg);
  }
  .vv-more-menu:hover {
    background: rgba(255,255,255,0.1);
  }
  
  /* Desktop-only close button (orange X) */
  .vv-close-desktop {
    display: none; /* Hidden by default (mobile) */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /* how to fix ##x to ##home 
    background:  #0c0d0d; /* #13aac1 #d85e09; */
    /*
    border: none;
    color: #fff;
    */
    
    background: #13aac1;
    border: 1px solid #002d69;
    color: #ebeff6;

    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin-left: 8px;
    transition: background 0.15s ease, transform 0.1s ease;
  }
  /*
  .vv-close-desktop:hover {
    background: #64a5a5ff; /*#f06b12;*/
    /*
  }
  */
  .vv-close-desktop:active {
    transform: scale(0.95);
  }
  
  /* Show only on desktop (>820px) */
  @media (min-width: 821px) {
    .vv-close-desktop {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }


  /* More menu dropdown */
  .vv-more-dropdown {
    position: absolute;
    top: 100%;
    right: 16px;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    min-width: 180px;
    z-index: 1000;
    overflow: hidden;
  }
  .vv-more-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    color: var(--fg);
    font-size: 15px;
  }
  .vv-more-dropdown-item:last-child {
    border-bottom: none;
  }
  .vv-more-dropdown-item:hover {
    background: rgba(40,184,235,0.1);
  }
  .vv-more-dropdown-item .icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
  }


/*
PATCH [H6]: CSS Styles
What: Styling for history buttons and dropdown.
Why: Visual consistency with existing UI.
*/
/* ##history-ui-styles - History navigation buttons */
#verse-viewer-host .vv-history-group {
  display: inline-flex;
  gap: 2px;
  margin-right: 8px;
}

#verse-viewer-host .vv-history-back,
#verse-viewer-host .vv-history-forward,
#verse-viewer-host .vv-history-list {
  background: transparent;
  border: none;
  font-size: 18px;
  padding: 4px 8px;
  cursor: pointer;
  border-radius: 6px;
  color: inherit;
  transition: background 0.15s ease, opacity 0.15s ease;
}

#verse-viewer-host .vv-history-back:hover:not(:disabled),
#verse-viewer-host .vv-history-forward:hover:not(:disabled),
#verse-viewer-host .vv-history-list:hover:not(:disabled) {
  background: rgba(255,255,255,0.1);
}

#verse-viewer-host .vv-history-back:disabled,
#verse-viewer-host .vv-history-forward:disabled,
#verse-viewer-host .vv-history-list:disabled {
  cursor: default;
  opacity: 0.3;
}

/* History dropdown */
.vv-history-dropdown {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.vv-history-dropdown .vv-hist-item:last-child {
  border-bottom: none !important;
}

/* Light theme adjustments */
body.qp-theme-light .vv-history-dropdown {
  background: #f5f5f5;
  border-color: #ddd;
}

body.qp-theme-light .vv-history-dropdown .vv-hist-item {
  border-bottom-color: #e0e0e0 !important;
}

body.qp-theme-light .vv-history-dropdown .vv-hist-item div:first-child {
  color: #333 !important;
}

body.qp-theme-light .vv-history-dropdown .vv-hist-item div:last-child {
  color: #666 !important;
}

body.qp-theme-light .vv-history-dropdown .vv-hist-item:hover {
  background: #e8e8e8 !important;
}











/* verse viewer emphasis */
.vv-list .vv-row{ transition:background .15s ease, box-shadow .15s ease, opacity .15s ease; }
  #verse-viewer-host.vv--stacked .vv-row{ padding:26px; }   /* _2597 (T2): trimmed from 50px - too much air above/below each verse */
  @media (max-width:767px){ #verse-viewer-host.vv--stacked .vv-row{ padding:14px 9px; } }   /* _2597 (T2) / _2619 -> _2641 (MHK): 16px -> 9px of card padding; with the 4px margins and the trimmed inner gutters below, the verse text gains ~26px of line width per row. */
  @media (max-width:767px){ #verse-viewer-host.vv--stacked .vv-ar2{ margin-top:-4px; } }   /* _2637 -> _2647 (MHK task 3): the canyon was the 3.1 leading; now line-height is 2.0, so the -16px pull is too much - relaxed to -4px. */
.vv-list.dim-others .vv-row{ opacity:.55; }
.vv-list .vv-row.is-active{
  opacity:1.4 !important;
  filter:blur(0px);
  background:rgba(148,163,184,.08);                   /* slate-300/20 */
  box-shadow:none;   /* _2629 (MHK): the soft glow is gone - the border colour is the only signal. (Solo view still uses this rule; the card rules below own the multi view.) */
}

.vv-row {
  padding-bottom: 10px; 
}

.vv-row.is-active{
  filter:blur(0px);
}

.vv-row:last-child{ padding-bottom:16px; } /* _2597 (T2): trimmed */

/* _2588: turn each verse into a CARD so the separation between verses is obvious (multi view only). */
#verse-viewer-host .vv-list:not(.vv-solo) .vv-row{
  background: rgba(255,255,255,0.028);
  /* _2720 (MHK): 'the separator between the verses to look sharp and white on dark and clearly visible at
     0.5px thin'. One value, both modes - nothing above may vary it by chrome state any more. */
  border: 0.5px solid rgba(255,255,255,0.72);
  border-radius: 16px;
  margin: 0 14px 24px;   /* _2628: more vertical air between the card islands (was 14px) */
  box-shadow: none;   /* _2629 (MHK): NO shadow anywhere. A clean thin border is the whole card; the ONLY thing that ever changes is its colour. */
}
@media (max-width:767px){ #verse-viewer-host .vv-list:not(.vv-solo) .vv-row{ margin: 0 4px 20px; } }   /* _2619 -> _2641 (MHK): 8px -> 4px per side; the card islands still read as cards, the text gets the pixels. */

/* ============ _2682 (MHK): QURAN.COM-STYLE DESKTOP READING VIEW ============
   EXPERIMENT - isolated on purpose. ROLLBACK = delete everything between these
   two banner comments; the previous desktop look returns exactly. >=821px only. */
@media (min-width: 821px){
  /* (4) full-bleed container: the sticky header runs edge to edge, hamburger at the true right */
  #verse-viewer-host .vv-card{
    width:100vw !important; max-width:100vw !important;
    height:100vh !important; max-height:100vh !important;
    border:none !important; border-radius:0 !important; box-shadow:none !important;
  }
  #verse-viewer-host .vv-head{ padding-left:22px !important; padding-right:22px !important; }
  /* (2) a wide, centred reading column - _2683 (T1): the SCROLLER is full-width and the column margins come
     from computed padding, so the scrollbar lives at the true right edge of the window (not mid-screen). */
  #verse-viewer-host .vv-list:not(.vv-solo){
    width:100%; max-width:none; box-sizing:border-box;
    margin-left:0 !important; margin-right:0 !important;
    padding-left:  max(clamp(24px, 5vw, 72px), calc((100% - 1200px) / 2));
    padding-right: max(clamp(24px, 5vw, 72px), calc((100% - 1200px) / 2));
    max-height: calc(100vh - 54px) !important;
  }
  /* _2683 (T1): a clean, regular scrollbar at the window edge - slightly thicker is fine there */
  #verse-viewer-host .vv-list:not(.vv-solo)::-webkit-scrollbar{ width:12px; }
  #verse-viewer-host .vv-list:not(.vv-solo)::-webkit-scrollbar-track{ background:transparent; }
  #verse-viewer-host .vv-list:not(.vv-solo)::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.16); border-radius:7px; border:3px solid transparent; background-clip:padding-box; }
  #verse-viewer-host .vv-list:not(.vv-solo)::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.28); background-clip:padding-box; border:3px solid transparent; }
  body.qp-theme-light #verse-viewer-host .vv-list:not(.vv-solo)::-webkit-scrollbar-thumb{ background:rgba(15,23,42,0.20); background-clip:padding-box; border:3px solid transparent; }
  /* _2683 (T2): the header's (i) + hamburger were dark-on-dark in dark mode - brighten them */
  body:not(.qp-theme-light) #verse-viewer-host .vv-head .vv-help-btn{ color:#dfe8f2 !important; }
  body:not(.qp-theme-light) #verse-viewer-host .vv-head .vv-help-btn svg{ stroke:#dfe8f2 !important; }
  body:not(.qp-theme-light) #verse-viewer-host .vv-head .qp-burger i{ background:#dfe8f2 !important; }
  /* _2683 (T5): bismillah leaves the banner (thinner blue header) and sits centred in the sticky header */
  #verse-viewer-host .vv-surah-header-bismillah{ display:none !important; }
  #verse-viewer-host .vv-surah-header--slim{ min-height:0 !important; padding-top:12px !important; padding-bottom:12px !important; }
  #verse-viewer-host .vv-head .vv-head-single{ position:relative; }
  /* _2686 (T4 MHK): the bismillah is a real BUTTON now - click = back to the homepage */
  #verse-viewer-host .vv-head .vv-head-bismi{
    display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:180px; height:28px; background:url('/QuranPlus/img/bismillah.svg') center / contain no-repeat;
    border:none; padding:0; cursor:pointer; opacity:0.95; filter:invert(1) brightness(1.05);
    background-color:transparent;
  }
  #verse-viewer-host .vv-head .vv-head-bismi:hover{ opacity:1; }
  body.qp-theme-light #verse-viewer-host .vv-head .vv-head-bismi{ filter:none; opacity:0.8; }
  /* _2684 (T1): the 'shadow' on every verse's right edge was the .vv-vrail verse rail's gradient strip - the
     mid-screen presence too. Desktop has a real window-edge scrollbar now; the rail is retired here. */
  #verse-viewer-host .vv-vrail{ display:none !important; }
  /* _2685 (T1 MHK): the reading panel ADAPTS to the open sidebar - width shrinks to the remaining space and
     the card anchors LEFT (the sticky header rides inside it, so the hamburger stays visible, just like the
     mini's '...'). Same --qp-snp-width the mini already follows; the pane's drag-resize adjusts it live. */
  body.qp-snp-open #verse-viewer-host{ justify-items:start; }
  #verse-viewer-host .vv-card{ transition: width 200ms ease; }
  body.qp-snp-open #verse-viewer-host .vv-card{ width: calc(100vw - var(--qp-snp-width, 480px)) !important; max-width: calc(100vw - var(--qp-snp-width, 480px)) !important; }
  /* _2684 (T4): the surah banner matches the verse boxing - full column width, square corners */
  #verse-viewer-host .vv-surah-header{ margin:17px !important; padding:18px 16px !important; border-radius:0 !important; width:auto !important; box-sizing:border-box; }   /* _2760 (MHK): his 17px/18-16 verbatim - this mobile !important rule was the cascade winner, so it carries the values (width:auto so the side margins show) */
  /* _2691 (T1 MHK): the green search-results banner wears the same geometry as the surah header + verse boxes */
  #verse-viewer-host .vv-selection-header{ margin:12px 0 !important; border-radius:0 !important; width:100% !important; box-sizing:border-box; }
  /* (1)+(3) flat verses on the page background; a horizontal divider separates them */
  #verse-viewer-host .vv-list:not(.vv-solo) .vv-row{
    background:transparent !important;
    border:none !important;
    border-bottom:1px solid rgba(255,255,255,0.10) !important;
    border-radius:0 !important;
    margin:0 !important;
    padding:36px 8px !important;
    box-shadow:none !important;
  }
  #verse-viewer-host .vv-list:not(.vv-solo) .vv-row:last-child{ border-bottom:none !important; }
  body.qp-theme-light #verse-viewer-host .vv-list:not(.vv-solo) .vv-row{ border-bottom-color:rgba(15,23,42,0.10) !important; }
  /* the focused / reciting verse: a quiet background wash instead of the old border ring */
  #verse-viewer-host .vv-list:not(.vv-solo) .vv-row.vv-focused-verse,
  #verse-viewer-host .vv-list:not(.vv-solo) .vv-row.is-active{
    background:rgba(255,255,255,0.045) !important;
    border:1px solid rgba(255,255,255,0.30) !important;   /* _2684 (T2): genuinely SHARP on all four sides - the _2683 alpha matched the faint dividers, so 3 sides read as invisible */
  }
  body.qp-theme-light #verse-viewer-host .vv-list:not(.vv-solo) .vv-row.vv-focused-verse,
  body.qp-theme-light #verse-viewer-host .vv-list:not(.vv-solo) .vv-row.is-active{
    background:rgba(15,23,42,0.05) !important;
    border:1px solid rgba(15,23,42,0.30) !important;
  }
  /* _2691 (T3 MHK): NON-focused verses carry NO side/top edges and NO shadows - either theme. (The :not()
     chain outranks any later theme rules; the focused box above still wins with its extra class.) */
  #verse-viewer-host .vv-list:not(.vv-solo) .vv-row:not(.vv-focused-verse):not(.is-active),
  body.qp-theme-light #verse-viewer-host .vv-list:not(.vv-solo) .vv-row:not(.vv-focused-verse):not(.is-active){
    border-left:none !important; border-right:none !important; border-top:none !important;
    box-shadow:none !important;
  }
}
/* _2686 (T1+T2 MHK): the HOMEPAGE chapters list - fade the top (below the pills) and the bottom (nearing the
   tabs), both themes (mask = theme-agnostic); and the same scrollbar treatment as the reading view: the
   scroller goes full-bleed (content margins via padding) so its scrollbar sits at the true window edge. */
@media (min-width: 821px){
  .leftScroll{
    width:100vw !important;
    margin-left:calc(50% - 50vw) !important;
    padding-left:calc(50vw - 50%) !important;
    padding-right:calc(50vw - 50%) !important;
    box-sizing:border-box;
    -webkit-mask-image:linear-gradient(to bottom, transparent 0, black 28px, black calc(100% - 96px), transparent 100%);
    mask-image:linear-gradient(to bottom, transparent 0, black 28px, black calc(100% - 96px), transparent 100%);
  }
  .leftScroll::-webkit-scrollbar{ width:12px; }
  .leftScroll::-webkit-scrollbar-track{ background:transparent; }
  .leftScroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.16); border-radius:7px; border:3px solid transparent; background-clip:padding-box; }
  .leftScroll::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.28); background-clip:padding-box; border:3px solid transparent; }
  html.qp-theme-light .leftScroll::-webkit-scrollbar-thumb, body.qp-theme-light .leftScroll::-webkit-scrollbar-thumb{ background:rgba(15,23,42,0.20); background-clip:padding-box; border:3px solid transparent; }
}
/* ============ /_2682 QCOM-DESKTOP (end of the rollback block) ============ */
  /* _2653 (MHK tasks 2 & 7, MOBILE ONLY): retire the island look - no border, no card background (so the
     verse sits on the SAME colour as the page, killing the two-tone boxed feeling), verses closer together,
     and a single thin horizontal rule separates one verse from the next (pure white on dark, pure black on
     light). The row keeps its inner padding for the text. */
  @media (max-width:767px){
    #verse-viewer-host .vv-list:not(.vv-solo) .vv-row{
      background: transparent !important;
      border: 0 !important;
      border-radius: 0 !important;
      margin: 0 4px !important;
      padding-bottom: 18px !important;
      border-bottom: 0.5px solid rgb(255 255 255 / 30%) !important;   /* _2755 0.7 -> _2758 (MHK): verbatim 30% */
    }
    #verse-viewer-host .vv-list:not(.vv-solo) .vv-row:last-child{ border-bottom: 0 !important; }
    #verse-viewer-host .vv-list:not(.vv-solo) .vv-row:first-child{ margin-top: 12px !important; }
    body.qp-theme-light #verse-viewer-host .vv-list:not(.vv-solo) .vv-row{
      background: transparent !important;
      background: transparent !important;   /* _2758 (MHK): verbatim */
      border-bottom-color: rgb(0 0 0 / 23%) !important;   /* _2758 (MHK): verbatim 23% */
    }
    /* _2655 (MHK T3): the separator must stay visible in clutter-free too. The <=820px clutter-free rule
       sets border-color transparent (to melt the desktop card outline), which also zeroed the mobile
       bottom separator. Re-assert border-bottom-color here (later in source, equal specificity, wins),
       for both themes and the reciting row, so the line is ALWAYS on. */
    /* _2720 (MHK): THE CRUEL PAIR. These existed specifically to RE-ASSERT the separator at a DIFFERENT
       value once the chrome was hidden - which is exactly why the line kept changing between the two modes
       even after _2716 removed the two rules that dimmed it. There were SIX rules in total touching this
       border; _2716 found two. All six are gone now. The separator is ONE rule, ONE value, both modes -
       see the .vv-row base below. */
  }
#verse-viewer-host .vv-list:not(.vv-solo) .vv-row:first-child{ margin-top: 20px; }   /* breathing room under the surah header */
/* _2588: neutralise the _2584 negative margins so the ref/icons sit inside the card padding */
#verse-viewer-host .vv-list:not(.vv-solo) .vv-row-head{ margin-top:0; margin-bottom:0; margin-right:0; }
body.qp-theme-light #verse-viewer-host .vv-list:not(.vv-solo) .vv-row{
  background: rgba(15,23,42,0.028);
  border-color: rgba(15,23,42,0.12);
  box-shadow: none;   /* _2629 (MHK) */
}
/* _2628/_2629: the RECITING verse and the FOCUSED verse share ONE look, and the look is nothing more than a
   border colour. _2629 (MHK): no shadow, no ring, no tint - an unfocused card and a focused card are pixel-for-
   pixel identical except that the focused one's thin border is #147795. Same in both themes. */
#verse-viewer-host .vv-list:not(.vv-solo) .vv-row.is-active{
  background: rgba(255,255,255,0.028);
  border-color: #147795 !important;
  box-shadow: none !important;
}
body.qp-theme-light #verse-viewer-host .vv-list:not(.vv-solo) .vv-row.is-active{
  background: rgba(15,23,42,0.028) !important;   /* _2629: match the resting card exactly (beats the light .vv-row background !important) */
  border-color: #147795 !important;
  box-shadow: none !important;
}
@media (hover:hover) and (pointer:fine){
  /* desktop: tame the big stacked padding into a proper card */
  #verse-viewer-host .vv-list:not(.vv-solo) .vv-row{ padding: 24px 30px !important; }
  /* desktop: action icons right-aligned (under the verse ref) and ~30px apart, not stretched full-width */
  #verse-viewer-host .vv-row-head .vv-h-actions{ justify-content:flex-end !important; gap:20px !important; width:100%; }   /* _2678 (T1 MHK): 20px gaps - DESKTOP */
  @media (max-width: 820px){ #verse-viewer-host .vv-row-head .vv-h-actions{ gap:14px !important; } }   /* _2755 (MHK): this unscoped 20px was beating the earlier mobile 14px (same specificity, later wins) - the override now sits AFTER it */
  @media (min-width: 821px) {
    #verse-viewer-host .vv-row-head .vv-h-actions{ gap:30px !important; }   /* _2680 (T4 MHK): desktop 30px */
  }
}
/* _2696 (T5 MHK): the phone gap is 20px, full stop. The row template carries an INLINE gap:35px (~31839,
   tuned for desktop in _2651), and the 20px rule above only lives inside @media (hover:hover)+(pointer:fine)
   - which a touch phone never matches - so the 35px was reaching the phone. This pins it at <=820px and
   leaves desktop's 35px exactly as it is. */
@media (max-width: 820px){
  #verse-viewer-host .vv-row-head .vv-h-actions{ gap:20px !important; }
}

/* ============ _2696/_2697 FADE MASKS - start of the rollback block ============
   Deleting this block restores the hard-cut scrolling exactly as _2695 had it.

   WHY A MASK AND NOT A PAINTED GRADIENT: a mask fades content to whatever is actually behind it, so ONE
   rule serves dark AND light, desktop and mobile. That is why _2686 used a mask for the homepage list.

   _2697 (MHK): THE TOP BAND IS GONE - see the note on the rule below. _2696 tried to fade the verses under
   the sticky header and it was WRONG: it fogged real verse text, and masking a long surah's scroller was a
   perf risk MHK had already flagged. There is no top band, no .qp-scrolled gating, and no per-scroll JS
   left. Do not reintroduce it without a very good reason - it has been tried and rejected on device.

   WHAT LIVES HERE NOW:
     1. the verses list's BOTTOM band (the mini player) + a matching padding-bottom, so the last verse and
        the end bar can be scrolled CLEAR of the player instead of living under it (they could not before:
        list padding-bottom was 0.12px - MHK's screenshot showed the player slicing the last line);
     2. the HOME list's top + bottom bands, the bottom one MEASURED against the tab bar (see _2697 T3). */
/* _2697 (T1 MHK): THE TOP BAND IS GONE. It fogged real verse text (MHK's screenshot: the Turkish line
   ghosted with no header anywhere near it), and he had already flagged the cost of masking a long surah.
   The top of the list is back to exactly what _2695 shipped. What remains is the BOTTOM band only - the
   part that was actually wanted - so the mask is now a single bottom gradient and there is no per-scroll
   class toggling left anywhere (the '_2696 T6 edge-fade' IIFE is deleted too). The padding-bottom stays:
   it is what lets the last verse and the end bar scroll CLEAR of the mini instead of living under it. */
#verse-viewer-host .vv-list{
  --vv-fade-bot: 124px;   /* _2794 (T4 MHK): 92 -> 124 - the fade reaches about one more line now that the mini wears the page color */
  -webkit-mask-image: linear-gradient(to bottom,
      #000 calc(100% - var(--vv-fade-bot)),
      transparent calc(100% - 4px));
  mask-image: linear-gradient(to bottom,
      #000 calc(100% - var(--vv-fade-bot)),
      transparent calc(100% - 4px));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  padding-bottom: var(--vv-fade-bot) !important;   /* scroll room so the last verse clears the mini + the band */
}
/* _2789 (MHK): THE WOBBLE - overflow-y:auto computes overflow-x to auto too, so any child a few px wider
   than a narrow phone (the row-head icon run + its -6px margin vs the 3px mobile gutters) gave the list a
   REAL horizontal scroll range; an off-vertical swipe panned the whole column sideways and it stuck.
   The list is a VERTICAL scroller: the x axis is forbidden. */
#verse-viewer-host .vv-list{ overflow-x:hidden !important; overscroll-behavior-x:none; }
@media (max-width: 820px){
  #verse-viewer-host .vv-list{ --vv-fade-bot: 148px; }   /* _2794 (T4 MHK): 104 -> 148 on mobile - one to two more translation lines fade above the mini */
  /* clutter-free hides the mini as well -> a shallower bottom band */
  body.qp-vvchrome-off #verse-viewer-host .vv-list{ --vv-fade-bot: 46px; }
}
/* _2696 (T6 MHK): the HOMEPAGE list gets the same treatment on MOBILE - it has been desktop-only since
   _2686 (that rule lives inside the >=821px QCOM block, and MHK approved how it reads there). Same feel,
   same numbers: items fade under the Surah/Juz/Topics pills and into the bottom tabs. The .list inside
   already carries ~80px of bottom padding for the tabs, so nothing is trapped behind the bottom band. */
/* _2697 (T3 MHK - ROOT CAUSE of 'the fade near the tabs is literally not existing'): .leftScroll is
   max-height:80.2vh and STARTS below the pills, so its bottom edge lands BELOW the viewport, and the fixed
   bottom tab bar floats over roughly its last 160px. The _2696 band was measured from the scroller's own
   bottom, so it sat entirely behind the tabs and off-screen - hence a beautiful top fade and no bottom one.
   The band must be measured against the TAB BAR's top edge, and that distance depends on where the pills
   end, so it CANNOT be a constant: window._qpHomeFadeBot() measures it and publishes --lf-end (transparent
   exactly at the tab bar's top edge) and --lf-bot (fully opaque 54px above it). The defaults below are only
   what shows for the frame before the first measurement lands.
   This supersedes the _2686 desktop mask inside the QCOM block (left in place, byte-intact, so deleting the
   QCOM block still rolls that experiment back cleanly) - now BOTH platforms fade into their tabs. */
/* _2698 (T6 MHK - ROOT CAUSE of the half-painted chapter list): the mask used to apply IMMEDIATELY, with
   px fallbacks (--lf-end:150 / --lf-bot:204) chosen for a full-height scroller. But on first paint
   .leftScroll is only as tall as the handful of rows rendered so far - a 204px bottom band against a
   ~320px-tall element ate two thirds of it, which is exactly MHK's screenshot: four surahs, An-Nisa
   fading, then blank. It stayed that way until a settling timer re-measured - the 'sometimes with a big
   delay' half. The mask is now gated on .qp-faded, which _qpHomeFadeBot() adds ONLY after it has measured
   a sane geometry (and removes when there is nothing to fade into). No measurement -> no mask -> the list
   simply paints. */
.leftScroll.qp-faded{
  --lf-end: 0px;
  --lf-bot: 54px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - var(--lf-bot)), transparent calc(100% - var(--lf-end)));   /* _2819 dropped the top fade for the border -> _2822 (MHK): BOTH - the fade returns and the 26px list padding seats the at-rest border below its solid edge */
  mask-image: linear-gradient(to bottom, transparent 0, #000 22px, #000 calc(100% - var(--lf-bot)), transparent calc(100% - var(--lf-end)));
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
/* _2713 (T1 MHK - THE MASK I MISSED). In _2708 I found a mask-image destroying the mobile chapter list,
   removed it from .list, and called it done. THERE ARE TWO. This is the other one, and .leftScroll is the
   SCROLLER THAT HOLDS THE ENTIRE 114-SURAH LIST - so it is the one that actually mattered. MHK's own
   inspector breadcrumb says it outright: .leftScroll.qp-faded > div#results.list > div.section > div.srow.
   A mask promotes its element to a composited layer; the layer is many thousands of pixels tall; past the
   rasterisation cap nothing paints. The rows are all present and correctly sized (his inspector shows
   div.srow at 435.77x79.3) - they simply were never drawn.
   HIS SECOND CLUE EXPLAINS ITSELF TOO: 'switching from DARK to LIGHT immediately fixes it.' No light rule
   does that - changing theme forces a FULL REPAINT, which re-rasterises the layer. A repaint side-effect,
   not a colour fix, and the classic signature of exactly this bug.
   Desktop keeps the fade; it has no such cap. */
@media (max-width: 820px){
  .leftScroll.qp-faded{
    /* _2822 (MHK): was mask:none (the mobile kill) - his ss1 hard clip lived HERE. A top-only fade
       costs almost nothing and gives the elegant dissolve under the tabs. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22px) !important;
    mask-image: linear-gradient(to bottom, transparent 0, #000 22px) !important;
  }
}
/* ============ /_2696 FADE MASKS (end of the rollback block) ============ */

/* Desktop: allow selecting English, transliteration, other-language text */
@media (hover: hover) and (pointer: fine) {
  .vv-left { -webkit-user-select: text; user-select: text; cursor: text; }
  .vv-ar, .vv-ar2 { -webkit-user-select: text; user-select: text; cursor: text; }
  .vv-tr, .vv-tr-word { -webkit-user-select: text; user-select: text; }   /* _2755 (MHK): the translit native-tray fix - the desktop-only (hover+fine) block was the sole grant; .vv-tr sits outside .vv-left/.vv-right since _2712, so mobile never got it */
  .ar-word { -webkit-user-select: text; user-select: text; }
  .vv-right { -webkit-user-select: text; user-select: text; }

  /* Custom CSS tooltip via data-tip */
  .ar-word[data-tip] { position: relative; }
  .ar-word[data-tip]:hover::after { display: none; } /* suppress old ::after */

  .qp-tip-meaning { font-family:system-ui,-apple-system,sans-serif; font-size:11px; font-weight:700; letter-spacing:0.9px; color:rgba(210,230,255,0.96); }
  body.qp-theme-light .qp-tip-meaning { color:#fff; }

  /* _2693 (T1 MHK): NO hover effects on words - the cursor alone signals clickability. */
  .vv-tr-word { cursor: default; border-radius: 3px; transition: background 0.15s; display: inline; }
  /* _2693 (T1 MHK): (translit hover wash removed too) */
  /* _1965: cross-highlight — lit up by hovering the counterpart word */
  .ar-word.is-xhl { color: #ffffff !important; transition: color 0.1s; }
  body.qp-theme-light .ar-word.is-xhl { color: #d97706 !important; }
  .vv-tr-word.is-xhl { color: #ffffff; transition: color 0.1s; }
  body.qp-theme-light .vv-tr-word.is-xhl { color: #d97706; }
  /* _2346: recitation highlight for the transliteration word (mirrors the Arabic orange) */
  .vv-tr-word.is-highlighted { color: #e0d9ee; transition: color 0.15s ease-out; }
  body.qp-theme-light .vv-tr-word.is-highlighted { color: #d97706; }
  /* _1964: .qp-tr-meaning-pop removed — translit hover now uses #qp-word-tip */

  .vv-ar .vv-ar2, .vv-right, .vv-en, .vv-tr { ::selection { background: rgba(13,213,213,0.55); color: #fff; } }

  /* qp-word-popup: all text non-selectable to prevent iOS bleed */
  .qp-word-popup { -webkit-user-select: none !important; user-select: none !important; }
}

/* _2546: RECITATION translit highlight must exist on TOUCH devices too. Since _2346 these two rules
   lived only inside the desktop-only @media (hover:hover) and (pointer:fine) block above - phones
   applied .is-highlighted with no CSS behind it (MHK's mobile report). Hover-only rules stay inside;
   the recitation pair now also lives out here, media-free. */
.vv-tr-word.is-highlighted { color: #e0d9ee; transition: color 0.15s ease-out; }
body.qp-theme-light .vv-tr-word.is-highlighted { color: #d97706; }
/* Suppress iOS native callout globally on all verse text — !important beats user-select:text on children */
/* Suppress iOS native callout on Arabic only — English/TR allow it for Copy/Look Up consistency */
.vv-ar, .vv-ar2 { -webkit-touch-callout: none !important; }
/* _2759 (MHK): 'I told you to cancel this iOS native behavior' - on MOBILE the long press belongs to
   the STUDY SCREEN, full stop. Row-wide none with !important so no child text-grant can punch through
   (the visibility lesson, selection edition: the rail's row-level suppression was being overridden by
   per-column user-select:text on the children). The desktop (hover+fine) blocks keep selection. */
@media (hover: none), (pointer: coarse) {
  #verse-viewer-host .vv-row, #verse-viewer-host .vv-row * { -webkit-user-select: none !important; user-select: none !important; -webkit-touch-callout: none !important; }
}




  /* Inline QuranSearch area when Ask AI is clicked in the overlay */
  .vv-qs{
    border-top:1px solid var(--line);
    background:#000;
  }
  .vv-qs iframe{
    display:block;
    width:100%;
    height:min(72vh, 860px);
    border:0;
    background:#000;
  }

  /* High-contrast ASK AI link inside overlay */
  .vv-list .askai-link{
    color:#05f2cd;
    font-weight:700;
    text-decoration:underline;
  }

  /* one container per verse */
  .vv-row{
    display:grid;
    grid-template-columns: 1fr 1fr; /* 50/50 columns */
    gap:24px;
    align-items:flex-start;
    padding:16px 18px;
    border-top:1px solid var(--line);
    border-bottom:0.1px solid #747e8a;
  }
  .vv-row:first-child{ border-top:0; }

  /* left = English, right = Arabic — but CSS grid order swaps them visually: Arabic col1, English col2 */
  .vv-left{ text-align:left; order:2; padding-left:0; } 
  
  .vv-right{ text-align:right; color:#28d1c0; white-space:normal; order:1; padding-right:0; }

  /* small ref badge on the left edge */
  .vv-badge{
    display:inline-grid; place-items:center;
    min-width:38px; height:28px; padding:0 8px; margin-right:10px;
    border:1px solid #2b3c4a; border-radius:8px; color:#bcd3ea; font-weight:600; font-size:13px;
    vertical-align:top;
  }

  /* highlight hook */
  .vv-row.is-active{
    background:#0e131a;
    box-shadow:inset 0 0 0 1px #16343f;
  }

  


/* Prevent “rubber-band” and background scrolling while overlay is up */
#verse-viewer-host { overscroll-behavior: contain; }
#verse-viewer-host .vv-row-head .vv-h-actions { opacity: 1; }   /* _2754 (MHK) set 0.641 -> _3111 (MHK ss3): 1. THE DIM WAS NEVER THE BUTTON. Group opacity on this CONTAINER composites the whole subtree AFTER each child applies its own, so _3100 opacity:1 !important on .vv-h-btn was multiplied by this and could never win - three fixes aimed one level too low. Removing the inheritance rather than exempting the child (the standing law). The 0.941 twin in the php is lifted in the same build; both had to go or the survivor would just take over. */
.vv-card, .vv-list   { overscroll-behavior: contain; }



/* ══ Verse Viewer preferences (layout + font scales) ═════════════ */
#verse-viewer-host{
  --en-scale: 1;   /* translation scale multiplier */
  --ar-scale: 1;   /* arabic scale multiplier */
}

/* scale the actual text */
.vv-row .vv-left .vv-en { cancelled;font-size: calc(17px * var(--en-scale)); }
.vv-row .vv-right .vv-ar{ cancelled;font-size: calc(20px * var(--ar-scale)); }
.vv-row .vv-right .vv-ar2{ cancelled;font-size: calc(20px * var(--ar-scale)); }



/* stacked layout option */
#verse-viewer-host.vv-layout-stack .vv-row{
  grid-template-columns: 1fr;    /* one column */
}
#verse-viewer-host.vv-layout-stack .vv-right{
  text-align:right;              /* keep Arabic right-aligned */
}
#verse-viewer-host.vv-layout-stack .vv-left{ margin-bottom:6px; }

/* gear button in overlay header */
.vv-head .vv-gear{
  display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:8px;
  background:#0e2026; border:1px solid #16343f; color:#05f2cd;
  cursor:pointer;
}

/* settings panel (simple modal-in-modal) */
.vv-settings-panel{
  position:fixed; inset:0; z-index:10000;
  display:grid; place-items:center;
  background:rgba(0,0,0,.45); backdrop-filter:blur(2px);
}
.vv-settings-card{
  width:min(560px,94vw);
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:14px;
}
.vv-settings-card h3{ margin:4px 0 10px; }
.vv-opt-row{ display:grid; gap:8px; margin:10px 0 14px; }
.vv-chipbar{ display:flex; gap:8px; flex-wrap:wrap; }
.vv-chip{
  padding:6px 10px; border-radius:999px; cursor:pointer;
  background:#0f172a; color:#cfe6ff; border:1px solid rgba(255,255,255,.16);
  font-weight:700;
}
.vv-chip.is-on{ background:#16a34a; color:#041b10; border-color:transparent; }

.vv-font-demo{
  padding:10px; border:1px dashed var(--line); border-radius:10px;
  background:#0e131a;
}
.vv-font-ctrls{ display:flex; gap:8px; align-items:center; margin-top:8px; }
.vv-A{ font-weight:900; }
.vv-btn{
  padding:6px 10px; border-radius:8px; cursor:pointer;
  background:#0f172a; color:#cfe6ff; border:1px solid rgba(255,255,255,.16);
  font-weight:700;
}
/* verse-overlay play icon (next to close) */
.vv-play{
  width:34px; height:34px; border-radius:8px;
  border:0; cursor:pointer;
  background:transparent;
   color:#fff; 
  display:inline-grid; place-items:center;
  font-size:16px; line-height:1;

}
.vv-play:hover{ background:rgba(255,255,255,.18); }

.vv-settings-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:6px; }


/* Optional: also help some browsers ignore background scrollbars */
html.is-locked, body.is-locked { overflow: hidden; }



  /* === Mobile fit & visibility (iPhone-friendly) === */
@media (max-width: 820px){
  /* keep inputs at >=16px to prevent iOS zoom */
  .searchbox input{ font-size:16px; min-width:0; }

  /*.searchbox{ gap:8px; padding:8px 10px; border-radius:4.12px; }*/

 
  .searchbox{gap: 6px;padding: 10px 8px;border-radius:0.12px;margin-left: -6px;margin-right: -4px;margin-bottom: 0.9px;margin-top: 0.20px; background:#403d4d52 !important;} 

  body.qp-theme-light .searchbox{background:#b9b5ca52 !important;} 


  /* luli */
  



  .searchbox .action,
  .searchbox .action--ask{
    flex-shrink:0 !important;
    width:34px; height:34px;
  }
  .searchbox .action--ask{
    width:auto; min-width:56px; height:30px; padding:0 10px; border-radius:8px;
  }


  /* slightly smaller general text inside lists */
  .list{ border-radius:12px; }
  .sec-title{ font-size:11px; margin:2px 2px 6px; }

  /* CHAPTER ROWS — tighter grid & fonts */
  .srow{
    grid-template-columns: 52px 1fr auto;  /* badge | text | (right) */
    gap:4px;
    padding:15.14px;
    padding-left:12px;
    margin-left:-20px; /* mhk */
  }
  .num{
    width:auto; min-width:28px; height:22px; border-radius:6px; margin-left:0;