/* ==============================================================
   QURAN READER  (qrd-)  — Views/Quran/Reader.cshtml
   The first part is the design's own stylesheet (quran-reader.html);
   the verse-by-verse additions for the database-driven reader follow.
   ============================================================== */
.qrd-page { background:#f6f8f7; }
body.dark.qrd-page { background:#0f1512; }

/* ---- Hero ---- */
.qrd-hero{
  position:relative;
  background:linear-gradient(135deg,#0b3d2e 0%,#1f7a63 55%,#16624f 100%);
  color:#fff; padding:2.5rem 0 2rem; overflow:hidden;
}
.qrd-hero::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle at 85% 15%,rgba(255,255,255,.08) 0,transparent 45%),
                   radial-gradient(circle at 10% 90%,rgba(230,184,92,.12) 0,transparent 45%);
  pointer-events:none;
}
.qrd-hero-inner{ position:relative; z-index:1; }
.qrd-hero h1{ font-size:2rem; font-weight:700; margin-bottom:.35rem; }
.qrd-hero p{ color:rgba(255,255,255,.85); max-width:620px; margin:0 auto; }
.qrd-hero-icon{
  width:60px;height:60px;border-radius:18px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.14);backdrop-filter:blur(8px);font-size:1.7rem;margin-bottom:.8rem;
}

