html body .dhq{--bg:#FFFFFF;--soft:#F7F8FA;--bd:#E5E7EB;--tx:#111827;--mu:#6B7280;--ac:#1F5C3D;--ac2:#E8F3EC;max-width:880px;padding:0 20px;color:var(--tx);}
html body.dh-dark-mode .dhq{--bg:#0F1720;--soft:#141E29;--bd:#263445;--tx:#E5E7EB;--mu:#9AA5B4;--ac:#5CC9A0;--ac2:#18332B;}
html body:has(#dhq),html body:has(#dhq) #wrapper,html body:has(#dhq) #inner-wrap,html body:has(#dhq) .content-container,html body:has(#dhq) .content-wrap,html body:has(#dhq) #primary,html body:has(#dhq) #main,html body:has(#dhq) .site-main,html body:has(#dhq) article.entry,html body:has(#dhq) .entry-content-wrap,html body:has(#dhq) .entry-content,html body:has(#dhq) .content-bg{background:#FFFFFF !important;}
html body.dh-dark-mode:has(#dhq),html body.dh-dark-mode:has(#dhq) #wrapper,html body.dh-dark-mode:has(#dhq) #inner-wrap,html body.dh-dark-mode:has(#dhq) .content-container,html body.dh-dark-mode:has(#dhq) .content-wrap,html body.dh-dark-mode:has(#dhq) #primary,html body.dh-dark-mode:has(#dhq) #main,html body.dh-dark-mode:has(#dhq) .site-main,html body.dh-dark-mode:has(#dhq) article.entry,html body.dh-dark-mode:has(#dhq) .entry-content-wrap,html body.dh-dark-mode:has(#dhq) .entry-content,html body.dh-dark-mode:has(#dhq) .content-bg{background:#0F1720 !important;}

/* surah banner */
html body .dhq .dhq-head{background:var(--soft) !important;border:1px solid var(--bd);border-radius:16px !important;padding:26px 20px !important;text-align:center;color:var(--tx);margin:0 0 18px !important;}
html body .dhq .dhq-head .num{color:var(--mu) !important;letter-spacing:1.2px;font-size:11.5px;margin:0 0 6px;}
html body .dhq .dhq-head h1{color:var(--tx) !important;font-family:'Plus Jakarta Sans',Jost,sans-serif !important;font-size:26px !important;font-weight:700;margin:0 0 4px;}
html body .dhq .dhq-head .ar{color:var(--ac) !important;font-size:38px !important;line-height:1.5;margin:0 0 6px;text-align:center;}
html body .dhq .dhq-head .meta{color:var(--mu) !important;font-size:13.5px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;}
html body .dhq .dhq-head .meta span{margin:0;padding:0 12px;border-right:1px solid var(--bd);}
html body .dhq .dhq-head .meta span:last-child{border-right:0;}

/* control bar */
html body .dhq .dhq-bar{background:var(--soft) !important;border:1px solid var(--bd) !important;border-radius:14px !important;padding:10px 14px !important;margin:0 0 14px !important;gap:10px;}
html body .dhq .dhq-play-all{border-radius:999px !important;background:var(--ac) !important;color:#fff !important;padding:9px 18px;}
html body .dhq .dhq-play-all.playing{background:#C9A227 !important;color:#123A28 !important;}
html body .dhq .dhq-sel,html body .dhq .dhq-voice-select{border-radius:999px !important;background:var(--bg) !important;color:var(--tx) !important;border:1px solid var(--bd) !important;}
html body .dhq .dhq-modes,html body .dhq .dhq-mode{color:var(--tx) !important;}
html body .dhq .dhq-attr{color:var(--mu) !important;margin:0 0 14px !important;}

/* bismillah */
html body .dhq .dhq-bismillah{background:transparent !important;border:0 !important;color:var(--tx) !important;font-size:34px !important;line-height:2 !important;padding:6px 0 !important;margin:6px 0 10px !important;}

/* ayah rows */
html body .dhq .dhq-ayah{display:grid !important;grid-template-columns:auto auto 1fr;align-items:center;column-gap:10px;background:transparent !important;border:0 !important;border-bottom:1px solid var(--bd) !important;border-radius:0 !important;box-shadow:none !important;padding:18px 0 22px !important;margin:0 !important;}
html body .dhq .dhq-ayah:hover{box-shadow:none !important;}
html body .dhq .dhq-ayah > *{grid-column:1 / -1;}
html body .dhq .dhq-ayah > .dhq-n{grid-column:1;}
html body .dhq .dhq-ayah > .dhq-a-play{grid-column:2;}
html body .dhq .dhq-n{background:var(--ac2) !important;border:0 !important;color:var(--ac) !important;height:28px !important;min-width:28px !important;font-size:12.5px !important;margin:0 !important;}
html body .dhq .dhq-a-play{width:30px !important;height:30px !important;margin:0 !important;background:transparent !important;border:1px solid var(--bd) !important;color:var(--ac) !important;font-size:11px !important;}
html body .dhq .dhq-a-play:hover{background:var(--ac) !important;color:#fff !important;border-color:var(--ac) !important;}
html body .dhq .dhq-a-play.playing{background:#C9A227 !important;color:#123A28 !important;border-color:#C9A227 !important;}
html body .dhq .dhq-ar{margin:12px 0 0 !important;color:var(--tx) !important;font-size:34px !important;line-height:2.3 !important;text-align:right;}
html body .dhq .dhq-tr{margin:6px 0 0 !important;padding:0 !important;border-top:0 !important;font-size:17px !important;line-height:1.8 !important;color:var(--tx) !important;text-align:left;}
html body .dhq .dhq-tf-wrap{border-top:0 !important;margin:12px 0 0 !important;padding-top:0 !important;}
html body .dhq .dhq-tf-btn{background:transparent !important;border:1px solid var(--bd) !important;border-radius:999px !important;color:var(--ac) !important;}
html body .dhq .dhq-tf{background:var(--soft) !important;border:1px solid var(--bd) !important;border-radius:12px !important;color:var(--tx) !important;}
html body .dhq .dhq-ayah.now-playing{background:var(--ac2) !important;border-radius:12px !important;padding-left:14px !important;padding-right:14px !important;box-shadow:none !important;}
html body .dhq .dhq-ayah.now-playing .dhq-tr{background:transparent !important;}

/* bottom nav */
html body .dhq .dhq-btn{border-radius:999px !important;background:var(--soft) !important;color:var(--ac) !important;border:1px solid var(--bd) !important;}
html body .dhq .dhq-btn:hover{background:var(--ac) !important;color:#fff !important;border-color:var(--ac) !important;transform:none;}

@media (max-width:760px){
html body .dhq{padding:0 14px;}
html body .dhq .dhq-head{padding:20px 14px !important;}
html body .dhq .dhq-head h1{font-size:22px !important;}
html body .dhq .dhq-head .ar{font-size:30px !important;}
html body .dhq .dhq-bismillah{font-size:27px !important;}
html body .dhq .dhq-ayah{padding:14px 0 18px !important;}
html body .dhq .dhq-ar{font-size:28px !important;line-height:2.2 !important;}
html body .dhq .dhq-tr{font-size:16px !important;}
html body .dhq .dhq-bar{flex-direction:column;align-items:stretch;}
}