/* v3 mobile-first design for Quran app */
@import url('quran-theme.css');
@import url('quran-controls.css?v=8');
/* Delat utseende för alla kapitelsidor — ändra här så påverkas alla kapitel. */
  @font-face{
    font-family:'UthmanicHafs';
    src:url('../fonts/UthmanicHafs1Ver18.woff2') format('woff2'),
        url('../fonts/UthmanicHafs1Ver18.ttf') format('truetype');
    font-display:swap;
  }
  @font-face{
    font-family:'ManzoorNaskh';
    src:url('../fonts/ManzoorNaskh-alislam.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
    font-display:swap;
  }
  /* quran.com surah-name ligature font: the text "surah001" renders the
     calligraphic chapter-name medallion for surah 1 (E000 + E001 glyphs). */
  @font-face{
    font-family:'SurahNames';
    src:url('../fonts/sura_names.woff2') format('woff2'),
        url('../fonts/sura_names.ttf') format('truetype');
    font-display:swap;
  }
  /* Free Bookman (TeX Gyre Bonum) — open substitute for PDF Bookman Old Style */
  @font-face{
    font-family:'BookmanOldStyle';
    src:url('../fonts/bookman/texgyrebonum-regular.otf') format('opentype');
    font-weight:400;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:'BookmanOldStyle';
    src:url('../fonts/bookman/texgyrebonum-italic.otf') format('opentype');
    font-weight:400;
    font-style:italic;
    font-display:swap;
  }
  @font-face{
    font-family:'BookmanOldStyle';
    src:url('../fonts/bookman/texgyrebonum-bold.otf') format('opentype');
    font-weight:700;
    font-style:normal;
    font-display:swap;
  }
  @font-face{
    font-family:'BookmanOldStyle';
    src:url('../fonts/bookman/texgyrebonum-bolditalic.otf') format('opentype');
    font-weight:700;
    font-style:italic;
    font-display:swap;
  }

  :root{
    --arabic-size:28px;
    --translation-size:15px;
    --modal-size:14.5px;
    --uthmani-stack:'UthmanicHafs','Amiri',serif;
    --sv-stack:'BookmanOldStyle','TeXGyreBonum',Palatino,'Palatino Linotype',serif;
    /* Tajweed colours — quran.com (Dar Al-Marifa) palette */
    --tj-gray:#aaaaaa;
    --tj-madda-normal:#537fff;
    --tj-madda-perm:#4050ff;
    --tj-madda-obl:#2144c1;
    --tj-madda-nec:#000ebc;
    --tj-ghunnah:#ff7e1e;
    --tj-qalaqah:#dd0008;
    --tj-ikhafa:#9400a8;
    --tj-ikhafa-shafawi:#d500b7;
    --tj-idgham:#169777;
    --tj-idgham-wo:#169200;
    --tj-idgham-shafawi:#58b800;
    --tj-idgham-mus:#a1a1a1;
    --tj-iqlab:#26bffd;
    --note:#d33b3b;
  }
  html[data-theme="dark"]{
    --tj-gray:#9aa0a8;
    --tj-madda-normal:#7d9cff;
    --tj-madda-perm:#7f8cff;
    --tj-madda-obl:#8f97ff;
    --tj-madda-nec:#9aa3ff;
    --tj-ghunnah:#ff9440;
    --tj-qalaqah:#ff5a5f;
    --tj-ikhafa:#d36ae0;
    --tj-ikhafa-shafawi:#ee6ad8;
    --tj-idgham:#3ecfa4;
    --tj-idgham-wo:#5fc44a;
    --tj-idgham-shafawi:#86d84f;
    --tj-idgham-mus:#b3b3ba;
    --tj-iqlab:#4fd0ff;
    --note:#ff6b6b;
  }
  *{box-sizing:border-box;}
  html{background:var(--bg);}
  body{
    margin:0;
    font-family:'Inter',sans-serif;
    background:var(--bg);
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    transition:background .25s ease, color .25s ease;
  }

  /* ---------- top bar (layout in quran-controls.css) ---------- */
  .topbar .nav-wrap{
    flex:0 1 auto;
    min-width:0;
    max-width:min(240px, 42vw);
    transition:max-width .28s ease, opacity .2s ease, margin .28s ease;
  }
  .topbar .nav-trigger{
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:34px;
    max-width:100%;
    padding:0 10px;
    box-sizing:border-box;
    line-height:1;
    overflow:hidden;
  }
  .topbar .nav-trigger .nav-name{
    flex:0 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-weight:700;
    font-size:13.5px;
    line-height:1;
    margin-right:0.3em;
  }
  .topbar .nav-trigger .nav-count{
    flex:0 0 auto;
    color:var(--muted);
    font-weight:500;
    font-size:12px;
    font-variant-numeric:tabular-nums;
    line-height:1;
    margin-right:0;
  }
  .topbar .nav-trigger .nav-ar{
    flex:0 0 auto;
    font-family:'SurahNames',serif;
    font-variant-ligatures:common-ligatures;
    font-size:24px;
    line-height:1;
    display:inline-block;
    align-self:center;
    color:var(--ink);
    margin-left:0;
    margin-right:-0.12em;
  }
  .topbar .nav-trigger .nav-caret{
    flex:0 0 auto;
    line-height:1;
    display:inline-flex;
    align-self:center;
    color:var(--muted);
  }
  .topbar .search-wrap{
    display:flex;
    align-items:center;
    align-self:center;
    height:34px;
    flex:0 0 auto;
    min-width:0;
    max-width:0;
    opacity:0;
    overflow:hidden;
    transition:max-width .28s ease, opacity .22s ease, flex .28s ease;
  }
  .topbar.search-open .tb-chapter{
    flex:0 0 0;
    max-width:0;
    opacity:0;
    overflow:hidden;
    pointer-events:none;
    margin:0;
  }
  .topbar.search-open .search-wrap{
    flex:1 1 auto;
    max-width:100%;
    opacity:1;
  }
  .search-field{
    position:relative;
    flex:1;
    min-width:0;
    display:flex;
    align-items:center;
  }
  .search-field input{
    width:100%;
    padding-right:32px;
  }
  .search-clear{
    position:absolute;
    right:5px;
    width:22px;
    height:22px;
    display:none;
    align-items:center;
    justify-content:center;
    border:none;
    border-radius:50%;
    padding:0;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    flex-shrink:0;
  }
  .search-clear.visible{display:flex;}
  .search-clear:hover{color:var(--ink); background:var(--faint);}
  .topbar .search-field input{
    height:34px;
    padding:0 32px 0 14px;
    box-sizing:border-box;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-size:13.5px;
    outline:none;
    transition:border-color .15s, box-shadow .15s;
  }
  .topbar .search-field input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--ring);
  }
  .topbar .search-field input::placeholder{color:var(--muted);}

  /* ---------- chapter/verse nav ---------- */
  .nav-wrap{position:relative;}
  .nav-trigger{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
    white-space:nowrap;
  }
  .nav-trigger.btn-select{
    gap:6px;
    padding:0 10px;
    max-width:100%;
    overflow:hidden;
  }
  .nav-trigger:hover{border-color:var(--faint);}
  .nav-trigger .nav-name{font-weight:700; font-size:14px;}
  .nav-trigger .nav-count{color:var(--muted); font-weight:500; font-size:12px; font-variant-numeric:tabular-nums;}
  .nav-trigger .nav-caret{display:inline-flex; align-self:center; color:var(--muted); transition:transform .15s;}
  .nav-wrap.drawer-open .nav-trigger .nav-caret{transform:rotate(180deg);}
  .nav-wrap.drawer-open .nav-trigger .nav-name,
  .nav-wrap.drawer-open .nav-trigger .nav-ar{color:var(--accent);}
  .nav-wrap{position:relative; min-width:0;}

  /* legacy dropdown removed — chapter picker uses left drawer */
  .nav-panel{display:none;}
  .nav-seg{
    display:flex;
    background:var(--surface-alt);
    border-radius:999px;
    padding:3px;
    border:1px solid var(--border);
  }
  .nav-seg-btn{
    flex:1;
    border:none;
    background:transparent;
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:600;
    padding:7px 4px;
    border-radius:999px;
    cursor:pointer;
    color:var(--muted);
    transition:.15s;
  }
  .nav-seg-btn.active{background:var(--accent); color:#fff;}
  .nav-search{
    width:100%;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--ink);
    border-radius:999px;
    padding:9px 14px;
    font-size:13px;
    font-family:'Inter',sans-serif;
    outline:none;
    transition:border-color .15s, box-shadow .15s;
  }
  .nav-search:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);}
  .nav-scroll{max-height:280px; overflow-y:auto;}
  .nav-item .ni-sub{margin-left:auto; font-size:12px; color:var(--muted);}
  .nav-item .ni-line{
    display:flex;
    align-items:center;
    width:100%;
    min-width:0;
  }
  .nav-item .ni-sv{
    flex:0 0 auto;
    text-align:left;
    font-weight:700;
    white-space:nowrap;
    user-select:none;
  }
  .nav-item .ni-gap{
    flex:1 1 0;
    min-width:10px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:0 4px;
  }
  .nav-item .ni-count{
    color:var(--muted);
    font-weight:500;
    font-size:12px;
    font-variant-numeric:tabular-nums;
    flex-shrink:0;
  }
  .nav-trigger .nav-verse{display:none;}
  .verse-btn.active{
    background:var(--accent-soft);
    color:var(--accent);
    border-color:var(--accent);
  }
  .nav-panel-label{
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:8px;
  }
  .nav-panel-section + .nav-panel-section{margin-top:16px;}
  .nav-select{
    width:100%;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--ink);
    border-radius:999px;
    padding:9px 14px;
    font-size:13.5px;
    font-family:'Inter',sans-serif;
    outline:none;
    transition:border-color .15s, box-shadow .15s;
    box-sizing:border-box;
  }
  .nav-select:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);}

  .nav-list{
    display:flex;
    flex-direction:column;
    gap:2px;
    max-height:230px;
    overflow-y:auto;
  }
  .nav-item{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    border:1px solid transparent;
    background:transparent;
    border-radius:999px;
    padding:8px 12px;
    min-height:40px;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    font-size:13.5px;
    color:var(--ink);
    text-align:left;
    transition:border-color .12s, background .12s, color .12s;
    box-sizing:border-box;
  }
  .nav-item:hover{
    background:var(--bg);
    border-color:var(--border);
  }
  .nav-item.active{
    background:var(--accent-soft);
    border-color:var(--accent);
    color:var(--accent);
    font-weight:600;
  }
  .nav-item .ni-ar{
    flex:0 0 auto;
    text-align:right;
    font-family:'SurahNames',serif;
    font-variant-ligatures:common-ligatures;
    font-size:26px;
    line-height:1;
    color:var(--ink);
    flex-shrink:0;
    max-width:46%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .nav-item.active .ni-ar{color:var(--accent);}
  .nav-item.active .ni-count{color:var(--muted);}
  .verse-grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:4px;
    max-height:180px;
    overflow-y:auto;
  }
  .verse-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    aspect-ratio:1;
    min-height:36px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--ink);
    border-radius:50%;
    padding:0;
    font-family:'Inter',sans-serif;
    font-size:12.5px;
    font-weight:600;
    font-variant-numeric:tabular-nums;
    cursor:pointer;
    transition:border-color .12s, background .12s, color .12s;
    box-sizing:border-box;
  }
  .verse-btn:hover{
    border-color:var(--accent);
    color:var(--accent);
    background:var(--bg);
  }

  /* ---------- settings panel ---------- */
  .settings-wrap{position:relative;}
  .settings-panel{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    width:280px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:var(--shadow);
    padding:16px;
    display:none;
    z-index:30;
  }
  .settings-wrap.open .settings-panel{display:block;}
  .settings-wrap.open .btn-icon,
  .settings-wrap.open .icon-btn{border-color:var(--accent); color:var(--accent);}
  .settings-section + .settings-section{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--border);
  }

  .switch-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    cursor:pointer;
  }
  .switch-row-title{
    display:block;
    font-size:13px;
    font-weight:600;
    color:var(--ink);
  }
  .switch-row-sub{
    display:block;
    font-size:11.5px;
    color:var(--muted);
    margin-top:3px;
    line-height:1.4;
  }
  .switch{
    position:relative;
    width:38px;
    height:22px;
    border-radius:999px;
    background:var(--faint);
    flex:0 0 auto;
    transition:background .15s;
  }
  .switch.on{background:var(--accent);}
  .switch-knob{
    position:absolute;
    top:2px;
    left:2px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 2px rgba(0,0,0,.25);
    transition:transform .15s;
  }
  .switch.on .switch-knob{transform:translateX(16px);}

  .stepper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .stepper-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    min-width:34px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--ink-soft);
    cursor:pointer;
    transition:border-color .15s, color .15s, background .15s;
    box-sizing:border-box;
    padding:0;
  }
  .stepper-btn:hover{
    border-color:var(--accent);
    color:var(--accent);
    background:var(--bg);
  }
  .stepper-value{
    font-size:13px;
    font-weight:700;
    color:var(--ink);
    min-width:32px;
    text-align:center;
  }

  .style-options{display:flex; flex-direction:column; gap:4px;}
  .style-option{
    display:flex;
    align-items:center;
    gap:9px;
    font-size:13px;
    font-weight:500;
    color:var(--ink);
    cursor:pointer;
    padding:8px 12px;
    min-height:40px;
    border:1px solid transparent;
    border-radius:999px;
    transition:border-color .15s, background .15s;
    box-sizing:border-box;
  }
  .style-option:hover{
    background:var(--bg);
    border-color:var(--border);
  }
  .style-option input{accent-color:var(--accent); width:15px; height:15px; flex:0 0 auto;}
  .style-option small{color:var(--muted); font-weight:400;}

  /* ---------- about-chapter modal ---------- */
  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    display:none;
    align-items:center;
    justify-content:center;
    padding:24px;
    z-index:200;
  }
  .modal-overlay.open{display:flex; animation:overlayFade .22s ease;}
  .modal-overlay.open .modal-panel{animation:panelZoom .3s cubic-bezier(.16,1,.3,1);}
  @keyframes overlayFade{from{opacity:0;} to{opacity:1;}}
  @keyframes panelZoom{from{opacity:0; transform:scale(.9) translateY(10px);} to{opacity:1; transform:scale(1) translateY(0);}}
  .modal-panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:24px;
    box-shadow:var(--shadow);
    width:100%;
    max-width:520px;
    max-height:80vh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding:20px 22px 14px;
    border-bottom:1px solid var(--border);
  }
  .modal-eyebrow{
    font-size:11px;
    font-weight:700;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:4px;
  }
  .modal-header h2 .surah-glyph{
    font-family:'SurahNames',serif;
    font-variant-ligatures:common-ligatures;
    font-size:1.7em;
    line-height:1;
    vertical-align:middle;
    margin-left:4px;
  }
  .modal-header h2{
    margin:0;
    font-size:19px;
    font-weight:700;
    color:var(--ink);
  }
  .modal-body{
    padding:18px 22px 22px;
    overflow-y:auto;
    font-family:var(--sv-stack);
    font-size:calc(var(--modal-size) + 2px);
    line-height:1.7;
    color:var(--ink-soft);
  }
  .modal-body p{margin:0 0 14px;}
  .modal-body p:last-child{margin-bottom:0;}
  .ar-inline{
    font-family:'ManzoorNaskh',serif;
    font-size:1.35em;
    line-height:1;
    vertical-align:baseline;
  }
  .modal-body .ar-inline{
    font-size:1.05em;
    line-height:1;
    vertical-align:baseline;
    direction:rtl;
    unicode-bidi:embed;
    color:var(--ink);
    margin:0 3px;
  }

  .modal-tools,
  .chc-info-popover-tools{
    display:flex;
    gap:6px;
    flex:0 0 auto;
    align-items:center;
  }
  .chc-info-popover-tools{margin-left:auto;}

  .icon-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--ink-soft);
    cursor:pointer;
    transition:.15s;
    flex:0 0 auto;
  }
  .icon-btn svg{display:block;}
  .icon-btn:hover{border-color:var(--faint); color:var(--ink);}
  .icon-btn.active{
    background:var(--accent-soft);
    border-color:var(--accent);
    color:var(--accent);
  }
  .search-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    max-width:0;
    overflow:hidden;
    opacity:0;
    transition:max-width .25s ease, opacity .2s ease;
  }
  .search-wrap.open{
    max-width:320px;
    opacity:1;
  }
  .topbar .search-wrap.open{
    max-width:0;
    opacity:0;
  }
  .topbar.search-open .search-wrap.open{
    max-width:100%;
    opacity:1;
  }
  .search-wrap .search-field{
    width:100%;
  }
  .search-wrap input{
    width:100%;
    border:1px solid var(--border);
    background:var(--bg);
    color:var(--ink);
    border-radius:10px;
    padding:8px 32px 8px 12px;
    font-size:13.5px;
    font-family:'Inter',sans-serif;
    outline:none;
    transition:border-color .15s, box-shadow .15s;
    box-sizing:border-box;
  }
  .search-wrap input:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--ring);
  }
  .search-wrap input::placeholder{color:var(--muted);}

  .pillgroup{
    display:inline-flex;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:10px;
    padding:2px;
    gap:2px;
  }
  .pillgroup button{
    border:none;
    background:transparent;
    color:var(--muted);
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:600;
    padding:6px 10px;
    border-radius:8px;
    cursor:pointer;
    transition:.15s;
    white-space:nowrap;
  }
  .pillgroup button.active{
    background:var(--accent);
    color:#fff;
    box-shadow:var(--shadow);
  }

  /* ---------- hero / chapter card ---------- */
  .hero{
    max-width:720px;
    margin:0 auto;
    padding:14px 24px 12px;
    text-align:left;
    transition:padding-top .28s ease;
  }
  html.tj-chrome-active .hero{
    padding-top:calc(14px + var(--tj-extra-offset, 0px));
  }
  .chapter-hero-card{
    position:relative;
    text-align:left;
    width:100%;
    box-sizing:border-box;
    background:var(--accent-soft);
    border:1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    border-radius:16px;
    padding:18px 20px 16px;
    box-shadow:var(--shadow);
  }
  .chc-eyebrow{
    font-size:10px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:14px;
  }
  .chc-main{
    display:flex;
    align-items:flex-start;
    gap:16px;
    margin-bottom:14px;
  }
  .chc-glyph{
    flex:0 0 auto;
    font-size:104px;
    line-height:1;
    color:var(--accent);
    margin:0;
    min-width:144px;
    text-align:center;
  }
  .chapter-hero-card .chc-glyph.surah-hdr{
    color:var(--accent);
    margin-bottom:0;
    font-size:104px;
  }
  .chc-text{
    flex:1 1 auto;
    min-width:0;
  }
  .chc-title{
    margin:0 0 4px;
    font-size:20px;
    font-weight:800;
    letter-spacing:-.01em;
    color:var(--ink);
    line-height:1.25;
    overflow:visible;
    word-break:break-word;
  }
  .chc-subtitle{
    font-family:'ManzoorNaskh',serif;
    font-size:17px;
    color:var(--accent-deep);
    margin:0 0 6px;
    line-height:1.4;
  }
  .chc-subtitle.title-uthmani{
    font-family:var(--uthmani-stack);
    display:none;
  }
  body.script-uthmani .chc-subtitle.title-manzoor{display:none;}
  body.script-uthmani .chc-subtitle.title-uthmani{display:block;}
  .chc-meta{
    display:flex;
    flex-direction:column;
    gap:2px;
    margin:0 0 4px;
  }
  .chc-meta-row{
    display:block;
    font-size:12.5px;
    color:var(--muted);
    line-height:1.45;
  }
  .chc-meta-dot{
    opacity:0.65;
    padding:0 1px;
  }

  /* clean hero (chapter 1 prototype) */
  .chapter-hero-clean .chc-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    width:100%;
    margin-bottom:16px;
  }
  .chc-top-left{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    min-width:0;
    flex:1 1 auto;
  }
  .chc-chapter-nav-row{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:12px;
  }
  .chapter-hero-clean .chc-eyebrow{
    margin:0;
    padding-top:2px;
  }
  .chapter-hero-clean .chc-main{
    align-items:center;
    margin-bottom:0;
    gap:18px;
  }
  .chapter-hero-clean .chc-num{
    flex:0 0 auto;
    min-width:44px;
    height:44px;
    padding:0 10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:19px;
    font-weight:800;
    font-variant-numeric:tabular-nums;
    line-height:1;
    color:var(--accent);
    background:var(--surface);
    border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius:14px;
    box-sizing:border-box;
    letter-spacing:-.02em;
  }
  .chapter-hero-clean .chc-title{
    font-size:25px;
    margin-bottom:6px;
  }
  .chapter-hero-clean .chc-meta{
    margin:0;
    gap:3px;
  }
  .chapter-hero-clean .chc-glyph{
    font-size:156px;
    min-width:0;
    margin-left:auto;
    flex:0 0 auto;
    text-align:right;
    line-height:0.92;
  }
  .chapter-hero-clean .chc-actions{
    flex:0 0 auto;
    margin-left:auto;
    align-self:flex-start;
    flex-wrap:nowrap;
    justify-content:flex-end;
  }

  .chc-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
  }
  .chc-chapter-nav{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--ink-soft);
    text-decoration:none;
    flex:0 0 auto;
    transition:border-color .15s, color .15s, background .15s, transform .15s;
    box-shadow:0 1px 4px rgba(0,0,0,.04);
  }
  .chc-chapter-nav:hover{
    border-color:var(--accent);
    color:var(--accent);
    background:var(--accent-soft);
    transform:scale(1.04);
  }
  .chc-chapter-nav svg{display:block;}
  .chc-play-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    cursor:pointer;
    flex:0 0 auto;
    transition:background .15s, transform .15s;
    box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .chc-play-btn:hover{
    background:var(--accent-deep);
    transform:scale(1.04);
  }
  .chc-play-btn.playing{
    background:var(--accent-deep);
  }
  .chc-info-wrap{
    position:relative;
  }
  .chc-info-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    padding:0;
    border:none;
    border-radius:50%;
    background:var(--accent);
    color:#fff;
    cursor:pointer;
    flex:0 0 auto;
    transition:background .15s, transform .15s;
    box-shadow:0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
  }
  .chc-info-btn:hover,
  .chc-info-btn.active{
    background:var(--accent-deep);
    transform:scale(1.04);
  }
  .chc-info-popover{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:45;
    display:flex;
    flex-direction:column;
    background:var(--surface);
    border-top:1px solid var(--border);
    border-radius:24px 24px 0 0;
    box-shadow:0 -12px 40px rgba(0,0,0,.12);
    overflow:hidden;
    transform-origin:top center;
    transform:scaleY(0.94) translateY(-6px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:transform .34s cubic-bezier(.4,0,.2,1),
               opacity .26s ease,
               visibility 0s linear .34s;
  }
  .chc-info-popover.open{
    transform:scaleY(1) translateY(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:transform .34s cubic-bezier(.4,0,.2,1),
               opacity .26s ease,
               visibility 0s;
  }
  .chc-info-popover[hidden]{display:none !important;}
  .chc-info-popover-header{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px 12px;
    border-bottom:1px solid var(--border);
    flex:0 0 auto;
    min-height:52px;
  }
  .chc-info-popover-title{
    flex:0 1 auto;
    min-width:0;
    font-size:15px;
    color:var(--ink);
    margin-right:8px;
  }
  .chc-info-popover-title .ni-line{
    display:inline-flex;
    align-items:center;
    width:auto;
    max-width:100%;
    gap:0;
  }
  .chc-info-popover-title .ni-sv{
    flex:0 0 auto;
    text-align:left;
    font-weight:700;
    white-space:nowrap;
  }
  .chc-info-popover-title .ni-gap{
    flex:0 0 auto;
    min-width:0;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:0 5px;
  }
  .chc-info-popover-title .ni-count{
    color:var(--muted);
    font-weight:500;
    font-size:12px;
    font-variant-numeric:tabular-nums;
    flex-shrink:0;
  }
  .chc-info-popover-title .ni-ar{
    flex:0 0 auto;
    text-align:right;
    font-family:'SurahNames',serif;
    font-variant-ligatures:common-ligatures;
    font-size:24px;
    line-height:1;
    color:var(--ink);
    flex-shrink:0;
  }
  .chc-info-close{
    margin-left:2px;
  }
  .chc-info-popover-body{
    flex:1 1 auto;
    min-height:0;
    padding:16px 18px 24px;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    font-size:var(--modal-size, 14.5px);
    /* Match footnote modal: room for mixed Arabic without uneven line boxes */
    line-height:1.95;
    color:var(--ink-soft);
  }
  .chc-info-popover-body p{margin:0 0 10px;}
  .chc-info-popover-body p:last-child{margin-bottom:0;}
  .chc-info-popover-body em,
  .chc-info-popover-body i{font-style:italic;}
  .chc-info-popover-body .ar-inline{
    font-family:'ManzoorNaskh',serif;
    font-size:1.18em;
    line-height:1;
    vertical-align:baseline;
    direction:rtl;
    unicode-bidi:embed;
    color:var(--ink);
    margin:0 3px;
  }
  /* legacy hero bits (other pages) */
  .hero .eyebrow{
    font-size:10px;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--accent);
    margin-bottom:5px;
  }
  .title-banner{
    max-width:400px;
    margin:0 auto 6px;
    padding:11px 0 7px;
    border-top:2px solid var(--ink);
    border-bottom:2px solid var(--ink);
    overflow:hidden;
  }
  .hero .arabic-title{
    font-family:'ManzoorNaskh',serif;
    font-size:17px;
    color:var(--ink-soft);
    margin:0;
    line-height:1.4;
  }
  .hero .arabic-title.title-uthmani{
    font-family:var(--uthmani-stack);
    display:none;
  }
  body.script-uthmani .hero .arabic-title.title-manzoor{
    display:none;
  }
  body.script-uthmani .hero .arabic-title.title-uthmani{
    display:block;
  }
  .translit-title{
    margin:0 0 2px;
  }
  .translit-title .sura-word{
    font-size:12.5px;
    font-weight:500;
    color:var(--ink-soft);
  }
  .translit-title .chapter-name{
    font-size:16.5px;
    font-weight:800;
    letter-spacing:.05em;
    color:var(--ink);
    margin-left:2px;
  }
  .revelation-tag{
    margin:0;
    font-size:12px;
    color:var(--muted);
    font-style:italic;
  }
  .revelation-tag span{
    display:inline-block;
    margin:0 5px;
    color:var(--faint);
    font-style:normal;
  }
  .hero h1{
    margin:0 0 6px;
    font-size:20px;
    font-weight:700;
    color:var(--ink);
    letter-spacing:-.01em;
  }
  .hero p.meta{
    margin:0;
    font-size:13px;
    color:var(--muted);
  }
  .hero p.meta span{
    display:inline-block;
    margin:0 6px;
    color:var(--faint);
  }
  .playall-group{
    display:inline-flex;
    align-items:center;
    padding:3px;
    gap:0;
    border-radius:999px;
    border:1px solid var(--border);
    background:var(--bg);
  }
  .playall-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    border:none;
    background:transparent;
    color:var(--muted);
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:700;
    padding:6px 10px;
    border-radius:999px;
    cursor:pointer;
    transition:.15s;
    white-space:nowrap;
    min-width:36px;
  }
  .playall-btn .pa-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:22px;
    padding:0 5px;
    border-radius:6px;
    border:1px solid var(--border);
    font-size:11px;
    font-weight:800;
    line-height:1;
  }
  .playall-btn .pa-label{display:none;}
  @media (min-width:721px){ .playall-btn .pa-label{display:inline;} }
  .playall-btn svg{display:none;}
  .playall-btn.active .pa-badge,
  .playall-btn.playing .pa-badge{background:var(--accent); color:#fff; border-color:var(--accent);}
  .playall-btn.active,
  .playall-btn.playing{color:var(--accent);}
  .playall-btn + .playall-btn{border-left:1px solid var(--border);}

  /* ---------- verse list ---------- */
  .container{
    max-width:720px;
    margin:0 auto;
    padding:0 24px 90px;
  }
  .no-results{
    text-align:center;
    color:var(--muted);
    padding:60px 0;
    font-size:14px;
  }

  .verse{
    padding:14px 20px;
    margin:0 -20px;
    border-bottom:1px solid var(--border);
    border-radius:12px;
    animation:fadeIn .35s ease both;
    transition:background .2s ease;
  }
  .verse:last-child{border-bottom:none;}
  .verse.playing{
    background:var(--accent-soft);
  }
  .verse.flash{
    animation:flashHighlight 1.2s ease;
  }
  @keyframes flashHighlight{
    0%{background:var(--ring);}
    100%{background:transparent;}
  }

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

  .ref-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:none;
    border-radius:0;
    background:transparent;
    color:var(--muted);
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:700;
    font-variant-numeric:tabular-nums;
    letter-spacing:.01em;
    line-height:1;
    box-sizing:border-box;
    flex:0 0 auto;
  }
  .ref-tag.ref-ar{
    unicode-bidi:isolate;
    font-variant-numeric:tabular-nums;
  }
  .verse-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:10px;
    margin-bottom:2px;
  }
  .verse-foot:has(.foot-group:only-child){
    justify-content:flex-start;
  }
  .foot-group{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .play-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    min-width:36px;
    border:1px solid var(--border);
    border-radius:50%;
    background:var(--surface);
    padding:0;
    color:var(--muted);
    cursor:pointer;
    transition:border-color .15s, background .15s, color .15s;
    flex:0 0 auto;
    box-sizing:border-box;
  }
  .play-btn svg{display:block;}
  .play-btn .icon-pause{display:none;}
  .play-btn.playing .icon-play{display:none;}
  .play-btn.playing .icon-pause{display:block;}
  .play-btn:hover{
    color:var(--ink);
    background:var(--bg);
    border-color:color-mix(in srgb, var(--accent) 28%, var(--border));
  }
  .play-btn.playing{
    color:var(--accent);
    background:var(--accent-soft);
    border-color:var(--accent);
  }

  .verse-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
    margin-bottom:14px;
  }
  .vh-group{display:flex; align-items:center; gap:6px;}
  .vh-left,.vh-right{flex:0 0 auto;}
  .vh-center{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:4px;
  }
  .vh-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex-wrap:wrap;
  }
  .ref-tag.ref-center{
    font-size:15.4px;
    line-height:1;
    margin-bottom:0;
  }
  .select-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    min-width:36px;
    border:1px solid var(--border);
    border-radius:50%;
    background:var(--surface);
    padding:0;
    color:var(--muted);
    cursor:pointer;
    transition:border-color .15s, background .15s, color .15s;
    flex:0 0 auto;
    box-sizing:border-box;
  }
  .select-btn svg{display:block;}
  .select-btn .select-ring{
    display:none;
    width:18px;
    height:18px;
    border:2px solid currentColor;
    border-radius:50%;
    box-sizing:border-box;
    transition:background .15s, border-color .15s;
  }
  .select-btn:hover{
    color:var(--ink);
    background:var(--bg);
    border-color:color-mix(in srgb, var(--accent) 28%, var(--border));
  }
  .select-btn.active{
    color:var(--accent);
    background:var(--accent-soft);
    border-color:var(--accent);
  }
  .select-btn.active .select-ring{
    display:block;
    background:var(--accent);
    border-color:var(--accent);
  }
  .verse.verse-selected{
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, var(--border));
  }

  /* ---------- arabic style segment ---------- */
  .seg-slider{
    display:flex;
    background:var(--surface-alt);
    border:1px solid var(--border);
    border-radius:999px;
    padding:3px;
    gap:2px;
  }
  .seg-slider button{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    border:none;
    background:transparent;
    color:var(--muted);
    font-family:'Inter',sans-serif;
    font-size:12.5px;
    font-weight:600;
    padding:6px 4px;
    min-height:44px;
    border-radius:999px;
    cursor:pointer;
    transition:background .15s, color .15s, box-shadow .15s;
    white-space:normal;
    line-height:1.15;
    text-align:center;
  }
  .seg-slider .seg-label{
    font-size:12px;
    font-weight:600;
    line-height:1.15;
  }
  .seg-slider .seg-font{
    font-size:9px;
    font-weight:500;
    line-height:1.15;
    color:var(--muted);
    max-width:100%;
    padding:0 2px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .seg-slider button:hover{color:var(--ink);}
  .seg-slider button.active{
    background:var(--accent-soft);
    color:var(--accent);
    box-shadow:inset 0 0 0 1px var(--accent);
  }
  .seg-slider button.active .seg-font{
    color:color-mix(in srgb, var(--accent) 72%, var(--muted));
  }

  .sd-preview-label{
    font-size:11px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:8px;
  }
  .sd-preview-block{
    overflow:visible;
    margin-bottom:16px;
    position:relative;
    z-index:1;
  }
  .sd-preview-combined{
    padding:16px;
    overflow:visible;
  }
  .sd-preview-combined.has-wbw-hover-preview{
    padding-top:68px;
  }
  .sd-preview-combined .arabic{
    overflow:visible;
    position:relative;
  }
  .sd-preview-combined .translation{
    max-width:none;
    margin-top:10px;
  }
  .sd-preview-combined .ar-word[data-gloss]:hover .wbw-tip{
    z-index:20;
    opacity:1;
    visibility:visible;
  }
  .sd-preview-combined .ar-word.wbw-preview-demo .wbw-tip{
    opacity:1;
    visibility:visible;
    z-index:19;
  }
  .sd-preview-combined:hover .ar-word.wbw-preview-demo:not(:hover) .wbw-tip{
    opacity:0;
    visibility:hidden;
  }
  .qcf{unicode-bidi:isolate;}
  .qcf-tj{unicode-bidi:isolate;font-feature-settings:normal;}

  /* ---------- font pick list (name only; preview in panel above) ---------- */
  .font-pick-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .font-pick-list > li{
    padding:0;
    margin:0;
  }
  .font-pick-item{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:2px;
    width:100%;
    font-family:'Inter',sans-serif;
    color:var(--ink-soft);
    background:transparent;
    border:1px solid transparent;
    border-radius:999px;
    padding:8px 12px;
    min-height:40px;
    margin:0;
    cursor:pointer;
    text-align:left;
    transition:border-color .15s, background .15s, color .15s;
    box-sizing:border-box;
  }
  .font-pick-name{
    font-size:13px;
    font-weight:600;
    line-height:1.3;
    color:inherit;
    max-width:100%;
  }
  button.font-pick-item{
    display:flex;
    width:100%;
    text-align:left;
  }
  .font-pick-item:hover{
    color:var(--ink);
    background:var(--bg);
    border-color:var(--border);
  }
  .font-pick-item.active{
    color:var(--accent);
    background:var(--accent-soft);
    border-color:var(--accent);
  }
  .font-pick-item.active .font-pick-name{font-weight:700;}

  /* ---------- repeat options ---------- */
  .repeat-options{margin-top:12px;}
  .repeat-range{display:flex; gap:10px; margin-top:12px;}
  .repeat-range label{
    display:flex;
    align-items:center;
    gap:7px;
    flex:1;
    font-family:'Inter',sans-serif;
    font-size:12.5px;
    color:var(--ink-soft);
  }
  .repeat-range .nav-select{flex:1;}

  .ayah-num{
    font-family:'ManzoorNaskh',serif;
    color:var(--accent);
  }
  .arabic{
    font-family:'ManzoorNaskh',serif;
    font-size:var(--arabic-size);
    line-height:1.9;
    text-align:right;
    direction:rtl;
    color:var(--ink);
    margin-bottom:10px;
  }
  .arabic.arabic-uthmani{
    font-family:var(--uthmani-stack);
    line-height:2.1;
  }
  .translation{
    font-family:var(--sv-stack);
    font-size:var(--translation-size);
    line-height:1.6;
    color:var(--ink-soft);
    max-width:60ch;
  }
  .translation .word.sv-spoken{
    color:var(--accent);
    background:var(--accent-soft);
    border-radius:3px;
    transition:color .12s, background .12s;
  }
  .translation .word.sv-spoken-past{
    color:var(--ink-soft);
    background:color-mix(in srgb, var(--accent) 11%, var(--surface));
    border-radius:3px;
    transition:color .12s, background .12s;
  }
  .ar-word.ar-spoken{
    background:var(--accent-soft);
    color:var(--accent);
    border-radius:5px;
    transition:color .12s, background .12s;
  }
  .ar-word.ar-spoken-past{
    color:var(--ink);
    background:color-mix(in srgb, var(--accent) 11%, var(--surface));
    border-radius:5px;
    transition:color .12s, background .12s;
  }
  .ar-word.ar-spoken .w-ar,
  .ar-word.ar-spoken-past .w-ar{
    color:inherit;
  }
  .settings-drawer .sv-voice-seg{
    width:100%;
    max-width:100%;
    flex-wrap:wrap;
  }
  .sv-voice-seg button{
    flex:1 1 calc(50% - 3px);
    min-width:0;
    padding:8px 6px;
    font-size:10.5px;
  }

  /* Each word is one nowrap unit → ligatures never split; wrapping happens BETWEEN
     words at the spaces. Parent .arabic is direction:rtl, so natural inline flow
     lays words right-to-left. No flex row-reverse (it double-reversed the RTL order). */
  .ar-word{
    position:relative;
    cursor:help;
    border-radius:5px;
    padding:0 1px;
    transition:background .15s;
    display:inline-block;
    white-space:nowrap;
  }
  .ar-word .w-ar{
    white-space:nowrap;
  }
  /* Empty-centre stops (۪۫۬) kept out of the letter run so Manzoor shapes
     لَّکُمۡ correctly; glyph still shows after the word like alislam ar. */
  .ar-word .ar-mid-waqf{
    display:inline;
    white-space:nowrap;
    padding-inline-start:0.15em;
    font-family:inherit;
    font-size:0.85em;
    vertical-align:super;
    line-height:1;
    pointer-events:none;
  }
  /* Stacked pause pairs (۪ۚ، ٭۫، …) — Manzoor advances each glyph sideways;
     collapse with negative letter-spacing so they coincide like the mushaf. */
  .ar-word .ar-waqf-stack{
    display:inline-block;
    letter-spacing:-0.72em;
    margin-inline-end:0.62em;
    white-space:nowrap;
    pointer-events:none;
    vertical-align:baseline;
  }
  .ar-verse-run{
    display:inline;
  }
  .ar-verse-continuous{
    word-break:keep-all;
    overflow-wrap:normal;
  }
  .ar-verse-body{
    white-space:nowrap;
  }
  /* Last words + ayah marker (﴿n﴾) stay together — never orphan the circle alone */
  .ar-tail{
    display:inline-block;
    white-space:nowrap;
  }
  .ar-tail .ar-word,
  .ar-tail .ayah-num,
  .ar-tail .ar-verse-body{
    white-space:nowrap;
  }
  .nazira-verse .ar-verse-run{
    display:inline;
  }
  .ar-word:hover{background:var(--accent-faint);}
  .ar-word[data-gloss]{position:relative;}
  .ar-word[data-gloss] .wbw-tip{
    position:absolute;
    bottom:calc(100% + 10px);
    left:50%;
    transform:translateX(-50%);
    background:var(--accent);
    color:#fff;
    direction:ltr;
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:600;
    line-height:1.5;
    text-align:center;
    padding:8px 14px;
    border-radius:14px;
    box-shadow:var(--shadow-tooltip);
    z-index:15;
    pointer-events:auto;
    white-space:normal;
    min-width:120px;
    max-height:120px;
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transition:opacity .12s, visibility .12s;
  }
  .ar-word[data-gloss] .wbw-tip-line{display:block;}
  .ar-word[data-gloss] .wbw-tip-line + .wbw-tip-line{
    margin-top:3px;
    font-weight:500;
    font-size:11px;
    opacity:.92;
  }
  .ar-word[data-gloss] .wbw-tip::after{
    content:'';
    position:absolute;
    top:100%;
    left:50%;
    transform:translateX(-50%);
    border:6px solid transparent;
    border-top-color:var(--accent);
  }
  .ar-word[data-gloss]:hover .wbw-tip{opacity:1; visibility:visible;}
  .ar-word[data-gloss]:hover::after,
  .ar-word[data-gloss]:hover::before{display:none;}
  .ar-mark{
    color:var(--muted);
  }

  mark{
    background:var(--accent-soft);
    color:var(--accent);
    border-radius:3px;
    padding:0 2px;
    font-weight:600;
  }

  footer{
    max-width:720px;
    margin:0 auto;
    text-align:center;
    color:var(--muted);
    font-size:12px;
    padding:20px 24px 50px;
    line-height:1.8;
    border-top:1px solid var(--border);
  }
  footer a{color:var(--accent); text-decoration:none;}
  footer a:hover{text-decoration:underline;}

  /* ---------- surah-name heading (quran.com ligature font) ---------- */
  .surah-hdr{
    font-family:'SurahNames',serif;
    font-variant-ligatures:common-ligatures;
    font-size:54px;
    line-height:1.15;
    color:var(--ink);
    margin-bottom:2px;
  }

  /* ---------- verse action bar ---------- */
  .actions-group{gap:4px;}
  .action-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:32px;
    height:32px;
    min-width:32px;
    border-radius:50%;
    border:1px solid transparent;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    transition:border-color .15s, background .15s, color .15s;
    box-sizing:border-box;
  }
  .action-btn svg{display:block;}
  .action-btn:hover{
    color:var(--ink);
    background:var(--bg);
    border-color:var(--border);
  }
  .action-btn.active{
    color:var(--accent);
    background:var(--accent-soft);
    border-color:var(--accent);
  }

  .verse-note{
    margin-top:10px;
    padding:10px 14px;
    background:var(--accent-soft);
    border:1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    border-radius:16px;
    font-family:'Roboto',Helvetica,Arial,sans-serif;
    font-size:13px;
    line-height:1.55;
    color:var(--ink-soft);
    white-space:pre-wrap;
    max-width:60ch;
  }
  .note-editor{margin-top:10px; max-width:60ch;}
  .note-editor textarea{
    width:100%;
    min-height:70px;
    resize:vertical;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--ink);
    border-radius:16px;
    padding:12px 14px;
    font-family:'Inter',sans-serif;
    font-size:13.5px;
    line-height:1.5;
    outline:none;
    box-sizing:border-box;
    transition:border-color .15s, box-shadow .15s;
  }
  .note-editor textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);}
  .note-editor-actions{display:flex; gap:6px; margin-top:8px; flex-wrap:wrap;}
  .note-btn{
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--ink-soft);
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:600;
    padding:8px 14px;
    min-height:34px;
    border-radius:999px;
    cursor:pointer;
    transition:border-color .15s, background .15s, color .15s, filter .15s;
    box-sizing:border-box;
  }
  .note-btn:hover{border-color:var(--faint); color:var(--ink);}
  .note-btn.primary{background:var(--accent); border-color:var(--accent); color:#fff;}
  .note-btn.primary:hover{filter:brightness(1.06);}
  .note-btn.danger:hover{border-color:#d33; color:#d33; background:color-mix(in srgb, #d33 8%, var(--surface));}

  /* ---------- verse selection bar ---------- */
  .selection-bar{
    position:fixed;
    left:50%;
    transform:translateX(-50%) translateY(14px);
    bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    z-index:102;
    display:flex;
    align-items:center;
    gap:12px;
    padding:9px 10px 9px 16px;
    background:var(--surface);
    border:1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
    border-radius:999px;
    box-shadow:0 6px 24px rgba(0,0,0,.14);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, bottom .25s ease;
    max-width:min(420px, calc(100vw - 24px));
    box-sizing:border-box;
  }
  .selection-bar.visible{
    opacity:1;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
  }
  .selection-bar-count{
    flex:1 1 auto;
    min-width:0;
    font-size:13px;
    font-weight:600;
    color:var(--ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .selection-bar-clear{
    flex:0 0 auto;
    border:none;
    border-radius:999px;
    padding:8px 14px;
    font-family:'Inter',sans-serif;
    font-size:13px;
    font-weight:700;
    line-height:1;
    background:var(--accent);
    color:#fff;
    cursor:pointer;
    transition:filter .15s, transform .15s;
  }
  .selection-bar-clear:hover{filter:brightness(1.08);}
  .selection-bar-clear:active{transform:scale(.97);}
  body:has(.footer-player.fp-active) .selection-bar{
    bottom:calc(var(--fp-bar-clearance, 92px) + 10px);
  }
  body:has(.fp-handle.visible) .selection-bar{
    bottom:calc(var(--fp-handle-clearance, 22px) + 10px);
  }
  body:has(.footer-player.fp-active) .selection-bar,
  body:has(.fp-handle.visible) .selection-bar{
    box-shadow:0 4px 18px rgba(0,0,0,.12);
  }

  /* ---------- toast ---------- */
  .toast{
    position:fixed;
    bottom:26px;
    left:50%;
    transform:translate(-50%, 12px);
    background:var(--ink);
    color:var(--bg);
    font-size:13px;
    font-weight:600;
    padding:10px 18px;
    border-radius:999px;
    box-shadow:var(--shadow);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    z-index:60;
  }
  .toast.show{opacity:1; transform:translate(-50%, 0);}

  /* ---------- tajweed colours & legend ---------- */
  .tj-ham_wasl,.tj-laam_shamsiyah,.tj-slnt{color:var(--tj-gray);}
  .tj-madda_normal{color:var(--tj-madda-normal);}
  .tj-madda_permissible,.tj-madda_obligatory_monfasel{color:var(--tj-madda-perm);}
  .tj-madda_obligatory,.tj-madda_obligatory_mottasel{color:var(--tj-madda-obl);}
  .tj-madda_necessary{color:var(--tj-madda-nec);}
  .tj-ghunnah{color:var(--tj-ghunnah);}
  .tj-qalaqah{color:var(--tj-qalaqah);}
  .tj-ikhafa{color:var(--tj-ikhafa);}
  .tj-ikhafa_shafawi{color:var(--tj-ikhafa-shafawi);}
  .tj-idgham_ghunnah{color:var(--tj-idgham);}
  .tj-idgham_wo_ghunnah{color:var(--tj-idgham-wo);}
  .tj-idgham_shafawi{color:var(--tj-idgham-shafawi);}
  .tj-idgham_mutajanisayn,.tj-idgham_mutaqarib{color:var(--tj-idgham-mus);}
  .tj-iqlab{color:var(--tj-iqlab);}
  /* Tajweed color legend — slides down below topbar (mirrors footer player pattern) */
  .tajweed-bar{
    position:fixed;
    top:var(--topbar-h, 53px);
    left:0;
    right:0;
    z-index:19;
    background:color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--border);
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    transform:translateY(calc(-100% - 1px));
    opacity:0;
    pointer-events:none;
    transition:transform .25s ease, opacity .2s ease, top .28s ease;
  }
  .topbar.topbar-hidden ~ .tajweed-bar,
  .topbar.topbar-hidden ~ .tj-handle{
    top:0;
  }
  .tajweed-bar.tj-active{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
    touch-action:none;
    cursor:grab;
  }
  .tajweed-bar.tj-active:active{cursor:grabbing;}
  .tj-content{
    padding:12px 16px 0;
  }
  .tj-grab{
    display:flex;
    justify-content:center;
    padding:8px 0 10px;
    cursor:default;
  }
  .tj-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 14px;
    border:1px solid var(--border);
    border-radius:999px;
    background:color-mix(in srgb, var(--surface) 92%, var(--ink) 8%);
    color:var(--ink-soft);
    font-family:inherit;
    font-size:12.5px;
    font-weight:500;
    line-height:1;
    cursor:pointer;
    touch-action:none;
  }
  .tj-pill:hover{color:var(--ink);}
  .tj-chevron{flex:0 0 auto; opacity:.75;}
  .tj-handle{
    position:fixed;
    top:var(--topbar-h, 53px);
    left:50%;
    transform:translateX(-50%) translateY(-100%);
    z-index:18;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, top .28s ease;
  }
  .tj-handle.visible{
    transform:translateX(-50%) translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .tj-handle .tj-pill{
    border-top:none;
    border-radius:0 0 12px 12px;
    padding-top:8px;
    box-shadow:0 2px 8px rgba(0,0,0,.08);
  }
  .legend-grid{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
  }
  .legend-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    gap:10px 28px;
    max-width:min(960px, 100%);
  }
  .legend-item{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    font-weight:400;
    color:var(--ink-soft);
    white-space:nowrap;
  }
  .legend-item i{
    flex:0 0 auto;
    width:10px;
    height:10px;
    border-radius:50%;
    box-shadow:0 0 0 1px rgba(0,0,0,.1) inset;
  }
  #tajweedSection .switch-row + .switch-row{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--border);
  }
  html.tj-bar-open .title-block{
    scroll-margin-top:var(--tj-chrome-offset, 0);
  }

  /* ---------- repeat controls ---------- */
  .repeat-wrap{position:relative;}
  .repeat-panel{
    position:absolute;
    top:calc(100% + 8px);
    right:0;
    width:250px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:var(--shadow);
    padding:14px;
    display:none;
    z-index:30;
  }
  .repeat-wrap.open .repeat-panel{display:block;}
  .repeat-wrap.open .icon-btn{border-color:var(--accent); color:var(--accent);}
  .repeat-count-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:12px;
  }
  .repeat-count{
    width:64px;
    border:1px solid var(--border);
    background:var(--bg);
    color:var(--ink);
    border-radius:9px;
    padding:7px 9px;
    font-size:13.5px;
    font-family:'Inter',sans-serif;
    outline:none;
    text-align:center;
  }
  .repeat-count:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--ring);}
  .repeat-count:disabled{opacity:.45;}
  .repeat-count-row + .switch-row-sub{margin-top:10px;}

  /* ---------- info button with label ---------- */
  .info-btn{width:auto; padding:0 11px; gap:6px; font-family:'Inter',sans-serif; font-size:12px; font-weight:600;}
  .info-btn .info-label{white-space:nowrap;}

  /* ---------- arabic name in chapter nav ---------- */
  .nav-trigger .nav-ar{
    font-family:'SurahNames',serif;
    font-variant-ligatures:common-ligatures;
    font-size:24px;
    color:var(--ink);
    line-height:1;
  }

  /* ---------- nazira (reading) mode ---------- */
  .nazira{
    font-family:'ManzoorNaskh',serif;
    font-size:var(--arabic-size);
    line-height:1.9;
    direction:rtl;
    text-align:right;
    letter-spacing:normal;
    word-spacing:normal;
    color:var(--ink);
    padding:16px 0 6px;
  }
  .nazira.arabic-uthmani{font-family:var(--uthmani-stack); line-height:2.1;}
  .nazira .ar-word{
    display:inline;
    padding:0;
  }
  .nazira-bismillah{text-align:center; margin-bottom:0;}
  .verse-tajweed-bismillah{
    text-align:center;
    margin:0 0 1.25rem;
    padding:0.5rem 0 0;
  }
  .verse-tajweed-bismillah .arabic{margin-bottom:0;}
  #bismillahRow.hidden{display:none;}
  .nazira-flow{margin:0;}
  .nazira .ayah-num{color:var(--accent);}
  .nazira-verse{border-radius:6px; padding:1px 2px; transition:background .2s ease;}
  .nazira-verse.playing{background:var(--accent-soft);}

  /* ---------- footnote (*) ---------- */
  .fn{
    display:inline;
    position:relative;
    border:none;
    background:none;
    color:var(--note);
    font-family:inherit;
    font-weight:800;
    font-size:0.95em;
    line-height:1;
    padding:0;
    margin:0;
    cursor:pointer;
    vertical-align:super;
    letter-spacing:-0.04em;
  }
  .fn:hover::after,
  .fn:hover::before{display:none;}
  .fn-tip{
    position:fixed;
    width:300px;
    max-width:74vw;
    max-height:min(240px, 50vh);
    overflow-y:auto;
    background:var(--ink);
    color:var(--bg);
    font-family:var(--sv-stack);
    font-size:12.5px;
    font-weight:400;
    line-height:1.95;
    text-align:left;
    white-space:normal;
    padding:10px 14px;
    border-radius:14px;
    box-shadow:var(--shadow);
    z-index:100;
    pointer-events:auto;
  }
  .fn-tip[hidden]{display:none;}
  .fn-tip em,
  .fn-tip i{font-style:italic;}
  .fn-tip .ar-inline{
    font-family:'ManzoorNaskh',serif;
    font-size:1.18em;
    line-height:1;
    vertical-align:baseline;
    direction:rtl;
    unicode-bidi:embed;
  }
  .translation em,
  .translation i{font-style:italic;}
  .fn:hover::before{display:none;}

  #noteOverlay[data-fn-modal="1"] .modal-panel{
    max-width:560px;
    max-height:85vh;
  }
  #noteOverlay[data-fn-modal="1"] .modal-header{
    padding:12px 14px 10px;
    border-bottom:none;
    justify-content:flex-end;
  }
  #noteOverlay[data-fn-modal="1"] .modal-header > div:first-child{
    display:none;
  }
  #noteOverlay[data-fn-modal="1"] .modal-tools{
    margin-left:auto;
  }
  #noteOverlay[data-fn-modal="1"] .modal-body{
    line-height:1.95;
  }
  #noteOverlay .fn-modal-text{
    white-space:pre-wrap;
    line-height:1.95;
  }
  #noteOverlay .fn-modal-text em,
  #noteOverlay .fn-modal-text i{font-style:italic;}
  #noteOverlay .fn-modal-text .ar-inline,
  #noteOverlay[data-fn-modal="1"] .modal-body .ar-inline{
    font-family:'ManzoorNaskh',serif;
    font-size:1.18em;
    line-height:1;
    vertical-align:baseline;
    direction:rtl;
    unicode-bidi:embed;
    color:var(--ink);
    margin:0 3px;
  }
  #noteOverlay .fn-ref{
    color:var(--accent);
    font-weight:600;
    text-decoration:underline;
    text-underline-offset:2px;
  }
  #noteOverlay .fn-ref:hover{
    opacity:.85;
  }

  @media (max-width:640px){
    #noteOverlay.modal-overlay{
      padding:8px;
      align-items:stretch;
    }
    #noteOverlay .modal-panel{
      max-width:100%;
      width:100%;
      max-height:92vh;
      height:92vh;
      border-radius:18px;
      margin:auto 0;
    }
    #noteOverlay .modal-body{
      flex:1;
      min-height:0;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      padding:8px 18px 22px;
    }
  }

  /* ---------- prev/next pager ---------- */
  .pager{
    display:flex;
    justify-content:space-between;
    gap:12px;
    border-top:1px solid var(--border);
    margin-top:40px;
    padding-top:18px;
  }
  .pager a{
    display:block;
    max-width:48%;
    text-decoration:none;
    color:var(--ink);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 14px;
    transition:.15s;
  }
  .pager a:hover{border-color:var(--accent); box-shadow:var(--shadow);}
  .pager .dir{
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
    margin-bottom:3px;
  }
  .pager .dest{font-size:13px; font-weight:600; line-height:1.35;}
  .pager .next{margin-left:auto; text-align:right;}
  .pager-disabled{
    display:block;
    max-width:48%;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding:10px 14px;
    opacity:.55;
  }

  /* ---------- Sv toggle + reading icon (topbar uses quran-controls.css) ---------- */

  /* ---------- word-by-word ---------- */
  .ar-word .w-ar{display:inline;}
  .ar-word.has-below{
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    vertical-align:top;
    /* Room under translit before the next Arabic wrap row */
    margin-bottom:12px;
  }
  .w-below{
    display:block;
    font-family:'Inter',sans-serif;
    font-size:11px;
    font-weight:500;
    color:var(--muted);
    direction:ltr;
    text-align:center;
    line-height:1.35;
    /* Gap between Arabic glyph and its own translit label */
    margin-top:5px;
    max-width:110px;
  }
  .w-below.w-translit{font-style:italic;}
  body.wbw-click .verse .ar-word{cursor:pointer;}

  /* ---------- settings drawer ---------- */
  .drawer-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);
    opacity:0;
    pointer-events:none;
    transition:opacity .25s ease;
    z-index:65;
  }
  .drawer-overlay.show{opacity:1; pointer-events:auto;}
  .settings-drawer{
    position:fixed;
    top:0;
    right:0;
    height:100%;
    width:360px;
    max-width:92vw;
    background:var(--surface);
    border-left:1px solid var(--border);
    box-shadow:-8px 0 32px rgba(0,0,0,.12);
    transform:translateX(105%);
    transition:transform .32s cubic-bezier(.32,.72,.28,1);
    z-index:70;
    display:flex;
    flex-direction:column;
  }
  .settings-drawer.open{transform:translateX(0);}

  /* ---------- chapter picker drawer (slides from left) ---------- */
  .chapter-drawer{
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:min(720px, 96vw);
    max-width:96vw;
    background:var(--surface);
    border-right:1px solid var(--border);
    box-shadow:8px 0 32px rgba(0,0,0,.12);
    transform:translateX(-105%);
    transition:transform .32s cubic-bezier(.32,.72,.28,1);
    z-index:68;
    display:flex;
    flex-direction:column;
  }
  .chapter-drawer.open{transform:translateX(0);}
  /* Keep chapter picker above mini player; shrink drawer so list scrolls past surah 114 */
  :root{--fp-bar-clearance:0px; --fp-handle-clearance:0px;}
  body:has(.fp-handle.visible){--fp-handle-clearance:calc(22px + env(safe-area-inset-bottom, 0px));}
  body:has(.fp-handle.visible) .container{
    padding-bottom:calc(90px + var(--fp-handle-clearance));
  }
  body:has(.footer-player.fp-active){--fp-bar-clearance:calc(92px + env(safe-area-inset-bottom, 0px)); --fp-handle-clearance:0px;}
  body:has(.footer-player.fp-active) .container{padding-bottom:90px;}
  body:has(.footer-player.fp-active.fp-expanded-open){--fp-bar-clearance:calc(min(420px, 56vh) + env(safe-area-inset-bottom, 0px));}
  body:has(.chapter-drawer.open) .footer-player.fp-active{z-index:90;}
  .chapter-drawer.open{z-index:101;}
  body:has(.footer-player.fp-active) .chapter-drawer.open{
    height:calc(100% - var(--fp-bar-clearance));
  }
  .chapter-drawer-inner{
    display:flex;
    flex-direction:column;
    height:100%;
    min-height:0;
  }
  .cn-header{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
  }
  .cn-seg{flex:1;}
  .cn-close{flex-shrink:0;}
  .cn-pane{
    display:none;
    flex:1;
    min-height:0;
    flex-direction:column;
  }
  .cn-pane.active{display:flex;}
  .cn-kapitel-split{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows:1fr;
    flex:1;
    min-height:0;
    width:100%;
  }
  .cn-col{
    display:flex;
    flex-direction:column;
    min-height:0;
    overflow:hidden;
  }
  .cn-col-left{border-right:1px solid var(--border);}
  .cn-col-head{
    padding:10px 12px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
  }
  .cn-scroll{
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:6px 8px;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  body:has(.footer-player.fp-active) .chapter-drawer.open .cn-scroll{
    padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px));
  }
  .cn-scroll .verse-grid{
    max-height:none;
    grid-template-columns:repeat(auto-fill, minmax(36px, 1fr));
    gap:6px;
    flex:0 0 auto;
  }
  @keyframes cnVerseIn{
    from{
      opacity:0;
      transform:translateY(10px);
    }
    to{
      opacity:1;
      transform:translateY(0);
    }
  }
  .cn-scroll .verse-grid.is-entering .verse-btn{
    animation:cnVerseIn .32s cubic-bezier(.22,1,.36,1) both;
    animation-delay:var(--cn-stagger, 0ms);
  }
  @media (prefers-reduced-motion: reduce){
    .cn-scroll .verse-grid.is-entering .verse-btn{
      animation:none;
    }
  }
  .cn-empty{
    margin:12px 8px;
    font-size:13px;
    color:var(--muted);
  }
  .cn-scroll-tail{
    flex:0 0 auto;
    height:12px;
    pointer-events:none;
  }
  body:has(.footer-player.fp-active) .chapter-drawer.open .cn-scroll-tail{
    height:calc(var(--fp-bar-clearance) + 16px);
  }
  .cn-pane-juz .cn-col-head{border-bottom:1px solid var(--border);}
  @media (max-width:640px){
    .chapter-drawer{width:100%; max-width:100%;}
    .cn-kapitel-split{
      grid-template-columns:minmax(0, 1.05fr) minmax(0, 0.95fr);
    }
    .cn-col-head{padding:8px 10px;}
    .nav-item{padding:7px 8px; font-size:12.5px;}
    .nav-item .ni-ar{font-size:22px; max-width:42%;}
    .cn-scroll .verse-grid{
      grid-template-columns:repeat(auto-fill, minmax(34px, 1fr));
      gap:3px;
    }
    .legend-row{gap:8px 16px;}
    .legend-item{font-size:11.5px; gap:7px;}
    .legend-item i{width:9px; height:9px;}
    .tj-pill{font-size:12px; padding:6px 12px;}
  }

  .sd-header{
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    border-bottom:1px solid var(--border);
    flex-shrink:0;
  }
  .sd-header .sd-seg-tabs{
    flex:1;
    margin:0;
    width:auto;
    min-width:0;
  }
  .sd-close{flex-shrink:0;}
  .sd-title{display:none;}
  .sd-tabs{
    display:flex;
    gap:2px;
    flex-shrink:0;
  }
  .sd-seg-tabs{
    background:var(--surface-alt);
    border:1px solid var(--border);
    border-radius:999px;
    padding:3px;
  }
  .sd-tab{
    flex:1;
    text-align:center;
    border:none;
    background:transparent;
    color:var(--muted);
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:600;
    padding:8px 8px;
    border-radius:999px;
    cursor:pointer;
    transition:background .15s, color .15s, box-shadow .15s;
    white-space:nowrap;
  }
  .sd-tab:hover{color:var(--ink);}
  .sd-tab.active{
    background:var(--accent-soft);
    color:var(--accent);
    box-shadow:inset 0 0 0 1px var(--accent);
  }
  .sd-body{flex:1; overflow-y:auto; overflow-x:visible; padding:16px;}
  .sd-pane{display:none;}
  .sd-pane.active{display:block;}
  .sd-pane .settings-section + .settings-section{
    margin-top:16px;
    padding-top:14px;
    border-top:1px solid var(--border);
  }
  .sd-pane > .settings-section:first-of-type{margin-top:0;}
  .sd-preview{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:16px;
  }
  .settings-drawer .switch-row{
    padding:10px 12px;
    margin:0 -4px;
    border:1px solid transparent;
    border-radius:999px;
    transition:border-color .15s, background .15s;
    box-sizing:border-box;
  }
  .settings-drawer .switch-row:hover{
    background:var(--bg);
    border-color:var(--border);
  }
  #settingsToggle.active{
    background:var(--accent-soft);
    border-color:var(--accent);
    color:var(--accent);
  }

  .hidden{display:none !important;}

  @media (max-width:720px){
    .topbar .nav-wrap{max-width:min(180px, 38vw);}
    .topbar .nav-trigger.btn-select{padding:0 8px; gap:4px;}
    .topbar .nav-trigger .nav-name{font-size:12.5px;}
    .topbar .nav-trigger .nav-ar{font-size:16px;}
    .hero{padding:16px 18px 10px;}
    html.tj-chrome-active .hero{
      padding-top:calc(16px + var(--tj-extra-offset, 0px));
    }
    .chapter-hero-card{padding:16px 16px 14px;}
    .chc-main{gap:12px;}
    .chc-glyph{font-size:80px; min-width:110px;}
    .chapter-hero-card .chc-glyph.surah-hdr{font-size:80px;}
    .chapter-hero-clean .chc-glyph{font-size:120px;}
    .chapter-hero-clean .chc-num{min-width:38px; height:38px; font-size:16px; border-radius:12px;}
    .chapter-hero-clean .chc-title{font-size:20px;}
    .chapter-hero-clean .chc-main{gap:14px;}
    .chapter-hero-clean .chc-top{margin-bottom:14px;}
    .chc-title{font-size:18px;}
    .chc-subtitle{font-size:15px;}
    .chc-info-popover-title .ni-ar{font-size:22px;}
  }

  @media (max-width:430px){
    .topbar .nav-trigger.btn-select{padding:0 7px;}
    .topbar .nav-trigger .nav-ar{font-size:15px;}
  }

  /* Landscape phones — keep single row */
  @media (max-width:900px) and (orientation:landscape),
         (max-height:500px) and (orientation:landscape){
    .topbar .nav-wrap{max-width:min(160px, 34vw);}
  }

  /* Translation source diff indicator — disabled (review flags kept in JSON only) */

  /* Footer verse-repeat segmented control */
  .fp-seg{
    display:flex;
    align-items:center;
    gap:3px;
    border:1px solid var(--border);
    border-radius:999px;
    overflow:visible;
    background:var(--surface-alt);
    padding:3px;
    min-height:0;
  }
  .fp-seg button{
    flex:1;
    border:none;
    background:transparent;
    padding:8px 10px;
    font-size:11px;
    font-weight:600;
    line-height:1.2;
    color:var(--muted);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    border-radius:999px;
    box-sizing:border-box;
    transition:background .15s, color .15s, box-shadow .15s;
    -webkit-appearance:none;
    appearance:none;
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    -webkit-text-size-adjust:100%;
  }
  .fp-seg button:hover{color:var(--ink);}
  .fp-seg button.active{
    background:var(--accent-soft);
    color:var(--accent);
    box-shadow:inset 0 0 0 1px var(--accent);
  }
  .fp-seg button + button{border-left:none;}
  .fp-verse-layout{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }
  .fp-verse-layout > .fp-seg,
  .fp-chapter-layout > .fp-seg{
    width:100%;
  }
  .fp-verse-details{
    width:100%;
  }
  .fp-verse-details.hidden{display:none;}
  .fp-chapter-details{
    width:100%;
  }
  .fp-chapter-details.hidden{display:none;}
  .fp-repeat-toolbar{
    display:flex;
    flex-direction:row;
    align-items:flex-end;
    flex-wrap:nowrap;
    gap:8px;
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .fp-count-group{
    flex:0 0 auto;
  }
  .fp-range-group{
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    align-items:end;
    gap:6px;
    flex:1 1 auto;
    min-width:0;
  }
  .fp-range-group.hidden{display:none;}
  .fp-range-group .fp-num-stepper{
    gap:4px;
    width:100%;
    justify-content:center;
  }
  .fp-range-group .fp-num-stepper button{
    width:30px;
    min-width:30px;
    height:30px;
    min-height:30px;
    font-size:16px;
  }
  .fp-range-group .fp-num-inp{
    width:34px;
    min-width:34px;
    height:30px;
    min-height:30px;
    font-size:12px;
    padding:0 4px;
  }
  .fp-range-group .fp-num-label{font-size:9px;}
  #fpCountControls .fp-num-stepper button{
    width:32px;
    min-width:32px;
    height:32px;
    min-height:32px;
  }
  #fpCountControls .fp-num-inp{
    width:38px;
    min-width:38px;
    height:32px;
    min-height:32px;
    font-size:12px;
  }
  .fp-chapter-layout{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    width:100%;
  }
  .fp-num-stepper{
    display:inline-flex;
    align-items:flex-end;
    gap:6px;
    flex:0 0 auto;
  }
  .fp-num-mid{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-end;
    gap:3px;
    flex:0 0 auto;
  }
  .fp-num-label{
    font-size:10px;
    font-weight:600;
    color:var(--muted);
    line-height:1;
    text-align:center;
    white-space:nowrap;
  }
  .fp-num-stepper button{
    flex:0 0 36px;
    width:36px;
    min-width:36px;
    height:36px;
    min-height:36px;
    padding:0;
    font-size:18px;
    font-weight:500;
    line-height:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
    border:1px solid var(--border);
    border-radius:50%;
    background:var(--surface);
    color:var(--ink-soft);
    cursor:pointer;
    transition:border-color .15s, background .15s, color .15s;
    -webkit-appearance:none;
    appearance:none;
    font-family:'Inter',system-ui,-apple-system,sans-serif;
  }
  .fp-num-stepper button:hover{
    color:var(--ink);
    background:var(--bg);
    border-color:var(--faint);
  }
  .fp-num-inp{
    width:44px;
    min-width:44px;
    height:36px;
    min-height:36px;
    flex:0 0 auto;
    border:1px solid var(--border);
    background:var(--surface);
    text-align:center;
    font-size:13px;
    font-weight:600;
    font-variant-numeric:tabular-nums;
    color:var(--ink);
    padding:0 6px;
    box-sizing:border-box;
    border-radius:999px;
    -webkit-appearance:none;
    appearance:none;
    -moz-appearance:textfield;
    transition:border-color .15s, box-shadow .15s, background .15s;
  }
  .fp-num-inp::-webkit-outer-spin-button,
  .fp-num-inp::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
  }
  .fp-num-inp:focus{
    outline:none;
    border-color:var(--accent);
    box-shadow:0 0 0 3px var(--ring);
    background:var(--surface);
  }
  .fp-count-reveal.hidden,
  .fp-chapter-count-reveal.hidden{
    display:flex;
    max-width:0;
    opacity:0;
    margin:0;
    pointer-events:none;
  }
  .fp-label-inline{
    font-size:11px;
    font-weight:600;
    color:var(--muted);
    flex:0 0 auto;
    min-width:34px;
  }

  /* ---------- enhanced footer player v2 ---------- */
  /* Hidden by default — only shown while audio is actively playing (see .footer-player.fp-active in JS) */
  .footer-player{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:var(--surface);
    border-top:1px solid var(--border);
    box-shadow:0 -2px 8px rgba(0,0,0,.08);
    z-index:100;
    padding:12px 16px;
    font-size:14px;
    transform:translateY(100%);
    opacity:0;
    pointer-events:none;
    transition:transform .25s ease, opacity .25s ease;
  }
  /* Wide screens: bar stays full-width, controls center near the reading column */
  @media (min-width:1100px){
    .footer-player{
      padding-left:max(16px, calc((100% - 1000px) / 2));
      padding-right:max(16px, calc((100% - 1000px) / 2));
    }
  }
  .footer-player.fp-active{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
    touch-action:none;
    cursor:grab;
  }
  .footer-player.fp-active:active{cursor:grabbing;}
  /* grab handle at the top of the panel — swipe up expands, swipe down collapses/hides */
  .fp-grab{
    display:flex;
    justify-content:center;
    padding:2px 0 8px;
    cursor:grab;
    touch-action:none;
  }
  .fp-grab-bar{
    width:36px;
    height:4px;
    border-radius:2px;
    background:var(--faint);
  }
  .fp-primary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
  }
  .fp-group{
    display:flex;
    align-items:center;
    gap:6px;
  }
  .fp-left, .fp-right{
    flex:1;
  }
  .footer-player .fp-reciter-wrap{
    position:relative;
    flex:0 0 auto;
  }
  .fp-reciter-seg{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }
  .fp-reciter-seg button{
    flex:0 0 auto;
    width:100%;
    min-width:0;
    white-space:normal;
    text-align:left;
    line-height:1.35;
    font-size:12px;
    padding:8px 10px;
    border-radius:8px;
  }
  .fp-reciter-popover{
    position:fixed;
    z-index:120;
    min-width:min(92vw, 320px);
    max-width:320px;
    max-height:min(70vh, 420px);
    overflow-y:auto;
    padding:6px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface);
    box-shadow:var(--shadow);
    display:flex;
    flex-direction:column;
    gap:8px;
    opacity:0;
    visibility:hidden;
    transform:translateY(6px);
    transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  }
  .fp-reciter-popover.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    transition:opacity .2s ease, transform .2s ease, visibility 0s;
  }
  .fp-reciter-popover[hidden]{display:none !important;}
  .fp-reciter-opt{
    border:1px solid transparent;
    border-radius:8px;
    background:transparent;
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:600;
    text-align:left;
    line-height:1.35;
    white-space:normal;
    padding:8px 10px;
    cursor:pointer;
    transition:border-color .12s, background .12s, color .12s;
  }
  .fp-reciter-opt:hover{
    background:var(--bg);
    border-color:var(--border);
  }
  .fp-reciter-opt.active{
    background:var(--accent-soft);
    border-color:var(--accent);
    color:var(--accent);
  }
  .fp-rec-pop-section{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .fp-rec-pop-section + .fp-rec-pop-section{
    padding-top:8px;
    border-top:1px solid var(--border);
  }
  .fp-rec-pop-label{
    font-size:10px;
    font-weight:700;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--muted);
    padding:2px 6px 0;
  }
  .fp-rec-pop-list{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .fp-right{
    justify-content:flex-end;
  }
  .fp-center{
    flex:0 0 auto;
    justify-content:center;
    gap:14px;
  }
  .footer-player .fp-btn,
  .footer-player .fp-settings-btn,
  .footer-player .fp-close-btn,
  .footer-player .fp-repeat-btn,
  .footer-player .fp-reciter-btn{
    position:relative;
    flex-shrink:0;
    width:40px;
    height:40px;
    min-width:40px;
    padding:0;
    border-radius:50%;
    border:1px solid transparent;
    background:transparent;
    color:var(--muted);
    cursor:pointer;
    transition:border-color .15s, background .15s, color .15s, opacity .2s;
    box-sizing:border-box;
  }
  .footer-player .fp-btn:hover,
  .footer-player .fp-settings-btn:hover,
  .footer-player .fp-reciter-btn:hover,
  .footer-player .fp-close-btn:hover,
  .footer-player .fp-repeat-btn:hover{
    color:var(--ink);
    background:var(--bg);
    border-color:var(--border);
  }
  .footer-player .fp-btn.playing,
  .footer-player .fp-settings-btn.active,
  .footer-player .fp-reciter-btn.active,
  .footer-player .fp-repeat-btn.active{
    color:var(--accent);
    background:var(--accent-soft);
    border-color:var(--accent);
  }
  .footer-player .fp-btn{
    width:44px;
    height:44px;
    min-width:44px;
  }
  .footer-player .fp-btn .icon-pause{display:none;}
  .footer-player .fp-btn.playing .icon-play{display:none;}
  .footer-player .fp-btn.playing .icon-pause{display:block;}
  .fp-verse-info{
    color:var(--muted);
    font-weight:500;
    font-size:12px;
    text-align:center;
    margin-top:6px;
  }
  /* persistent reveal tab — solid plate on first open; full player replaces it when playing */
  .fp-handle{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    width:100%;
    transform:translateY(100%);
    min-height:22px;
    height:auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    padding:7px 0 calc(5px + env(safe-area-inset-bottom, 0px));
    box-sizing:border-box;
    background:var(--surface);
    border-top:1px solid var(--border);
    border-bottom:none;
    border-left:none;
    border-right:none;
    border-radius:0;
    box-shadow:0 -6px 18px rgba(0,0,0,.1);
    z-index:101;
    cursor:grab;
    touch-action:none;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
    margin:0;
    -webkit-tap-highlight-color:transparent;
  }
  .fp-handle.visible{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .fp-handle-bar{
    width:36px;
    height:4px;
    border-radius:2px;
    background:color-mix(in srgb, var(--accent) 55%, var(--muted));
    flex:0 0 auto;
  }
  .fp-handle-wave{display:none;}
  .footer-player .fp-reciter-wrap{
    position:relative;
    flex:0 0 auto;
  }
  .fp-settings-btn,
  .fp-close-btn,
  .fp-repeat-btn{
    /* sized via .footer-player rules above */
  }
  .fp-volume-wrap{
    display:flex;
    align-items:center;
  }
  .fp-volume-btn{
    width:32px;
    height:32px;
    border-radius:50%;
    border:none;
    background:none;
    color:var(--ink-soft);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    flex-shrink:0;
  }
  .fp-volume-btn:hover{
    background:var(--faint);
    color:var(--ink);
  }
  .fp-volume{
    width:0;
    opacity:0;
    margin-left:0;
    cursor:pointer;
    overflow:hidden;
    transition:width .2s ease, opacity .2s ease, margin-left .2s ease;
  }
  .fp-volume-wrap.expanded .fp-volume{
    width:90px;
    opacity:1;
    margin-left:6px;
  }
  .fp-close-btn{
    /* sized via .footer-player rules above */
  }
  .fp-repeat-btn,
  .fp-unlimited-btn{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:border-color .15s, background .15s, color .15s, opacity .2s, max-width .24s ease, margin .24s ease;
  }
  .fp-unlimited-btn{
    width:40px;
    height:40px;
    min-width:40px;
    padding:0;
    border-radius:50%;
    border:1px solid transparent;
    background:transparent;
    color:var(--muted);
    flex-shrink:0;
    box-sizing:border-box;
  }
  .fp-unlimited-btn:not(.inactive):hover{
    color:var(--ink);
    background:var(--bg);
    border-color:var(--border);
  }
  .fp-repeat-btn.active,
  .fp-unlimited-btn.active{
    color:var(--accent);
    background:var(--accent-soft);
    border-color:var(--accent);
  }
  .fp-repeat-btn.loop-off,
  .fp-repeat-btn:not(.active){
    opacity:0.36;
    color:var(--muted);
  }
  .fp-repeat-btn.loop-off:hover,
  .fp-repeat-btn:not(.active):hover{
    opacity:0.5;
    background:transparent;
    color:var(--muted);
  }
  .fp-unlimited-btn.inactive{
    opacity:0.42;
    color:var(--muted);
  }
  .fp-unlimited-btn.inactive:hover{
    opacity:0.58;
    background:var(--faint);
    color:var(--muted);
  }
  .fp-unlimited-slot{
    flex:0 0 40px;
    width:40px;
    min-width:40px;
  }
  .fp-unlimited-btn.hidden{display:none;}
  .fp-loop-badge{
    position:absolute;
    right:1px;
    bottom:1px;
    min-width:16px;
    height:16px;
    padding:0 4px;
    border-radius:8px;
    background:var(--accent);
    color:#fff;
    font-family:'Inter',sans-serif;
    font-size:10px;
    font-weight:800;
    line-height:16px;
    text-align:center;
    display:none;
    pointer-events:none;
    box-shadow:0 1px 3px rgba(0,0,0,.18);
  }
  .fp-loop-badge-vk{
    font-size:9px;
    letter-spacing:-0.04em;
    min-width:18px;
    padding:0 3px;
  }
  .fp-unlimited-btn.active .fp-loop-badge{
    display:block;
  }
  .fp-unlimited-btn.active .fp-loop-badge-v ~ .fp-loop-badge-k,
  .fp-unlimited-btn.active .fp-loop-badge-k ~ .fp-loop-badge-v,
  .fp-unlimited-btn.active .fp-loop-badge-vk{
    display:none;
  }
  .fp-repeat-btn.loop-verse .fp-loop-badge-v,
  .fp-repeat-btn.loop-chapter .fp-loop-badge-k{
    display:block;
  }
  .fp-repeat-btn.loop-both .fp-loop-badge-vk{
    display:block;
  }
  .fp-repeat-btn.loop-verse .fp-loop-badge-k,
  .fp-repeat-btn.loop-verse .fp-loop-badge-vk,
  .fp-repeat-btn.loop-chapter .fp-loop-badge-v,
  .fp-repeat-btn.loop-chapter .fp-loop-badge-vk,
  .fp-repeat-btn.loop-both .fp-loop-badge-v,
  .fp-repeat-btn.loop-both .fp-loop-badge-k{
    display:none;
  }
  .fp-count-reveal,
  .fp-chapter-count-reveal{
    display:flex;
    flex-direction:row;
    align-items:flex-end;
    gap:8px;
    flex:0 0 auto;
    overflow:hidden;
    max-width:200px;
    opacity:1;
    transition:max-width .28s ease, opacity .24s ease, margin .24s ease;
  }
  .fp-count-reveal.hidden,
  .fp-chapter-count-reveal.hidden{
    max-width:0;
    opacity:0;
    margin:0;
    pointer-events:none;
  }
  .fp-expanded{
    display:block;
    max-height:0;
    overflow:hidden;
    opacity:0;
    margin-top:0;
    padding-top:0;
    border-top:1px solid transparent;
    transform:translateY(10px);
    transition:max-height .32s cubic-bezier(.4,0,.2,1),
               opacity .24s ease,
               transform .32s cubic-bezier(.4,0,.2,1),
               margin-top .28s ease,
               padding-top .28s ease,
               border-color .28s ease;
  }
  .footer-player.fp-expanded-open .fp-expanded{
    --fp-expanded-h:285px;
    max-height:var(--fp-expanded-h);
    opacity:1;
    transform:translateY(0);
    margin-top:10px;
    padding-top:10px;
    border-top-color:var(--border);
    overflow:visible;
  }
  .footer-player.fp-expanded-open.fp-verse-extra .fp-expanded{
    --fp-expanded-h:390px;
  }
  .footer-player.fp-expanded-open.fp-chapter-extra:not(.fp-verse-extra) .fp-expanded{
    --fp-expanded-h:360px;
  }
  .footer-player.fp-expanded-open.fp-verse-extra.fp-chapter-extra .fp-expanded{
    --fp-expanded-h:460px;
  }
  .fp-advanced-panel{
    touch-action:pan-y;
  }
  .fp-advanced-panel .fp-seg button{
    touch-action:manipulation;
    cursor:pointer;
  }
  .fp-section{
    margin-bottom:12px;
  }
  .fp-label{
    font-weight:600;
    margin-bottom:8px;
    color:var(--ink);
  }
  .fp-toggle{
    display:flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
  }
  .fp-toggle input{
    cursor:pointer;
  }

  /* mobile-first adjustments */
  @media (max-width:600px){
    .fp-group{
      gap:2px;
    }
    .footer-player{
      padding-bottom:max(8px, env(safe-area-inset-bottom, 0px));
    }
    .fp-handle{
      min-height:20px;
      padding:6px 0 calc(4px + env(safe-area-inset-bottom, 0px));
    }
    .fp-handle-bar{
      width:32px;
      height:3px;
    }
    /* Narrower steppers so count, from & to fit one row on small screens
       (label-above-control stacking now lives in the base styles) */
    .fp-num-stepper button{
      flex-basis:32px;
      width:32px;
      min-width:32px;
      height:32px;
      min-height:32px;
    }
    .fp-num-stepper .fp-num-inp{
      width:40px;
      min-width:40px;
      height:32px;
      min-height:32px;
    }
    .footer-player.fp-expanded-open .fp-expanded{--fp-expanded-h:265px;}
    .footer-player.fp-expanded-open.fp-verse-extra .fp-expanded{--fp-expanded-h:370px;}
    .footer-player.fp-expanded-open.fp-chapter-extra:not(.fp-verse-extra) .fp-expanded{--fp-expanded-h:340px;}
    .footer-player.fp-expanded-open.fp-verse-extra.fp-chapter-extra .fp-expanded{--fp-expanded-h:445px;}
  }

  /* ---------- search match in translation ---------- */
  .word.search-match{
    text-decoration:underline;
    text-decoration-color:var(--accent);
    text-decoration-thickness:2px;
    text-underline-offset:2px;
  }