/* ---- Toolbar ---- */
.qrd-toolbar{
  position:sticky; top:0; z-index:200;
  background:rgba(255,255,255,.97); backdrop-filter:blur(14px);
  border-bottom:1px solid #e5e7eb; box-shadow:0 2px 16px rgba(0,0,0,.05);
  padding:.7rem 0;
}
body.dark .qrd-toolbar{ background:rgba(20,28,24,.97); border-bottom-color:#243029; }
.qrd-toolbar-row{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.qrd-tb-group{ display:flex; flex-direction:column; gap:2px; }
.qrd-tb-label{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#6b7280; padding-left:2px; }
body.dark .qrd-tb-label{ color:#9aa6a0; }
.qrd-select{
  border:1.5px solid #e1e5e9; border-radius:10px; padding:.45rem .7rem; font-size:.85rem; font-weight:600;
  background:#fff; color:#1f2937; cursor:pointer; min-width:140px; transition:border-color .15s,box-shadow .15s;
}
.qrd-select:focus{ outline:none; border-color:#1f7a63; box-shadow:0 0 0 3px rgba(31,122,99,.15); }
body.dark .qrd-select{ background:#16201b; border-color:#2b3833; color:#e7ece9; }

/* page nav */
.qrd-page-nav{ display:flex; align-items:center; gap:.4rem; }
.qrd-nav-btn{
  width:40px;height:40px;border-radius:10px;border:1.5px solid #e1e5e9;background:#fff;color:#1f7a63;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;transition:.15s;
}
.qrd-nav-btn:hover{ background:#1f7a63; color:#fff; border-color:#1f7a63; }
.qrd-nav-btn:disabled{ opacity:.4; cursor:not-allowed; }
body.dark .qrd-nav-btn{ background:#16201b; border-color:#2b3833; }
.qrd-page-input{
  width:62px;text-align:center;border:1.5px solid #e1e5e9;border-radius:10px;padding:.45rem .3rem;
  font-weight:700;font-size:.9rem;background:#fff;color:#1f2937;
}
.qrd-page-input:focus{ outline:none;border-color:#1f7a63;box-shadow:0 0 0 3px rgba(31,122,99,.15); }
body.dark .qrd-page-input{ background:#16201b;border-color:#2b3833;color:#e7ece9; }
.qrd-page-total{ font-size:.8rem; font-weight:600; color:#6b7280; }
body.dark .qrd-page-total{ color:#9aa6a0; }

.qrd-tb-actions{ display:flex; gap:.4rem; align-items:center; margin-left:auto; }
.qrd-icon-btn{
  height:40px; padding:0 .85rem; border-radius:10px; border:1.5px solid #e1e5e9; background:#fff;
  color:#374151; font-size:.82rem; font-weight:600; display:inline-flex; align-items:center; gap:.35rem; cursor:pointer; transition:.15s;
}
.qrd-icon-btn:hover{ border-color:#1f7a63; color:#1f7a63; }
.qrd-icon-btn.qrd-accent{ background:#1f7a63; color:#fff; border-color:#1f7a63; }
.qrd-icon-btn.qrd-accent:hover{ background:#16624f; color:#fff; }
body.dark .qrd-icon-btn{ background:#16201b; border-color:#2b3833; color:#d7ddda; }

/* ---- Layout: options sidebar + reading area ---- */
.qrd-layout{
  display:flex; align-items:flex-start; gap:1.6rem;
  max-width:1300px; margin:0 auto; padding:1.6rem 1rem 7rem;
}
.qrd-main{ flex:1; min-width:0; }

.qrd-sidebar{
  position:sticky; top:108px; flex:0 0 288px; width:288px;
  background:#fff; border:1px solid #e7eae8; border-radius:20px;
  box-shadow:0 10px 34px rgba(0,0,0,.07);
  padding:1.1rem 1.1rem 1.2rem; max-height:calc(100vh - 128px); overflow-y:auto;
}
body.dark .qrd-sidebar{ background:#131916; border-color:#26312b; box-shadow:0 10px 34px rgba(0,0,0,.4); }
.qrd-sb-head{
  display:flex; align-items:center; gap:.55rem; font-weight:700; font-size:1rem; color:#0b3d2e;
  padding:.1rem .1rem .85rem; border-bottom:1px solid #eef1ef; margin-bottom:1rem;
}
.qrd-sb-head .qrd-sb-ic{
  width:30px;height:30px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#1f7a63,#2eb872); color:#fff; font-size:.95rem; flex-shrink:0;
}
body.dark .qrd-sb-head{ color:#e7ece9; border-bottom-color:#243029; }
.qrd-sb-close{
  margin-left:auto; width:32px;height:32px;border:none;background:transparent;border-radius:8px;
  font-size:1.2rem; color:#9aa6a0; cursor:pointer; display:none; align-items:center; justify-content:center;
}
.qrd-sb-close:hover{ background:#f1f3f2; color:#1f2937; }
body.dark .qrd-sb-close:hover{ background:#202b25; color:#e7ece9; }

.qrd-sb-section{ margin-bottom:1.15rem; }
.qrd-sb-section:last-child{ margin-bottom:0; }
.qrd-sb-title{
  font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; color:#1f7a63;
  margin-bottom:.6rem; display:flex; align-items:center; gap:.4rem;
}
.qrd-sb-title i{ font-size:.85rem; }
body.dark .qrd-sb-title{ color:#5cc999; }

.qrd-field{ margin-bottom:.75rem; }
.qrd-field:last-child{ margin-bottom:0; }
.qrd-field-label{
  display:flex; align-items:center; justify-content:space-between;
  font-size:.72rem; font-weight:600; color:#6b7280; margin-bottom:.3rem;
}
body.dark .qrd-field-label{ color:#9aa6a0; }
.qrd-field .qrd-select{ width:100%; min-width:0; }
.qrd-field .qrd-page-nav{ justify-content:space-between; }
.qrd-field .qrd-page-input{ flex:1; min-width:0; }
.qrd-field .qrd-page-total{ flex-shrink:0; }

/* text-size control */
.qrd-size-val{
  font-weight:700; color:#1f7a63; font-size:.78rem; background:#e4f3ee; padding:.05rem .45rem; border-radius:20px;
}
body.dark .qrd-size-val{ color:#5cc999; background:rgba(92,201,153,.14); }
.qrd-size-row{ display:flex; align-items:center; gap:.5rem; }
.qrd-step{
  width:36px;height:36px;flex-shrink:0;border-radius:10px;border:1.5px solid #e1e5e9;background:#fff;
  color:#1f7a63;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s;font-size:1rem;
}
.qrd-step:hover{ background:#1f7a63;color:#fff;border-color:#1f7a63; }
body.dark .qrd-step{ background:#16201b;border-color:#2b3833;color:#5cc999; }
.qrd-range{
  -webkit-appearance:none; appearance:none; flex:1; min-width:0; height:6px; border-radius:6px;
  background:#e3e7e5; cursor:pointer; outline:none;
}
.qrd-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px;height:18px;border-radius:50%;
  background:#1f7a63; border:3px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.25); cursor:pointer; transition:.15s;
}
.qrd-range::-webkit-slider-thumb:hover{ background:#16624f; transform:scale(1.1); }
.qrd-range::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;background:#1f7a63;border:3px solid #fff;cursor:pointer;
}
body.dark .qrd-range{ background:#2b3833; }
body.dark .qrd-range::-webkit-slider-thumb{ background:#5cc999; border-color:#131916; }
body.dark .qrd-range::-moz-range-thumb{ background:#5cc999; border-color:#131916; }

/* stacked sidebar buttons */
.qrd-sb-actions{ display:flex; flex-direction:column; gap:.55rem; }
.qrd-sb-actions .qrd-tf-toggle,
.qrd-sb-actions .qrd-icon-btn{ width:100%; height:44px; justify-content:center; font-size:.85rem; }

/* mobile FAB + drawer backdrop */
.qrd-sb-fab{
  display:none; position:fixed; left:1rem; bottom:5.4rem; z-index:320;
  height:48px; padding:0 1.15rem; border-radius:26px; border:none;
  background:linear-gradient(135deg,#1f7a63,#2eb872); color:#fff; font-weight:700; font-size:.85rem;
  align-items:center; gap:.5rem; box-shadow:0 10px 26px rgba(31,122,99,.42); cursor:pointer;
}
.qrd-sb-fab:active{ transform:scale(.96); }
.qrd-sb-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1040;
  opacity:0; visibility:hidden; transition:opacity .25s, visibility .25s;
}
.qrd-sb-backdrop.open{ opacity:1; visibility:visible; }

@media (max-width: 991.98px){
  .qrd-layout{ display:block; padding:1rem .8rem 7rem; }
  .qrd-sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:1050; width:310px; max-width:86%;
    border-radius:0 22px 22px 0; max-height:100vh; overflow-y:auto;
    transform:translateX(-105%); transition:transform .28s ease;
  }
  .qrd-sidebar.open{ transform:translateX(0); }
  .qrd-sb-close{ display:inline-flex; }
  .qrd-sb-fab{ display:inline-flex; }
}

/* ---- Mushaf sheet ---- */
.qrd-stage{ padding:1.6rem 0 7rem; }
.qrd-mushaf{
  max-width:900px; margin:0 auto; background:#fffdf7;
  border:1px solid #ece6d6; border-radius:20px; padding:1.4rem 1.4rem 1.8rem;
  box-shadow:0 10px 40px rgba(0,0,0,.07);
  position:relative;
}
.qrd-mushaf::before{
  content:''; position:absolute; inset:8px; border:1.5px solid #e6d9b8; border-radius:14px; pointer-events:none;
}
body.dark .qrd-mushaf{ background:#131916; border-color:#26312b; box-shadow:0 10px 40px rgba(0,0,0,.4); }
body.dark .qrd-mushaf::before{ border-color:#2f3a33; }

.qrd-page-corner{
  position:relative; z-index:2; text-align:center; font-size:.72rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:#b08d57; margin-bottom:.4rem;
}

/* surah header */
.qrd-surah-header{
  position:relative; z-index:2; display:flex; align-items:center; gap:1rem; justify-content:space-between;
  margin:1.2rem 0 .6rem; padding:.7rem 1rem;
  background:linear-gradient(135deg,#1f7a63,#2eb872); border-radius:14px; color:#fff;
  box-shadow:0 6px 18px rgba(31,122,99,.25);
}
.qrd-surah-header:first-child{ margin-top:.2rem; }
.qrd-sh-main{ text-align:center; flex:1; }
.qrd-sh-arabic{ font-family:"Amiri Quran","Noto Naskh Arabic",serif; font-size:1.7rem; line-height:1.3; }
.qrd-sh-eng{ font-size:.74rem; opacity:.92; letter-spacing:.03em; margin-top:1px; }
.qrd-sh-badge{
  width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.18);display:inline-flex;
  align-items:center;justify-content:center;font-weight:700;font-size:.85rem;
}
.qrd-sh-play{
  width:38px;height:38px;border-radius:50%;border:none;background:rgba(255,255,255,.18);color:#fff;
  font-size:1.2rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.15s;
}
.qrd-sh-play:hover{ background:#fff; color:#1f7a63; }

.qrd-bismillah{
  position:relative; z-index:2; text-align:center; font-family:"Amiri Quran","Noto Naskh Arabic",serif;
  font-size:1.9rem; color:#1f7a63; margin:.8rem 0 1rem; direction:rtl;
}
body.dark .qrd-bismillah{ color:#5cc999; }

/* verses flow */
.qrd-verses{
  position:relative; z-index:2; direction:rtl; text-align:justify; line-height:var(--qrd-lh,2.5);
  font-family:var(--qrd-family,"Amiri Quran","Noto Naskh Arabic",serif); font-size:var(--qrd-font,30px);
  padding:.4rem .2rem;
}
.qrd-ayah{
  display:inline; border-radius:10px; padding:.08em .25em; cursor:default;
  transition:background .15s, box-shadow .15s; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.qrd-ayah-text{ }
.qrd-ayah-num{
  display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
  width:1.35em; height:1.35em; margin:0 .12em; border:none; background:transparent; cursor:pointer;
  font-family:"Amiri Quran",serif; color:inherit; position:relative; border-radius:50%;
  font-size:.62em; line-height:1; transition:.15s;
}
.qrd-ayah-num .qrd-num-val{
  position:relative; z-index:1;
  display:inline-flex;align-items:center;justify-content:center;width:100%;height:100%;
  border-radius:50%; background:rgba(0,0,0,.04); border:1.5px solid currentColor; font-weight:600;
  font-family:"Noto Naskh Arabic","Scheherazade New",serif; line-height:1;
  font-size:.82em; padding-bottom:.04em;
}
.qrd-ayah-num .qrd-num-play{ display:none; position:absolute; inset:0; align-items:center; justify-content:center; }
.qrd-ayah-num:hover .qrd-num-val{ opacity:0; }
.qrd-ayah-num:hover .qrd-num-play{ display:flex; }

/* color palette (6 rotating tints) */
.qrd-c0{ color:#155e4b; } .qrd-c0:hover,.qrd-c0.qrd-sel{ background:#e4f3ee; }
.qrd-c1{ color:#5b3bb8; } .qrd-c1:hover,.qrd-c1.qrd-sel{ background:#efeafb; }
.qrd-c2{ color:#b45309; } .qrd-c2:hover,.qrd-c2.qrd-sel{ background:#fdf0e2; }
.qrd-c3{ color:#1d4ed8; } .qrd-c3:hover,.qrd-c3.qrd-sel{ background:#e7eefc; }
.qrd-c4{ color:#be1457; } .qrd-c4:hover,.qrd-c4.qrd-sel{ background:#fce7f0; }
.qrd-c5{ color:#3f7e1f; } .qrd-c5:hover,.qrd-c5.qrd-sel{ background:#eef7e6; }
body.dark .qrd-c0{ color:#5cc999; } body.dark .qrd-c0:hover,body.dark .qrd-c0.qrd-sel{ background:rgba(92,201,153,.12); }
body.dark .qrd-c1{ color:#b49bf5; } body.dark .qrd-c1:hover,body.dark .qrd-c1.qrd-sel{ background:rgba(180,155,245,.12); }
body.dark .qrd-c2{ color:#f0ad5b; } body.dark .qrd-c2:hover,body.dark .qrd-c2.qrd-sel{ background:rgba(240,173,91,.12); }
body.dark .qrd-c3{ color:#7da6f5; } body.dark .qrd-c3:hover,body.dark .qrd-c3.qrd-sel{ background:rgba(125,166,245,.12); }
body.dark .qrd-c4{ color:#f17bab; } body.dark .qrd-c4:hover,body.dark .qrd-c4.qrd-sel{ background:rgba(241,123,171,.12); }
body.dark .qrd-c5{ color:#8fce63; } body.dark .qrd-c5:hover,body.dark .qrd-c5.qrd-sel{ background:rgba(143,206,99,.12); }

/* currently playing */
.qrd-ayah.qrd-playing{
  background:#fff4d6 !important; box-shadow:inset 0 0 0 2px #e6b85c;
}
body.dark .qrd-ayah.qrd-playing{ background:rgba(230,184,92,.16) !important; box-shadow:inset 0 0 0 2px #e6b85c; }

/* loading / error */
.qrd-loading,.qrd-error{ position:relative; z-index:2; text-align:center; padding:4rem 1rem; color:#6b7280; }
body.dark .qrd-loading,body.dark .qrd-error{ color:#9aa6a0; }
.qrd-spinner{
  width:44px;height:44px;border:4px solid #e5e7eb;border-top-color:#1f7a63;border-radius:50%;
  margin:0 auto 1rem;animation:qrdspin .8s linear infinite;
}
@keyframes qrdspin{ to{ transform:rotate(360deg); } }

/* ---- Audio bar ---- */
.qrd-audiobar{
  position:fixed; left:0; right:0; bottom:0; z-index:300;
  background:rgba(255,255,255,.98); backdrop-filter:blur(16px);
  border-top:1px solid #e5e7eb; box-shadow:0 -4px 24px rgba(0,0,0,.08);
  padding:.55rem 0;
}
body.dark .qrd-audiobar{ background:rgba(18,25,21,.98); border-top-color:#26312b; }
.qrd-ab-row{ display:flex; align-items:center; gap:.8rem; }
.qrd-ab-info{ min-width:0; display:flex; align-items:center; gap:.6rem; flex:1; }
.qrd-ab-badge{
  width:42px;height:42px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,#1f7a63,#2eb872);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;
}
.qrd-ab-titles{ min-width:0; }
.qrd-ab-title{ font-weight:700; font-size:.88rem; color:#1f2937; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qrd-ab-sub{ font-size:.72rem; color:#6b7280; white-space:nowrap; }
body.dark .qrd-ab-title{ color:#e7ece9; } body.dark .qrd-ab-sub{ color:#9aa6a0; }
.qrd-ab-controls{ display:flex; align-items:center; gap:.4rem; }
.qrd-ab-btn{
  width:42px;height:42px;border-radius:50%;border:none;background:#f1f3f2;color:#1f2937;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;transition:.15s;
}
.qrd-ab-btn:hover{ background:#e3e7e5; }
.qrd-ab-btn.qrd-ab-play{ width:52px;height:52px;background:#1f7a63;color:#fff;font-size:1.45rem; }
.qrd-ab-btn.qrd-ab-play:hover{ background:#16624f; }
body.dark .qrd-ab-btn{ background:#202b25; color:#e7ece9; }
body.dark .qrd-ab-btn:hover{ background:#2a362f; }
.qrd-ab-toggle{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.76rem; font-weight:600; color:#374151; cursor:pointer; user-select:none;
}
body.dark .qrd-ab-toggle{ color:#cdd5d1; }
.qrd-switch{ position:relative; width:38px; height:22px; background:#cbd5d1; border-radius:20px; transition:.2s; flex-shrink:0; }
.qrd-switch::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; background:#fff; border-radius:50%; transition:.2s; }
.qrd-switch.on{ background:#1f7a63; } .qrd-switch.on::after{ left:18px; }
.qrd-ab-progress{ height:4px; background:#e5e7eb; border-radius:4px; overflow:hidden; margin-top:.45rem; }
.qrd-ab-progress-bar{ height:100%; width:0; background:linear-gradient(90deg,#1f7a63,#2eb872); transition:width .15s linear; }
body.dark .qrd-ab-progress{ background:#26312b; }

/* ---- Bookmarks offcanvas ---- */
.qrd-bm-item{
  display:flex; align-items:flex-start; gap:.7rem; padding:.8rem .9rem; border:1px solid #e5e7eb;
  border-radius:14px; margin-bottom:.6rem; transition:.15s; background:#fff;
}
.qrd-bm-item:hover{ border-color:#1f7a63; box-shadow:0 4px 14px rgba(31,122,99,.1); }
body.dark .qrd-bm-item{ background:#16201b; border-color:#2b3833; }
.qrd-bm-ico{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;background:#e4f3ee;color:#1f7a63;
  display:flex;align-items:center;justify-content:center;font-size:1.1rem;
}
body.dark .qrd-bm-ico{ background:rgba(31,122,99,.18); color:#5cc999; }
.qrd-bm-body{ flex:1; min-width:0; cursor:pointer; }
.qrd-bm-name{ font-weight:700; font-size:.88rem; color:#1f2937; }
.qrd-bm-meta{ font-size:.72rem; color:#6b7280; }
body.dark .qrd-bm-name{ color:#e7ece9; } body.dark .qrd-bm-meta{ color:#9aa6a0; }
.qrd-bm-del{ border:none; background:transparent; color:#9ca3af; font-size:1rem; cursor:pointer; padding:.2rem; }
.qrd-bm-del:hover{ color:#dc2626; }
.qrd-bm-empty{ text-align:center; padding:3rem 1rem; color:#9ca3af; }

@media (max-width: 575.98px){
  .qrd-sh-arabic{ font-size:1.4rem; }
  .qrd-bismillah{ font-size:1.5rem; }
  .qrd-ab-info .qrd-ab-badge{ display:none; }
  .qrd-tb-actions{ width:100%; margin-left:0; }
}

/* toolbar tafsir toggle */
.qrd-tf-toggle{
  height:40px; padding:0 .85rem; border-radius:10px; border:1.5px solid #e1e5e9; background:#fff;
  color:#374151; font-size:.82rem; font-weight:600; display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; transition:.15s;
}
.qrd-tf-toggle:hover{ border-color:#7c3aed; color:#7c3aed; }
.qrd-tf-toggle.on{ background:#7c3aed; color:#fff; border-color:#7c3aed; }
body.dark .qrd-tf-toggle{ background:#16201b; border-color:#2b3833; color:#d7ddda; }
body.dark .qrd-tf-toggle.on{ background:#8b5cf6; border-color:#8b5cf6; color:#fff; }
.qrd-tf-toggle .qrd-switch{ background:#cbd5d1; }
.qrd-tf-toggle.on .qrd-switch{ background:rgba(255,255,255,.5); }
.qrd-tf-toggle.on .qrd-switch::after{ background:#fff; }

/* ==============================================================
   Verse-by-verse reading (database-driven reader)
   ============================================================== */

/* the page's sticky navbar sits above the sidebar */
.qrd-sidebar{ z-index:5; }
@media (max-width: 991.98px){ .qrd-sidebar{ z-index:1050; } }

.qrd-hero .breadcrumb, .qrd-hero .breadcrumb a, .qrd-hero .breadcrumb-item.active,
.qrd-hero .breadcrumb-item + .breadcrumb-item::before{ color:rgba(255,255,255,.8); }
.qrd-hero .breadcrumb a:hover{ color:#fff; }

.qrd-surah-meta{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem;
  margin:.2rem 0 .6rem; font-size:.74rem; font-weight:600; color:#6b7280;
}
.qrd-surah-meta span{ background:#f1f3f2; border-radius:20px; padding:.2rem .7rem; }
body.dark .qrd-surah-meta{ color:#9aa6a0; }
body.dark .qrd-surah-meta span{ background:#1b2520; }

.qrd-ayah-list{ position:relative; z-index:2; }
.qrd-ayah-block{
  padding:1.1rem .7rem; border-bottom:1px solid #efe9da; border-radius:14px;
  scroll-margin-top:110px; transition:background .2s, box-shadow .2s;
}
.qrd-ayah-block:last-child{ border-bottom:none; }
body.dark .qrd-ayah-block{ border-bottom-color:#232d27; }
.qrd-ayah-block.qrd-playing{ background:#fff4d6; box-shadow:inset 0 0 0 2px #e6b85c; }
body.dark .qrd-ayah-block.qrd-playing{ background:rgba(230,184,92,.16); }
.qrd-ayah-block.qrd-target{ box-shadow:inset 0 0 0 2px #1f7a63; }

.qrd-ayah-head{ display:flex; align-items:flex-start; gap:.8rem; }
.qrd-ayah-badge{
  width:36px; height:36px; border-radius:50%; flex-shrink:0; margin-top:.5rem;
  background:rgba(31,122,99,.1); color:#1f7a63; font-weight:700; font-size:.8rem;
  display:inline-flex; align-items:center; justify-content:center;
}
body.dark .qrd-ayah-badge{ background:rgba(92,201,153,.14); color:#5cc999; }
.qrd-ayah-arabic{
  flex:1; min-width:0; margin:0; direction:rtl; text-align:right; color:#155e4b;
  font-family:var(--qrd-family,"Amiri Quran","Noto Naskh Arabic",serif);
  font-size:var(--qrd-font,30px); line-height:var(--qrd-lh,2.5);
}
body.dark .qrd-ayah-arabic{ color:#5cc999; }
.qrd-sajdah{
  display:inline-flex; align-items:center; gap:.25rem; font-family:Inter,system-ui,sans-serif; direction:ltr;
  font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:#b45309; background:#fdf0e2; border-radius:20px; padding:.15rem .6rem; vertical-align:middle;
}
body.dark .qrd-sajdah{ color:#f0ad5b; background:rgba(240,173,91,.12); }

.qrd-ayah-translit{ font-style:italic; font-size:.9rem; color:#6b7280; margin:.5rem 0 .25rem 3.05rem; }
.qrd-ayah-translation{ font-size:1rem; line-height:1.75; color:#1f2937; margin:.4rem 0 0 3.05rem; }
body.dark .qrd-ayah-translit{ color:#9aa6a0; }
body.dark .qrd-ayah-translation{ color:#dfe5e2; }
.qrd-hide-translation .qrd-ayah-translation{ display:none; }
.qrd-hide-translit .qrd-ayah-translit{ display:none; }

.qrd-ayah-actions{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.7rem 0 0 3.05rem; }
.qrd-ayah-btn{
  height:34px; padding:0 .7rem; border-radius:9px; border:1.5px solid #e1e5e9; background:#fff; color:#374151;
  font-size:.78rem; font-weight:600; display:inline-flex; align-items:center; gap:.3rem; cursor:pointer; transition:.15s;
}
.qrd-ayah-btn:hover{ border-color:#1f7a63; color:#1f7a63; }
.qrd-ayah-btn:disabled{ opacity:.45; cursor:not-allowed; }
.qrd-ayah-btn.on{ background:#1f7a63; border-color:#1f7a63; color:#fff; }
.qrd-ayah-btn.qrd-tafsir-btn:hover{ border-color:#7c3aed; color:#7c3aed; }
.qrd-ayah-btn.qrd-tafsir-btn[aria-expanded="true"]{ background:#7c3aed; border-color:#7c3aed; color:#fff; }
body.dark .qrd-ayah-btn{ background:#16201b; border-color:#2b3833; color:#d7ddda; }

.qrd-ayah-tafsir-body{
  margin:.7rem 0 0 3.05rem; padding:.8rem 1rem; border-radius:12px; border-left:3px solid #7c3aed;
  background:#f3effb; color:#374151; font-size:.92rem; line-height:1.75; white-space:pre-line;
}
body.dark .qrd-ayah-tafsir-body{ background:rgba(124,58,237,.14); color:#dcd3f7; }

.qrd-empty{
  position:relative; z-index:2; text-align:center; padding:2.5rem 1rem; color:#6b7280;
}
.qrd-empty i{ font-size:2.4rem; color:#b08d57; display:block; margin-bottom:.6rem; }
body.dark .qrd-empty{ color:#9aa6a0; }

.qrd-surah-nav{ position:relative; z-index:2; display:flex; justify-content:space-between; gap:.6rem; margin-top:1.4rem; }

.qrd-ab-sub{ overflow:hidden; text-overflow:ellipsis; }
.qrd-ab-btn:disabled{ opacity:.4; cursor:not-allowed; }
.qrd-ab-note{ font-size:.72rem; color:#b45309; }

.qrd-bm-note{ font-size:.8rem; color:#4b5563; margin-top:.15rem; word-break:break-word; }
.qrd-ayah-tafsir-body [lang="ar"] { font-family: "Noto Naskh Arabic", serif; font-size: 1.25rem; line-height: 2; }
.qrd-surah-nav { align-items: center; flex-wrap: wrap; }
body.dark .qrd-bm-note{ color:#b9c3be; }
a.qrd-bm-body{ text-decoration:none; display:block; }

@media (max-width: 575.98px){
  .qrd-ayah-translit, .qrd-ayah-translation, .qrd-ayah-actions, .qrd-ayah-tafsir-body{ margin-left:0; }
  .qrd-mushaf{ padding:1.1rem .8rem 1.4rem; }
}

/* ==============================================================
   Tafsir companion panel (offcanvas) — scope, read-aloud, speed
   ============================================================== */
.qrd-tf-panel{ max-width:440px; width:94%; }
.qrd-tf-panel .offcanvas-header{
  background:linear-gradient(135deg,#5b21b6,#7c3aed); color:#fff; padding:1rem 1.1rem .9rem;
}
.qrd-tf-panel .offcanvas-title{ font-weight:700; display:flex; align-items:center; gap:.5rem; }
.qrd-tf-panel .btn-close{ filter:invert(1) grayscale(1) brightness(2); }
.qrd-tf-head-row{ display:flex; flex-direction:column; gap:.7rem; }
.qrd-tf-ref{ font-size:.78rem; font-weight:600; opacity:.92; }

.qrd-tf-scope{ display:flex; background:rgba(255,255,255,.16); border-radius:10px; padding:3px; gap:2px; }
.qrd-tf-seg{
  flex:1; border:none; background:transparent; color:rgba(255,255,255,.85); font-size:.74rem; font-weight:700;
  padding:.4rem .2rem; border-radius:8px; cursor:pointer; transition:.15s; letter-spacing:.02em;
}
.qrd-tf-seg.on{ background:#fff; color:#5b21b6; box-shadow:0 2px 6px rgba(0,0,0,.15); }

.qrd-tf-edition{
  width:100%; border:none; border-radius:9px; padding:.45rem .6rem; font-size:.8rem; font-weight:600;
  background:rgba(255,255,255,.92); color:#3b0a6b; cursor:pointer;
}
.qrd-tf-edition:focus{ outline:none; box-shadow:0 0 0 3px rgba(255,255,255,.35); }

.qrd-tf-body{ flex:1; padding:1rem 1.1rem 1.1rem; overflow-y:auto; }
.qrd-tf-section{ margin-bottom:1.1rem; }
.qrd-tf-aya-head{
  display:flex; align-items:center; gap:.5rem; margin:0 0 .55rem; padding:.45rem .7rem;
  background:#f3effb; border-radius:10px; border-left:3px solid #7c3aed;
}
body.dark .qrd-tf-aya-head{ background:rgba(124,58,237,.14); }
.qrd-tf-aya-badge{
  width:26px; height:26px; flex-shrink:0; border-radius:8px; background:#7c3aed; color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:700;
}
.qrd-tf-aya-label{ font-size:.78rem; font-weight:700; color:#5b21b6; }
body.dark .qrd-tf-aya-label{ color:#c4b1f9; }
.qrd-tf-aya-arabic{
  font-family:"Amiri Quran","Noto Naskh Arabic",serif; direction:rtl; text-align:right;
  font-size:1.4rem; line-height:2.1; color:#155e4b; margin:.2rem 0 .6rem;
}
body.dark .qrd-tf-aya-arabic{ color:#5cc999; }
.qrd-tf-aya-play{
  margin-left:auto; border:none; background:transparent; color:#7c3aed; font-size:1.05rem; cursor:pointer;
  width:30px; height:30px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; transition:.15s;
}
.qrd-tf-aya-play:hover{ background:rgba(124,58,237,.14); }
body.dark .qrd-tf-aya-play{ color:#b49bf5; }

.qrd-tf-line{
  position:relative; display:block; width:100%; text-align:left; border:none; background:transparent;
  padding:.5rem .7rem .5rem 2rem; margin-bottom:.3rem; border-radius:10px;
  font-size:.92rem; line-height:1.7; color:#374151; cursor:pointer; transition:background .15s;
}
.qrd-tf-line.qrd-tf-rtl{
  direction:rtl; text-align:right; padding:.5rem 2rem .5rem .7rem;
  font-family:"Noto Naskh Arabic","Amiri Quran",serif; font-size:1.05rem; line-height:2;
}
.qrd-tf-line::before{
  content:'\F4F6'; font-family:'bootstrap-icons'; position:absolute; left:.55rem; top:.55rem;
  font-size:.8rem; color:#c4b5e8; opacity:0; transition:opacity .15s;
}
.qrd-tf-line.qrd-tf-rtl::before{ left:auto; right:.55rem; }
.qrd-tf-line:hover{ background:#f5f2fc; }
.qrd-tf-line:hover::before{ opacity:1; }
.qrd-tf-line.active{ background:#ede4fd; box-shadow:inset 0 0 0 1.5px #b49bf5; color:#3b0a6b; }
.qrd-tf-line.active::before{ content:'\F4F2'; color:#7c3aed; opacity:1; }
body.dark .qrd-tf-line{ color:#cdd5d1; }
body.dark .qrd-tf-line:hover{ background:rgba(124,58,237,.1); }
body.dark .qrd-tf-line.active{ background:rgba(124,58,237,.2); color:#e7ddfb; box-shadow:inset 0 0 0 1.5px #8b5cf6; }

.qrd-tf-empty{ text-align:center; padding:3rem 1rem; color:#9ca3af; }
body.dark .qrd-tf-empty{ color:#7e8a84; }
.qrd-tf-credit{ font-size:.7rem; color:#9ca3af; text-align:center; margin-top:.6rem; }

.qrd-tf-foot{ border-top:1px solid #e5e7eb; background:#fff; padding:.7rem 1rem .8rem; }
body.dark .qrd-tf-foot{ background:#131916; border-top-color:#26312b; }
.qrd-tf-foot-row{ display:flex; align-items:center; justify-content:center; gap:.5rem; }
.qrd-tf-cbtn{
  width:42px; height:42px; border-radius:50%; border:none; background:#f1eefb; color:#5b21b6;
  display:inline-flex; align-items:center; justify-content:center; font-size:1.1rem; cursor:pointer; transition:.15s;
}
.qrd-tf-cbtn:hover{ background:#e6dcfa; }
.qrd-tf-cbtn.qrd-tf-cplay{ width:52px; height:52px; background:#7c3aed; color:#fff; font-size:1.45rem; }
.qrd-tf-cbtn.qrd-tf-cplay:hover{ background:#6b29d6; }
.qrd-tf-cbtn:disabled{ opacity:.45; cursor:not-allowed; }
body.dark .qrd-tf-cbtn{ background:#241a3a; color:#c4b1f9; }
body.dark .qrd-tf-cbtn:hover{ background:#2f2350; }
.qrd-tf-rate{ display:flex; align-items:center; gap:.5rem; margin-top:.6rem; font-size:.74rem; color:#6b7280; }
body.dark .qrd-tf-rate{ color:#9aa6a0; }
.qrd-tf-rate input[type=range]{ flex:1; accent-color:#7c3aed; }
.qrd-tf-opt{
  display:flex; align-items:center; justify-content:center; gap:.5rem; margin:.55rem auto 0; width:100%;
  border:none; background:transparent; font-size:.74rem; font-weight:600; color:#374151; cursor:pointer;
}
body.dark .qrd-tf-opt{ color:#cdd5d1; }
.qrd-tf-warn{ font-size:.7rem; color:#b45309; text-align:center; margin-top:.4rem; }
body.dark .qrd-tf-warn{ color:#f0ad5b; }

/* the verse the panel is explaining */
.qrd-ayah-block.qrd-tf-active{ box-shadow:inset 0 0 0 2px #7c3aed; }
body.dark .qrd-ayah-block.qrd-tf-active{ box-shadow:inset 0 0 0 2px #b49bf5; }

/* ---- resume banner (the place saved in this browser) ---- */
.qrd-resume{
  position:relative; z-index:3; display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem;
  padding:.65rem .9rem; border-radius:12px; border:1.5px solid #cfe6dd; background:#eef7f3;
  color:#155e4b; font-size:.85rem; font-weight:600;
}
.qrd-resume i{ font-size:1.05rem; }
.qrd-resume-text{ flex:1; min-width:0; }
.qrd-resume-go{
  flex-shrink:0; text-decoration:none; background:#1f7a63; color:#fff; border-radius:9px;
  padding:.3rem .8rem; font-size:.78rem; font-weight:700;
}
.qrd-resume-go:hover{ background:#155e4b; color:#fff; }
.qrd-resume-close{ flex-shrink:0; border:none; background:transparent; color:#6b7280; cursor:pointer; padding:.2rem; }
.qrd-resume-close:hover{ color:#dc2626; }
body.dark .qrd-resume{ background:rgba(31,122,99,.14); border-color:#2b3833; color:#8fd9bd; }