@import url("./site-shell.css?v=20261013-visual");
:root{--ink:#10231f;--ink-2:#18332d;--paper:#f6f8f3;--surface:#fff;--surface-2:#edf3ec;--line:#dbe7dd;--muted:#6c7e75;--brand:#0f766e;--brand-2:#16a085;--brand-soft:#e3f3ed;--gold:#b7812b;--gold-soft:#fbf3df;--shadow:0 16px 38px rgba(24,55,43,.09);--radius:18px;--player-h:126px}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{font-family:'Tajawal',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.7;padding-bottom:calc(var(--player-h) + env(safe-area-inset-bottom));min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit}::selection{background:var(--brand);color:#fff}.container{width:min(1180px,100% - 40px);margin-inline:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(246,248,243,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(219,231,221,.8)}.header-inner{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none}.brand-logo{width:40px;height:40px;filter:drop-shadow(0 6px 10px rgba(15,118,110,.2))}.brand-text{font-size:1.05rem;font-weight:800;white-space:nowrap}.brand-text b{color:var(--brand)}.main-nav{display:flex;gap:4px}.main-nav a{padding:8px 14px;color:var(--muted);text-decoration:none;border-radius:10px;transition:.2s}.main-nav a:hover{color:var(--brand);background:var(--brand-soft)}.header-tools{display:flex;align-items:center;gap:8px}.theme-toggle{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--gold);font-size:1.2rem}.nav-toggle{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink)}
.hero{position:relative;overflow:hidden;padding:82px 0 62px;background:linear-gradient(135deg,#f6f8f3 20%,#e9f3eb 100%)}.hero:before,.hero:after{content:'';position:absolute;border-radius:50%;pointer-events:none}.hero:before{width:420px;height:420px;top:-180px;inset-inline-start:-100px;background:radial-gradient(circle,rgba(22,160,133,.18),transparent 68%)}.hero:after{width:360px;height:360px;bottom:-240px;inset-inline-end:8%;background:radial-gradient(circle,rgba(183,129,43,.15),transparent 68%)}.hero-inner{position:relative;z-index:1;text-align:center}.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--gold);font-weight:700;font-size:.86rem;margin-bottom:14px}.eyebrow:before,.eyebrow:after{content:'';width:24px;height:1px;background:currentColor}.hero h1{font-family:'Amiri',serif;font-size:clamp(2.5rem,6vw,4.6rem);line-height:1.2;letter-spacing:-.02em;color:var(--ink);margin-bottom:14px}.hero-sub{max-width:660px;margin:0 auto 28px;color:var(--muted);font-size:1.05rem}.search-box{display:flex;align-items:center;gap:10px;width:min(690px,100%);margin:auto;background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:7px 9px 7px 17px;box-shadow:var(--shadow);transition:.2s}.search-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(15,118,110,.12)}.search-icon{width:20px;color:var(--brand);flex:none}.search-box input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ink);padding:11px 4px;font-size:1rem}.search-box input::placeholder{color:#9aa9a0}.search-clear{width:30px;height:30px;border:0;background:var(--surface-2);color:var(--muted);border-radius:50%;line-height:1}.hero-stats{display:flex;justify-content:center;gap:28px;margin-top:34px}.stat{display:flex;align-items:baseline;gap:6px}.stat b{font-size:1.5rem;color:var(--brand)}.stat span{color:var(--muted);font-size:.84rem}.stat-sep{height:28px;width:1px;background:var(--line)}
.resume-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:28px;padding:18px 22px;background:var(--gold-soft);border:1px solid #ecd39a;border-radius:var(--radius);color:var(--ink)}.resume-banner[hidden]{display:none}.resume-banner>div{display:flex;flex-direction:column}.resume-label{font-size:.72rem;color:var(--gold);font-weight:800}.resume-banner strong{font-family:'Amiri',serif;font-size:1.35rem}.resume-banner small{color:var(--muted);font-size:.78rem}.library{display:grid;grid-template-columns:290px 1fr;gap:28px;padding-top:42px}.filters-panel{height:max-content;position:sticky;top:92px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 5px 18px rgba(24,55,43,.04)}.filters-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.filters-head h2{font-size:1.1rem}.filters-reset{border:0;background:none;color:var(--brand);font-size:.8rem}.filter-group{margin-bottom:20px}.filter-label{display:block;font-size:.82rem;color:var(--muted);font-weight:700;margin-bottom:8px}.select,.reciter-search{width:100%;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--ink);padding:10px 12px;outline:0}.select:focus,.reciter-search:focus{border-color:var(--brand)}.reciter-search{margin-bottom:9px}.reciter-list{display:flex;flex-direction:column;gap:7px;max-height:410px;overflow:auto}.reciter-item{display:flex;align-items:center;gap:9px;width:100%;text-align:start;border:1px solid transparent;background:var(--paper);border-radius:12px;padding:9px;color:var(--ink);transition:.2s}.reciter-item:hover,.reciter-item.active{border-color:#9bd5c6;background:var(--brand-soft)}.reciter-avatar{width:34px;height:34px;display:grid;place-items:center;flex:none;border-radius:10px;background:var(--ink-2);color:#d8f1e8;font-family:'Amiri',serif;font-size:1.15rem}.reciter-item:nth-child(3n) .reciter-avatar{background:var(--gold);color:#fff}.reciter-body{min-width:0;display:flex;flex-direction:column}.reciter-body strong{font-size:.8rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.reciter-body small{font-size:.67rem;color:var(--muted)}.reciter-check{margin-inline-start:auto;color:var(--brand);opacity:0}.reciter-item.active .reciter-check{opacity:1}.muted-note{color:var(--muted);font-size:.82rem;padding:9px}.filters-shortcuts{border-top:1px solid var(--line);padding-top:16px}.favorites-toggle{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:11px;padding:9px;font-size:.82rem}.favorites-toggle svg{width:16px}.favorites-toggle:hover,.favorites-toggle.active{border-color:#e1b765;background:var(--gold-soft);color:var(--gold)}
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}.toolbar-info{color:var(--muted);font-size:.88rem}.toolbar-info b{color:var(--ink)}.toolbar-dot{color:var(--gold);padding:0 4px}.toolbar-actions{display:flex;align-items:center;gap:9px}.chip-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;border-radius:11px;background:var(--brand);color:white;padding:9px 14px;font-size:.8rem;font-weight:700}.chip-btn:hover{background:var(--ink-2)}.secondary-chip{background:var(--surface);border-color:var(--line);color:var(--brand)}.secondary-chip:hover{background:var(--brand-soft);color:var(--brand)}.chip-btn svg{width:15px}.select-sm{width:auto;min-width:145px;background:var(--surface);padding-block:9px}.surah-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:15px}.surah-card{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:17px;overflow:hidden;transition:.22s}.surah-card:before{content:'';position:absolute;inset:0 0 auto;height:4px;background:var(--brand);transform:scaleX(0);transform-origin:right;transition:.25s}.surah-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#b9d8cb}.surah-card:hover:before,.surah-card.playing:before{transform:scaleX(1)}.surah-card.playing{border-color:#80c5b1;background:linear-gradient(145deg,#fff,#f1faf5)}.surah-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px}.surah-kicker{font-size:.72rem;color:var(--gold);font-weight:800}.surah-number{position:absolute;top:13px;inset-inline-end:16px;font-size:.73rem;color:var(--muted);background:var(--surface-2);border-radius:8px;padding:3px 7px}.favorite-btn{width:29px;height:29px;border:0;background:transparent;color:#b5c1ba;display:grid;place-items:center}.favorite-btn svg{width:18px}.favorite-btn:hover,.favorite-btn.is-favorite{color:var(--gold)}.favorite-btn.is-favorite svg{fill:currentColor}.surah-card h3{font-family:'Amiri',serif;font-size:1.65rem;line-height:1.25;margin-bottom:3px}.surah-card p{font-size:.75rem;color:var(--muted);margin-bottom:15px}.surah-card p span{color:var(--gold);padding-inline:3px}.card-actions{display:flex;gap:7px}.btn-play,.btn-download{display:inline-flex;align-items:center;justify-content:center;gap:6px;border-radius:10px;transition:.2s}.btn-play{flex:1;border:0;background:var(--brand-soft);color:var(--brand);padding:9px;font-size:.78rem;font-weight:800}.btn-play:hover{background:var(--brand);color:#fff}.btn-play span:first-child{display:inline-flex;align-items:center;gap:5px}.btn-play svg,.btn-download svg{width:15px;height:15px}.btn-download{width:38px;border:1px solid var(--line);color:var(--muted);text-decoration:none}.btn-download:hover{border-color:var(--brand);color:var(--brand)}.equalizer{display:none;align-items:end;gap:2px;height:15px}.equalizer i{width:3px;background:currentColor;border-radius:2px;animation:eq .9s ease-in-out infinite}.equalizer i:nth-child(2){animation-delay:.2s}.equalizer i:nth-child(3){animation-delay:.4s}.surah-card.playing .btn-play>span:first-child{display:none}.surah-card.playing .equalizer{display:inline-flex}@keyframes eq{0%,100%{height:4px}50%{height:15px}}.empty-state{text-align:center;padding:70px 20px;color:var(--muted)}.empty-state svg{width:50px;margin-bottom:10px}.empty-state p{margin-bottom:15px}.about{margin-top:70px;background:var(--ink-2);color:#e8f4ee}.about-inner{max-width:790px;text-align:center;padding:52px 20px}.about h2{font-family:'Amiri',serif;font-size:2rem;color:#e0bc6d;margin-bottom:10px}.about p{color:#b6ccc1;font-size:.95rem}.site-footer{background:var(--ink);color:#a9bdb3;text-align:center;padding:24px 20px;font-size:.8rem}.footer-small{color:#668177;margin-top:4px}
.player{position:fixed;z-index:70;inset-inline:0;bottom:0;background:rgba(24,51,45,.96);color:#eefbf5;padding:12px 20px calc(12px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .35s ease;box-shadow:0 -10px 30px rgba(10,35,27,.16)}.player.show{transform:translateY(0)}.player-track,.player-bar{width:min(1180px,100%);margin-inline:auto}.player-track{display:flex;align-items:center;gap:13px}.player-thumb{width:45px;height:45px;display:grid;place-items:center;flex:none;border-radius:12px;background:#c9a254;color:var(--ink);font-family:'Amiri',serif;font-size:1.5rem}.player-meta{min-width:0;flex:1}.player-surah{font-weight:800;font-size:.94rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-reciter,.player-status{font-size:.72rem;color:#afc8bb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-actions{display:flex;gap:7px;align-items:center}.pbtn{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(224,244,235,.18);border-radius:50%;background:transparent;color:#eefbf5}.pbtn:hover{border-color:#8ad3bb;color:#8ad3bb}.pbtn svg{width:17px;height:17px}.pbtn-play{width:47px;height:47px;background:#e0b961;color:var(--ink);border-color:#e0b961}.pbtn-play:hover{color:var(--ink);background:#f1d082}.player-bar{display:flex;align-items:center;gap:9px;margin-top:8px}.ptime{font-size:.68rem;color:#a6beb2;min-width:32px;text-align:center;font-variant-numeric:tabular-nums}input[type=range]{flex:1;height:4px;border-radius:4px;appearance:none;background:linear-gradient(to left,#dcb65c var(--fill,0%),rgba(255,255,255,.18) var(--fill,0%));outline:0}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid #dcb65c}#volumeBar{flex:none;width:75px}.player-side{display:flex;align-items:center;gap:7px}
@media(max-width:900px){.library{grid-template-columns:1fr}.filters-panel{position:static}.reciter-list{display:grid;grid-template-columns:repeat(2,1fr);max-height:none}}@media(max-width:640px){.container{width:min(100% - 28px,1180px)}.header-inner{height:64px}.main-nav{position:fixed;top:64px;inset-inline:0;display:flex;flex-direction:column;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--line);transform:translateY(-150%);transition:.25s;z-index:49}.main-nav.open{transform:translateY(0)}.main-nav a{padding:11px 14px}.nav-toggle{display:grid;place-items:center}.hero{padding:55px 0 42px}.hero h1{font-size:2.7rem}.hero-sub{font-size:.94rem}.hero-stats{gap:15px}.stat b{font-size:1.25rem}.library{padding-top:26px}.reciter-list{grid-template-columns:1fr}.toolbar-actions{width:100%;justify-content:space-between}.surah-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.surah-card{padding:13px}.surah-card h3{font-size:1.38rem}.surah-card p{font-size:.68rem}.btn-download{display:none}.player{padding-inline:11px}.player-thumb{width:37px;height:37px}.player-side #volumeBar{display:none}.player-actions{gap:4px}.pbtn{width:34px;height:34px}.pbtn-play{width:43px;height:43px}}
@media(max-width:380px){.surah-grid{grid-template-columns:1fr}.hero h1{font-size:2.4rem}}

/* ميزات المرحلة الأولى */
:root{color-scheme:light}.dark{--ink:#e9f3ee;--ink-2:#112b25;--paper:#0d1c19;--surface:#152a24;--surface-2:#1d3a31;--line:#2d4a40;--muted:#a2b9ad;--brand-soft:#1d493d;--gold-soft:#3b311e;--shadow:0 16px 38px rgba(0,0,0,.2);color-scheme:dark}.dark .site-header{background:rgba(13,28,25,.88);border-color:var(--line)}.dark .hero{background:linear-gradient(135deg,#0d1c19 20%,#15352c 100%)}.dark .surah-card.playing{background:linear-gradient(145deg,#152a24,#1c4035)}.dark .search-box,.dark .select-sm{background:var(--surface)}.dark .about{background:#0a1714}.dark .theme-toggle{background:var(--surface)}
.modal-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;background:rgba(7,23,18,.62);backdrop-filter:blur(5px)}.modal-backdrop[hidden]{display:none}.playlist-modal{width:min(560px,100%);max-height:min(690px,90vh);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:24px;box-shadow:0 24px 80px rgba(0,0,0,.25)}.modal-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.modal-head .eyebrow{margin:0;font-size:.72rem}.modal-head h2{font-family:'Amiri',serif;font-size:2rem;line-height:1.1}.modal-close{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--muted);font-size:1.4rem}.playlist-form{display:flex;gap:8px;margin-bottom:20px}.playlist-form input{min-width:0;flex:1;border:1px solid var(--line);border-radius:11px;background:var(--paper);color:var(--ink);padding:10px 12px;outline:0}.playlist-list{display:flex;flex-direction:column;gap:9px}.playlist-empty{padding:24px;text-align:center;border:1px dashed var(--line);border-radius:14px;color:var(--muted);font-size:.85rem}.playlist-row{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}.playlist-row>div{min-width:0;flex:1;display:flex;flex-direction:column}.playlist-row strong{font-size:.9rem}.playlist-row small{color:var(--muted);font-size:.72rem}.playlist-row .pbtn{color:var(--brand);border-color:var(--line)}.playlist-row .delete-playlist{color:#b45b57}.playlist-add{width:38px;border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:10px;display:grid;place-items:center}.playlist-add:hover{border-color:var(--brand);color:var(--brand)}.playlist-add svg{width:16px}
@media(max-width:640px){.header-tools{gap:5px}.resume-banner{align-items:stretch;flex-direction:column}.resume-banner .chip-btn{align-self:flex-start}.toolbar-actions{flex-wrap:wrap}.secondary-chip{order:3;width:100%}.playlist-modal{padding:18px}.playlist-form{flex-direction:column}}
.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:18px}.section-heading h2{font-family:'Amiri',serif;font-size:2rem;line-height:1.1}.text-link{color:var(--brand);font-size:.82rem;text-decoration:none}.stats-panel{margin-top:58px;padding-bottom:8px}.stats-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stats-cards>div{padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:15px;display:flex;flex-direction:column}.stats-cards strong{font-size:1.8rem;color:var(--brand);line-height:1.1}.stats-cards span{font-size:.75rem;color:var(--muted);margin-top:5px}.trending-box{margin-top:20px;padding:18px 20px;background:var(--surface-2);border-radius:16px}.trending-box h3{font-family:'Amiri',serif;font-size:1.45rem;margin-bottom:8px}.trending-list{display:flex;gap:8px;flex-wrap:wrap}.trend-chip{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);font-size:.78rem;cursor:pointer}.trend-chip:hover{border-color:var(--brand);color:var(--brand)}.repeat-btn.active{background:#e0b961;color:var(--ink);border-color:#e0b961}.repeat-hint{display:block;color:#e0b961;font-size:.65rem;min-height:13px}.dark .stats-cards>div,.dark .trend-chip{background:var(--surface)}
@media(max-width:640px){.stats-cards{grid-template-columns:repeat(2,1fr)}.section-heading{align-items:flex-start;flex-direction:column}.section-heading h2{font-size:1.7rem}.repeat-hint{display:none}}
.install-toggle{border:1px solid var(--brand);background:var(--brand-soft);color:var(--brand);border-radius:10px;padding:7px 10px;font-size:.75rem;font-weight:700}.utility-panel{margin-top:20px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}.utility-panel h3{font-family:'Amiri',serif;font-size:1.35rem}.utility-panel p,.utility-note{display:block;color:var(--muted);font-size:.74rem}.utility-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.text-action{border:1px solid var(--line);background:transparent;color:var(--brand);border-radius:9px;padding:8px 11px;font-size:.74rem;cursor:pointer}.text-action:hover{background:var(--brand-soft)}.reminder-control{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.74rem}.reminder-control input{border:1px solid var(--line);border-radius:8px;background:var(--paper);color:var(--ink);padding:6px}.utility-note{width:100%;margin-top:2px}
@media(max-width:640px){.utility-panel{align-items:stretch;flex-direction:column}.utility-actions{align-items:stretch;flex-direction:column}.reminder-control{justify-content:space-between}.install-toggle{font-size:.68rem;padding:6px 8px}}

/* Listening controls: compact on mobile; the queue opens above the fixed player. */
.listening-tools{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:5px 12px;color:inherit;font-size:.75rem}
.listening-tools label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.listening-tools select,.listening-tools button,.queue-heading button,.queue-item button{font:inherit;border:1px solid currentColor;border-radius:9px;padding:4px 7px;background:transparent;color:inherit}
.listening-tools select option{color:#10231f;background:#fff}
.queue-panel[hidden]{display:none}
.queue-panel{position:absolute;inset-inline:12px;bottom:100%;max-height:min(42vh,320px);overflow:auto;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px 14px 0 0;box-shadow:var(--shadow);padding:13px;z-index:2}
.queue-heading,.queue-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0}
.queue-item+.queue-item{border-top:1px solid var(--line)}
.queue-item span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.queue-item button,.queue-heading button{flex:none;border-color:var(--line)}
@media(max-width:640px){.listening-tools{gap:5px;padding:4px 6px;font-size:.69rem}.listening-tools select,.listening-tools button{padding:3px 5px}.queue-panel{inset-inline:5px}}

/* Unified mobile filtering and consistent touch targets */
.mobile-filter-toolbar{display:none}
#moreRecitersBtn{margin-top:10px;min-height:40px}
#moreRecitersBtn[hidden]{display:none}
.reciter-item,.chip-btn,.nav-toggle,.pbtn{touch-action:manipulation}
@media(max-width:780px){
 .mobile-filter-toolbar{display:block;padding-top:16px}
 .mobile-filter-toolbar button{display:block;width:100%;min-height:44px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--brand);font-weight:700}
 .library{display:flex;flex-direction:column;gap:14px;padding-top:15px}
 .library .filters-panel{display:none;position:static;max-height:none;width:100%}
 .library .filters-panel.mobile-open{display:block}
 .library .content{min-width:0;width:100%}
 .toolbar-actions{max-width:100%}
 .surah-grid{min-width:0}
 .site-header .header-inner{gap:8px}
 .header-tools{flex-shrink:0}
 .main-nav.open{max-height:min(70vh,480px);overflow-y:auto}
}
@media(max-width:430px){
 .brand-text{font-size:.86rem}
 .toolbar-actions>*{max-width:100%}
 .player{max-width:100vw}
 .player-bar{min-width:0}
 .player-side{min-width:0}
}


