/* Collection pages share the original Surah artwork and verse styles. */
.qv-page .qv-heading{text-align:center;padding:12px 10px 20px}
.qv-page .qv-heading h1{font-size:clamp(24px,3vw,34px);margin:6px 0}
.qv-page .qv-heading p{font-size:14px;margin:4px 0}
.qv-page .qv-card{margin:0 0 32px;min-width:0}
.qv-page .qv-note,.qv-page .qv-loading{max-width:1180px;margin:20px auto;padding:12px 16px;font-size:13px;line-height:1.9}
.qv-page .qv-note{border:1px solid #68776d;border-radius:9px}
.qv-page [hidden]{display:none!important}
.qv-page .qv-card .ayah-block{overflow-wrap:anywhere}
.qv-page .qv-card .ayah-actions{flex-shrink:0}
.qv-page #qr-library{max-width:1600px;width:100%;padding:22px 28px 50px}
.qv-page #qr-library .surah-title-panel h1{font-family:'UthmanicHafs','Traditional Arabic','Noto Naskh Arabic',serif;font-size:clamp(34px,4vw,54px);font-weight:400;line-height:1.3;margin:0}
.qv-page #qr-library .qr-tabs{border:0}
.qv-page #qr-cards{margin:26px 0 0}
.qv-page #qr-pagination{flex-wrap:wrap}

/* Home and language controls sit on opposite sides above the crown. */
.qv-page .qv-navigation{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:0 0 18px;position:relative;z-index:30}
.qv-page :is(#qr-library,#qr-random) :is(.qv-control,.qv-open){display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;max-width:100%;padding:11px 20px;border:1px solid #68766e;border-radius:999px;background:#3f4542;color:#f2f4f3;font-family:inherit;font-size:14px;font-weight:650;line-height:1.6;text-decoration:none;text-align:center;box-shadow:6px 6px 14px #20252155,-3px -3px 10px #ffffff08;cursor:pointer;transition:background .16s ease,border-color .16s ease}
.qv-page :is(#qr-library,#qr-random) :is(.qv-control,.qv-open):hover{background:#354c41;border-color:#8ab79f}
.qv-page :is(#qr-library,#qr-random) :is(a,button,summary,input):focus-visible{outline:3px solid #a4d8bd;outline-offset:4px}
.qv-page :is(.qv-control,.qv-saved-summary) svg{width:21px;height:21px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.qv-page :is(#qr-library,#qr-random) .qv-primary{background:#276a50;border-color:#72b494;color:#fff}
.qv-page :is(#qr-library,#qr-random) .qv-primary:hover{background:#215e46}
.qv-page .qv-language{position:relative;max-width:52%;flex-shrink:0}
.qv-page .qv-language summary{list-style:none;user-select:none}
.qv-page .qv-language summary::-webkit-details-marker{display:none}
.qv-page .qv-language summary bdi{overflow-wrap:anywhere}
.qv-page .qv-caret{font-size:20px;line-height:1;transition:transform .16s ease}
.qv-page .qv-language[open] .qv-caret{transform:rotate(180deg)}
.qv-page .qv-language-menu{position:absolute;inset-inline-end:0;top:calc(100% + 12px);width:350px;max-width:calc(100vw - 32px);padding:18px 12px 10px;border:1px solid #718279;border-radius:18px;background:#3f4542;box-shadow:0 16px 44px #0007;z-index:31;text-align:start}
.qv-page .qv-language-label{display:block;margin:0 5px 10px;color:#f2f4f3;font-size:14px;font-weight:650}
.qv-page #qv-language-search{box-sizing:border-box;width:100%;min-height:46px;padding:10px 12px;margin-bottom:10px;border:1px solid #798b7f;border-radius:10px;background:#353d38;color:#fff;font:inherit;font-size:14px}
.qv-page #qv-language-search::placeholder{color:#cbd0cd;opacity:1}
.qv-page .qv-language-options{max-height:min(48vh,390px);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.qv-page :is(#qr-library,#qr-random) .qv-language-option{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;margin:2px 4px;border-radius:8px;font-size:14px;line-height:1.65;text-decoration:none;color:#f2f4f3;overflow-wrap:anywhere}
.qv-page :is(#qr-library,#qr-random) a.qv-language-option:hover,.qv-page .qv-language-option[aria-current]{background:#30543f}
.qv-page .qv-language-check{color:#8ae5bb;font-size:18px}
.qv-page :is(#qr-library,#qr-random) .qv-language-option.is-translation-pending{cursor:not-allowed}
.qv-page :is(#qr-library,#qr-random) .qv-language-option.is-translation-pending,.qv-page .qv-language-option.is-translation-pending *{color:#000!important;-webkit-text-fill-color:#000!important}
.qv-page .qv-language-option small{font-size:11px;flex-shrink:0}
.qv-page .qv-no-language{font-size:13px;padding:12px;margin:0;color:#d3ddd6}

/* Same bookmark drawing as the homepage; a distinct saved-count badge. */
.qv-page #qr-library .qr-mark{display:grid;place-items:center;width:68px;height:68px;margin:0 auto 15px;border:1px solid #867f67;border-radius:21px;background:#454b46;box-shadow:6px 6px 15px #20252150,-3px -3px 10px #ffffff08;color:#dfc793}
.qv-page #qr-library .qr-mark svg{width:34px;height:34px}
.qv-page .qv-saved-summary{display:flex;align-items:center;justify-content:center;gap:10px;width:fit-content;max-width:100%;margin:30px auto 24px;padding:12px 24px;background:#334d3f;border:1px solid #70937e;border-radius:14px;color:#d4ecdc;box-shadow:0 5px 18px #17271c26}
.qv-page #qr-library .qv-saved-summary .qr-count{margin:0;font-size:15px;font-weight:650;line-height:1.8;color:#f2f4f3}
.qv-page :is(#qr-library,#qr-random) .qv-open{display:flex;width:fit-content;margin:20px auto 8px}
.qv-page .qv-open::before{content:'';width:19px;height:19px;flex-shrink:0;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3h7v7m0-7L10 14M10 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5'/%3E%3C/svg%3E") center/contain no-repeat}
.qv-page .qv-page-actions{display:flex;align-items:stretch;justify-content:center;gap:12px;flex-wrap:wrap;margin:30px auto 24px;padding:22px 8px 0;border-top:1px solid #71807766}
.qv-page :is(#qr-library,#qr-random) .qv-page-actions :is(.qv-control,.qv-open){margin:0;width:auto;min-width:175px}
.qv-page #backToTop{inset-inline-end:18px!important;inset-inline-start:auto!important;bottom:max(18px,env(safe-area-inset-bottom))!important}
@media(max-width:760px){
 .qv-page #qr-library{padding:12px 8px 34px}
 .qv-page #qr-library .surah-title-panel h1{font-size:clamp(30px,9vw,42px)}
 .qv-page .qv-heading{padding-bottom:12px}
 .qv-page .qv-card{margin-bottom:26px}
 .qv-page .qv-navigation{gap:8px;margin-inline:4px}
 .qv-page :is(#qr-library,#qr-random) .qv-navigation .qv-control{padding:10px 12px;font-size:12px;gap:6px}
 .qv-page .qv-navigation .qv-home{flex:0 1 auto}
 .qv-page .qv-language-menu{padding:14px 10px 8px}
 .qv-page .qv-page-actions{gap:10px;padding:20px 0 0}
 .qv-page :is(#qr-library,#qr-random) .qv-page-actions :is(.qv-control,.qv-open){min-width:0;flex:1 1 calc(50% - 10px);padding:11px 9px;font-size:12px}
 .qv-page .qv-random-footer .qv-home{flex-basis:100%!important}
 .qv-page .qv-page-actions svg{width:19px;height:19px}
 .qv-page .qv-saved-summary{padding:10px 20px;margin-block:24px 20px}
 .qv-page #backToTop{inset-inline-end:14px!important}
}
@media(prefers-reduced-motion:reduce){.qv-page .qv-control,.qv-page .qv-open,.qv-page .qv-caret,.qv-page #backToTop{transition:none!important}}
