/* Scoped studio and reciter controls. The site's original colors stay intact. */
.media-studio { --media-edge:rgba(223,196,134,.2); --media-panel:#11271f; max-width:1240px;margin:0 auto;padding:18px 0 54px; }
.media-head {display:flex;justify-content:space-between;gap:24px;align-items:center;margin-bottom:34px;}
.media-head h1 {font-size:clamp(1.8rem,3.7vw,3rem);line-height:1.3;margin:8px 0;color:#f6efd9;}
.media-head p {color:#c0c5b3;margin:10px 0 0;}
.media-back {color:#d7c28a;text-decoration:none;font-size:.85rem;}
.media-eyebrow {color:#c6ab68;font-size:.67rem;letter-spacing:.19em;margin-top:25px;}
.media-workspace {display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:36px;align-items:start;}
.media-preview-column {min-width:0;position:sticky;top:88px;}
.media-preview-shell {background:#07130f;border:1px solid var(--media-edge);border-radius:22px;padding:16px;position:relative;box-shadow:0 20px 65px #0004;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.media-preview-shell canvas {display:block;max-width:100%;max-height:570px;width:auto;height:auto;border-radius:11px;object-fit:contain;}
.media-preview-shell:fullscreen {padding:20px;border:0;border-radius:0;}
.media-preview-shell:fullscreen canvas {max-height:calc(100vh - 40px);max-width:100%;}
.media-preview-overlay {position:absolute;inset:26px 26px auto;display:flex;justify-content:space-between;align-items:center;pointer-events:none;}
.media-preview-overlay span {background:#081710b8;border:1px solid #e9d7a33b;padding:3px 10px;border-radius:30px;font-size:.72rem;color:#f6efd9;}
.media-preview-overlay button {pointer-events:auto;background:#081710b8;border:1px solid #e9d7a33b;color:#f6efd9;width:34px;height:34px;border-radius:50%;font-size:1.2rem;cursor:pointer;}
.media-transport {display:flex;align-items:center;gap:16px;background:var(--media-panel);border:1px solid var(--media-edge);border-radius:18px;margin-top:16px;padding:14px 16px;}
.media-play {border:0;border-radius:50%;background:linear-gradient(135deg,#e3b84f,#f5dd95);color:#102119;width:46px;height:46px;flex-shrink:0;font-size:1.05rem;cursor:pointer;}
.media-timeline {flex:1;min-width:0;}
.media-timeline div {display:flex;justify-content:space-between;gap:10px;font-size:.7rem;color:#c0c5b3;direction:ltr;}
.media-studio input[type=range] {accent-color:#e3bd68;width:100%;cursor:pointer;}
.media-timeline input {height:18px;direction:ltr;}
.media-volume {width:60px;color:#dcc581;display:flex;align-items:center;gap:4px;}
.media-volume input {min-width:0;direction:ltr;}
.media-verse-list {display:flex;gap:6px;flex-wrap:wrap;max-height:120px;overflow:auto;margin:16px 0;direction:ltr;}
.media-verse-list button {border:1px solid var(--media-edge);background:#11271f;color:#cbd0ba;border-radius:9px;padding:5px 10px;font-size:.75rem;cursor:pointer;}
.media-verse-list button[aria-pressed=true] {background:#d4b56f;color:#0f231a;}
.media-status {font-size:.83rem;color:#d4c48e;min-height:25px;line-height:1.6;}
.media-status.error {color:#ffc69e;}
.media-studio progress {width:100%;accent-color:#e3bd68;margin:8px 0;}
.media-export {display:flex;flex-wrap:wrap;gap:10px;}
.media-studio .btn {font-size:.8rem;border-radius:12px;padding:11px 15px;}
.media-studio .gold {background:linear-gradient(125deg,#deb450,#f2da90);color:#14251c;border-color:#f2da90;font-weight:800;}
.media-hint,.media-source {font-size:.72rem;line-height:1.8;color:#a8b19c;}
.media-source {display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.media-source a {color:#d1be8a;}
.media-settings {border:1px solid var(--media-edge);background:linear-gradient(145deg,#152d22,#0d2119);border-radius:22px;overflow:hidden;min-width:0;box-shadow:0 20px 65px #0002;}
.media-tabs {display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px;border-bottom:1px solid var(--media-edge);background:#091a15;}
.media-tabs button {display:flex;justify-content:center;align-items:center;gap:7px;background:transparent;border:0;color:#aab7a3;border-radius:12px;padding:14px 6px;font-size:.82rem;cursor:pointer;}
.media-tabs button[aria-selected=true] {color:#f3d889;background:#243b2e;box-shadow:inset 0 0 0 1px #d9b65852;}
.media-panel {border:0;margin:0;padding:25px;min-width:0;}
.media-panel legend {position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden;}
.media-studio [hidden] {display:none!important;}
.media-panel label {display:block;color:#d4d5c0;font-size:.8rem;margin-bottom:20px;}
.media-panel select,.media-panel input[type=number],.media-panel input[type=search] {display:block;width:100%;box-sizing:border-box;margin-top:8px;background:#0a1b15;border:1px solid #d5b96b4a;color:#f0ead8;border-radius:11px;min-height:46px;padding:9px 13px;font:inherit;}
.media-panel select option {background:#12271f;color:#eee8d5;}
.media-panel output {float:inline-end;color:#e7c873;}
.media-control-pair {display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.media-translation-heading {display:flex;justify-content:space-between;align-items:center;color:#dbdcc6;font-size:.82rem;}
.media-translation-heading span {font-size:.7rem;color:#c9b67e;}
.media-translations {max-height:225px;overflow:auto;margin-top:12px;border:1px solid var(--media-edge);border-radius:12px;}
.media-translations label {display:flex;gap:10px;align-items:center;margin:0;padding:10px 13px;border-bottom:1px solid #d5b96b17;cursor:pointer;}
.media-translations label:last-child {border-bottom:0;}
.media-translations input {accent-color:#dec274;width:17px;height:17px;flex-shrink:0;}
.media-translations span {font-size:.74rem;line-height:1.5;}
.media-translations small {display:block;color:#95a894;font-size:.65rem;}
.media-scenes {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:22px;}
.media-scenes button {padding:5px;background:#0c1c17;border:1px solid #d5b96b32;border-radius:12px;color:#d4d5c0;overflow:hidden;cursor:pointer;font-size:.69rem;}
.media-scenes canvas,.media-scenes img {width:100%;height:72px;object-fit:cover;display:block;border-radius:8px;}
.media-scenes button span {display:block;padding:5px 3px;}
.media-scenes button[aria-pressed=true] {border-color:#e4bd63;box-shadow:0 0 0 2px #e4bd6322;}
.media-photos {grid-template-columns:repeat(4,minmax(0,1fr));}
.media-upload {padding:15px;background:#0a1b15;border:1px dashed #d5b96b60;border-radius:12px;}
.media-upload input {display:block;width:100%;margin-top:10px;font-size:.7rem;}
.media-legend {font-size:.73rem;color:#bdc5ae;}
.media-swatches {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;}
.media-swatches input {display:block;width:100%;height:50px;margin-top:10px;border:1px solid #d5b96b42;background:#0a1b15;padding:6px;border-radius:10px;cursor:pointer;}
.media-settings-footer {padding:20px 25px;border-top:1px solid var(--media-edge);}
.media-settings-footer p {font-size:.68rem;color:#9eae98;line-height:1.7;margin:14px 0 0;}
.media-studio button:disabled {opacity:.45;cursor:default;}
.media-studio :focus-visible,.qvoice-dialog :focus-visible {outline:2px solid #e4bd63;outline-offset:4px;}
.qvoice-overlay {position:fixed;inset:0;z-index:9999;background:#020b07c4;backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:18px;}
.qvoice-dialog {width:480px;max-width:100%;max-height:85vh;overflow:auto;background:linear-gradient(135deg,#183628,#0c2119);border:1px solid #dcc17d70;border-radius:24px;padding:26px;color:#eee8d5;box-shadow:0 35px 100px #0008;}
.qvoice-dialog header {display:flex;justify-content:space-between;gap:16px;align-items:center;}
.qvoice-dialog header small {color:#d2b978;font-size:.72rem;}
.qvoice-dialog h2 {font-size:1.45rem;margin:6px 0;}
.qvoice-dialog p {font-size:.8rem;line-height:1.9;color:#b6c4ad;}
.qvoice-close {border:1px solid #dcc17d40;color:#e9d8a0;background:#10261c;border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:1.5rem;}
.qvoice-dialog .input {width:100%;margin-bottom:16px;}
.qvoice-list {display:grid;gap:8px;max-height:44vh;overflow:auto;}
.qvoice-list button {display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:start;padding:15px 17px;color:#e8e3d0;background:#193428;border:1px solid #dcc17d20;border-radius:14px;cursor:pointer;}
.qvoice-list button.selected {border-color:#e2c273;background:#2d432e;}
.qvoice-list strong {font-size:.95rem;display:block;}
.qvoice-list small {display:block;font-size:.7rem;color:#acbea7;margin-top:4px;}
.qvoice-list b {color:#e2c273;}
.unit-menu .unit-reciter-choice {border-top:1px solid #dec57940;margin-top:6px;padding-top:14px;color:#e9cd81;}
.unit-reciter-choice span,.unit-reciter-choice small {display:block;}
.unit-reciter-choice small {color:#c6cab8;font-size:.73rem;margin-top:4px;}
.unit-menu {max-height:75vh;overflow-y:auto;}
.qvoice-full-choice {align-self:center;}
.mushaf-listening-options {display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin:24px 0;color:#d9c486;font-size:.83rem;}
.mushaf-listening-options audio {max-width:100%;}
/* Reciter selection is a visible, shared listening preference. */
.qvoice-control {display:flex;align-items:center;gap:14px;width:100%;max-width:680px;min-height:88px;padding:16px 20px;border:1px solid #d5b66b65;border-radius:18px;background:linear-gradient(120deg,#193a2a,#10271d);color:#efe9d6;text-align:start;cursor:pointer;font:inherit;box-shadow:0 6px 24px #0002;}
.qvoice-control:hover {border-color:#e4c676;background:linear-gradient(120deg,#214632,#173023);}
.qvoice-symbol,.qvoice-row-icon {display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:13px;color:#e4c676;background:#d9bb6520;}
.qvoice-symbol svg,.qvoice-row-icon svg {width:24px;height:24px;}
.qvoice-summary {flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.qvoice-summary small {color:#b7c4a9;font-size:.7rem;}
.qvoice-summary strong {font-size:1.06rem;font-weight:800;line-height:1.6;}
.qvoice-summary>span {font-size:.68rem;color:#c5b780;}
.qvoice-change {font-size:.77rem;color:#edd38b;display:flex;align-items:center;gap:10px;}
.qvoice-change b {font-size:1.4rem;font-weight:400;}
[dir=rtl] .qvoice-change b {transform:rotate(180deg);}
.audio-bar#audioBar {display:flex;flex-direction:column;gap:12px;align-items:stretch;padding:18px;background:#10271c;border:1px solid #d5b66b30;border-radius:22px;}
#audioBar .qvoice-control {order:0;max-width:100%;}
#audioBar .audio-cap {order:1;font-size:.74rem;color:#aebda1;margin:0;}
#audioBar audio {order:2;width:100%;}
.qvoice-dialog {display:flex;flex-direction:column;overflow:hidden;max-height:min(85dvh,740px);padding:24px;}
.qvoice-dialog header {flex-shrink:0;margin-bottom:16px;}
.qvoice-search {font-size:.73rem;color:#aebda1;display:block;flex-shrink:0;}
.qvoice-search .input {display:block;margin:7px 0 16px;min-height:46px;}
.qvoice-list {display:flex;flex-direction:column;overflow:auto;max-height:none;min-height:90px;gap:8px;overscroll-behavior:contain;padding:2px;}
.qvoice-overlay {overscroll-behavior:none;background:#020b07dd;}
.qvoice-dialog {touch-action:pan-y;box-shadow:0 34px 120px #000a;}
.qvoice-list {flex:1;touch-action:pan-y;scrollbar-width:thin;scrollbar-color:#aa9257 #10271b;scrollbar-gutter:stable;}
.qvoice-list::-webkit-scrollbar {width:5px;}
.qvoice-list::-webkit-scrollbar-track {background:#10271b;border-radius:12px;}
.qvoice-list::-webkit-scrollbar-thumb {background:#aa9257;border:1px solid #10271b;border-radius:12px;}
.qvoice-list::-webkit-scrollbar-button {display:none;}
.qvoice-list button {flex-shrink:0;min-height:78px;gap:12px;}
.qvoice-list button>span:nth-child(2) {flex:1;min-width:0;}
.qvoice-list .qvoice-row-icon {width:36px;height:36px;border-radius:10px;}
.qvoice-list .qvoice-row-icon svg {width:20px;height:20px;}
.qvoice-list small.qvoice-verses {color:#d8c17e;}
.qvoice-radio {width:22px;height:22px;flex-shrink:0;border:1px solid #e2c27370;border-radius:50%;display:grid;place-items:center;color:#14251b;font-size:.8rem;}
.qvoice-list .selected .qvoice-radio {background:#e2c273;border-color:#e2c273;}
.qvoice-load-status {flex-shrink:0;font-size:.75rem;color:#c7b677;padding-top:12px;}
.qvoice-load-status:empty {display:none;}
.qvoice-dialog.qvoice-compact {padding:14px;}
.qvoice-compact h2 {font-size:1.05rem;}
.qvoice-compact header {margin-bottom:6px;}
.qvoice-compact .qvoice-search .input {margin:4px 0 8px;min-height:40px;}
.qvoice-compact .qvoice-list button {min-height:64px;padding:10px;}
.qvoice-empty {text-align:center;padding:24px;}
.unit-menu.unit-listening-panel {width:350px;padding:16px;border-radius:20px;max-height:calc(100dvh - 100px);overflow-y:auto;background:linear-gradient(145deg,#193426,#0c2017);border-color:#d5b66b70;box-shadow:0 24px 80px #0007;}
.unit-listening-panel .unit-menu-top {margin-bottom:14px;border:0;padding:0 0 12px;}
.unit-menu.unit-listening-panel .qvoice-control {display:flex;width:100%;padding:12px;border:1px solid #d5b66b50;margin:0 0 18px;border-radius:14px;}
.unit-listening-panel .qvoice-symbol {width:34px;height:34px;}
.unit-listening-panel .qvoice-summary strong {font-size:.88rem;}
.unit-listening-panel .qvoice-summary small {font-size:.6rem;}
.unit-listening-panel .qvoice-summary>span {font-size:.58rem;}
.unit-listening-panel .qvoice-change {font-size:.66rem;gap:5px;}
.unit-scope-label,.unit-repeat-label {display:block;font-size:.78rem;color:#c2c9ae;margin-bottom:10px;}
.unit-scope-label select {display:block;width:100%;padding:12px;background:#0b2017;border:1px solid #d5b66b50;color:#eee8d5;border-radius:11px;font:inherit;margin-top:7px;min-height:48px;}
.unit-repeat-options {display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.unit-menu .unit-repeat-options button {text-align:center;border:1px solid #d5b66b30;border-radius:11px;min-height:46px;padding:8px;}
.unit-menu .unit-repeat-options button[aria-pressed=true] {background:#e0be72;color:#14251c;border-color:#e0be72;font-weight:800;}
.unit-listen-status {font-size:.73rem;line-height:1.7;color:#e6c789;margin:12px 0;}
.unit-listen-status:empty {display:none;}
.unit-menu .unit-start {margin-top:18px;text-align:center;border:1px solid #eed796;background:linear-gradient(120deg,#deb550,#f1d991);color:#12241a;border-radius:12px;min-height:50px;line-height:1.6;font-size:.82rem;font-weight:800;}
.unit-menu .unit-start:disabled {opacity:.45;cursor:default;}
@media(max-width:480px){.qvoice-dialog{padding:20px;max-height:calc(100dvh - 28px);border-radius:22px;}.qvoice-overlay{align-items:flex-end;padding:12px;}.qvoice-control{padding:13px;gap:10px;}.qvoice-summary strong{font-size:.98rem;}.qvoice-change{font-size:.7rem;gap:6px;}.unit-menu.unit-listening-panel{width:calc(100vw - 24px);max-width:360px;}#audioBar{padding:12px!important;}}
@media(max-height:520px){.qvoice-dialog{padding:14px;}.qvoice-dialog h2{font-size:1.1rem;}.qvoice-dialog header{margin-bottom:8px;}.qvoice-search .input{margin:4px 0 8px;}.qvoice-list button{min-height:62px;padding:10px 12px;}.qvoice-dialog{max-height:calc(100dvh - 16px);}}
@media(max-width:600px){.unit-menu.unit-listening-panel{top:auto!important;bottom:84px;left:12px!important;max-height:calc(100dvh - 110px);}}
@media(max-width:850px){.media-workspace{grid-template-columns:1fr;gap:24px;}.media-preview-column{position:static;}.media-preview-shell canvas{max-height:520px;}.media-head{gap:12px;}.media-head h1{font-size:1.75rem;}.media-head .chip{font-size:.7rem;white-space:nowrap;}.media-head p{font-size:.8rem;}.media-settings{order:2;}}
@media(max-width:400px){.media-panel{padding:18px;}.media-tabs button{font-size:.7rem;gap:4px;}.media-control-pair{gap:10px;}.media-transport{gap:10px;padding:12px;}.media-volume{width:45px;}.media-export .btn{font-size:.72rem;padding:10px 12px;}.media-swatches{gap:8px;}.qvoice-dialog{padding:20px;}}