/* Divi/WordPress Override for Quran Reader */
#quran-reader-app,#quran-reader-app *,#quran-reader-app *::before,#quran-reader-app *::after{box-sizing:border-box!important}
#quran-reader-app{font-family:'Nunito Sans',sans-serif!important;line-height:1.5!important;-webkit-font-smoothing:antialiased;position:relative}
body{overflow-x:hidden!important}
/* sec-nav: fixed off-screen above the viewport by default. A scroll listener
   in quran-reader-app.js adds the .visible class once the user has scrolled
   past ~30px, which slides it down into view. position:fixed so it sits above
   WordPress/Divi's own site header without competing for sticky containing
   block. Full layout (flex/padding/border) is consolidated here so there is
   no duplicate .sec-nav rule later in the file. */
#quran-reader-app .sec-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 6px 20px !important;
    min-height: 42px !important;
    background: var(--bg-surface) !important;
    border-bottom: 1px solid var(--border) !important;
    backdrop-filter: blur(12px) !important;
    transform: translateY(-100%);
    transition: transform .3s ease;
    will-change: transform;
}
#quran-reader-app .sec-nav.visible { transform: translateY(0); }
#quran-reader-app button{background:none!important;border:none!important;padding:0!important;margin:0!important;font-family:inherit!important;font-size:inherit!important;line-height:inherit!important;color:inherit!important;cursor:pointer!important;text-transform:none!important;letter-spacing:normal!important;-webkit-appearance:none!important;border-radius:0!important;box-shadow:none!important;text-shadow:none!important;transition:none!important}
#quran-reader-app button:hover,#quran-reader-app button:focus{background:none!important;outline:none!important}
#quran-reader-app button:after,#quran-reader-app button:before{content:none!important;display:none!important}
#quran-reader-app a,#quran-reader-app a:visited,#quran-reader-app a:hover,#quran-reader-app a:focus,#quran-reader-app a:active{color:inherit!important;text-decoration:none!important;border:none!important;box-shadow:none!important;text-shadow:none!important;outline:none!important;background:none!important;transition:none!important}
#quran-reader-app h1,#quran-reader-app h2,#quran-reader-app h3,#quran-reader-app h4{padding:0!important;padding-bottom:0!important;margin:0!important;line-height:1.4!important;letter-spacing:normal!important;text-transform:none!important;color:inherit!important;border:none!important}
#quran-reader-app p{padding:0!important;margin:0!important;line-height:inherit!important;color:inherit!important;font-size:inherit!important}
#quran-reader-app input[type="text"],#quran-reader-app input[type="search"]{-webkit-appearance:none!important;appearance:none!important;border-radius:10px!important;box-shadow:none!important;height:auto!important;min-height:0!important}
#quran-reader-app input[type="range"]{-webkit-appearance:auto!important;appearance:auto!important;padding:0!important;height:auto!important;border:none!important;box-shadow:none!important;background:transparent!important}
#quran-reader-app input[type="checkbox"],#quran-reader-app input[type="radio"]{-webkit-appearance:auto!important;appearance:auto!important;width:16px!important;height:16px!important;margin:0!important;padding:0!important;box-shadow:none!important}
#quran-reader-app select{-webkit-appearance:none!important;appearance:none!important;border-radius:8px!important;box-shadow:none!important}
#quran-reader-app svg{display:inline-block!important;vertical-align:middle!important}
#quran-reader-app img{max-width:100%!important}
#quran-reader-app details{margin:0!important;padding:0!important}
#quran-reader-app summary{list-style:none!important;cursor:pointer!important}
#quran-reader-app summary::-webkit-details-marker{display:none!important}
#quran-reader-app .overlay{display:none!important}
#quran-reader-app .overlay.open{display:flex!important}

/* Beat .page article and .single article from Divi */
.page #quran-reader-app article.verse-card,
.single #quran-reader-app article.verse-card,
#quran-reader-app article.verse-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    padding: 24px 28px !important;
    margin-bottom: 16px !important;
    transition: border-color .35s ease, box-shadow .35s ease !important;
    box-shadow: var(--shadow) !important;
    position: relative !important;
    cursor: pointer !important;
    animation: fadeIn .5s ease both !important;
    border-top: 1px solid var(--border) !important;
    color: inherit !important;
}

.page #quran-reader-app article.verse-card.active,
.single #quran-reader-app article.verse-card.active,
#quran-reader-app article.verse-card.active {
    background: var(--bg-card-active) !important;
    border-color: rgba(139,105,20,.25) !important;
    box-shadow: 0 0 0 1px rgba(139,105,20,.19), var(--shadow) !important;
    border-top-color: rgba(139,105,20,.25) !important;
}

#quran-reader-app.dark article.verse-card.active {
    border-color: rgba(201,168,76,.25) !important;
    box-shadow: 0 0 0 1px rgba(201,168,76,.19), var(--shadow) !important;
    border-top-color: rgba(201,168,76,.25) !important;
}

/* Beat Divi .button selector on all buttons */
#quran-reader-app .play-btn {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end)) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    box-shadow: 0 4px 20px var(--accent-glow) !important;
    transition: transform .15s !important;
    padding: 0 !important;
}

#quran-reader-app .play-btn:hover {
    transform: scale(1.06) !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end)) !important;
    color: #fff !important;
}

#quran-reader-app .player-nav {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-sec) !important;
    transition: all .15s !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#quran-reader-app .player-nav:hover {
    background: var(--bg-hover) !important;
    color: var(--text-sec) !important;
}

#quran-reader-app .player-nav:disabled {
    opacity: .4 !important;
    cursor: default !important;
    color: var(--text-muted) !important;
}

#quran-reader-app .qari-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(201,168,76,.31) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #fff !important;
    transition: transform .2s !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#quran-reader-app .qari-btn:hover {
    background: none !important;
    color: #fff !important;
}

#quran-reader-app .verse-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--icon-btn) !important;
    cursor: pointer !important;
    transition: all .2s !important;
    text-decoration: none !important;
    position: relative !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#quran-reader-app .verse-action-btn:hover {
    background: var(--accent-soft) !important;
    color: var(--icon-btn-hover) !important;
    border-color: var(--border) !important;
}

/* Nav icon buttons */
#quran-reader-app .nav-icon-btn,
#quran-reader-app .dark-mini-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    transition: all .15s !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#quran-reader-app .nav-icon-btn:hover,
#quran-reader-app .dark-mini-toggle:hover {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
}

/* Surah dropdown button */
#quran-reader-app .surah-dropdown-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: none !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 5px 12px 5px 10px !important;
    cursor: pointer !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    transition: all .15s !important;
    box-shadow: none !important;
}

#quran-reader-app .surah-dropdown-btn:hover {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

/* Info button */
#quran-reader-app .info-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--accent-soft) !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 9px 18px !important;
    cursor: pointer !important;
    color: var(--accent) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all .2s !important;
    font-family: inherit !important;
    box-shadow: none !important;
}

#quran-reader-app .info-btn:hover {
    background: var(--accent-glow) !important;
    color: var(--accent) !important;
}

/* Info-section spacing — Divi's #quran-reader-app h1 reset strips the source
   margins, so re-apply them here with matching specificity. */
#quran-reader-app .info-section {
    margin-top: 32px !important;
    margin-bottom: 16px !important;
}
#quran-reader-app .info-section h1 {
    margin-bottom: 24px !important;
}
#quran-reader-app .info-section .video-btn {
    margin-left: 12px !important;
}
/* Video-btn hover — restore the source red-tinted hover that Divi's
   #quran-reader-app button:hover { background:none !important } reset kills. */
#quran-reader-app .video-btn:hover {
    background: rgba(255,0,0,.14) !important;
    border-color: rgba(255,0,0,.35) !important;
    color: #c00 !important;
}
#quran-reader-app.dark .video-btn:hover {
    background: rgba(255,80,80,.18) !important;
    border-color: rgba(255,80,80,.4) !important;
    color: #f66 !important;
}
/* Gift shimmer — verse-level gift button light sweep. A RAF loop in
   quran-reader-app.js updates --js-shimmer-left / --js-shimmer-opacity on
   each button ~once every 20s (CSS @keyframes can't animate these here
   because Divi forces !important on button::after). */
#quran-reader-app button[data-gift] {
    position: relative !important;
    overflow: hidden !important;
}
#quran-reader-app button[data-gift]::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: -50% !important;
    width: 50% !important;
    height: 200% !important;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,.5), transparent) !important;
    transform: skewX(-20deg) !important;
    pointer-events: none !important;
    animation: none !important;
    left: var(--js-shimmer-left, -75%) !important;
    opacity: var(--js-shimmer-opacity, 0) !important;
}

/* Ayah nav button */
#quran-reader-app .ayah-nav-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-surface) !important;
    color: var(--text) !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    transition: all .15s !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

#quran-reader-app .ayah-nav-btn:hover {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Player aux buttons */
#quran-reader-app .player-aux-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    transition: all .15s !important;
    position: relative !important;
    font-size: 13px !important;
    font-family: inherit !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#quran-reader-app .player-aux-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--text) !important;
}

/* Translit line fix */
#quran-reader-app .translit-line {
    text-align: center !important;
    font-family: 'Nunito Sans', sans-serif !important;
    font-size: 16px;
    color: var(--translit) !important;
    font-weight: 300 !important;
    font-style: italic !important;
    letter-spacing: .4px !important;
    padding: 6px 0 10px !important;
    line-height: 1.7 !important;
}

/* Translation text fix */
#quran-reader-app .translation-text {
    font-size: 15px;
    color: var(--translation) !important;
    line-height: 1.7 !important;
    margin-top: 2px !important;
}

/* Verse top bar */
#quran-reader-app .verse-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}

/* Verse actions */
#quran-reader-app .verse-actions {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
}

/* Verse number */
#quran-reader-app .verse-num {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(201,168,76,.37) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--verse-num) !important;
    flex-shrink: 0 !important;
    letter-spacing: -.3px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Arabic line */
#quran-reader-app .arabic-line {
    direction: rtl !important;
    text-align: center !important;
    font-family: 'Amiri Quran', 'Amiri', serif;
    font-size: 32px;
    line-height: 2 !important;
    padding: 8px 0 12px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 4px 14px !important;
}

/* Arabic word */
#quran-reader-app .arabic-word {
    padding: 2px 8px !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all .2s !important;
    display: inline-block !important;
}

#quran-reader-app .arabic-word.highlighted {
    background: var(--hl-bg) !important;
    color: var(--hl-text) !important;
}

/* Translations block */
#quran-reader-app .translations-block {
    border-top: 1px solid var(--border) !important;
    margin-top: 10px !important;
    padding-top: 12px !important;
}

/* Translation label */
#quran-reader-app .translation-label {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
}

/* Progress bar */
#quran-reader-app .progress-bar {
    height: 5px !important;
    background: var(--border) !important;
    cursor: pointer !important;
    position: relative !important;
}

#quran-reader-app .progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--accent), var(--accent-gradient-end)) !important;
    border-radius: 0 2px 2px 0 !important;
    transition: width 50ms linear !important;
    position: relative !important;
}

/* Speed/volume popup buttons */
#quran-reader-app .speed-option {
    display: block !important;
    width: 100% !important;
    padding: 6px 14px !important;
    border: none !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: background .15s !important;
    font-family: inherit !important;
    box-shadow: none !important;
}

#quran-reader-app .speed-option.active {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    font-weight: 700 !important;
}

/* Qari options */
#quran-reader-app .qari-option {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    color: var(--text) !important;
    text-align: left !important;
    transition: background .15s !important;
    font-family: inherit !important;
    box-shadow: none !important;
}

#quran-reader-app .qari-option:hover {
    background: var(--bg-hover) !important;
    color: var(--text) !important;
}

#quran-reader-app .qari-option.selected {
    background: var(--accent-soft) !important;
}

/* Surah items in dropdown */
#quran-reader-app .surah-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 8px 12px !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    cursor: pointer !important;
    color: var(--text) !important;
    text-align: left !important;
    transition: background .12s !important;
    font-family: inherit !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

#quran-reader-app .surah-item:hover {
    background: var(--bg-hover) !important;
    color: var(--text) !important;
}

#quran-reader-app .surah-item.current {
    background: var(--accent-soft) !important;
}

/* Settings panel checkbox rows */
#quran-reader-app .checkbox-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    margin-bottom: 4px !important;
    transition: background .2s !important;
}

