:root{--green:#063528;--gold:#d9af57;--paper:#fdf7e9;--bar:#f0ead7;color:#172d22;background:var(--paper);font-family:system-ui,Tahoma,sans-serif}
*{box-sizing:border-box}
body{margin:0}
[hidden]{display:none!important}
button,select,input{font:inherit}
button{cursor:pointer;color:inherit}
button:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid #1684ce;outline-offset:2px}
button:disabled{opacity:.5;cursor:default}
#home{min-height:100dvh;background:#003d2c;display:grid;place-items:center}
.cover{position:relative;width:min(100%,calc(100dvh * .462));aspect-ratio:709/1536}
.cover img{display:block;width:100%;height:100%;object-fit:contain}
.cover button{position:absolute}
.hot{width:41%;height:10%;border:0;background:transparent}
.read,.recent,.prayers{right:7.5%}
.contents,.bookmarks,.qibla{left:7.5%}
.read,.contents{top:44.5%}
.recent,.bookmarks{top:55.3%}
.prayers,.qibla{top:66.2%}
.hot.jump{top:77.2%;left:21%;width:58%}
.listen{top:88.4%;left:19%;width:62%;height:5.7%;border-radius:12px;border:2px solid #bc8a2c;background:linear-gradient(#fff8db,#f0ce76);color:#06402b;font-weight:750}
#loadError{position:fixed;bottom:0;padding:.8rem;color:#fff;background:#632e20}
#reader{height:100dvh;position:relative;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:var(--paper);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
.page-head{padding:7px 12px;background:var(--bar);display:flex;justify-content:space-between;font-size:.9rem}
#viewer{display:grid;min-width:0;min-height:0;place-items:center;touch-action:pan-y;overflow:hidden}
#page{display:block;max-width:100%;max-height:100%;object-fit:contain;user-select:none}
#pageNumber{text-align:center;color:var(--green);font-size:.85rem;padding:3px 8px}
#controls,#player{position:absolute;z-index:2;display:flex;justify-content:center;align-items:center;gap:5px;flex-wrap:wrap;padding:6px 8px;background:var(--green);color:white;width:100%;inset-inline:0}
#controls{top:calc(env(safe-area-inset-top) + 29px)}
#controls button,#player button{min-height:42px;border:1px solid var(--gold);border-radius:8px;padding:5px 8px;background:transparent;color:white}
#player{bottom:env(safe-area-inset-bottom);box-shadow:0 -2px 6px #0002}
#seek{min-width:70px;width:min(47vw,350px);accent-color:var(--gold)}
#status{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 60px);left:50%;transform:translateX(-50%);background:var(--green);color:white;padding:6px 12px;border-radius:8px;max-width:92%;width:max-content}
dialog{width:min(calc(100% - 24px),520px);max-height:88dvh;border:2px solid var(--gold);border-radius:18px;background:var(--paper);color:var(--green);padding:15px}
dialog::backdrop{background:#001e17a0}
.panel-title{display:flex;align-items:center;justify-content:space-between}
.panel-title h2{margin:0 0 8px;font-size:1.35rem}
#close{border:0;background:transparent;font-size:1.5rem}
#panelBody{display:grid;gap:8px}
#panelBody button,#panelBody input,#panelBody select{padding:10px;border:1px solid #baa575;border-radius:8px;background:white;color:var(--green);min-height:42px}
#panelBody label{display:grid;gap:5px}
#panelBody .primary{background:var(--green);color:white}
#panelBody .chapter{display:flex;justify-content:space-between}
#chapterList{display:grid;gap:6px}
#reader:has(#player:not([hidden])){padding-bottom:calc(env(safe-area-inset-bottom) + 54px)}
#panelBody dl{display:grid;grid-template-columns:1fr auto;gap:7px;margin:0}
#panelBody dd{margin:0;font-variant-numeric:tabular-nums}
.range-boundary{min-width:0;margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(4.5rem,6rem);gap:10px;padding:9px 12px 12px;border:1px solid #dbca9c;border-radius:12px;background:#f7f0dc}
.range-boundary legend{padding:0 7px;font-weight:750}
.range-boundary select{width:100%;min-width:0}
.range-summary,.search-result{margin:0;padding:3px 2px;font-size:.9rem}
.range-summary{text-align:center}
.range-actions{display:grid;grid-template-columns:1fr auto;gap:8px}
.tafsir-verse{margin:0;padding:12px 14px;background:#f2e9ce;border-radius:10px;font-size:1.2rem;line-height:1.9}
.tafsir-copy,.tafsir-notes{margin:3px 0;line-height:1.9}
.tafsir-source{font-size:.85rem;color:var(--green);text-underline-offset:3px}
#seek{width:min(26vw,300px)}
#panel.listen-panel{padding:12px 15px}
#panel.listen-panel #panelBody{gap:6px}
#panel.listen-panel #panelBody label{gap:3px}
#panel.listen-panel .panel-title h2{margin:0 0 4px}
#panel.listen-panel .range-boundary{padding:4px 10px 8px}
#panel.listen-panel .range-summary{padding:0}
.qibla-compass{width:min(60vw,220px);aspect-ratio:1;position:relative;display:grid;place-items:center;margin:12px auto 6px;border:2px solid #bea25d;border-radius:50%;background:#f7efd8;direction:ltr}
.qibla-compass>span{position:absolute;top:3px;color:#136548;font-size:1.1rem;line-height:1}
.qibla-ring{position:absolute;inset:14px;border:1px solid #d6c28d;border-radius:50%;background:repeating-conic-gradient(from -1deg,#beaa71 0deg 2deg,transparent 2deg 15deg);mask:radial-gradient(transparent 60%,black 61%,black 70%,transparent 71%)}
.qibla-pointer{position:absolute;inset:9%;border-radius:50%;transition:transform .12s ease-out}
.qibla-pointer::before{content:"";position:absolute;inset:4% 35% 41%;background:#9b6d19;clip-path:polygon(50% 0,100% 100%,50% 78%,0 100%)}
.qibla-kaaba{width:44%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:2px solid #bea25d;z-index:1}
.qibla-compass.aligned{background:#e3f2e7;border-color:#1e764d}
.qibla-compass.aligned .qibla-pointer::before{background:#14784e}
.qibla-status,.qibla-degrees{margin:0;text-align:center}
.qibla-status{min-height:2.6em;font-weight:700;display:grid;place-items:center}
.qibla-degrees{font-size:.9rem;color:#34584a}
@media(prefers-reduced-motion:reduce){.qibla-pointer{transition:none}}