/* Mobile audio player: readable track information and stable control rows. */
@media (max-width: 640px) {
  .player {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
  }
  .player-track {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    min-width: 0;
  }
  .player-thumb { display: none; }
  .player-meta {
    flex: none;
    width: 100%;
    min-width: 0;
    text-align: center;
  }
  .player-surah {
    font-size: 1.06rem;
    line-height: 1.45;
    font-weight: 800;
    white-space: normal;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }
  .player-reciter {
    font-size: .85rem;
    line-height: 1.45;
    margin-top: 1px;
    color: #e5d2a4;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .player-status { font-size: .71rem; margin-top: 2px; }
  .player-actions {
    width: 100%;
    justify-content: center;
    gap: clamp(9px, 3vw, 20px);
  }
  .player-actions .pbtn { flex: none; width: 40px; height: 40px; }
  .player-actions .pbtn-play { width: 48px; height: 48px; }
  .player-bar { width: 100%; min-width: 0; gap: 7px; margin-top: 9px; }
  .player-bar #seekBar { min-width: 0; }
  .listening-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
    justify-content: stretch;
    gap: 7px;
    padding: 8px 0 0;
    font-size: .73rem;
  }
  .listening-tools label {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    text-align: center;
    white-space: nowrap;
  }
  .listening-tools select,
  .listening-tools > button {
    box-sizing: border-box;
    min-width: 0;
    width: 100%;
    height: 36px;
    padding: 5px 4px;
    border-radius: 9px;
    text-align: center;
    font-size: .74rem;
  }
  .listening-tools > button { align-self: end; white-space: nowrap; }
}
@media (max-width: 360px) {
  .player { padding-inline: 8px; }
  .player-actions { gap: 7px; }
  .player-actions .pbtn { width: 36px; height: 36px; }
  .player-actions .pbtn-play { width: 44px; height: 44px; }
  .listening-tools { gap: 4px; font-size: .67rem; }
  .listening-tools select,
  .listening-tools > button { font-size: .68rem; padding-inline: 2px; }
}