#quran-reader-app .checkbox-row.checked {
    background: var(--accent-soft) !important;
}

/* Radio rows */
#quran-reader-app .radio-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    margin-bottom: 4px !important;
}

#quran-reader-app .radio-row.checked {
    background: var(--accent-soft) !important;
}

/* Reset/close buttons in settings */
#quran-reader-app .reset-btn {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    padding: 5px 14px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    cursor: pointer !important;
    transition: all .15s !important;
    box-shadow: none !important;
}

#quran-reader-app .reset-btn:hover {
    background: var(--accent-glow) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}

/* Settings close */
#quran-reader-app .settings-close {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: var(--text-muted) !important;
    font-size: 22px !important;
    padding: 4px !important;
    box-shadow: none !important;
}

/* Modal close buttons */
#quran-reader-app .share-modal-close,
#quran-reader-app .gift-modal-close,
#quran-reader-app .bookmark-modal-close,
#quran-reader-app .info-close {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-muted) !important;
    padding: 0 !important;
    box-shadow: none !important;
}

#quran-reader-app .info-close {
    width: 36px !important;
    height: 36px !important;
    box-shadow: var(--shadow) !important;
}

/* Share buttons */
#quran-reader-app .share-btn {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 16px !important;
    border-radius: 10px !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    transition: all .15s !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

#quran-reader-app .share-btn.whatsapp {
    background: #25D366 !important;
    color: #fff !important;
}

#quran-reader-app .share-btn.twitter {
    background: #000 !important;
    color: #fff !important;
}

#quran-reader-app.dark .share-btn.twitter {
    background: #fff !important;
    color: #000 !important;
}

#quran-reader-app .share-btn.copy-btn {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border: 1px solid var(--border) !important;
}

#quran-reader-app .share-btn.copy-btn.copied {
    background: var(--accent) !important;
    color: #fff !important;
}

/* Gift CTA buttons */
#quran-reader-app .gift-cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    border: none !important;
    background: var(--accent) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all .15s !important;
    font-family: inherit !important;
    box-shadow: none !important;
}

#quran-reader-app .gift-cta:hover {
    background: var(--accent) !important;
    color: #fff !important;
}

/* Gift store buttons */
#quran-reader-app .gift-store-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 16px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
    color: var(--text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all .15s !important;
    font-family: inherit !important;
    box-shadow: none !important;
}

#quran-reader-app .gift-store-btn:hover {
    background: var(--bg-hover) !important;
    border-color: var(--accent) !important;
    color: var(--text) !important;
}

/* End of Surah cards */
#quran-reader-app .es-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    padding: 22px !important;
    text-align: center !important;
    transition: all .2s !important;
}

#quran-reader-app .es-card:hover {
    border-color: rgba(139,105,20,.3) !important;
    box-shadow: var(--shadow) !important;
}

/* Ayah grid buttons */
#quran-reader-app .ayah-grid-btn {
    padding: 6px 2px !important;
    border: 1px solid var(--border) !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all .12s !important;
    font-family: inherit !important;
    box-shadow: none !important;
}

#quran-reader-app .ayah-grid-btn:hover {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

#quran-reader-app .ayah-grid-btn.current {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* Volume mute button */
#quran-reader-app .vol-mute-btn {
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    color: var(--text-muted) !important;
    padding: 2px !important;
    display: flex !important;
    box-shadow: none !important;
}

/* Sec nav inner flex containers — the main .sec-nav rule lives at the top
   of the file (consolidated with the fixed/slide-in behavior). */
#quran-reader-app .sec-nav-left {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

#quran-reader-app .sec-nav-right {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Site header */
#quran-reader-app .site-header {
    padding: 28px 32px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--bg-surface) !important;
}

/* Player controls */
#quran-reader-app .player-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 auto !important;
}

/* Fix the Bismillah divider line */
#quran-reader-app .bismillah-divider .line-l {
    width: 60px !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, var(--accent)) !important;
}

#quran-reader-app .bismillah-divider .line-r {
    width: 60px !important;
    height: 1px !important;
    background: linear-gradient(90deg, var(--accent), transparent) !important;
}


/* Settings panel */
#quran-reader-app .settings-panel {
    position: relative !important;
    width: 380px !important;
    max-width: 90vw !important;
    background: var(--settings-bg) !important;
    border-left: 1px solid var(--border) !important;
    overflow-y: auto !important;
    animation: slideIn .3s ease !important;
    box-shadow: -8px 0 40px rgba(0,0,0,.2) !important;
}

/* Fix the surah search input */
#quran-reader-app .surah-search,
#quran-reader-app .ayah-search,
#quran-reader-app .tr-search {
    width: 100% !important;
    padding: 9px 12px 9px 34px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--bg) !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-family: inherit !important;
    outline: none !important;
    transition: border-color .2s !important;
    box-shadow: none !important;
    height: auto !important;
}

#quran-reader-app .ayah-search {
    padding: 9px 12px !important;
    font-size: 14px !important;
    text-align: center !important;
    font-weight: 600 !important;
}

#quran-reader-app .tr-search {
    padding: 8px 12px !important;
}

/* End surah CTA */
#quran-reader-app .end-surah-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
}

/* Player */
#quran-reader-app .player {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 80 !important;
    background: var(--player-bg) !important;
    border-top: 1px solid var(--player-border) !important;
    backdrop-filter: blur(16px) !important;
}

/* Z-index fixes for WordPress */
#quran-reader-app .overlay {
    z-index: 10000001 !important;
}

#quran-reader-app #settings-overlay {
    z-index: 10000001 !important;
}

#quran-reader-app #info-overlay {
    z-index: 10000002 !important;
}

#quran-reader-app #share-overlay {
    z-index: 10000003 !important;
}

#quran-reader-app #gift-overlay {
    z-index: 10000004 !important;
}

#quran-reader-app #bookmark-overlay {
    z-index: 10000004 !important;
}

/* Video overlay — lives outside #quran-reader-app on body */
#video-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 10000003 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}
#video-overlay.open {
    display: flex !important;
}
#video-overlay .overlay-backdrop {
    position: absolute !important;
    inset: 0 !important;
    backdrop-filter: blur(6px) !important;
    background: rgba(0, 0, 0, .5) !important;
}
#video-overlay.minimized {
    inset: auto !important;
    bottom: 80px !important;
    right: 20px !important;
    left: auto !important;
    top: auto !important;
    padding: 0 !important;
    width: 320px !important;
    z-index: 10000006 !important;
}

#quran-reader-app #tooltip {
    z-index: 10000005 !important;
}

/* Player z-index fix */
.player {
    z-index: 10000000 !important;
}


/* === PLAYER (outside #quran-reader-app, inside .et_pb_code_inner) === */

.player {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 80 !important;
    background: var(--player-bg) !important;
    border-top: 1px solid var(--player-border) !important;
    backdrop-filter: blur(16px) !important;
}

.player .progress-bar {
    height: 5px !important;
    background: var(--border) !important;
    cursor: pointer !important;
    position: relative !important;
}

.player .progress-fill {
    height: 100% !important;
    background: linear-gradient(90deg, var(--accent), var(--accent-gradient-end)) !important;
    border-radius: 0 2px 2px 0 !important;
    transition: width 50ms linear !important;
    position: relative !important;
}

.player .progress-knob {
    position: absolute !important;
    right: -6px !important;
    top: -4px !important;
    width: 13px !important;
    height: 13px !important;
    border-radius: 50% !important;
    background: var(--accent) !important;
    border: 2px solid var(--player-bg) !important;
    box-shadow: 0 0 6px var(--accent-glow) !important;
}

.player .player-inner {
    display: flex !important;
    align-items: center !important;
    padding: 12px 20px 14px !important;
    gap: 14px !important;
    max-width: 1060px !important;
    margin: 0 auto !important;
}

.player .play-btn {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end)) !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    box-shadow: 0 4px 20px var(--accent-glow) !important;
    transition: transform .15s !important;
    padding: 0 !important;
}

.player .play-btn:hover {
    transform: scale(1.06) !important;
    background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end)) !important;
    color: #fff !important;
}

.player .player-nav {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-sec) !important;
    transition: all .15s !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.player .player-nav:hover {
    background: var(--bg-hover) !important;
    color: var(--text-sec) !important;
}

.player .player-nav:disabled {
    opacity: .4 !important;
    cursor: default !important;
    color: var(--text-muted) !important;
    background: transparent !important;
}

.player .qari-btn {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(201,168,76,.31) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #fff !important;
    transition: transform .2s !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.player .qari-btn:hover {
    transform: scale(1.08) !important;
    color: #fff !important;
}

.player .qari-btn.playing {
    animation: pulseGlow 2s infinite !important;
}

.player .player-aux-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 8px !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-muted) !important;
    cursor: pointer !important;
    transition: all .15s !important;
    position: relative !important;
    font-size: 13px !important;
    font-family: inherit !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.player .player-aux-btn:hover {
    background: var(--bg-hover) !important;
    color: var(--text) !important;
}

.player .player-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 auto !important;
}

.player .player-verse-info .pv-num {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--text) !important;
}

.player .player-verse-info .pv-num span {
    font-weight: 400 !important;
    color: var(--text-muted) !important;
    font-size: 12px !important;
}

.player .player-verse-info .pv-qari {
    font-size: 10px !important;
    color: var(--text-muted) !important;
    margin-top: 2px !important;
}

.player .player-time {
    font-size: 12px !important;
    font-variant-numeric: tabular-nums !important;
    color: var(--text-muted) !important;
    min-width: 70px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.player .speed-popup,
.player .vol-popup {
    position: absolute !important;
    bottom: 46px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.25) !important;
    animation: tooltipIn .2s ease !important;
    display: none !important;
}

.player .speed-popup.open,
.player .vol-popup.open {
    display: block !important;
}

.player .vol-popup.open {
    display: flex !important;
}

.player .speed-option {
    display: block !important;
    width: 100% !important;
    padding: 6px 14px !important;
    border: none !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: background .15s !important;
    font-family: inherit !important;
    box-shadow: none !important;
}

.player .speed-option.active {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    font-weight: 700 !important;
}

.player .speed-option:hover {
    background: var(--bg-hover) !important;
}

