.themePicker{position:relative;direction:rtl}
.themeMenu{position:absolute;direction:rtl;left:0;top:48px;width:304px;padding:10px;border:1px solid #dfe6e2;border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 22px 55px rgba(41,56,50,.16);display:grid;grid-template-columns:1fr 1fr;gap:7px;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:top left;transition:.18s ease;z-index:90;backdrop-filter:blur(10px)}
.themePicker.open .themeMenu{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.themeMenu button{height:42px;padding:0 11px;border:1px solid #e2e7e4;border-radius:11px;background:#fff;color:#5e6964;font-size:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.themeMenu button:hover{background:#fafcfb;border-color:#d4ddd8}
.themeMenu button.active{background:var(--theme-faint);border-color:rgba(var(--theme-rgb),.35);color:var(--theme)}
.themeMenu button i{width:18px;height:18px;border-radius:50%;display:block;flex:0 0 auto;background:var(--swatch);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
@media (max-width:1050px){.themeMenu{width:300px}}
@media (max-width:820px){.themeMenu{top:48px;width:min(304px,calc(100vw - 28px));grid-template-columns:1fr 1fr}}
@media (max-width:520px){.themeMenu{grid-template-columns:1fr 1fr;gap:7px;padding:10px}
.themeMenu button{height:40px;padding:0 9px;font-size:12px}
.themeMenu button i{width:17px;height:17px}}
.themeMenuHeader{grid-column:1/-1;min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 3px 4px 5px;border-bottom:1px solid #edf1ef;margin-bottom:1px}
.themeMenuHeader strong{font-size:12px;color:#4f5f57;font-weight:800}
.themeMenu .themeMenuClose{width:30px;min-width:30px;height:30px;padding:0;border:0;border-radius:8px;background:#f5f8f6;color:#68756f;display:grid;place-items:center;box-shadow:none}
.themeMenu .themeMenuClose:hover{background:var(--theme-faint);color:var(--theme)}
.themeMenuClose .svgIcon{width:12px;height:12px}
@media (min-width:901px){.themePicker{position:static}
.themeMenu{position:fixed;top:88px;right:18px;left:auto;width:188px;max-height:calc(100vh - 112px);overflow:auto;padding:14px;border:1px solid rgba(50,68,60,.10);border-radius:22px 0 0 22px;background:rgba(255,255,255,.94);box-shadow:-18px 24px 55px rgba(28,43,36,.16);backdrop-filter:blur(18px) saturate(1.08);-webkit-backdrop-filter:blur(18px) saturate(1.08);display:grid;grid-template-columns:repeat(3,1fr);gap:13px;opacity:0;visibility:hidden;transform:translateX(118%);transform-origin:center right;transition:transform .28s cubic-bezier(.2,.78,.2,1),opacity .2s ease,visibility .2s ease;z-index:120}
.themePicker.open .themeMenu{opacity:1;visibility:visible;transform:translateX(0)}
.themeMenuHeader{grid-column:1/-1;min-height:24px;padding:0 0 4px;border:0;margin:0;justify-content:flex-start}
.themeMenuHeader strong{display:none}
.themeMenu .themeMenuClose{margin-right:auto;width:28px;min-width:28px;height:28px;border-radius:50%;background:#f3f6f4}
.themeMenu>button[data-theme-value]{width:44px;min-width:44px;height:44px;padding:0;margin:0 auto;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;position:relative;box-shadow:none}
.themeMenu>button[data-theme-value]>span{display:none}
.themeMenu>button[data-theme-value]>i{width:32px;height:32px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.055),0 4px 12px rgba(42,58,50,.10);transition:transform .16s ease,box-shadow .16s ease}
.themeMenu>button[data-theme-value]:hover>i{transform:scale(1.12);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 7px 18px rgba(42,58,50,.16)}
.themeMenu>button[data-theme-value].active::after{content:"";position:absolute;inset:2px;border:2px solid var(--theme);border-radius:50%;box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(var(--theme-rgb),.20);pointer-events:none}
.themeMenu>button[data-theme-value]:focus-visible{outline:none}
.themeMenu>button[data-theme-value]:focus-visible::before{content:"";position:absolute;inset:-3px;border:2px solid rgba(var(--theme-rgb),.42);border-radius:50%}}
@media (min-width:901px){.themePicker{position:relative;display:flex;align-items:center;z-index:130}
.themeMenu{position:absolute;top:50%;left:calc(100% + 10px);right:auto;width:auto;max-width:none;max-height:none;overflow:visible;padding:8px 10px;border:1px solid rgba(50,68,60,.10);border-radius:17px;background:rgba(255,255,255,.96);box-shadow:0 14px 34px rgba(28,43,36,.13);backdrop-filter:blur(16px) saturate(1.06);-webkit-backdrop-filter:blur(16px) saturate(1.06);display:flex;align-items:center;gap:5px;opacity:0;visibility:hidden;transform:translate(-10px,-50%) scale(.975);transform-origin:left center;transition:transform .22s cubic-bezier(.2,.78,.2,1),opacity .16s ease,visibility .16s ease;z-index:135;white-space:nowrap}
.themePicker.open .themeMenu{opacity:1;visibility:visible;transform:translate(0,-50%) scale(1)}
.themeMenuHeader{display:none}
.themeMenu>button[data-theme-value]{width:36px;min-width:36px;height:36px;padding:0;margin:0;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;position:relative;box-shadow:none;flex:0 0 36px}
.themeMenu>button[data-theme-value]>span{display:none}
.themeMenu>button[data-theme-value]>i{width:27px;height:27px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.055),0 3px 9px rgba(42,58,50,.10);transition:transform .15s ease,box-shadow .15s ease}
.themeMenu>button[data-theme-value]:hover>i{transform:scale(1.13);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04),0 6px 14px rgba(42,58,50,.16)}
.themeMenu>button[data-theme-value].active::after{content:"";position:absolute;inset:2px;border:2px solid var(--theme);border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(var(--theme-rgb),.20);pointer-events:none}
.themeMenu>button[data-theme-value]:focus-visible{outline:none}
.themeMenu>button[data-theme-value]:focus-visible::before{content:"";position:absolute;inset:-2px;border:2px solid rgba(var(--theme-rgb),.42);border-radius:50%}}
@media (min-width:901px) and (max-width:1120px){.themeMenu{width:252px;display:grid;grid-template-columns:repeat(6,36px);justify-content:center;gap:5px;white-space:normal}}
@media (min-width:901px){.themePicker{position:relative;display:flex;align-items:center}
.themePicker .themeMenu{top:50%;bottom:auto;left:calc(100% + 10px);right:auto;transform:translate(-10px,-50%) scale(.975);transform-origin:left center}
.themePicker.open .themeMenu{transform:translate(0,-50%) scale(1)}}
.topBar,.sidePanel,.legacyMobileUiHidden,.mobileBottomNav,.mobileBottomSheet,.mobileSheetBackdrop{display:none}
.playerSettingsBackdrop{position:fixed;inset:0;z-index:11990;border:0;opacity:0;transition:.2s ease}
.playerSettingsBackdrop.open{opacity:1;visibility:visible;pointer-events:auto}
.playerSettingsDrawerHead{display:flex;align-items:center;justify-content:space-between}
#playerSettingsClose{border:1px solid rgba(255,255,255,.14);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;line-height:1;cursor:pointer}
.playerSettingsDrawer .sidePanelBody{display:block;padding:0}
.playerSettingsDrawer .modeTabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:10px}
.playerSettingsDrawer .tab{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.8)}
.playerSettingsDrawer .tab.active{background:#fff;color:var(--theme-dark)}
.playerSettingsDrawer .panelDivider{border-color:rgba(255,255,255,.12)}
.playerSettingsDrawer .compactFilters{display:flex;flex-direction:column}
.playerSettingsDrawer .compactField{border-color:rgba(255,255,255,.12)}
.playerSettingsDrawer .compactField>span,.playerSettingsDrawer .advancedBox summary,.playerSettingsDrawer .checkLabel,.playerSettingsDrawer .fontBoxHead span{color:rgba(255,255,255,.78)}
.playerSettingsDrawer select,.playerSettingsDrawer input[type=number]{background:rgba(255,255,255,.96);color:#183029}
.playerSettingsDrawer .advancedBox{border-color:rgba(255,255,255,.12)}
.playerSettingsDrawer .fontPresets button{border-color:rgba(255,255,255,.12)}
.playerSettingsDrawer .themeMenu{margin-top:8px;border-color:rgba(255,255,255,.12)}
.playerSettingsDrawer .themePicker.open .themeMenu{display:grid;opacity:1;visibility:visible;pointer-events:auto}
@media (max-width:820px){.playerSettingsDrawer{width:min(360px,94vw)}}
.playerSettingsDrawerHead{margin:0 0 10px;padding:2px 2px 8px;border-bottom:1px solid rgba(255,255,255,.10)}
.playerSettingsDrawerHead strong{font-weight:900;letter-spacing:0}
.playerSettingsDrawer #displayModeTabs,.playerSettingsDrawer .panelDividerTop{display:none}
.playerSettingsDrawer .compactFilters{gap:8px}
.playerSettingsDrawer .compactField{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:8px;min-height:46px;padding:6px 8px;border:1px solid rgba(255,255,255,.11);border-radius:13px;background:rgba(255,255,255,.055)}
.playerSettingsDrawer .compactField>span{margin:0;color:rgba(255,255,255,.60);font-size:10.5px;font-weight:800}
.playerSettingsDrawer select{width:100%;height:34px;padding:0 9px;border:1px solid rgba(255,255,255,.10);border-radius:9px;box-shadow:none;outline:none}
.playerSettingsDrawer select:focus{border-color:rgba(255,255,255,.28);box-shadow:0 0 0 3px rgba(255,255,255,.05)}
.playerSettingsDrawer .advancedBox{margin-top:9px;border:1px solid rgba(255,255,255,.10);border-radius:14px;background:rgba(255,255,255,.045);overflow:hidden}
.playerSettingsDrawer .advancedBox summary{min-height:42px;padding:8px 11px;color:rgba(255,255,255,.78);font-size:11.5px;font-weight:900}
.playerSettingsDrawer .advancedBody{padding:0 9px 10px}
.playerSettingsDrawer .settingRangeBox{padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(0,0,0,.10)}
.playerSettingsDrawer .fontBoxHead span{color:rgba(255,255,255,.62)}
.playerSettingsDrawer .fontBoxHead strong{color:#fff}
.playerSettingsDrawer .fontPresets{gap:5px}
.playerSettingsDrawer .fontPresets button{min-height:32px;border-radius:8px;background:rgba(255,255,255,.07);color:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.10)}
body[data-unified] .playerSettingsDrawer .fontPresets button{padding:6px 10px;flex:1 1 0;min-width:0;text-align:center;white-space:nowrap}
.playerSettingsDrawer .fontPresets button.active{background:rgba(255,255,255,.92);color:var(--theme-dark)}
.playerSettingsDrawer .checkStack{margin-top:8px}
.playerSettingsDrawer .checkLabel{min-height:40px;padding:7px 9px;border-radius:10px;color:rgba(255,255,255,.78)}
.playerSettingsDrawer .themePickerInDrawer{position:relative;align-items:center;justify-content:space-between;border-radius:13px}
.playerSettingsDrawer .themeMenu{top:50px;right:0;left:0;z-index:8}
.playerSettingsDrawer .themeMenu button{min-height:38px;background:rgba(255,255,255,.045);color:rgba(255,255,255,.82);border-color:rgba(255,255,255,.07)}
.playerSettingsDrawer .themeMenu button:hover,.playerSettingsDrawer .themeMenu button.active{background:rgba(255,255,255,.12);color:#fff}
.playerSettingsDrawer .themeMenuHeader strong{color:#fff}
@media (max-width:820px){.playerSettingsDrawer{top:max(52px,calc(env(safe-area-inset-top) + 45px));right:8px;width:min(344px,calc(100vw - 16px));max-height:calc(100dvh - max(66px,calc(env(safe-area-inset-top) + 58px)));border-radius:18px}}
.playerSettingsDrawer{height:auto;padding:10px;transform-origin:top right}
.playerSettingsDrawerHead{margin-bottom:7px}
.playerSettingsDrawerHead strong{font-size:12px;color:rgba(255,255,255,.84)}
#playerSettingsClose{width:30px;height:30px;font-size:20px}
.playerSettingsDrawer .checkStack,.playerSettingsDrawer #checkSettingsBox{background:transparent;border:0;box-shadow:none;padding:0}
.playerSettingsDrawer .checkLabel{background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.09)}
.playerSettingsDrawer .checkLabel input{accent-color:#fff}
.playerSettingsDrawer .themePickerInDrawer{display:block;min-height:0;padding:0;margin:0 0 8px;border:0;background:transparent}
.playerSettingsDrawer .themePickerInDrawer::before{content:"رنگ پوسته";display:block;margin:0 2px 6px;color:rgba(255,255,255,.58);font-size:10px;font-weight:900}
.playerSettingsDrawer .themeMenu{position:static;display:flex;flex-direction:column;gap:4px;width:100%;max-height:178px;overflow:auto;margin:0;padding:4px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.035);box-shadow:none;opacity:1;visibility:visible;pointer-events:auto;transform:none}
.playerSettingsDrawer .themeMenuHeader{display:none}
.playerSettingsDrawer .themeMenu>button[data-theme-value]{display:flex;flex:0 0 auto;width:100%;min-height:31px;height:31px;padding:0 8px;align-items:center;justify-content:space-between;border-radius:8px;background:transparent;color:rgba(255,255,255,.75);border:1px solid transparent}
.playerSettingsDrawer .themeMenu>button[data-theme-value]>span{display:block;font-size:10.5px;font-weight:800}
.playerSettingsDrawer .themeMenu>button[data-theme-value]>i{display:block;width:17px;min-width:17px;height:17px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px rgba(255,255,255,.22)}
.playerSettingsDrawer .themeMenu>button[data-theme-value].active{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.11);color:#fff}
.playerSettingsDrawer .themeMenu>button[data-theme-value].active::after{display:none}
@media (max-width:820px){.playerSettingsDrawer{top:max(50px,calc(env(safe-area-inset-top) + 43px));right:8px;width:min(310px,calc(100vw - 16px));border-radius:15px}}
.themePickerTop .themeMenuHeader{display:none}
.themePickerTop .themeMenu>button[data-theme-value].active::after{box-shadow:none}
.themePickerTop .kidsSwatch{background:linear-gradient(135deg,#6b58b7,#ffb34d,#62c5b6)}
.playerSettingsDrawer .themePicker{display:none}
.playerSettingsDrawer,.playerSettingsDrawer .advancedBody,.playerSettingsDrawer .fontBox,.playerSettingsDrawer .settingRangeBox,.playerSettingsDrawer .checkStack,.playerSettingsDrawer #checkSettingsBox{background:transparent}
@media (max-width:820px){.themePickerTop .themeMenu{right:-3px;width:44px;min-width:44px;max-width:44px;padding:6px}}
.themePickerTop .themeMenu{position:absolute;top:calc(100% + 8px);right:0;left:auto;margin:0;flex-direction:column;border:1px solid rgba(255,255,255,.18);background:color-mix(in srgb,var(--theme-darker) 90%,#071713 10%);box-shadow:0 16px 40px rgba(0,0,0,.24);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-5px) scale(.98);transition:opacity .16s ease,transform .16s ease,visibility .16s ease;z-index:13100}
.themePickerTop.open .themeMenu{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.themePickerTop .themeMenu>button[data-theme-value]{position:relative;display:grid;place-items:center;padding:0;margin:0;border:0;border-radius:50%;background:transparent;flex:0 0 32px}
.themePickerTop .themeMenu>button[data-theme-value]>span{display:none}
.themePickerTop .themeMenu>button[data-theme-value]>i{display:block;width:22px;height:22px;border-radius:50%;background:var(--swatch);box-shadow:0 0 0 1px rgba(255,255,255,.30)}
.themePickerTop .themeMenu>button[data-theme-value].active::after{content:"";position:absolute;inset:2px;border:2px solid #fff;border-radius:50%}
#checkSettingsBox,.playerSettingsDrawer .checkStack,.playerSettingsDrawer .themePicker{display:none}
@media (max-width:820px){.playerSettingsDrawer{right:8px;top:max(51px,calc(env(safe-area-inset-top) + 43px));width:min(310px,calc(100vw - 16px))}}
.playerSettingsBackdrop{background:rgba(0,0,0,.20)}
.playerSettingsDrawer .sidePanelBody,.playerSettingsDrawer .advancedBody,.playerSettingsDrawer .fontBox,.playerSettingsDrawer .settingRangeBox{background:transparent}
.playerSettingsDrawer .compactField,.playerSettingsDrawer .advancedBox{background:rgba(255,255,255,.065)}
.playerSettingsDrawer select{background:#173a32;color:#fff;border-color:rgba(255,255,255,.18);color-scheme:dark}
.themePickerTop .themeMenu{width:164px;min-width:164px;max-width:164px;height:auto;max-height:none;overflow:visible;display:grid;grid-template-columns:repeat(4,32px);grid-auto-rows:32px;place-content:center;justify-content:center;align-content:center;gap:7px;padding:10px;border-radius:18px}
.themePickerTop.open .themeMenu{display:grid}
.themePickerTop .themeMenu>button[data-theme-value]{width:32px;height:32px;min-width:32px;min-height:32px;justify-self:center;align-self:center}
@media (max-width:820px){.themePickerTop .themeMenu{right:0;width:157px;min-width:157px;max-width:157px;grid-template-columns:repeat(4,30px);grid-auto-rows:30px;gap:7px;padding:9px}
.themePickerTop .themeMenu>button[data-theme-value]{width:30px;height:30px;min-width:30px;min-height:30px}
.themePickerTop .themeMenu>button[data-theme-value]>i{width:21px;height:21px}}
.playerSettingsDrawer{border-color:rgba(255,255,255,.18)}
.playerSettingsDrawer .advancedBody,.playerSettingsDrawer .fontBox,.playerSettingsDrawer .settingRangeBox,.playerSettingsDrawer .checkStack,.playerSettingsDrawer .filterStack,.playerSettingsDrawer label{color:#fff}
.playerSettingsDrawer .filterStack label>span,.playerSettingsDrawer .learningControls label>span,.playerSettingsDrawer .fontBoxHead span,.playerSettingsDrawer .speedBoxHead span{color:rgba(255,255,255,.82)}
.playerSettingsDrawer select,.playerSettingsDrawer input[type="number"]{box-shadow:none}
.playerSettingsDrawer select:hover,.playerSettingsDrawer select:focus,.playerSettingsDrawer input[type="number"]:focus{background:var(--theme-darker);color:#fff;border-color:rgba(255,255,255,.34);outline:none}
.playerSettingsBackdrop{display:none;visibility:hidden;pointer-events:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.playerSettingsDrawer{position:fixed;top:max(60px,calc(env(safe-area-inset-top) + 52px));right:12px;left:auto;width:min(320px,calc(100vw - 24px));max-height:calc(100dvh - max(76px,calc(env(safe-area-inset-top) + 68px)));overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;transform:translateY(-6px) scale(.985);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s ease,transform .14s ease,visibility .14s ease;background:var(--theme-dark);color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:18px;box-shadow:0 18px 44px rgba(0,0,0,.28);backdrop-filter:none;-webkit-backdrop-filter:none;contain:layout paint;z-index:14050}
.playerSettingsDrawer.open{opacity:1;visibility:visible;pointer-events:auto;transform:none}
body.playerSettingsOpen{overflow:auto}
.playerSettingsDrawer .compactField,.playerSettingsDrawer .advancedBox,.playerSettingsDrawer .fontBox,.playerSettingsDrawer .settingRangeBox{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.11);box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
.playerSettingsDrawer select,.playerSettingsDrawer input[type="number"]{background:var(--theme-darker);color:#fff;border-color:rgba(255,255,255,.18);color-scheme:dark}
.playerSettingsDrawer select option{background:var(--theme-darker);color:#fff}
@media (max-width:820px){.playerSettingsDrawer{right:8px;width:min(310px,calc(100vw - 16px))}}
.playerSettingsDrawer .advancedBox:has(#fontSettingsBox),.playerSettingsDrawer .fontPresets{display:none}
.playerSettingsDrawer .compactFilters .compactField,.playerSettingsDrawer .compactFilters .compactField:focus-within{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);box-shadow:none}
.playerSettingsDrawer .compactFilters .compactField:focus-within{border-color:rgba(255,255,255,.26)}
.playerSettingsDrawer .compactFilters .fieldPrefix,.playerSettingsDrawer .compactFilters .compactField:focus-within .fieldPrefix{color:rgba(255,255,255,.64)}
.playerSettingsDrawer .compactFilters select,.playerSettingsDrawer .compactFilters select:hover,.playerSettingsDrawer .compactFilters select:focus{background:var(--theme-darker);color:#fff;border:0;outline:none;box-shadow:none}
.communityOverlay{position:fixed;z-index:20000;inset:0;display:grid;place-items:center;padding:20px;background:rgba(4,14,12,.56);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,visibility .18s ease}
.communityOverlay.open{opacity:1;visibility:visible;pointer-events:auto}
.communityDialog{width:min(680px,calc(100vw - 32px));max-height:min(82dvh,760px);display:flex;flex-direction:column;overflow:hidden;direction:rtl;color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--theme-dark) 96%,#07140f 4%),color-mix(in srgb,var(--theme-darker) 97%,#030b08 3%));border:1px solid rgba(255,255,255,.18);box-shadow:0 26px 80px rgba(0,0,0,.38)}
.communityDialogHead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;border-bottom:1px solid rgba(255,255,255,.12)}
.communityDialogHead>div{display:flex;flex-direction:column;gap:5px}
.communityDialogHead strong{font:800 18px/1.4 Yekan,Tahoma,Arial,sans-serif}
.communityDialogHead span{color:rgba(255,255,255,.66);font:500 11px/1.7 Yekan,Tahoma,Arial,sans-serif}
.communityCloseBtn{width:36px;height:36px;min-width:36px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.15);border-radius:50%;background:rgba(255,255,255,.07);color:#fff;cursor:pointer}
.communityCloseBtn .svgIcon{font-size:14px}
.communityDialogBody{overflow:auto;overscroll-behavior:contain}
.communityForm{display:grid}
.communityForm label{display:grid;gap:6px}
.communityForm label>span{font:700 11px/1.4 Yekan,Tahoma,Arial,sans-serif;color:rgba(255,255,255,.72)}
.communityForm input,.communityForm textarea{width:100%;box-sizing:border-box;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:#fff;font:500 13px/1.8 Yekan,Tahoma,Arial,sans-serif;outline:none;box-shadow:none}
.communityForm textarea{resize:vertical}
.communityForm input:focus,.communityForm textarea:focus{border-color:rgba(255,255,255,.36);background:rgba(255,255,255,.09)}
.communityFormFoot{display:flex;align-items:center;gap:10px;min-height:38px}
.communityFormFoot>span{flex:1;color:rgba(255,255,255,.72);font:500 11px/1.6 Yekan,Tahoma,Arial,sans-serif}
.communityFormFoot button{border:1px solid rgba(255,255,255,.16);background:#fff;color:var(--theme-dark);font:800 12px/1.4 Yekan,Tahoma,Arial,sans-serif;cursor:pointer}
.communityFormFoot button:disabled{opacity:.55;cursor:default}
.latestComments{border-top:1px solid rgba(255,255,255,.12)}
.latestCommentsTitle{margin-bottom:8px;color:#fff;font:800 13px/1.5 Yekan,Tahoma,Arial,sans-serif}
.commentItem{padding:11px 1px;border-bottom:1px solid rgba(255,255,255,.10)}
.commentItem:last-child{border-bottom:0}
.commentItemHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:5px}
.commentItemName{font:800 12px/1.5 Yekan,Tahoma,Arial,sans-serif}
.commentItemDate{direction:ltr;color:rgba(255,255,255,.45);font:500 9px/1.3 Tahoma,Arial,sans-serif}
.commentItemText{color:rgba(255,255,255,.84);font:500 12px/1.9 Yekan,Tahoma,Arial,sans-serif;white-space:pre-wrap;overflow-wrap:anywhere}
.commentsEmpty{padding:8px 0;color:rgba(255,255,255,.56);font:500 11px/1.7 Yekan,Tahoma,Arial,sans-serif}
.communityOverlay.isOffline .latestCommentsTitle::after{content:" · آفلاین";font-weight:400;opacity:.55}
body.communityDialogOpen{overflow:hidden}
@media (max-width:620px){.communityOverlay{padding:0;align-items:end}
.communityDialog{width:100%;max-height:92dvh;border-radius:22px 22px 0 0;border-right:0;border-left:0;border-bottom:0}
.communityDialogHead{padding:16px 16px 12px}
.communityDialogBody{padding:14px 16px max(18px,env(safe-area-inset-bottom))}}
.communityDialog{border-radius:14px}
.communityDialogHead{position:relative;z-index:2;padding:14px 16px 11px;background:linear-gradient(160deg,color-mix(in srgb,var(--theme-dark) 97%,#07140f 3%),color-mix(in srgb,var(--theme-darker) 98%,#030b08 2%))}
.communityDialogBody{padding:13px 16px 16px}
.communityForm{gap:9px}
.communityForm input,.communityForm textarea{border-radius:9px;padding:9px 11px}
.communityForm textarea{min-height:66px;max-height:128px}
.communityFormFoot button{border-radius:9px;padding:8px 15px}
.latestComments{margin-top:14px;padding-top:13px}
@media (max-width:620px){.communityDialog{border-radius:14px 14px 0 0}
.communityDialogHead{padding:13px 14px 10px}
.communityDialogBody{padding:12px 14px max(15px,env(safe-area-inset-bottom))}
.communityForm textarea{min-height:62px}}
.centerLikeHeart{position:fixed;left:50%;top:50%;z-index:26000;width:240px;height:240px;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.52);background:linear-gradient(135deg,#ff315a 0%,#ff596e 34%,#ff7a52 66%,#ff2e78 100%);-webkit-mask:url("/icons/heart.svg") center/contain no-repeat;mask:url("/icons/heart.svg") center/contain no-repeat;filter:drop-shadow(0 20px 38px rgba(216,32,75,.28)) drop-shadow(0 6px 15px rgba(255,111,89,.18));animation:centerLikeHeartPop 2.25s cubic-bezier(.2,.7,.25,1) forwards}
@keyframes centerLikeHeartPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.48)}18%{opacity:.96;transform:translate(-50%,-50%) scale(.93)}38%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}58%{opacity:.96;transform:translate(-50%,-50%) scale(1)}78%{opacity:.62;transform:translate(-50%,-50%) scale(1.03)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.09)}}
@media (max-width:760px){.centerLikeHeart{width:228px;height:228px}}
@media (prefers-reduced-motion:reduce){.centerLikeHeart{display:none}}
.pwaSettingsBox{margin-top:10px;padding:10px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:rgba(255,255,255,.06);display:grid;gap:8px}
.pwaSettingsTitle{font:800 11px/1.5 Yekan,Tahoma,Arial,sans-serif;color:rgba(255,255,255,.9)}
.pwaActionBtn{width:100%;min-height:36px;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:rgba(255,255,255,.09);color:#fff;font:700 11px/1.4 Yekan,Tahoma,Arial,sans-serif;cursor:pointer}
.pwaActionBtn:hover{background:rgba(255,255,255,.13)}
.pwaActionBtn:disabled{opacity:.6;cursor:default}
.appPromptOverlay{position:fixed;z-index:26000;inset:0;display:grid;place-items:center;padding:18px;background:rgba(4,14,12,.56);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,visibility .16s ease}
.appPromptOverlay.open{opacity:1;visibility:visible;pointer-events:auto}
.appPromptDialog{position:relative;width:min(410px,calc(100vw - 30px));padding:24px 20px 18px;border:1px solid rgba(255,255,255,.18);border-radius:15px;background:linear-gradient(155deg,color-mix(in srgb,var(--theme-dark) 96%,#07140f 4%),color-mix(in srgb,var(--theme-darker) 98%,#030b08 2%));color:#fff;box-shadow:0 26px 80px rgba(0,0,0,.36);direction:rtl}
.appPromptDialog>strong{display:block;padding-left:34px;font:850 17px/1.5 Yekan,Tahoma,Arial,sans-serif}
.appPromptDialog>p{margin:8px 0 16px;color:rgba(255,255,255,.78);font:500 12px/1.9 Yekan,Tahoma,Arial,sans-serif}
.appPromptClose{position:absolute;left:12px;top:12px;width:32px;height:32px;border:1px solid rgba(255,255,255,.13);border-radius:9px;background:rgba(255,255,255,.06);color:#fff;display:grid;place-items:center;cursor:pointer}
.appPromptActions{display:flex;gap:8px;justify-content:flex-start}
.appPromptActions button{min-width:96px;border-radius:9px;padding:9px 14px;font:800 11px/1.4 Yekan,Tahoma,Arial,sans-serif;cursor:pointer}
.appPromptPrimary{border:1px solid #fff;background:#fff;color:var(--theme-dark)}
.appPromptSecondary{border:1px solid rgba(255,255,255,.16);background:transparent;color:#fff}
@media (max-width:520px){.appPromptOverlay{align-items:end;padding:0}
.appPromptDialog{width:100%;border-radius:15px 15px 0 0;border-left:0;border-right:0;border-bottom:0;padding:22px 16px max(18px,env(safe-area-inset-bottom))}
.appPromptActions{display:grid;grid-template-columns:1fr 1fr}
.appPromptActions button{min-width:0}}
@media (prefers-reduced-motion:reduce){.appPromptOverlay,.appPromptDialog{transition:none}}
.themeMenu button[data-theme-value="emerald"] i{--swatch:#0d6f61}
.themeMenu button[data-theme-value="navy"] i{--swatch:#183f63}
.themeMenu button[data-theme-value="turquoise"] i{--swatch:#13899b}
.themeMenu button[data-theme-value="blue"] i{--swatch:#2d73ad}
.themeMenu button[data-theme-value="purple"] i{--swatch:#694aa6}
.themeMenu button[data-theme-value="lilac"] i{--swatch:#8c5aa8}
.themeMenu button[data-theme-value="rose"] i{--swatch:#b04c6f}
.themeMenu button[data-theme-value="peach"] i{--swatch:#b86752}
.themeMenu button[data-theme-value="amber"] i{--swatch:#a97018}
.themeMenu button[data-theme-value="graphite"] i{--swatch:#4f5c63}
.readerTopTools{position:fixed;top:max(10px,env(safe-area-inset-top));left:12px;right:12px;width:auto;display:flex;align-items:center;justify-content:space-between;direction:ltr;pointer-events:none;z-index:13000}
.readerTopLeft,.readerTopRight{display:flex;align-items:center;gap:7px;direction:ltr;pointer-events:auto}
.readerTopTool,.themePickerTop,.themePickerTop .themeToggle{pointer-events:auto}
.readerTopTool,.themePickerTop .themeToggle{display:grid;place-items:center;width:42px;min-width:42px;height:42px;min-height:42px;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:#fff;cursor:pointer;outline:none;transition:opacity .16s ease,transform .16s ease,color .16s ease}
.readerTopTool:hover,.themePickerTop .themeToggle:hover,.readerTopTool[aria-expanded="true"],.readerTopTool[aria-pressed="true"]{background:transparent;border:0;opacity:.82;transform:scale(1.06)}
.readerTopTool:focus-visible,.themePickerTop .themeToggle:focus-visible{outline:2px solid rgba(255,255,255,.78);outline-offset:3px;border-radius:8px}
.readerTopTool .svgIcon{width:18px;height:18px;font-size:17px}
.themePickerTop{position:relative;display:grid;place-items:center}
.themePickerTop .themeDot{position:relative;display:block;width:21px;height:21px;border:2px solid rgba(255,255,255,.92);border-radius:50%;background:linear-gradient(135deg,var(--theme),var(--theme-dark));box-shadow:0 4px 12px rgba(0,0,0,.14);transition:transform .16s ease,box-shadow .16s ease}
.themePickerTop .themeDot::after{content:"";position:absolute;inset:-4px;border:1.5px solid rgba(255,255,255,.72);border-radius:50%;pointer-events:none;animation:themeDotPulse 2.2s ease-in-out infinite}
@keyframes themeDotPulse{0%,100%{opacity:.72;transform:scale(.92)}50%{opacity:.18;transform:scale(1.24)}}
.themePickerTop .themeToggle:hover .themeDot{transform:scale(1.08)}
@media(prefers-reduced-motion:reduce){.themePickerTop .themeDot,.themePickerTop .themeDot::after{animation:none}}
.readerTopLeft .siteLikeBtn{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;width:auto;min-width:46px;height:46px;min-height:46px;padding:4px}
.readerTopLeft .siteLikeBtn .icon-heart{font-size:22px;width:22px;height:22px}
.readerTopLeft .siteLikeBtn.isLiked .icon-heart{color:#e32636;transform:scale(1.06)}
.siteLikeBtn .siteLikeCount{position:static;display:block;min-width:0;height:auto;padding:0;border:0;border-radius:0;background:transparent;color:inherit;font:700 11px/1 Yekan,Tahoma,Arial,sans-serif;box-shadow:none;white-space:nowrap}
@media(max-width:820px){.readerTopTools{top:max(7px,env(safe-area-inset-top));left:8px;right:8px}
.readerTopTool,.themePickerTop .themeToggle{width:39px;min-width:39px;height:39px;min-height:39px}
.readerTopTool .svgIcon{width:16px;height:16px;font-size:16px}
.themePickerTop .themeDot{width:19px;height:19px}}
@media(max-width:760px){.readerTopLeft .siteLikeBtn{width:auto;min-width:42px;height:42px;min-height:42px;padding:4px}
.readerTopLeft .siteLikeBtn .icon-heart{font-size:21px;width:21px;height:21px}
.siteLikeBtn .siteLikeCount{font-size:11px}}
@media(max-width:620px){.readerTopLeft{gap:5px}}
.pwaUpdateBox{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.7);font:500 9.5px/1.7 Yekan,Tahoma,Arial,sans-serif}
.pwaUpdateBtn{width:auto;min-width:92px;flex:0 0 auto}
.pwaActivity{position:fixed;z-index:25000;left:50%;bottom:max(18px,env(safe-area-inset-bottom));width:min(430px,calc(100vw - 28px));padding:11px 13px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:linear-gradient(155deg,color-mix(in srgb,var(--theme-dark) 97%,#07140f 3%),color-mix(in srgb,var(--theme-darker) 98%,#030b08 2%));color:#fff;box-shadow:0 18px 48px rgba(0,0,0,.25);opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,12px);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}
.pwaActivity.show{opacity:1;visibility:visible;transform:translate(-50%,0)}
.pwaActivityHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px;font:650 10.5px/1.6 Yekan,Tahoma,Arial,sans-serif}
.pwaActivityHead strong{font-weight:800}
.pwaActivity progress{display:block;width:100%;height:6px;accent-color:#fff}
@media(max-width:520px){.pwaActivity{bottom:max(10px,env(safe-area-inset-bottom));width:calc(100vw - 20px);border-radius:11px}}
@media(prefers-reduced-motion:reduce){.pwaActivity{transition:none}}
.listenCard .fullscreenReaderTools .readerTopRight{gap:7px}
.pwaOption{display:grid;gap:7px;min-width:0}
.pwaOption[hidden],.pwaUpdateBox[hidden]{display:none}
.pwaInstallOption:not([hidden])+.pwaAudioOption{padding-top:12px;margin-top:3px;border-top:1px solid rgba(255,255,255,.15)}
.pwaSettingsTitle{font-size:12px}
.pwaOptionTitle{color:#fff;font:800 11px/1.6 Yekan,Tahoma,Arial,sans-serif}
.pwaOptionHint{color:rgba(255,255,255,.78);font:500 10px/1.9 Yekan,Tahoma,Arial,sans-serif}
.pwaInstallOption .pwaActionBtn{background:#fff;border-color:#fff;color:var(--theme-dark)}
.pwaInstallOption .pwaActionBtn:hover{background:rgba(255,255,255,.9)}
.pwaOption .pwaActionBtn{min-height:40px;padding:8px 10px}
.pwaOption .offlineDownloadMeta{font-size:10px;color:rgba(255,255,255,.78)}
.pwaUpdateBox{align-items:flex-start}
.pwaUpdateBox>span{min-width:0}
.readerTopTool.downloadToolbarBtn{position:relative;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.08);color:#fff}
.readerTopTool.downloadToolbarBtn:hover,.readerTopTool.downloadToolbarBtn[aria-expanded="true"]{border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.16);opacity:1;transform:none}
.readerTopTool.downloadToolbarBtn:focus-visible{border-radius:50%;outline:2px solid #fff;outline-offset:3px}
.downloadToolbarBtn[data-update-available="true"]::after{content:"";position:absolute;top:2px;right:2px;width:7px;height:7px;border:1px solid var(--theme-dark);border-radius:50%;background:#fff}
.downloadPopover{position:fixed;z-index:14500;box-sizing:border-box;width:min(320px,calc(100vw - 16px));max-height:calc(100dvh - 70px);overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:12px;border:1px solid rgba(255,255,255,.2);border-radius:18px;background:var(--theme-dark);color:#fff;direction:rtl;box-shadow:0 18px 46px rgba(0,0,0,.28)}
.downloadPopover[hidden]{display:none!important}
.downloadPopoverHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.downloadPopoverHead strong{font:800 13px/1.6 Yekan,Tahoma,Arial,sans-serif}
.downloadPopoverClose{display:grid;place-items:center;flex:0 0 32px;width:32px;height:32px;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:rgba(255,255,255,.08);color:#fff;cursor:pointer}
.downloadPopoverClose .svgIcon{width:12px;height:12px}
.downloadPopoverClose:hover{background:rgba(255,255,255,.18)}
.downloadPopoverClose:focus-visible{outline:2px solid #fff;outline-offset:2px}
.downloadPopover .pwaSettingsBox{display:grid;gap:10px;margin:0;padding:0;border:0;border-radius:0;background:transparent}
.downloadPopover .pwaSettingsTitle{display:none}
.downloadPopover .pwaOption{gap:8px;padding:12px;border:1px solid rgba(255,255,255,.15);border-radius:14px;background:rgba(255,255,255,.065)}
.downloadPopover .pwaInstallOption:not([hidden])+.pwaAudioOption{margin-top:0;padding-top:12px;border-top:1px solid rgba(255,255,255,.15)}
.downloadPopover .pwaOptionTitle{font-size:12px}
.downloadPopover .pwaOptionHint,.downloadPopover .offlineDownloadMeta{margin:0;color:rgba(255,255,255,.8);font:500 11px/1.9 Yekan,Tahoma,Arial,sans-serif;overflow-wrap:anywhere}
.downloadPopover .pwaOption .pwaActionBtn{min-height:42px;border-radius:11px;font-size:12px}
.downloadPopover .pwaActionBtn[hidden],.downloadPopover .pwaOption[hidden]{display:none}
.downloadPopover .offlineDownloadBar{width:100%;height:6px;margin:0;accent-color:#fff}
.downloadPopover .offlineDownloadBar[hidden]{display:none}
.downloadPopover .pwaUpdateBox{padding-top:10px;font-size:10.5px}
.readerTopRight:has(.downloadToolbarBtn){min-width:0}
.readerTopRight:has(.downloadToolbarBtn) .activeDuaLabel{min-width:0;flex:0 1 auto;max-width:min(30vw,220px)}
@media(max-width:620px){.readerTopTools:has(.downloadToolbarBtn){gap:6px}
.readerTopTools:has(.downloadToolbarBtn) .readerTopLeft{flex:0 0 auto}
.readerTopTools:has(.downloadToolbarBtn) .readerTopRight{min-width:0;flex:1 1 auto;justify-content:flex-end;gap:4px}
.readerTopRight:has(.downloadToolbarBtn) .activeDuaLabel{max-width:max(0px,min(30vw,calc(100vw - 286px)))}
.readerTopRight:has(.downloadToolbarBtn) .themePickerTop{flex:0 0 auto}}
[hidden]{display:none!important}
.unifiedNav{display:flex;align-items:center;justify-content:space-between;gap:4px;padding-top:10px;margin-top:10px;border-top:1px solid rgba(255,255,255,.16)}
.unifiedNav a,.unifiedNav button{border:0;border-radius:12px;color:#fff;text-decoration:none;background:transparent;padding:8px 12px;font:inherit;font-size:12px;cursor:pointer}
.unifiedNav .active{background:rgba(255,255,255,.14)}
.unifiedHome{min-height:calc(100svh - 70px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:82px 20px 60px;color:#fff;text-align:center}
.homeMark{font-size:60px;opacity:.85;line-height:1.2}.unifiedHome h1{font-size:30px;margin:12px 0 4px}.unifiedHome>p{font-size:14px;opacity:.76;margin:0 0 30px}
.homeChoices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(660px,100%)}
.homeChoice{display:flex;flex-direction:column;align-items:center;gap:16px;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.23);border-radius:22px;text-decoration:none;padding:38px 15px;transition:background .2s}
.homeChoice:hover,.homeChoice:focus-visible{background:rgba(255,255,255,.16)}.homeChoice>.svgIcon{width:38px;height:38px}.homeChoice>strong{font-size:20px}.homeChoice>span:last-child{font-size:12px;opacity:.78}
.unifiedHome>.homeOfflineHint{margin-top:26px;font-size:11px;max-width:280px;line-height:2}
.unifiedAbout{color:#fff;background:var(--theme-dark);border:1px solid rgba(255,255,255,.2);border-radius:20px;width:min(350px,calc(100vw - 32px));text-align:right;line-height:2;font-family:inherit;padding:22px}
.unifiedAbout::backdrop{background:rgba(0,0,0,.5)}.unifiedAbout button{font:inherit;color:var(--theme-dark);background:#fff;border:0;border-radius:14px;padding:8px 22px;cursor:pointer}
body[data-unified=quran]{background:var(--theme-dark);padding-bottom:0}
body[data-unified=quran] .appShell{display:block;width:100%;max-width:none;margin:0;padding:0}
body[data-unified=quran] main{width:100%;max-width:none;min-width:0;padding:0}
body[data-unified=quran] .listenCard{border:0;box-shadow:none;border-radius:0;background:transparent;min-height:100svh;padding:64px 18px 120px;width:100%;max-width:none}
body[data-unified=quran] .listenHeading{display:none}
body[data-unified=quran] .ayahStage{min-height:calc(100svh - 65px)}
body[data-unified=quran] .sidePanelBody{display:block!important;padding:10px;max-height:none}
body[data-unified=quran] .playerSettingsDrawer{max-height:calc(100svh - 78px);overflow:auto}
body[data-unified=quran] .playerSettingsDrawer .advancedBox{margin:10px 0 0;border-radius:12px}
body[data-unified=quran] .readerTopTools{position:fixed;z-index:11000;top:7px;left:8px;right:8px}
body[data-unified=quran] .playerPanel{position:fixed;bottom:10px;left:50%;transform:translateX(-50%);width:min(540px,calc(100vw - 20px));z-index:50;padding:8px;background:var(--theme-dark);border-radius:22px}
body[data-unified=quran] .playerQuickTools{display:flex!important;flex-wrap:nowrap!important;gap:2px;justify-content:space-evenly;border:1px solid rgba(255,255,255,.13);border-radius:999px;margin:8px auto 0;padding:3px;width:min(320px,100%);background:rgba(255,255,255,.05)}
body[data-unified=quran] .playerQuickTools>.quickToolBtn,body[data-unified=quran] .playerToolMenu>.quickToolBtn{width:34px;height:32px;min-width:0;padding:0;border:0;border-radius:50%;background:transparent;font-size:12px}
body[data-unified=quran] .playerToolDivider{display:none}body[data-unified=quran] .repeatStateLabel{display:none}
body[data-unified=quran] .playerMiniMenu{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;width:max-content;max-width:calc(100vw - 20px);padding:8px;border-radius:18px;bottom:calc(100% + 10px);background:var(--theme-dark)}
body[data-unified=quran] .playerMiniMenu button{width:42px;height:42px;min-width:42px;border-radius:50%;font-size:11px;padding:0;background:rgba(255,255,255,.08)}
body[data-unified=quran] .playerMiniMenu button.active{background:#fff;color:var(--theme-dark)}
.unifiedMore{position:relative}.unifiedMorePanel{position:absolute;bottom:calc(100% + 12px);left:0;padding:10px;background:var(--theme-dark);border:1px solid rgba(255,255,255,.2);border-radius:16px;width:220px;box-shadow:0 10px 25px rgba(0,0,0,.2)}
.unifiedMoreRow{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:12px}.unifiedMoreRow button{flex-shrink:0}
body[data-unified=quran] .unifiedFullscreen>.readerTopTools{position:absolute}
body[data-unified=quran] .unifiedFullscreen>.playerSettingsDrawer{position:absolute;top:60px;right:8px}
body[data-unified=quran] .unifiedFullscreen .playerPanel{position:absolute}
body[data-unified=quran] .unifiedFullscreen .readerTopTools,body[data-unified=quran] .unifiedFullscreen .playerSettingsDrawer{transition:opacity .2s}
body[data-unified=quran] .fullscreenControlsHidden .readerTopTools{opacity:0;pointer-events:none}
body[data-unified=quran] .mushafStage{padding-top:66px}
body[data-unified=quran] .mobileBottomNav,body[data-unified=quran] .mobileBottomSheet,body[data-unified=quran] .mobileSheetBackdrop{display:none!important}
.quranDownloadSection{border-top:1px solid rgba(255,255,255,.15);margin-top:14px;padding-top:14px}.quranDownloadSection h3{font-size:14px;margin:0 0 10px}.quranDownloadSection label{display:block;font-size:12px;margin:7px 0}.quranDownloadSection .downloadField{position:relative;display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:8px;direction:rtl;text-align:right;min-height:44px;padding:0 10px;border:1px solid rgba(255,255,255,.18);border-radius:9px;background:rgba(255,255,255,.07);color:#fff}
.quranDownloadSection .downloadField::after{content:"";position:absolute;left:20px;top:50%;width:6px;height:6px;margin-top:-4px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);pointer-events:none}
.quranDownloadSection .downloadField:focus-within{outline:2px solid currentColor;outline-offset:2px}
.quranDownloadSection .downloadFieldLabel{white-space:nowrap;font-size:11px;font-weight:700;color:rgba(255,255,255,.78)}
.quranDownloadSection select{font:inherit;color:#fff;background:var(--theme-darker);border:0;border-radius:0;padding:9px 13px 9px 30px;width:100%;min-width:0;min-height:40px;direction:rtl;text-align:right;text-align-last:right;color-scheme:dark;appearance:none;-webkit-appearance:none}
.quranDownloadSection select option{background:var(--theme-darker);color:#fff;padding:8px 12px}
.quranDownloadSection select:focus-visible{outline:none}.quranDownloadSection .pwaActionBtn{margin-top:8px}.quranDownloadStatus{font-size:11px;line-height:1.8;min-height:18px;margin-top:6px}.quranDownloadSection progress{width:100%;height:5px;accent-color:#fff}
@media(max-width:480px){.homeChoices{gap:10px}.homeChoice{padding:32px 9px;border-radius:20px}.homeChoice>strong{font-size:17px}.homeChoice>span:last-child{font-size:10px}.readerTopTools .activeDuaLabel{font-size:10px!important;max-width:90px}body[data-unified=quran] .listenCard{padding-left:10px;padding-right:10px}}
@media(max-width:340px){.readerTopTools .activeDuaLabel{max-width:50px}.homeChoice>strong{font-size:15px}.unifiedNav a,.unifiedNav button{padding:8px}}

.icon-gear{--icon:url("/icons/gear.svg")}
.icon-heart{--icon:url("/icons/heart.svg")}
.icon-comment{--icon:url("/icons/comment.svg")}
.icon-heart{font-size:22px;width:22px;height:22px}
.icon-heart{color:#e32636;transform:scale(1.06)}
.icon-heart{font-size:21px;width:21px;height:21px}
.icon-download{--icon:url("/icons/download.svg")}body[data-unified=quran] .activeDuaLabel{color:#fff}
body[data-unified=quran] .playerSettingsDrawer .advancedBox{display:block!important}
body[data-unified=quran] .playerMiniMenu>strong,body[data-unified=quran] .playerMiniMenu>small{display:none}
body[data-unified=quran] .playerMiniMenu .miniMenuChoices{display:flex;flex-wrap:nowrap;gap:4px}
body[data-unified=quran] .playerMiniMenu{position:fixed;transform:none;right:auto;bottom:auto;z-index:14000;max-width:calc(100vw - 16px)}
body[data-unified=quran] .playerMiniMenu::after{display:none}
body[data-unified=quran] .listenCard{height:100svh;overflow:hidden;min-height:100svh;padding-top:58px!important;padding-bottom:150px!important}
body[data-unified=quran] .focusVerse{flex:1;min-height:0!important;width:100%;overflow:auto;padding:12px 4px!important;scroll-padding-block:20px}
body[data-unified=quran] .focusVerse:has(.ayahCard.active){justify-content:safe center}
body[data-unified=quran] .versesList{max-height:none!important;overflow:visible!important;width:100%}
body[data-unified=home]{background:var(--theme-dark);min-height:100svh}
body[data-unified=home] .unifiedHome{min-height:100svh}
body[data-unified=quran] .playerSettingsDrawer .fontPresets{display:flex!important;gap:5px}
body[data-unified=quran] .playerSettingsDrawer .checkStack{display:grid!important;gap:8px;margin-top:12px}
body[data-unified=quran] .playerSettingsDrawer .checkLabel{display:flex!important;align-items:center;gap:7px;color:#fff;font-size:11px}
body[data-unified=quran] .focusVerse{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
body[data-unified=quran] .focusVerse::-webkit-scrollbar{width:4px}body[data-unified=quran] .focusVerse::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:4px}
.downloadPopover,.playerSettingsDrawer{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
body[data-unified=dua] .listenCard>.readerTopTools{position:absolute;left:8px;right:8px;top:7px;z-index:11000}
body[data-unified=dua] .listenCard.fullscreenControlsHidden>.readerTopTools{opacity:0;pointer-events:none}
body[data-unified=quran] .listenCard:fullscreen,body[data-unified=quran] .listenCard:-webkit-full-screen,body[data-unified=quran] .listenCard.playerFullscreenFallback{background:var(--theme-dark)!important}
body[data-unified=quran] .listenCard::backdrop{background:var(--theme-dark)}
body[data-unified=quran]:has(.playerMiniMenu:not([hidden]),.playerSettingsDrawer.open,.themePicker.open,.downloadPopover:not([hidden]),.unifiedMorePanel:not([hidden])) .listenCard .playerPanel{opacity:1!important;pointer-events:auto!important;transform:var(--quran-player-menu-transform,translateX(-50%))!important}
body[data-unified=quran]:has(.playerMiniMenu:not([hidden]),.playerSettingsDrawer.open,.themePicker.open,.downloadPopover:not([hidden]),.unifiedMorePanel:not([hidden])) .listenCard .readerTopTools{opacity:1!important;pointer-events:auto!important}

/* Keep Quran filters consistent with the themed dua drawer. */
body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactField,
body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactField:focus-within{background:rgba(255,255,255,.07)!important;border-color:rgba(255,255,255,.14)!important;box-shadow:none!important}
body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactField:focus-within{border-color:rgba(255,255,255,.26)!important}
body[data-unified=quran] .playerSettingsDrawer .compactFilters .fieldPrefix{color:rgba(255,255,255,.64)!important}
body[data-unified=quran] .playerSettingsDrawer .compactFilters select,
body[data-unified=quran] .playerSettingsDrawer .compactFilters input[type=number]{background:var(--theme-darker)!important;color:#fff;color-scheme:dark}
body[data-unified=quran] .playerSettingsDrawer .compactFilters select option{background:var(--theme-darker);color:#fff}

body[data-unified=quran] .playerSettingsDrawer .compactFilters{direction:rtl}
body[data-unified=quran] .playerSettingsDrawer .compactFilters select,body[data-unified=quran] .playerSettingsDrawer .compactFilters select option,body[data-unified=quran] .playerSettingsDrawer .compactFilters input[type=number]{direction:rtl;text-align:right;text-align-last:right}

body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactAyahField,body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactJuzField{grid-template-columns:20px minmax(0,1fr);gap:4px}
body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactAyahField .fieldPrefix,body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactJuzField .fieldPrefix{font-size:10px!important}

body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactPageField{grid-template-columns:26px minmax(0,1fr);gap:4px}
body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactPageField .fieldPrefix{font-size:10px!important}
body[data-unified=quran] .unifiedNav,body[data-unified=quran] .unifiedNav a,body[data-unified=quran] .unifiedNav button{direction:rtl;text-align:right}
body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactPageField .pageField{grid-template-columns:minmax(0,1fr) 42px;gap:4px}
body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactPageField .softBtn{width:42px}

/* The Quran choices use the same compact circles as the dua player. */
body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu{position:fixed!important;bottom:auto!important;right:auto!important;z-index:14000!important;min-width:0!important;width:max-content!important;max-width:calc(100vw - 16px)!important;padding:9px!important;border:1px solid rgba(255,255,255,.3)!important;border-radius:999px!important;background:var(--theme-dark)!important;box-shadow:0 12px 30px rgba(0,0,0,.28)!important;backdrop-filter:none!important;transform:none!important}
body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu .miniMenuChoices{display:flex!important;flex-wrap:nowrap!important;gap:6px!important}
body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu .miniMenuChoices button{--choice-size:clamp(40px,11vw,48px)!important;display:grid!important;place-items:center!important;flex:0 0 var(--choice-size)!important;width:var(--choice-size)!important;min-width:var(--choice-size)!important;max-width:var(--choice-size)!important;height:var(--choice-size)!important;min-height:var(--choice-size)!important;max-height:var(--choice-size)!important;padding:0!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:50%!important;background:rgba(255,255,255,.08)!important;color:#fff!important;font:800 10.5px/1 Yekan,Tahoma,Arial,sans-serif!important;white-space:nowrap!important;box-shadow:none!important;transform:none!important}
body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu .miniMenuChoices button:hover{background:rgba(255,255,255,.2)!important}
body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu .miniMenuChoices button.active{background:#fff!important;border-color:#fff!important;color:var(--theme-dark)!important;box-shadow:0 3px 9px rgba(0,0,0,.16)!important}
body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu .miniMenuChoices button.active::before{content:none!important}
body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu::after{display:block!important;content:""!important;position:absolute!important;top:auto!important;right:auto!important;bottom:-5px!important;left:var(--menu-arrow-left,50%)!important;width:9px!important;height:9px!important;transform:translateX(-50%) rotate(45deg)!important;background:var(--theme-dark)!important;border:0!important;border-right:1px solid rgba(255,255,255,.3)!important;border-bottom:1px solid rgba(255,255,255,.3)!important}
body[data-unified] .customControls .svgIcon:has(img){background:none!important;mask:none!important;-webkit-mask:none!important}
body[data-unified] .customControls .svgIcon img{display:block;width:100%;height:100%;object-fit:contain}
body[data-unified] .mainPlayBtn .svgIcon img{filter:brightness(0)}
body[data-unified=quran] .customControls button:disabled{opacity:.5;cursor:wait}
/* Both neutral themes are shared by home, dua and Quran. */
html[data-theme=white]{--theme:#fff;--theme-dark:#fff;--theme-darker:#f1f1f1;--theme-soft:#e9e9e9;--theme-faint:#fafafa;--theme-rgb:0,0,0;--ink:#111;--muted:#555;--line:#ccc;--page:#fff;--paper:#fff;--cream:#f4f4f4;--word-active:#725700;--word-reading:#614a00;--accent:#614a00;color-scheme:light}
html[data-theme=black]{--theme:#000;--theme-dark:#000;--theme-darker:#171717;--theme-soft:#222;--theme-faint:#111;--theme-rgb:255,255,255;--ink:#fff;--muted:#ccc;--line:#555;--page:#000;--paper:#111;--cream:#222;color-scheme:dark}
.themeMenu [data-theme-value=white] i{--swatch:#fff}.themeMenu [data-theme-value=black] i{--swatch:#000}
html[data-theme=white] body[data-unified]{background:#fff;color:var(--control-ink)}
html[data-theme=white] body[data-unified] *{color:var(--control-ink)!important;text-shadow:none!important}
html[data-theme=white] body[data-unified] :is(.listenCard,.unifiedHome,.playerPanel,.playerSettingsDrawer,.downloadPopover,.unifiedAbout,.communityDialog,.appPromptDialog){background:#fff!important;color:var(--control-ink)!important;border-color:rgba(0,0,0,.22)!important}
html[data-theme=white] body[data-unified] :is(.compactField,.downloadField,.advancedBox,.settingRangeBox,.checkLabel,.homeChoice,.pwaOption,.unifiedMorePanel,.themeMenu,.playerMiniMenu,.playbackChoiceMenu){background:#f5f5f5!important;border-color:rgba(0,0,0,.22)!important}
html[data-theme=white] body[data-unified] :is(button,input,select,textarea){border-color:rgba(0,0,0,.22)!important;accent-color:#111}
html[data-theme=white] body[data-unified] :is(input,select,textarea,option){background:#f1f1f1!important;color:var(--control-ink)!important;color-scheme:light}
html[data-theme=white] body[data-unified=quran] .playerSettingsDrawer .compactFilters .fieldPrefix{color:#555!important}
html[data-theme=white] body[data-unified] :is(.playerQuickTools,.roundControl,.quickToolBtn,.downloadToolbarBtn,.downloadPopoverClose,.fontPresets button){background:rgba(0,0,0,.04)!important;border-color:rgba(0,0,0,.22)!important}
html[data-theme=white] body[data-unified] :is(.mainPlayBtn,.pwaActionBtn,.unifiedAbout button,.fontPresets button.active,.miniMenuChoices button.active,.playbackChoiceMenu .miniMenuChoices button.active){background:#111!important;border-color:#111!important;color:var(--control-fill-ink)!important}
html[data-theme=white] body[data-unified] :is(.mainPlayBtn,.pwaActionBtn,.unifiedAbout button,.fontPresets button.active,.miniMenuChoices button.active) *{color:var(--control-fill-ink)!important}
html[data-theme=white] body[data-unified] .themePickerTop .themeDot,html[data-theme=white] body[data-unified] .themePickerTop .themeDot::after{border-color:#333!important}
html[data-theme=white] body[data-unified] .themeMenu>button[data-theme-value]>i{box-shadow:0 0 0 1px rgba(0,0,0,.35)}
html[data-theme=white] body[data-unified] .themeMenu>button[data-theme-value].active::after{border-color:#111!important}
html[data-theme=white] body[data-unified] :is(.playerMiniMenu,.playbackChoiceMenu)::after{background:#f5f5f5!important;border-color:rgba(0,0,0,.3)!important}
html[data-theme=white] body[data-unified] .icon-heart{color:#c51f30!important}
html[data-theme=white] body[data-unified] .customControls .svgIcon img{filter:brightness(0)}
html[data-theme=white] body[data-unified] .mainPlayBtn .svgIcon img{filter:none}
html[data-theme=white] body[data-unified] :is(.wordActive,.wordReading){color:#614a00!important}
html[data-theme=white] body[data-unified] :is(.playerQuickTools,.unifiedNav,.playerSettingsDrawerHead,.communityDialogHead,.quranDownloadSection){border-color:rgba(0,0,0,.22)!important}
html[data-theme=white] body[data-unified] :is(.customProgress,.offlineDownloadBar){accent-color:#111}

html[data-theme=white] body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu{background:#f5f5f5!important;color:#111!important;border-color:rgba(0,0,0,.3)!important}
html[data-theme=white] body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu .miniMenuChoices button{background:rgba(0,0,0,.05)!important;color:#111!important;border-color:rgba(0,0,0,.22)!important}
html[data-theme=white] body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu .miniMenuChoices button.active{background:#111!important;color:#fff!important;border-color:#111!important}
html[data-theme=white] body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu::after{background:#f5f5f5!important;border-color:rgba(0,0,0,.3)!important}

html[data-theme=white] body[data-unified] input[type=range]::-webkit-slider-thumb{background:#111!important;box-shadow:none!important;border-color:#111!important}
html[data-theme=white] body[data-unified] input[type=range]::-moz-range-thumb{background:#111!important;box-shadow:none!important;border-color:#111!important}
html[data-theme=white] body[data-unified] :is(input[type=range],progress){accent-color:#111!important}
html[data-theme=white] body[data-unified] :is(button,a,input,select,textarea):focus-visible{outline-color:#111!important}
html[data-theme=white] body[data-unified] .unifiedNav .active{background:rgba(0,0,0,.09)!important}
html[data-theme=white] body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactField,html[data-theme=white] body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactField:focus-within{background:#f5f5f5!important;border-color:#ccc!important}
html[data-theme=white] body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactField:focus-within{border-color:#555!important}

html[data-theme=white] body[data-unified] :is(.mushafSection,.mushafFrame,.mushafInner,.mushafTranslationPanel,.mushafToolbar,.mushafGuide,.duaContinuousSection,.duaContinuousFrame,.duaContinuousInner){background:#fff!important;border-color:#ccc!important}
html[data-theme=black] body[data-unified] :is(.mushafSection,.mushafFrame,.mushafInner,.mushafTranslationPanel,.mushafToolbar,.mushafGuide,.duaContinuousSection,.duaContinuousFrame,.duaContinuousInner){background:#111!important;border-color:#555!important}
html[data-theme=black] body[data-unified] .mushafSection *{color:#fff!important}
html[data-theme=black] body[data-unified] .mushafPageNav{background:#222!important;color:#fff!important;border-color:#555!important}
html[data-theme=black] body[data-unified] :is(.wordActive,.wordReading,.qcfWord.wordActive,.qcfWord.wordReading){color:#ffe07e!important}

/* The Quran more menu is mounted above the entire player, outside its stacking context. */
body[data-unified=quran] #quranMoreMenu{position:fixed;bottom:auto;right:auto;left:auto;z-index:14000;transform:none;width:220px;max-width:calc(100vw - 16px);padding:10px;border:1px solid rgba(255,255,255,.3);border-radius:16px;background:var(--theme-dark);box-shadow:0 12px 30px rgba(0,0,0,.28);direction:rtl;color:#fff}
body[data-unified=quran] #quranMoreMenu[hidden]{display:none!important}
body[data-unified=quran] #quranMoreMenu .unifiedMoreRow{min-height:38px}
/* Each more-menu action uses its original button for both icon and label. */
body[data-unified=quran] #quranMoreMenu .unifiedMoreRow>.quickToolBtn{display:flex!important;align-items:center;justify-content:flex-start;gap:10px;flex:1 1 auto;width:100%!important;min-width:0;max-width:none;height:auto!important;min-height:38px;padding:4px 8px!important;border:0!important;border-radius:9px;background:transparent!important;color:inherit!important;text-align:right;font:inherit;font-size:12px;transform:none!important}
body[data-unified=quran] #quranMoreMenu .quickToolBtn .svgIcon{flex:0 0 18px;width:18px;height:18px}
body[data-unified=quran] #quranMoreMenu .moreActionLabel{flex:1;min-width:0;text-align:right}
body[data-unified=quran] #quranMoreMenu .quickToolBtn:hover{background:color-mix(in srgb,currentColor 8%,transparent)!important}
body[data-unified=quran] #quranMoreMenu .quickToolBtn:focus-visible{outline:2px solid currentColor;outline-offset:-2px}

body[data-unified=quran] #quranMoreMenu::after{content:"";position:absolute;bottom:-5px;left:var(--menu-arrow-left,50%);width:9px;height:9px;transform:translateX(-50%) rotate(45deg);background:var(--theme-dark);border-right:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.3)}
html[data-theme=white] body[data-unified=quran] #quranMoreMenu{background:#f5f5f5!important;color:#111!important;border-color:rgba(0,0,0,.3)!important}
html[data-theme=white] body[data-unified=quran] #quranMoreMenu::after{background:#f5f5f5;border-color:rgba(0,0,0,.3)}
/* The current word uses readable text and an underline without a filled background. */
html[data-theme] body[data-unified=quran] :is(.inlineQuranWord,.qcfWord):is(.wordActive,.wordReading){transition:none!important;background:transparent!important;color:var(--quran-word-active-color,var(--word-active))!important;text-shadow:none!important;box-shadow:none!important;font-weight:inherit!important;text-decoration-line:underline!important;text-decoration-color:currentColor!important;text-decoration-thickness:1px!important;text-underline-offset:.42em!important;text-decoration-skip-ink:auto!important}
html[data-theme] body[data-unified=quran] :is(.inlineQuranWord,.qcfWord).wordReading{color:var(--quran-word-reading-color,var(--word-reading))!important}

/* Colored letters retain their original font, text, controls and word highlight. */
body[data-unified=quran] .tajweedSetting{margin-top:8px}
body[data-unified=quran] .tajweedUnavailable{opacity:.6}
body[data-unified=quran] .tajweedStatus{display:block;font-size:11px;line-height:1.8;margin:4px 0}
body[data-unified=quran] .tajweedStatus[hidden]{display:none!important}
html[data-theme] body[data-unified=quran] .ayahArabic .tajweedGlyph{font:inherit!important;letter-spacing:inherit;transition:none!important;text-shadow:none!important}
html[data-theme] body[data-unified=quran] .ayahArabic .tajweedGlyph.tj-silent{color:var(--tj-silent)!important}
html[data-theme] body[data-unified=quran] .ayahArabic :is(.wordReading,.wordActive) .tajweedGlyph.tj-silent{color:inherit!important}
html[data-theme] body[data-unified=quran] .ayahArabic .tajweedGlyph.tj-normal{color:var(--tj-normal)!important}
html[data-theme] body[data-unified=quran] .ayahArabic :is(.wordReading,.wordActive) .tajweedGlyph.tj-normal{color:inherit!important}
html[data-theme] body[data-unified=quran] .ayahArabic .tajweedGlyph.tj-permissible{color:var(--tj-permissible)!important}
html[data-theme] body[data-unified=quran] .ayahArabic :is(.wordReading,.wordActive) .tajweedGlyph.tj-permissible{color:inherit!important}
html[data-theme] body[data-unified=quran] .ayahArabic .tajweedGlyph.tj-necessary{color:var(--tj-necessary)!important}
html[data-theme] body[data-unified=quran] .ayahArabic :is(.wordReading,.wordActive) .tajweedGlyph.tj-necessary{color:inherit!important}
html[data-theme] body[data-unified=quran] .ayahArabic .tajweedGlyph.tj-obligatory{color:var(--tj-obligatory)!important}
html[data-theme] body[data-unified=quran] .ayahArabic :is(.wordReading,.wordActive) .tajweedGlyph.tj-obligatory{color:inherit!important}
html[data-theme] body[data-unified=quran] .ayahArabic .tajweedGlyph.tj-nasal{color:var(--tj-nasal)!important}
html[data-theme] body[data-unified=quran] .ayahArabic :is(.wordReading,.wordActive) .tajweedGlyph.tj-nasal{color:inherit!important}
html[data-theme] body[data-unified=quran] .ayahArabic .tajweedGlyph.tj-merged{color:var(--tj-merged)!important}
html[data-theme] body[data-unified=quran] .ayahArabic :is(.wordReading,.wordActive) .tajweedGlyph.tj-merged{color:inherit!important}
html[data-theme] body[data-unified=quran] .ayahArabic .tajweedGlyph.tj-echo{color:var(--tj-echo)!important}
html[data-theme] body[data-unified=quran] .ayahArabic :is(.wordReading,.wordActive) .tajweedGlyph.tj-echo{color:inherit!important}
html[data-theme] body[data-unified=quran] .listenCard.tajweedEnabled:is(:fullscreen,:-webkit-full-screen,.playerFullscreenFallback){background:var(--theme-dark)!important}

/* Quran education settings follow the Persian reading direction. */
body[data-unified=quran] .playerSettingsDrawer .advancedBox{direction:rtl;text-align:right}

/* Repeat choices stay in one row on narrow screens. */
body[data-unified] #smartRepeatMenu button:disabled{opacity:.35;cursor:default}
body[data-unified=quran] #smartRepeatMenu.quranPlaybackMenu{max-width:calc(100vw - 16px)!important}
@media(max-width:360px){body[data-unified=quran] #smartRepeatMenu.quranPlaybackMenu .miniMenuChoices{gap:4px!important}body[data-unified=quran] #smartRepeatMenu.quranPlaybackMenu .miniMenuChoices button{--choice-size:38px!important}}

/* Put the selected-color ring on the swatch itself, including hover scaling. */
.themePickerTop .themeMenu>button[data-theme-value].active::after{display:none!important}
.themePickerTop .themeMenu>button[data-theme-value]>i{position:relative}
.themePickerTop .themeMenu>button[data-theme-value].active>i::after{content:"";position:absolute;inset:0;box-sizing:border-box;border:2px solid #fff;border-radius:50%;pointer-events:none}
html[data-theme=white] .themePickerTop .themeMenu>button[data-theme-value].active>i::after{border-color:#111}
body[data-unified=quran] .activeDuaLabel{display:flex;align-items:center;direction:rtl;overflow:hidden;max-width:initial}
body[data-unified=quran] .quranHeaderName{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-unified=quran] .quranHeaderAyah{flex:none;white-space:pre;direction:rtl}
body[data-unified=quran] .listenCard.tajweedEnabled{background:var(--theme-dark)!important;transition:box-shadow .3s ease}

body[data-unified=quran] .readerTopRight:has(.downloadToolbarBtn) .activeDuaLabel{max-width:none;flex:1 1 auto}
@media(max-width:480px){body[data-unified=quran] .readerTopLeft{gap:4px}body[data-unified=quran] .readerTopTool,body[data-unified=quran] .themePickerTop .themeToggle{width:34px;min-width:34px;height:38px;min-height:38px}}

/* Both Quran views share the same player and readable toolbar. */
body[data-unified=quran] .tajweedSetting[hidden],body[data-unified=quran] .tajweedStatus[hidden]{display:none!important}
body[data-unified=quran] .listenCard.mushafListening{--mushaf-ui-ink:#fff;--mushaf-ui-muted:rgba(255,255,255,.76);--mushaf-ui-surface:rgba(255,255,255,.1);--mushaf-paper:color-mix(in srgb,var(--theme-soft) 22%,#fff);--mushaf-text:var(--theme-darker)}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening #mushafView{flex:1 1 auto;min-height:0;width:100%;overflow:auto;overscroll-behavior:contain;background:transparent!important;border:0;box-shadow:none;padding:4px 2px 20px;scrollbar-width:thin;scrollbar-color:var(--mushaf-ui-muted) transparent}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening :is(.mushafToolbar,.mushafGuide){background:var(--mushaf-ui-surface)!important;color:var(--mushaf-ui-ink)!important;border-color:color-mix(in srgb,var(--mushaf-ui-ink) 25%,transparent)!important;box-shadow:none}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening :is(.mushafPageNav,.mushafGuideIcon,.mushafAyahSample){background:var(--mushaf-ui-surface)!important;color:var(--mushaf-ui-ink)!important;border-color:color-mix(in srgb,var(--mushaf-ui-ink) 25%,transparent)!important}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening :is(.mushafPageMeta strong,.mushafGuideText strong,.mushafGuideText b){color:var(--mushaf-ui-ink)!important}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening :is(#mushafStatus,.mushafGuideText,.mushafGuideText>span,.mushafGuideWord){color:var(--mushaf-ui-muted)!important}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening :is(.mushafFrame,.mushafInner,.mushafTranslationPanel){width:100%;max-width:100%;background:var(--mushaf-paper)!important;color:var(--mushaf-text)!important;border-color:color-mix(in srgb,var(--theme) 35%,var(--mushaf-paper))!important}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening :is(.mushafLine,.qcfWord,.mushafTranslationPanel h3,.pageTranslationItem,.pageTranslationItem strong){color:var(--mushaf-text)!important}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening .mushafInner{padding:20px 8px;overflow:visible;min-height:0}
body[data-unified=quran] .mushafLine .qcfWord.wordActive{font-palette:var(--qcf-active-palette,normal)!important}
body[data-unified=quran] .mushafLine .qcfWord.wordReading{font-palette:var(--qcf-highlight-palette,normal)!important}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening .qcfWord.wordActive{color:var(--quran-word-active-color,var(--word-active))!important}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening .qcfWord.wordReading{color:var(--quran-word-reading-color,var(--word-reading))!important}
html[data-theme=white] body[data-unified=quran] .listenCard.mushafListening{--mushaf-ui-ink:#111;--mushaf-ui-muted:#555;--mushaf-ui-surface:rgba(0,0,0,.06);--mushaf-paper:#fff;--mushaf-text:#111}
html[data-theme=black] body[data-unified=quran] .listenCard.mushafListening{--mushaf-paper:#111;--mushaf-text:#fff}
body[data-unified=quran] .listenCard.mushafListening .playerPanel{border:1px solid rgba(255,255,255,.22);box-shadow:0 6px 26px rgba(0,0,0,.24)}
html[data-theme=white] body[data-unified=quran] .listenCard.mushafListening .playerPanel{border-color:#ccc}

/* Reserve the mushaf player's actual height through the card layout. */
body[data-unified=quran] .listenCard.mushafListening{height:100svh!important;min-height:100svh!important;padding-bottom:max(8px,env(safe-area-inset-bottom))!important}
body[data-unified=quran] .listenCard.mushafListening .playerPanel{position:relative!important;inset:auto!important;transform:none!important;align-self:center;flex:0 0 auto;margin:4px auto 0;padding:6px 8px 4px!important}
body[data-unified=quran] .listenCard.mushafListening .customProgressRow{line-height:16px}
body[data-unified=quran] .listenCard.mushafListening .customProgress{margin:0}
body[data-unified=quran] .listenCard.mushafListening .customControls{margin-top:2px!important}
body[data-unified=quran] .listenCard.mushafListening .mainPlayBtn{width:48px!important;height:48px!important}
body[data-unified=quran] .listenCard.mushafListening .playerQuickTools{margin-top:4px;padding:2px 3px}
body[data-unified=quran] .listenCard.mushafListening #shareAyahBtn{width:34px;height:32px}

/* The page number lives in the header; page and ayah controls remain distinct. */
body[data-unified=quran] .quranHeaderPage{flex:none;white-space:pre;direction:rtl}
body[data-unified=quran] .listenCard.mushafListening .mushafToolbar{display:none!important}
body[data-unified=quran] :is(#prevPageBtn,#nextPageBtn)[hidden]{display:none!important}
body[data-unified=quran] .listenCard.mushafListening .customProgressRow.mushafProgress{grid-template-columns:32px 38px minmax(0,1fr) 38px 32px!important;gap:4px!important}
body[data-unified=quran] .listenCard.mushafListening .customProgressRow .mushafPageNav{width:32px!important;height:32px!important;min-width:0!important;min-height:0!important;padding:0!important;border-radius:50%;background:rgba(255,255,255,.08);color:var(--mushaf-ui-ink);border:1px solid color-mix(in srgb,var(--mushaf-ui-ink) 20%,transparent)}
body[data-unified=quran] .customProgressRow .mushafPageNav>span:not(.svgIcon){display:none!important}
body[data-unified=quran] .customProgressRow .mushafPageNav .svgIcon{width:20px!important;height:20px!important}
.icon-mushaf-page-next{--icon:url('/icons/player-page-next.svg')}
.icon-mushaf-page-previous{--icon:url('/icons/player-page-previous.svg')}
body[data-unified=quran] .mushafPageNav:disabled{opacity:.35;cursor:default}
/* The paper follows the selected app color, with a quiet outline. */
body[data-unified=quran] .listenCard.mushafListening{--mushaf-paper:var(--theme-dark);--mushaf-text:#fff}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening :is(.mushafFrame,.mushafTranslationPanel){border-color:color-mix(in srgb,var(--mushaf-text) 24%,transparent)!important;box-shadow:none}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening .mushafInner{border-color:transparent!important;box-shadow:none}
body[data-unified=quran] .listenCard.mushafListening :is(.mushafFrame,.mushafInner){transition:none}
html[data-theme=white] body[data-unified=quran] .listenCard.mushafListening{--mushaf-paper:#fff;--mushaf-text:#111}
html[data-theme=black] body[data-unified=quran] .listenCard.mushafListening{--mushaf-paper:#111;--mushaf-text:#fff}

/* A light translation highlight needs dark text; the black theme keeps light text. */
body[data-unified=quran] .listenCard.mushafListening{--mushaf-translation-highlight-ink:#111}
html[data-theme=black] body[data-unified=quran] .listenCard.mushafListening{--mushaf-translation-highlight-ink:#fff}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening .mushafTranslationPanel .pageTranslationItem.active{background:var(--theme-faint)!important;color:var(--mushaf-translation-highlight-ink)!important}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening .mushafTranslationPanel .pageTranslationItem.active strong{color:inherit!important}

/* Keep the Mushaf hint in one row, with a dismiss button on the left. */
html[data-theme] body[data-unified=quran] .listenCard.mushafListening .mushafGuide.compactMushafGuide{display:flex!important;direction:rtl;align-items:center;justify-content:flex-start!important;width:100%!important;max-width:100%!important;min-height:34px!important;height:auto!important;padding:2px 8px!important;margin:0 0 8px!important;gap:6px!important;background:var(--mushaf-paper)!important;color:var(--mushaf-text)!important;border-color:color-mix(in srgb,var(--mushaf-text) 24%,transparent)!important}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening .mushafGuide.compactMushafGuide[hidden]{display:none!important}
body[data-unified=quran] .compactMushafGuide .mushafGuideMessage{flex:1 1 auto;min-width:0;white-space:nowrap;text-align:right;font-size:11px;line-height:20px;color:inherit}
body[data-unified=quran] .compactMushafGuide .mushafGuideClose{flex:0 0 28px;width:28px;height:28px;min-width:0;min-height:0;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
body[data-unified=quran] .compactMushafGuide .mushafGuideClose:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
body[data-unified=quran] .compactMushafGuide .mushafGuideClose:focus-visible{outline:2px solid currentColor;outline-offset:1px}
body[data-unified=quran] .compactMushafGuide .mushafGuideClose img{display:block;width:12px;height:12px;filter:brightness(0) invert(1)}
html[data-theme=white] body[data-unified=quran] .compactMushafGuide .mushafGuideClose img{filter:brightness(0)}

.downloadPopover :is(#pwaInstallHint,#pwaAudioHint,#offlineDownloadMeta)[hidden]{display:none}

.downloadPopover .pwaReadySummary{padding:9px 12px;gap:4px}
.downloadPopover .pwaReadyText{margin:0;font:500 11px/1.8 Yekan,Tahoma,Arial,sans-serif;color:inherit}

.homeResume{display:flex;align-items:center;justify-content:center;gap:10px;width:min(660px,100%);box-sizing:border-box;margin-top:12px;padding:12px 16px;border:1px solid rgba(255,255,255,.23);border-radius:14px;background:rgba(255,255,255,.08);color:inherit;text-decoration:none;font-size:13px;line-height:1.8}
.homeResume:hover,.homeResume:focus-visible{background:rgba(255,255,255,.16)}
.homeResume>.svgIcon{flex:0 0 18px;width:18px;height:18px}
.homeResumeText{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-theme=white] .homeResume{background:#f5f5f5;border-color:rgba(0,0,0,.22)}
@media(max-width:600px){.homeChoices{grid-template-columns:minmax(0,1fr);gap:12px}.homeChoice{display:grid;grid-template-columns:38px minmax(0,1fr);gap:6px 14px;text-align:right;padding:18px 20px;border-radius:18px}.homeChoice>.svgIcon{grid-row:1 / span 2}.homeChoice>strong{font-size:18px}.homeChoice>span:last-child{font-size:12px}}

/* The mushaf player is centered by flex layout, including while menus are open. */
body[data-unified=quran] .listenCard.mushafListening{--quran-player-menu-transform:none}

body[data-unified=quran] :is(.mushafTranslationField,.currentMushafTranslation,.mushafTranslationPanel)[hidden]{display:none!important}
body[data-unified=quran] .mushafTranslationField .fieldPrefix{min-width:76px}
body[data-unified=quran] .currentMushafTranslation{flex:0 0 auto;align-self:center;width:min(720px,100%);margin:6px auto 0;padding:12px 10px;border:1px solid color-mix(in srgb,var(--mushaf-text) 24%,transparent);border-radius:12px;background:var(--mushaf-paper);color:var(--mushaf-text);direction:rtl;text-align:right}
body[data-unified=quran] .currentMushafTranslationHead{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;line-height:20px}
body[data-unified=quran] .currentMushafTranslationHead button{padding:0 6px;min-height:22px;border:0;border-radius:6px;background:transparent;color:inherit;font-size:11px;cursor:pointer}
body[data-unified=quran] .currentMushafTranslationHead button[hidden]{display:none!important}
body[data-unified=quran] .currentMushafTranslationText{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;font-size:calc(13px * var(--font-scale));line-height:1.8}
body[data-unified=quran] .currentMushafTranslation.expanded .currentMushafTranslationText{display:block;max-height:25svh;overflow:auto;overscroll-behavior:contain}
body[data-unified=quran] .listenCard.translationHidden:not(.mushafListening) :is(.currentMushafTranslation,.mushafTranslationPanel){display:none!important}

body[data-unified=quran] .currentMushafTranslationHead{justify-content:flex-end}
body[data-unified=quran] .currentMushafTranslationHead[hidden]{display:none!important}
body[data-unified=quran]:not(:has(.playerMiniMenu:not([hidden]),.playerSettingsDrawer.open,.themePicker.open,.downloadPopover:not([hidden]),.unifiedMorePanel:not([hidden]))) .listenCard.mushafListening:is(.mobileControlsHidden,.fullscreenControlsHidden) .playerPanel{display:none!important}

/* Keep the site like button only on the home page. */
body:not([data-unified=home]) .siteLikeBtn{display:none!important}

/* Saturated word colors distinguish recitation from black text on white paper. */
html[data-theme=white] body[data-unified=quran] .listenCard{--word-reading:#005bbb;--word-active:#b42318}

/* The mobile reader uses the full viewport without reserving retired navigation space. */
@media(max-width:820px){body[data-unified=quran] .listenCard:not(.mushafListening){height:100svh!important;min-height:100svh!important;padding-bottom:calc(160px + env(safe-area-inset-bottom))!important}body[data-unified=quran] .listenCard:not(.mushafListening) .focusVerse{padding-bottom:8px!important}}

/* Static palettes shared by home, dua and Quran. */
html[data-theme=olive]{--theme:#626e46;--theme-dark:#424c32;--theme-darker:#303924;--theme-soft:#e9eddf;--theme-faint:#f5f7ef;--theme-rgb:98,110,70;--word-active:#fff0b0;--word-reading:#ffe083}
html[data-theme=burgundy]{--theme:#76283f;--theme-dark:#5c1d30;--theme-darker:#461424;--theme-soft:#f4e7ec;--theme-faint:#fbf4f6;--theme-rgb:118,40,63;--word-active:#d5f7ed;--word-reading:#8ce6c5}
.themeMenu [data-theme-value=cream] i{--swatch:#f7f1e7}
.themeMenu [data-theme-value=olive] i{--swatch:#626e46}
.themeMenu [data-theme-value=burgundy] i{--swatch:#76283f}

html[data-theme=cream]{--theme:#f7f1e7;--theme-dark:#f7f1e7;--theme-darker:#eee3cf;--theme-soft:#e9ddc6;--theme-faint:#fbf8f1;--theme-rgb:0,0,0;--ink:#30291f;--muted:#665746;--line:#cbbda3;--page:#f7f1e7;--paper:#f7f1e7;--cream:#efe5d3;--word-active:#725700;--word-reading:#614a00;--accent:#614a00;color-scheme:light}
html[data-theme=cream] body[data-unified]{background:#f7f1e7;color:var(--control-ink)}
html[data-theme=cream] body[data-unified] *{color:var(--control-ink)!important;text-shadow:none!important}
html[data-theme=cream] body[data-unified] :is(.listenCard,.unifiedHome,.playerPanel,.playerSettingsDrawer,.downloadPopover,.unifiedAbout,.communityDialog,.appPromptDialog){background:#f7f1e7!important;color:var(--control-ink)!important;border-color:rgba(0,0,0,.22)!important}
html[data-theme=cream] body[data-unified] :is(.compactField,.downloadField,.advancedBox,.settingRangeBox,.checkLabel,.homeChoice,.pwaOption,.unifiedMorePanel,.themeMenu,.playerMiniMenu,.playbackChoiceMenu){background:#f0e5d2!important;border-color:rgba(0,0,0,.22)!important}
html[data-theme=cream] body[data-unified] :is(button,input,select,textarea){border-color:rgba(0,0,0,.22)!important;accent-color:#30291f}
html[data-theme=cream] body[data-unified] :is(input,select,textarea,option){background:#eee3cf!important;color:var(--control-ink)!important;color-scheme:light}
html[data-theme=cream] body[data-unified=quran] .playerSettingsDrawer .compactFilters .fieldPrefix{color:#665746!important}
html[data-theme=cream] body[data-unified] :is(.playerQuickTools,.roundControl,.quickToolBtn,.downloadToolbarBtn,.downloadPopoverClose,.fontPresets button){background:rgba(0,0,0,.04)!important;border-color:rgba(0,0,0,.22)!important}
html[data-theme=cream] body[data-unified] :is(.mainPlayBtn,.pwaActionBtn,.unifiedAbout button,.fontPresets button.active,.miniMenuChoices button.active,.playbackChoiceMenu .miniMenuChoices button.active){background:#30291f!important;border-color:#30291f!important;color:var(--control-fill-ink)!important}
html[data-theme=cream] body[data-unified] :is(.mainPlayBtn,.pwaActionBtn,.unifiedAbout button,.fontPresets button.active,.miniMenuChoices button.active) *{color:var(--control-fill-ink)!important}
html[data-theme=cream] body[data-unified] .themePickerTop .themeDot,html[data-theme=cream] body[data-unified] .themePickerTop .themeDot::after{border-color:#333!important}
html[data-theme=cream] body[data-unified] .themeMenu>button[data-theme-value]>i{box-shadow:0 0 0 1px rgba(0,0,0,.35)}
html[data-theme=cream] body[data-unified] .themeMenu>button[data-theme-value].active::after{border-color:#30291f!important}
html[data-theme=cream] body[data-unified] :is(.playerMiniMenu,.playbackChoiceMenu)::after{background:#f0e5d2!important;border-color:rgba(0,0,0,.3)!important}
html[data-theme=cream] body[data-unified] .icon-heart{color:#c51f30!important}
html[data-theme=cream] body[data-unified] .customControls .svgIcon img{filter:brightness(0)}
html[data-theme=cream] body[data-unified] .mainPlayBtn .svgIcon img{filter:none}
html[data-theme=cream] body[data-unified] :is(.wordActive,.wordReading){color:#614a00!important}
html[data-theme=cream] body[data-unified] :is(.playerQuickTools,.unifiedNav,.playerSettingsDrawerHead,.communityDialogHead,.quranDownloadSection){border-color:rgba(0,0,0,.22)!important}
html[data-theme=cream] body[data-unified] :is(.customProgress,.offlineDownloadBar){accent-color:#30291f}
html[data-theme=cream] body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu{background:#f0e5d2!important;color:#30291f!important;border-color:rgba(0,0,0,.3)!important}
html[data-theme=cream] body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu .miniMenuChoices button{background:rgba(0,0,0,.05)!important;color:#30291f!important;border-color:rgba(0,0,0,.22)!important}
html[data-theme=cream] body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu .miniMenuChoices button.active{background:#30291f!important;color:#f7f1e7!important;border-color:#30291f!important}
html[data-theme=cream] body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu::after{background:#f0e5d2!important;border-color:rgba(0,0,0,.3)!important}
html[data-theme=cream] body[data-unified] input[type=range]::-webkit-slider-thumb{background:#30291f!important;box-shadow:none!important;border-color:#30291f!important}
html[data-theme=cream] body[data-unified] input[type=range]::-moz-range-thumb{background:#30291f!important;box-shadow:none!important;border-color:#30291f!important}
html[data-theme=cream] body[data-unified] :is(input[type=range],progress){accent-color:#30291f!important}
html[data-theme=cream] body[data-unified] :is(button,a,input,select,textarea):focus-visible{outline-color:#30291f!important}
html[data-theme=cream] body[data-unified] .unifiedNav .active{background:rgba(0,0,0,.09)!important}
html[data-theme=cream] body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactField,html[data-theme=cream] body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactField:focus-within{background:#f0e5d2!important;border-color:#cbbda3!important}
html[data-theme=cream] body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactField:focus-within{border-color:#665746!important}
html[data-theme=cream] body[data-unified] :is(.mushafSection,.mushafFrame,.mushafInner,.mushafTranslationPanel,.mushafToolbar,.mushafGuide,.duaContinuousSection,.duaContinuousFrame,.duaContinuousInner){background:#f7f1e7!important;border-color:#cbbda3!important}
html[data-theme=cream] body[data-unified=quran] #quranMoreMenu{background:#f0e5d2!important;color:#30291f!important;border-color:rgba(0,0,0,.3)!important}
html[data-theme=cream] body[data-unified=quran] #quranMoreMenu::after{background:#f0e5d2;border-color:rgba(0,0,0,.3)}
html[data-theme=cream] .themePickerTop .themeMenu>button[data-theme-value].active>i::after{border-color:#30291f}
html[data-theme=cream] body[data-unified=quran] .listenCard.mushafListening{--mushaf-ui-ink:#30291f;--mushaf-ui-muted:#665746;--mushaf-ui-surface:rgba(0,0,0,.06);--mushaf-paper:#f7f1e7;--mushaf-text:#30291f}
html[data-theme=cream] body[data-unified=quran] .listenCard.mushafListening .playerPanel{border-color:#cbbda3}
html[data-theme=cream] body[data-unified=quran] .listenCard.mushafListening{--mushaf-paper:#f7f1e7;--mushaf-text:#30291f}
html[data-theme=cream] body[data-unified=quran] .compactMushafGuide .mushafGuideClose img{filter:brightness(0)}
html[data-theme=cream] .homeResume{background:#f0e5d2;border-color:rgba(0,0,0,.22)}
html[data-theme=cream] body[data-unified=quran] .listenCard{--word-reading:#005bbb;--word-active:#b42318}

/* A quiet light surface for the fixed multicolor theme. */
html[data-theme=playful]{--theme:#d6e5ee;--theme-dark:#d6e5ee;--theme-darker:#bfd3e6;--theme-soft:#cbddee;--theme-faint:#e1ebf2;--theme-rgb:0,0,0;--ink:#26364a;--muted:#566c83;--line:#a7bbc9;--page:#d6e5ee;--paper:#d6e5ee;--cream:#cddfeb;--word-active:#725700;--word-reading:#614a00;--accent:#614a00;color-scheme:light}
html[data-theme=playful] body[data-unified]{background:#d6e5ee;color:var(--control-ink)}
html[data-theme=playful] body[data-unified] *{color:var(--control-ink)!important;text-shadow:none!important}
html[data-theme=playful] body[data-unified] :is(.listenCard,.unifiedHome,.playerPanel,.playerSettingsDrawer,.downloadPopover,.unifiedAbout,.communityDialog,.appPromptDialog){background:#d6e5ee!important;color:var(--control-ink)!important;border-color:rgba(0,0,0,.22)!important}
html[data-theme=playful] body[data-unified] :is(.compactField,.downloadField,.advancedBox,.settingRangeBox,.checkLabel,.homeChoice,.pwaOption,.unifiedMorePanel,.themeMenu,.playerMiniMenu,.playbackChoiceMenu){background:#c5d9e9!important;border-color:rgba(0,0,0,.22)!important}
html[data-theme=playful] body[data-unified] :is(button,input,select,textarea){border-color:rgba(0,0,0,.22)!important;accent-color:#26364a}
html[data-theme=playful] body[data-unified] :is(input,select,textarea,option){background:#bfd3e6!important;color:var(--control-ink)!important;color-scheme:light}
html[data-theme=playful] body[data-unified=quran] .playerSettingsDrawer .compactFilters .fieldPrefix{color:#566c83!important}
html[data-theme=playful] body[data-unified] :is(.playerQuickTools,.roundControl,.quickToolBtn,.downloadToolbarBtn,.downloadPopoverClose,.fontPresets button){background:rgba(0,0,0,.04)!important;border-color:rgba(0,0,0,.22)!important}
html[data-theme=playful] body[data-unified] :is(.mainPlayBtn,.pwaActionBtn,.unifiedAbout button,.fontPresets button.active,.miniMenuChoices button.active,.playbackChoiceMenu .miniMenuChoices button.active){background:#26364a!important;border-color:#26364a!important;color:var(--control-fill-ink)!important}
html[data-theme=playful] body[data-unified] :is(.mainPlayBtn,.pwaActionBtn,.unifiedAbout button,.fontPresets button.active,.miniMenuChoices button.active) *{color:var(--control-fill-ink)!important}
html[data-theme=playful] body[data-unified] .themePickerTop .themeDot,html[data-theme=playful] body[data-unified] .themePickerTop .themeDot::after{border-color:#333!important}
html[data-theme=playful] body[data-unified] .themeMenu>button[data-theme-value]>i{box-shadow:0 0 0 1px rgba(0,0,0,.35)}
html[data-theme=playful] body[data-unified] .themeMenu>button[data-theme-value].active::after{border-color:#26364a!important}
html[data-theme=playful] body[data-unified] :is(.playerMiniMenu,.playbackChoiceMenu)::after{background:#c5d9e9!important;border-color:rgba(0,0,0,.3)!important}
html[data-theme=playful] body[data-unified] .icon-heart{color:#c51f30!important}
html[data-theme=playful] body[data-unified] .customControls .svgIcon img{filter:brightness(0)}
html[data-theme=playful] body[data-unified] .mainPlayBtn .svgIcon img{filter:none}
html[data-theme=playful] body[data-unified] :is(.wordActive,.wordReading){color:#614a00!important}
html[data-theme=playful] body[data-unified] :is(.playerQuickTools,.unifiedNav,.playerSettingsDrawerHead,.communityDialogHead,.quranDownloadSection){border-color:rgba(0,0,0,.22)!important}
html[data-theme=playful] body[data-unified] :is(.customProgress,.offlineDownloadBar){accent-color:#26364a}
html[data-theme=playful] body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu{background:#c5d9e9!important;color:#26364a!important;border-color:rgba(0,0,0,.3)!important}
html[data-theme=playful] body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu .miniMenuChoices button{background:rgba(0,0,0,.05)!important;color:#26364a!important;border-color:rgba(0,0,0,.22)!important}
html[data-theme=playful] body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu .miniMenuChoices button.active{background:#26364a!important;color:#d6e5ee!important;border-color:#26364a!important}
html[data-theme=playful] body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu::after{background:#c5d9e9!important;border-color:rgba(0,0,0,.3)!important}
html[data-theme=playful] body[data-unified] input[type=range]::-webkit-slider-thumb{background:#26364a!important;box-shadow:none!important;border-color:#26364a!important}
html[data-theme=playful] body[data-unified] input[type=range]::-moz-range-thumb{background:#26364a!important;box-shadow:none!important;border-color:#26364a!important}
html[data-theme=playful] body[data-unified] :is(input[type=range],progress){accent-color:#26364a!important}
html[data-theme=playful] body[data-unified] :is(button,a,input,select,textarea):focus-visible{outline-color:#26364a!important}
html[data-theme=playful] body[data-unified] .unifiedNav .active{background:rgba(0,0,0,.09)!important}
html[data-theme=playful] body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactField,html[data-theme=playful] body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactField:focus-within{background:#c5d9e9!important;border-color:#a7bbc9!important}
html[data-theme=playful] body[data-unified=quran] .playerSettingsDrawer .compactFilters .compactField:focus-within{border-color:#566c83!important}
html[data-theme=playful] body[data-unified] :is(.mushafSection,.mushafFrame,.mushafInner,.mushafTranslationPanel,.mushafToolbar,.mushafGuide,.duaContinuousSection,.duaContinuousFrame,.duaContinuousInner){background:#d6e5ee!important;border-color:#a7bbc9!important}
html[data-theme=playful] body[data-unified=quran] #quranMoreMenu{background:#c5d9e9!important;color:#26364a!important;border-color:rgba(0,0,0,.3)!important}
html[data-theme=playful] body[data-unified=quran] #quranMoreMenu::after{background:#c5d9e9;border-color:rgba(0,0,0,.3)}
html[data-theme=playful] .themePickerTop .themeMenu>button[data-theme-value].active>i::after{border-color:#26364a}
html[data-theme=playful] body[data-unified=quran] .listenCard.mushafListening{--mushaf-ui-ink:#26364a;--mushaf-ui-muted:#566c83;--mushaf-ui-surface:rgba(0,0,0,.06);--mushaf-paper:#d6e5ee;--mushaf-text:#26364a}
html[data-theme=playful] body[data-unified=quran] .listenCard.mushafListening .playerPanel{border-color:#a7bbc9}
html[data-theme=playful] body[data-unified=quran] .listenCard.mushafListening{--mushaf-paper:#d6e5ee;--mushaf-text:#26364a}
html[data-theme=playful] body[data-unified=quran] .compactMushafGuide .mushafGuideClose img{filter:brightness(0)}
html[data-theme=playful] .homeResume{background:#c5d9e9;border-color:rgba(0,0,0,.22)}
html[data-theme=playful] body[data-unified=quran] .listenCard{--word-reading:#005bbb;--word-active:#b42318}

/* Static pastel accents stay outside Quran and dua reading text. */
.themeMenu [data-theme-value=playful] i{--swatch:conic-gradient(#91bedf 0deg 90deg,#acd3b8 90deg 180deg,#ebc890 180deg 270deg,#c5b2dd 270deg 360deg);animation:none!important}
html[data-theme=playful] body[data-unified] .themePickerTop .themeDot{background:conic-gradient(#91bedf 0deg 90deg,#acd3b8 90deg 180deg,#ebc890 180deg 270deg,#c5b2dd 270deg 360deg)!important;animation:none!important}
html[data-theme=playful] body[data-unified] .themePickerTop .themeDot::after{animation:none!important}
html[data-theme=playful] body[data-unified] :is(.mainPlayBtn,.pwaActionBtn,.unifiedAbout button,.fontPresets button.active,.miniMenuChoices button.active){background:var(--control-fill)!important;border-color:#476b99!important;color:var(--control-fill-ink)!important}
html[data-theme=playful] body[data-unified] :is(.mainPlayBtn,.pwaActionBtn,.unifiedAbout button,.fontPresets button.active,.miniMenuChoices button.active) *{color:var(--control-fill-ink)!important}
html[data-theme=playful] body[data-unified=quran] :is(#playbackRateMenu,#smartRepeatMenu,#sleepTimerMenu).quranPlaybackMenu .miniMenuChoices button.active{background:#476b99!important;border-color:#476b99!important;color:#fff!important}
html[data-theme=playful] body[data-unified] .homeChoice[href="/quran/"]{background:#c7e2d6!important;border-color:#b6d9c7!important}
html[data-theme=playful] body[data-unified] .homeChoice[href="/dua/"]{background:#d8cbed!important;border-color:#cfc0e2!important}
html[data-theme=playful] body[data-unified] .homeChoice[href="/quran/"] .svgIcon{color:#36735c!important}
html[data-theme=playful] body[data-unified] .homeChoice[href="/dua/"] .svgIcon{color:#785293!important}
html[data-theme=playful] body[data-unified] .downloadToolbarBtn{background:#c7e2d6!important;border-color:#b6d9c7!important}
html[data-theme=playful] body[data-unified] .downloadToolbarBtn .svgIcon{color:#36735c!important}
html[data-theme=playful] body[data-unified] :is(#prevBtn,#customPrevBtn){background:#bed4ee!important;border-color:#c4d4ee!important}
html[data-theme=playful] body[data-unified] :is(#nextBtn,#customNextBtn){background:#c9e2c7!important;border-color:#c4ddc6!important}
html[data-theme=playful] body[data-unified] #playFromStartBtn{background:#eac7c3!important;border-color:#efc6c3!important}
html[data-theme=playful] body[data-unified] #playbackRateBtn{background:#d7c9ed!important}
html[data-theme=playful] body[data-unified] #smartRepeatBtn{background:#c7dfcf!important}
html[data-theme=playful] body[data-unified] #sleepTimerBtn{background:#ead3ad!important}

/* A fixed colorful background, with a quiet single-color Mushaf paper. */
html[data-theme=playful] body[data-unified]{background:#d4bee8!important;background-image:linear-gradient(135deg,#d4bee8 0%,#b7cee9 48%,#afd8cc 100%)!important}
html[data-theme=playful] body[data-unified=home] .unifiedHome{background:transparent!important}
html[data-theme=playful] body[data-unified] .listenCard{background:transparent!important}
html[data-theme=playful] body[data-unified] .listenCard:is(:fullscreen,:-webkit-full-screen,.playerFullscreenFallback){background:#d4bee8!important;background-image:linear-gradient(135deg,#d4bee8 0%,#b7cee9 48%,#afd8cc 100%)!important}
html[data-theme=playful] body[data-unified=quran] .wordTranslationPopup{background:#d6e5ee;color:#26364a;border-color:#a7bbc9}

/* Larger hit areas retain the existing compact icons and theme colors. */
body[data-unified] .readerTopTool,body[data-unified] .themePickerTop .themeToggle{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important}
body[data-unified] :is(.readerTopRight,.readerTopLeft){gap:1px!important}
body[data-unified] .readerTopTools button.activeDuaLabel{display:flex;align-items:center;gap:4px;min-height:44px;min-width:0;max-width:min(220px,calc(100vw - 242px))!important;padding:0 3px;margin:0;border:0;border-radius:8px;background:transparent;box-shadow:none;font:700 14px/1.6 Yekan,Tahoma,Arial,sans-serif!important;color:#fff;direction:rtl;text-align:right;cursor:pointer;pointer-events:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body[data-unified] button.activeDuaLabel::after{content:'';flex:0 0 6px;width:6px;height:6px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);margin:0 2px 3px}
body[data-unified] button.activeDuaLabel:focus-visible{outline:2px solid currentColor;outline-offset:2px}
body[data-unified=dua] button.activeDuaLabel{display:block}
body[data-unified=dua] button.activeDuaLabel::after{display:inline-block;margin-right:6px}
body[data-unified=quran] .ayahTranslation{font-size:calc(17px * var(--font-scale))!important;line-height:2.1!important;max-width:680px!important;margin-left:auto!important;margin-right:auto!important;color:inherit!important}
body[data-unified] .customControls .roundControl{width:44px!important;height:44px!important;min-width:44px!important}
body[data-unified] .playerQuickTools{display:flex!important;flex-wrap:nowrap!important;gap:5px!important;padding:4px 8px!important;width:max-content!important;max-width:calc(100vw - 28px)!important;overflow:visible!important}
body[data-unified] .playerQuickTools>.playerToolDivider{display:none!important}
body[data-unified] .playerQuickTools .quickToolBtn{width:44px!important;min-width:44px!important;height:44px!important;min-height:44px!important;flex:none!important}
body[data-unified] #playbackRateBtn{font-size:13px!important}
body[data-unified] .customProgressRow{font-size:11px!important}
body[data-unified] .playerSettingsDrawer{width:min(390px,calc(100vw - 24px))!important}
body[data-unified] .playerSettingsDrawerHead strong{font-size:15px!important}
body[data-unified] .playerSettingsDrawer .compactField{min-height:50px!important}
body[data-unified] .playerSettingsDrawer .compactField :is(select,input){font-size:13px!important}
body[data-unified] .playerSettingsDrawer .fieldPrefix{font-size:12px!important}
body[data-unified] .playerSettingsDrawer .advancedBox summary{padding:15px 10px!important;font-size:13px!important;text-align:right!important}
body[data-unified] .playerSettingsDrawer .advancedBox summary::after{background:currentColor!important}
body[data-unified] .unifiedNav :is(a,button){font-size:13px!important;min-height:44px!important}
body[data-unified] #playerSettingsClose{width:44px!important;height:44px!important;min-width:44px!important}
body[data-unified] .playerSettingsBackdrop{display:block!important;background:rgba(0,20,17,.46);z-index:13990;opacity:0;visibility:hidden;pointer-events:none;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
body[data-unified] .playerSettingsBackdrop.open{opacity:1;visibility:visible;pointer-events:auto}
body[data-unified=dua] #duaMoreMenu{position:fixed;bottom:auto!important;right:auto!important;transform:none!important;z-index:14000;width:220px;max-width:calc(100vw - 16px);padding:10px;border:1px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:16px;background:var(--theme-dark);color:inherit;box-shadow:0 12px 30px rgba(0,0,0,.24);direction:rtl}
body[data-unified=dua] #duaMoreMenu[hidden]{display:none!important}
body[data-unified=dua] #duaMoreMenu .quickToolBtn{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:4px 8px;border:0;border-radius:9px;background:transparent;color:inherit;font:inherit;font-size:13px;text-align:right}
body[data-unified=dua] #duaMoreMenu .svgIcon{flex:0 0 18px;width:18px;height:18px}
body[data-unified=dua] #duaMoreMenu .quickToolBtn:hover{background:color-mix(in srgb,currentColor 8%,transparent)}
body[data-unified=dua] #duaMoreMenu .quickToolBtn:focus-visible{outline:2px solid currentColor;outline-offset:-2px}
@media(max-width:600px){body[data-unified=quran] .ayahTranslation{font-size:calc(16px * var(--font-scale))!important}}
@media(max-width:360px){body[data-unified] .readerTopTools button.activeDuaLabel{font-size:12.5px!important}body[data-unified] .playerQuickTools{gap:3px!important;padding:4px!important;max-width:calc(100vw - 20px)!important}}
@media(prefers-reduced-motion:reduce){body[data-unified] .playerSettingsBackdrop{transition:none}}

html:is([data-theme=white],[data-theme=cream],[data-theme=playful]) body[data-unified] .readerTopTools button.activeDuaLabel{color:var(--ink)!important}
body[data-unified] .readerTopLeft .siteLikeBtn{width:auto!important;min-width:44px!important}
body[data-unified=quran] .listenCard.mushafListening .customProgressRow .mushafPageNav{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important}

body[data-unified=quran] #mediaCreateModal{z-index:20000!important}
body[data-unified=quran].mediaModalOpen .readerTopTools{visibility:hidden;pointer-events:none}
body[data-unified=dua] #duaMoreMenu::after{background:var(--theme-dark);left:var(--menu-arrow-left,50%)}

/* Keep the page button targets separate from elapsed/duration labels. */
body[data-unified=quran] .listenCard.mushafListening .customProgressRow.mushafProgress {
 grid-template-columns:44px minmax(38px,max-content) minmax(0,1fr) minmax(38px,max-content) 44px!important;
}
body[data-unified=quran] .listenCard.mushafListening .customProgressRow :is(#customCurrentTime,#customDuration) {
 width:auto!important;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.communityDialogBody {overscroll-behavior:contain}
/* A familiar palette symbol uses the toolbar ink in every theme. */
html[data-theme] #themeToggle .themeDot {
 width:24px!important;height:24px!important;border:0!important;border-radius:0!important;
 background:currentColor!important;box-shadow:none!important;animation:none!important;
 -webkit-mask:url("/icons/palette.svg") center/contain no-repeat;
 mask:url("/icons/palette.svg") center/contain no-repeat;
}
html[data-theme] #themeToggle .themeDot::after {display:none!important}

/* Match the download button to its neighboring toolbar controls. */
html[data-theme] body[data-unified] .readerTopTool.downloadToolbarBtn {
 border:0!important;border-radius:8px!important;background:transparent!important;box-shadow:none!important;
}
html[data-theme] body[data-unified] .readerTopTool.downloadToolbarBtn:focus-visible {
 outline:2px solid currentColor!important;outline-offset:3px;
}
/* Keep the palette outline in toolbar ink; its three paint dots stay colored. */
html[data-theme] #themeToggle .themeDot::before {
 content:"";position:absolute;inset:0!important;pointer-events:none;
 border:0!important;border-radius:0!important;box-shadow:none!important;
 opacity:1!important;animation:none!important;transform:none!important;
 background:url("/icons/palette-colors.svg") center/contain no-repeat;
}
body[data-unified=quran] #playerSettingsDrawer .playerSettingsDrawerHead {
 direction:rtl!important;flex-direction:row!important;justify-content:space-between!important;text-align:right!important;
}
body[data-unified=quran] #playerSettingsDrawer .playerSettingsDrawerHead strong {
 order:0;text-align:right!important;
}
body[data-unified=quran] #playerSettingsClose {order:1;margin:0!important}

.downloadPopover.clarityDownloads {
 --download-ink:#fff;--download-paper:var(--theme-dark);
 width:min(350px,calc(100vw - 16px));padding:14px;color:var(--download-ink);
}
html[data-theme=white] .downloadPopover.clarityDownloads {--download-ink:#111;--download-paper:#fff}
html[data-theme=cream] .downloadPopover.clarityDownloads {--download-ink:#30291f;--download-paper:#f7f1e7}
html[data-theme=playful] .downloadPopover.clarityDownloads {--download-ink:#26364a;--download-paper:#d6e5ee}
.clarityDownloads .downloadPopoverHead {
 direction:rtl;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--download-ink) 15%,transparent);
}
.clarityDownloads .downloadPopoverHead strong {font-size:16px}
.clarityDownloads #pwaSettingsBox {display:block;gap:0;color:inherit}
.clarityDownloads .pwaSettingsTitle {display:none}
.clarityDownloads #pwaSettingsBox .downloadSection {
 display:block;margin:10px 0 0;padding:0!important;border:1px solid color-mix(in srgb,var(--download-ink) 16%,transparent)!important;
 border-radius:12px;background:color-mix(in srgb,var(--download-ink) 4.5%,transparent)!important;color:inherit;
}
.clarityDownloads .downloadSectionHeader {
 display:flex;direction:rtl;align-items:center;justify-content:space-between;gap:8px;min-height:56px;
 padding:13px 12px;list-style:none;cursor:pointer;color:inherit;
}
.clarityDownloads .downloadSectionHeader::-webkit-details-marker {display:none}
.clarityDownloads .downloadSectionHeader::marker {content:""}
.clarityDownloads .downloadSectionHeader:focus-visible {outline:2px solid currentColor;outline-offset:-3px;border-radius:11px}
.clarityDownloads .downloadSectionTitle {display:flex;align-items:center;gap:9px;min-width:0;flex:1 1 auto}
.clarityDownloads .downloadSectionTitle strong {font:700 14px/1.6 Yekan,Tahoma,sans-serif;color:inherit;white-space:nowrap}
.clarityDownloads .clarityIcon {
 display:inline-block;width:19px;height:19px;flex:0 0 19px;background:currentColor;
 -webkit-mask:var(--icon) center/contain no-repeat;mask:var(--icon) center/contain no-repeat;
}
.clarityInstallIcon {--icon:url('/icons/home.svg')}
.clarityDuaIcon {--icon:url('/icons/headphones.svg')}
.clarityQuranIcon {--icon:url('/icons/book-quran.svg')}
.clarityDownloads .downloadSectionState {
 display:flex;align-items:center;gap:5px;font:500 11px/1.7 Yekan,Tahoma,sans-serif;color:inherit;
 opacity:.8;max-width:48%;white-space:nowrap;
}
.clarityDownloads .isReady .downloadSectionState {opacity:1}
.clarityDownloads .isReady .downloadSectionState::after {
 content:"✓";display:grid;place-items:center;width:17px;height:17px;border-radius:50%;
 background:color-mix(in srgb,var(--download-ink) 10%,transparent);font-size:11px;
}
.clarityDownloads .downloadSectionChevron {
 width:7px;height:7px;flex:0 0 7px;margin:0 3px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
 transform:rotate(-45deg);opacity:.75;
}
.clarityDownloads .downloadSection[open]>.downloadSectionHeader .downloadSectionChevron {transform:rotate(135deg)}
.clarityDownloads .downloadSection.isReady>.downloadSectionHeader .downloadSectionChevron {display:none}
.clarityDownloads .downloadSectionBody {padding:0 12px 14px;color:inherit}
.clarityDownloads .downloadSectionBody>.pwaOptionHint,
.clarityDownloads .downloadSectionBody>.offlineDownloadMeta {color:inherit;opacity:.8;margin:8px 0 0}
.clarityDownloads #pwaSettingsBox .pwaActionBtn {
 display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:47px;margin:10px 0 0;
 border:0!important;border-radius:10px!important;background:var(--download-ink)!important;color:var(--download-paper)!important;
 font:800 13px/1.7 Yekan,Tahoma,sans-serif;padding:10px 8px;
}
.clarityDownloads #pwaSettingsBox .pwaActionBtn:disabled {opacity:.5;cursor:default}
.clarityDownloads #pwaSettingsBox [hidden] {display:none!important}
.clarityDownloads #pwaSettingsBox .pwaActionBtn:focus-visible,
.clarityDownloads .downloadTypeChoices button:focus-visible {outline:2px solid var(--download-ink);outline-offset:3px}
.clarityDownloads .downloadChoicePrompt {font:500 12px/1.7 Yekan,Tahoma,sans-serif;margin:3px 0 10px;color:inherit;opacity:.82}
.clarityDownloads .downloadTypeChoices {
 display:grid;grid-template-columns:1.45fr 1fr .85fr;gap:5px;padding:4px;margin:0 0 16px;
 border:1px solid color-mix(in srgb,var(--download-ink) 13%,transparent);border-radius:10px;
 background:color-mix(in srgb,var(--download-ink) 3%,transparent);
}
.clarityDownloads .downloadTypeChoices button {
 min-width:0;min-height:40px;padding:8px 3px;border:0;border-radius:7px;font:500 12px/1.7 Yekan,Tahoma,sans-serif;
 background:transparent;color:inherit;cursor:pointer;white-space:nowrap;
}
.clarityDownloads .downloadTypeChoices button[aria-pressed=true] {background:var(--download-ink)!important;color:var(--download-paper)!important;font-weight:800}
.clarityDownloads .downloadTypeChoices button:disabled {opacity:.65;cursor:default}
.clarityDownloads .quranDownloadSection .downloadField {
 grid-template-columns:35px minmax(0,1fr);gap:12px;padding:0 12px;margin:10px 0;min-height:49px;
 border:1px solid color-mix(in srgb,var(--download-ink) 20%,transparent)!important;
 border-radius:10px;background:color-mix(in srgb,var(--download-paper) 93%,var(--download-ink) 7%)!important;color:inherit!important;
}
.clarityDownloads .downloadField::after {left:19px}
.clarityDownloads .downloadFieldLabel {color:inherit!important;opacity:.7;font-size:11px}
.clarityDownloads .quranDownloadSection select {
 min-height:47px;padding:10px 0 10px 27px;font:500 13px/1.7 Yekan,Tahoma,sans-serif;
 color:inherit!important;background:transparent!important;
}
.clarityDownloads .quranDownloadSection select option {color:var(--download-ink)!important;background:var(--download-paper)!important}
.clarityDownloads .downloadPersianChoice {
 display:flex;align-items:center;gap:8px;min-height:40px;margin:4px 0 10px;padding:3px 0;
 font:500 11px/1.8 Yekan,Tahoma,sans-serif;color:inherit;
}
.clarityDownloads .downloadPersianChoice input {width:15px;height:15px;margin:0;accent-color:var(--download-ink)}
.clarityDownloads .quranDownloadStatus {
 margin:6px 0 12px;text-align:center;min-height:18px;font:500 11px/1.8 Yekan,Tahoma,sans-serif;color:inherit;opacity:.8;
}
.clarityDownloads .quranDownloadStatus:empty {display:none}
.clarityDownloads .quranDownloadStatus[data-state=saved] {opacity:1}
.clarityDownloads .downloadMushafHint {margin:8px 0 12px;font:500 12px/1.8 Yekan,Tahoma,sans-serif;color:inherit;opacity:.85}
.clarityDownloads .clarityDownloadAction::before {
 content:"";width:16px;height:16px;flex:0 0 16px;background:currentColor;
 -webkit-mask:url('/icons/download.svg') center/contain no-repeat;mask:url('/icons/download.svg') center/contain no-repeat;
}
.clarityDownloads .offlineDownloadBar,.clarityDownloads #quranDownloadProgress {margin:10px 0 0;width:100%;height:6px;accent-color:var(--download-ink)}


/* Rounded native checkboxes; labels, checked state and change handlers stay intact. */
body[data-unified]{--checkbox-ink:#fff;--checkbox-mark:var(--theme-darker)}
html[data-theme=white] body[data-unified]{--checkbox-ink:#253a50;--checkbox-mark:#fff}
html[data-theme=cream] body[data-unified]{--checkbox-ink:#53432c;--checkbox-mark:#fff}
html[data-theme=playful] body[data-unified]{--checkbox-ink:#334c6a;--checkbox-mark:#fff}
html[data-theme] body[data-unified] input[type=checkbox]{
  -webkit-appearance:none;appearance:none;position:relative;display:inline-grid;
  place-items:center;box-sizing:border-box;width:20px;height:20px;
  min-width:20px;min-height:20px;flex:0 0 20px;padding:0;margin:0;
  border:1.5px solid color-mix(in srgb,var(--checkbox-ink) 70%,transparent)!important;
  border-radius:6px;background:color-mix(in srgb,var(--checkbox-ink) 6%,transparent)!important;
  vertical-align:middle;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
html[data-theme] body[data-unified] input[type=checkbox]::after{
  content:"";display:block;width:13px;height:13px;background:var(--checkbox-mark);
  -webkit-mask:url("/icons/check.svg") center/contain no-repeat;
  mask:url("/icons/check.svg") center/contain no-repeat;
  opacity:0;transform:scale(.7);transition:opacity .12s ease,transform .12s ease;
}
html[data-theme] body[data-unified] input[type=checkbox]:is(:checked,:indeterminate){
  background:var(--checkbox-ink)!important;border-color:var(--checkbox-ink)!important;
}
html[data-theme] body[data-unified] input[type=checkbox]:is(:checked,:indeterminate)::after{opacity:1;transform:scale(1)}
html[data-theme] body[data-unified] input[type=checkbox]:indeterminate::after{
  width:10px;height:2px;border-radius:2px;-webkit-mask:none;mask:none;
}
html[data-theme] body[data-unified] input[type=checkbox]:focus-visible{outline:2px solid var(--checkbox-ink);outline-offset:4px}
html[data-theme] body[data-unified] input[type=checkbox]:disabled{opacity:.45;cursor:default}
@media(hover:hover){html[data-theme] body[data-unified] input[type=checkbox]:not(:disabled):hover{border-color:var(--checkbox-ink)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--checkbox-ink) 10%,transparent)}}
@media(prefers-reduced-motion:reduce){html[data-theme] body[data-unified] input[type=checkbox],html[data-theme] body[data-unified] input[type=checkbox]::after{transition:none}}
@media(forced-colors:active){html[data-theme] body[data-unified] input[type=checkbox]{-webkit-appearance:auto;appearance:auto;background:initial!important;border:initial!important;box-shadow:none}html[data-theme] body[data-unified] input[type=checkbox]::after{display:none}}


/* Compact switches retain the original checkbox inputs and labels. */
body[data-unified]{--switch-on:var(--theme);--switch-thumb:#fff;--switch-sign:#fff}
html[data-theme=white] body[data-unified],html[data-theme=black] body[data-unified]{--switch-on:#167260}
html[data-theme=cream] body[data-unified]{--switch-on:#706039}
html[data-theme=playful] body[data-unified]{--switch-on:#35638a}
html[data-theme] body[data-unified] input[type=checkbox]{
  display:inline-block;width:44px;height:26px;min-width:44px;min-height:26px;flex:0 0 44px;
  border:1px solid color-mix(in srgb,var(--checkbox-ink) 70%,transparent)!important;
  border-radius:999px;background:color-mix(in srgb,var(--checkbox-ink) 10%,transparent)!important;
  box-shadow:inset 0 1px 4px #0002;overflow:hidden;
}
html[data-theme] body[data-unified] input[type=checkbox]::before{
  content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--checkbox-ink);box-shadow:0 1px 4px #0003;transform:translateX(0);
  transition:transform .18s ease,background-color .18s ease;
}
html[data-theme] body[data-unified] input[type=checkbox]::after{
  position:absolute;top:7px;right:5px;left:auto;width:10px;height:10px;
  background:var(--checkbox-ink);opacity:.7;transform:none;
  -webkit-mask:url("/icons/xmark.svg") center/contain no-repeat;mask:url("/icons/xmark.svg") center/contain no-repeat;
  transition:opacity .15s ease;
}
html[data-theme] body[data-unified] input[type=checkbox]:is(:checked,:indeterminate){
  background:var(--switch-on)!important;border-color:color-mix(in srgb,var(--switch-on) 60%,var(--switch-thumb) 40%)!important;
}
html[data-theme] body[data-unified] input[type=checkbox]:checked::before{background:var(--switch-thumb);transform:translateX(18px)}
html[data-theme] body[data-unified] input[type=checkbox]:checked::after{
  right:auto;left:5px;width:12px;height:12px;top:6px;background:var(--switch-sign);opacity:1;transform:none;
  -webkit-mask:url("/icons/check.svg") center/contain no-repeat;mask:url("/icons/check.svg") center/contain no-repeat;
}
html[data-theme] body[data-unified] input[type=checkbox]:indeterminate::before{background:var(--switch-thumb);transform:translateX(9px)}
html[data-theme] body[data-unified] input[type=checkbox]:indeterminate::after{display:none}

/* An inset arrow and rounded value area for the RTL filter controls. */
html[data-theme] body[data-unified] :is(.compactField,.downloadField,.mushafTranslationField,.seoTranslationFilter,.seoAudioHead):has(>select){position:relative}
html[data-theme] body[data-unified] :is(.compactField,.downloadField,.mushafTranslationField,.seoTranslationFilter,.seoAudioHead)>select{
  appearance:none;-webkit-appearance:none;border-radius:8px!important;
  padding-right:12px!important;padding-left:32px!important;direction:rtl;text-align:right;text-align-last:right;
}
html[data-theme] body[data-unified] :is(.compactField,.downloadField,.mushafTranslationField,.seoTranslationFilter,.seoAudioHead):has(>select)::after{
  content:"";position:absolute;left:20px;right:auto;top:50%;margin:0;width:6px;height:6px;
  border:0;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-65%) rotate(-45deg);pointer-events:none;z-index:1;
}
html[data-theme] body[data-unified=quran] .playerSettingsDrawer .surahAyahPair{grid-template-columns:minmax(0,1fr) 100px!important}
html[data-theme] body[data-unified=quran] .playerSettingsDrawer :is(.compactAyahField,.compactJuzField)>select{padding-right:6px!important;padding-left:24px!important}
html[data-theme] body[data-unified=quran] .playerSettingsDrawer :is(.compactAyahField,.compactJuzField)::after{left:18px}
html[data-theme] body[data-unified] .compactField input[type=number]{border-radius:8px!important;padding-inline:9px!important}
@media(prefers-reduced-motion:reduce){html[data-theme] body[data-unified] input[type=checkbox],html[data-theme] body[data-unified] input[type=checkbox]::before,html[data-theme] body[data-unified] input[type=checkbox]::after{transition:none}}
@media(forced-colors:active){
  html[data-theme] body[data-unified] input[type=checkbox]{width:20px;height:20px;min-width:20px;min-height:20px;flex-basis:20px;border-radius:0;background:initial!important;border:initial!important;box-shadow:none;overflow:visible}
  html[data-theme] body[data-unified] input[type=checkbox]:is(:checked,:indeterminate){background:initial!important;border:initial!important}
  html[data-theme] body[data-unified] input[type=checkbox]::before{display:none}
}


/* Keep the full-width update action and its explanation in separate rows. */
.clarityDownloads #pwaUpdateBox{
  display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:8px;
  width:100%;min-width:0;margin-top:14px;padding-top:12px;direction:rtl;
  border-top:1px solid color-mix(in srgb,var(--download-ink) 15%,transparent);
}
.clarityDownloads #pwaSettingsBox #pwaUpdateBtn{
  grid-column:1;grid-row:1;width:100%;min-width:0;margin:0;
}
.clarityDownloads #pwaUpdateMeta{
  grid-column:1;grid-row:2;display:block;min-width:0;max-width:100%;
  margin:0;text-align:right;white-space:normal;overflow-wrap:anywhere;
  color:var(--download-ink);font:500 11px/1.9 Yekan,Tahoma,Arial,sans-serif;
}
.clarityDownloads #pwaUpdateBox[hidden]{display:none!important}


/* Keep Arabic primary in the ordinary Quran reader. */
body[data-unified=quran] .listenCard:not(.mushafListening) .ayahTranslation{font-size:calc(15px * var(--font-scale))!important}
@media(max-width:600px){body[data-unified=quran] .listenCard:not(.mushafListening) .ayahTranslation{font-size:calc(14px * var(--font-scale))!important}}


/* Translation uses a quiet, readable tint, separate from the Arabic text. */
body[data-unified=quran]{--quran-translation-ink:#cbe5dc}
html[data-theme=navy] body[data-unified=quran]{--quran-translation-ink:#c4d8ed}
html[data-theme=turquoise] body[data-unified=quran]{--quran-translation-ink:#d1eff3}
html[data-theme=blue] body[data-unified=quran]{--quran-translation-ink:#d3e7fb}
html[data-theme=purple] body[data-unified=quran]{--quran-translation-ink:#ddd0f1}
html[data-theme=lilac] body[data-unified=quran]{--quran-translation-ink:#eee1f7}
html[data-theme=rose] body[data-unified=quran]{--quran-translation-ink:#f6d3df}
html[data-theme=peach] body[data-unified=quran]{--quran-translation-ink:#ffe0cd}
html[data-theme=amber] body[data-unified=quran]{--quran-translation-ink:#f8e4bf}
html[data-theme=graphite] body[data-unified=quran]{--quran-translation-ink:#d1dce1}
html[data-theme=olive] body[data-unified=quran]{--quran-translation-ink:#dde6c9}
html[data-theme=burgundy] body[data-unified=quran]{--quran-translation-ink:#efcbd5}
html[data-theme=white] body[data-unified=quran]{--quran-translation-ink:#4e6073}
html[data-theme=black] body[data-unified=quran]{--quran-translation-ink:#b9d3e8}
html[data-theme=cream] body[data-unified=quran]{--quran-translation-ink:#6d4c2d}
html[data-theme=playful] body[data-unified=quran]{--quran-translation-ink:#36516b}
html[data-theme] body[data-unified=quran] .listenCard :is(.ayahTranslation,.currentMushafTranslationText){color:var(--quran-translation-ink)!important}
html[data-theme] body[data-unified=quran] .listenCard .pageTranslationItem:not(.active){color:var(--quran-translation-ink)!important}

/* The existing repeat button opens its editor; no new reader toolbar item. */
body[data-unified=quran]{--repeat-ink:#fff;--repeat-muted:rgba(255,255,255,.94);--repeat-fill:#fff;--repeat-fill-ink:var(--theme-dark);--repeat-edge:rgba(255,255,255,.24);--repeat-soft:rgba(255,255,255,.06);--repeat-tabs:rgba(0,0,0,.13);--repeat-close-filter:brightness(0) invert(1)}
html:is([data-theme=white],[data-theme=cream],[data-theme=playful]) body[data-unified=quran]{--repeat-muted:color-mix(in srgb,var(--repeat-ink) 80%,transparent);--repeat-edge:color-mix(in srgb,var(--repeat-ink) 25%,transparent);--repeat-soft:rgba(0,0,0,.04);--repeat-tabs:rgba(0,0,0,.07);--repeat-fill-ink:#fff;--repeat-close-filter:brightness(0)}
html[data-theme=white] body[data-unified=quran]{--repeat-ink:#111;--repeat-fill:#111}
html[data-theme=cream] body[data-unified=quran]{--repeat-ink:#30291f;--repeat-fill:#30291f}
html[data-theme=playful] body[data-unified=quran]{--repeat-ink:#26364a;--repeat-fill:#476b99}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu{display:block;width:312px!important;max-width:calc(100vw - 32px)!important;max-height:var(--repeat-menu-height,calc(100svh - 16px))!important;overflow-y:auto!important;box-sizing:border-box;padding:16px!important;border-radius:22px!important;color:var(--repeat-ink)!important;font-family:Yekan,Tahoma,Arial,sans-serif;direction:rtl;overscroll-behavior:contain;scrollbar-width:thin}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu::after{display:none!important}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu *{box-sizing:border-box}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu [hidden]{display:none!important}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeHead strong{display:block;margin:0;font-size:14px;font-weight:800;color:var(--repeat-ink)!important}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeClose{flex:0 0 30px;width:30px;min-width:30px;max-width:30px;height:30px;min-height:30px;max-height:30px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--repeat-soft)!important;color:var(--repeat-ink)!important}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeClose img{filter:var(--repeat-close-filter);width:11px;height:11px}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeModes{display:flex;gap:4px;padding:4px;background:var(--repeat-tabs);border-radius:12px;margin-bottom:14px}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeModes button{flex:1;min-width:0;height:38px;padding:0 2px;border:0;border-radius:9px;background:transparent!important;color:var(--repeat-muted)!important;font:700 11px Yekan,Tahoma,sans-serif;white-space:nowrap}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeModes button.selected{background:var(--repeat-fill)!important;color:var(--repeat-fill-ink)!important;box-shadow:0 2px 7px rgba(0,0,0,.12)}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeEndpoints{display:flex;gap:10px;margin-bottom:16px}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeField{position:relative;display:flex;align-items:center;flex:1;min-width:0;height:46px;padding:0 12px;border:1px solid var(--repeat-edge);border-radius:12px;background:var(--repeat-soft)!important;color:var(--repeat-ink)!important}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeField span{white-space:nowrap;font-size:11px;color:var(--repeat-muted)!important}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeField select{flex:1;min-width:0;margin:0;border:0;background:transparent!important;color:var(--repeat-ink)!important;padding:0 7px 0 18px;height:40px;font:800 15px Yekan,Tahoma,sans-serif;appearance:none;direction:rtl;box-shadow:none;border-radius:8px}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeField::after{content:'';position:absolute;left:14px;top:18px;width:6px;height:6px;border-left:1.5px solid var(--repeat-muted);border-bottom:1.5px solid var(--repeat-muted);transform:rotate(-45deg);pointer-events:none}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeField option{background:var(--theme-dark)!important;color:var(--repeat-ink)!important}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeCountLabel{display:block;font-size:11px;font-weight:700;color:var(--repeat-muted)!important;margin-bottom:9px}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeCounts{display:flex;gap:7px;margin-bottom:16px}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeCounts button{flex:1;height:40px;padding:0;border:1px solid var(--repeat-edge);border-radius:10px;background:var(--repeat-soft)!important;color:var(--repeat-ink)!important;font:700 12px Yekan,Tahoma,sans-serif}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeCounts button.selected{background:var(--repeat-fill)!important;border-color:var(--repeat-fill)!important;color:var(--repeat-fill-ink)!important}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeActions{display:flex;gap:8px}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeStart{flex:1;width:auto;height:44px;padding:0;border:0;border-radius:12px;background:var(--repeat-fill)!important;color:var(--repeat-fill-ink)!important;font:800 12px Yekan,Tahoma,sans-serif}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeOff{width:72px;height:44px;padding:0;border:1px solid var(--repeat-edge);border-radius:12px;background:var(--repeat-soft)!important;color:var(--repeat-ink)!important;font:700 12px Yekan,Tahoma,sans-serif}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu :is(button,select):focus-visible{outline:2px solid var(--repeat-ink)!important;outline-offset:2px}

/* Off is an explicit state; inactive repeat choices have no selection. */
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeOffMark{width:11px;height:11px;margin-inline-start:4px;vertical-align:middle;filter:var(--repeat-close-filter)}
html[data-theme] body[data-unified=quran] #smartRepeatMenu.repeatRangeMenu .rangeOff[aria-pressed=true]{border-color:var(--repeat-ink)!important}

/* Progress is on the right; its cancel control remains on the left in RTL. */
.downloadProgressRow{display:flex;direction:rtl;align-items:center;gap:8px;margin-top:8px;min-width:0}
.downloadProgressRow[hidden]{display:none!important}
.downloadProgressRow progress,.clarityDownloads .downloadProgressRow #quranDownloadProgress,.clarityDownloads .downloadProgressRow .offlineDownloadBar{flex:1;min-width:0;width:0;margin:0;height:6px}
.downloadProgressRow .downloadCancel{flex:0 0 36px;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:transparent;color:inherit;cursor:pointer}
.downloadProgressRow .downloadCancel[hidden]{display:none!important}
.downloadCancel:hover{background:color-mix(in srgb,currentColor 10%,transparent)}
.downloadCancel:focus-visible{outline:2px solid currentColor;outline-offset:1px}
.downloadCancel:disabled{opacity:.5;cursor:default}
.downloadCancel img{display:block;width:12px;height:12px;filter:brightness(0) invert(1)}
html:is([data-theme=white],[data-theme=cream],[data-theme=playful]) .clarityDownloads .downloadCancel img{filter:brightness(0)}
.pwaActivity.show{pointer-events:auto}
.pwaActivity .downloadProgressRow{margin-top:0}
html:is([data-theme=white],[data-theme=cream],[data-theme=playful]) .pwaActivity{color:#17212b;background:var(--theme-dark);border-color:color-mix(in srgb,#17212b 20%,transparent)}
html:is([data-theme=white],[data-theme=cream],[data-theme=playful]) .pwaActivity .downloadCancel img{filter:brightness(0)}
.pwaActivity .downloadProgressRow progress{accent-color:currentColor}

/* Feedback surfaces define their foreground and background as a pair. */
html[data-theme] body[data-unified]{--feedback-bg:color-mix(in srgb,var(--theme-dark) 80%,#000 20%);--feedback-ink:#fff;--feedback-edge:color-mix(in srgb,#fff 30%,transparent);--feedback-soft:color-mix(in srgb,#fff 9%,var(--feedback-bg));--feedback-fill:#fff;--feedback-fill-ink:var(--theme-dark);--feedback-muted:color-mix(in srgb,var(--feedback-ink) 85%,var(--feedback-bg))}
html[data-theme=white] body[data-unified]{--feedback-bg:#fff;--feedback-ink:#111;--feedback-edge:#bbb;--feedback-soft:#f1f3f5;--feedback-fill:#111;--feedback-fill-ink:#fff}
html[data-theme=cream] body[data-unified]{--feedback-bg:#f7f1e7;--feedback-ink:#30291f;--feedback-edge:#b7a68c;--feedback-soft:#eee4d3;--feedback-fill:#30291f;--feedback-fill-ink:#f7f1e7}
html[data-theme=playful] body[data-unified]{--feedback-bg:#d6e5ee;--feedback-ink:#26364a;--feedback-edge:#a7bbc9;--feedback-soft:#c5d9e9;--feedback-fill:#476b99;--feedback-fill-ink:#fff}
html[data-theme] body[data-unified] :is(.shareToast,.appPromptDialog,.sajdahAlertDialog,.mediaCreateDialog,.mediaCreateHead,.communityDialogHead){background:var(--feedback-bg)!important;color:var(--feedback-ink)!important;border-color:var(--feedback-edge)!important}
html[data-theme] body[data-unified] .shareToast{border:1px solid var(--feedback-edge);text-shadow:none!important}
html[data-theme] body[data-unified] :is(.shareToast,.appPromptDialog,.sajdahAlertDialog,.mediaCreateHead,.communityDialogHead) :is(span,strong,p,h2,h3){color:inherit!important;text-shadow:none!important}
html[data-theme] body[data-unified] :is(.appPromptDialog>p,.sajdahAlertDialog>p,.communityDialogHead span,.commentItemDate,.commentsEmpty,.communityFormFoot>span){color:var(--feedback-muted)!important}
html[data-theme] body[data-unified] :is(.appPromptClose,.appPromptSecondary,.mediaCreateClose,.sajdahAlertSecondary,.sajdahAlertVerse,.sajdahAlertMark){background:var(--feedback-soft)!important;color:var(--feedback-ink)!important;border-color:var(--feedback-edge)!important}
html[data-theme] body[data-unified] :is(.appPromptPrimary,.sajdahAlertPrimary,.communityFormFoot button){background:var(--feedback-fill)!important;color:var(--feedback-fill-ink)!important;border-color:var(--feedback-fill)!important}
html[data-theme] body[data-unified] :is(.appPromptPrimary,.sajdahAlertPrimary,.communityFormFoot button) *{color:inherit!important}
html[data-theme] body[data-unified] .communityForm :is(input,textarea)::placeholder{color:var(--feedback-muted)!important;opacity:1}

/* Shared foreground/background pairs for reader controls. */
html[data-theme] body[data-unified]{--control-ink:#fff;--control-bg:var(--theme-dark);--control-surface:var(--theme-darker);--control-panel:var(--theme-dark);--control-soft:rgba(255,255,255,.07);--control-line:rgba(255,255,255,.22);--control-fill:#fff;--control-fill-ink:var(--theme-dark);--control-icon-filter:brightness(0) invert(1);--control-fill-icon-filter:brightness(0)}
html[data-theme=white] body[data-unified]{--control-ink:#111;--control-bg:#fff;--control-surface:#f1f1f1;--control-panel:#f5f5f5;--control-soft:rgba(0,0,0,.04);--control-line:rgba(0,0,0,.22);--control-fill:#111;--control-fill-ink:#fff;--control-icon-filter:brightness(0);--control-fill-icon-filter:brightness(0) invert(1)}
html[data-theme=cream] body[data-unified]{--control-ink:#30291f;--control-bg:#f7f1e7;--control-surface:#eee3cf;--control-panel:#f0e5d2;--control-soft:rgba(0,0,0,.04);--control-line:rgba(0,0,0,.22);--control-fill:#30291f;--control-fill-ink:#f7f1e7;--control-icon-filter:brightness(0);--control-fill-icon-filter:brightness(0) invert(1)}
html[data-theme=playful] body[data-unified]{--control-ink:#26364a;--control-bg:#d6e5ee;--control-surface:#bfd3e6;--control-panel:#c5d9e9;--control-soft:rgba(0,0,0,.04);--control-line:rgba(0,0,0,.22);--control-fill:#476b99;--control-fill-ink:#fff;--control-icon-filter:brightness(0);--control-fill-icon-filter:brightness(0) invert(1)}
html[data-theme] body[data-unified] :is(.mainPlayBtn,.pwaActionBtn,.unifiedAbout button,.fontPresets button.active,.miniMenuChoices button.active){--control-ink:var(--control-fill-ink);background:var(--control-fill)!important;border-color:var(--control-fill)!important;color:var(--control-fill-ink)!important}
html[data-theme] body[data-unified] :is(.mainPlayBtn,.pwaActionBtn,.unifiedAbout button,.fontPresets button.active,.miniMenuChoices button.active) *{color:var(--control-fill-ink)!important}
html[data-theme] body[data-unified] .customControls .svgIcon img{filter:var(--control-icon-filter)}
html[data-theme] body[data-unified] .mainPlayBtn .svgIcon img{filter:var(--control-fill-icon-filter)!important}
html[data-theme] body[data-unified=quran]{--repeat-ink:var(--control-ink);--repeat-fill:var(--control-fill);--repeat-fill-ink:var(--control-fill-ink)}
html[data-theme] body[data-unified] .downloadPopover.clarityDownloads{--download-ink:var(--control-ink);--download-paper:var(--control-bg)}
html[data-theme] body[data-unified]{--feedback-ink:var(--control-ink);--feedback-fill:var(--control-fill);--feedback-fill-ink:var(--control-fill-ink)}
html:is([data-theme=white],[data-theme=cream],[data-theme=playful]) body[data-unified]{--feedback-bg:var(--control-bg)}
html[data-theme] body[data-unified] .sizedDownloadAction{display:flex;align-items:center;justify-content:space-between;gap:10px;direction:rtl}
html[data-theme] body[data-unified] .downloadActionText{min-width:0;text-align:right}
html[data-theme] body[data-unified] .downloadActionSize{flex:0 0 auto;white-space:nowrap;font-size:9.5px;font-weight:500}
.downloadActionSize[hidden]{display:none!important}
.playbackLoadingSpinner{display:none}
button.playbackLoading{position:relative}
button.playbackLoading>.playbackLoadingSpinner{display:block!important;position:absolute;left:50%;top:50%;width:19px;height:19px;box-sizing:border-box;border:2px solid color-mix(in srgb,currentColor 28%,transparent);border-top-color:currentColor;border-radius:50%;animation:readerAudioLoading .8s linear infinite;pointer-events:none}
button.playbackLoading .svgIcon{visibility:hidden}
html[data-theme] body[data-unified] .listenCard:not(.mobileControlsHidden):not(.fullscreenControlsHidden):has(.playbackLoading) .playerPanel{opacity:1!important;pointer-events:auto!important}
html[data-theme] body[data-unified=dua] .listenCard:not(.mobileControlsHidden):not(.fullscreenControlsHidden):has(.playbackLoading) .playerPanel{transform:none!important}
html[data-theme] body[data-unified=quran] .listenCard:not(.mobileControlsHidden):not(.fullscreenControlsHidden):has(.playbackLoading) .playerPanel{transform:var(--quran-player-menu-transform,translateX(-50%))!important}
@keyframes readerAudioLoading{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){button.playbackLoading>.playbackLoadingSpinner{animation:none;transform:translate(-50%,-50%)}}

/* The repeat button can be taller than its old fixed-size wrapper. */
body[data-unified=dua] #smartRepeatWrap{
  width:auto;min-width:0;max-width:none;
  height:auto;min-height:0;aspect-ratio:auto;
  display:flex;align-items:center;
}

/* One playback track shape across readers and themes; colors follow the theme. */
html[data-theme] body[data-unified] input.customProgress{
  --progress-played:color-mix(in srgb,var(--control-ink) 60%,transparent);
  --progress-track:color-mix(in srgb,var(--control-ink) 20%,transparent);
  appearance:none!important;-webkit-appearance:none!important;
  height:16px!important;min-height:0!important;max-height:16px!important;
  padding:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;
  color:var(--control-ink)!important;
}
html[data-theme] body[data-unified] input.customProgress::-webkit-slider-runnable-track{
  height:4px!important;border:0!important;border-radius:999px!important;
  background:linear-gradient(to right,var(--progress-played) 0 var(--played),var(--progress-track) var(--played) 100%)!important;
  box-shadow:none!important;
}
html[data-theme] body[data-unified] input.customProgress::-webkit-slider-thumb{
  appearance:none!important;-webkit-appearance:none!important;
  width:8px!important;height:8px!important;margin-top:-2px!important;
  padding:0!important;border:0!important;border-radius:50%!important;
  background:var(--control-ink)!important;box-shadow:none!important;
}
html[data-theme] body[data-unified] input.customProgress::-moz-range-track{
  height:4px!important;border:0!important;border-radius:999px!important;
  background:var(--progress-track)!important;box-shadow:none!important;
}
html[data-theme] body[data-unified] input.customProgress::-moz-range-progress{
  height:4px!important;border:0!important;border-radius:999px!important;
  background:var(--progress-played)!important;box-shadow:none!important;
}
html[data-theme] body[data-unified] input.customProgress::-moz-range-thumb{
  width:8px!important;height:8px!important;padding:0!important;
  border:0!important;border-radius:50%!important;
  background:var(--control-ink)!important;box-shadow:none!important;
}

/* Keep chapter navigation paired, with a compact Stop beside Play/Pause. */
body[data-unified=quran] .primaryPlaybackControls{
  display:flex;align-items:center;justify-content:center;gap:6px;
}
html[data-theme] body[data-unified=quran] .primaryPlaybackControls .compactStopBtn{
  /* Inherit the standard round-control background and border. */
  box-shadow:none!important;color:var(--control-ink)!important;
}
body[data-unified=quran] .primaryPlaybackControls .compactStopBtn .svgIcon{
  width:12px!important;height:12px!important;
}
body[data-unified=quran] #prevSurahBtn .svgIcon img{transform:scaleX(-1)}
@media(max-width:420px){
  body[data-unified=quran] .customControls .controlCluster,
  body[data-unified=quran] .primaryPlaybackControls{gap:2px!important}
}

/* Muted reader palettes shared by every page; saved theme IDs remain stable. */
html[data-theme=blue]{
 --theme:#4B687D;--theme-dark:#40586a;--theme-darker:#334755;
 --theme-soft:#edf0f2;--theme-faint:#f9fafa;--theme-rgb:75,104,125;
}
html [data-theme-value=blue] i{--swatch:#4B687D!important;background:#4B687D!important}
html[data-theme=purple]{
 --theme:#573D53;--theme-dark:#4a3447;--theme-darker:#3b2938;
 --theme-soft:#eeecee;--theme-faint:#f9f8f9;--theme-rgb:87,61,83;
}
html [data-theme-value=purple] i{--swatch:#573D53!important;background:#573D53!important}
html[data-theme=rose]{
 --theme:#985B66;--theme-dark:#814d57;--theme-darker:#673e45;
 --theme-soft:#f5eff0;--theme-faint:#fbf9fa;--theme-rgb:152,91,102;
}
html [data-theme-value=rose] i{--swatch:#985B66!important;background:#985B66!important}
html[data-theme=peach]{
 --theme:#A35C49;--theme-dark:#8b4e3e;--theme-darker:#6f3f32;
 --theme-soft:#f6efed;--theme-faint:#fcf9f9;--theme-rgb:163,92,73;
}
html [data-theme-value=peach] i{--swatch:#A35C49!important;background:#A35C49!important}
html[data-theme=amber]{
 --theme:#82651C;--theme-dark:#6e5618;--theme-darker:#584513;
 --theme-soft:#f2f0e8;--theme-faint:#fbfaf7;--theme-rgb:130,101,28;
}
html [data-theme-value=amber] i{--swatch:#82651C!important;background:#82651C!important}
html[data-theme=olive]{
 --theme:#536442;--theme-dark:#475538;--theme-darker:#38442d;
 --theme-soft:#eef0ec;--theme-faint:#f9faf8;--theme-rgb:83,100,66;
}
html [data-theme-value=olive] i{--swatch:#536442!important;background:#536442!important}
html:is([data-theme=blue],[data-theme=purple],[data-theme=rose],[data-theme=peach],[data-theme=amber],[data-theme=olive]) body[data-unified=dua] .listenCard{
 background:var(--theme-dark);
 background-image:radial-gradient(circle at 17% 13%,rgba(255,255,255,.03),transparent 31%),linear-gradient(135deg,var(--theme-dark),var(--theme-darker));
}
html:is([data-theme=blue],[data-theme=purple],[data-theme=rose],[data-theme=peach],[data-theme=amber],[data-theme=olive]) body[data-unified] .quickToolBtn{color:var(--control-ink)!important}

/* Clamp the flowing Mushaf player to the card's inner width, rather than 100vw. */
body[data-unified=quran] .listenCard.mushafListening .playerPanel{
  max-width:100%!important;min-width:0!important;
  padding:6px 6px 4px!important;
}
body[data-unified=quran] .listenCard.mushafListening .playerQuickTools{
  max-width:100%!important;
}
@media(max-width:360px){
  body[data-unified=quran] .listenCard.mushafListening .playerQuickTools{
    gap:0!important;padding:2px 3px!important;
  }
}

/* Shared reader text controls, including Dua presets. */
body[data-unified] .playerSettingsDrawer .sharedTextSettings{
  display:block;direction:rtl;text-align:right;padding:10px;margin:8px 0 0;
  border:1px solid var(--control-line);border-radius:12px;
  background:var(--control-surface)!important;color:var(--control-ink);box-shadow:none;
}
body[data-unified] .playerSettingsDrawer .sharedTextSettings .fontBoxHead{
  display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px;
}
body[data-unified] .playerSettingsDrawer .sharedTextSettings .fontBoxHead :is(span,strong){
  color:var(--control-ink)!important;font-size:12px;line-height:1.6;
}
body[data-unified] .playerSettingsDrawer .sharedTextSettings .settingRange{
  display:block;width:100%;min-width:0;margin:0;
}
body[data-unified] .playerSettingsDrawer .sharedTextSettings .fontPresets{
  display:flex!important;gap:5px;margin-top:8px;
}
body[data-unified] .playerSettingsDrawer .sharedTextSettings .fontPresets button{
  flex:1 1 0;min-width:0;min-height:44px;padding:6px 10px;border-radius:8px;
  border:1px solid var(--control-line);background:var(--control-soft);
  color:var(--control-ink)!important;font-size:11px;text-align:center;white-space:nowrap;
}

/* Give the page more room while keeping marks and the reading underline clear. */
body[data-unified=quran] .listenCard.mushafListening .mushafFrame{padding:12px}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening .mushafInner{
  padding:12px 6px;touch-action:pan-y pinch-zoom;
}
body[data-unified=quran] .listenCard.mushafListening .mushafLine{
  min-height:32px;line-height:1.8;
}
body[data-unified=quran] .listenCard.mushafListening .mushafLine .qcfWord{
  font-weight:600!important;font-synthesis:none;
}
/* QCF's synthetic bold crowds its marks. Thicken only the monochrome outline. */
body[data-unified=quran] .listenCard.mushafListening .mushafLine[data-qcf-version=qcf_v2] .qcfWord{
  -webkit-text-stroke:.3px currentColor;paint-order:stroke fill;
}
@media(max-width:820px){
  body[data-unified=quran] .listenCard.mushafListening .mushafFrame{padding:5px}
  html[data-theme] body[data-unified=quran] .listenCard.mushafListening .mushafInner{padding:8px 4px}
}

/* Keep Arabic primary and translation distinct on light reading surfaces. */
html:is([data-theme=white],[data-theme=cream],[data-theme=playful]) body[data-unified]
:is(#segmentArabic,.ayahArabic,.duaContinuousArabic,.seoArabic){color:#000!important}
html:is([data-theme=white],[data-theme=cream],[data-theme=playful]) body[data-unified]
:is(#segmentTranslation,.ayahTranslation,.duaContinuousTranslation,.currentMushafTranslation,.currentMushafTranslationText,.pageTranslationItem,.seoTranslation,.seoTranslation p){color:#333!important}
html:is([data-theme=white],[data-theme=cream],[data-theme=playful]) body[data-unified=quran]
.listenCard.mushafListening{--mushaf-text:#000}

/* Keep the update indicator visible on light and dark app surfaces. */
.downloadToolbarBtn[data-update-available="true"]::after{
  background:var(--control-ink,#fff);
}

/* Give the Mushaf, guide, translation and player a shared reading width. */
body[data-unified=quran] .listenCard.mushafListening{
  padding-left:max(6px,env(safe-area-inset-left))!important;
  padding-right:max(6px,env(safe-area-inset-right))!important;
}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening #mushafView{
  display:flex;flex-direction:column;align-items:stretch;padding:4px 0 0;
  scrollbar-width:none;
}
body[data-unified=quran] .listenCard.mushafListening #mushafView::-webkit-scrollbar{display:none}
body[data-unified=quran] .listenCard.mushafListening .mushafFrame{
  display:flex;flex-direction:column;flex:1 0 auto;margin:0;padding:8px 4px;
}
html[data-theme] body[data-unified=quran] .listenCard.mushafListening .mushafInner{
  flex:1 0 auto;padding:10px 2px;
}
body[data-unified=quran] .listenCard.mushafListening :is(.mushafGuide,.mushafTranslationPanel){
  flex:0 0 auto;
}
body[data-unified=quran] .listenCard.mushafListening :is(.playerPanel,.currentMushafTranslation){
  width:100%!important;
}
body[data-unified=quran] .listenCard.mushafListening .customControls{
  width:100%;max-width:540px;margin-inline:auto;
}
/* Fullscreen moves the toast into the card; it must not reserve reader height. */
body[data-unified=quran] .listenCard.mushafListening>.shareToast{
  position:absolute;left:max(6px,env(safe-area-inset-left));
  right:max(6px,env(safe-area-inset-right));width:auto;max-width:none;min-width:0;
  bottom:max(12px,env(safe-area-inset-bottom))!important;transform:translateY(16px);
}
body[data-unified=quran] .listenCard.mushafListening>.shareToast.show{transform:translateY(0)}
@media(max-width:820px){
  body[data-unified=quran] .listenCard.mushafListening .mushafFrame{padding:5px 2px}
  html[data-theme] body[data-unified=quran] .listenCard.mushafListening .mushafInner{padding:8px 2px}
}

html[data-theme=white] body[data-unified=quran] .listenCard.mushafListening{--mushaf-verse-background:#e6f3f7!important}

/* A compact welcome, with clear entrances to reading and prayer. */
body[data-unified=home] .unifiedHome{
  justify-content:flex-start;padding:clamp(106px,15svh,152px) 20px 40px;
}
body[data-unified=home] .unifiedHome h1{
  font-size:clamp(34px,4vw,42px);line-height:1.5;margin:0 0 4px;
}
body[data-unified=home] .unifiedHome>p:not(.homeOfflineHint){margin-bottom:28px}
body[data-unified=home] .homeChoices{width:min(740px,100%);gap:14px}
body[data-unified=home] .homeChoice{
  display:grid;grid-template-columns:52px minmax(0,1fr) 18px;
  align-items:center;gap:5px 14px;text-align:right;padding:24px 20px;
  border-radius:22px;box-shadow:0 6px 20px rgba(0,0,0,.04);
}
body[data-unified=home] .homeChoiceBadge{
  grid-row:1/span 2;display:grid;place-items:center;width:52px;height:56px;
  border-radius:16px;background:var(--control-soft);color:var(--control-ink);
}
body[data-unified=home] .homeChoiceBadge svg{width:34px;height:34px}
body[data-unified=home] .homeChoice strong{font-size:19px;line-height:1.7}
body[data-unified=home] .homeChoiceDescription{grid-column:2;font-size:12px;line-height:1.8;opacity:.78}
body[data-unified=home] .homeChoiceArrow{
  grid-column:3;grid-row:1/span 2;font-family:Arial,sans-serif;
  font-size:28px!important;line-height:1;opacity:.7;direction:ltr;
}
body[data-unified=home] .homeResume{width:min(740px,100%);margin-top:16px}
body[data-unified=home] .unifiedHome>.homeOfflineHint{margin-top:20px;max-width:330px}
@media(max-width:600px){
  body[data-unified=home] .homeChoice{padding:20px 16px}
}

/* An inset frame keeps the Basmala's original line height. */
body[data-unified=quran] .mushafBasmala>span{
  display:inline-block;padding-inline:12px;border-radius:10px;
  background:color-mix(in srgb,var(--mushaf-verse-background) 70%,transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mushaf-text) 30%,transparent);
}

body[data-unified=quran] .mushafBasmala>span{background:transparent}
html[data-theme] body[data-unified=quran] .listenCard:not(.dynamicPlaying) .mushafVerseSegment.active{background:transparent!important;box-shadow:none!important}

body[data-unified=quran] .mushafBasmala>span{position:relative;font-size:.8em;padding-inline:clamp(26px,5vw,40px);border-radius:0;box-shadow:none}
body[data-unified=quran] .mushafBasmala>span::before,body[data-unified=quran] .mushafBasmala>span::after{content:"";position:absolute;top:50%;width:clamp(16px,3vw,28px);height:1px;background:currentColor;opacity:.35;pointer-events:none}
body[data-unified=quran] .mushafBasmala>span::before{right:0}
body[data-unified=quran] .mushafBasmala>span::after{left:0}

html[data-theme=white] body[data-unified=dua] .duaContinuousItem.active{background:#e6f3f7!important;box-shadow:inset -3px 0 0 #5b90aa,inset 0 0 0 1px #bfd6e1}