:root{
 --dl-primary:#2e3193;
 --dl-secondary:#e91f25;
 --dl-ink:#172033;
 --dl-muted:#687086;
 --dl-border:#e7e9f0;
 --dl-surface:#ffffff;
 --dl-soft:#f6f7fb;
}
.dl-library.dl-v23{
 max-width:1180px;margin:30px auto;padding:0 18px;
 color:var(--dl-ink);font-family:inherit;
}
.dl-hero{
 display:flex;justify-content:space-between;align-items:center;gap:20px;
 padding:25px 28px;border-radius:18px;margin-bottom:18px;
 background:linear-gradient(135deg,#f7f8ff,#fff);
 border:1px solid var(--dl-border);
}
.dl-eyebrow{font-size:11px;font-weight:800;letter-spacing:1.6px;color:var(--dl-primary)}
.dl-hero h2{margin:6px 0 4px;font-size:28px;line-height:1.2}
.dl-hero p{margin:0;color:var(--dl-muted);font-size:14px}
.dl-counter-badge{
 min-width:72px;height:58px;border-radius:14px;background:#fff;border:1px solid var(--dl-border);
 display:flex;align-items:center;justify-content:center;gap:3px;box-shadow:0 5px 18px rgba(20,28,60,.06)
}
.dl-counter-badge strong{font-size:22px;color:var(--dl-primary)}
.dl-counter-badge span{font-size:13px;color:var(--dl-muted)}
.dl-toolbar-v23{display:flex;gap:12px;margin-bottom:18px}
.dl-search-box{
 flex:1;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--dl-border);
 border-radius:12px;padding:0 12px;height:48px;box-shadow:0 3px 12px rgba(20,28,60,.03)
}
.dl-search-box>span{font-size:23px;color:#7c8497}
.dl-search-box input{border:0;outline:0;width:100%;height:100%;font-size:15px;background:transparent}
.dl-clear-search{border:0;background:transparent;color:#8b92a3;font-size:22px;cursor:pointer}
.dl-select-box{
 min-width:210px;display:flex;flex-direction:column;justify-content:center;gap:1px;
 background:#fff;border:1px solid var(--dl-border);border-radius:12px;padding:5px 12px
}
.dl-select-box span{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:#8a91a2;font-weight:700}
.dl-select-box select{border:0;outline:0;background:#fff;font-size:14px;color:var(--dl-ink);padding:2px 0}
.dl-slider-wrap{display:flex;align-items:center;gap:12px}
.dl-slider-viewport{overflow:hidden;flex:1;min-width:0;border-radius:18px}
.dl-slider-track{display:flex;width:100%;transition:transform .42s cubic-bezier(.2,.75,.25,1);will-change:transform}
.dl-slide{flex:0 0 100%;width:100%;box-sizing:border-box;min-height:430px;display:block!important}
.dl-card{
 border:1px solid var(--dl-border);border-radius:18px;padding:28px 30px;background:var(--dl-surface);
 box-shadow:0 10px 30px rgba(24,34,70,.07)
}
.dl-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.dl-label{font-size:10px;font-weight:800;letter-spacing:1.4px;color:var(--dl-primary)}
.dl-category-chip{
 display:inline-flex;margin-left:8px;padding:5px 9px;border-radius:999px;background:#f0f1ff;color:var(--dl-primary);
 font-size:10px;font-weight:700
}
.dl-fav{width:38px;height:38px;border:1px solid var(--dl-border);border-radius:50%;background:#fff;color:#7c8494;cursor:pointer;font-size:23px;line-height:1}
.dl-fav:hover,.dl-fav.is-fav{color:var(--dl-secondary);border-color:#f1b9bc}
.dl-card h3{font-size:24px;line-height:1.25;margin:13px 0 16px;color:var(--dl-ink)}
.dl-arabic{
 font-family:"Noto Naskh Arabic","Amiri","Segoe UI",serif;
 font-size:31px;line-height:2.05;text-align:right;color:#20233a;
 padding:8px 4px 13px;border-bottom:1px solid var(--dl-border);margin-bottom:13px
}
.dl-trans{font-style:italic;color:#697184;line-height:1.7;font-size:15px;margin-bottom:8px}
.dl-translation,.dl-urdu{line-height:1.75;font-size:15px}
.dl-urdu{font-family:"Noto Nastaliq Urdu","Noto Naskh Arabic",serif;margin-top:10px}
.dl-reference{font-size:12px;color:#7b8292;border-top:1px solid var(--dl-border);padding-top:12px;margin-top:16px}
.dl-reference span{font-weight:700;color:#555d70}
.dl-player{margin-top:18px;padding:12px;border-radius:12px;background:var(--dl-soft);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dl-audio{display:none}
.dl-play,.dl-stop,.dl-copy,.dl-share{
 border:1px solid var(--dl-border);background:#fff;border-radius:9px;padding:9px 13px;
 font-size:13px;font-weight:650;cursor:pointer;transition:.18s ease
}
.dl-play{background:var(--dl-primary);border-color:var(--dl-primary);color:#fff;min-width:120px}
.dl-play:hover{transform:translateY(-1px);box-shadow:0 5px 12px rgba(46,49,147,.2)}
.dl-play.is-playing{background:var(--dl-secondary);border-color:var(--dl-secondary)}
.dl-stop:hover,.dl-copy:hover,.dl-share:hover{border-color:var(--dl-primary);color:var(--dl-primary)}
.dl-player-status{font-size:12px;color:#737b8d;margin-left:auto}
.dl-actions{display:flex;gap:8px;margin-top:9px}
.dl-slider-prev,.dl-slider-next{
 width:46px;height:46px;min-width:46px;border:0;border-radius:50%;background:var(--dl-primary);color:#fff;
 font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
 box-shadow:0 6px 15px rgba(46,49,147,.2);transition:.18s ease
}
.dl-slider-prev:hover,.dl-slider-next:hover{transform:scale(1.05)}
.dl-slider-footer{text-align:center;padding-top:17px}
.dl-dots{display:flex;justify-content:center;gap:6px;margin-bottom:8px}
.dl-dot{width:8px;height:8px;border:0;border-radius:50%;padding:0;background:#cfd2dc;cursor:pointer}
.dl-dot.is-active{background:var(--dl-primary);transform:scale(1.35)}
.dl-slide-count{font-size:12px;color:#7d8494}
.dl-no-results{text-align:center;padding:35px;border:1px dashed #cfd3df;border-radius:14px;margin-top:18px;color:#6c7486}
.dl-hidden{display:none!important}
@media(max-width:760px){
 .dl-library.dl-v23{padding:0 10px;margin:20px auto}
 .dl-hero{padding:20px;align-items:flex-start}
 .dl-hero h2{font-size:22px}
 .dl-counter-badge{min-width:58px;height:48px}
 .dl-toolbar-v23{flex-direction:column}
 .dl-select-box{min-width:0;height:48px}
 .dl-slider-wrap{gap:5px}
 .dl-slider-prev,.dl-slider-next{width:38px;height:38px;min-width:38px;font-size:25px}
 .dl-card{padding:20px;min-height:440px}
 .dl-card h3{font-size:20px}
 .dl-arabic{font-size:25px}
 .dl-player-status{width:100%;margin-left:0}
}
@media(max-width:480px){
 .dl-hero{gap:10px}
 .dl-hero p{font-size:12px}
 .dl-counter-badge{min-width:50px}
 .dl-card{padding:17px}
 .dl-actions{flex-wrap:wrap}
 .dl-play,.dl-stop,.dl-copy,.dl-share{flex:1}
}

.dl-v23 .dl-player{align-items:center}
.dl-v23 .dl-audio{
 display:block;
 width:min(100%,360px);
 height:38px;
 flex:1 1 260px;
}
.dl-v23 .dl-player-status{min-width:125px}
.dl-v23 .dl-play:focus-visible,
.dl-v23 .dl-stop:focus-visible,
.dl-v23 .dl-dot:focus-visible,
.dl-v23 .dl-slider-prev:focus-visible,
.dl-v23 .dl-slider-next:focus-visible{
 outline:3px solid rgba(46,49,147,.25);
 outline-offset:2px;
}