.player .qari-popup {
    position: absolute !important;
    bottom: 54px !important;
    left: 0 !important;
    width: 260px !important;
    background: var(--bg-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 48px rgba(0,0,0,.3) !important;
    padding: 12px 8px !important;
    animation: tooltipIn .25s ease !important;
    display: none !important;
}

.player .qari-popup.open {
    display: block !important;
}

.player .qari-option {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 10px 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    color: var(--text) !important;
    text-align: left !important;
    transition: background .15s !important;
    font-family: inherit !important;
    box-shadow: none !important;
}

.player .qari-option:hover {
    background: var(--bg-hover) !important;
    color: var(--text) !important;
}

.player .qari-option.selected {
    background: var(--accent-soft) !important;
}

.player .vol-mute-btn {
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
    color: var(--text-muted) !important;
    padding: 2px !important;
    display: flex !important;
    box-shadow: none !important;
}

.player .vol-popup input[type="range"] {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding: 0 !important;
    height: auto !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.player svg {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Player responsive */
@media(max-width:600px){
#quran-reader-app .player-inner{padding:8px 10px 10px!important;gap:0!important;justify-content:space-evenly!important}
#quran-reader-app .player-verse-info{display:none!important}
#quran-reader-app .player-time{min-width:auto!important;font-size:11px!important}
#quran-reader-app .player-controls{gap:4px!important;margin:0!important}
#quran-reader-app .play-btn{width:42px!important;height:42px!important}
#quran-reader-app .player-nav{width:32px!important;height:32px!important}
#quran-reader-app .qari-btn{width:34px!important;height:34px!important;font-size:11px!important}
#quran-reader-app .player-aux-btn{width:30px!important;height:30px!important;font-size:11px!important;min-width:30px!important}
#settings-overlay .shortcuts-section{display:none!important}
#info-overlay .info-shortcuts-wrap{display:none!important}
}

/* Player light mode CSS variables */
.player {
    --bg: #FAFAF7;
    --bg-surface: #FFF;
    --bg-card: #FFF;
    --bg-hover: #F5F0E8;
    --text: #2C1810;
    --text-sec: #5C4A3A;
    --text-muted: #9A8A7A;
    --accent: #8B6914;
    --accent-soft: rgba(139,105,20,.08);
    --accent-glow: rgba(139,105,20,.15);
    --border: #E8E0D4;
    --player-bg: #FFFDF8;
    --player-border: #E8E0D4;
    --shadow: 0 4px 24px rgba(44,24,16,.08);
    --icon-btn: #9A8A7A;
    --icon-btn-hover: #8B6914;
    --accent-gradient-end: #A0780C;
}

/* Player dark mode CSS variables */
.player.dark-player {
    --bg: #0F1419 !important;
    --bg-surface: #1A2332 !important;
    --bg-card: #1E2A3A !important;
    --bg-hover: #2A3F55 !important;
    --text: #E8DCC8 !important;
    --text-sec: #9BAFCA !important;
    --text-muted: #5E7A99 !important;
    --accent: #C9A84C !important;
    --accent-soft: rgba(201,168,76,.12) !important;
    --accent-glow: rgba(201,168,76,.25) !important;
    --border: #2A3F55 !important;
    --player-bg: #141D28 !important;
    --player-border: #1E2A3A !important;
    --shadow: 0 4px 24px rgba(0,0,0,.4) !important;
    --icon-btn: #5E7A99 !important;
    --icon-btn-hover: #C9A84C !important;
    --accent-gradient-end: #E8C55A !important;
}


/* === BODY-LEVEL OVERLAY CSS VARIABLES === */

#settings-overlay,
#info-overlay,
#share-overlay,
#gift-overlay,
#bookmark-overlay,
#hifz-overlay,
#tooltip {
    --bg: #FAFAF7;
    --bg-surface: #FFF;
    --bg-card: #FFF;
    --bg-card-active: #FFFBF2;
    --bg-hover: #F5F0E8;
    --text: #2C1810;
    --text-sec: #5C4A3A;
    --text-muted: #9A8A7A;
    --accent: #8B6914;
    --accent-soft: rgba(139,105,20,.08);
    --accent-glow: rgba(139,105,20,.15);
    --border: #E8E0D4;
    --settings-bg: #FFFDF8;
    --tooltip-bg: #2C1810;
    --tooltip-border: #3D2A1C;
    --scrollbar: #D4C9B8;
    --verse-num: #8B6914;
    --shadow: 0 4px 24px rgba(44,24,16,.08);
    --icon-btn: #9A8A7A;
    --icon-btn-hover: #8B6914;
    --vol-track: #E0D8CC;
    --vol-fill: #8B6914;
    --accent-gradient-end: #A0780C;
    font-family: 'Nunito Sans', 'Segoe UI', sans-serif !important;
    line-height: 1.5 !important;
}

#settings-overlay.dark-overlay,
#info-overlay.dark-overlay,
#video-overlay.dark-overlay,
#app-cta.dark-overlay,
#share-overlay.dark-overlay,
#gift-overlay.dark-overlay,
#bookmark-overlay.dark-overlay,
#hifz-overlay.dark-overlay,
#tooltip.dark-overlay {
    --bg: #0F1419;
    --bg-surface: #1A2332;
    --bg-card: #1E2A3A;
    --bg-card-active: #243447;
    --bg-hover: #2A3F55;
    --text: #E8DCC8;
    --text-sec: #9BAFCA;
    --text-muted: #5E7A99;
    --accent: #C9A84C;
    --accent-soft: rgba(201,168,76,.12);
    --accent-glow: rgba(201,168,76,.25);
    --border: #2A3F55;
    --settings-bg: #141D28;
    --tooltip-bg: #243447;
    --tooltip-border: #2A3F55;
    --scrollbar: #2A3F55;
    --verse-num: #C9A84C;
    --shadow: 0 4px 24px rgba(0,0,0,.4);
    --icon-btn: #5E7A99;
    --icon-btn-hover: #C9A84C;
    --vol-track: #2A3F55;
    --vol-fill: #C9A84C;
    --accent-gradient-end: #E8C55A;
}

/* Body-level overlay positioning */
#settings-overlay { position: fixed !important; inset: 0 !important; z-index: 10000001 !important; display: none !important; justify-content: flex-end !important; }
#settings-overlay.open { display: flex !important; }
#settings-overlay .overlay-backdrop { position: absolute !important; inset: 0 !important; background: rgba(0,0,0,.35) !important; backdrop-filter: blur(4px) !important; }
#settings-overlay .settings-panel { position: relative !important; width: 380px !important; max-width: 90vw !important; background: var(--settings-bg) !important; border-left: 1px solid var(--border) !important; overflow-y: auto !important; animation: slideIn .3s ease !important; box-shadow: -8px 0 40px rgba(0,0,0,.2) !important; height: 100% !important; }
#settings-overlay .settings-inner { padding: 28px 32px !important; }
#settings-overlay .settings-head { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 28px !important; }
#settings-overlay .settings-head h2 { font-size: 20px !important; font-weight: 700 !important; color: var(--text) !important; padding: 0 !important; margin: 0 !important; }
#settings-overlay .settings-close { background: none !important; border: none !important; cursor: pointer !important; color: var(--text-muted) !important; font-size: 22px !important; padding: 4px !important; box-shadow: none !important; }
#settings-overlay .setting-section { margin-bottom: 28px !important; }
#settings-overlay .setting-section h3 { font-size: 11px !important; font-weight: 700 !important; color: var(--accent) !important; text-transform: uppercase !important; letter-spacing: 2px !important; margin-bottom: 14px !important; padding-bottom: 8px !important; border-bottom: 1px solid var(--border) !important; border-top: none !important; padding-top: 0 !important; }
#settings-overlay .setting-section .desc { font-size: 12px !important; color: var(--text-muted) !important; margin-bottom: 12px !important; }
#settings-overlay .checkbox-row { display: flex !important; align-items: center !important; gap: 12px !important; padding: 10px 12px !important; border-radius: 10px !important; cursor: pointer !important; margin-bottom: 4px !important; transition: background .2s !important; }
#settings-overlay .checkbox-row.checked { background: var(--accent-soft) !important; }
#settings-overlay .radio-row { display: flex !important; align-items: center !important; gap: 10px !important; padding: 8px 12px !important; border-radius: 8px !important; cursor: pointer !important; margin-bottom: 4px !important; }
#settings-overlay .radio-row.checked { background: var(--accent-soft) !important; }
#settings-overlay .radio-row span { font-size: 14px !important; font-weight: 500 !important; color: var(--text) !important; text-transform: capitalize !important; }
#settings-overlay .reset-btn { background: var(--accent-soft) !important; color: var(--accent) !important; border: 1px solid var(--border) !important; border-radius: 8px !important; padding: 5px 14px !important; font-size: 12px !important; font-weight: 600 !important; cursor: pointer !important; box-shadow: none !important; }
#settings-overlay .size-slider { padding: 10px 12px !important; }
#settings-overlay .size-slider .size-head { display: flex !important; justify-content: space-between !important; margin-bottom: 8px !important; }
#settings-overlay .size-slider .size-head span:first-child { font-size: 14px !important; font-weight: 500 !important; color: var(--text) !important; }
#settings-overlay .size-slider .size-head span:last-child { font-size: 13px !important; font-weight: 600 !important; color: var(--accent) !important; }
#settings-overlay input[type="range"] { -webkit-appearance: auto !important; appearance: auto !important; width: 100% !important; accent-color: var(--accent) !important; height: 4px !important; cursor: pointer !important; border: none !important; box-shadow: none !important; background: transparent !important; padding: 0 !important; }
#settings-overlay input[type="text"],#settings-overlay input[type="search"] { border: 1px solid var(--border) !important; border-radius: 8px !important; background: var(--bg) !important; color: var(--text) !important; font-size: 13px !important; font-family: inherit !important; padding: 8px 12px !important; width: 100% !important; outline: none !important; box-shadow: none !important; height: auto !important; }
#settings-overlay .shortcuts-grid { display: grid !important; grid-template-columns: auto 1fr !important; gap: 6px 14px !important; align-items: center !important; }
#settings-overlay .shortcuts-grid kbd { display: inline-block !important; min-width: 28px !important; padding: 3px 8px !important; font-size: 11px !important; font-weight: 700 !important; font-family: inherit !important; color: var(--text) !important; background: var(--bg-hover) !important; border: 1px solid var(--border) !important; border-radius: 6px !important; text-align: center !important; line-height: 1.4 !important; }
#settings-overlay .shortcuts-grid .sk-desc { font-size: 13px !important; color: var(--text-sec) !important; }
#info-overlay .how-to-use-list { list-style: none !important; padding: 0 !important; margin: 0 !important; }
#info-overlay .how-to-use-list li { position: relative !important; padding: 0 0 12px 28px !important; font-size: 14px !important; color: var(--text-sec) !important; line-height: 1.7 !important; }
#info-overlay .how-to-use-list li:last-child { padding-bottom: 0 !important; }
#info-overlay .how-to-use-list li::before { content: '' !important; position: absolute !important; left: 0 !important; top: 7px !important; width: 16px !important; height: 16px !important; border-radius: 50% !important; background: var(--accent-soft) !important; border: 1.5px solid var(--accent) !important; }
#info-overlay .how-to-use-list li strong { color: var(--text) !important; font-weight: 600 !important; }
#info-overlay .info-shortcuts-wrap { margin-top: 20px !important; }
#info-overlay .info-shortcuts-wrap h3 { font-size: 13px !important; font-weight: 700 !important; color: var(--accent) !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; margin-bottom: 14px !important; }
#info-overlay .shortcuts-grid { display: grid !important; grid-template-columns: auto 1fr !important; gap: 6px 14px !important; align-items: center !important; }
#info-overlay .shortcuts-grid kbd { display: inline-block !important; min-width: 28px !important; padding: 3px 8px !important; font-size: 11px !important; font-weight: 700 !important; font-family: inherit !important; color: var(--text) !important; background: var(--bg-hover) !important; border: 1px solid var(--border) !important; border-radius: 6px !important; text-align: center !important; line-height: 1.4 !important; }
#info-overlay .shortcuts-grid .sk-desc { font-size: 13px !important; color: var(--text-sec) !important; }
#quran-reader-app .qari-label { font-size: 9px !important; color: var(--text-muted) !important; text-align: center !important; margin-top: 3px !important; pointer-events: none !important; letter-spacing: .3px !important; opacity: .8 !important; }
#settings-overlay input[type="checkbox"],#settings-overlay input[type="radio"] { -webkit-appearance: auto !important; appearance: auto !important; width: 16px !important; height: 16px !important; accent-color: var(--accent) !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; }
#settings-overlay .lang-group summary { font-size: 12px !important; font-weight: 700 !important; color: var(--accent) !important; text-transform: uppercase !important; letter-spacing: 1.5px !important; cursor: pointer !important; padding: 8px 0 !important; list-style: none !important; display: flex !important; align-items: center !important; gap: 6px !important; }
#settings-overlay .lang-group summary .lang-count { font-weight: 400 !important; color: var(--text-muted) !important; font-size: 11px !important; }
#settings-overlay .cb-label { font-size: 14px !important; font-weight: 600 !important; color: var(--text) !important; }
#settings-overlay .cb-lang { font-size: 11px !important; color: var(--text-muted) !important; }

/* Info overlay at body level */
#info-overlay { position: fixed !important; inset: 0 !important; z-index: 10000002 !important; display: none !important; align-items: center !important; justify-content: center !important; padding: 20px !important; }
#info-overlay.open { display: flex !important; }
#info-overlay .overlay-backdrop { position: absolute !important; inset: 0 !important; backdrop-filter: blur(6px) !important; background: rgba(0,0,0,.5) !important; }
#info-overlay .info-modal { position: relative !important; width: 100% !important; max-width: 640px !important; max-height: 85vh !important; overflow-y: auto !important; background: var(--settings-bg) !important; border: 1px solid var(--border) !important; border-radius: 20px !important; box-shadow: 0 24px 80px rgba(0,0,0,.35) !important; animation: modalIn .3s ease !important; }
#info-overlay .info-close { position: sticky !important; top: 0 !important; float: right !important; z-index: 2 !important; margin: 16px 16px 0 0 !important; width: 36px !important; height: 36px !important; border-radius: 50% !important; border: 1px solid var(--border) !important; background: var(--bg-card) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--text-muted) !important; font-size: 18px !important; box-shadow: var(--shadow) !important; padding: 0 !important; }
#info-overlay h2,#info-overlay h3 { color: var(--text) !important; padding: 0 !important; margin: 0 !important; }
#info-overlay p { color: var(--text-sec) !important; padding: 0 !important; margin: 0 !important; }
#info-overlay .info-body { padding: 0 28px 28px !important; }

/* Share overlay at body level */
#share-overlay { position: fixed !important; inset: 0 !important; z-index: 10000003 !important; display: none !important; align-items: center !important; justify-content: center !important; padding: 20px !important; }
#share-overlay.open { display: flex !important; }
#share-overlay .overlay-backdrop { position: absolute !important; inset: 0 !important; backdrop-filter: blur(6px) !important; background: rgba(0,0,0,.5) !important; }
#share-overlay .share-modal { position: relative !important; width: 100% !important; max-width: 460px !important; background: var(--settings-bg) !important; border: 1px solid var(--border) !important; border-radius: 18px !important; box-shadow: 0 24px 80px rgba(0,0,0,.35) !important; animation: modalIn .3s ease !important; overflow: hidden !important; }
#share-overlay .share-modal-close { width: 32px !important; height: 32px !important; border-radius: 50% !important; border: 1px solid var(--border) !important; background: var(--bg-card) !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; color: var(--text-muted) !important; font-size: 16px !important; padding: 0 !important; box-shadow: none !important; }
#share-overlay h3 { color: var(--text) !important; padding: 0 !important; margin: 0 !important; }
#share-overlay .share-btn { flex: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 11px 16px !important; border-radius: 10px !important; border: none !important; cursor: pointer !important; font-size: 13px !important; font-weight: 600 !important; transition: all .15s !important; text-decoration: none !important; box-shadow: none !important; }
#share-overlay .share-btn.whatsapp { background: #25D366 !important; color: #fff !important; }
#share-overlay .share-btn.twitter { background: #000 !important; color: #fff !important; }
#share-overlay .share-btn.copy-btn { background: var(--accent-soft) !important; color: var(--accent) !important; border: 1px solid var(--border) !important; }

/* Gift & Bookmark overlays */
#gift-overlay,#bookmark-overlay { position: fixed !important; inset: 0 !important; z-index: 10000004 !important; display: none !important; align-items: center !important; justify-content: center !important; padding: 20px !important; }
#gift-overlay.open,#bookmark-overlay.open { display: flex !important; }
#gift-overlay .overlay-backdrop,#bookmark-overlay .overlay-backdrop { position: absolute !important; inset: 0 !important; backdrop-filter: blur(6px) !important; background: rgba(0,0,0,.5) !important; }

/* Tooltip at body level */
#tooltip { z-index: 10000005 !important; }

/* Buttons in body-level overlays */
#settings-overlay button,#info-overlay button,#share-overlay button,#gift-overlay button,#bookmark-overlay button { margin: 0 !important; font-family: inherit !important; font-size: inherit !important; cursor: pointer !important; box-shadow: none !important; }

/* SVG in body-level overlays */
#settings-overlay svg,#info-overlay svg,#share-overlay svg { display: inline-block !important; vertical-align: middle !important; }

/* === HIFZ MODE === */

/* Hifz overlay (centered modal like About) */
#hifz-overlay { align-items: center !important; justify-content: center !important; padding: 20px !important; z-index: 10000002 !important; }
#hifz-overlay .overlay-backdrop { backdrop-filter: blur(6px) !important; background: rgba(0,0,0,.5) !important; }
.hifz-modal { position: relative !important; width: 100% !important; max-width: 420px !important; max-height: 85vh !important; overflow-y: auto !important; background: var(--settings-bg) !important; border: 1px solid var(--border) !important; border-radius: 20px !important; box-shadow: 0 24px 80px rgba(0,0,0,.35) !important; animation: modalIn .3s ease !important; }
.hifz-popup-body { padding: 28px 32px 32px !important; }
.hifz-head { margin-bottom: 20px !important; text-align: center !important; }
.hifz-title { font-size: 18px !important; font-weight: 700 !important; color: var(--text) !important; }
.hifz-subtitle { font-size: 13px !important; color: var(--text-muted) !important; margin-top: 4px !important; }
.hifz-field { margin-bottom: 18px !important; }
.hifz-field label { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; font-weight: 700 !important; color: var(--text-sec) !important; text-transform: uppercase !important; letter-spacing: 1px !important; margin-bottom: 8px !important; }
.hifz-tip { font-size: 14px !important; color: var(--text-muted) !important; cursor: help !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; position: relative !important; }
.hifz-tip::after { content: attr(data-tip) !important; position: absolute !important; bottom: calc(100% + 8px) !important; left: 50% !important; transform: translateX(-50%) !important; background: var(--tooltip-bg, #2C1810) !important; color: #E8DCC8 !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.5 !important; padding: 8px 12px !important; border-radius: 10px !important; white-space: normal !important; width: 220px !important; text-align: center !important; box-shadow: 0 8px 24px rgba(0,0,0,.3) !important; pointer-events: none !important; opacity: 0 !important; transition: opacity .2s !important; z-index: 10 !important; }
.hifz-tip:hover::after { opacity: 1 !important; }
.hifz-range-row { display: flex !important; align-items: center !important; gap: 10px !important; }
.hifz-range-to { font-size: 13px !important; color: var(--text-muted) !important; }
.hifz-select { width: 80px !important; padding: 8px 12px !important; border: 1px solid var(--border) !important; border-radius: 10px !important; background: var(--bg-surface) !important; color: var(--text) !important; font-size: 14px !important; font-weight: 600 !important; font-family: inherit !important; cursor: pointer !important; -webkit-appearance: auto !important; appearance: auto !important; }
.hifz-chips { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }
.hifz-chip { padding: 6px 14px !important; border: 1px solid var(--border) !important; border-radius: 8px !important; background: transparent !important; color: var(--text) !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; transition: all .15s !important; font-family: inherit !important; }
.hifz-chip:hover { background: var(--bg-hover) !important; }
.hifz-chip.active { background: var(--accent-soft) !important; border-color: var(--accent) !important; color: var(--accent) !important; }
.hifz-start-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; padding: 12px !important; background: linear-gradient(135deg, var(--accent), var(--accent-gradient-end)) !important; color: #fff !important; border: none !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 700 !important; cursor: pointer !important; box-shadow: 0 4px 20px var(--accent-glow) !important; font-family: inherit !important; margin-top: 4px !important; }
.hifz-start-btn:hover { transform: scale(1.02) !important; }

/* Hifz settings button in settings panel */
.hifz-settings-btn { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 10px 16px !important; background: var(--accent-soft) !important; border: 1px solid var(--accent) !important; border-radius: 10px !important; color: var(--accent) !important; font-size: 13px !important; font-weight: 600 !important; cursor: pointer !important; font-family: inherit !important; }
.hifz-settings-btn:hover { background: var(--accent) !important; color: #fff !important; }

/* Blinking loop icon when hifz active */
.hifz-blink { animation: hifz-icon-blink 2s ease-in-out infinite !important; }
@keyframes hifz-icon-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* "Your turn" banner — solid background for readability */
.hifz-your-turn { position: fixed !important; bottom: 72px !important; left: 50% !important; transform: translateX(-50%) translateY(10px) !important; background: var(--settings-bg) !important; border: 1px solid var(--accent) !important; border-radius: 12px !important; padding: 10px 24px !important; font-size: 14px !important; font-weight: 600 !important; color: var(--accent) !important; display: flex !important; align-items: center !important; gap: 8px !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .3s, transform .3s !important; z-index: 91 !important; white-space: nowrap !important; box-shadow: 0 4px 20px rgba(0,0,0,.15) !important; }
.hifz-your-turn.visible { opacity: 1 !important; transform: translateX(-50%) translateY(0) !important; pointer-events: auto !important; }
.hifz-your-turn svg { flex-shrink: 0 !important; }

@media(max-width:600px) {
  .hifz-modal { max-width: calc(100vw - 24px) !important; }
  .hifz-popup-body { padding: 20px 22px 24px !important; }
  .hifz-your-turn { font-size: 12px !important; padding: 8px 16px !important; bottom: 62px !important; }
}

/* ═══════════════════════════════════════════════════════════
   Ayah page + shared element overrides
   These use #quran-reader-app .class (1,1,0) to beat the
   blanket a/button reset rules at (1,0,1)
   ═══════════════════════════════════════════════════════════ */

/* --- Quick nav ayah dots (circular numbered links) --- */
#quran-reader-app .quick-nav-dot,
#quran-reader-app a.quick-nav-dot,
#quran-reader-app a.quick-nav-dot:visited,
#quran-reader-app a.quick-nav-dot:hover,
#quran-reader-app a.quick-nav-dot:focus {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    border: 1px solid var(--border) !important;
    background: transparent !important;
    transition: all .15s !important;
    padding: 0 !important;
    line-height: 1 !important;
}
#quran-reader-app a.quick-nav-dot:hover {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}
#quran-reader-app a.quick-nav-dot.active,
#quran-reader-app a.quick-nav-dot.active:visited {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}

/* --- Ayah page nav buttons (prev/next/full surah) --- */
#quran-reader-app .ayah-nav-link,
#quran-reader-app a.ayah-nav-link,
#quran-reader-app a.ayah-nav-link:visited,
#quran-reader-app a.ayah-nav-link:hover,
#quran-reader-app a.ayah-nav-link:focus {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--accent) !important;
    text-decoration: none !important;
    padding: 8px 14px !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    transition: all .15s !important;
    white-space: nowrap !important;
    background: transparent !important;
    display: inline-block !important;
}
#quran-reader-app a.ayah-nav-link:hover {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
}
#quran-reader-app .ayah-nav-surah,
#quran-reader-app a.ayah-nav-surah,
#quran-reader-app a.ayah-nav-surah:visited {
    background: var(--accent-soft) !important;
}

