:root{--hqp-gold:#d7ad4d;--hqp-gold2:#ffe59a;--hqp-emerald:#063a31;--hqp-dark:#021c18}
.hqp-shell{position:relative;width:min(100%,1199px);aspect-ratio:1199/1312;margin:18px auto;overflow:hidden;border-radius:28px;box-shadow:0 0 24px rgba(213,173,77,.38),0 18px 54px rgba(0,0,0,.38);font-family:Georgia,"Times New Roman",serif;color:#fff;isolation:isolate;background:#052f28}.hqp-shell *{box-sizing:border-box}.hqp-skin-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;pointer-events:none}.hqp-glow{position:absolute;inset:0;border:0;border-radius:28px;box-shadow:inset 0 0 22px rgba(218,177,72,.16);pointer-events:none;z-index:20}
/* Functional controls cover the sample controls baked into the approved skin. */
.hqp-control-overlay{position:absolute;z-index:10;left:24.95%;top:37.62%;width:69.55%;height:17.82%;padding:1.05% 1.9%;overflow:hidden;border:1px solid rgba(222,181,77,.74);border-radius:18px;background:linear-gradient(180deg,rgba(0,53,45,.992),rgba(1,39,33,.992));box-shadow:0 0 18px rgba(238,190,70,.20)}
.hqp-now{position:absolute;left:2.5%;right:2.5%;top:3.5%;height:28.5%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.14}.hqp-now h3{margin:0;color:#fff0c8;font-size:clamp(12px,2.3vw,31px)}.hqp-now h3 small{font-size:.54em;font-weight:400}.hqp-now p{margin:.28em 0 0;font-size:clamp(7px,1.16vw,15px);line-height:1.22;color:#e7e3d8}
.hqp-control-row{position:absolute;left:3%;right:3%;top:32.5%;height:34%;display:grid;grid-template-columns:4.5% 29% 12% 29% 4.5%;justify-content:center;align-items:center;gap:2.6%;margin:0}.hqp-prev,.hqp-next,.hqp-repeat,.hqp-shuffle,.hqp-listbtn{border:0;background:transparent;color:#fff;cursor:pointer;padding:0;font-size:clamp(10px,1.7vw,23px)}.hqp-play{position:relative;width:clamp(38px,6.7vw,82px);aspect-ratio:1;border-radius:50%;border:2px solid var(--hqp-gold);background:radial-gradient(circle at 45% 35%,#0f624f,#07382f 72%);box-shadow:0 0 14px rgba(255,197,55,.54),inset 0 0 10px rgba(255,255,255,.05);color:#fff;font-size:clamp(15px,2.4vw,29px);cursor:pointer;justify-self:center}.hqp-play .pause{display:none}.hqp-shell.is-playing .hqp-play .play{display:none}.hqp-shell.is-playing .hqp-play .pause{display:inline}.hqp-wave{height:100%;display:flex;align-items:center;justify-content:center;gap:clamp(1px,.24vw,3px);overflow:hidden}.hqp-wave i{display:block;width:clamp(2px,.34vw,4px);border-radius:8px;background:linear-gradient(180deg,#ffe89b,#d49d2d);height:var(--h);max-height:80%;box-shadow:0 0 6px rgba(255,200,60,.5);transform-origin:center}.hqp-shell.is-playing .hqp-wave i{animation:hqpWave .84s ease-in-out infinite;animation-delay:var(--delay)}@keyframes hqpWave{0%,100%{transform:scaleY(.35);opacity:.66}48%{transform:scaleY(1.16);opacity:1}}
.hqp-progress-row{position:absolute;left:4%;bottom:4.8%;width:61%;height:15px;display:grid;grid-template-columns:3.6em minmax(0,1fr) 3.6em;gap:7px;align-items:center;font:clamp(7px,.95vw,12px)/1 Arial,sans-serif;z-index:6}.hqp-progress-row .hqp-current{text-align:left;white-space:nowrap}.hqp-progress-row .hqp-duration{text-align:right;white-space:nowrap}.hqp-progress,.hqp-volume{-webkit-appearance:none;appearance:none;width:100%;height:4px;border:0;border-radius:999px;outline:0;padding:0;margin:0;background:linear-gradient(90deg,#d9b24e,#e7ece9)}.hqp-progress::-webkit-slider-runnable-track,.hqp-volume::-webkit-slider-runnable-track{height:4px;border-radius:999px;background:linear-gradient(90deg,#d9b24e,#e7ece9)}.hqp-progress::-webkit-slider-thumb,.hqp-volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:13px;height:13px;border-radius:50%;background:#fff3c6;border:1px solid #d5ae4c;box-shadow:0 1px 4px rgba(0,0,0,.35);margin-top:-4.5px}.hqp-progress::-moz-range-track,.hqp-volume::-moz-range-track{height:4px;border-radius:999px;background:#dfe7e4;border:0}.hqp-progress::-moz-range-progress,.hqp-volume::-moz-range-progress{height:4px;border-radius:999px;background:#d9b24e}.hqp-progress::-moz-range-thumb,.hqp-volume::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:#fff3c6;border:1px solid #d5ae4c;box-shadow:0 1px 4px rgba(0,0,0,.35)}
.hqp-side-controls{position:absolute;right:2.2%;bottom:3.2%;width:30.2%;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;gap:2%}.hqp-volume-wrap{grid-column:1/-1;display:grid;grid-template-columns:auto 1fr auto;gap:5%;align-items:center;font:clamp(7px,.9vw,12px)/1 Arial,sans-serif}.hqp-volume-wrap output{min-width:2.7em;text-align:right}
/* The rail is intentionally wider than the original sample rail so the static arrows/cards underneath cannot peek out. */
.hqp-surahs{position:absolute;z-index:11;left:4.1%;top:57.65%;width:91.8%;height:12.65%;overflow:hidden;background:linear-gradient(180deg,rgba(2,47,40,.992),rgba(1,39,33,.992));border-radius:14px;padding:0;box-shadow:inset 0 0 0 1px rgba(200,158,61,.16)}.hqp-search{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.hqp-carousel-wrap{position:relative;width:100%;height:100%;padding:0 5.9%}.hqp-carousel{height:100%;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 8*1.1%)/9);gap:1.1%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:.8% .2% 1.2%}.hqp-carousel::-webkit-scrollbar{display:none}.hqp-surah-card{scroll-snap-align:start;min-width:0;border:1px solid rgba(210,168,69,.72);border-radius:9px;background:linear-gradient(180deg,#08493b,#052e28);color:#f4ead7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2em;padding:.4em .25em;cursor:pointer;box-shadow:inset 0 0 12px rgba(0,0,0,.14);font-family:Georgia,"Times New Roman",serif;transition:.15s ease}.hqp-surah-card.is-active{border-color:#ffe397;box-shadow:0 0 0 2px rgba(247,203,87,.22),0 0 16px rgba(255,196,60,.32)}.hqp-surah-card small{font-size:clamp(6px,.8vw,10px)}.hqp-surah-card strong{font-size:clamp(7px,.95vw,12px);line-height:1.05;white-space:nowrap}.hqp-surah-card em{font-style:normal;color:#e7c260;font-size:clamp(9px,1.28vw,16px);line-height:1}.hqp-surah-card span{font:clamp(6px,.75vw,9px)/1 Arial,sans-serif;color:#bdcbc6}.hqp-scroll-left,.hqp-scroll-right{position:absolute;top:50%;transform:translateY(-50%);width:clamp(22px,3vw,38px);aspect-ratio:1;border-radius:50%;border:1px solid #caa045;background:#05392f;color:#f4d477;font-size:clamp(16px,2.4vw,30px);cursor:pointer;z-index:3}.hqp-scroll-left{left:.8%}.hqp-scroll-right{right:.8%}.hqp-status{position:absolute;z-index:14;left:50%;top:71.2%;transform:translateX(-50%);max-width:74%;padding:.2em .6em;border-radius:8px;background:rgba(1,33,28,.72);font:clamp(7px,.9vw,11px)/1.2 Arial,sans-serif;color:#d6e4df;text-align:center}.hqp-status:empty{display:none}.hqp-audio{display:none}.hqp-shell button:focus-visible,.hqp-shell input:focus-visible{outline:2px solid #fff1b8;outline-offset:2px}
@media(max-width:700px){
.hqp-shell{margin:0 auto;border-radius:14px;max-width:100%;overflow:hidden}.hqp-glow{border-radius:14px}
.hqp-control-overlay{left:24.3%;top:37.55%;width:70.3%;height:17.95%;padding:0;border-radius:10px}
.hqp-now{left:2%;right:2%;top:3%;height:27%}.hqp-now h3{font-size:clamp(11px,3.45vw,22px);line-height:1.02}.hqp-now p{font-size:clamp(6px,1.75vw,11px);margin:.12em 0 0;line-height:1.12}
.hqp-control-row{left:2.5%;right:2.5%;top:31%;height:31%;grid-template-columns:5% 27% 14% 27% 5%;gap:2.5%}
.hqp-play{width:clamp(31px,7.8vw,50px);border-width:1.5px}.hqp-wave{max-height:32px}
.hqp-progress-row{left:3.5%;right:3.5%;bottom:5.5%;width:auto;height:13px;grid-template-columns:3.25em minmax(0,1fr) 3.25em;gap:5px;font-size:clamp(6px,1.35vw,9px)}
.hqp-progress,.hqp-volume{height:3px}.hqp-progress::-webkit-slider-runnable-track,.hqp-volume::-webkit-slider-runnable-track{height:3px}.hqp-progress::-webkit-slider-thumb,.hqp-volume::-webkit-slider-thumb{width:11px;height:11px;margin-top:-4px}.hqp-progress::-moz-range-track,.hqp-volume::-moz-range-track,.hqp-progress::-moz-range-progress,.hqp-volume::-moz-range-progress{height:3px}.hqp-progress::-moz-range-thumb,.hqp-volume::-moz-range-thumb{width:11px;height:11px}
.hqp-side-controls{bottom:2.8%;width:29.5%;right:1.8%;font-size:8px}
.hqp-surahs{left:3.2%;width:93.6%;height:12.9%;top:57.55%;border-radius:10px}.hqp-carousel-wrap{padding:0 7.3%}.hqp-carousel{grid-auto-columns:calc((100% - 3*2%)/4);gap:2%;padding:1.5% .3% 2%}.hqp-surah-card small{font-size:clamp(7px,1.7vw,10px)}.hqp-surah-card strong{font-size:clamp(8px,2vw,12px)}.hqp-surah-card em{font-size:clamp(11px,2.8vw,17px)}.hqp-surah-card span{font-size:clamp(6px,1.5vw,9px)}
}
@media(max-width:420px){
.hqp-control-overlay{left:23.7%;top:37.45%;width:71.2%;height:18.15%;border-radius:9px}
.hqp-now{top:2.7%;height:27%;left:1.8%;right:1.8%}.hqp-now h3{font-size:clamp(12px,4vw,17px)}.hqp-now p{font-size:clamp(6px,1.9vw,8px)}
.hqp-control-row{left:2%;right:2%;top:30.5%;height:30%;grid-template-columns:6% 26% 15% 26% 6%;gap:2%}.hqp-prev,.hqp-next{font-size:clamp(9px,3vw,13px)}.hqp-play{width:clamp(30px,8.8vw,38px);font-size:clamp(12px,3.8vw,16px)}.hqp-wave{max-height:27px;gap:1px}.hqp-wave i{width:2px;box-shadow:0 0 3px rgba(255,200,60,.45)}
.hqp-progress-row{left:2.7%;right:2.7%;bottom:5.8%;width:auto;grid-template-columns:3em minmax(0,1fr) 3em;gap:4px;font-size:clamp(6px,1.75vw,8px)}
.hqp-side-controls{display:none!important}
.hqp-surahs{left:2.5%;width:95%;top:57.45%;height:13.2%}.hqp-carousel-wrap{padding:0 8.5%}.hqp-carousel{grid-auto-columns:calc((100% - 2*2.2%)/3);gap:2.2%}
}
@media(prefers-reduced-motion:reduce){.hqp-wave i{animation:none!important}}