/* Consistent library controls: play, view, sort, share. */
.toolbar-actions{display:grid;grid-template-columns:repeat(4,minmax(0,max-content));align-items:stretch;gap:9px}
.toolbar-actions > *{box-sizing:border-box;margin:0;min-width:0;min-height:42px}
.toolbar-actions .chip-btn{justify-content:center;white-space:nowrap}
.toolbar-actions .select-sm{width:100%;min-width:0;max-width:none}
@media(max-width:640px){
 .toolbar-actions{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .toolbar-actions > *{width:100%;max-width:none;min-width:0;min-height:44px;order:0}
 .toolbar-actions #playAllBtn{order:1}
 .toolbar-actions #viewSelect{order:2}
 .toolbar-actions #sortSelect{order:3}
 .toolbar-actions #sharePageBtn{order:4;width:100%}
 .toolbar-actions .chip-btn{padding-inline:8px;font-size:.78rem}
 .toolbar-actions .select-sm{padding-inline:8px;font-size:.78rem}
}
@media(max-width:350px){.toolbar-actions{gap:6px}.toolbar-actions .chip-btn,.toolbar-actions .select-sm{font-size:.73rem}}
/* Keep the mobile navigation out of the tab sequence when collapsed. */
@media(max-width:640px){.main-nav:not(.open){visibility:hidden;pointer-events:none}.main-nav.open{visibility:visible;pointer-events:auto}}


/* Compact desktop layout: preserve the existing mobile and tablet design. */
@media (min-width: 1024px) {
  .header-inner { height: 60px; gap: 14px; }
  .brand-logo { width: 36px; height: 36px; }
  .brand { gap: 9px; }
  .brand-text { font-size: 1rem; }
  .main-nav { gap: 2px; }
  .main-nav a { padding: 6px 10px; border-radius: 9px; }
  .header-tools { gap: 6px; }
  .theme-toggle { width: 36px; height: 36px; }

  .hero { padding-block: 38px 32px; }
  .eyebrow { margin-bottom: 7px; }
  .hero h1 { font-size: clamp(2.35rem, 4vw, 3.45rem); margin-bottom: 8px; }
  .hero-sub { margin-bottom: 17px; font-size: 1rem; }
  .search-box { padding-block: 4px; }
  .search-box input { padding-block: 8px; }
  .hero-stats { margin-top: 17px; gap: 22px; }
  .stat b { font-size: 1.35rem; }

  .library { padding-top: 24px; gap: 22px; }
  .filters-panel { top: 74px; padding: 16px; }
  .filters-head { margin-bottom: 12px; }
  .filter-group { margin-bottom: 14px; }
  .filter-label { margin-bottom: 5px; }
  .reciter-list { max-height: 330px; gap: 5px; }
  .reciter-item { padding: 7px; }
  .filters-shortcuts { padding-top: 12px; }
  .resume-banner { margin-top: 16px; padding: 12px 18px; }
  .section-heading { margin-bottom: 12px; }
  .stats-panel { margin-top: 34px; }
  .stats-cards > div { padding: 14px; }
  .trending-box { margin-top: 14px; padding: 14px 18px; }
}


/* Unified prayer and sharing footer */
.duaa-footer{padding:32px 20px calc(32px + env(safe-area-inset-bottom));background:var(--ink-2,#18332d);color:#f4f7f1;text-align:center;line-height:1.85}
.duaa-footer-inner{max-width:850px;margin-inline:auto}
.duaa-heading{font-family:'Amiri',serif;font-size:clamp(1.35rem,2vw,1.75rem);font-weight:700;color:#e0b961;margin-bottom:12px}
.duaa-text{font-family:'Amiri',serif;font-size:clamp(1.08rem,1.7vw,1.3rem);line-height:2.05;margin:0 auto 12px;max-width:780px}
.duaa-share{display:flex;flex-direction:column;gap:9px;align-items:center;margin:18px auto}
.duaa-share-button{max-width:100%;padding:10px 22px;border:1px solid #e0b961;background:#e0b961;color:#18332d;border-radius:999px;font:700 1rem 'Tajawal',sans-serif;min-height:44px;transition:filter .2s,transform .2s}
.duaa-share-button:hover{filter:brightness(1.08);transform:translateY(-1px)}
.duaa-share-button:focus-visible{outline:3px solid #fff;outline-offset:3px}
.duaa-share-status{font-size:.9rem;color:#f5dfad;overflow-wrap:anywhere}
.duaa-credit{font-size:.84rem;opacity:.75;border-top:1px solid rgba(255,255,255,.18);padding-top:12px;margin-top:18px}
@media(max-width:480px){.duaa-footer{padding-inline:16px}.duaa-share-button{width:100%}}

/* Keep the footer at the real end of the document; reserve player space inside it,
   not as a blank strip below it. */
body{padding-bottom:0;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
body > .duaa-footer{flex-shrink:0;margin-bottom:0}
body:has(> .player) > .duaa-footer{
  padding-bottom:calc(32px + var(--player-h,126px) + env(safe-area-inset-bottom));
}

/* Compact content-width mobile navigation */
.main-nav .nav-icon{display:none}
@media(max-width:640px){
  .site-header .main-nav{
    position:absolute;
    top:100%;
    right:0;
    left:auto;
    inset-inline:auto;
    width:max-content;
    max-width:calc(100vw - 24px);
    height:auto;
    max-height:min(75dvh,480px);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:3px;
    padding:9px;
    border:1px solid var(--line);
    border-radius:0 0 0 14px;
    box-shadow:-8px 14px 28px rgba(0,0,0,.13);
    background:var(--surface);
    transform:translateX(calc(100% + 15px));
    opacity:0;
    transition:transform .2s ease,opacity .2s ease,visibility .2s;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    z-index:90;
    visibility:hidden;
    pointer-events:none;
  }
  .site-header .main-nav.open{
    transform:translateX(0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    max-height:min(75dvh,480px);
  }
  .site-header .main-nav a{
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    min-height:42px;
    padding:7px 10px;
    white-space:nowrap;
    text-align:right;
    color:var(--ink);
    border-radius:9px;
    font-weight:700;
  }
  .site-header .main-nav a:hover,
  .site-header .main-nav a:focus-visible{background:var(--brand-soft);color:var(--brand)}
  .site-header .main-nav .nav-icon{
    width:24px;
    height:24px;
    flex:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:7px;
    background:var(--brand-soft);
    color:var(--brand);
    font:14px/1 system-ui,sans-serif;
  }
}
@media(prefers-reduced-motion:reduce){
  .site-header .main-nav{transition:none}
}


/* Unified interactive controls and navigation actions */
:where(button, a, select, input):focus-visible{outline:3px solid var(--brand-2);outline-offset:3px}
:where(button, .chip-btn, .text-action, .favorites-toggle, .nav-back){-webkit-tap-highlight-color:transparent}
:where(button, .chip-btn, .text-action, .favorites-toggle):disabled{opacity:.55;cursor:not-allowed;filter:none;transform:none}
.site-header .header-inner > .nav-back,
.site-header .header-inner > a.back-link,
.site-header .header-inner > a[href="index.html"]:not(.brand){
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:42px;padding:8px 15px;border:1px solid var(--line);
  border-radius:12px;background:var(--surface);color:var(--brand);
  text-decoration:none;font-weight:800;font-size:.88rem;line-height:1.3;
  box-shadow:0 3px 10px rgba(16,35,31,.05);
  transition:background .2s,border-color .2s,box-shadow .2s,transform .2s;
}
.site-header .header-inner > .nav-back:hover,
.site-header .header-inner > a.back-link:hover,
.site-header .header-inner > a[href="index.html"]:not(.brand):hover{
  border-color:var(--brand);background:var(--brand-soft);
  box-shadow:0 6px 16px rgba(15,118,110,.1);transform:translateY(-1px);
}
:where(.chip-btn,.text-action,.favorites-toggle,.filters-reset,.directory-nav a,.review-actions button){
  transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s;
}
:where(.chip-btn,.text-action,.favorites-toggle,.review-actions button){min-height:42px}
.chip-btn{box-shadow:0 3px 10px rgba(15,118,110,.09)}
.chip-btn:hover:not(:disabled){box-shadow:0 6px 15px rgba(15,118,110,.16);transform:translateY(-1px)}
.text-action:hover:not(:disabled),.favorites-toggle:hover:not(:disabled){border-color:var(--brand);transform:translateY(-1px)}
body .directory-nav a{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:42px;padding:8px 15px;color:var(--brand);
  font-weight:700;text-decoration:none;
}
body .directory-nav a:hover,body .directory-nav a:focus-visible{
  background:var(--brand-soft);border-color:var(--brand);
}
body .directory-nav a[aria-current="page"]{background:var(--brand-soft);border-color:var(--brand);color:var(--ink-2)}
body .review-actions button{
  border:1px solid var(--line);border-radius:11px;
  background:var(--surface);color:var(--brand);padding:9px 14px;font-weight:700;
}
body .review-actions button:hover:not(:disabled){background:var(--brand-soft);border-color:var(--brand)}
@media(max-width:640px){
 .site-header .header-inner > .nav-back,.site-header .header-inner > a.back-link,
 .site-header .header-inner > a[href="index.html"]:not(.brand){font-size:.78rem;padding:7px 10px;min-height:40px;white-space:nowrap}
 body .directory-nav{gap:7px}
 body .directory-nav a{min-height:42px;padding:8px 11px}
}
@media(prefers-reduced-motion:reduce){
 :where(button,a,.chip-btn,.text-action,.favorites-toggle){transition:none!important}
}


/* Explore reciters: compact branded CTA beside listening statistics */
.explore-readers-btn{
 display:inline-flex;align-items:center;justify-content:center;gap:9px;
 min-height:44px;padding:8px 15px;border:1px solid var(--brand);
 border-radius:12px;background:var(--brand);color:#fff;
 font-size:.87rem;font-weight:800;line-height:1.3;text-decoration:none;
 box-shadow:0 5px 14px rgba(15,118,110,.14);
 transition:background-color .2s,transform .2s,box-shadow .2s;
 white-space:nowrap;
}
.explore-readers-btn:hover{background:var(--ink-2);color:#fff;box-shadow:0 8px 19px rgba(15,118,110,.2);transform:translateY(-1px)}
.explore-readers-btn .explore-readers-icon{font:19px/1 system-ui,sans-serif;color:#e0b961}
.explore-readers-btn .explore-readers-arrow{font-size:1.1rem;transition:transform .2s}
.explore-readers-btn:hover .explore-readers-arrow{transform:translateX(-3px)}
@media(max-width:640px){.stats-panel .section-heading{align-items:center;flex-wrap:wrap;gap:12px}.explore-readers-btn{padding:9px 12px;font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.explore-readers-btn,.explore-readers-btn .explore-readers-arrow{transition:none}}


/* Button refinement: clear hierarchy, consistent touch targets, no layout shifts */
:root{--control-radius:12px;--control-shadow:0 3px 10px rgba(16,55,44,.075)}
:where(.chip-btn,.text-action,.favorites-toggle,.filters-reset,.install-toggle,.directory-nav a,.duaa-share-button,.explore-readers-btn){
  font-family:'Tajawal',system-ui,sans-serif;
  letter-spacing:0;
  touch-action:manipulation;
}
:where(.chip-btn,.text-action,.favorites-toggle,.install-toggle,.directory-nav a){
  border-radius:var(--control-radius);
  min-height:44px;
  font-weight:700;
}
:where(.chip-btn,.text-action,.favorites-toggle,.install-toggle,.directory-nav a):focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
}
:where(.chip-btn,.text-action,.favorites-toggle,.install-toggle,.directory-nav a):active:not(:disabled){
  transform:translateY(0);
  box-shadow:none;
}
.chip-btn:not(.secondary-chip){border-color:var(--brand);background:var(--brand);color:#fff}
.chip-btn:not(.secondary-chip):hover:not(:disabled){background:var(--ink-2);border-color:var(--ink-2)}
.secondary-chip,.text-action{background:var(--surface);border-color:var(--line);color:var(--brand)}
.secondary-chip:hover:not(:disabled),.text-action:hover:not(:disabled){background:var(--brand-soft);border-color:var(--brand);color:var(--ink-2)}
.filters-reset{padding:7px 9px;border-radius:9px}
.filters-reset:hover{background:var(--brand-soft)}
/* Main readers/narrations CTA */
.stats-panel .explore-readers-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:max-content;max-width:100%;min-height:46px;
  padding:10px 17px;
  border:1px solid var(--brand);
  border-radius:13px;
  background:linear-gradient(125deg,var(--ink-2),var(--brand));
  color:#fff;
  font-size:.9rem;font-weight:800;line-height:1.4;
  box-shadow:0 5px 14px rgba(16,55,44,.15);
  text-decoration:none;
}
.stats-panel .explore-readers-btn .explore-readers-icon{
  display:inline-grid;place-items:center;flex:none;
  width:28px;height:28px;border-radius:9px;
  background:rgba(255,255,255,.14);color:#f1cf83;font-size:17px;
}
.stats-panel .explore-readers-btn .explore-readers-arrow{font-size:1.13rem;line-height:1}
.stats-panel .explore-readers-btn:hover{
  background:linear-gradient(125deg,#102b25,#0e665c);
  color:#fff;border-color:var(--brand);
  box-shadow:0 8px 18px rgba(16,55,44,.2);
}
.stats-panel .explore-readers-btn:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(max-width:640px){
 .stats-panel .section-heading{align-items:center;gap:10px}
 .stats-panel .explore-readers-btn{min-height:44px;padding:8px 12px;font-size:.81rem;gap:8px}
 .stats-panel .explore-readers-btn .explore-readers-icon{width:25px;height:25px}
 .toolbar-actions .chip-btn{white-space:normal;text-align:center;line-height:1.35}
 .utility-actions .text-action{padding-inline:12px}
}
@media(prefers-reduced-motion:reduce){
 .stats-panel .explore-readers-btn,
 .stats-panel .explore-readers-btn *{transition:none!important;transform:none!important}
}

/* Audio mushaf catalogue: surah name, number and play affordance. */
.surah-grid>a.surah-card[href*="mushaf.html?"]{position:relative;display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;min-height:88px;padding:15px 52px 15px 16px;transition:border-color .2s,box-shadow .2s,transform .2s}
.surah-grid>a.surah-card[href*="mushaf.html?"] h2{font-size:0!important;line-height:1.4}
.surah-grid>a.surah-card[href*="mushaf.html?"] h2:after{font-size:1rem;font-weight:800;color:var(--ink)}
.surah-grid>a.surah-card[href*="mushaf.html?"] p{font-size:.79rem;color:var(--muted);margin:3px 0 0}
.surah-grid>a.surah-card[href*="mushaf.html?"]:before{content:"▶";position:absolute;right:12px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:31px;height:31px;border-radius:50%;background:var(--brand-soft);color:var(--brand);font-size:12px}
.surah-grid>a.surah-card[href*="mushaf.html?"]:hover{border-color:var(--brand);box-shadow:0 7px 18px rgba(15,118,110,.12);transform:translateY(-2px)}
.surah-grid>a.surah-card[href*="mushaf.html?"]:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
@media(max-width:520px){.surah-grid>a.surah-card[href*="mushaf.html?"]{min-height:76px;padding:12px 48px 12px 10px}}
.surah-grid>a.surah-card[href$="surah=1"] h2:after{content:"الفاتحة — 1"}
.surah-grid>a.surah-card[href$="surah=2"] h2:after{content:"البقرة — 2"}
.surah-grid>a.surah-card[href$="surah=3"] h2:after{content:"آل عمران — 3"}
.surah-grid>a.surah-card[href$="surah=4"] h2:after{content:"النساء — 4"}
.surah-grid>a.surah-card[href$="surah=5"] h2:after{content:"المائدة — 5"}
.surah-grid>a.surah-card[href$="surah=6"] h2:after{content:"الأنعام — 6"}
.surah-grid>a.surah-card[href$="surah=7"] h2:after{content:"الأعراف — 7"}
.surah-grid>a.surah-card[href$="surah=8"] h2:after{content:"الأنفال — 8"}
.surah-grid>a.surah-card[href$="surah=9"] h2:after{content:"التوبة — 9"}
.surah-grid>a.surah-card[href$="surah=10"] h2:after{content:"يونس — 10"}
.surah-grid>a.surah-card[href$="surah=11"] h2:after{content:"هود — 11"}
.surah-grid>a.surah-card[href$="surah=12"] h2:after{content:"يوسف — 12"}
.surah-grid>a.surah-card[href$="surah=13"] h2:after{content:"الرعد — 13"}
.surah-grid>a.surah-card[href$="surah=14"] h2:after{content:"إبراهيم — 14"}
.surah-grid>a.surah-card[href$="surah=15"] h2:after{content:"الحجر — 15"}
.surah-grid>a.surah-card[href$="surah=16"] h2:after{content:"النحل — 16"}
.surah-grid>a.surah-card[href$="surah=17"] h2:after{content:"الإسراء — 17"}
.surah-grid>a.surah-card[href$="surah=18"] h2:after{content:"الكهف — 18"}
.surah-grid>a.surah-card[href$="surah=19"] h2:after{content:"مريم — 19"}
.surah-grid>a.surah-card[href$="surah=20"] h2:after{content:"طه — 20"}
.surah-grid>a.surah-card[href$="surah=21"] h2:after{content:"الأنبياء — 21"}
.surah-grid>a.surah-card[href$="surah=22"] h2:after{content:"الحج — 22"}
.surah-grid>a.surah-card[href$="surah=23"] h2:after{content:"المؤمنون — 23"}
.surah-grid>a.surah-card[href$="surah=24"] h2:after{content:"النور — 24"}
.surah-grid>a.surah-card[href$="surah=25"] h2:after{content:"الفرقان — 25"}
.surah-grid>a.surah-card[href$="surah=26"] h2:after{content:"الشعراء — 26"}
.surah-grid>a.surah-card[href$="surah=27"] h2:after{content:"النمل — 27"}
.surah-grid>a.surah-card[href$="surah=28"] h2:after{content:"القصص — 28"}
.surah-grid>a.surah-card[href$="surah=29"] h2:after{content:"العنكبوت — 29"}
.surah-grid>a.surah-card[href$="surah=30"] h2:after{content:"الروم — 30"}
.surah-grid>a.surah-card[href$="surah=31"] h2:after{content:"لقمان — 31"}
.surah-grid>a.surah-card[href$="surah=32"] h2:after{content:"السجدة — 32"}
.surah-grid>a.surah-card[href$="surah=33"] h2:after{content:"الأحزاب — 33"}
.surah-grid>a.surah-card[href$="surah=34"] h2:after{content:"سبأ — 34"}
.surah-grid>a.surah-card[href$="surah=35"] h2:after{content:"فاطر — 35"}
.surah-grid>a.surah-card[href$="surah=36"] h2:after{content:"يس — 36"}
.surah-grid>a.surah-card[href$="surah=37"] h2:after{content:"الصافات — 37"}
.surah-grid>a.surah-card[href$="surah=38"] h2:after{content:"ص — 38"}
.surah-grid>a.surah-card[href$="surah=39"] h2:after{content:"الزمر — 39"}
.surah-grid>a.surah-card[href$="surah=40"] h2:after{content:"غافر — 40"}
.surah-grid>a.surah-card[href$="surah=41"] h2:after{content:"فصلت — 41"}
.surah-grid>a.surah-card[href$="surah=42"] h2:after{content:"الشورى — 42"}
.surah-grid>a.surah-card[href$="surah=43"] h2:after{content:"الزخرف — 43"}
.surah-grid>a.surah-card[href$="surah=44"] h2:after{content:"الدخان — 44"}
.surah-grid>a.surah-card[href$="surah=45"] h2:after{content:"الجاثية — 45"}
.surah-grid>a.surah-card[href$="surah=46"] h2:after{content:"الأحقاف — 46"}
.surah-grid>a.surah-card[href$="surah=47"] h2:after{content:"محمد — 47"}
.surah-grid>a.surah-card[href$="surah=48"] h2:after{content:"الفتح — 48"}
.surah-grid>a.surah-card[href$="surah=49"] h2:after{content:"الحجرات — 49"}
.surah-grid>a.surah-card[href$="surah=50"] h2:after{content:"ق — 50"}
.surah-grid>a.surah-card[href$="surah=51"] h2:after{content:"الذاريات — 51"}
.surah-grid>a.surah-card[href$="surah=52"] h2:after{content:"الطور — 52"}
.surah-grid>a.surah-card[href$="surah=53"] h2:after{content:"النجم — 53"}
.surah-grid>a.surah-card[href$="surah=54"] h2:after{content:"القمر — 54"}
.surah-grid>a.surah-card[href$="surah=55"] h2:after{content:"الرحمن — 55"}
.surah-grid>a.surah-card[href$="surah=56"] h2:after{content:"الواقعة — 56"}
.surah-grid>a.surah-card[href$="surah=57"] h2:after{content:"الحديد — 57"}
.surah-grid>a.surah-card[href$="surah=58"] h2:after{content:"المجادلة — 58"}
.surah-grid>a.surah-card[href$="surah=59"] h2:after{content:"الحشر — 59"}
.surah-grid>a.surah-card[href$="surah=60"] h2:after{content:"الممتحنة — 60"}
.surah-grid>a.surah-card[href$="surah=61"] h2:after{content:"الصف — 61"}
.surah-grid>a.surah-card[href$="surah=62"] h2:after{content:"الجمعة — 62"}
.surah-grid>a.surah-card[href$="surah=63"] h2:after{content:"المنافقون — 63"}
.surah-grid>a.surah-card[href$="surah=64"] h2:after{content:"التغابن — 64"}
.surah-grid>a.surah-card[href$="surah=65"] h2:after{content:"الطلاق — 65"}
.surah-grid>a.surah-card[href$="surah=66"] h2:after{content:"التحريم — 66"}
.surah-grid>a.surah-card[href$="surah=67"] h2:after{content:"الملك — 67"}
.surah-grid>a.surah-card[href$="surah=68"] h2:after{content:"القلم — 68"}
.surah-grid>a.surah-card[href$="surah=69"] h2:after{content:"الحاقة — 69"}
.surah-grid>a.surah-card[href$="surah=70"] h2:after{content:"المعارج — 70"}
.surah-grid>a.surah-card[href$="surah=71"] h2:after{content:"نوح — 71"}
.surah-grid>a.surah-card[href$="surah=72"] h2:after{content:"الجن — 72"}
.surah-grid>a.surah-card[href$="surah=73"] h2:after{content:"المزمل — 73"}
.surah-grid>a.surah-card[href$="surah=74"] h2:after{content:"المدثر — 74"}
.surah-grid>a.surah-card[href$="surah=75"] h2:after{content:"القيامة — 75"}
.surah-grid>a.surah-card[href$="surah=76"] h2:after{content:"الإنسان — 76"}
.surah-grid>a.surah-card[href$="surah=77"] h2:after{content:"المرسلات — 77"}
.surah-grid>a.surah-card[href$="surah=78"] h2:after{content:"النبأ — 78"}
.surah-grid>a.surah-card[href$="surah=79"] h2:after{content:"النازعات — 79"}
.surah-grid>a.surah-card[href$="surah=80"] h2:after{content:"عبس — 80"}
.surah-grid>a.surah-card[href$="surah=81"] h2:after{content:"التكوير — 81"}
.surah-grid>a.surah-card[href$="surah=82"] h2:after{content:"الانفطار — 82"}
.surah-grid>a.surah-card[href$="surah=83"] h2:after{content:"المطففين — 83"}
.surah-grid>a.surah-card[href$="surah=84"] h2:after{content:"الانشقاق — 84"}
.surah-grid>a.surah-card[href$="surah=85"] h2:after{content:"البروج — 85"}
.surah-grid>a.surah-card[href$="surah=86"] h2:after{content:"الطارق — 86"}
.surah-grid>a.surah-card[href$="surah=87"] h2:after{content:"الأعلى — 87"}
.surah-grid>a.surah-card[href$="surah=88"] h2:after{content:"الغاشية — 88"}
.surah-grid>a.surah-card[href$="surah=89"] h2:after{content:"الفجر — 89"}
.surah-grid>a.surah-card[href$="surah=90"] h2:after{content:"البلد — 90"}
.surah-grid>a.surah-card[href$="surah=91"] h2:after{content:"الشمس — 91"}
.surah-grid>a.surah-card[href$="surah=92"] h2:after{content:"الليل — 92"}
.surah-grid>a.surah-card[href$="surah=93"] h2:after{content:"الضحى — 93"}
.surah-grid>a.surah-card[href$="surah=94"] h2:after{content:"الشرح — 94"}
.surah-grid>a.surah-card[href$="surah=95"] h2:after{content:"التين — 95"}
.surah-grid>a.surah-card[href$="surah=96"] h2:after{content:"العلق — 96"}
.surah-grid>a.surah-card[href$="surah=97"] h2:after{content:"القدر — 97"}
.surah-grid>a.surah-card[href$="surah=98"] h2:after{content:"البينة — 98"}
.surah-grid>a.surah-card[href$="surah=99"] h2:after{content:"الزلزلة — 99"}
.surah-grid>a.surah-card[href$="surah=100"] h2:after{content:"العاديات — 100"}
.surah-grid>a.surah-card[href$="surah=101"] h2:after{content:"القارعة — 101"}
.surah-grid>a.surah-card[href$="surah=102"] h2:after{content:"التكاثر — 102"}
.surah-grid>a.surah-card[href$="surah=103"] h2:after{content:"العصر — 103"}
.surah-grid>a.surah-card[href$="surah=104"] h2:after{content:"الهمزة — 104"}
.surah-grid>a.surah-card[href$="surah=105"] h2:after{content:"الفيل — 105"}
.surah-grid>a.surah-card[href$="surah=106"] h2:after{content:"قريش — 106"}
.surah-grid>a.surah-card[href$="surah=107"] h2:after{content:"الماعون — 107"}
.surah-grid>a.surah-card[href$="surah=108"] h2:after{content:"الكوثر — 108"}
.surah-grid>a.surah-card[href$="surah=109"] h2:after{content:"الكافرون — 109"}
.surah-grid>a.surah-card[href$="surah=110"] h2:after{content:"النصر — 110"}
.surah-grid>a.surah-card[href$="surah=111"] h2:after{content:"المسد — 111"}
.surah-grid>a.surah-card[href$="surah=112"] h2:after{content:"الإخلاص — 112"}
.surah-grid>a.surah-card[href$="surah=113"] h2:after{content:"الفلق — 113"}
.surah-grid>a.surah-card[href$="surah=114"] h2:after{content:"الناس — 114"}

/* Unified catalogue/mushafs navigation and breadcrumbs. */
body:has(.catalog-mushaf-nav){} /* Keep selector reserved for catalogue-specific extensions. */
.site-header[data-catalog-nav-ready="1"] .header-inner{min-height:72px;height:auto;position:relative}
.site-header[data-catalog-nav-ready="1"] .brand{flex-shrink:0;gap:8px}
.site-header[data-catalog-nav-ready="1"] .brand-mark{display:grid;place-items:center;width:36px;height:36px;background:var(--ink-2);border-radius:10px;color:#e0b961;font-size:1.4rem}
.site-header[data-catalog-nav-ready="1"] .brand-text{font-size:1rem}
.site-header[data-catalog-nav-ready="1"] .main-nav{display:flex;gap:2px;align-items:center;flex-wrap:wrap;justify-content:center}
.site-header[data-catalog-nav-ready="1"] .main-nav a{display:inline-flex;gap:5px;align-items:center;padding:7px 9px;font-size:.78rem;font-weight:700;white-space:nowrap}
.site-header[data-catalog-nav-ready="1"] .main-nav a[aria-current="page"]{background:var(--brand-soft);color:var(--brand)}
.site-header[data-catalog-nav-ready="1"] .nav-icon{display:inline-flex;align-items:center;justify-content:center;min-width:16px}
.qmp3-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-height:48px;margin:14px auto 18px;padding:10px 16px;border:1px solid #d9e5de;border-radius:13px;background:#f6faf7;color:#365747;font-family:Tajawal,Arial,sans-serif;font-size:.9rem;line-height:1.6;direction:rtl;max-width:min(1180px,calc(100% - 32px));box-sizing:border-box}
.qmp3-breadcrumb a{color:#225b45;text-decoration:none;font-weight:700;min-height:30px;display:inline-flex;align-items:center}
.qmp3-breadcrumb a:hover{text-decoration:underline}.qmp3-breadcrumb a:focus-visible{outline:2px solid #c2a66b;outline-offset:3px;border-radius:3px}
.qmp3-breadcrumb .bc-separator{color:#879b8e;user-select:none}.qmp3-breadcrumb [aria-current=page]{font-weight:700;color:#21382f;overflow-wrap:anywhere}
@media(max-width:1100px){.site-header[data-catalog-nav-ready="1"] .header-inner{height:70px;min-height:70px;flex-wrap:nowrap}.site-header[data-catalog-nav-ready="1"] .nav-toggle{display:grid;place-items:center;flex:none}.site-header[data-catalog-nav-ready="1"] .main-nav{display:none;position:absolute;top:calc(100% + 6px);right:0;left:0;z-index:60;max-height:min(72vh,540px);overflow:auto;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.site-header[data-catalog-nav-ready="1"] .main-nav.catalog-nav-open{display:grid}.site-header[data-catalog-nav-ready="1"] .main-nav a{min-height:44px;padding:9px;font-size:.88rem;white-space:normal}}
@media(max-width:600px){.site-header[data-catalog-nav-ready="1"] .header-inner{gap:8px}.site-header[data-catalog-nav-ready="1"] .brand-text{font-size:.85rem}.site-header[data-catalog-nav-ready="1"] .main-nav{grid-template-columns:1fr 1fr}.qmp3-breadcrumb{margin:10px 12px 14px;max-width:calc(100% - 24px);gap:6px;padding:9px 12px;font-size:.83rem;min-height:44px}}