/* --- Video button --- */
#quran-reader-app .video-btn,
#quran-reader-app button.video-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: rgba(255, 0, 0, .08) !important;
    border: 1px solid rgba(255, 0, 0, .2) !important;
    border-radius: 10px !important;
    padding: 9px 18px !important;
    cursor: pointer !important;
    color: #c00 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all .2s !important;
}
#quran-reader-app button.video-btn:hover {
    background: rgba(255, 0, 0, .14) !important;
    border-color: rgba(255, 0, 0, .35) !important;
}

/* --- Lightbox app CTA --- */
.lightbox .lightbox-app-cta,
.lightbox a.lightbox-app-cta,
a.lightbox-app-cta,
a.lightbox-app-cta:visited {
    position: fixed !important;
    bottom: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 14px !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.2) !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    z-index: 1002 !important;
}
a.lightbox-app-cta:hover {
    background: rgba(255,255,255,.25) !important;
}
@media(max-width:768px) {
    .lightbox .lightbox-app-cta,
    a.lightbox-app-cta {
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        border-radius: 0 !important;
        justify-content: center !important;
        padding: 16px 24px !important;
        font-size: 15px !important;
        background: rgba(0,0,0,.8) !important;
        backdrop-filter: blur(12px) !important;
        border: none !important;
        border-top: 1px solid rgba(255,255,255,.15) !important;
    }
}

/* --- Lightbox buttons --- */
#quran-reader-app .lightbox-close,
.lightbox .lightbox-close,
button.lightbox-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: none !important;
    background: rgba(255,255,255,.2) !important;
    color: #fff !important;
    font-size: 24px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1001 !important;
}
.lightbox .lightbox-nav button,
.lightbox-nav button {
    padding: 10px 24px !important;
    border-radius: 8px !important;
    border: none !important;
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

/* --- Surah dropdown items (focused state for keyboard nav) --- */
#quran-reader-app .surah-item,
#quran-reader-app a.surah-item,
#quran-reader-app a.surah-item:visited {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    border: none !important;
    background: transparent !important;
    transition: background .15s !important;
    text-decoration: none !important;
    color: var(--text) !important;
}
#quran-reader-app a.surah-item:hover,
#quran-reader-app a.surah-item:focus {
    background: var(--bg-hover) !important;
}
#quran-reader-app .surah-item.current,
#quran-reader-app a.surah-item.current {
    background: var(--accent-soft) !important;
}
#quran-reader-app .surah-item.focused,
#quran-reader-app a.surah-item.focused {
    background: var(--bg-hover) !important;
    outline: 2px solid var(--accent) !important;
    outline-offset: -2px !important;
}

