/* Noor components: one spacing scale, one control height, one scrollbar. */
.media-studio,.qvoice-dialog,.unit-listening-panel {--ui-surface:#10271e;--ui-field:#0a1d16;--ui-edge:rgba(214,188,119,.25);--ui-gold:#dfc27b;--ui-text:#eee8d5;--ui-muted:#adbaa4;color-scheme:dark;}
.media-studio {max-width:1180px;margin:auto;padding:20px 0 44px;}
.media-head {margin-bottom:28px;}
.media-back {display:inline-flex;align-items:center;gap:6px;color:var(--ui-muted);font-size:.75rem;text-decoration:none;}
.media-back svg {width:16px;height:16px;transform:rotate(180deg);}
[dir=rtl] .media-back svg {transform:none;}
.media-head h1 {font-size:clamp(1.9rem,3.5vw,2.7rem);color:var(--ui-text);line-height:1.4;margin:12px 0 8px;}
.media-head p {color:var(--ui-muted);font-size:.9rem;line-height:1.8;margin:0;max-width:650px;}
.media-workspace {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:start;}
.media-settings {background:linear-gradient(145deg,#142f23,#0f251c);border:1px solid var(--ui-edge);border-radius:22px;overflow:hidden;min-width:0;}
.media-step-heading {display:flex;align-items:center;gap:10px;padding:20px 24px;border-bottom:1px solid var(--ui-edge);}
.media-step-heading h2 {font-size:1rem;font-weight:800;line-height:1.5;color:var(--ui-text);margin:0;}
.media-step-number {width:28px;height:28px;display:grid;place-items:center;background:#d3b56718;color:var(--ui-gold);border:1px solid #d3b5674a;border-radius:9px;font-size:.75rem;flex-shrink:0;}
.media-step-heading small {margin-inline-start:auto;color:var(--ui-muted);font-size:.64rem;}
.media-basic,.media-panel {padding:24px;}
.media-studio label {display:block;font-size:.8rem;color:#c4cfb9;line-height:1.6;margin-bottom:18px;}
.media-studio select,.media-studio input[type=number],.media-studio input[type=search],.media-studio input[type=text] {display:block;box-sizing:border-box;width:100%;height:50px;min-width:0;margin-top:7px;padding:10px 13px;border:1px solid var(--ui-edge);border-radius:12px;background:var(--ui-field);color:var(--ui-text);font:inherit;line-height:1.6;box-shadow:none;}
.media-studio input[aria-invalid=true] {border-color:#e6a27f;}
.media-studio select {appearance:none;padding-inline-end:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d9bf7d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;}
[dir=rtl] .media-studio select {background-position:left 13px center;}
.media-studio select option {background:#10271e;color:var(--ui-text);}
.media-studio input:focus-visible,.media-studio select:focus-visible {outline:2px solid #d9bf7d;outline-offset:2px;}
.media-control-pair {display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.media-hint {font-size:.72rem;color:var(--ui-muted);line-height:1.8;margin:10px 0;}
.media-mode-badge {display:inline-flex;align-items:center;padding:7px 12px;border:1px solid #d3b56742;border-radius:9px;color:var(--ui-gold);font-size:.75rem;margin:0 0 8px;}
.media-studio summary {list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;font-size:.78rem;color:#d2d9c4;line-height:1.5;}
.media-studio summary::-webkit-details-marker {display:none;}
.media-studio summary>svg {width:16px;height:16px;margin-inline-start:auto;flex-shrink:0;transition:transform .15s;}
[dir=rtl] .media-studio summary>svg {transform:rotate(180deg);}
.media-studio details[open]>summary>svg {transform:rotate(90deg);}
.media-translation-disclosure {border-top:1px solid var(--ui-edge);margin-top:18px;padding-top:16px;}
.media-translation-disclosure summary>span:nth-child(2) {margin-inline-start:auto;color:var(--ui-gold);font-size:.68rem;}
.media-translation-disclosure summary>svg {margin-inline-start:0;}
.media-translation-content {padding-top:8px;}
.media-translation-content .noor-scroll {height:210px;margin-top:12px;border:1px solid var(--ui-edge);border-radius:12px;}
.media-translations label {display:flex;align-items:center;gap:10px;padding:11px 12px;margin:0;border-bottom:1px solid #d3b56716;cursor:pointer;}
.media-translations label:last-child {border-bottom:0;}
.media-translations input {width:18px;height:18px;flex-shrink:0;accent-color:var(--ui-gold);margin:0;}
.media-translations span {font-size:.74rem;line-height:1.6;}
.media-translations small {display:block;font-size:.65rem;color:#95a990;}
.media-design {border-top:1px solid var(--ui-edge);}
.media-design>summary {padding:20px 24px;}
.media-design>summary small {color:var(--ui-muted);font-size:.67rem;}
.media-tabs {display:grid;grid-template-columns:repeat(3,1fr);padding:6px;margin:0 24px;background:#091c14;border:1px solid var(--ui-edge);border-radius:12px;gap:4px;}
.media-tabs button {border:0;background:transparent;color:var(--ui-muted);min-height:40px;padding:8px;border-radius:8px;font:inherit;font-size:.75rem;cursor:pointer;}
.media-tabs button[aria-selected=true] {background:#27432e;color:#ead18d;}
.media-panel {border:0;margin:0;min-width:0;}
.media-panel legend {position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden;}
.media-legend {font-size:.72rem;color:var(--ui-muted);margin:8px 0 12px;}
.media-scenes {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px;}
.media-nature-scenes {grid-template-columns:repeat(2,minmax(0,1fr));}
.media-scenes button {padding:5px;background:#0a1d16;border:1px solid var(--ui-edge);border-radius:12px;color:var(--ui-text);font:inherit;font-size:.68rem;cursor:pointer;overflow:hidden;}
.media-scenes button[aria-pressed=true] {border-color:var(--ui-gold);box-shadow:0 0 0 2px #d5ba7020;}
.media-scenes canvas,.media-scenes img {width:100%;height:82px;object-fit:cover;display:block;border-radius:8px;}
.media-scenes button>span:last-child {display:block;padding:7px 3px;}
.media-scene-art {display:block;position:relative;}
.media-scene-art b {position:absolute;inset:auto 7px 7px auto;background:#09180ccc;padding:3px 7px;border-radius:7px;font-size:.62rem;}
.media-animated-options>summary {padding:10px 0 14px;color:var(--ui-muted);}
.media-upload {padding:14px;border:1px dashed #d3b56750;border-radius:12px;background:#0c2017;}
.media-upload input {display:block;width:100%;font-size:.68rem;margin-top:10px;}
.media-slider-label {display:grid!important;grid-template-columns:1fr auto;gap:7px;}
.media-slider-label output {color:var(--ui-gold);font-size:.75rem;}
.media-slider-label input {grid-column:1/-1;}
.media-studio input[type=range] {width:100%;accent-color:var(--ui-gold);direction:ltr;}
.media-swatches {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.media-swatches input {width:100%;height:45px;display:block;margin-top:8px;background:var(--ui-field);border:1px solid var(--ui-edge);border-radius:10px;padding:5px;}
.media-preview-column {min-width:0;position:sticky;top:86px;}
.media-preview-column>.media-step-heading {padding:0 0 16px;border:0;}
.media-preview-shell {background:#07140e;border:1px solid var(--ui-edge);border-radius:20px;position:relative;padding:14px;display:flex;justify-content:center;align-items:center;overflow:hidden;box-shadow:0 20px 55px #0002;}
.media-preview-shell canvas {display:block;max-width:100%;max-height:470px;width:auto;height:auto;object-fit:contain;border-radius:10px;}
.media-preview-shell:fullscreen {padding:20px;border:0;border-radius:0;}
.media-preview-shell:fullscreen canvas {max-height:calc(100vh - 40px);}
.media-preview-overlay {position:absolute;inset:23px 23px auto;display:flex;justify-content:space-between;align-items:center;pointer-events:none;}
.media-preview-overlay span {padding:4px 10px;background:#09180cca;border:1px solid #d3b56735;border-radius:8px;font-size:.68rem;color:#eee8d5;}
.media-preview-overlay button {pointer-events:auto;display:grid;place-items:center;width:34px;height:34px;border:1px solid #d3b56735;border-radius:10px;background:#09180cca;color:#eee8d5;padding:0;cursor:pointer;}
.media-preview-overlay svg {width:18px;height:18px;}
.media-transport {display:flex;align-items:center;gap:14px;padding:13px 15px;border:1px solid var(--ui-edge);background:var(--ui-surface);border-radius:16px;margin-top:12px;}
.media-play {width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:linear-gradient(135deg,#dfba63,#efd793);color:#10251a;cursor:pointer;}
.media-play svg {width:20px;height:20px;}
.media-timeline {flex:1;min-width:0;direction:ltr;}
.media-timeline input {height:18px;display:block;margin:0;}
.media-timeline>div {display:flex;justify-content:space-between;font-size:.68rem;gap:10px;color:var(--ui-muted);direction:ltr;margin-top:3px;}
.media-volume {position:relative;}
.media-volume summary {width:30px;height:36px;display:grid;place-items:center;}
.media-volume summary svg {width:19px;height:19px;margin:0;}
.media-volume input {position:absolute;z-index:3;inset:auto 0 45px auto;width:120px!important;background:#10271e;box-shadow:0 0 0 14px #10271e,0 0 0 15px #d3b56742;border-radius:8px;}
.media-verse-browse {margin-top:14px;}
.media-verse-browse summary {font-size:.7rem;color:var(--ui-muted);}
.media-verse-browse .noor-scroll {max-height:90px;margin-top:12px;}
.media-verse-list {display:flex;flex-wrap:wrap;align-content:start;gap:7px;margin:0;direction:ltr;}
.media-verse-list button {font:inherit;font-size:.7rem;padding:6px 10px;border:1px solid var(--ui-edge);border-radius:8px;background:#0f261a;color:#cfdbc2;cursor:pointer;}
.media-verse-list button[aria-pressed=true] {color:#152619;background:#d9bd75;}
.media-export-panel {padding-top:10px;}
.media-status {color:#d6c386;font-size:.76rem;line-height:1.7;min-height:22px;margin:8px 0 12px;}
.media-status.error {color:#fac19d;}
.media-studio progress {width:100%;height:6px;accent-color:var(--ui-gold);margin:0 0 12px;}
.media-export {display:flex;align-items:center;gap:10px;position:relative;}
.media-studio .btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 16px;border:1px solid var(--ui-edge);border-radius:12px;background:transparent;color:var(--ui-text);font-size:.8rem;line-height:1.5;font-weight:700;text-decoration:none;}
.media-studio .btn.gold {background:linear-gradient(120deg,#dfb75d,#efd58b);border-color:#e9cf85;color:#142719;}
.media-export>.btn.gold {flex:1;}
.media-export .btn svg {width:18px;height:18px;}
.media-more {position:relative;flex-shrink:0;}
.media-more>summary {width:44px;height:46px;display:grid;place-items:center;border:1px solid var(--ui-edge);border-radius:12px;}
.media-more>summary svg {width:21px;height:21px;margin:0;transform:none!important;}
.media-more-menu {position:absolute;inset-inline-end:0;bottom:calc(100% + 10px);z-index:10;width:220px;max-width:80vw;padding:6px;border:1px solid #d3b56755;border-radius:13px;background:#10271e;box-shadow:0 15px 45px #0006;}
.media-more-menu button {display:block;width:100%;padding:12px;border:0;border-radius:8px;background:transparent;color:var(--ui-text);text-align:start;font:inherit;font-size:.75rem;cursor:pointer;}
.media-more-menu button:hover {background:#29422f;}
.media-source {display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;font-size:.64rem;color:#82977d;line-height:1.6;margin-top:14px;}
.media-source a {color:#a6b896;}
.media-studio [hidden] {display:none!important;}
.media-studio button:disabled {opacity:.4;cursor:default;}
.media-studio :focus-visible,.qvoice-dialog :focus-visible,.unit-listening-panel :focus-visible {outline:2px solid #ddbe74;outline-offset:3px;}
/* The rail is painted by Noor; native scrolling still handles wheels and touch. */
.noor-scroll {position:relative;display:flex;flex-direction:column;overflow:hidden;min-height:0;min-width:0;}
.noor-scroll[data-overflow=true] {padding-inline-end:12px;}
.noor-scroll-viewport {flex:1 1 auto;width:100%;min-height:0;overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:none!important;-ms-overflow-style:none;touch-action:pan-y;}
.noor-scroll-viewport::-webkit-scrollbar {display:none!important;width:0!important;height:0!important;}
.noor-scroll-rail {position:absolute;inset-block:6px;inset-inline-end:0;width:12px;border-radius:9px;}
.noor-scroll-rail::before {content:'';position:absolute;inset-block:0;left:4px;width:4px;border-radius:9px;background:#d3b5670c;}
.noor-scroll-rail[hidden] {display:none!important;}
.noor-scroll-thumb {position:absolute;inset:0 0 auto;height:28px;border-radius:9px;cursor:grab;touch-action:none;}
.noor-scroll-thumb::before {content:'';position:absolute;inset-block:0;left:4px;width:4px;border-radius:9px;background:#b3a06b80;}
.noor-scroll-thumb:hover::before,.noor-scroll-thumb:focus-visible::before {background:#d6bf80;}
.noor-scroll-thumb:active {cursor:grabbing;}
.qvoice-overlay {position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:16px;background:#020b07dd;backdrop-filter:blur(8px);overscroll-behavior:none;}
.qvoice-dialog {width:460px;max-width:100%;display:flex;flex-direction:column;min-height:0;max-height:85dvh;padding:24px;border:1px solid #d3b56765;border-radius:22px;background:linear-gradient(135deg,#173727,#0e251a);box-shadow:0 32px 100px #0009;overflow:hidden;}
.qvoice-eyebrow {font-size:.72rem;color:#cbb478;line-height:1.6;margin:0 0 8px;flex-shrink:0;}
.qvoice-dialog header,.unit-listening-panel .unit-menu-top {display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;gap:12px;flex-shrink:0;padding:0;margin:0 0 20px;border:0;}
.qvoice-dialog h2 {font-size:1.35rem;line-height:1.5;margin:0;color:var(--ui-text);}
.qvoice-close,.unit-menu.unit-listening-panel .um-x {display:grid;place-items:center;width:40px;min-width:40px;height:40px;min-height:40px;margin:0;padding:0;border:1px solid #d3b56742;border-radius:12px;background:#0e251a;color:#d5c28b;cursor:pointer;line-height:1;box-sizing:border-box;}
.qvoice-close svg,.unit-menu.unit-listening-panel .um-x svg {display:block;width:18px;height:18px;margin:0;}
.qvoice-close:hover,.unit-menu.unit-listening-panel .um-x:hover {background:#25432d;color:#efdc9e;}
.qvoice-search {display:block;flex-shrink:0;font-size:.72rem;line-height:1.5;color:var(--ui-muted);margin:0 0 16px;}
.qvoice-search .input {display:block;width:100%;min-height:46px;margin:7px 0 0;padding:10px 13px;box-sizing:border-box;border:1px solid var(--ui-edge);border-radius:12px;background:var(--ui-field);color:var(--ui-text);font:inherit;}
.qvoice-dialog>.noor-scroll {flex:1;min-height:100px;}
.qvoice-list {display:flex;flex-direction:column;gap:8px;padding:1px;}
.qvoice-list button {display:grid;grid-template-columns:36px minmax(0,1fr) 22px;align-items:center;gap:12px;flex-shrink:0;min-height:78px;padding:13px;border:1px solid #d3b56725;border-radius:13px;background:#193528;color:var(--ui-text);text-align:start;font:inherit;cursor:pointer;}
.qvoice-list button.selected {border-color:#d4bd78;background:#2a422d;}
.qvoice-list strong {display:block;font-size:.93rem;line-height:1.6;font-weight:800;}
.qvoice-list small {display:block;font-size:.65rem;line-height:1.6;color:#a4b99e;margin-top:3px;}
.qvoice-list small.qvoice-verses {color:#c9b67a;}
.qvoice-row-icon,.qvoice-symbol {display:grid;place-items:center;flex-shrink:0;background:#d3b56716;border-radius:11px;width:36px;height:36px;color:#ddc481;}
.qvoice-row-icon svg,.qvoice-symbol svg {display:block;width:22px;height:22px;}
.qvoice-radio {display:grid;place-items:center;width:22px;height:22px;border:1px solid #d4bd7860;border-radius:50%;color:#14251a;font-size:.73rem;line-height:1;}
.selected .qvoice-radio {background:#dfc681;border-color:#dfc681;}
.qvoice-load-status {flex-shrink:0;padding-top:12px;font-size:.7rem;color:#c9b67a;}
.qvoice-load-status:empty {display:none;}
.qvoice-empty {font-size:.78rem;color:var(--ui-muted);padding:22px;text-align:center;}
.qvoice-control {display:flex;align-items:center;gap:12px;width:100%;max-width:680px;min-height:84px;padding:14px 16px;border:1px solid #d3b56750;border-radius:15px;background:linear-gradient(120deg,#193a2a,#10271d);color:var(--ui-text,#eee8d5);text-align:start;font:inherit;cursor:pointer;}
.qvoice-control:hover {border-color:#d8c180;background:linear-gradient(120deg,#214332,#183124);}
.qvoice-summary {display:flex;flex:1;flex-direction:column;gap:2px;min-width:0;}
.qvoice-summary small {font-size:.65rem;color:#aebea1;line-height:1.5;}
.qvoice-summary strong {font-size:1rem;line-height:1.6;font-weight:800;}
.qvoice-summary>span {font-size:.65rem;color:#c9b67a;line-height:1.5;}
.qvoice-change {display:flex;align-items:center;gap:6px;font-size:.72rem;color:#e0c886;}
.qvoice-change b {font-size:1.3rem;font-weight:400;line-height:1;}
[dir=rtl] .qvoice-change b {transform:rotate(180deg);}
#audioBar.audio-bar {display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:16px;background:#10271c;border:1px solid #d3b56730;border-radius:20px;}
#audioBar .qvoice-control {order:0;max-width:100%;}
#audioBar .audio-cap {order:1;font-size:.73rem;color:#aebda1;margin:0;}
#audioBar audio {order:2;width:100%;}
.mushaf-listening-options {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px;margin:24px 0;color:#d4bf81;}
.mushaf-listening-options audio {max-width:100%;}
.unit-menu.unit-listening-panel {display:flex;flex-direction:column;width:350px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 100px);padding:18px;border:1px solid #d3b56760;border-radius:20px;background:linear-gradient(145deg,#193526,#0d2218);box-shadow:0 22px 75px #0007;overflow:hidden;}
.unit-listening-panel .unit-menu-top .umt-t {font-size:.86rem;line-height:1.5;}
.unit-listening-panel>.noor-scroll {flex:1 1 auto;min-height:0;}
.unit-listening-body {padding:1px;}
.unit-menu.unit-listening-panel .qvoice-control {display:flex;padding:11px;min-height:78px;gap:10px;margin:0 0 18px;border:1px solid #d3b56740;border-radius:12px;}
.unit-listening-panel .qvoice-summary strong {font-size:.86rem;}
.unit-listening-panel .qvoice-summary small,.unit-listening-panel .qvoice-summary>span {font-size:.62rem;}
.unit-listening-panel .qvoice-change {font-size:.66rem;}
.unit-scope-label,.unit-repeat-label {display:block;color:#bbc9b0;font-size:.76rem;line-height:1.6;margin-bottom:10px;}
.unit-scope-label select {display:block;width:100%;height:46px;margin-top:7px;padding:10px 12px;padding-inline-end:36px;background:#0c2117;color:#e9e5d3;border:1px solid #d3b56740;border-radius:11px;font:inherit;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23d9bf7d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;}
[dir=rtl] .unit-scope-label select {background-position:left 12px center;}
.unit-repeat-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
.unit-menu .unit-repeat-options button {display:grid;place-items:center;min-height:44px;padding:8px;text-align:center;border:1px solid #d3b56730;border-radius:10px;background:#122a1d;color:#e6e3d2;line-height:1.5;}
.unit-menu .unit-repeat-options button[aria-pressed=true] {background:#dfc27b;color:#142719;border-color:#dfc27b;font-weight:800;}
.unit-listen-status {font-size:.71rem;line-height:1.8;margin:12px 0 0;color:#e0c98b;}
.unit-listen-status:empty {display:none;}
.unit-listening-footer {flex-shrink:0;padding:16px 0 0;margin:0;border:0;text-align:inherit;}
.unit-menu .unit-start {display:flex;align-items:center;justify-content:center;text-align:center;width:100%;min-height:48px;padding:10px 14px;border:1px solid #e9cd86;border-radius:12px;background:linear-gradient(120deg,#dfb85e,#eed38a);color:#142719;font-size:.79rem;line-height:1.6;font-weight:800;}
.unit-menu .unit-start:disabled {opacity:.4;cursor:default;}
.qvoice-dialog.qvoice-compact {padding:16px;}
.qvoice-compact .qvoice-eyebrow {margin-bottom:4px;}
.qvoice-compact h2 {font-size:1.05rem;}
.qvoice-compact header {margin-bottom:10px;}
.qvoice-compact .qvoice-search {margin-bottom:10px;}
.qvoice-compact .qvoice-search .input {min-height:40px;}
.qvoice-compact .qvoice-list button {min-height:66px;padding:10px;}
@media(max-width:850px){.media-workspace{grid-template-columns:1fr;gap:24px;}.media-preview-column{position:static;}.media-preview-shell canvas{max-height:450px;}.media-head{margin-bottom:22px;}.media-head p{font-size:.8rem;}.media-head h1{font-size:1.9rem;}}
@media(max-width:600px){.unit-menu.unit-listening-panel{top:auto!important;bottom:84px;left:12px!important;max-height:calc(100dvh - 110px);width:calc(100vw - 24px);max-width:360px;}}
@media(max-width:480px){.qvoice-overlay{align-items:flex-end;padding:12px;}.qvoice-dialog{padding:20px;max-height:calc(100dvh - 24px);}.qvoice-control{padding:12px;gap:10px;}.media-step-heading{padding:18px;}.media-basic,.media-panel{padding:18px;}.media-design>summary{padding:18px;}.media-tabs{margin-inline:18px;}.media-control-pair{gap:10px;}.media-transport{gap:10px;padding:12px;}.media-source{font-size:.59rem;}.media-step-heading small{font-size:.59rem;}}