/* --- Ayah grid buttons (keyboard nav focus) --- */
#quran-reader-app .ayah-grid-btn,
#quran-reader-app button.ayah-grid-btn {
    width: 100% !important;
    padding: 8px 4px !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all .15s !important;
    text-align: center !important;
}
#quran-reader-app button.ayah-grid-btn:hover,
#quran-reader-app button.ayah-grid-btn:focus {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
    color: var(--accent) !important;
}
#quran-reader-app button.ayah-grid-btn.active {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}
#quran-reader-app button.ayah-grid-btn.focused {
    background: var(--bg-hover) !important;
    outline: 2px solid var(--accent) !important;
    outline-offset: -2px !important;
}

/* --- Verse action buttons --- */
#quran-reader-app .verse-action-btn,
#quran-reader-app button.verse-action-btn,
#quran-reader-app a.verse-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--icon-btn) !important;
    cursor: pointer !important;
    transition: all .2s !important;
}
#quran-reader-app button.verse-action-btn:hover,
#quran-reader-app a.verse-action-btn:hover {
    background: var(--accent-soft) !important;
    color: var(--icon-btn-hover) !important;
    border-color: var(--border) !important;
}

/* --- Gift store buttons --- */
#quran-reader-app .gift-store-btn,
#quran-reader-app a.gift-store-btn,
#quran-reader-app a.gift-store-btn:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 16px !important;
    border-radius: 10px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-card) !important;
    color: var(--text) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    transition: all .15s !important;
    text-decoration: none !important;
}
#quran-reader-app a.gift-store-btn:hover {
    background: var(--bg-hover) !important;
    border-color: var(--accent) !important;
}

/* --- Gift CTA button --- */
#quran-reader-app .gift-cta,
#quran-reader-app a.gift-cta,
#quran-reader-app a.gift-cta:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 20px !important;
    border-radius: 10px !important;
    border: none !important;
    background: var(--accent) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: all .15s !important;
}

/* --- Share buttons --- */
#quran-reader-app .share-btn,
#quran-reader-app button.share-btn,
#quran-reader-app a.share-btn,
#quran-reader-app a.share-btn:visited {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 11px 16px !important;
    border-radius: 10px !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all .15s !important;
    text-decoration: none !important;
}
#quran-reader-app .share-btn.whatsapp,
#quran-reader-app a.share-btn.whatsapp { background: #25D366 !important; color: #fff !important; }
#quran-reader-app .share-btn.twitter,
#quran-reader-app a.share-btn.twitter { background: #000 !important; color: #fff !important; }
#quran-reader-app .share-btn.copy-btn,
#quran-reader-app button.share-btn.copy-btn {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border: 1px solid var(--border) !important;
}

/* --- Settings reciter button --- */
#quran-reader-app .settings-reciter-btn,
#quran-reader-app button.settings-reciter-btn {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 10px 14px !important;
    background: var(--accent-soft) !important;
    border: 1px solid var(--accent) !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all .15s !important;
    text-align: left !important;
}

/* --- Tafsir tabs labels --- */
#quran-reader-app .tafsir-tabs label {
    padding: 10px 18px !important;
    border-bottom: 2px solid transparent !important;
    cursor: pointer !important;
    transition: all .15s !important;
    background: transparent !important;
    border-radius: 0 !important;
}

/* --- Breadcrumb link --- */
#quran-reader-app .breadcrumb a,
#quran-reader-app .breadcrumb a:visited,
#quran-reader-app .breadcrumb a:focus,
#quran-reader-app .breadcrumb a:active {
    color: #8B6914 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    font-weight: 600 !important;
}
#quran-reader-app .breadcrumb a:hover {
    color: #6B4F10 !important;
    text-decoration: underline !important;
}
#quran-reader-app.dark .breadcrumb a,
#quran-reader-app.dark .breadcrumb a:visited,
#quran-reader-app.dark .breadcrumb a:focus,
#quran-reader-app.dark .breadcrumb a:active {
    color: #C9A84C !important;
}
#quran-reader-app.dark .breadcrumb a:hover {
    color: #E8DCC8 !important;
}

/* --- Dark mode accent color fixes (Divi resets color:inherit which kills CSS vars) --- */
#quran-reader-app.dark .ayah-nav-link,
#quran-reader-app.dark a.ayah-nav-link,
#quran-reader-app.dark a.ayah-nav-link:visited {
    color: #C9A84C !important;
    border-color: #2A3F55 !important;
}
#quran-reader-app.dark a.ayah-nav-link:hover {
    background: rgba(201,168,76,.12) !important;
    border-color: #C9A84C !important;
}
#quran-reader-app.dark .ayah-nav-surah,
#quran-reader-app.dark a.ayah-nav-surah {
    background: rgba(201,168,76,.12) !important;
}
#quran-reader-app.dark .quick-nav-dot,
#quran-reader-app.dark a.quick-nav-dot,
#quran-reader-app.dark a.quick-nav-dot:visited {
    color: #5E7A99 !important;
    border-color: #2A3F55 !important;
    background: transparent !important;
}
#quran-reader-app.dark a.quick-nav-dot:hover {
    color: #C9A84C !important;
    border-color: #C9A84C !important;
    background: rgba(201,168,76,.12) !important;
}
#quran-reader-app.dark a.quick-nav-dot.active,
#quran-reader-app.dark a.quick-nav-dot.active:visited {
    background: #C9A84C !important;
    color: #fff !important;
    border-color: #C9A84C !important;
}
#quran-reader-app.dark .verse-action-btn,
#quran-reader-app.dark button.verse-action-btn {
    color: #5E7A99 !important;
}
#quran-reader-app.dark button.verse-action-btn:hover {
    color: #C9A84C !important;
    background: rgba(201,168,76,.12) !important;
    border-color: #2A3F55 !important;
}
#quran-reader-app.dark .surah-item,
#quran-reader-app.dark a.surah-item,
#quran-reader-app.dark a.surah-item:visited {
    color: #E8DCC8 !important;
}
#quran-reader-app.dark a.surah-item:hover,
#quran-reader-app.dark .surah-item.focused,
#quran-reader-app.dark a.surah-item.focused {
    background: #2A3F55 !important;
}
#quran-reader-app.dark .surah-item.current,
#quran-reader-app.dark a.surah-item.current {
    background: rgba(201,168,76,.12) !important;
}
#quran-reader-app.dark .ayah-grid-btn,
#quran-reader-app.dark button.ayah-grid-btn {
    color: #E8DCC8 !important;
    border-color: #2A3F55 !important;
}
#quran-reader-app.dark button.ayah-grid-btn:hover,
#quran-reader-app.dark button.ayah-grid-btn.focused {
    background: #2A3F55 !important;
    color: #C9A84C !important;
    border-color: #C9A84C !important;
}
#quran-reader-app.dark button.ayah-grid-btn.active {
    background: #C9A84C !important;
    color: #fff !important;
}
#quran-reader-app.dark .video-btn,
#quran-reader-app.dark button.video-btn {
    background: rgba(255,80,80,.1) !important;
    border-color: rgba(255,80,80,.25) !important;
    color: #f66 !important;
}
#quran-reader-app.dark .surah-dropdown-btn,
#quran-reader-app.dark button.surah-dropdown-btn {
    color: #E8DCC8 !important;
    border-color: #2A3F55 !important;
    background: #1A2332 !important;
}
#quran-reader-app.dark .ayah-nav-btn,
#quran-reader-app.dark button.ayah-nav-btn {
    color: #E8DCC8 !important;
    border-color: #2A3F55 !important;
    background: #1A2332 !important;
}

/* --- Repeat/loop button active state --- */
#quran-reader-app .player-aux-btn#repeat-btn,
.player .player-aux-btn#repeat-btn {
    transition: color .15s !important;
}
#quran-reader-app .player-aux-btn#repeat-btn.active,
.player .player-aux-btn#repeat-btn.active {
    color: #8B6914 !important;
}
#quran-reader-app.dark .player-aux-btn#repeat-btn.active,
.player.dark-player .player-aux-btn#repeat-btn.active {
    color: #C9A84C !important;
}

/* --- Surah dropdown button --- */
#quran-reader-app .surah-dropdown-btn,
#quran-reader-app button.surah-dropdown-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-surface) !important;
    color: var(--text) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all .15s !important;
}
#quran-reader-app button.surah-dropdown-btn:hover {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
}

/* --- Ayah nav button --- */
#quran-reader-app .ayah-nav-btn,
#quran-reader-app button.ayah-nav-btn {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    border: 1px solid var(--border) !important;
    background: var(--bg-surface) !important;
    color: var(--text) !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all .15s !important;
}
#quran-reader-app button.ayah-nav-btn:hover {
    background: var(--accent-soft) !important;
    color: var(--accent) !important;
    border-color: var(--accent) !important;
}


/* === App Styles === */

@font-face{font-family:'IndoPak';src:url('https://cdn.backend-myislam.org/assets/2026/03/indopak-nastaleeq-waqf-lazim-v4.2.1.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Uthmani';src:url('https://cdn.backend-myislam.org/assets/2026/04/qari/UthmanicHafs1Ver18.woff2') format('woff2');font-display:swap}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#FAFAF7;--bg-surface:#FFF;--bg-card:#FFF;--bg-card-active:#FFFBF2;--bg-hover:#F5F0E8;--text:#2C1810;--text-sec:#5C4A3A;--text-muted:#9A8A7A;--accent:#8B6914;--accent-soft:rgba(139,105,20,.08);--accent-glow:rgba(139,105,20,.15);--border:#E8E0D4;--player-bg:#FFFDF8;--player-border:#E8E0D4;--translit:#4A7C59;--translation:#5C4A3A;--hl-bg:rgba(139,105,20,.14);--hl-text:#6B4F10;--settings-bg:#FFFDF8;--tooltip-bg:#2C1810;--tooltip-border:#3D2A1C;--scrollbar:#D4C9B8;--verse-num:#8B6914;--shadow:0 4px 24px rgba(44,24,16,.08);--icon-btn:#9A8A7A;--icon-btn-hover:#8B6914;--vol-track:#E0D8CC;--vol-fill:#8B6914;--accent-gradient-end:#A0780C}
#quran-reader-app.dark{--bg:#0F1419;--bg-surface:#1A2332;--bg-card:#1E2A3A;--bg-card-active:#243447;--bg-hover:#2A3F55;--text:#E8DCC8;--text-sec:#9BAFCA;--text-muted:#5E7A99;--accent:#C9A84C;--accent-soft:rgba(201,168,76,.12);--accent-glow:rgba(201,168,76,.25);--border:#2A3F55;--player-bg:#141D28;--player-border:#1E2A3A;--translit:#7FAACC;--translation:#9BAFCA;--hl-bg:rgba(201,168,76,.22);--hl-text:#F5E6B8;--settings-bg:#141D28;--tooltip-bg:#243447;--tooltip-border:#2A3F55;--scrollbar:#2A3F55;--verse-num:#C9A84C;--shadow:0 4px 24px rgba(0,0,0,.4);--icon-btn:#5E7A99;--icon-btn-hover:#C9A84C;--vol-track:#2A3F55;--vol-fill:#C9A84C;--accent-gradient-end:#E8C55A}
#quran-reader-app{background:var(--bg);color:var(--text);font-family:'Nunito Sans','Segoe UI',sans-serif;transition:background .4s,color .4s;min-height:100vh}
::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:3px}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 var(--accent-glow)}50%{box-shadow:0 0 0 8px transparent}}
@keyframes tooltipIn{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes modalIn{from{opacity:0;transform:scale(.96) translateY(12px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.tr-loading{display:flex;align-items:center;gap:8px;padding:10px 0;color:var(--text-muted);font-size:13px}.tr-loading .spinner{width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .6s linear infinite}
.lang-group summary{font-size:12px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;padding:8px 0;list-style:none;display:flex;align-items:center;gap:6px;user-select:none}.lang-group summary::-webkit-details-marker{display:none}.lang-group summary::before{content:'▸';font-size:10px;transition:transform .2s}.lang-group[open] summary::before{transform:rotate(90deg)}.lang-group summary .lang-count{font-weight:400;color:var(--text-muted);font-size:11px}
.tr-search{width:100%;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-size:13px;font-family:inherit;outline:none;margin-bottom:12px;transition:border-color .2s}.tr-search:focus{border-color:var(--accent)}.tr-search::placeholder{color:var(--text-muted)}
.reset-btn{background:var(--accent-soft);color:var(--accent);border:1px solid var(--border);border-radius:8px;padding:5px 14px;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .15s}.reset-btn:hover{background:var(--accent-glow);border-color:var(--accent)}
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 5px;border:1px solid var(--border);border-radius:4px;background:var(--bg);font-size:10px;font-weight:600;color:var(--text-muted);font-family:inherit}
.sec-nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:6px 20px;background:var(--bg-surface);border-bottom:1px solid var(--border);min-height:42px;backdrop-filter:blur(12px);transition:background .4s}
.sec-nav-left{position:relative}.surah-dropdown-btn{display:flex;align-items:center;gap:6px;background:none;border:1px solid var(--border);border-radius:8px;padding:5px 12px 5px 10px;cursor:pointer;color:var(--text);font-size:13px;font-weight:600;font-family:inherit;transition:all .15s}.surah-dropdown-btn:hover{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.surah-dropdown-btn svg{flex-shrink:0;transition:transform .2s}.surah-dropdown-btn.open svg.chev{transform:rotate(180deg)}
.surah-dropdown{position:absolute;top:calc(100% + 6px);left:0;width:300px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.2);padding:8px;max-height:420px;overflow:hidden;display:none;flex-direction:column;animation:tooltipIn .2s ease}.surah-dropdown.open{display:flex}
.surah-search-wrap{position:relative;margin-bottom:6px;flex-shrink:0}.surah-search{width:100%;padding:9px 12px 9px 34px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:13px;font-family:inherit;outline:none;transition:border-color .2s}.surah-search:focus{border-color:var(--accent)}.surah-search::placeholder{color:var(--text-muted)}.surah-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-muted);pointer-events:none}
.surah-list{overflow-y:auto;max-height:340px;flex:1}.surah-list::-webkit-scrollbar{width:4px}.surah-list::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:2px}
.surah-item{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;border:none;border-radius:8px;background:transparent;cursor:pointer;color:var(--text);text-align:left;transition:background .12s;font-family:inherit;text-decoration:none}.surah-item:hover{background:var(--bg-hover)}.surah-item.current{background:var(--accent-soft)}.surah-item .si-num{width:28px;height:28px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:var(--text-muted);flex-shrink:0}.surah-item.current .si-num{border-color:var(--accent);color:var(--accent)}.surah-item.focused{background:var(--bg-hover);outline:2px solid var(--accent);outline-offset:-2px}.surah-item .si-info{flex:1;min-width:0}.surah-item .si-name{font-size:13px;font-weight:600}.surah-item .si-meta{font-size:10px;color:var(--text-muted);margin-top:1px}.surah-item .si-arabic{font-family:'Amiri',serif;font-size:15px;color:var(--accent);flex-shrink:0}.surah-no-results{padding:20px 12px;text-align:center;font-size:13px;color:var(--text-muted)}
.sec-nav-left{display:flex;align-items:center;gap:6px}.sec-nav-right{display:flex;align-items:center;gap:4px}.nav-icon-btn,.dark-mini-toggle{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s}.nav-icon-btn:hover,.dark-mini-toggle:hover{background:var(--accent-soft);color:var(--accent)}
.site-header{padding:28px 32px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:var(--bg-surface)}.site-header .surah-title{font-family:'Amiri',serif;font-size:28px;font-weight:700;color:var(--accent);letter-spacing:.5px}.site-header .surah-subtitle{font-size:14px;color:var(--text-muted);font-weight:600;letter-spacing:1.5px;text-transform:uppercase}.site-header .surah-meta{font-size:13px;color:var(--text-muted);margin-top:4px}
.content{max-width:820px;margin:0 auto;padding:32px 24px 140px}.info-section{margin-bottom:8px;text-align:center}.info-section h1{font-family:'Amiri',serif;font-size:22px;font-weight:700;color:var(--text);line-height:1.5;margin-bottom:16px}.info-btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent-soft);border:1px solid var(--border);border-radius:10px;padding:9px 18px;cursor:pointer;color:var(--accent);font-size:13px;font-weight:600;transition:all .2s;font-family:inherit}.info-btn:hover{background:var(--accent-glow)}
.seo-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.bismillah-divider{text-align:center;padding:20px 0 32px}.bismillah-divider .inner{display:inline-flex;align-items:center;gap:16px}.bismillah-divider .line-l{width:60px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}.bismillah-divider .line-r{width:60px;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}.bismillah-divider .label{color:var(--accent);font-size:12px;font-weight:700;letter-spacing:3px}
.verse-card{background:var(--bg-card);border:1px solid var(--border);border-radius:16px;padding:24px 28px;margin-bottom:16px;transition:border-color .35s ease,box-shadow .35s ease;box-shadow:var(--shadow);position:relative;cursor:pointer;animation:fadeIn .5s ease both}.verse-card.active{background:var(--bg-card-active);border-color:rgba(139,105,20,.25);box-shadow:0 0 0 1px rgba(139,105,20,.19),var(--shadow)}#quran-reader-app.dark .verse-card.active{border-color:rgba(201,168,76,.25);box-shadow:0 0 0 1px rgba(201,168,76,.19),var(--shadow)}
.verse-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.verse-num{width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(139,105,20,.37);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--verse-num);flex-shrink:0;letter-spacing:-.3px}#quran-reader-app.dark .verse-num{border-color:rgba(201,168,76,.37)}.verse-actions{display:flex;gap:4px;align-items:center}
.verse-action-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--icon-btn);cursor:pointer;transition:all .2s;text-decoration:none;position:relative}.verse-action-btn:hover{background:var(--accent-soft);color:var(--icon-btn-hover);border-color:var(--border)}
.arabic-line{direction:rtl;text-align:center;font-family:'Amiri Quran','Amiri',serif;font-size:32px;line-height:2;padding:8px 0 12px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px}.arabic-word{padding:2px 8px;border-radius:6px;cursor:pointer;transition:all .2s;display:inline-block}.arabic-word.highlighted{background:var(--hl-bg);color:var(--hl-text)}
.translit-line{text-align:center;font-family:'Nunito Sans',sans-serif;font-size:16px;color:var(--translit);font-weight:300;font-style:italic;letter-spacing:.4px;padding:6px 0 10px;line-height:1.7}
.translations-block{border-top:1px solid var(--border);margin-top:10px;padding-top:12px}.translation-item{margin-bottom:8px}.translation-item.hidden{display:none}.translation-label{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px}.translation-text{font-size:15px;color:var(--translation);line-height:1.7;margin-top:2px}.translation-text.urdu{font-family:'Noto Nastaliq Urdu',serif;direction:rtl}
#tooltip{position:fixed;transform:translateX(-50%);background:var(--tooltip-bg);border:1px solid var(--tooltip-border);border-radius:10px;padding:8px 14px;z-index:999;animation:tooltipIn .2s ease;box-shadow:0 8px 32px rgba(0,0,0,.25);pointer-events:none;display:none}#tooltip.visible{display:block}#tooltip .tip-label{font-size:9px;color:var(--accent);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:2px}#tooltip .tip-text{font-size:14px;color:#FFF;font-weight:500}#quran-reader-app.dark #tooltip .tip-text{color:#E8DCC8}
.overlay{position:fixed;inset:0;z-index:100;display:none}.overlay.open{display:flex}.overlay-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.35);backdrop-filter:blur(4px)}
#share-overlay{align-items:center;justify-content:center;padding:20px;z-index:115}#share-overlay .overlay-backdrop{backdrop-filter:blur(6px);background:rgba(0,0,0,.5)}.share-modal{position:relative;width:100%;max-width:460px;background:var(--settings-bg);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.35);animation:modalIn .3s ease;overflow:hidden}.share-modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 0}.share-modal-head h3{font-size:16px;font-weight:700;color:var(--text)}.share-modal-close{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:16px}.share-modal-close:hover{color:var(--text);background:var(--bg-hover)}.share-modal-body{padding:16px 24px 24px}.share-arabic{font-family:'Amiri',serif;font-size:22px;direction:rtl;text-align:center;color:var(--text);line-height:1.8;padding:12px 0 8px}.share-translation-select{display:flex;align-items:center;gap:8px;margin-bottom:12px}.share-translation-select label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;white-space:nowrap;flex-shrink:0}.share-translation-select select{flex:1;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-size:13px;font-family:inherit;outline:none;cursor:pointer;transition:border-color .2s}.share-translation-select select:focus{border-color:var(--accent)}.share-preview{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:18px;min-height:60px}.share-preview-text{font-size:14px;color:var(--text);line-height:1.7;word-break:break-word}.share-preview-ref{font-size:12px;color:var(--accent);font-weight:600;margin-top:6px}.share-preview-url{font-size:11px;color:var(--text-muted);margin-top:2px;word-break:break-all}.share-buttons{display:flex;gap:8px}.share-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:10px;border:none;cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;transition:all .15s;text-decoration:none}.share-btn:hover{filter:brightness(1.1);transform:translateY(-1px)}.share-btn.whatsapp{background:#25D366;color:#fff}.share-btn.twitter{background:#000;color:#fff}#quran-reader-app.dark .share-btn.twitter{background:#fff;color:#000}.share-btn.copy-btn{background:var(--accent-soft);color:var(--accent);border:1px solid var(--border)}.share-btn.copy-btn:hover{background:var(--accent-glow)}.share-btn.copy-btn.copied{background:var(--accent);color:#fff}
#settings-overlay{justify-content:flex-end}.settings-panel{position:relative;width:380px;max-width:90vw;background:var(--settings-bg);border-left:1px solid var(--border);overflow-y:auto;animation:slideIn .3s ease;box-shadow:-8px 0 40px rgba(0,0,0,.2)}.settings-inner{padding:24px 28px}.settings-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px}.settings-head h2{font-size:20px;font-weight:700;color:var(--text)}.settings-close{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:22px;padding:4px}.setting-section{margin-bottom:28px}.setting-section h3{font-size:11px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:2px;margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)}.setting-section .desc{font-size:12px;color:var(--text-muted);margin-bottom:12px}.checkbox-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;cursor:pointer;margin-bottom:4px;transition:background .2s}.checkbox-row.checked{background:var(--accent-soft)}.checkbox-row input{accent-color:var(--accent);width:16px;height:16px}.checkbox-row .cb-label{font-size:14px;font-weight:600;color:var(--text)}.checkbox-row .cb-lang{font-size:11px;color:var(--text-muted)}.radio-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;cursor:pointer;margin-bottom:4px}.radio-row.checked{background:var(--accent-soft)}.radio-row input{accent-color:var(--accent)}.radio-row span{font-size:14px;font-weight:500;color:var(--text);text-transform:capitalize}.size-slider{padding:10px 12px}.size-slider .size-head{display:flex;justify-content:space-between;margin-bottom:8px}.size-slider .size-head span:first-child{font-size:14px;font-weight:500;color:var(--text)}.size-slider .size-head span:last-child{font-size:13px;font-weight:600;color:var(--accent)}.size-slider input[type="range"]{width:100%;accent-color:var(--accent);height:4px;cursor:pointer}.shortcuts-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;align-items:center}.shortcuts-grid kbd{display:inline-block;min-width:28px;padding:3px 8px;font-size:11px;font-weight:700;font-family:inherit;color:var(--text);background:var(--bg-hover);border:1px solid var(--border);border-radius:6px;text-align:center;line-height:1.4}.shortcuts-grid .sk-desc{font-size:13px;color:var(--text-sec)}@media(max-width:600px){.shortcuts-section{display:none}}.how-to-use-list{list-style:none;padding:0;margin:0}.how-to-use-list li{position:relative;padding:0 0 12px 28px;font-size:14px;color:var(--text-sec);line-height:1.7}.how-to-use-list li:last-child{padding-bottom:0}.how-to-use-list li::before{content:'';position:absolute;left:0;top:7px;width:16px;height:16px;border-radius:50%;background:var(--accent-soft);border:1.5px solid var(--accent)}.how-to-use-list li strong{color:var(--text);font-weight:600}.info-shortcuts-wrap{margin-top:20px}.info-shortcuts-wrap h3{font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px}@media(max-width:600px){.info-shortcuts-wrap{display:none}}.qari-label{font-size:9px;color:var(--text-muted);text-align:center;margin-top:3px;pointer-events:none;letter-spacing:.3px;opacity:.8}.settings-reciter-btn{display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;padding:10px 14px!important;background:var(--accent-soft)!important;border:1px solid var(--accent)!important;border-radius:12px!important;cursor:pointer!important;transition:all .15s!important;font-family:inherit!important;text-align:left!important}.settings-reciter-btn:hover{filter:brightness(1.05)!important}.settings-reciter-btn .sr-avatar{width:36px!important;height:36px!important;border-radius:50%!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:12px!important;font-weight:700!important;color:#fff!important;flex-shrink:0!important}.settings-reciter-btn .sr-info{flex:1!important}.settings-reciter-btn .sr-label{font-size:11px!important;color:var(--text-muted)!important;text-transform:uppercase!important;letter-spacing:1px!important;font-weight:700!important}.settings-reciter-btn .sr-name{font-size:14px!important;font-weight:600!important;color:var(--text)!important}.settings-reciter-btn .sr-chev{color:var(--accent)!important}
#hifz-overlay{align-items:center;justify-content:center;padding:20px;z-index:10000002}.hifz-modal{position:relative;width:100%;max-width:420px;max-height:85vh;overflow-y:auto;background:var(--settings-bg);border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.35);animation:modalIn .3s ease}.hifz-popup-body{padding:28px 32px 32px}.hifz-head{margin-bottom:20px;text-align:center}.hifz-title{font-size:18px;font-weight:700;color:var(--text)}.hifz-subtitle{font-size:13px;color:var(--text-muted);margin-top:4px}.hifz-field{margin-bottom:18px}.hifz-field label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--text-sec);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}.hifz-tip{font-size:14px;color:var(--text-muted);cursor:help;font-weight:400;text-transform:none;letter-spacing:0;position:relative}.hifz-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--tooltip-bg,#2C1810);color:#E8DCC8;font-size:12px;font-weight:400;line-height:1.5;padding:8px 12px;border-radius:10px;white-space:normal;width:220px;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.3);pointer-events:none;opacity:0;transition:opacity .2s;z-index:10}.hifz-tip:hover::after{opacity:1}.hifz-range-row{display:flex;align-items:center;gap:10px}.hifz-range-to{font-size:13px;color:var(--text-muted)}.hifz-select{width:80px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg-surface);color:var(--text);font-size:14px;font-weight:600;font-family:inherit;cursor:pointer}.hifz-chips{display:flex;gap:6px;flex-wrap:wrap}.hifz-chip{padding:6px 14px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text);font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}.hifz-chip:hover{background:var(--bg-hover)}.hifz-chip.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.hifz-start-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;background:linear-gradient(135deg,var(--accent),var(--accent-gradient-end));color:#fff;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 4px 20px var(--accent-glow);margin-top:4px}.hifz-settings-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;color:var(--accent);font-size:13px;font-weight:600;cursor:pointer}.hifz-blink{animation:hifz-icon-blink 2s ease-in-out infinite}@keyframes hifz-icon-blink{0%,100%{opacity:1}50%{opacity:.3}}.hifz-your-turn{position:fixed;bottom:72px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--settings-bg);border:1px solid var(--accent);border-radius:12px;padding:10px 24px;font-size:14px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:8px;opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:91;white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,.15)}.hifz-your-turn.visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}@media(max-width:600px){.hifz-modal{max-width:calc(100vw - 24px)}.hifz-popup-body{padding:20px 22px 24px}.hifz-your-turn{font-size:12px;padding:8px 16px;bottom:62px}}
#info-overlay{align-items:center;justify-content:center;padding:20px;z-index:110}#info-overlay .overlay-backdrop{backdrop-filter:blur(6px);background:rgba(0,0,0,.5)}.info-modal{position:relative;width:100%;max-width:640px;max-height:85vh;overflow-y:auto;background:var(--settings-bg);border:1px solid var(--border);border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.35);animation:modalIn .3s ease}.info-close{position:sticky;top:0;float:right;z-index:2;margin:16px 16px 0 0;width:36px;height:36px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:18px;box-shadow:var(--shadow)}.info-body{padding:32px 36px 36px;clear:both}.info-body .modal-arabic{font-family:'Amiri',serif;font-size:36px;color:var(--accent);margin-bottom:4px}.info-body .modal-title{font-size:18px;font-weight:700;color:var(--text);letter-spacing:.5px}.info-body .modal-subtitle{font-size:14px;color:var(--text-muted);font-style:italic;margin-top:2px}.meta-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin-bottom:24px}.meta-item{display:flex;justify-content:space-between;align-items:baseline;padding:8px 12px;border-radius:8px;background:var(--accent-soft)}.meta-item .ml{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}.meta-item .mv{font-size:14px;font-weight:600;color:var(--text)}.quote-card{position:relative;background:var(--accent-soft);border:1px solid rgba(139,105,20,.15);border-radius:14px;padding:24px 28px;margin-bottom:28px;text-align:center}#quran-reader-app.dark .quote-card{border-color:rgba(201,168,76,.15)}.quote-card .q-mark{position:absolute;top:8px;left:16px;font-family:'Amiri',serif;font-size:44px;color:var(--accent);opacity:.2;line-height:1}.quote-card .q-text{font-family:'Amiri',serif;font-size:18px;color:var(--text);line-height:1.8;font-style:italic;position:relative;z-index:1}.quote-card .q-ref{font-size:12px;color:var(--accent);font-weight:600;margin-top:10px}.yt-section h3{font-size:13px;font-weight:700;color:var(--accent);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;display:flex;align-items:center;gap:8px}.yt-wrap{position:relative;padding-bottom:56.25%;border-radius:14px;overflow:hidden;background:#000;margin-bottom:28px}.yt-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:none;border-radius:14px}
.video-btn{display:inline-flex!important;align-items:center!important;gap:8px!important;background:rgba(255,0,0,.08)!important;border:1px solid rgba(255,0,0,.2)!important;border-radius:10px!important;padding:9px 18px!important;cursor:pointer!important;color:#c00!important;font-size:13px!important;font-weight:600!important;transition:all .2s!important;font-family:inherit!important;margin-left:8px!important}#quran-reader-app.dark .video-btn{background:rgba(255,80,80,.1)!important;border-color:rgba(255,80,80,.25)!important;color:#f66!important}.video-btn:hover{background:rgba(255,0,0,.14)!important;border-color:rgba(255,0,0,.35)!important}
#video-overlay{position:fixed!important;inset:0!important;z-index:112!important;display:none!important;align-items:center!important;justify-content:center!important;padding:20px!important}#video-overlay.open{display:flex!important}#video-overlay .overlay-backdrop{position:absolute!important;inset:0!important;backdrop-filter:blur(6px)!important;background:rgba(0,0,0,.5)!important}.video-modal{position:relative!important;width:100%!important;max-width:700px!important;background:var(--settings-bg)!important;border:1px solid var(--border)!important;border-radius:20px!important;box-shadow:0 24px 80px rgba(0,0,0,.35)!important;animation:modalIn .3s ease!important;overflow:hidden!important}.video-modal-head{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:16px 20px 0!important}.video-modal-head h3{font-size:15px!important;font-weight:700!important;color:var(--text)!important;display:flex!important;align-items:center!important;gap:8px!important}.video-modal-actions{display:flex!important;gap:6px!important;align-items:center!important}.video-modal-actions button{width:34px!important;height:34px!important;border-radius:50%!important;border:1px solid var(--border)!important;background:var(--bg-card)!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important;color:var(--text-muted)!important;font-size:16px!important;transition:all .15s!important}.video-modal-actions button:hover{color:var(--text)!important;background:var(--bg-hover)!important}.video-modal-body{padding:16px 20px 20px!important}.video-modal-body .yt-wrap{margin-bottom:14px!important}.video-subscribe{text-align:center!important;padding-bottom:4px!important}.video-subscribe a{display:inline-flex!important;align-items:center!important;gap:8px!important;background:#c00!important;color:#fff!important;border:none!important;border-radius:8px!important;padding:9px 20px!important;font-size:13px!important;font-weight:700!important;cursor:pointer!important;text-decoration:none!important;transition:all .15s!important;font-family:inherit!important}.video-subscribe a:hover{background:#a00!important;transform:translateY(-1px)!important}
#video-overlay.minimized{inset:auto!important;bottom:80px!important;right:20px!important;left:auto!important;top:auto!important;padding:0!important;width:320px!important;z-index:200!important}#video-overlay.minimized .overlay-backdrop{display:none!important}#video-overlay.minimized .video-modal{max-width:none!important;width:100%!important;border-radius:12px!important;box-shadow:0 8px 40px rgba(0,0,0,.4)!important}#video-overlay.minimized .video-modal-head{padding:6px 10px 0!important}#video-overlay.minimized .video-modal-head h3{font-size:11px!important;text-transform:uppercase!important;letter-spacing:1px!important}#video-overlay.minimized .video-modal-head h3 svg{display:none!important}#video-overlay.minimized .video-modal-actions button{width:26px!important;height:26px!important;font-size:13px!important;border-radius:6px!important}#video-overlay.minimized .video-modal-body{padding:0!important}#video-overlay.minimized .video-modal-body .yt-wrap{margin-bottom:0!important;border-radius:0 0 12px 12px!important}#video-overlay.minimized .video-subscribe{display:none!important}@media(max-width:500px){#video-overlay.minimized{width:240px!important;right:10px!important;bottom:70px!important}}.info-divider{height:1px;background:var(--border);margin:0 0 24px}.info-body h2{font-family:'Amiri',serif;font-size:20px;font-weight:700;color:var(--text);margin-bottom:16px}.info-body p{font-size:15px;color:var(--text-sec);line-height:1.9;margin-bottom:14px}.hadith-ref{font-size:12px;color:var(--text-muted)}.hadith-block{border-left:3px solid var(--accent);padding-left:20px;margin:0 0 22px 4px}.hadith-block p{font-size:14px;font-style:italic}.info-body h3{font-size:16px;font-weight:700;color:var(--text);margin-bottom:10px}
#app-cta{position:fixed;bottom:0;left:0;right:0;z-index:95;transform:translateY(100%);opacity:0;transition:transform .4s ease,opacity .3s ease;pointer-events:none}#app-cta.visible{transform:translateY(0);opacity:1;pointer-events:auto}.app-cta-card{background:var(--settings-bg);border-top:1px solid var(--border);box-shadow:0 -4px 24px rgba(0,0,0,.15)}.app-cta-main{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;cursor:pointer;text-decoration:none;color:inherit;gap:14px;background:var(--accent);transition:filter .15s}.app-cta-main:hover{filter:brightness(1.1)}.app-cta-icon{width:44px;height:44px;border-radius:12px;flex-shrink:0;object-fit:cover}.app-cta-text{flex:1;font-size:17px;font-weight:700;color:#fff;letter-spacing:.3px}.app-cta-chevron{flex-shrink:0;color:rgba(255,255,255,.7);display:flex;align-items:center}.app-cta-dismiss{display:block;text-align:center;padding:13px 20px;font-size:14px;font-weight:600;color:var(--text-muted);cursor:pointer;border:none;background:none;width:100%;font-family:inherit;letter-spacing:.5px;transition:color .15s}.app-cta-dismiss:hover{color:var(--text)}#app-cta.minimized{position:fixed!important;top:auto!important;left:auto!important;right:0!important;bottom:0!important;width:0!important;height:0!important;pointer-events:none!important;background:transparent!important;transform:none!important;opacity:1!important;z-index:70!important}#app-cta.minimized .app-cta-card{position:static!important;background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;pointer-events:none!important;width:0!important;height:0!important;overflow:visible!important}#app-cta.minimized .app-cta-main{position:fixed!important;left:14px!important;bottom:110px!important;right:auto!important;top:auto!important;display:inline-flex!important;width:auto!important;padding:8px 14px 8px 8px!important;border-radius:999px!important;gap:8px!important;box-shadow:0 6px 20px rgba(0,0,0,.35)!important;pointer-events:auto!important;background:var(--accent)!important}#app-cta.minimized .app-cta-text{font-size:13px!important}#app-cta.minimized .app-cta-chevron,#app-cta.minimized .app-cta-dismiss{display:none!important}#app-cta.minimized .app-cta-icon{width:28px!important;height:28px!important;border-radius:8px!important}@media(min-width:769px){#app-cta{display:none!important}}
.player{position:fixed;bottom:0;left:0;right:0;z-index:80;background:var(--player-bg);border-top:1px solid var(--player-border);backdrop-filter:blur(16px)}.progress-bar{height:5px;background:var(--border);cursor:pointer;position:relative}.progress-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-gradient-end));border-radius:0 2px 2px 0;transition:width 50ms linear;position:relative}.progress-knob{position:absolute;right:-6px;top:-4px;width:13px;height:13px;border-radius:50%;background:var(--accent);border:2px solid var(--player-bg);box-shadow:0 0 6px var(--accent-glow)}.player-inner{display:flex;align-items:center;padding:12px 20px 14px;gap:14px;max-width:1060px;margin:0 auto}
.qari-btn{width:42px;height:42px;border-radius:50%;border:2px solid rgba(139,105,20,.31);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;transition:transform .2s;flex-shrink:0}#quran-reader-app.dark .qari-btn{border-color:rgba(201,168,76,.31)}.qari-btn:hover{transform:scale(1.08)}.qari-btn.playing{animation:pulseGlow 2s infinite}.qari-popup{position:absolute;bottom:54px;left:0;width:260px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:0 12px 48px rgba(0,0,0,.3);padding:12px 8px;animation:tooltipIn .25s ease;display:none}.qari-popup.open{display:block}.qari-popup .qp-title{font-size:10px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;padding:4px 12px 10px}.qari-option{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;background:transparent;border:none;border-radius:10px;cursor:pointer;color:var(--text);text-align:left;transition:background .15s;font-family:inherit}.qari-option:hover{background:var(--bg-hover)}.qari-option.selected{background:var(--accent-soft)}.qari-option.focused{background:var(--bg-hover);outline:2px solid var(--accent);outline-offset:-2px}.qari-option .qo-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;object-fit:cover}.qari-option .qo-name{font-size:13px;font-weight:600}.qari-option .qo-check{margin-left:auto;color:var(--accent);font-size:16px}
.player-verse-info{min-width:80px;flex-shrink:0}.player-verse-info .pv-num{font-size:14px;font-weight:700;color:var(--text)}.player-verse-info .pv-num span{font-weight:400;color:var(--text-muted);font-size:12px}.player-verse-info .pv-qari{font-size:10px;color:var(--text-muted);margin-top:2px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-controls{display:flex;align-items:center;gap:8px;margin:0 auto}.player-nav{width:38px;height:38px;border-radius:50%;background:transparent;border:1px solid var(--border);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-sec);transition:all .15s}.player-nav:hover{background:var(--bg-hover)}.player-nav:disabled{opacity:.4;cursor:default;color:var(--text-muted)}.play-btn{width:50px;height:50px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-gradient-end));border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 20px var(--accent-glow);transition:transform .15s}.play-btn:hover{transform:scale(1.06)}.player-time{font-size:12px;font-variant-numeric:tabular-nums;color:var(--text-muted);min-width:70px;text-align:center;flex-shrink:0}.player-aux-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all .15s;position:relative;font-size:13px;font-family:inherit}.player-aux-btn:hover{background:var(--bg-hover);color:var(--text)}.speed-popup,.vol-popup{position:absolute;bottom:46px;left:50%;transform:translateX(-50%);background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.25);animation:tooltipIn .2s ease;display:none}.speed-popup.open,.vol-popup.open{display:block}.speed-popup{padding:8px 4px;min-width:64px}.speed-popup .sp-title{font-size:9px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px;padding:2px 10px 8px;text-align:center}.speed-option{display:block;width:100%;padding:6px 14px;border:none;border-radius:6px;background:transparent;color:var(--text);font-size:13px;font-weight:500;cursor:pointer;text-align:center;transition:background .15s;font-family:inherit}.speed-option.active{background:var(--accent-soft);color:var(--accent);font-weight:700}.vol-popup{padding:16px 14px;min-width:52px;flex-direction:column;align-items:center;gap:8px}.vol-popup.open{display:flex}.vol-popup .vol-val{font-size:11px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}.vol-popup .vol-slider-wrap{height:100px;display:flex;align-items:center;justify-content:center}.vol-popup input[type="range"]{writing-mode:vertical-lr;direction:rtl;width:4px;height:90px;-webkit-appearance:none;appearance:none;border-radius:2px;outline:none;cursor:pointer}.vol-popup input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);border:2px solid var(--player-bg);cursor:pointer}.vol-mute-btn{border:none;background:transparent;cursor:pointer;color:var(--text-muted);padding:2px;display:flex}
/* Gift Modal */
#gift-overlay{align-items:center;justify-content:center;padding:20px;z-index:120}#gift-overlay .overlay-backdrop{backdrop-filter:blur(6px);background:rgba(0,0,0,.5)}.gift-modal{position:relative;width:100%;max-width:440px;background:var(--settings-bg);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.35);animation:modalIn .3s ease;overflow:hidden}.gift-modal-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 0}.gift-modal-head h3{font-size:17px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:8px}.gift-modal-close{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:16px}.gift-modal-close:hover{color:var(--text);background:var(--bg-hover)}.gift-modal-body{padding:16px 24px 24px}.gift-card{background:var(--accent-soft);border:1px solid rgba(139,105,20,.15);border-radius:14px;padding:20px;margin-bottom:14px}#quran-reader-app.dark .gift-card{border-color:rgba(201,168,76,.15)}.gift-card:last-child{margin-bottom:0}.gift-card-icon{width:40px;height:40px;border-radius:10px;background:var(--accent);display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:12px}.gift-card h4{font-size:15px;font-weight:700;color:var(--text);margin-bottom:2px}.gift-card .gift-badge{display:inline-block;font-size:10px;font-weight:700;color:var(--accent);background:rgba(139,105,20,.1);border:1px solid rgba(139,105,20,.2);border-radius:6px;padding:2px 8px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.gift-card p{font-size:13px;color:var(--text-sec);line-height:1.6;margin-bottom:14px}.gift-cta{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-size:13px;font-weight:700;cursor:pointer;text-decoration:none;transition:all .15s;font-family:inherit}.gift-cta:hover{filter:brightness(1.1);transform:translateY(-1px)}.gift-store-btns{display:flex;gap:8px;flex-wrap:wrap}.gift-store-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:10px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;transition:all .15s;font-family:inherit}.gift-store-btn:hover{background:var(--bg-hover);border-color:var(--accent)}
/* Bookmark Promo Modal */
#bookmark-overlay{align-items:center;justify-content:center;padding:20px;z-index:120}#bookmark-overlay .overlay-backdrop{backdrop-filter:blur(6px);background:rgba(0,0,0,.5)}.bookmark-modal{position:relative;width:100%;max-width:360px;background:var(--settings-bg);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 80px rgba(0,0,0,.35);animation:modalIn .3s ease;overflow:hidden;text-align:center;padding:28px 24px}.bookmark-modal-close{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:14px}.bookmark-modal-close:hover{color:var(--text);background:var(--bg-hover)}.bookmark-modal-icon{width:48px;height:48px;border-radius:12px;background:var(--accent-soft);border:1px solid rgba(139,105,20,.2);display:flex;align-items:center;justify-content:center;color:var(--accent);margin:0 auto 14px}.bookmark-modal h3{font-size:16px;font-weight:700;color:var(--text);margin-bottom:6px}.bookmark-modal p{font-size:13px;color:var(--text-sec);line-height:1.6;margin-bottom:18px}.bookmark-modal .gift-store-btns{justify-content:center}
/* QR codes — desktop only, store buttons — mobile only */
.qr-section{display:none;flex-direction:column;align-items:center;margin-bottom:14px}.qr-section img{width:160px;height:160px;border-radius:12px;border:1px solid var(--border);background:#fff;padding:8px}.qr-section .qr-label{font-size:11px;color:var(--text-muted);margin-top:8px;font-weight:600}.mobile-only{display:flex}@media(min-width:769px){.qr-section{display:flex}.mobile-only{display:none!important}}
/* End-of-Surah CTA */
.end-surah-cta{margin-top:32px;padding-top:8px}.end-surah-divider{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:28px}.end-surah-divider .es-line{flex:1;max-width:80px;height:1px;background:linear-gradient(90deg,transparent,var(--accent))}.end-surah-divider .es-line:last-child{background:linear-gradient(90deg,var(--accent),transparent)}.end-surah-divider .es-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.5}.end-surah-title{text-align:center;font-size:18px;font-weight:700;color:var(--text);margin-bottom:20px;font-family:'Amiri',serif}.end-surah-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media(max-width:600px){.end-surah-cards{grid-template-columns:1fr}}.es-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:22px;text-align:center;transition:all .2s}.es-card:hover{border-color:rgba(139,105,20,.3);box-shadow:var(--shadow)}.es-card-icon{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;color:var(--accent);margin:0 auto 12px}.es-card h4{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}.es-card .es-badge{display:inline-block;font-size:9px;font-weight:700;color:var(--accent);background:rgba(139,105,20,.1);border:1px solid rgba(139,105,20,.2);border-radius:5px;padding:2px 7px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.es-card p{font-size:12px;color:var(--text-sec);line-height:1.6;margin-bottom:14px}
/* Info Modal Promo */
.info-promo{margin-top:24px}.info-promo h3{font-family:'Amiri',serif;font-size:18px;font-weight:700;color:var(--text);margin-bottom:14px;text-align:center}.info-promo-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:500px){.info-promo-cards{grid-template-columns:1fr}}.info-promo-card{background:var(--accent-soft);border:1px solid rgba(139,105,20,.15);border-radius:12px;padding:16px;text-align:center}#quran-reader-app.dark .info-promo-card{border-color:rgba(201,168,76,.15)}.info-promo-card h4{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}.info-promo-card p{font-size:11px;color:var(--text-sec);line-height:1.5;margin-bottom:10px}.info-promo-card .gift-cta{font-size:11px;padding:7px 14px}.info-promo-card .gift-store-btns{justify-content:center}.info-promo-card .gift-store-btn{font-size:11px;padding:6px 12px}
/* Ayah Navigator */
.ayah-nav-btn{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg-surface);color:var(--text);cursor:pointer;font-size:13px;font-weight:600;font-family:inherit;transition:all .15s;white-space:nowrap}.ayah-nav-btn:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.ayah-nav-btn .ayah-label{font-size:11px;color:var(--text-muted);font-weight:400}
.ayah-dropdown{position:absolute;top:calc(100% + 6px);left:0;width:220px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.2);padding:8px;display:none;flex-direction:column;animation:tooltipIn .2s ease;z-index:90}.ayah-dropdown.open{display:flex}
.ayah-search{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:14px;font-family:inherit;outline:none;transition:border-color .2s;text-align:center;font-weight:600}.ayah-search:focus{border-color:var(--accent)}.ayah-search::placeholder{color:var(--text-muted);font-weight:400}
.ayah-hint{font-size:11px;color:var(--text-muted);text-align:center;padding:6px 0 2px}
.ayah-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;max-height:260px;overflow-y:auto;margin-top:6px;padding:2px}.ayah-grid::-webkit-scrollbar{width:4px}.ayah-grid::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:2px}
.ayah-grid-btn{padding:6px 2px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text);font-size:12px;font-weight:600;cursor:pointer;text-align:center;transition:all .12s;font-family:inherit}.ayah-grid-btn:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.ayah-grid-btn.current{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}.ayah-grid-btn.focused{outline:2px solid var(--accent);outline-offset:-2px;background:var(--bg-hover)}
/* Player responsive */
@media(max-width:600px){.player-inner{padding:8px 10px 10px;gap:0;justify-content:space-evenly}.player-verse-info{display:none}.player-time{min-width:auto;font-size:11px}.player-controls{gap:4px;margin:0}.play-btn{width:42px;height:42px}.player-nav{width:32px;height:32px}.qari-btn{width:34px;height:34px;font-size:11px}.player-aux-btn{width:30px;height:30px;font-size:11px;min-width:30px}}
/* Gift shimmer */
[data-gift]{position:relative;overflow:hidden}[data-gift]::after{content:'';position:absolute;top:-50%;left:-75%;width:50%;height:200%;background:linear-gradient(90deg,transparent,rgba(201,168,76,.4),transparent);transform:skewX(-20deg);animation:giftShimmer 20s ease-in-out infinite;pointer-events:none;opacity:0}@keyframes giftShimmer{0%,90%{opacity:0;left:-75%}92%{opacity:1;left:-75%}100%{opacity:0;left:125%}}
/* Confetti */
.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;overflow:hidden}.confetti-piece{position:absolute;width:10px;height:10px;opacity:0;animation:confettiFall var(--dur) ease-out forwards}@keyframes confettiFall{0%{transform:translateY(0) rotate(0deg) scale(1);opacity:1}80%{opacity:1}100%{transform:translateY(100vh) rotate(var(--rot)) scale(0.5);opacity:0}}